From bbe6d4870fe16b4dc55c190095060fde1c4e9830 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Wed, 23 Oct 2024 18:20:38 +0300
Subject: [PATCH 1/2] feature: add CardComponentModule[WTEL-5282]

---
 package-lock.json                             |   2 +-
 package.json                                  |   2 +-
 .../useAccessControl/useAccessControl.js      |  33 +++++
 src/composables/useClose/useClose.js          |  13 ++
 src/composables/useValidate/useValidate.js    |  10 ++
 .../components/card-component-wrapper.vue     | 122 ++++++++++++++++++
 .../composables/useCachedItemInstanceName.js  |  33 +++++
 .../composables/useCardComponent.js           |  88 +++++++++++++
 .../composables/useCardTabs.js                |  28 ++++
 9 files changed, 329 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/useAccessControl/useAccessControl.js
 create mode 100644 src/composables/useClose/useClose.js
 create mode 100644 src/composables/useValidate/useValidate.js
 create mode 100644 src/modules/CardComponentModule/components/card-component-wrapper.vue
 create mode 100644 src/modules/CardComponentModule/composables/useCachedItemInstanceName.js
 create mode 100644 src/modules/CardComponentModule/composables/useCardComponent.js
 create mode 100644 src/modules/CardComponentModule/composables/useCardTabs.js

