@tager/admin-banners 0.3.5 → 1.0.0

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

@@ -1,102 +1,132 @@
 <template>
-  <page
+  <Page
     :title="
-      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
+      isCreation
+        ? $i18n.t('banners:createBanner')
+        : $i18n.t('banners:updateBanner')
     "
     :is-content-loading="isContentLoading"
   >
-    <template v-slot:content>
+    <template #content>
       <form novalidate @submit.prevent="submitForm">
-        <form-field-select
-          v-model="values.bannerZone"
-          name="bannerZone"
-          :label="$t('banners:zone')"
-          :options="zonesOptionList"
-          :error="errors.bannerZone"
-        />
-
-        <form-field-file-input
-          v-model="values.image"
-          name="image"
-          file-type="image"
-          :label="$t('banners:image')"
-          :error="errors.file"
-        />
-
-        <form-field
-          v-model="values.link"
-          name="link"
-          :label="$t('banners:link')"
-          :error="errors.name"
-        />
+        <div class="zone">
+          <FormFieldSelect
+            v-model:value="values.bannerZone"
+            name="bannerZone"
+            :label="$i18n.t('banners:zone')"
+            :options="zonesOptionList"
+            :error="errors.bannerZone"
+          />
 
-        <form-field-checkbox
-          v-model="values.openNewTab"
-          name="openNewTab"
-          :label="$t('banners:openNewTab')"
-          :error="errors.openNewTab"
-        />
+          <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')"
+          <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')"
+          <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"
+        <FormFieldCheckbox
+          v-model:checked="values.disabled"
           name="disabled"
-          :label="$t('banners:disabled')"
+          :label="$i18n.t('banners:disabled')"
           :error="errors.disabled"
         />
 
-        <form-field
-          v-model="values.comment"
+        <div class="link">
+          <FormField
+            v-model:value="values.link"
+            name="link"
+            :label="$i18n.t('banners:link')"
+            :error="errors.name"
+          />
+
+          <FormFieldCheckbox
+            v-model:checked="values.openNewTab"
+            name="openNewTab"
+            :label="$i18n.t('banners:openNewTab')"
+            :error="errors.openNewTab"
+          />
+        </div>
+
+        <FormFieldFileInput
+          v-model:value="values.image"
+          name="image"
+          file-type="image"
+          :label="$i18n.t('banners:image')"
+          :error="errors.file"
+        />
+
+        <DynamicField
+          v-for="field of values.fields"
+          :key="field.name"
+          :field="field"
+        />
+
+        <FormField
+          v-model:value="values.comment"
           name="comment"
           type="textarea"
