Merge pull request #349 from webitel/feat/implement-wt-confirm-dialog…

…-component

feat: Implement wt-confirm-dialog component. Update delete-confirmation-popup module [WTEL-5432](https://webitel.atlassian.net/browse/WTEL-5432)

docs/pages/webitel-ui/components/wt-confirm-dialog/Readme.md

@@ -0,0 +1,28 @@
+<script setup>
+import Specs from './component-specs.vue';
+import ExampleTableDeleteDialog from './examples/example-table-delete-dialog.vue';
+import ExampleDeleteDialog from './examples/example-delete-dialog.vue';
+</script>
+
+# WtConfirmDialog
+
+## Specs
+<Specs />
+
+## Confirm delete dialog
+::: raw
+<ExampleDeleteDialog />
+:::
+
+::: details Code
+<<< ./examples/example-delete-dialog.vue
+:::
+
+## Table Confirm delete dialog
+::: raw
+<ExampleTableDeleteDialog />
+:::
+
+::: details Code
+<<< ./examples/example-table-delete-dialog.vue
+:::

docs/pages/webitel-ui/components/wt-confirm-dialog/component-specs.vue

@@ -0,0 +1,12 @@
+<script setup>
+import WtConfirmDialog from '../../../../../src/components/wt-confirm-dialog/wt-confirm-dialog.vue';
+
+</script>
+
+<template>
+  <component-info :info="WtConfirmDialog.docs" />
+</template>
+
+<style scoped lang="scss">
+
+</style>

docs/pages/webitel-ui/components/wt-confirm-dialog/examples/example-delete-dialog.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { ref } from 'vue';
+
+const isShowDialog = ref(false)
+
+const callback = async () => {
+  return new Promise(resolve => setTimeout(() => {
+    resolve()
+  }, 500))
+}
+</script>
+
+<template>
+  <wt-button @click="isShowDialog = true">Show dialog</wt-button>
+  <wt-confirm-dialog
+    :shown="isShowDialog"
+    :title="$t('webitelUI.deleteConfirmationPopup.title')"
+    @close="isShowDialog = false"
+    @confirm="isShowDialog = false"
+    :callback="callback"
+  />
+</template>

docs/pages/webitel-ui/components/wt-confirm-dialog/examples/example-table-delete-dialog.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const isShowDialog = ref(false);
+const deleteCount = ref(1);
+
+const deleteMessage = computed(() => {
+  if (deleteCount.value === 0) {
+    return t('webitelUI.deleteConfirmationPopup.tableAskingAlert', 2, null, {
+      count: t('webitelUI.deleteConfirmationPopup.deleteAll'),
+    });
+  }
+  return t('webitelUI.deleteConfirmationPopup.tableAskingAlert', { count: deleteCount.value }, null);
+});
+
+const callback = async () => {
+  return new Promise(resolve => setTimeout(() => {
+    resolve()
+  }, 500))
+}
+</script>
+
+<template>
+  <div style="display: flex;gap: var(--spacing-xs);">
+    <wt-button @click="isShowDialog = true">Show dialog</wt-button>
+    <wt-input :value="deleteCount" @input="deleteCount = $event" />
+  </div>
+  <wt-confirm-dialog
+    :shown="isShowDialog"
+    :title="$t('webitelUI.deleteConfirmationPopup.title')"
+    :deleteMessage="deleteMessage"
+    :callback="callback"
+    @close="isShowDialog = false"
+  >
+    <template #actions="{ isDeleting, close, confirm}">
+      <wt-button
+        :loading="isDeleting"
+        @click="confirm"
+      >
+        {{ $t('vocabulary.yes') }}
+      </wt-button>
+      <wt-button
+        :disabled="isDeleting"
+        color="secondary"
+        @click="close"
+      >
+        {{ $t('vocabulary.no') }}
+      </wt-button>
+    </template>
+  </wt-confirm-dialog>
+</template>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.69",
+  "version": "24.10.70",
   "private": false,
   "scripts": {
     "dev": "vite",

src/components/index.js

@@ -8,6 +8,7 @@ import WtButtonSelect from './wt-button-select/wt-button-select.vue';
 import WtButton from './wt-button/wt-button.vue';
 import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
 import WtChip from './wt-chip/wt-chip.vue';
+import WtConfirmDialog from './wt-confirm-dialog/wt-confirm-dialog.vue';
 import WtContextMenu from './wt-context-menu/wt-context-menu.vue';
 import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
 import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
@@ -76,6 +77,7 @@ const Components = {
   WtInputInfo,
   WtButton,
   WtChip,
+  WtConfirmDialog,
   WtDivider,
   WtTooltip,
   WtLabel,

src/components/wt-confirm-dialog/wt-confirm-dialog.vue

@@ -0,0 +1,97 @@
+<template>
+  <wt-popup
+    class="wt-confirm-dialog"
+    size="sm"
+    v-bind="attrs"
+    @close="close"
+  >
+    <template #title>
+      {{ title }}
+    </template>
+    <template #main>
+      <slot name="main">
+        <div class="wt-confirm-dialog__content">
+          <p class="wt-confirm-dialog__message">
+            {{ deleteMessage ? deleteMessage : $t('webitelUI.deleteConfirmationPopup.askingAlert', { subject }) }}
+          </p>
+        </div>
+      </slot>
+    </template>
+    <template #actions>
+      <slot name="actions" :isDeleting="isDeleting" :confirm="confirm" :close="close">
+        <wt-button
+          :disabled="isDeleting"
+          color="secondary"
+          @click="close"
+        >
+          {{ $t('reusable.cancel') }}
+        </wt-button>
+        <wt-button
+          :loading="isDeleting"
+          color="error"
+          @click="confirm"
+        >
+          {{ $t('reusable.delete') }}
+        </wt-button>
+      </slot>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { ref, useAttrs } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  deleteMessage: {
+    type: String,
+    default: '',
+  },
+  subject: {
+    type: String,
+    default: '',
+  },
+  callback: {
+    type: Function,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close', 'confirm']);
+
+const attrs = useAttrs();
+
+const isDeleting = ref(false);
+
+function close() {
+  emit('close');
+}
+
+async function confirm() {
+  try {
+    isDeleting.value = true;
+
+    await props.callback()
+    close();
+  } finally {
+    isDeleting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.wt-confirm-dialog__content {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.wt-confirm-dialog__message {
+  text-align: center;
+}
+
+</style>

src/locale/en/en.js

@@ -385,6 +385,8 @@ export default {
     deleteConfirmationPopup: {
       title: 'Confirm deletion',
       askingAlert:
+        'Are you sure you want to delete {subject}? This action cannot be undone.',
+      tableAskingAlert:
         'Are you sure you want\n to delete {count} record? | Are you sure you want\n to delete {count} records?',
       deleteAll: 'ALL',
     },

src/locale/ru/ru.js

@@ -383,6 +383,8 @@ export default {
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',
       askingAlert:
+        'Вы уверены, что хотите удалить {subject}? Это действие не может быть отменено.',
+      tableAskingAlert:
         'Вы уверенны, что хотите\n удалить {count} запись? | Вы уверенны, что хотите\n удалить {count} записей?',
       deleteAll: 'ВСЕ',
     },

src/locale/ua/ua.js

@@ -383,6 +383,8 @@ export default {
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',
       askingAlert:
+        'Ви впевнені, що хочете видалити {subject}? Ця дія не може бути скасована.',
+      tableAskingAlert:
         'Ви впевнені, що хочете\n видалити {count} запис? | Ви впевнені, що хочете\n видалити {count} записів?',
       deleteAll: 'ВСІ',
     },

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

@@ -1,13 +1,10 @@
 <template>
-  <wt-popup
-    class="delete-confirmation-popup"
-    size="sm"
+  <wt-confirm-dialog
     v-bind="attrs"
+    :title="$t('webitelUI.deleteConfirmationPopup.title')"
+    :callback="callback"
     @close="close"
   >
-    <template #title>
-      {{ $t('webitelUI.deleteConfirmationPopup.title') }}
-    </template>
     <template #main>
       <div class="delete-confirmation-popup__content">
         <wt-icon
@@ -19,7 +16,7 @@
         </p>
       </div>
     </template>
-    <template #actions>
+    <template #actions="{ isDeleting, close, confirm}">
       <wt-button
         :loading="isDeleting"
         @click="confirm"
@@ -34,11 +31,11 @@
         {{ $t('vocabulary.no') }}
       </wt-button>
     </template>
-  </wt-popup>
+  </wt-confirm-dialog>
 </template>
 
 <script setup>
-import { computed, ref, useAttrs } from 'vue';
+import { computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -58,30 +55,14 @@ const attrs = useAttrs();
 
 const { t } = useI18n();
 
-const isDeleting = ref(false);
-
 const deleteMessage = computed(() => {
   if (props.deleteCount === 0) {
-    return t('webitelUI.deleteConfirmationPopup.askingAlert', 2, null, {
+    return t('webitelUI.deleteConfirmationPopup.tableAskingAlert', 2, null, {
       count: t('webitelUI.deleteConfirmationPopup.deleteAll'),
     });
   }
-  return t('webitelUI.deleteConfirmationPopup.askingAlert', { count: props.deleteCount }, null);
+  return t('webitelUI.deleteConfirmationPopup.tableAskingAlert', { count: props.deleteCount }, null);
 });
-
-function close() {
-  emit('close');
-}
-
-async function confirm() {
-  try {
-    isDeleting.value = true;
-    await props.callback();
-    close();
-  } finally {
-    isDeleting.value = false;
-  }
-}
 </script>
 
 <style scoped>