Feat/crm sources

package.json

@@ -11,11 +11,10 @@
   },
   "type": "module",
   "dependencies": {
-    "@vue/compat": "^3.5.1",
+    "@vue/compat": "^3.4.27",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
-    "@webitel/ui-sdk": "^24.10.5",
     "axios": "^1.7.7",
     "deep-equal": "^2.2.1",
     "dompurify": "^3.1.2",
@@ -27,7 +26,7 @@
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2",
     "vuex": "^4.1.0",
-    "webitel-sdk": "^24.4.16"
+    "webitel-sdk": "^24.8.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "5.1.3",
@@ -42,6 +41,7 @@
     "vite": "^5.4.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svg-sprite": "^0.5.2",
+    "vite-plugin-vue-devtools": "^7.4.6",
     "vitest": "^2.0.5"
   }
 }

src/app/api/PermissionsAPIService/APIPermissionsGetter.js

@@ -0,0 +1,84 @@
+import { getDefaultGetListResponse, getDefaultGetParams } from '@webitel/ui-sdk/src/api/defaults/index.js';
+import applyTransform, {
+  camelToSnake,
+  generateUrl,
+  merge,
+  mergeEach,
+  notify,
+  sanitize,
+  snakeToCamel,
+  starToSearch,
+} from '@webitel/ui-sdk/src/api/transformers/index.js';
+import instance from '../instance';
+
+export default class APIPermissionsGetter {
+  nestedUrl = 'acl';
+
+  constructor(url) {
+    this.baseUrl = url;
+
+    this.listGetter = async ({ parentId, ...params }) => {
+      const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id'];
+
+      const defaultObject = {
+        user: false,
+      };
+
+      const url = applyTransform(params, [
+        merge(getDefaultGetParams()),
+        starToSearch('search'),
+        (params) => ({
+          ...params,
+          q: params.search,
+        }),
+        sanitize(fieldsToSend),
+        camelToSnake(),
+        generateUrl(`${this.baseUrl}/${parentId}/${this.nestedUrl}`),
+      ]);
+      try {
+        const response = await instance.get(url);
+        const { items, next } = applyTransform(response.data, [
+          snakeToCamel(),
+          merge(getDefaultGetListResponse()),
+        ]);
+        return {
+          items: applyTransform(items, [
+            mergeEach(defaultObject),
+            APIPermissionsGetter.handlePermissionsList,
+          ]),
+          next,
+        };
+      } catch (err) {
+        throw applyTransform(err, [notify]);
+      }
+    };
+  }
+
+  static handlePermissionsList(items) {
+    return items.map((item) => ({
+      ...item,
+      access: {
+        x: {
+          id: (item.granted.match(/x/g) || []).length + 1,
+          rule: 'x'.repeat((item.granted.match(/x/g) || []).length),
+        },
+        r: {
+          id: (item.granted.match(/r/g) || []).length + 1,
+          rule: 'r'.repeat((item.granted.match(/r/g) || []).length),
+        },
+        w: {
+          id: (item.granted.match(/w/g) || []).length + 1,
+          rule: 'w'.repeat((item.granted.match(/w/g) || []).length),
+        },
+        d: {
+          id: (item.granted.match(/d/g) || []).length + 1,
+          rule: 'd'.repeat((item.granted.match(/d/g) || []).length),
+        },
+      },
+    }));
+  }
+
+  async getList(params) {
+    return this.listGetter(params);
+  }
+}

src/app/api/PermissionsAPIService/APIPermissionsPatcher.js

@@ -0,0 +1,27 @@
+import applyTransform, {
+  camelToSnake,
+  notify,
+  snakeToCamel,
+} from '@webitel/ui-sdk/src/api/transformers/index.js';
+import instance from '../instance';
+
+export default class APIPermissionsPatcher {
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+    this.patcher = async ({ changes, id }) => {
+      const afterUrl = 'acl';
+      const body = applyTransform(changes, [camelToSnake()]);
+      const url = `${baseUrl}/${id}/${afterUrl}`;
+      try {
+        const response = await instance.patch(url, body);
+        return applyTransform(response.data, [snakeToCamel()]);
+      } catch (err) {
+        throw applyTransform(err, [notify]);
+      }
+    };
+  }
+
+  async patchItem({ id, changes }) {
+    return this.patcher({ id, changes });
+  }
+}

