@tager/admin-banners 0.3.6 → 1.0.1

package/src/views/Banners/BannerForm/BannerForm.vue

@@ -1,122 +1,142 @@
 <template>
-  <page
-      :title="
-      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
+  <Page
+    :title="
+      isCreation
+        ? $i18n.t('banners:createBanner')
+        : $i18n.t('banners:updateBanner')
     "
-      :is-content-loading="isContentLoading"
+    :is-content-loading="isContentLoading"
   >
-    <template v-slot:content>
+    <template #content>
       <form novalidate @submit.prevent="submitForm">
         <div class="zone">
-          <form-field-select
-              v-model="values.bannerZone"
-              name="bannerZone"
-              :label="$t('banners:zone')"
-              :options="zonesOptionList"
-              :error="errors.bannerZone"
+          <FormFieldSelect
+            v-model:value="values.bannerZone"
+            name="bannerZone"
+            :label="$i18n.t('banners:zone')"
+            :options="zonesOptionList"
+            :error="errors.bannerZone"
           />
 
-          <form-field
-              v-model="values.priority"
-              name="priority"
-              :label="$t('banners:priority')"
-              :error="errors.priority"
+          <FormField
+            v-model:value="values.priority"
+            name="priority"
+            :label="$i18n.t('banners:priority')"
+            :error="errors.priority"
           />
         </div>
 
-        <input-label>{{ $t('banners:period') }}</input-label>
+        <InputLabel>{{ $i18n.t('banners:period') }}</InputLabel>
 
         <div class="date">
-          <form-field
-              v-model="values.dateStart"
-              :label="$t('banners:from')"
-              name="dateStart"
-              type="date"
-              :max="values.dateEnd"
+          <FormField
+            v-model:value="values.dateStart"
+            :label="$i18n.t('banners:from')"
+            name="dateStart"
+            type="date"
+            :max="values.dateEnd"
           />
 
-          <form-field
-              v-model="values.dateEnd"
-              :label="$t('banners:to')"
-              name="dateEnd"
-              type="date"
-              :min="values.dateStart"
+          <FormField
+            v-model:value="values.dateEnd"
+            :label="$i18n.t('banners:to')"
+            name="dateEnd"
+            type="date"
+            :min="values.dateStart"
           />
         </div>
 
-        <form-field-checkbox
-            v-model="values.disabled"
-            name="disabled"
-            :label="$t('banners:disabled')"
-            :error="errors.disabled"
+        <FormFieldCheckbox
+          v-model:checked="values.disabled"
+          name="disabled"
+          :label="$i18n.t('banners:disabled')"
+          :error="errors.disabled"
         />
 
         <div class="link">
-          <form-field
-              v-model="values.link"
-              name="link"
-              :label="$t('banners:link')"
-              :error="errors.name"
+          <FormField
+            v-model:value="values.link"
+            name="link"
+            :label="$i18n.t('banners:link')"
+            :error="errors.name"
           />
 
-          <form-field-checkbox
-              v-model="values.openNewTab"
-              name="openNewTab"
-              :label="$t('banners:openNewTab')"
-              :error="errors.openNewTab"
+          <FormFieldCheckbox
+            v-model:checked="values.openNewTab"
+            name="openNewTab"
+            :label="$i18n.t('banners:openNewTab')"
+            :error="errors.openNewTab"
           />
         </div>
 
-        <form-field-file-input
-            v-model="values.image"
-            name="image"
-            file-type="image"
-            :label="$t('banners:image')"
-            :error="errors.file"
+        <FormFieldFileInput
+          v-model:value="values.image"
+          name="image"
+          file-type="image"
+          :label="$i18n.t('banners:image')"
+          :error="errors.file"
         />
 
-        <form-field
-            v-model="values.comment"
-            name="comment"
-            type="textarea"
-            :label="$t('banners:comment')"
-            :error="errors.comment"
+        <DynamicField
+          v-for="field of values.fields"
+          :key="field.name"
+          :field="field"
+        />
+
+        <FormField
+          v-model:value="values.comment"
+          name="comment"
+          type="textarea"
+          :label="$i18n.t('banners:comment')"
+          :error="errors.comment"
         />
       </form>
     </template>
 
-    <template v-slot:footer>
+    <template #footer>
       <FormFooter