-          :label="$t('banners:comment')"
+          :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"
+        @submit="submitForm"
       />
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  ref,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, defineComponent, ref, SetupContext, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 
-import { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';
-import { convertRequestErrorToMap } from '@tager/admin-services';
+import {
+  FormField,
+  FormFieldCheckbox,
+  FormFieldFileInput,
+  FormFieldSelect,
+  FormFooter,
+  InputLabel,
+  OptionType,
+  TagerFormSubmitEvent,
+} from '@tager/admin-ui';
+import { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';
+import {
+  convertRequestErrorToMap,
+  navigateBack,
+  useI18n,
+  useToast,
+} from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
 import { useFetchZones } from '../../../hooks';
 import { BannerFormValues } from '../../../typings/banners';
@@ -104,8 +134,9 @@ import { useFetchBanner } from '../../../hooks/useFetchBanner';
 import {
   getBannersBannerFormUrl,
   getBannersBannerListUrl,
-} from '../../../constants/paths';
+} from '../../../utils/paths';
 import { createBanner, updateBanner } from '../../../services/requests';
+import { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';
 
 import {
   convertBannerFormValuesToPayload,
@@ -114,16 +145,28 @@ 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) => ({
@@ -135,7 +178,6 @@ export default defineComponent({
     /** Banner **/
 
     const { data: banner, loading: isBannerLoading } = useFetchBanner({
-      context,
       bannerId,
       isCreation,
     });
@@ -155,6 +197,21 @@ export default defineComponent({
       );
     });
 
+    /** 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
+          )
+      );
+    });
+
     const submitForm = (event: TagerFormSubmitEvent) => {
       isSubmitting.value = true;
 
@@ -169,39 +226,36 @@ export default defineComponent({
           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') {
+            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
             );
           }
 
-          context.root.$toast({
+          toast.show({
             variant: 'success',
-            title: context.root.$t('banners:success'),
+            title: t('banners:success'),
             body: isCreation.value
-              ? context.root.$t('banners:bannerWasSuccessfullyCreated')
-              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
+              ? t('banners:bannerWasSuccessfullyCreated')
+              : t('banners:bannerWasSuccessfullyUpdated'),
           });
         })
         .catch((error) => {
           console.error(error);
           errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
+          toast.show({
             variant: 'danger',
-            title: context.root.$t('banners:error'),
+            title: t('banners:error'),
             body: isCreation.value
-              ? context.root.$t('banners:bannerCreationWasFailed')
-              : context.root.$t('banners:bannerUpdateWasFailed'),
+              ? t('banners:bannerCreationWasFailed')
+              : t('banners:bannerUpdateWasFailed'),
           });
         })
         .finally(() => {
@@ -210,7 +264,10 @@ export default defineComponent({
     };
 
     const isContentLoading = computed<boolean>(
-      () => isBannerLoading.value || isZonesLoading.value
+      () =>
+        isBannerLoading.value ||
+        isZonesLoading.value ||
+        isZoneFieldsLoading.value
     );
 
     return {
@@ -233,4 +290,32 @@ export default defineComponent({
   grid-template-columns: repeat(2, 1fr);
   column-gap: 10px;
 }
+
+.zone {
+  display: flex;
+
+  > *:first-child {
+    flex: 1 1 1px;
+  }
+
+  > *:last-child {
+    flex-basis: 30%;
+    margin-left: 20px;
+  }
+}
+
+.link {
+  display: flex;
+  align-items: flex-end;
+
+  > *:first-child {
+    flex: 1 1 1px;
+  }
+
+  > *:last-child {
+    flex-basis: 30%;
+    margin-left: 20px;
+    padding-bottom: 8px;
+  }
+}
 </style>

package/src/views/Banners/BannerList/BannerList.helpers.ts

@@ -57,6 +57,13 @@ export function getColumnDefs(
     },
     {
       id: 3,
+      name: t('banners:priority'),
+      field: 'priority',
+      style: { width: '100px', textAlign: 'center' },
+      headStyle: { width: '100px', textAlign: 'center' },
+    },
+    {
+      id: 4,
       name: t('banners:period'),
       field: 'dateStart',
       format: ({ row }) =>
@@ -65,13 +72,13 @@ export function getColumnDefs(
         }`,
     },
     {
-      id: 4,
+      id: 5,
       name: t('banners:image'),
       field: 'image',
       type: 'image',
     },
     {
-      id: 5,
+      id: 6,
       name: t('banners:link'),
       field: 'link',
       type: 'name',
@@ -92,12 +99,12 @@ export function getColumnDefs(
       },
     },
     {
-      id: 6,
+      id: 7,
       name: t('banners:comment'),
       field: 'comment',
     },
     {
-      id: 7,
+      id: 8,
       name: t('banners:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '100px' },

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',
+  components: {
+    DeleteIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable,
+  },
   setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
-    const { loading: isZonesLoading, data: zoneList } = useFetchZones({
-      context,
-    });
+    const route = useRoute();
+    const router = useRouter();
+    const { t } = useI18n();
+
+    const { loading: isZonesLoading, data: zoneList } = useFetchZones();
 
     const {
       zoneFilter,
@@ -128,6 +142,7 @@ export default defineComponent({
       context,
       t,
       zoneList,
+      route,
     });
 
     const {
@@ -149,7 +164,6 @@ export default defineComponent({
           ...filterParams.value,
         }),
       initialValue: [],
-      context,
       resourceName: 'Banners',
     });
 
@@ -159,12 +173,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 +187,6 @@ export default defineComponent({
       deleteResource: deleteBanner,
       resourceName: 'Banner',
       onSuccess: fetchBanners,
-      context,
     });
 
     const isBusy = (bannerId: number): boolean => {
@@ -181,7 +194,7 @@ export default defineComponent({
     };
 
     const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>
-      getColumnDefs(zoneList.value, context.root.$t)
+      getColumnDefs(zoneList.value, t)
     );
 
     const isRowDataLoading = computed<boolean>(

package/src/views/Banners/BannerList/hooks/useAdvancedSearch.ts

@@ -1,12 +1,6 @@
-import {
-  computed,
-  ComputedRef,
-  ref,
-  Ref,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, ComputedRef, ref, Ref, SetupContext, watch } from 'vue';
 import { TFunction } from 'i18next';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import {
   FilterTagType,
@@ -23,7 +17,8 @@ import { getStatus } from '../BannerList.helpers';
 interface Params {
   context: SetupContext;
   t: TFunction;
-  zoneList: ComputedRef<Zone[]>;
+  zoneList: Ref<Zone[]>;
+  route: RouteLocationNormalizedLoaded;
 }
 
 interface State {
@@ -34,6 +29,7 @@ interface State {
   statusesOptionList: ComputedRef<OptionType[]>;
   filterParams: ComputedRef<Record<string, string | string[]>>;
   tags: ComputedRef<FilterTagType[]>;
+
   tagRemovalHandler(event: FilterTagType): void;
 }
 
@@ -43,7 +39,12 @@ enum FilterTypes {
   Status = 'status',
 }
 
-export function useAdvancedSearch({ context, t, zoneList }: Params): State {
+export function useAdvancedSearch({
+  context,
+  t,
+  zoneList,
+  route,
+}: Params): State {
   /** Zone **/
 
   const zonesOptionList = computed<OptionType[]>(() =>
@@ -55,7 +56,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
 
   const initialZoneFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.Zone
     );
     return zonesOptionList.value.filter(({ value }) =>
@@ -72,8 +73,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
   /** Date **/
 
   const initialDateFilter = computed<string>(
-    () =>
-      getFilterParamAsString(context.root.$route.query, FilterTypes.Date) ?? ''
+    () => getFilterParamAsString(route.query, FilterTypes.Date) ?? ''
   );
 
   const dateFilter = ref<string>(initialDateFilter.value);
@@ -93,7 +93,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
 
   const initialStatusFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.Status
     );
     return statusesOptionList.value.filter(({ value }) =>