Merge pull request #178 from webitel/feature/code-faving-failed-popup

feature: save failed popup added to lib [WTEL-3894]

src/components/on-demand/wt-save-failed-popup/__tests__/WtPopup.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtSaveFailedPopup from '../wt-save-failed-popup.vue';
+
+describe('WtSaveFailedPopup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtSaveFailedPopup);
+    expect(wrapper.classes('wt-save-failed-popup')).toBe(true);
+  });
+});

src/components/on-demand/wt-save-failed-popup/wt-save-failed-popup.vue

@@ -0,0 +1,70 @@
+<template>
+  <wt-popup
+    class="wt-save-failed-popup"
+    :width="500"
+    @close="closePopup"
+  >
+    <template #title>
+      {{ $t('webitelUI.saveFailedPopup.title') }}
+    </template>
+    <template #main>
+      <div class="flow-save-filed-popup__wrapper">
+        <wt-icon
+          color="error"
+          icon="attention"
+        />
+        <p>{{ $t('webitelUI.saveFailedPopup.label') }}</p>
+      </div>
+    </template>
+    <template #actions>
+      <wt-button
+        @click="save"
+      >
+        {{ $t('reusable.retry') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="download"
+      >
+        {{ $t('webitelUI.saveFailedPopup.exportToJson') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="closePopup"
+      >
+        {{ $t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script>
+export default {
+  name: 'FlowSaveFailedPopup',
+  emits: ['close-popup', 'save', 'download'],
+  methods: {
+    closePopup() {
+      this.$emit('close-popup');
+    },
+    save() {
+      this.$emit('save');
+    },
+    download() {
+      this.$emit('download');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.flow-save-filed-popup__wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+
+  .wt-icon {
+    margin-bottom: var(--spacing-sm);
+  }
+}
+</style>

src/locale/en/en.js

@@ -359,5 +359,10 @@ export default {
         message: 'The limit for agents to take a pause has been exceeded. The pause is unavailable right now.',
       },
     },
+    saveFailedPopup: {
+      title: 'Save failed',
+      label: 'Something went wrong, please try again',
+      exportToJson: 'Export to JSON',
+    },
   },
 };

src/locale/kz/kz.js

@@ -322,5 +322,10 @@ export default {
         unlimited: 'Шексіз',
       },
     },
+    saveFailedPopup: {
+      title: 'Қатені сақтау',
+      label: 'Бірдеңе дұрыс болмады.',
+      exportToJson: 'JSON файлына экспорттау',
+    },
   },
 };

src/locale/ru/ru.js

@@ -357,5 +357,10 @@ export default {
         message: 'Лимит операторов в паузе превышен. Перерыв сейчас недоступен.',
       },
     },
+    saveFailedPopup: {
+      title: 'Ошибка сохранения',
+      label: 'Что-то пошло не так. Пожалуйста, попробуйте еще раз',
+      exportToJson: 'Экспортировать в JSON',
+    },
   },
 };

src/locale/ua/ua.js

@@ -357,5 +357,10 @@ export default {
         message: 'Ліміт операторів в паузі перевищено. Перерва наразі недоступна.',
       },
     },
+    saveFailedPopup: {
+      title: 'Помилка збереження',
+      label: 'Щось пішло не так. Будь ласка, спробуйте ще раз',
+      exportToJson: 'Експортувати в JSON',
+    },
   },
 };

src/scripts/saveAsJSON.js

@@ -0,0 +1,7 @@
+import { saveAs } from 'file-saver';
+
+export const saveAsJSON = (name, content) => {
+  const fileName = name.replace(/[ ,]+/g, '-');
+  const file = new Blob([JSON.stringify(content, null, 4)], { type: 'application/json' });
+  saveAs(file, fileName);
+};