-          :back-href="bannerListUrl"
-          :on-submit="submitForm"
-          :is-submitting="isSubmitting"
-          :is-creation="isCreation"
-          :can-create-another="isCreation"
+        :back-href="bannerListUrl"
+        :is-submitting="isSubmitting"
+        :is-creation="isCreation"
+        :can-create-another="isCreation"
+        @submit="submitForm"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
+import { computed, defineComponent, ref, SetupContext, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import {
+  FormField,
+  FormFieldCheckbox,
+  FormFieldFileInput,
+  FormFieldSelect,
+  FormFooter,
+  InputLabel,
+  OptionType,
+  TagerFormSubmitEvent,
+} from '@tager/admin-ui';
+import { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';
 import {
-  computed,
-  defineComponent,
-  ref,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
-
-import {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';
-import {convertRequestErrorToMap} from '@tager/admin-services';
-
-import {useFetchZones} from '../../../hooks';
-import {BannerFormValues} from '../../../typings/banners';
-import {useFetchBanner} from '../../../hooks/useFetchBanner';
+  convertRequestErrorToMap,
+  navigateBack,
+  useI18n,
+  useToast,
+} from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
+
+import { useFetchZones } from '../../../hooks';
+import { BannerFormValues } from '../../../typings/banners';
+import { useFetchBanner } from '../../../hooks/useFetchBanner';
 import {
   getBannersBannerFormUrl,
   getBannersBannerListUrl,
-} from '../../../constants/paths';
-import {createBanner, updateBanner} from '../../../services/requests';
+} from '../../../utils/paths';
+import { createBanner, updateBanner } from '../../../services/requests';
+import { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';
 
 import {
   convertBannerFormValuesToPayload,
@@ -125,28 +145,39 @@ import {
 
 export default defineComponent({
   name: 'BannerForm',
-  components: {FormFooter},
-  setup(props, context: SetupContext) {
-    const bannerId = computed<string>(
-        () => context.root.$route.params.bannerId
-    );
+  components: {
+    FormFieldFileInput,
+    FormFieldCheckbox,
+    InputLabel,
+    FormField,
+    FormFieldSelect,
+    Page,
+    FormFooter,
+    DynamicField,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
+    const { t } = useI18n();
+
+    const bannerId = computed<string>(() => route.params.bannerId as string);
     const isCreation = computed<boolean>(() => bannerId.value === 'create');
 
     /** Zones **/
 
-    const {data: zones, loading: isZonesLoading} = useFetchZones({context});
+    const { data: zones, loading: isZonesLoading } = useFetchZones();
 
     const zonesOptionList = computed<OptionType[]>(() =>
-        zones.value.map<OptionType>((zone) => ({
-          value: zone.id,
-          label: zone.name,
-        }))
+      zones.value.map<OptionType>((zone) => ({
+        value: zone.id,
+        label: zone.name,
+      }))
     );
 
     /** Banner **/
 
-    const {data: banner, loading: isBannerLoading} = useFetchBanner({
-      context,
+    const { data: banner, loading: isBannerLoading } = useFetchBanner({
       bannerId,
       isCreation,
     });
@@ -155,14 +186,29 @@ export default defineComponent({
 
     const isSubmitting = ref<boolean>(false);
     const values = ref<BannerFormValues>(
-        convertBannerToFormValues(banner.value, zonesOptionList.value)
+      convertBannerToFormValues(banner.value, zonesOptionList.value)
     );
     const errors = ref<Record<string, string>>({});
 
     watch([banner, zones], () => {
       values.value = convertBannerToFormValues(
-          banner.value,
-          zonesOptionList.value
+        banner.value,
+        zonesOptionList.value
+      );
+    });
+
+    /** Zone Fields **/
+
+    const { loading: isZoneFieldsLoading, data: zoneFields } =
+      useFetchZoneFields({ values });
+
+    watch(zoneFields, () => {
+      values.value.fields = (zoneFields.value?.fields ?? []).map(
+        (fieldConfig, index) =>
+          universalFieldUtils.createFormField(
+            fieldConfig,
+            banner.value ? banner.value.fields[index].value ?? null : null
+          )
       );
     });
 
@@ -172,56 +218,56 @@ export default defineComponent({
       const body = convertBannerFormValuesToPayload(values.value);
 
       const requestPromise = isCreation.value
-          ? createBanner(body)
-          : updateBanner(bannerId.value, body);
+        ? createBanner(body)
+        : updateBanner(bannerId.value, body);
 
       requestPromise
-          .then(({data}) => {
-            errors.value = {};
-
-            if (event.type === 'create') {
-              context.root.$router.push(
-                  getBannersBannerFormUrl({bannerId: String(data.id)})
-              );
-            }
-
-            if (event.type === 'create_exit' || event.type === 'save_exit') {
-              context.root.$router.push(getBannersBannerListUrl());
-            }
-
-            if (event.type === 'create_create-another') {
-              values.value = convertBannerToFormValues(
-                  null,
-                  zonesOptionList.value
-              );
-            }
-
-            context.root.$toast({
-              variant: 'success',
-              title: context.root.$t('banners:success'),
-              body: isCreation.value
-                  ? context.root.$t('banners:bannerWasSuccessfullyCreated')
-                  : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
-            });
-          })
-          .catch((error) => {
-            console.error(error);
-            errors.value = convertRequestErrorToMap(error);
-            context.root.$toast({
-              variant: 'danger',
-              title: context.root.$t('banners:error'),
-              body: isCreation.value
-                  ? context.root.$t('banners:bannerCreationWasFailed')
-                  : context.root.$t('banners:bannerUpdateWasFailed'),
-            });
-          })
-          .finally(() => {
-            isSubmitting.value = false;
+        .then(({ data }) => {
+          errors.value = {};
+
+          if (event.type === 'create') {
+            router.push(getBannersBannerFormUrl({ bannerId: String(data.id) }));
+          } else if (
+            event.type === 'create_exit' ||
+            event.type === 'save_exit'
+          ) {
+            navigateBack(router, getBannersBannerListUrl());
+          } else if (event.type === 'create_create-another') {
+            values.value = convertBannerToFormValues(
+              null,
+              zonesOptionList.value
+            );
+          }
+
+          toast.show({
+            variant: 'success',
+            title: t('banners:success'),
+            body: isCreation.value
+              ? t('banners:bannerWasSuccessfullyCreated')
+              : t('banners:bannerWasSuccessfullyUpdated'),
+          });
+        })
+        .catch((error) => {
+          console.error(error);
+          errors.value = convertRequestErrorToMap(error);
+          toast.show({
+            variant: 'danger',
+            title: t('banners:error'),
+            body: isCreation.value
+              ? t('banners:bannerCreationWasFailed')
+              : t('banners:bannerUpdateWasFailed'),
           });
+        })
+        .finally(() => {
+          isSubmitting.value = false;
+        });
     };
 
     const isContentLoading = computed<boolean>(
-        () => isBannerLoading.value || isZonesLoading.value
+      () =>
+        isBannerLoading.value ||
+        isZonesLoading.value ||
+        isZoneFieldsLoading.value
     );
 
     return {

package/src/views/Banners/BannerList/BannerList.vue

@@ -1,15 +1,15 @@
 <template>
-  <page
-    :title="$t('banners:banners')"
+  <Page
+    :title="$i18n.t('banners:banners')"
     :header-buttons="[
       {
-        text: $t('banners:createBanner'),
+        text: $i18n.t('banners:createBanner'),
         href: getBannersBannerFormUrl({ bannerId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <data-table
+    <template #content>
+      <DataTable
         :column-defs="columnDefs"
         :row-data="rowData"
         :loading="isRowDataLoading"
@@ -26,82 +26,85 @@
         }"
         @change="handleChange"
       >
-        <template v-slot:filters>
-          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
+        <template #filters>
+          <AdvancedSearch :tags="tags" @click:tag="tagRemovalHandler">
             <div class="filters">
-              <form-field-multi-select
-                v-model="zoneFilter"
+              <FormFieldMultiSelect
+                v-model:selected-options="zoneFilter"
                 :options="zonesOptionList"
                 name="zoneFilter"
                 :searchable="true"
-                :label="$t('banners:zone')"
+                :label="$i18n.t('banners:zone')"
                 class="filter"
               />
 
-              <form-field
-                v-model="dateFilter"
-                :label="$t('banners:date')"
+              <FormField
+                v-model:value="dateFilter"
+                :label="$i18n.t('banners:date')"
                 name="dateFilter"
                 type="date"
                 class="filter"
               />
 
-              <form-field-multi-select
-                v-model="statusFilter"
+              <FormFieldMultiSelect
+                v-model:selected-options="statusFilter"
                 :options="statusesOptionList"
                 name="statusFilter"
                 :searchable="true"
-                :label="$t('banners:status')"
+                :label="$i18n.t('banners:status')"
                 class="filter"
               />
             </div>
-          </advanced-search>
+          </AdvancedSearch>
         </template>
 
-        <template v-slot:cell(actions)="{ row }">
-          <base-button
+        <template #cell(actions)="{ row }">
+          <BaseButton
             variant="icon"
-            :title="$t('banners:edit')"
+            :title="$i18n.t('banners:edit')"
             :disabled="isBusy(row.id)"
             :href="getBannersBannerFormUrl({ bannerId: row.id })"
           >
-            <svg-icon name="edit" />
-          </base-button>
+            <EditIcon />
+          </BaseButton>
 
-          <base-button
+          <BaseButton
             variant="icon"
-            :title="$t('banners:remove')"
+            :title="$i18n.t('banners:remove')"
             :disabled="isBusy(row.id)"
             @click="handleResourceDelete(row.id)"
           >
-            <svg-icon name="delete" />
-          </base-button>
+            <DeleteIcon />
+          </BaseButton>
         </template>
-      </data-table>
+      </DataTable>
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, defineComponent, SetupContext, watch } from 'vue';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   ColumnDefinition,
   useDataTable,
-  useTranslation,
+  DataTable,
+  AdvancedSearch,
+  FormFieldMultiSelect,
+  FormField,
+  BaseButton,
+  EditIcon,
+  DeleteIcon,
 } from '@tager/admin-ui';
-import { useResourceDelete } from '@tager/admin-services';
+import { useI18n, useResourceDelete } from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
 import { deleteBanner, getBanners } from '../../../services/requests';
 import { Banner } from '../../../typings/banners';
-import { getBannersBannerFormUrl } from '../../../constants/paths';
+import { getBannersBannerFormUrl } from '../../../utils/paths';
 import { useFetchZones } from '../../../hooks';
 
 import { getColumnDefs } from './BannerList.helpers';
@@ -109,11 +112,22 @@ import { useAdvancedSearch } from './hooks';
 
 export default defineComponent({
   name: 'BannerList',
-  setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
-    const { loading: isZonesLoading, data: zoneList } = useFetchZones({
-      context,
-    });
+  components: {
+    DeleteIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable,
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const { t } = useI18n();
+
+    const { loading: isZonesLoading, data: zoneList } = useFetchZones();
 
     const {
       zoneFilter,
@@ -125,9 +139,9 @@ export default defineComponent({
       tags,
       tagRemovalHandler,
     } = useAdvancedSearch({
-      context,
       t,
       zoneList,
+      route,
     });
 
     const {
@@ -149,7 +163,6 @@ export default defineComponent({
           ...filterParams.value,
         }),
       initialValue: [],
-      context,
       resourceName: 'Banners',
     });
 
@@ -159,12 +172,12 @@ export default defineComponent({
       }
 
       const newQuery = {
-        ...pick(context.root.$route.query, ['query', 'pageNumber']),
+        ...pick(route.query, ['query', 'pageNumber']),
         ...filterParams.value,
       };
 
-      if (!isEqual(context.root.$route.query, newQuery)) {
-        context.root.$router.replace({ query: newQuery });
+      if (!isEqual(route.query, newQuery)) {
+        router.replace({ query: newQuery });
         fetchBanners();
       }
     });
@@ -173,7 +186,6 @@ export default defineComponent({
       deleteResource: deleteBanner,
       resourceName: 'Banner',
       onSuccess: fetchBanners,
-      context,
     });
 
     const isBusy = (bannerId: number): boolean => {
@@ -181,7 +193,7 @@ export default defineComponent({
     };
 
     const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>
-      getColumnDefs(zoneList.value, context.root.$t)
+      getColumnDefs(zoneList.value, t)
     );
 
     const isRowDataLoading = computed<boolean>(
@@ -217,17 +229,8 @@ export default defineComponent({
 
 <style lang="scss">
 .filters {
-  display: flex;
-  margin: 0 -10px;
-
-  &:not(:first-child) {
-    margin-top: 10px;
-  }
-
-  .filter {
-    padding: 10px 10px 0;
-    width: 50%;
-    margin: 0;
-  }
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 </style>