@tager/admin-import 0.1.3 → 1.0.0

package/src/locales/ru.ts

@@ -1,24 +1,21 @@
-import EN from './en';
+import {EN} from './en';
 
-const RU: typeof EN = {
-  home: 'Главная',
-  exportAndImport: 'Экспорт / Импорт',
-  import: 'Импорт',
-  importList: 'Список импортов',
-  importForm: 'Форма импорта',
-  type: 'Тип',
-  importType: 'Тип импорта',
-  status: 'Статус',
-  message: 'Сообщение',
-  log: 'Лог',
-  params: 'Параметры',
-  file: 'Файл',
-  newImport: 'Новый импорт',
-  importCreation: 'Создание импорта',
-  success: 'Успех',
-  error: 'Ошибка',
-  createdSuccessMessage: 'Импорт была успешно создан',
-  createdErrorMessage: 'Создание импорта не удалось',
+export const RU: typeof EN = {
+    home: 'Главная',
+    import: 'Импорт',
+    importList: 'Список импортов',
+    importForm: 'Форма импорта',
+    type: 'Тип',
+    importType: 'Тип импорта',
+    status: 'Статус',
+    message: 'Сообщение',
+    log: 'Лог',
+    params: 'Параметры',
+    file: 'Файл',
+    newImport: 'Новый импорт',
+    importCreation: 'Создание импорта',
+    success: 'Успех',
+    error: 'Ошибка',
+    createdSuccessMessage: 'Импорт была успешно создан',
+    createdErrorMessage: 'Создание импорта не удалось',
 };
-
-export default RU;

package/src/main.ts

@@ -1,10 +1,6 @@
-import { i18n } from '@tager/admin-services';
+import { applyTranslations } from './locales/apply';
 
-import EN from './locales/en';
-import RU from './locales/ru';
-
-i18n.addTranslations('en', 'import', EN);
-i18n.addTranslations('ru', 'import', RU);
+applyTranslations();
 
 export * from './constants/routes';
 export * from './utils/paths';

package/src/views/ImportForm/ImportForm.vue

@@ -1,53 +1,52 @@
 <template>
-  <page
-    :title="$t('import:importCreation')"
-    :is-content-loading="isContentLoading"
+  <Page
+      :title="$i18n.t('import:importCreation')"
+      :is-content-loading="isContentLoading"
   >
     <form novalidate @submit.prevent>
-      <form-field-select
-        v-model="values.strategy"
-        :options="strategyOptionList"
-        :error="errors.strategy"
-        name="importType"
-        :label="$t('import:importType')"
+      <FormFieldSelect
+          v-model:value="values.strategy"
+          :options="strategyOptionList"
+          :error="errors.strategy"
+          name="importType"
+          :label="$i18n.t('import:importType')"
       />
 
-      <form-field-file-input
-        v-model="values.file"
-        :error="errors.file"
-        :label="$t('import:file')"
-        name="file"
-        :scenario="strategyFileScenario"
+      <FormFieldFileInput
+          v-model:value="values.file"
+          :error="errors.file"
+          :label="$i18n.t('import:file')"
+          name="file"
+          :scenario="strategyFileScenario"
       />
 
       <DynamicField
-        v-for="field of templateValues"
-        :key="field.config.name"
-        :field="field"
+          v-for="field of templateValues"
+          :key="field.config.name"
+          :field="field"
       />
     </form>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
-        :back-href="getImportListUrl()"
-        :on-submit="submitForm"
-        :is-submitting="isSubmitting"
-        :is-creation="true"
+          :back-href="getImportListUrl()"
+          @submit="submitForm"
+          :is-submitting="isSubmitting"
+          :is-creation="true"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import { defineComponent, watch } from '@vue/composition-api';
-import { computed, onMounted, ref } from '@vue/composition-api';
+import {defineComponent, watch, computed, onMounted, ref} from 'vue';
 
-import { convertRequestErrorToMap, useResource } from '@tager/admin-services';
+import {convertRequestErrorToMap, navigateBack, useI18n, useResource, useToast} from '@tager/admin-services';
 import {
   OptionType,
   TagerFormSubmitEvent,
   FormFooter,
-  useTranslation,
+  FormFieldFileInput, FormFieldSelect
 } from '@tager/admin-ui';
 import {
   DynamicField,
@@ -56,42 +55,46 @@ import {
   universalFieldUtils,
 } from '@tager/admin-dynamic-field';
 
-import { createImport, getModuleInfo } from '../../services/requests';
-import { getImportListUrl } from '../../utils/paths';
+import {createImport, getModuleInfo} from '../../services/requests';
+import {getImportListUrl} from '../../utils/paths';
 
 import {
   convertImportFormValuesToCreationPayload,
   convertStrategiesToStrategyOptionList,
   FormValues,
 } from './ImportForm.helpers';
+import {useRouter} from "vue-router";
+import {Page} from "@tager/admin-layout";
 
 export default defineComponent({
   name: 'ImportForm',
-  components: { DynamicField, FormFooter },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {Page, FormFieldFileInput, DynamicField, FormFooter, FormFieldSelect},
+  setup() {
+    const {t} = useI18n();
+
+    const toast = useToast();
+    const router = useRouter();
 
     /** Strategies */
 
     const [
       fetchModuleInfo,
-      { data: moduleInfo, loading: isModuleInfoLoading },
+      {data: moduleInfo, loading: isModuleInfoLoading},
     ] = useResource({
       fetchResource: getModuleInfo,
       initialValue: {
         fileScenario: '',
         strategies: [],
       },
-      context,
       resourceName: 'Module info',
     });
 
     const strategyFileScenario = computed<string>(
-      () => moduleInfo.value.fileScenario
+        () => moduleInfo.value.fileScenario
     );
 
     const strategyOptionList = computed<Array<OptionType>>(() =>
-      convertStrategiesToStrategyOptionList(moduleInfo.value.strategies)
+        convertStrategiesToStrategyOptionList(moduleInfo.value.strategies)
     );
 
     onMounted(() => {
@@ -101,28 +104,28 @@ export default defineComponent({
     /** Form state */
 
     const errors = ref<Record<string, string>>({});
-    const values = ref<FormValues>({ strategy: null, file: null });
+    const values = ref<FormValues>({strategy: null, file: null});
     const isSubmitting = ref<boolean>(false);
     const templateValues = ref<Array<FieldUnion>>([]);
 
     function updateTemplateValues() {
       const selectedStrategy = moduleInfo.value.strategies.find(
-        (strategy) => strategy.id === values.value.strategy?.value
+          (strategy) => strategy.id === values.value.strategy?.value
       );
 
       const fieldTemplateList: Array<FieldConfigUnion> =
-        selectedStrategy?.fields ?? [];
+          selectedStrategy?.fields ?? [];
 
       templateValues.value = fieldTemplateList.map((fieldConfig) =>
-        universalFieldUtils.createFormField(fieldConfig, null)
+          universalFieldUtils.createFormField(fieldConfig, null)
       );
     }
 
     watch(
-      () => values.value.strategy,
-      () => {
-        updateTemplateValues();
-      }
+        () => values.value.strategy,
+        () => {
+          updateTemplateValues();
+        }
     );
 
     onMounted(() => {
@@ -133,41 +136,41 @@ export default defineComponent({
       isSubmitting.value = true;
 
       const creationPayload = convertImportFormValuesToCreationPayload(
-        values.value,
-        templateValues.value
+          values.value,
+          templateValues.value
       );
 
       createImport(creationPayload)
-        .then(() => {
-          errors.value = {};
-
-          if (
-            event.type === 'create' ||
-            event.type === 'save' ||
-            event.type === 'create_exit' ||
-            event.type === 'save_exit'
-          ) {
-            context.root.$router.push(getImportListUrl());
-          }
-
-          context.root.$toast({
-            variant: 'success',
-            title: t('import:success'),
-            body: t('import:createdSuccessMessage'),
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: t('import:error'),
-            body: t('import:createdErrorMessage'),
+          .then(() => {
+            errors.value = {};
+
+            if (
+                event.type === 'create' ||
+                event.type === 'save' ||
+                event.type === 'create_exit' ||
+                event.type === 'save_exit'
+            ) {
+              navigateBack(router, getImportListUrl());
+            }
+
+            toast.show({
+              variant: 'success',
+              title: t('import:success'),
+              body: t('import:createdSuccessMessage'),
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            errors.value = convertRequestErrorToMap(error);
+            toast.show({
+              variant: 'danger',
+              title: t('import:error'),
+              body: t('import:createdErrorMessage'),
+            });
+          })
+          .finally(() => {
+            isSubmitting.value = false;
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     }
 
     /** Is content loading **/

package/src/views/ImportList/ImportList.vue

@@ -1,54 +1,59 @@
 <template>
-  <page
-    :title="$t('import:import')"
-    :header-buttons="[
+  <Page
+      :title="$i18n.t('import:import')"
+      :header-buttons="[
       {
-        text: $t('import:newImport'),
+        text: $i18n.t('import:newImport'),
         href: getImportFormUrl({ importId: 'create' }),
       },
     ]"
   >
-    <data-table
-      :column-defs="columnDefs"
-      :row-data="rowData"
-      :loading="isRowDataLoading"
-      :error-message="errorMessage"
-      :pagination="{
+    <DataTable
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        :pagination="{
         pageSize,
         pageCount,
         pageNumber,
         disabled: isRowDataLoading,
       }"
-      :use-search="false"
-      @change="handleChange"
+        :use-search="false"
+        @change="handleChange"
     >
-      <template v-slot:cell(history)="{ row }">
-        <CellHistory :history="row.history" />
+      <template #cell(history)="{ row }">
+        <CellHistory :history="row.history"/>
       </template>
-    </data-table>
-  </page>
+    </DataTable>
+  </Page>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted } from '@vue/composition-api';
+import {defineComponent, onMounted} from 'vue';
 
 import {
   ColumnDefinition,
   useDataTable,
-  useTranslation,
+  DataTable
 } from '@tager/admin-ui';
 
-import { getImportList } from '../../services/requests';
-import { ImportType } from '../../typings/model';
-import { getImportFormUrl } from '../../utils/paths';
+import {
+  Page
+} from '@tager/admin-layout';
+import {useI18n} from "@tager/admin-services";
+
+import {getImportList} from '../../services/requests';
+import {ImportType} from '../../typings/model';
+import {getImportFormUrl} from '../../utils/paths';
 
-import { CellHistory } from './components/CellHistory';
+import {CellHistory} from './components/CellHistory';
 
 export default defineComponent({
   name: 'ImportList',
-  components: { CellHistory },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {CellHistory, DataTable, Page},
+  setup() {
+    const {t} = useI18n();
 
     const {
       fetchEntityList: fetchImportList,
@@ -62,12 +67,11 @@ export default defineComponent({
       pageNumber,
     } = useDataTable<ImportType>({
       fetchEntityList: (params) =>
-        getImportList({
-          pageNumber: params.pageNumber,
-          pageSize: params.pageSize,
-        }),
+          getImportList({
+            pageNumber: params.pageNumber,
+            pageSize: params.pageSize,
+          }),
       initialValue: [],
-      context,
       resourceName: 'Import list',
       pageSize: 100,
     });
@@ -81,22 +85,22 @@ export default defineComponent({
         id: 1,
         name: 'ID',
         field: 'id',
-        style: { width: '50px', textAlign: 'center' },
-        headStyle: { width: '50px', textAlign: 'center' },
+        style: {width: '50px', textAlign: 'center'},
+        headStyle: {width: '50px', textAlign: 'center'},
       },
       {
         id: 2,
         name: t('import:type'),
         field: 'strategy',
-        style: { width: '150px' },
-        headStyle: { width: '150px' },
+        style: {width: '150px'},
+        headStyle: {width: '150px'},
       },
       {
         id: 3,
         name: t('import:params'),
         field: 'params',
         type: 'key-value',
-        format: ({ row }) => row.params ? row.params.map((param) => {
+        format: ({row}) => row.params ? row.params.map((param) => {
           return {
             key: param.label,
             value: param.value
@@ -107,8 +111,8 @@ export default defineComponent({
         id: 4,
         name: t('import:status'),
         field: 'status',
-        style: { width: '120px' },
-        headStyle: { width: '120px' },
+        style: {width: '120px'},
+        headStyle: {width: '120px'},
       },
       {
         id: 5,
@@ -120,16 +124,16 @@ export default defineComponent({
         id: 6,
         name: t('import:log'),
         field: 'history',
-        style: { width: '250px' },
-        headStyle: { width: '250px' },
+        style: {width: '270px', whiteSpace: 'nowrap'},
+        headStyle: {width: '270px'},
       },
       {
         id: 7,
         name: t('import:file'),
         field: 'file',
         type: 'file',
-        style: { width: '150px', textAlign: 'center' },
-        headStyle: { width: '150px', textAlign: 'center' },
+        style: {width: '150px', textAlign: 'center'},
+        headStyle: {width: '150px', textAlign: 'center'},
       },
     ];
 

package/src/views/ImportList/components/CellHistory/CellHistory.helpers.ts

@@ -1,12 +1,13 @@
 export function dateTimeFormat(value: number | string | Date): string {
-  const options = {
-    year: 'numeric',
+
+  const date = new Date(value);
+
+  return new Intl.DateTimeFormat('ru-RU', {
+    "year": "numeric",
     month: 'numeric',
     day: 'numeric',
     hour: 'numeric',
     minute: 'numeric',
     second: 'numeric',
-  };
-  const date = new Date(value);
-  return new Intl.DateTimeFormat('ru-RU', options).format(date);
+  }).format(date);
 }

package/src/views/ImportList/components/CellHistory/CellHistory.vue

@@ -10,14 +10,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from '@vue/composition-api';
+import {defineComponent, PropType} from "vue";
+import {dateTimeFormat} from './CellHistory.helpers';
+import {HistoryType} from "../../../../typings/model";
 
-import { HistoryType } from '../../../../typings/model';
-
-import { Props } from './CellHistory.types';
-import { dateTimeFormat } from './CellHistory.helpers';
-
-export default defineComponent<Props>({
+export default defineComponent({
   name: 'CellHistory',
   props: {
     history: {
@@ -36,6 +33,6 @@ export default defineComponent<Props>({
 <style lang="scss" scoped>
 .name {
   display: inline-block;
-  width: 75px;
+  width: 100px;
 }
 </style>

package/README.md

@@ -1 +0,0 @@
-# tager-admin-import

package/dist/dev.d.ts

@@ -1 +0,0 @@
-import '@tager/admin-ui/dist/admin-ui.css';