@tager/admin-export 0.1.4 → 1.0.1

package/src/views/ExportForm/ExportForm.vue

@@ -1,131 +1,131 @@
 <template>
-  <page :title="$t('export:newExport')" :is-content-loading="isContentLoading">
+  <Page :title="$i18n.t('export:newExport')" :is-content-loading="isContentLoading">
     <form novalidate @submit.prevent>
-      <template>
-        <form-field-select
-          v-model="values.strategy"
-          :options="strategyOptionList"
-          :error="errors.strategy"
-          :label="$t('export: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"
+      <div class="field">
+        <FormField
+            v-model:value="values.filename"
             :error="errors.filename"
-            :label="$t('export:filename')"
+            :label="$i18n.t('export:filename')"
             name="filename"
-          />
+        />
 
-          <form-field-select
-            v-model="values.format"
+        <FormFieldSelect
+            v-model:value="values.format"
             :options="formatOptionList"
             :error="errors.format"
-            :label="$t('export:format')"
+            :label="$i18n.t('export:format')"
             name="format"
-          />
-
-          <div />
+        />
 
-          <form-field-select
+        <FormFieldSelect
             v-if="shouldDisplayDelimiter"
-            v-model="values.delimiter"
+            v-model:value="values.delimiter"
             :options="delimiterOptionList"
             :error="errors.delimiter"
-            :label="$t('export:delimiter')"
+            :label="$i18n.t('export:delimiter')"
             name="delimiter"
-          />
-        </div>
-      </template>
+        />
+      </div>
+      <DynamicField
+          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 { convertRequestErrorToMap, useResource } from '@tager/admin-services';
+import {useI18n, navigateBack, useToast} from '@tager/admin-services';
+import {Page} from "@tager/admin-layout";
+
+import {convertRequestErrorToMap, useResource} from '@tager/admin-services';
 import {
   OptionType,
   TagerFormSubmitEvent,
-  FormFooter,
-  useTranslation,
+  FormFooter, FormField, FormFieldSelect
 } from '@tager/admin-ui';
+import {
+  DynamicField,
+  FieldConfigUnion,
+  FieldUnion,
+  universalFieldUtils,
+} from '@tager/admin-dynamic-field';
 
-import { createExport, getStrategyList } 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,
-  FormValues,
+  convertStrategiesToStrategyOptionList,
+  formatOptionList,
+  isCSVFormat,
 } from './ExportForm.helpers';
+import {FormValues} from './ExportForm.types';
+
 
 export default defineComponent({
   name: 'ExportForm',
-  components: { 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 [
-      fetchStrategyList,
-      { data: strategyList, loading: isStrategyListLoading },
+      fetchStrategies,
+      {data: strategies, loading: isStrategiesLoading},
     ] = useResource({
-      fetchResource: getStrategyList,
+      fetchResource: getStrategies,
       initialValue: [],
-      context,
-      resourceName: 'Strategy List',
+      resourceName: 'Strategies',
     });
 
     const strategyOptionList = computed<Array<OptionType>>(() =>
-      strategyList.value.map<OptionType>((strategy) => ({
-        value: strategy.id,
-        label: strategy.name,
-      }))
+        convertStrategiesToStrategyOptionList(strategies.value)
     );
 
     onMounted(() => {
-      fetchStrategyList();
+      fetchStrategies();
     });
 
-    /** Format **/
-
-    const formatOptionList = computed<Array<OptionType>>(() => [
-      { value: 'CSV', label: 'CSV' },
-      { value: 'XLS', label: 'XLS' },
-      { value: 'XML', label: 'XML' },
-      { value: 'YAML', label: 'YAML' },
-      { value: 'JSON', label: 'JSON' },
-      { value: 'TXT', label: 'TXT' },
-    ]);
-
-    function isCSVFormat(format: string): boolean {
-      return format === 'CSV';
-    }
-
     /** 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 */
 
-    const defaultExtension = formatOptionList.value[0];
+    const defaultExtension = formatOptionList[0];
     const defaultDelimiter = delimiterOptionList.value[0];
 
     const errors = ref<Record<string, string>>({});
@@ -136,72 +136,96 @@ export default defineComponent({
       delimiter: defaultDelimiter,
     });
     const isSubmitting = ref<boolean>(false);
+    const templateValues = ref<Array<FieldUnion>>([]);
+
+    function updateTemplateValues() {
+      const selectedStrategy = strategies.value.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();
+    });
 
     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
+          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'),
+          .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;
           });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: t('export:error'),
-            body: t('export:createdErrorMessage'),
-          });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     }
 
     /** Is content loading **/
 
-    const isContentLoading = computed<boolean>(
-      () => isStrategyListLoading.value
-    );
+    const isContentLoading = computed<boolean>(() => isStrategiesLoading.value);
 
     return {
       values,
@@ -214,6 +238,7 @@ export default defineComponent({
       delimiterOptionList,
       isContentLoading,
       shouldDisplayDelimiter,
+      templateValues,
     };
   },
 });

package/src/views/ExportList/ExportList.vue

@@ -1,58 +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 }">
-        <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 {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';
 
 export default defineComponent({
   name: 'ExportList',
-  setup(props, context) {
-    const { t } = useTranslation(context);
+  components: {
+    Page, CellHistory,
+    DataTable,
+  },
+  setup() {
+    const {t} = useI18n();
 
     const {
       fetchEntityList: fetchExportList,
@@ -66,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,
     });
@@ -85,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,
@@ -112,32 +111,19 @@ export default defineComponent({
         id: 5,
         name: t('export:log'),
         field: 'history',
-        style: { width: '25%' },
-        headStyle: { width: '25%' },
+        style: {width: '25%', whiteSpace: 'nowrap'},
+        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'},
       },
     ];
 
-    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,
       getExportFormUrl,
@@ -149,8 +135,6 @@ export default defineComponent({
       pageSize,
       pageCount,
       pageNumber,
-      t,
-      dateTimeFormat,
     };
   },
 });

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

@@ -0,0 +1,12 @@
+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/ExportList/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/ExportList/components/CellHistory/index.ts

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

package/dist/dev.d.ts

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