@tager/admin-banners 0.3.6 → 0.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-banners",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

package/src/hooks/useFetchZoneFields.ts

@@ -0,0 +1,48 @@
+import {
+  computed,
+  onMounted,
+  Ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
+
+import { getZoneFields } from '../services/requests';
+import { ZoneFields } from '../typings/zones';
+import { BannerFormValues } from '../typings/banners';
+
+export function useFetchZoneFields({
+  context,
+  values,
+}: {
+  context: SetupContext;
+  values: Ref<BannerFormValues>;
+}): ResourceRef<Nullable<ZoneFields>> {
+  const zoneId = computed(() => values.value.bannerZone?.value ?? '');
+
+  const [fetchZoneFields, resource] = useResource<Nullable<ZoneFields>>({
+    fetchResource: () => getZoneFields(zoneId.value),
+    initialValue: null,
+    context,
+    resourceName: 'Zone Fields',
+  });
+
+  onMounted(() => {
+    if (!zoneId.value) {
+      return;
+    }
+
+    fetchZoneFields();
+  });
+
+  watch(zoneId, () => {
+    if (!zoneId.value) {
+      return;
+    }
+
+    fetchZoneFields();
+  });
+
+  return resource;
+}

package/src/services/requests.ts

@@ -1,6 +1,6 @@
 import { request, ResponseBody } from '@tager/admin-services';
 
-import { Zone } from '../typings/zones';
+import { Zone, ZoneFields } from '../typings/zones';
 import { Banner, BannerPayload } from '../typings/banners';
 
 /** Zones **/
@@ -13,6 +13,12 @@ export function getZones(params?: {
   return request.get({ path: '/admin/adv/zones', params });
 }
 
+export function getZoneFields(
+  zoneId: string
+): Promise<ResponseBody<ZoneFields>> {
+  return request.get({ path: `/admin/adv/zones/${zoneId}` });
+}
+
 /** Banners **/
 
 export function getBanners(params?: {

package/src/typings/banners.ts

@@ -1,5 +1,11 @@
 import { FileType, Nullable } from '@tager/admin-services';
 import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
+import {
+  FieldShortType,
+  FieldUnion,
+  IncomingValueUnion,
+  OutgoingValueUnion,
+} from '@tager/admin-dynamic-field';
 
 export enum Status {
   Waiting = 'WAITING',
@@ -20,18 +26,20 @@ export interface Banner {
   dateEnd: Nullable<string>;
   disabled: boolean;
   comment: Nullable<string>;
+  fields: FieldShortType<IncomingValueUnion>[];
 }
 
 export interface BannerFormValues {
   link: Nullable<string>;
   image: Nullable<SingleFileInputValueType>;
   bannerZone: Nullable<OptionType>;
-  priority: number;
+  priority: string;
   openNewTab: boolean;
   dateStart: string;
   dateEnd: string;
   disabled: boolean;
   comment: string;
+  fields: FieldUnion[];
 }
 
 export interface BannerPayload {
@@ -44,4 +52,5 @@ export interface BannerPayload {
   dateEnd: Nullable<string>;
   disabled: boolean;
   comment: string;
+  fields: FieldShortType<OutgoingValueUnion>[];
 }

package/src/typings/zones.ts

@@ -1,5 +1,11 @@
+import { FieldConfigUnion } from '@tager/admin-dynamic-field';
+
 export interface Zone {
   id: string;
   name: string;
   bannersCount: number;
 }
+
+export interface ZoneFields extends Zone {
+  fields: FieldConfigUnion[];
+}

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

@@ -1,5 +1,6 @@
 import { OptionType } from '@tager/admin-ui';
 import { createId, Nullable } from '@tager/admin-services';
+import { universalFieldUtils } from '@tager/admin-dynamic-field';
 
 import {
   Banner,
@@ -16,7 +17,7 @@ export function convertBannerToFormValues(
   );
 
   return {
-    priority: banner?.priority ?? 1,
+    priority: String(banner?.priority ?? 1),
     link: banner?.link ?? '',
     image: banner?.image ? { id: createId(), file: banner.image } : null,
     bannerZone: foundZone ?? null,
@@ -25,6 +26,7 @@ export function convertBannerToFormValues(
     dateEnd: banner?.dateEnd ?? '',
     disabled: banner?.disabled ?? false,
     comment: banner?.comment ?? '',
+    fields: [],
   };
 }
 
@@ -38,5 +40,9 @@ export function convertBannerFormValuesToPayload(
     dateEnd: values.dateEnd ? values.dateEnd : null,
     image: values.image?.file.id ?? null,
     bannerZone: values.bannerZone?.value ?? '',
+    fields: values.fields.map((field) => ({
+      name: field.config.name,
+      value: universalFieldUtils.getOutgoingValue(field),
+    })),
   };
 }

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

@@ -1,26 +1,26 @@
 <template>
   <page
-      :title="
+    :title="
       isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
     "
-      :is-content-loading="isContentLoading"
+    :is-content-loading="isContentLoading"
   >
     <template v-slot: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"
+            v-model="values.bannerZone"
+            name="bannerZone"
+            :label="$t('banners:zone')"
+            :options="zonesOptionList"
+            :error="errors.bannerZone"
           />
 
           <form-field
-              v-model="values.priority"
-              name="priority"
-              :label="$t('banners:priority')"
-              :error="errors.priority"
+            v-model="values.priority"
+            name="priority"
+            :label="$t('banners:priority')"
+            :error="errors.priority"
           />
         </div>
 
@@ -28,70 +28,76 @@
 
         <div class="date">
           <form-field
-              v-model="values.dateStart"
-              :label="$t('banners:from')"
-              name="dateStart"
-              type="date"
-              :max="values.dateEnd"
+            v-model="values.dateStart"
+            :label="$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"
+            v-model="values.dateEnd"
+            :label="$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"
+          v-model="values.disabled"
+          name="disabled"
+          :label="$t('banners:disabled')"
+          :error="errors.disabled"
         />
 
         <div class="link">
           <form-field
-              v-model="values.link"
-              name="link"
-              :label="$t('banners:link')"
-              :error="errors.name"
+            v-model="values.link"
+            name="link"
+            :label="$t('banners:link')"
+            :error="errors.name"
           />
 
           <form-field-checkbox
-              v-model="values.openNewTab"
-              name="openNewTab"
-              :label="$t('banners:openNewTab')"
-              :error="errors.openNewTab"
+            v-model="values.openNewTab"
+            name="openNewTab"
+            :label="$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"
+          v-model="values.image"
+          name="image"
+          file-type="image"
+          :label="$t('banners:image')"
+          :error="errors.file"
+        />
+
+        <DynamicField
+          v-for="field of values.fields"
+          :key="field.name"
+          :field="field"
         />
 
         <form-field
-            v-model="values.comment"
-            name="comment"
-            type="textarea"
-            :label="$t('banners:comment')"
-            :error="errors.comment"
+          v-model="values.comment"
+          name="comment"
+          type="textarea"
+          :label="$t('banners:comment')"
+          :error="errors.comment"
         />
       </form>
     </template>
 
     <template v-slot:footer>
       <FormFooter
-          :back-href="bannerListUrl"
-          :on-submit="submitForm"
-          :is-submitting="isSubmitting"
-          :is-creation="isCreation"
-          :can-create-another="isCreation"
+        :back-href="bannerListUrl"
+        :on-submit="submitForm"
+        :is-submitting="isSubmitting"
+        :is-creation="isCreation"
+        :can-create-another="isCreation"
       />
     </template>
   </page>
@@ -106,17 +112,19 @@ import {
   watch,
 } from '@vue/composition-api';
 
-import {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';
-import {convertRequestErrorToMap} from '@tager/admin-services';
+import { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';
+import { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';
+import { convertRequestErrorToMap } from '@tager/admin-services';
 
-import {useFetchZones} from '../../../hooks';
-import {BannerFormValues} from '../../../typings/banners';
-import {useFetchBanner} from '../../../hooks/useFetchBanner';
+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';
+import { createBanner, updateBanner } from '../../../services/requests';
+import { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';
 
 import {
   convertBannerFormValuesToPayload,
@@ -125,27 +133,27 @@ import {
 
 export default defineComponent({
   name: 'BannerForm',
-  components: {FormFooter},
+  components: { FormFooter, DynamicField },
   setup(props, context: SetupContext) {
     const bannerId = computed<string>(
-        () => context.root.$route.params.bannerId
+      () => context.root.$route.params.bannerId
     );
     const isCreation = computed<boolean>(() => bannerId.value === 'create');
 
     /** Zones **/
 
-    const {data: zones, loading: isZonesLoading} = useFetchZones({context});
+    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
 
     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({
+    const { data: banner, loading: isBannerLoading } = useFetchBanner({
       context,
       bannerId,
       isCreation,
@@ -155,14 +163,32 @@ 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({ context, 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 +198,59 @@ 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') {
+            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;
+        });
     };
 
     const isContentLoading = computed<boolean>(
-        () => isBannerLoading.value || isZonesLoading.value
+      () =>
+        isBannerLoading.value ||
+        isZonesLoading.value ||
+        isZoneFieldsLoading.value
     );
 
     return {