diff --git a/package-lock.json b/package-lock.json
index 88388f7e..45d1b295 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.46-6",
+  "version": "24.10.49",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index cbbc6b5f..b6b04876 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.48",
+  "version": "24.10.49",
   "private": false,
   "scripts": {
     "dev": "vite",
diff --git a/src/composables/useAccessControl/useAccessControl.js b/src/composables/useAccessControl/useAccessControl.js
new file mode 100644
index 00000000..3c198812
--- /dev/null
+++ b/src/composables/useAccessControl/useAccessControl.js
@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+
+export const useAccessControl = () => {
+  const store = useStore();
+  const route = useRoute();
+
+  const hasReadAccess = computed(() => store.getters['userinfo/HAS_READ_ACCESS']({ route }));
+  const hasCreateAccess = computed(() => store.getters['userinfo/HAS_CREATE_ACCESS']({ route }));
+  const hasEditAccess = computed(() => store.getters['userinfo/HAS_EDIT_ACCESS']({ route }));
+  const hasDeleteAccess = computed(() => store.getters['userinfo/HAS_DELETE_ACCESS']({ route }));
+
+  const hasSaveActionAccess = computed(() => {
+    if (route.params.id === 'new') return hasEditAccess.value;
+    return hasCreateAccess.value;
+  });
+
+  const disableUserInput = computed(() => {
+    if (route.params.id === 'new') return !hasEditAccess.value;
+    return !hasCreateAccess.value;
+  });
+
+  return {
+    hasReadAccess,
+    hasCreateAccess,
+    hasEditAccess,
+    hasDeleteAccess,
+
+    hasSaveActionAccess,
+    disableUserInput,
+  };
+};
diff --git a/src/composables/useClose/useClose.js b/src/composables/useClose/useClose.js
new file mode 100644
index 00000000..eac96b5b
--- /dev/null
+++ b/src/composables/useClose/useClose.js
@@ -0,0 +1,13 @@
+import { useRouter } from 'vue-router';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useClose = (name) => {
+  const router = useRouter();
+
+  function close() {
+    if (window.history.length === 1) window.close();
+    return router.push({ name });
+  }
+
+  return { close };
+};
diff --git a/src/composables/useValidate/useValidate.js b/src/composables/useValidate/useValidate.js
new file mode 100644
index 00000000..ec86214d
--- /dev/null
+++ b/src/composables/useValidate/useValidate.js
@@ -0,0 +1,10 @@
+import { useVuelidate } from '@vuelidate/core';
+
+export const useValidate = (schema, data) => {
+  const v$ = useVuelidate(schema, { itemInstance: data  }, { $autoDirty: true });
+
+  return {
+    v$,
+    invalid: v$.$invalid,
+  };
+}
diff --git a/src/modules/CardComponentModule/components/card-component-wrapper.vue b/src/modules/CardComponentModule/components/card-component-wrapper.vue
new file mode 100644
index 00000000..88c523f3
--- /dev/null
+++ b/src/modules/CardComponentModule/components/card-component-wrapper.vue
@@ -0,0 +1,122 @@
+<template>
+  <wt-page-wrapper
+    :actions-panel="!!currentTab.filters"
+  >
+    <template #header>
+      <slot name="header">
+        <wt-page-header
+          :hide-primary="!hasSaveActionAccess"
+          :primary-action="save"
+          :primary-disabled="disabledSave"
+          :primary-text="saveText"
+          :secondary-action="close"
+        >
+          <wt-headline-nav :path="cardPath" />
+        </wt-page-header>
+      </slot>
+
+    </template>
+
+    <template #actions-panel>
+      <slot name="actions-panel">
+        <component
+          :is="currentTab.filters"
+          :namespace="namespace"
+        />
+      </slot>
+    </template>
+
+    <template #main>
+      <slot name="main">
+        <form
+          class="main-container"
+          @submit.prevent="save"
+        >
+          <wt-tabs
+            :current="currentTab"
+            :tabs="tabs"
+            @change="changeTab"
+          />
+          <router-view v-slot="{ Component }">
+            <component
+              :is="Component"
+              :access="{ read: true, edit: !disableUserInput, delete: !disableUserInput, add: !disableUserInput }"
+              :namespace="cardNamespace"
+              :v="v$"
+            />
+          </router-view>
+          <input
+            hidden
+            type="submit"
+          > <!--  submit form on Enter  -->
+        </form>
+      </slot>
+    </template>
+  </wt-page-wrapper>
+</template>
+
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useCardStore } from '../../../store/new/index.js';
+import { useAccessControl } from '../../../composables/useAccessControl/useAccessControl.js';
+import { useCardComponent } from '../composables/useCardComponent.js';
+import { useCardTabs } from '../composables/useCardTabs.js';
+import { useClose } from '../../../composables/useClose/useClose.js';
+import { useValidate } from '../../../composables/useValidate/useValidate.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  tabs: {
+    type: Array,
+    required: true,
+  },
+  path: {
+    type: Array,
+    required: true,
+  },
+  validateSchema: {
+    type: Object,
+    default: {},
+  },
+  routeName: {
+    type: String,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const route = useRoute();
+
+const {
+  namespace: cardNamespace,
+  itemInstance,
+  ...restStore
+} = useCardStore(props.namespace);
+
+const { v$, invalid } = useValidate(props.validateSchema, itemInstance);
+const { isNew, pathName, disabledSave, saveText, save, initialize } = useCardComponent({...restStore, itemInstance, invalid});
+const { hasSaveActionAccess, disableUserInput } = useAccessControl();
+const { currentTab, changeTab } = useCardTabs(props.tabs);
+const { close } = useClose(props.routeName);
+
+const cardPath = computed(() => {
+  return [...props.path, {
+    name: isNew.value ? t('objects.new') : pathName.value,
+    route: {
+      name: currentTab.value.pathName,
+      query: route.query,
+    },
+  }];
+});
+
+initialize();
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/modules/CardComponentModule/composables/useCachedItemInstanceName.js b/src/modules/CardComponentModule/composables/useCachedItemInstanceName.js
new file mode 100644
index 00000000..26f8618f
--- /dev/null
+++ b/src/modules/CardComponentModule/composables/useCachedItemInstanceName.js
@@ -0,0 +1,33 @@
+import get from 'lodash/get.js';
+import { onMounted, ref, watch } from 'vue';
+
+export const useCachedItemInstanceName = (itemInstance, { namePath = 'name' } = {}) => {
+  const name = ref('');
+
+  const updateName = () => {
+    name.value = get(itemInstance.value, namePath);
+  };
+
+  watch(
+    () => itemInstance.value._dirty,
+    (value) => {
+      if (!value) updateName();
+    },
+  );
+
+  onMounted(() => {
+    // itemInstance._dirty isn't init as "false",
+    // so that we should set up first name representation in other way
+    const unwatch = watch(
+      () => itemInstance.value.name,
+      (name) => {
+        updateName();
+        if (name) unwatch();
+      },
+    );
+  });
+
+  return {
+    name,
+  };
+};
diff --git a/src/modules/CardComponentModule/composables/useCardComponent.js b/src/modules/CardComponentModule/composables/useCardComponent.js
new file mode 100644
index 00000000..ae58e07f
--- /dev/null
+++ b/src/modules/CardComponentModule/composables/useCardComponent.js
@@ -0,0 +1,88 @@
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useCachedItemInstanceName } from './useCachedItemInstanceName.js';
+
+export const useCardComponent = (params) => {
+  const { id,
+    itemInstance,
+    invalid,
+
+    loadItem,
+    addItem,
+    updateItem,
+    setId,
+    resetState } = params;
+
+  const router = useRouter();
+  const route = useRoute();
+  const { t } = useI18n();
+
+  const { name: pathName } = useCachedItemInstanceName(itemInstance);
+
+  const isNew = computed(() => route.params.id === 'new');
+  const disabledSave = computed(() => {
+    return invalid?.value || !itemInstance.value._dirty;
+  });
+
+  const saveText = computed(() => {
+    return isNew.value || itemInstance.value._dirty ? t('objects.save') : t('objects.saved');
+  });
+
+  const redirectToEdit = () => {
+    return router.replace({
+      ...route,
+      params: { id },
+    });
+  };
+
+  const save = async () => {
+    if (disabledSave.value) return;
+
+    if (isNew.value) {
+      await addItem();
+    } else {
+      await updateItem();
+    }
+
+    if (id.value) {
+      await redirectToEdit();
+    }
+  };
+
+  async function initializeCard() {
+    try {
+      const { id } = route.params;
+      await setId(id);
+      await loadItem();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function initialize(){
+    onMounted(() => {
+      initializeCard();
+    });
+
+    onUnmounted(() => {
+      resetState();
+    });
+  }
+
+
+  return {
+    id,
+    itemInstance,
+    isNew,
+    pathName,
+    disabledSave,
+    saveText,
+
+    save,
+    initialize,
+  }
+}
+
+
diff --git a/src/modules/CardComponentModule/composables/useCardTabs.js b/src/modules/CardComponentModule/composables/useCardTabs.js
new file mode 100644
index 00000000..a84bf3da
--- /dev/null
+++ b/src/modules/CardComponentModule/composables/useCardTabs.js
@@ -0,0 +1,28 @@
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export const useCardTabs = (tabs) => {
+  const router = useRouter();
+  const route = useRoute();
+
+  const currentTab = computed(() => {
+    return tabs.find(({ pathName }) => route.name === pathName) || tabs[0];
+  });
+
+  function changeTab(tab) {
+    const { params, query, hash } = route;
+
+    return router.push({
+      name: tab.pathName,
+      params,
+      query,
+      hash,
+    });
+  }
+
+  return {
+    currentTab,
+
+    changeTab,
+  }
+}

From 84058ccacdd034107ef04498281f96363d48d4b2 Mon Sep 17 00:00:00 2001
From: Lera24 <bedulinavalera21@gmail.com>
Date: Thu, 24 Oct 2024 13:20:16 +0300
Subject: [PATCH 2/2] fix: delete component and fix useValidate[WTEL-5282]

---
 .../useCachedItemInstanceName.js              |   0
 .../useCard}/useCardComponent.js              |   2 +-
 .../useCard}/useCardTabs.js                   |   0
 src/composables/useValidate/useValidate.js    |   2 +-
 .../components/card-component-wrapper.vue     | 122 ------------------
 5 files changed, 2 insertions(+), 124 deletions(-)
 rename src/{modules/CardComponentModule/composables => composables/useCachedItemInstanceName}/useCachedItemInstanceName.js (100%)
 rename src/{modules/CardComponentModule/composables => composables/useCard}/useCardComponent.js (93%)
 rename src/{modules/CardComponentModule/composables => composables/useCard}/useCardTabs.js (100%)
 delete mode 100644 src/modules/CardComponentModule/components/card-component-wrapper.vue

