@tager/admin-export 0.1.5 → 1.0.0

package/src/locales/ru.ts

@@ -1,8 +1,7 @@
-import EN from './en';
+import { EN } from './en';
 
-const RU: typeof EN = {
+export const RU: typeof EN = {
   home: 'Главная',
-  exportAndImport: 'Экспорт / Импорт',
   export: 'Экспорт',
   exportList: 'Список экспортов',
   exportForm: 'Форма экспорта',
@@ -24,5 +23,3 @@ const RU: typeof EN = {
   comma: 'Запятая',
   semicolon: 'Точка с запятой',
 };
-
-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', 'export', EN);
-i18n.addTranslations('ru', 'export', RU);
+applyTranslations();
 
 export * from './constants/routes';
 export * from './utils/paths';

package/src/views/ExportForm/ExportForm.helpers.ts

@@ -1,5 +1,3 @@
-import { computed } from '@vue/composition-api';
-
 import { OptionType } from '@tager/admin-ui';
 import { FieldUnion, universalFieldUtils } from '@tager/admin-dynamic-field';
 

package/src/views/ExportForm/ExportForm.vue

@@ -1,70 +1,69 @@
 <template>
-  <page :title="$t('export:newExport')" :is-content-loading="isContentLoading">
+  <Page :title="$i18n.t('export:newExport')" :is-content-loading="isContentLoading">
     <form novalidate @submit.prevent>
-      <form-field-select
-        v-model="values.strategy"
-        :options="strategyOptionList"
-        :error="errors.strategy"
-        :label="$t('export:exportType')"
-        name="exportType"
+      <FormFieldSelect
+          v-model:value="values.strategy"
+          name="exportType"
+          :error="errors.strategy"
+          :label="$i18n.t('export:exportType')"
+          :options="strategyOptionList"
       />
 
       <div class="field">
-        <form-field
-          v-model="values.filename"
-          :error="errors.filename"
-          :label="$t('export:filename')"
-          name="filename"
+        <FormField
+            v-model:value="values.filename"
+            :error="errors.filename"
+            :label="$i18n.t('export:filename')"
+            name="filename"
         />
 
-        <form-field-select
-          v-model="values.format"
-          :options="formatOptionList"
-          :error="errors.format"
-          :label="$t('export:format')"
-          name="format"
+        <FormFieldSelect
+            v-model:value="values.format"
+            :options="formatOptionList"
+            :error="errors.format"
+            :label="$i18n.t('export:format')"
+            name="format"
         />
 
-        <div />
-
-        <form-field-select
-          v-if="shouldDisplayDelimiter"
-          v-model="values.delimiter"
-          :options="delimiterOptionList"
-          :error="errors.delimiter"
-          :label="$t('export:delimiter')"
-          name="delimiter"
+        <FormFieldSelect
+            v-if="shouldDisplayDelimiter"
+            v-model:value="values.delimiter"
+            :options="delimiterOptionList"
+            :error="errors.delimiter"
+            :label="$i18n.t('export:delimiter')"
+            name="delimiter"
         />
       </div>
-
       <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="getExportListUrl()"
-        :on-submit="submitForm"
-        :is-submitting="isSubmitting"
-        :is-creation="true"
+          :back-href="getExportListUrl()"
+          @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, onMounted, watch, ref, computed} from "vue";
+import {useRoute, useRouter} from "vue-router";
+
+import {useI18n, navigateBack, useToast} from '@tager/admin-services';
+import {Page} from "@tager/admin-layout";
 
-import { convertRequestErrorToMap, useResource } from '@tager/admin-services';
+import {convertRequestErrorToMap, useResource} from '@tager/admin-services';
 import {
   OptionType,
   TagerFormSubmitEvent,
-  FormFooter,
-  useTranslation,
+  FormFooter, FormField, FormFieldSelect
 } from '@tager/admin-ui';
 import {
   DynamicField,
@@ -73,9 +72,9 @@ import {
   universalFieldUtils,
 } from '@tager/admin-dynamic-field';
 
-import { createExport, getStrategies } from '../../services/requests';
-import { getExportListUrl } from '../../utils/paths';
-import { replaceFileExtension } from '../../utils/common';
+import {createExport, getStrategies} from '../../services/requests';
+import {getExportListUrl} from '../../utils/paths';
+import {replaceFileExtension} from '../../utils/common';
 
 import {
   convertExportFormValuesToCreationPayload,
@@ -83,28 +82,34 @@ import {
   formatOptionList,
   isCSVFormat,
 } from './ExportForm.helpers';
-import { FormValues } from './ExportForm.types';
+import {FormValues} from './ExportForm.types';
+
 
 export default defineComponent({
   name: 'ExportForm',
-  components: { DynamicField, FormFooter },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {
+    DynamicField, FormFooter,
+    Page, FormField, FormFieldSelect
+  },
+  setup() {
+    const {t} = useI18n();
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
 
     /** Strategies */
 
     const [
       fetchStrategies,
-      { data: strategies, loading: isStrategiesLoading },
+      {data: strategies, loading: isStrategiesLoading},
     ] = useResource({
       fetchResource: getStrategies,
       initialValue: [],
-      context,
       resourceName: 'Strategies',
     });
 
     const strategyOptionList = computed<Array<OptionType>>(() =>
-      convertStrategiesToStrategyOptionList(strategies.value)
+        convertStrategiesToStrategyOptionList(strategies.value)
     );
 
     onMounted(() => {
@@ -114,8 +119,8 @@ export default defineComponent({
     /** Delimiter **/
 
     const delimiterOptionList = computed<Array<OptionType>>(() => [
-      { value: ',', label: t('export:comma') },
-      { value: ';', label: t('export:semicolon') },
+      {value: ',', label: t('export:comma')},
+      {value: ';', label: t('export:semicolon')},
     ]);
 
     /** Form state */
@@ -135,22 +140,22 @@ export default defineComponent({
 
     function updateTemplateValues() {
       const selectedStrategy = strategies.value.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(() => {
@@ -158,64 +163,64 @@ export default defineComponent({
     });
 
     const shouldDisplayDelimiter = ref<boolean>(
-      isCSVFormat(values.value.format?.value ?? '')
+        isCSVFormat(values.value.format?.value ?? '')
     );
 
     watch(
-      () => values.value.format,
-      () => {
-        const newExtension = values.value.format?.value.toLowerCase();
-
-        values.value.filename = replaceFileExtension(
-          values.value.filename,
-          newExtension || ''
-        );
-
-        shouldDisplayDelimiter.value = isCSVFormat(
-          values.value.format?.value ?? ''
-        );
-      }
+        () => values.value.format,
+        () => {
+          const newExtension = values.value.format?.value.toLowerCase();
+
+          values.value.filename = replaceFileExtension(
+              values.value.filename,
+              newExtension || ''
+          );
+
+          shouldDisplayDelimiter.value = isCSVFormat(
+              values.value.format?.value ?? ''
+          );
+        }
     );
 
     function submitForm(event: TagerFormSubmitEvent) {
       isSubmitting.value = true;
 
       const creationPayload = convertExportFormValuesToCreationPayload(
-        values.value,
-        templateValues.value
+          values.value,
+          templateValues.value
       );
 
       createExport(creationPayload)
-        .then(() => {
-          errors.value = {};
-
-          if (
-            event.type === 'create' ||
-            event.type === 'save' ||
-            event.type === 'create_exit' ||
-            event.type === 'save_exit'
-          ) {
-            context.root.$router.push(getExportListUrl());
-          }
-
-          context.root.$toast({
-            variant: 'success',
-            title: t('export:success'),
-            body: t('export:createdSuccessMessage'),
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: t('export:error'),
-            body: t('export:createdErrorMessage'),
+          .then(() => {
+            errors.value = {};
+
+            if (
+                event.type === 'create' ||
+                event.type === 'save' ||
+                event.type === 'create_exit' ||
+                event.type === 'save_exit'
+            ) {
+              navigateBack(router, getExportListUrl());
+            }
+
+            toast.show({
+              variant: 'success',
+              title: t('export:success'),
+              body: t('export:createdSuccessMessage'),
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            errors.value = convertRequestErrorToMap(error);
+            toast.show({
+              variant: 'danger',
+              title: t('export:error'),
+              body: t('export:createdErrorMessage'),
+            });
+          })
+          .finally(() => {
+            isSubmitting.value = false;
           });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     }
 
     /** Is content loading **/

package/src/views/ExportList/ExportList.vue

@@ -1,54 +1,58 @@
 <template>
-  <page
-    :title="$t('export:export')"
-    :header-buttons="[
+  <Page
+      :title="$i18n.t('export:export')"
+      :header-buttons="[
       {
-        text: $t('export:newExport'),
+        text: $i18n.t('export:newExport'),
         href: getExportFormUrl({ exportId: '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 {useI18n} from '@tager/admin-services';
+import {Page} from "@tager/admin-layout";
 import {
-  ColumnDefinition,
+  type ColumnDefinition,
+  DataTable,
   useDataTable,
-  useTranslation,
-} from '@tager/admin-ui';
+} from "@tager/admin-ui";
 
-import { getExportList } from '../../services/requests';
-import { ExportType } from '../../typings/model';
-import { getExportFormUrl } from '../../utils/paths';
+import {getExportList} from '../../services/requests';
+import {ExportType} from '../../typings/model';
+import {getExportFormUrl} from '../../utils/paths';
 
-import { CellHistory } from './components/CellHistory';
+import {CellHistory} from './components/CellHistory';
 
 export default defineComponent({
   name: 'ExportList',
-  components: { CellHistory },
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {
+    Page, CellHistory,
+    DataTable,
+  },
+  setup() {
+    const {t} = useI18n();
 
     const {
       fetchEntityList: fetchExportList,
@@ -62,12 +66,11 @@ export default defineComponent({
       pageNumber,
     } = useDataTable<ExportType>({
       fetchEntityList: (params) =>
-        getExportList({
-          pageNumber: params.pageNumber,
-          pageSize: params.pageSize,
-        }),
+          getExportList({
+            pageNumber: params.pageNumber,
+            pageSize: params.pageSize,
+          }),
       initialValue: [],
-      context,
       resourceName: 'Export list',
       pageSize: 100,
     });
@@ -81,22 +84,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('export:type'),
         field: 'strategy',
-        style: { width: '15%' },
-        headStyle: { width: '15%' },
+        style: {width: '15%'},
+        headStyle: {width: '15%'},
       },
       {
         id: 3,
         name: t('export:status'),
         field: 'status',
-        style: { width: '15%' },
-        headStyle: { width: '15%' },
+        style: {width: '15%'},
+        headStyle: {width: '15%'},
       },
       {
         id: 4,
@@ -108,16 +111,16 @@ export default defineComponent({
         id: 5,
         name: t('export:log'),
         field: 'history',
-        style: { width: '25%' },
-        headStyle: { width: '25%' },
+        style: {width: '25%'},
+        headStyle: {width: '25%'},
       },
       {
         id: 6,
         name: t('export: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/ExportList/components/CellHistory/CellHistory.helpers.ts

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

package/src/views/ExportList/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: {

package/dist/dev.d.ts

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