@tager/admin-import 0.1.1 → 1.0.0

package/src/views/ImportForm/ImportForm.vue

@@ -1,87 +1,100 @@
 <template>
-  <page
-    :title="$t('import:importCreation')"
-    :is-content-loading="isContentLoading"
+  <Page
+      :title="$i18n.t('import:importCreation')"
+      :is-content-loading="isContentLoading"
   >
     <form novalidate @submit.prevent>
-      <template>
-        <form-field-select
-          v-model="values.strategy"
+      <FormFieldSelect
+          v-model:value="values.strategy"
           :options="strategyOptionList"
           :error="errors.strategy"
           name="importType"
-          :label="$t('import:importType')"
-        />
+          :label="$i18n.t('import:importType')"
+      />
 
-        <form-field-file-input
-          v-model="values.file"
+      <FormFieldFileInput
+          v-model:value="values.file"
           :error="errors.file"
-          :label="$t('import:file')"
+          :label="$i18n.t('import:file')"
           name="file"
           :scenario="strategyFileScenario"
-        />
-      </template>
+      />
+
+      <DynamicField
+          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 } 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,
+  FieldConfigUnion,
+  FieldUnion,
+  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: { 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: null,
-      context,
+      initialValue: {
+        fileScenario: '',
+        strategies: [],
+      },
       resourceName: 'Module info',
     });
 
     const strategyFileScenario = computed<string>(
-      () => moduleInfo.value?.fileScenario ?? ''
+        () => moduleInfo.value.fileScenario
     );
 
-    const strategyOptionList = computed<Array<OptionType>>(
-      () =>
-        moduleInfo.value?.strategies.map<OptionType>((strategy) => ({
-          value: strategy.id,
-          label: strategy.name,
-        })) ?? []
+    const strategyOptionList = computed<Array<OptionType>>(() =>
+        convertStrategiesToStrategyOptionList(moduleInfo.value.strategies)
     );
 
     onMounted(() => {
@@ -91,47 +104,73 @@ 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
+      );
+
+      const fieldTemplateList: Array<FieldConfigUnion> =
+          selectedStrategy?.fields ?? [];
+
+      templateValues.value = fieldTemplateList.map((fieldConfig) =>
+          universalFieldUtils.createFormField(fieldConfig, null)
+      );
+    }
+
+    watch(
+        () => values.value.strategy,
+        () => {
+          updateTemplateValues();
+        }
+    );
+
+    onMounted(() => {
+      updateTemplateValues();
+    });
 
     function submitForm(event: TagerFormSubmitEvent) {
       isSubmitting.value = true;
 
       const creationPayload = convertImportFormValuesToCreationPayload(
-        values.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 **/
@@ -147,6 +186,7 @@ export default defineComponent({
       strategyOptionList,
       strategyFileScenario,
       isContentLoading,
+      templateValues,
     };
   },
 });

package/src/views/ImportList/ImportList.vue

@@ -1,58 +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 }">
-        <ul v-if="row.history">
-          <li v-for="(history, index) of row.history" :key="index">
-            <span :style="{ width: '100px', display: 'inline-block' }">{{
-              history.status
-            }}</span>
-            {{ dateTimeFormat(history.datetime) }}
-          </li>
-        </ul>
+      <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';
 
 export default defineComponent({
   name: 'ImportList',
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {CellHistory, DataTable, Page},
+  setup() {
+    const {t} = useI18n();
 
     const {
       fetchEntityList: fetchImportList,
@@ -66,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,
     });
@@ -85,59 +85,58 @@ 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: '15%' },
-        headStyle: { width: '15%' },
+        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) => {
+          return {
+            key: param.label,
+            value: param.value
+          };
+        }) : null
+      },
+      {
+        id: 4,
         name: t('import:status'),
         field: 'status',
-        style: { width: '15%' },
-        headStyle: { width: '15%' },
+        style: {width: '120px'},
+        headStyle: {width: '120px'},
       },
       {
-        id: 4,
+        id: 5,
         name: t('import:message'),
         field: 'message',
       },
 
       {
-        id: 5,
+        id: 6,
         name: t('import:log'),
         field: 'history',
-        style: { width: '25%' },
-        headStyle: { width: '25%' },
+        style: {width: '270px', whiteSpace: 'nowrap'},
+        headStyle: {width: '270px'},
       },
       {
-        id: 6,
+        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'},
       },
     ];
 
-    function dateTimeFormat(value: number | string | Date): string {
-      const options = {
-        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);
-    }
-
     return {
       columnDefs,
       getImportFormUrl,
@@ -149,8 +148,6 @@ export default defineComponent({
       pageSize,
       pageCount,
       pageNumber,
-      t,
-      dateTimeFormat,
     };
   },
 });

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

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

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

@@ -0,0 +1,38 @@
+<template>
+  <ul v-if="history.length > 0">
+    <li v-for="(history, index) of history" :key="index">
+      <span class="name">
+        {{ history.status }}
+      </span>
+      {{ dateTimeFormat(history.datetime) }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {dateTimeFormat} from './CellHistory.helpers';
+import {HistoryType} from "../../../../typings/model";
+
+export default defineComponent({
+  name: 'CellHistory',
+  props: {
+    history: {
+      type: Array as PropType<HistoryType[]>,
+      default: () => [],
+    },
+  },
+  setup() {
+    return {
+      dateTimeFormat,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.name {
+  display: inline-block;
+  width: 100px;
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as CellHistory } from './CellHistory.vue';

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';