diff --git a/src/modules/CardComponentModule/composables/useCachedItemInstanceName.js b/src/composables/useCachedItemInstanceName/useCachedItemInstanceName.js
similarity index 100%
rename from src/modules/CardComponentModule/composables/useCachedItemInstanceName.js
rename to src/composables/useCachedItemInstanceName/useCachedItemInstanceName.js
diff --git a/src/modules/CardComponentModule/composables/useCardComponent.js b/src/composables/useCard/useCardComponent.js
similarity index 93%
rename from src/modules/CardComponentModule/composables/useCardComponent.js
rename to src/composables/useCard/useCardComponent.js
index ae58e07f..2ce6bbbe 100644
--- a/src/modules/CardComponentModule/composables/useCardComponent.js
+++ b/src/composables/useCard/useCardComponent.js
@@ -2,7 +2,7 @@ import { computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { useCachedItemInstanceName } from './useCachedItemInstanceName.js';
+import { useCachedItemInstanceName } from '../useCachedItemInstanceName/useCachedItemInstanceName.js';
 
 export const useCardComponent = (params) => {
   const { id,
diff --git a/src/modules/CardComponentModule/composables/useCardTabs.js b/src/composables/useCard/useCardTabs.js
similarity index 100%
rename from src/modules/CardComponentModule/composables/useCardTabs.js
rename to src/composables/useCard/useCardTabs.js
diff --git a/src/composables/useValidate/useValidate.js b/src/composables/useValidate/useValidate.js
index ec86214d..a3d5d7e6 100644
--- a/src/composables/useValidate/useValidate.js
+++ b/src/composables/useValidate/useValidate.js
@@ -1,7 +1,7 @@
 import { useVuelidate } from '@vuelidate/core';
 
 export const useValidate = (schema, data) => {
-  const v$ = useVuelidate(schema, { itemInstance: data  }, { $autoDirty: true });
+  const v$ = useVuelidate(schema, data, { $autoDirty: true });
 
   return {
     v$,
diff --git a/src/modules/CardComponentModule/components/card-component-wrapper.vue b/src/modules/CardComponentModule/components/card-component-wrapper.vue
deleted file mode 100644
index 88c523f3..00000000
--- a/src/modules/CardComponentModule/components/card-component-wrapper.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <wt-page-wrapper
-    :actions-panel="!!currentTab.filters"
-  >
-    <template #header>
-      <slot name="header">
-        <wt-page-header
-          :hide-primary="!hasSaveActionAccess"
-          :primary-action="save"
-          :primary-disabled="disabledSave"
-          :primary-text="saveText"
-          :secondary-action="close"
-        >
-          <wt-headline-nav :path="cardPath" />
-        </wt-page-header>
-      </slot>
-
-    </template>
-
-    <template #actions-panel>
-      <slot name="actions-panel">
-        <component
-          :is="currentTab.filters"
-          :namespace="namespace"
-        />
-      </slot>
-    </template>
-
-    <template #main>
-      <slot name="main">
-        <form
-          class="main-container"
-          @submit.prevent="save"
-        >
-          <wt-tabs
-            :current="currentTab"
-            :tabs="tabs"
-            @change="changeTab"
-          />
-          <router-view v-slot="{ Component }">
-            <component
-              :is="Component"
-              :access="{ read: true, edit: !disableUserInput, delete: !disableUserInput, add: !disableUserInput }"
-              :namespace="cardNamespace"
-              :v="v$"
-            />
-          </router-view>
-          <input
-            hidden
-            type="submit"
-          > <!--  submit form on Enter  -->
-        </form>
-      </slot>
-    </template>
-  </wt-page-wrapper>
-</template>
-
-
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useCardStore } from '../../../store/new/index.js';
-import { useAccessControl } from '../../../composables/useAccessControl/useAccessControl.js';
-import { useCardComponent } from '../composables/useCardComponent.js';
-import { useCardTabs } from '../composables/useCardTabs.js';
-import { useClose } from '../../../composables/useClose/useClose.js';
-import { useValidate } from '../../../composables/useValidate/useValidate.js';
-
-const props = defineProps({
-  namespace: {
-    type: String,
-    required: true,
-  },
-  tabs: {
-    type: Array,
-    required: true,
-  },
-  path: {
-    type: Array,
-    required: true,
-  },
-  validateSchema: {
-    type: Object,
-    default: {},
-  },
-  routeName: {
-    type: String,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-const route = useRoute();
-
-const {
-  namespace: cardNamespace,
-  itemInstance,
-  ...restStore
-} = useCardStore(props.namespace);
-
-const { v$, invalid } = useValidate(props.validateSchema, itemInstance);
-const { isNew, pathName, disabledSave, saveText, save, initialize } = useCardComponent({...restStore, itemInstance, invalid});
-const { hasSaveActionAccess, disableUserInput } = useAccessControl();
-const { currentTab, changeTab } = useCardTabs(props.tabs);
-const { close } = useClose(props.routeName);
-
-const cardPath = computed(() => {
-  return [...props.path, {
-    name: isNew.value ? t('objects.new') : pathName.value,
-    route: {
-      name: currentTab.value.pathName,
-      query: route.query,
-    },
-  }];
-});
-
-initialize();
-</script>
-
-<style lang="scss" scoped>
-</style>