@webitel/ui-sdk 3.1.3 → 3.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/locale/en/en.js

@@ -293,5 +293,11 @@ export default {
         score: 'Score',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Confirm deletion',
+      askingAlert: 'Are you sure you want to delete {count} item? | Are you sure you want to delete {count} items?',
+      undoneActionAlert: 'This action cannot be undone.',
+      deleteAll: 'ALL',
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -290,5 +290,11 @@ export default {
         score: 'Бал',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Подтвердите удаление',
+      askingAlert: 'Вы уверенны, что хотите удалить {count} запись? | Вы уверенны, что хотите удалить {count} записей?',
+      undoneActionAlert: 'Это действие не может быть отменено.',
+      deleteAll: 'ВСЕ',
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -290,5 +290,11 @@ export default {
         score: 'Бал',
       },
     },
+    deleteConfirmationPopup: {
+      title: 'Підтвердіть видалення',
+      askingAlert: 'Ви впевнені, що хочете видалити {count} запис? | Ви впевнені, що хочете видалити {count} записів?',
+      undoneActionAlert: 'Дана дія не може бути скасована.',
+      deleteAll: 'ВСІ',
+    },
   },
 };

package/src/modules/DeleteConfirmationPopup/delete-confirmation-popup.vue

@@ -0,0 +1,96 @@
+<template>
+  <wt-popup
+    class="delete-confirmation-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>{{ $t('webitelUI.deleteConfirmationPopup.title') }}</template>
+    <template v-slot:main>
+      <p>
+        {{ deleteMessage }}
+        {{ $t('webitelUI.deleteConfirmationPopup.undoneActionAlert') }}
+      </p>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        :disabled="isDeleting"
+        @click="cancel"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+      <wt-button
+        color="danger"
+        :loading="isDeleting"
+        @click="confirm"
+      >{{ $t('reusable.delete') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  deleteCount: {
+    type: Number,
+    required: true,
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits([
+  'confirm',
+  'cancel',
+  'close',
+]);
+
+const { t } = useI18n();
+
+const isDeleting = ref(false);
+
+const deleteMessage = computed(() => {
+  if (props.deleteCount === 0) {
+    return t(
+      'webitelUI.deleteConfirmationPopup.askingAlert',
+      2,
+      null,
+      { count: t('webitelUI.deleteConfirmationPopup.deleteAll') },
+    );
+  }
+  return t(
+    'webitelUI.deleteConfirmationPopup.askingAlert',
+    props.deleteCount === 1 ? 1 : 2,
+    null,
+    { count: props.deleteCount },
+  );
+});
+
+function close() {
+  emit('close');
+}
+
+async function confirm() {
+  try {
+    isDeleting.value = true;
+    emit('confirm');
+    await props.callback();
+  } finally {
+    isDeleting.value = false;
+    close();
+  }
+}
+
+function cancel() {
+  emit('cancel');
+  close();
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/DeleteConfirmationPopup/useDeleteConfirmationPopup.js

@@ -0,0 +1,33 @@
+import { ref } from 'vue';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useDeleteConfirmationPopup = () => {
+  const isVisible = ref(false);
+  const deleteCount = ref(null);
+  const deleteCallback = ref(null);
+
+  function askDeleteConfirmation({ deleted, callback }) {
+    if (Array.isArray(deleted)) deleteCount.value = deleted.length;
+    else deleteCount.value = 1;
+    isVisible.value = true;
+    deleteCallback.value = callback;
+  }
+
+  function confirmDelete() {
+    return deleteCallback.value();
+  }
+
+  function closeDelete() {
+    isVisible.value = false;
+  }
+
+  return {
+    isVisible,
+    deleteCount,
+    deleteCallback,
+
+    askDeleteConfirmation,
+    confirmDelete,
+    closeDelete,
+  };
+};

package/src/store/BaseStoreModules/ApiStoreModule.js

@@ -1,29 +1,37 @@
-import BaseStoreModule
-  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+import BaseStoreModule from './BaseStoreModule';
 
 export default class ApiStoreModule extends BaseStoreModule {
   generateAPIActions(api) {
     if (!api) throw new ReferenceError('pass API module!');
     this.actions
       .GET_LIST = (
-      context,
-      params = {},
-    ) => api.getList({ ...context.state, ...params });
+      _,
+      { context: callerContext = {}, params = {} },
+    ) => api.getList({ ...callerContext.state, ...params });
     this.actions
       .GET_ITEM = (
-      context,
-      params = {},
-    ) => api.get({ ...context.state, ...params });
+      _,
+      { context: callerContext = {}, params = {} } = {},
+    ) => api.get({ ...callerContext.state, ...params });
     this.actions
-      .POST_ITEM = (context) => api.add(context.state);
+      .POST_ITEM = (
+      _,
+      { context: callerContext = {} } = {},
+    ) => api.add(callerContext.state);
     this.actions
-      .PATCH_ITEM = (context, { id, changes }) => (
-      api.patch({ ...context.state, id, changes })
+      .PATCH_ITEM = (_, { context: callerContext = {}, id, changes }) => (
+      api.patch({ ...callerContext.state, id, changes })
     );
     this.actions
-      .UPD_ITEM = (context) => api.update(context.state);
+      .UPD_ITEM = (
+      _,
+      { context: callerContext = {} } = {},
+    ) => api.update(callerContext.state);
     this.actions
-      .DELETE_ITEM = (context, id) => api.delete({ ...context.state, id });
+      .DELETE_ITEM = (
+      _,
+      { context: callerContext = {}, id },
+    ) => api.delete({ ...callerContext.state, id });
     return this;
   }
 }

package/src/store/BaseStoreModules/CardStoreModule.js

@@ -1,6 +1,5 @@
-import BaseStoreModule
-  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
 import deepCopy from 'deep-copy';
+import BaseStoreModule from './BaseStoreModule';
 
 export default class CardStoreModule extends BaseStoreModule {
   state = {
@@ -18,20 +17,20 @@ export default class CardStoreModule extends BaseStoreModule {
     },
     LOAD_ITEM: async (context) => {
       if (context.state.itemId) {
-        const item = await context.dispatch('api/GET_ITEM');
+        const item = await context.dispatch('api/GET_ITEM', { context });
         context.commit('SET_ITEM', item);
       }
     },
     ADD_ITEM: async (context) => {
       if (!context.state.itemId) {
-        const { id } = await context.dispatch('api/POST_ITEM');
+        const { id } = await context.dispatch('api/POST_ITEM', { context });
         await context.dispatch('SET_ITEM_ID', id);
         context.dispatch('LOAD_ITEM');
       }
     },
     UPDATE_ITEM: async (context) => {
       if (context.state.itemInstance._dirty) {
-        await context.dispatch('api/UPD_ITEM');
+        await context.dispatch('api/UPD_ITEM', { context });
         context.dispatch('LOAD_ITEM');
       }
     },

package/src/store/BaseStoreModules/TableStoreModule.js

@@ -1,9 +1,8 @@
 import {
   SortSymbols,
   sortToQueryAdapter,
-} from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
-import BaseStoreModule
-  from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+} from '../../scripts/sortQueryAdapters';
+import BaseStoreModule from './BaseStoreModule';
 
 export default class TableStoreModule extends BaseStoreModule {
   state = {
@@ -27,7 +26,7 @@ export default class TableStoreModule extends BaseStoreModule {
         let {
           items = [],
           next = false,
-        } = await context.dispatch('api/GET_LIST', query);
+        } = await context.dispatch('api/GET_LIST', { context, params: query });
         /* we should set _isSelected property to all items in tables cause their checkbox selection
         * is based on this property. Previously, this prop was set it api consumers, but now
         * admin-specific were replaced by webitel-sdk consumers and i supposed it will be
@@ -100,7 +99,7 @@ export default class TableStoreModule extends BaseStoreModule {
       const id = item?.id || context.state.dataList[index].id;
       const changes = { [prop]: value };
       try {
-        await context.dispatch('api/PATCH_ITEM', { id, changes });
+        await context.dispatch('api/PATCH_ITEM', { context, id, changes });
         context.commit('PATCH_ITEM_PROPERTY', {
           item, index, prop, value,
         });
@@ -124,7 +123,7 @@ export default class TableStoreModule extends BaseStoreModule {
     },
     DELETE_SINGLE: async (context, { id }) => {
       try {
-        await context.dispatch('api/DELETE_ITEM', id);
+        await context.dispatch('api/DELETE_ITEM', { context, id });
       } catch (err) {
         throw err;
       }