src/app/components/actions/delete-all-action.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="delete-all-action">
+    <wt-tooltip>
+      <template #activator>
+        <wt-icon-btn
+          class="icon-action"
+          icon="bucket"
+          v-bind="$attrs"
+          @click="$emit('click')"
+        />
+      </template>
+      {{ actionPanelDeleteTooltip }}
+    </wt-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeleteAllAction',
+  props: {
+    selectedCount: {
+      type: Number,
+    },
+  },
+  computed: {
+    actionPanelDeleteTooltip() {
+      return this.selectedCount
+        ? this.$t('iconHints.deleteSelected', {
+            count: this.selectedCount,
+          })
+        : this.$t('iconHints.deleteAll');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.delete-all-action {
+  line-height: 0;
+}
+</style>

src/app/components/actions/index.js

@@ -0,0 +1,5 @@
+import DeleteAllAction from './delete-all-action.vue';
+
+const actions = [DeleteAllAction];
+
+export default actions;

src/app/composables/useDummy.js

@@ -0,0 +1,58 @@
+import IsEmpty from '@webitel/ui-sdk/src/scripts/isEmpty';
+import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
+import { computed, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import defaultDummyPicAfterSearchDark from '../assets/dummy-dark.svg';
+import defaultDummyPicAfterSearchLight from '../assets/dummy-light.svg';
+
+export function useDummy({
+  namespace,
+  showAction,
+  hiddenText,
+  dummyPic,
+  dummyText,
+  dummyPicAfterSearch,
+  dummyTextAfterSearch = 'objects.emptyResultSearch',
+}) {
+  const store = useStore();
+  const route = useRoute();
+
+  const dummy = ref('');
+
+  const dataList = computed(() => getNamespacedState(store.state, namespace).dataList);
+  const search = computed(() => getNamespacedState(store.state, namespace).search);
+
+  const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+  const dummyImgAfterSearch = computed(() => {
+    if (dummyPicAfterSearch) return dummyPicAfterSearch;
+    return darkMode.value ? defaultDummyPicAfterSearchDark : defaultDummyPicAfterSearchLight;
+  });
+
+  watch(
+    () => dataList,
+    () => {
+      if (!dataList.value.length) {
+        if (
+          IsEmpty(route?.query)
+            ? search.value
+            : Object.values(route.query).some((query) => query.length)
+        ) {
+          return (dummy.value = {
+            src: dummyImgAfterSearch,
+            text: dummyTextAfterSearch,
+          });
+        }
+        return (dummy.value = {
+          src: dummyPic,
+          text: dummyText,
+          showAction,
+          hiddenText,
+        });
+      }
+      return (dummy.value = '');
+    },
+    { deep: true },
+  );
+  return { dummy };
+}

src/app/css/main.scss

@@ -1,12 +1,21 @@
 @import '@webitel/ui-sdk/src/css/main';
+@import './objects/table-page';
+@import './objects/objects';
 
 //disables scrollbar on 100vh auth on small laptops
 body {
+  @extend %wt-scrollbar;
   @extend %typo-body-1;
   display: flex;
   min-width: 100%;
   min-height: 100%;
   color: var(--text-main-color);
+  background: var(--wt-page-wrapper-background-color);
+}
+
+#app {
+  min-width: 100%;
+  min-height: 100%;
 }
 
 .wt-page-wrapper {
@@ -25,6 +34,7 @@ body {
 .table-wrapper {
   flex-grow: 1;
   display: flex;
+  padding-top: var(--spacing-xs);
   flex-direction: column;
   gap: var(--spacing-xs);
   max-height: 100%;
@@ -70,3 +80,74 @@ a {
   text-decoration: none;
   color: #000;
 }
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+// helper class
+.no-padding {
+  padding: 0;
+}
+
+.box-shadow {
+  //box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.2), 0px 3px 16px rgba(0, 0, 0, 0.12), 0px 9px 12px rgba(0, 0, 0, 0.14);
+  box-shadow: rgba(0, 0, 0, 0.08) 0 8px 18px;
+}
+
+.icon-action {
+  cursor: pointer;
+
+  &:before {
+    transition: var(--transition);
+  }
+
+  &:hover:before {
+    color: #000;
+  }
+}
+
+// helper underline class
+.border-underline {
+  position: relative;
+
+  &:before {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+    left: 0;
+    height: 1px;
+    content: '';
+  }
+}
+
+$scrollbar-bg-color: #EAEAEA;
+$srollbar-thumb-color: var(--primary-color);
+$srollbar-border-radius: 4px;
+
+.scrollbar {
+  // scrollbar itself
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 6px;
+    cursor: pointer;
+    background-color: $scrollbar-bg-color;
+  }
+
+  // scrollable element
+  &::-webkit-scrollbar-thumb {
+    width: 4px;
+    height: 6px;
+    border-radius: $srollbar-border-radius;
+    background-color: $srollbar-thumb-color;
+  }
+}
+
+.hidden {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.value-pair-wrap {
+  position: relative;
+}