@tager/admin-banners 0.3.6 → 0.3.7

package/dist/hooks/useFetchZoneFields.d.ts

@@ -0,0 +1,8 @@
+import { Ref, SetupContext } from '@vue/composition-api';
+import { Nullable, ResourceRef } from '@tager/admin-services';
+import { ZoneFields } from '../typings/zones';
+import { BannerFormValues } from '../typings/banners';
+export declare function useFetchZoneFields({ context, values, }: {
+    context: SetupContext;
+    values: Ref<BannerFormValues>;
+}): ResourceRef<Nullable<ZoneFields>>;

package/dist/index.esm.js

@@ -2,6 +2,7 @@ import { request, useResource, useResourceDelete, createId, convertRequestErrorT
 import { defineComponent, onMounted, computed, ref, watch } from '@vue/composition-api';
 import { useDataTable, getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, FormFooter } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
+import { universalFieldUtils, DynamicField } from '@tager/admin-dynamic-field';
 
 const EN = {
     home: 'Home',
@@ -89,6 +90,9 @@ const RU = {
 function getZones(params) {
     return request.get({ path: '/admin/adv/zones', params });
 }
+function getZoneFields(zoneId) {
+    return request.get({ path: `/admin/adv/zones/${zoneId}` });
+}
 /** Banners **/
 function getBanners(params) {
     return request.get({ path: '/admin/adv', params });
@@ -3248,11 +3252,34 @@ function useFetchBanner({ context, bannerId, isCreation, }) {
     return resource;
 }
 
+function useFetchZoneFields({ context, values, }) {
+    const zoneId = computed(() => { var _a, _b; return (_b = (_a = values.value.bannerZone) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''; });
+    const [fetchZoneFields, resource] = useResource({
+        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;
+}
+
 function convertBannerToFormValues(banner, zonesOptionList) {
     var _a, _b, _c, _d, _e, _f, _g;
     const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
     return {
-        priority: (_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1,
+        priority: String((_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1),
         link: (_b = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _b !== void 0 ? _b : '',
         image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: createId(), file: banner.image } : null,
         bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
@@ -3261,16 +3288,20 @@ function convertBannerToFormValues(banner, zonesOptionList) {
         dateEnd: (_e = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _e !== void 0 ? _e : '',
         disabled: (_f = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _f !== void 0 ? _f : false,
         comment: (_g = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _g !== void 0 ? _g : '',
+        fields: [],
     };
 }
 function convertBannerFormValuesToPayload(values) {
     var _a, _b, _c, _d;
-    return Object.assign(Object.assign({}, values), { priority: values.priority ? Number(values.priority) : 1, dateStart: values.dateStart ? values.dateStart : null, dateEnd: values.dateEnd ? values.dateEnd : null, image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '' });
+    return Object.assign(Object.assign({}, values), { priority: values.priority ? Number(values.priority) : 1, dateStart: values.dateStart ? values.dateStart : null, dateEnd: values.dateEnd ? values.dateEnd : null, image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '', fields: values.fields.map((field) => ({
+            name: field.config.name,
+            value: universalFieldUtils.getOutgoingValue(field),
+        })) });
 }
 
 var script$2 = defineComponent({
     name: 'BannerForm',
-    components: { FormFooter },
+    components: { FormFooter, DynamicField },
     setup(props, context) {
         const bannerId = computed(() => context.root.$route.params.bannerId);
         const isCreation = computed(() => bannerId.value === 'create');
@@ -3293,6 +3324,15 @@ var script$2 = defineComponent({
         watch([banner, zones], () => {
             values.value = convertBannerToFormValues(banner.value, zonesOptionList.value);
         });
+        /** Zone Fields **/
+        const { loading: isZoneFieldsLoading, data: zoneFields, } = useFetchZoneFields({ context, values });
+        watch(zoneFields, () => {
+            var _a, _b;
+            values.value.fields = ((_b = (_a = zoneFields.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map((fieldConfig, index) => {
+                var _a;
+                return universalFieldUtils.createFormField(fieldConfig, banner.value ? (_a = banner.value.fields[index].value) !== null && _a !== void 0 ? _a : null : null);
+            });
+        });
         const submitForm = (event) => {
             isSubmitting.value = true;
             const body = convertBannerFormValuesToPayload(values.value);
@@ -3334,7 +3374,9 @@ var script$2 = defineComponent({
                 isSubmitting.value = false;
             });
         };
-        const isContentLoading = computed(() => isBannerLoading.value || isZonesLoading.value);
+        const isContentLoading = computed(() => isBannerLoading.value ||
+            isZonesLoading.value ||
+            isZoneFieldsLoading.value);
         return {
             isCreation,
             isContentLoading,
@@ -3527,6 +3569,13 @@ var __vue_render__$2 = function () {
                   },
                 }),
                 _vm._v(" "),
+                _vm._l(_vm.values.fields, function (field) {
+                  return _c("DynamicField", {
+                    key: field.name,
+                    attrs: { field: field },
+                  })
+                }),
+                _vm._v(" "),
                 _c("form-field", {
                   attrs: {
                     name: "comment",
@@ -3543,7 +3592,7 @@ var __vue_render__$2 = function () {
                   },
                 }),
               ],
-              1
+              2
             ),
           ]
         },
@@ -3575,7 +3624,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-6400fd96_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AAiPA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AChPA;ADmPA;EACA,aAAA;AChPA;ADkPA;EACA,aAAA;AChPA;ADmPA;EACA,eAAA;EACA,iBAAA;ACjPA;ADqPA;EACA,aAAA;EACA,qBAAA;AClPA;ADoPA;EACA,aAAA;AClPA;ADqPA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;ACnPA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n  <page\n      :title=\"\n      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n    \"\n      :is-content-loading=\"isContentLoading\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <div class=\"zone\">\n          <form-field-select\n              v-model=\"values.bannerZone\"\n              name=\"bannerZone\"\n              :label=\"$t('banners:zone')\"\n              :options=\"zonesOptionList\"\n              :error=\"errors.bannerZone\"\n          />\n\n          <form-field\n              v-model=\"values.priority\"\n              name=\"priority\"\n              :label=\"$t('banners:priority')\"\n              :error=\"errors.priority\"\n          />\n        </div>\n\n        <input-label>{{ $t('banners:period') }}</input-label>\n\n        <div class=\"date\">\n          <form-field\n              v-model=\"values.dateStart\"\n              :label=\"$t('banners:from')\"\n              name=\"dateStart\"\n              type=\"date\"\n              :max=\"values.dateEnd\"\n          />\n\n          <form-field\n              v-model=\"values.dateEnd\"\n              :label=\"$t('banners:to')\"\n              name=\"dateEnd\"\n              type=\"date\"\n              :min=\"values.dateStart\"\n          />\n        </div>\n\n        <form-field-checkbox\n            v-model=\"values.disabled\"\n            name=\"disabled\"\n            :label=\"$t('banners:disabled')\"\n            :error=\"errors.disabled\"\n        />\n\n        <div class=\"link\">\n          <form-field\n              v-model=\"values.link\"\n              name=\"link\"\n              :label=\"$t('banners:link')\"\n              :error=\"errors.name\"\n          />\n\n          <form-field-checkbox\n              v-model=\"values.openNewTab\"\n              name=\"openNewTab\"\n              :label=\"$t('banners:openNewTab')\"\n              :error=\"errors.openNewTab\"\n          />\n        </div>\n\n        <form-field-file-input\n            v-model=\"values.image\"\n            name=\"image\"\n            file-type=\"image\"\n            :label=\"$t('banners:image')\"\n            :error=\"errors.file\"\n        />\n\n        <form-field\n            v-model=\"values.comment\"\n            name=\"comment\"\n            type=\"textarea\"\n            :label=\"$t('banners:comment')\"\n            :error=\"errors.comment\"\n        />\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n          :back-href=\"bannerListUrl\"\n          :on-submit=\"submitForm\"\n          :is-submitting=\"isSubmitting\"\n          :is-creation=\"isCreation\"\n          :can-create-another=\"isCreation\"\n      />\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  ref,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\n\nimport {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';\nimport {convertRequestErrorToMap} from '@tager/admin-services';\n\nimport {useFetchZones} from '../../../hooks';\nimport {BannerFormValues} from '../../../typings/banners';\nimport {useFetchBanner} from '../../../hooks/useFetchBanner';\nimport {\n  getBannersBannerFormUrl,\n  getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport {createBanner, updateBanner} from '../../../services/requests';\n\nimport {\n  convertBannerFormValuesToPayload,\n  convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n  name: 'BannerForm',\n  components: {FormFooter},\n  setup(props, context: SetupContext) {\n    const bannerId = computed<string>(\n        () => context.root.$route.params.bannerId\n    );\n    const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n    /** Zones **/\n\n    const {data: zones, loading: isZonesLoading} = useFetchZones({context});\n\n    const zonesOptionList = computed<OptionType[]>(() =>\n        zones.value.map<OptionType>((zone) => ({\n          value: zone.id,\n          label: zone.name,\n        }))\n    );\n\n    /** Banner **/\n\n    const {data: banner, loading: isBannerLoading} = useFetchBanner({\n      context,\n      bannerId,\n      isCreation,\n    });\n\n    /** Form State **/\n\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<BannerFormValues>(\n        convertBannerToFormValues(banner.value, zonesOptionList.value)\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([banner, zones], () => {\n      values.value = convertBannerToFormValues(\n          banner.value,\n          zonesOptionList.value\n      );\n    });\n\n    const submitForm = (event: TagerFormSubmitEvent) => {\n      isSubmitting.value = true;\n\n      const body = convertBannerFormValuesToPayload(values.value);\n\n      const requestPromise = isCreation.value\n          ? createBanner(body)\n          : updateBanner(bannerId.value, body);\n\n      requestPromise\n          .then(({data}) => {\n            errors.value = {};\n\n            if (event.type === 'create') {\n              context.root.$router.push(\n                  getBannersBannerFormUrl({bannerId: String(data.id)})\n              );\n            }\n\n            if (event.type === 'create_exit' || event.type === 'save_exit') {\n              context.root.$router.push(getBannersBannerListUrl());\n            }\n\n            if (event.type === 'create_create-another') {\n              values.value = convertBannerToFormValues(\n                  null,\n                  zonesOptionList.value\n              );\n            }\n\n            context.root.$toast({\n              variant: 'success',\n              title: context.root.$t('banners:success'),\n              body: isCreation.value\n                  ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n                  : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n            });\n          })\n          .catch((error) => {\n            console.error(error);\n            errors.value = convertRequestErrorToMap(error);\n            context.root.$toast({\n              variant: 'danger',\n              title: context.root.$t('banners:error'),\n              body: isCreation.value\n                  ? context.root.$t('banners:bannerCreationWasFailed')\n                  : context.root.$t('banners:bannerUpdateWasFailed'),\n            });\n          })\n          .finally(() => {\n            isSubmitting.value = false;\n          });\n    };\n\n    const isContentLoading = computed<boolean>(\n        () => isBannerLoading.value || isZonesLoading.value\n    );\n\n    return {\n      isCreation,\n      isContentLoading,\n      isSubmitting,\n      values,\n      errors,\n      submitForm,\n      bannerListUrl: getBannersBannerListUrl(),\n      zonesOptionList,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n  }\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n    padding-bottom: 8px;\n  }\n}\n</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
+    inject("data-v-ddc2a1b6_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AA8QA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AC7QA;ADgRA;EACA,aAAA;AC7QA;AD+QA;EACA,aAAA;AC7QA;ADgRA;EACA,eAAA;EACA,iBAAA;AC9QA;ADkRA;EACA,aAAA;EACA,qBAAA;AC/QA;ADiRA;EACA,aAAA;AC/QA;ADkRA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;AChRA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"\n      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n    \"\n    :is-content-loading=\"isContentLoading\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <div class=\"zone\">\n          <form-field-select\n            v-model=\"values.bannerZone\"\n            name=\"bannerZone\"\n            :label=\"$t('banners:zone')\"\n            :options=\"zonesOptionList\"\n            :error=\"errors.bannerZone\"\n          />\n\n          <form-field\n            v-model=\"values.priority\"\n            name=\"priority\"\n            :label=\"$t('banners:priority')\"\n            :error=\"errors.priority\"\n          />\n        </div>\n\n        <input-label>{{ $t('banners:period') }}</input-label>\n\n        <div class=\"date\">\n          <form-field\n            v-model=\"values.dateStart\"\n            :label=\"$t('banners:from')\"\n            name=\"dateStart\"\n            type=\"date\"\n            :max=\"values.dateEnd\"\n          />\n\n          <form-field\n            v-model=\"values.dateEnd\"\n            :label=\"$t('banners:to')\"\n            name=\"dateEnd\"\n            type=\"date\"\n            :min=\"values.dateStart\"\n          />\n        </div>\n\n        <form-field-checkbox\n          v-model=\"values.disabled\"\n          name=\"disabled\"\n          :label=\"$t('banners:disabled')\"\n          :error=\"errors.disabled\"\n        />\n\n        <div class=\"link\">\n          <form-field\n            v-model=\"values.link\"\n            name=\"link\"\n            :label=\"$t('banners:link')\"\n            :error=\"errors.name\"\n          />\n\n          <form-field-checkbox\n            v-model=\"values.openNewTab\"\n            name=\"openNewTab\"\n            :label=\"$t('banners:openNewTab')\"\n            :error=\"errors.openNewTab\"\n          />\n        </div>\n\n        <form-field-file-input\n          v-model=\"values.image\"\n          name=\"image\"\n          file-type=\"image\"\n          :label=\"$t('banners:image')\"\n          :error=\"errors.file\"\n        />\n\n        <DynamicField\n          v-for=\"field of values.fields\"\n          :key=\"field.name\"\n          :field=\"field\"\n        />\n\n        <form-field\n          v-model=\"values.comment\"\n          name=\"comment\"\n          type=\"textarea\"\n          :label=\"$t('banners:comment')\"\n          :error=\"errors.comment\"\n        />\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n        :back-href=\"bannerListUrl\"\n        :on-submit=\"submitForm\"\n        :is-submitting=\"isSubmitting\"\n        :is-creation=\"isCreation\"\n        :can-create-another=\"isCreation\"\n      />\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  ref,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\n\nimport { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';\nimport { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';\nimport { convertRequestErrorToMap } from '@tager/admin-services';\n\nimport { useFetchZones } from '../../../hooks';\nimport { BannerFormValues } from '../../../typings/banners';\nimport { useFetchBanner } from '../../../hooks/useFetchBanner';\nimport {\n  getBannersBannerFormUrl,\n  getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport { createBanner, updateBanner } from '../../../services/requests';\nimport { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';\n\nimport {\n  convertBannerFormValuesToPayload,\n  convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n  name: 'BannerForm',\n  components: { FormFooter, DynamicField },\n  setup(props, context: SetupContext) {\n    const bannerId = computed<string>(\n      () => context.root.$route.params.bannerId\n    );\n    const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n    /** Zones **/\n\n    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });\n\n    const zonesOptionList = computed<OptionType[]>(() =>\n      zones.value.map<OptionType>((zone) => ({\n        value: zone.id,\n        label: zone.name,\n      }))\n    );\n\n    /** Banner **/\n\n    const { data: banner, loading: isBannerLoading } = useFetchBanner({\n      context,\n      bannerId,\n      isCreation,\n    });\n\n    /** Form State **/\n\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<BannerFormValues>(\n      convertBannerToFormValues(banner.value, zonesOptionList.value)\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([banner, zones], () => {\n      values.value = convertBannerToFormValues(\n        banner.value,\n        zonesOptionList.value\n      );\n    });\n\n    /** Zone Fields **/\n\n    const {\n      loading: isZoneFieldsLoading,\n      data: zoneFields,\n    } = useFetchZoneFields({ context, values });\n\n    watch(zoneFields, () => {\n      values.value.fields = (\n        zoneFields.value?.fields ?? []\n      ).map((fieldConfig, index) =>\n        universalFieldUtils.createFormField(\n          fieldConfig,\n          banner.value ? banner.value.fields[index].value ?? null : null\n        )\n      );\n    });\n\n    const submitForm = (event: TagerFormSubmitEvent) => {\n      isSubmitting.value = true;\n\n      const body = convertBannerFormValuesToPayload(values.value);\n\n      const requestPromise = isCreation.value\n        ? createBanner(body)\n        : updateBanner(bannerId.value, body);\n\n      requestPromise\n        .then(({ data }) => {\n          errors.value = {};\n\n          if (event.type === 'create') {\n            context.root.$router.push(\n              getBannersBannerFormUrl({ bannerId: String(data.id) })\n            );\n          }\n\n          if (event.type === 'create_exit' || event.type === 'save_exit') {\n            context.root.$router.push(getBannersBannerListUrl());\n          }\n\n          if (event.type === 'create_create-another') {\n            values.value = convertBannerToFormValues(\n              null,\n              zonesOptionList.value\n            );\n          }\n\n          context.root.$toast({\n            variant: 'success',\n            title: context.root.$t('banners:success'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          errors.value = convertRequestErrorToMap(error);\n          context.root.$toast({\n            variant: 'danger',\n            title: context.root.$t('banners:error'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerCreationWasFailed')\n              : context.root.$t('banners:bannerUpdateWasFailed'),\n          });\n        })\n        .finally(() => {\n          isSubmitting.value = false;\n        });\n    };\n\n    const isContentLoading = computed<boolean>(\n      () =>\n        isBannerLoading.value ||\n        isZonesLoading.value ||\n        isZoneFieldsLoading.value\n    );\n\n    return {\n      isCreation,\n      isContentLoading,\n      isSubmitting,\n      values,\n      errors,\n      submitForm,\n      bannerListUrl: getBannersBannerListUrl(),\n      zonesOptionList,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n  }\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n    padding-bottom: 8px;\n  }\n}\n</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
@@ -3657,4 +3706,4 @@ function getBannersMenuItem(params) {
 i18n.addTranslations('en', 'banners', EN);
 i18n.addTranslations('ru', 'banners', RU);
 
-export { BANNERS_BANNER_FORM_ROUTE, BANNERS_BANNER_LIST_ROUTE, BANNERS_ROUTE_PATHS, BANNERS_ZONE_LIST_ROUTE, createBanner, deleteBanner, getBanner, getBannerCount, getBanners, getBannersBannerFormUrl, getBannersBannerListUrl, getBannersMenuItem, getBannersZoneListUrl, getZones, updateBanner };
+export { BANNERS_BANNER_FORM_ROUTE, BANNERS_BANNER_LIST_ROUTE, BANNERS_ROUTE_PATHS, BANNERS_ZONE_LIST_ROUTE, createBanner, deleteBanner, getBanner, getBannerCount, getBanners, getBannersBannerFormUrl, getBannersBannerListUrl, getBannersMenuItem, getBannersZoneListUrl, getZoneFields, getZones, updateBanner };

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tager/admin-services'), require('@vue/composition-api'), require('@tager/admin-ui'), require('path-to-regexp')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tager/admin-services', '@vue/composition-api', '@tager/admin-ui', 'path-to-regexp'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TagerAdminBanners = {}, global.adminServices, global.compositionApi, global.adminUi, global.pathToRegexp));
-}(this, (function (exports, adminServices, compositionApi, adminUi, pathToRegexp) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tager/admin-services'), require('@vue/composition-api'), require('@tager/admin-ui'), require('path-to-regexp'), require('@tager/admin-dynamic-field')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@tager/admin-services', '@vue/composition-api', '@tager/admin-ui', 'path-to-regexp', '@tager/admin-dynamic-field'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TagerAdminBanners = {}, global.adminServices, global.compositionApi, global.adminUi, global.pathToRegexp, global.adminDynamicField));
+}(this, (function (exports, adminServices, compositionApi, adminUi, pathToRegexp, adminDynamicField) { 'use strict';
 
   const EN = {
       home: 'Home',
@@ -90,6 +90,9 @@
   function getZones(params) {
       return adminServices.request.get({ path: '/admin/adv/zones', params });
   }
+  function getZoneFields(zoneId) {
+      return adminServices.request.get({ path: `/admin/adv/zones/${zoneId}` });
+  }
   /** Banners **/
   function getBanners(params) {
       return adminServices.request.get({ path: '/admin/adv', params });
@@ -3249,11 +3252,34 @@
       return resource;
   }
 
+  function useFetchZoneFields({ context, values, }) {
+      const zoneId = compositionApi.computed(() => { var _a, _b; return (_b = (_a = values.value.bannerZone) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''; });
+      const [fetchZoneFields, resource] = adminServices.useResource({
+          fetchResource: () => getZoneFields(zoneId.value),
+          initialValue: null,
+          context,
+          resourceName: 'Zone Fields',
+      });
+      compositionApi.onMounted(() => {
+          if (!zoneId.value) {
+              return;
+          }
+          fetchZoneFields();
+      });
+      compositionApi.watch(zoneId, () => {
+          if (!zoneId.value) {
+              return;
+          }
+          fetchZoneFields();
+      });
+      return resource;
+  }
+
   function convertBannerToFormValues(banner, zonesOptionList) {
       var _a, _b, _c, _d, _e, _f, _g;
       const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
       return {
-          priority: (_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1,
+          priority: String((_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1),
           link: (_b = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _b !== void 0 ? _b : '',
           image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: adminServices.createId(), file: banner.image } : null,
           bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
@@ -3262,16 +3288,20 @@
           dateEnd: (_e = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _e !== void 0 ? _e : '',
           disabled: (_f = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _f !== void 0 ? _f : false,
           comment: (_g = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _g !== void 0 ? _g : '',
+          fields: [],
       };
   }
   function convertBannerFormValuesToPayload(values) {
       var _a, _b, _c, _d;
-      return Object.assign(Object.assign({}, values), { priority: values.priority ? Number(values.priority) : 1, dateStart: values.dateStart ? values.dateStart : null, dateEnd: values.dateEnd ? values.dateEnd : null, image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '' });
+      return Object.assign(Object.assign({}, values), { priority: values.priority ? Number(values.priority) : 1, dateStart: values.dateStart ? values.dateStart : null, dateEnd: values.dateEnd ? values.dateEnd : null, image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '', fields: values.fields.map((field) => ({
+              name: field.config.name,
+              value: adminDynamicField.universalFieldUtils.getOutgoingValue(field),
+          })) });
   }
 
   var script$2 = compositionApi.defineComponent({
       name: 'BannerForm',
-      components: { FormFooter: adminUi.FormFooter },
+      components: { FormFooter: adminUi.FormFooter, DynamicField: adminDynamicField.DynamicField },
       setup(props, context) {
           const bannerId = compositionApi.computed(() => context.root.$route.params.bannerId);
           const isCreation = compositionApi.computed(() => bannerId.value === 'create');
@@ -3294,6 +3324,15 @@
           compositionApi.watch([banner, zones], () => {
               values.value = convertBannerToFormValues(banner.value, zonesOptionList.value);
           });
+          /** Zone Fields **/
+          const { loading: isZoneFieldsLoading, data: zoneFields, } = useFetchZoneFields({ context, values });
+          compositionApi.watch(zoneFields, () => {
+              var _a, _b;
+              values.value.fields = ((_b = (_a = zoneFields.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map((fieldConfig, index) => {
+                  var _a;
+                  return adminDynamicField.universalFieldUtils.createFormField(fieldConfig, banner.value ? (_a = banner.value.fields[index].value) !== null && _a !== void 0 ? _a : null : null);
+              });
+          });
           const submitForm = (event) => {
               isSubmitting.value = true;
               const body = convertBannerFormValuesToPayload(values.value);
@@ -3335,7 +3374,9 @@
                   isSubmitting.value = false;
               });
           };
-          const isContentLoading = compositionApi.computed(() => isBannerLoading.value || isZonesLoading.value);
+          const isContentLoading = compositionApi.computed(() => isBannerLoading.value ||
+              isZonesLoading.value ||
+              isZoneFieldsLoading.value);
           return {
               isCreation,
               isContentLoading,
@@ -3528,6 +3569,13 @@
                     },
                   }),
                   _vm._v(" "),
+                  _vm._l(_vm.values.fields, function (field) {
+                    return _c("DynamicField", {
+                      key: field.name,
+                      attrs: { field: field },
+                    })
+                  }),
+                  _vm._v(" "),
                   _c("form-field", {
                     attrs: {
                       name: "comment",
@@ -3544,7 +3592,7 @@
                     },
                   }),
                 ],
-                1
+                2
               ),
             ]
           },
@@ -3576,7 +3624,7 @@
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-6400fd96_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AAiPA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AChPA;ADmPA;EACA,aAAA;AChPA;ADkPA;EACA,aAAA;AChPA;ADmPA;EACA,eAAA;EACA,iBAAA;ACjPA;ADqPA;EACA,aAAA;EACA,qBAAA;AClPA;ADoPA;EACA,aAAA;AClPA;ADqPA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;ACnPA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n  <page\n      :title=\"\n      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n    \"\n      :is-content-loading=\"isContentLoading\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <div class=\"zone\">\n          <form-field-select\n              v-model=\"values.bannerZone\"\n              name=\"bannerZone\"\n              :label=\"$t('banners:zone')\"\n              :options=\"zonesOptionList\"\n              :error=\"errors.bannerZone\"\n          />\n\n          <form-field\n              v-model=\"values.priority\"\n              name=\"priority\"\n              :label=\"$t('banners:priority')\"\n              :error=\"errors.priority\"\n          />\n        </div>\n\n        <input-label>{{ $t('banners:period') }}</input-label>\n\n        <div class=\"date\">\n          <form-field\n              v-model=\"values.dateStart\"\n              :label=\"$t('banners:from')\"\n              name=\"dateStart\"\n              type=\"date\"\n              :max=\"values.dateEnd\"\n          />\n\n          <form-field\n              v-model=\"values.dateEnd\"\n              :label=\"$t('banners:to')\"\n              name=\"dateEnd\"\n              type=\"date\"\n              :min=\"values.dateStart\"\n          />\n        </div>\n\n        <form-field-checkbox\n            v-model=\"values.disabled\"\n            name=\"disabled\"\n            :label=\"$t('banners:disabled')\"\n            :error=\"errors.disabled\"\n        />\n\n        <div class=\"link\">\n          <form-field\n              v-model=\"values.link\"\n              name=\"link\"\n              :label=\"$t('banners:link')\"\n              :error=\"errors.name\"\n          />\n\n          <form-field-checkbox\n              v-model=\"values.openNewTab\"\n              name=\"openNewTab\"\n              :label=\"$t('banners:openNewTab')\"\n              :error=\"errors.openNewTab\"\n          />\n        </div>\n\n        <form-field-file-input\n            v-model=\"values.image\"\n            name=\"image\"\n            file-type=\"image\"\n            :label=\"$t('banners:image')\"\n            :error=\"errors.file\"\n        />\n\n        <form-field\n            v-model=\"values.comment\"\n            name=\"comment\"\n            type=\"textarea\"\n            :label=\"$t('banners:comment')\"\n            :error=\"errors.comment\"\n        />\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n          :back-href=\"bannerListUrl\"\n          :on-submit=\"submitForm\"\n          :is-submitting=\"isSubmitting\"\n          :is-creation=\"isCreation\"\n          :can-create-another=\"isCreation\"\n      />\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  ref,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\n\nimport {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';\nimport {convertRequestErrorToMap} from '@tager/admin-services';\n\nimport {useFetchZones} from '../../../hooks';\nimport {BannerFormValues} from '../../../typings/banners';\nimport {useFetchBanner} from '../../../hooks/useFetchBanner';\nimport {\n  getBannersBannerFormUrl,\n  getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport {createBanner, updateBanner} from '../../../services/requests';\n\nimport {\n  convertBannerFormValuesToPayload,\n  convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n  name: 'BannerForm',\n  components: {FormFooter},\n  setup(props, context: SetupContext) {\n    const bannerId = computed<string>(\n        () => context.root.$route.params.bannerId\n    );\n    const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n    /** Zones **/\n\n    const {data: zones, loading: isZonesLoading} = useFetchZones({context});\n\n    const zonesOptionList = computed<OptionType[]>(() =>\n        zones.value.map<OptionType>((zone) => ({\n          value: zone.id,\n          label: zone.name,\n        }))\n    );\n\n    /** Banner **/\n\n    const {data: banner, loading: isBannerLoading} = useFetchBanner({\n      context,\n      bannerId,\n      isCreation,\n    });\n\n    /** Form State **/\n\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<BannerFormValues>(\n        convertBannerToFormValues(banner.value, zonesOptionList.value)\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([banner, zones], () => {\n      values.value = convertBannerToFormValues(\n          banner.value,\n          zonesOptionList.value\n      );\n    });\n\n    const submitForm = (event: TagerFormSubmitEvent) => {\n      isSubmitting.value = true;\n\n      const body = convertBannerFormValuesToPayload(values.value);\n\n      const requestPromise = isCreation.value\n          ? createBanner(body)\n          : updateBanner(bannerId.value, body);\n\n      requestPromise\n          .then(({data}) => {\n            errors.value = {};\n\n            if (event.type === 'create') {\n              context.root.$router.push(\n                  getBannersBannerFormUrl({bannerId: String(data.id)})\n              );\n            }\n\n            if (event.type === 'create_exit' || event.type === 'save_exit') {\n              context.root.$router.push(getBannersBannerListUrl());\n            }\n\n            if (event.type === 'create_create-another') {\n              values.value = convertBannerToFormValues(\n                  null,\n                  zonesOptionList.value\n              );\n            }\n\n            context.root.$toast({\n              variant: 'success',\n              title: context.root.$t('banners:success'),\n              body: isCreation.value\n                  ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n                  : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n            });\n          })\n          .catch((error) => {\n            console.error(error);\n            errors.value = convertRequestErrorToMap(error);\n            context.root.$toast({\n              variant: 'danger',\n              title: context.root.$t('banners:error'),\n              body: isCreation.value\n                  ? context.root.$t('banners:bannerCreationWasFailed')\n                  : context.root.$t('banners:bannerUpdateWasFailed'),\n            });\n          })\n          .finally(() => {\n            isSubmitting.value = false;\n          });\n    };\n\n    const isContentLoading = computed<boolean>(\n        () => isBannerLoading.value || isZonesLoading.value\n    );\n\n    return {\n      isCreation,\n      isContentLoading,\n      isSubmitting,\n      values,\n      errors,\n      submitForm,\n      bannerListUrl: getBannersBannerListUrl(),\n      zonesOptionList,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n  }\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n    padding-bottom: 8px;\n  }\n}\n</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
+      inject("data-v-ddc2a1b6_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AA8QA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AC7QA;ADgRA;EACA,aAAA;AC7QA;AD+QA;EACA,aAAA;AC7QA;ADgRA;EACA,eAAA;EACA,iBAAA;AC9QA;ADkRA;EACA,aAAA;EACA,qBAAA;AC/QA;ADiRA;EACA,aAAA;AC/QA;ADkRA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;AChRA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"\n      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n    \"\n    :is-content-loading=\"isContentLoading\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <div class=\"zone\">\n          <form-field-select\n            v-model=\"values.bannerZone\"\n            name=\"bannerZone\"\n            :label=\"$t('banners:zone')\"\n            :options=\"zonesOptionList\"\n            :error=\"errors.bannerZone\"\n          />\n\n          <form-field\n            v-model=\"values.priority\"\n            name=\"priority\"\n            :label=\"$t('banners:priority')\"\n            :error=\"errors.priority\"\n          />\n        </div>\n\n        <input-label>{{ $t('banners:period') }}</input-label>\n\n        <div class=\"date\">\n          <form-field\n            v-model=\"values.dateStart\"\n            :label=\"$t('banners:from')\"\n            name=\"dateStart\"\n            type=\"date\"\n            :max=\"values.dateEnd\"\n          />\n\n          <form-field\n            v-model=\"values.dateEnd\"\n            :label=\"$t('banners:to')\"\n            name=\"dateEnd\"\n            type=\"date\"\n            :min=\"values.dateStart\"\n          />\n        </div>\n\n        <form-field-checkbox\n          v-model=\"values.disabled\"\n          name=\"disabled\"\n          :label=\"$t('banners:disabled')\"\n          :error=\"errors.disabled\"\n        />\n\n        <div class=\"link\">\n          <form-field\n            v-model=\"values.link\"\n            name=\"link\"\n            :label=\"$t('banners:link')\"\n            :error=\"errors.name\"\n          />\n\n          <form-field-checkbox\n            v-model=\"values.openNewTab\"\n            name=\"openNewTab\"\n            :label=\"$t('banners:openNewTab')\"\n            :error=\"errors.openNewTab\"\n          />\n        </div>\n\n        <form-field-file-input\n          v-model=\"values.image\"\n          name=\"image\"\n          file-type=\"image\"\n          :label=\"$t('banners:image')\"\n          :error=\"errors.file\"\n        />\n\n        <DynamicField\n          v-for=\"field of values.fields\"\n          :key=\"field.name\"\n          :field=\"field\"\n        />\n\n        <form-field\n          v-model=\"values.comment\"\n          name=\"comment\"\n          type=\"textarea\"\n          :label=\"$t('banners:comment')\"\n          :error=\"errors.comment\"\n        />\n      </form>\n    </template>\n\n    <template v-slot:footer>\n      <FormFooter\n        :back-href=\"bannerListUrl\"\n        :on-submit=\"submitForm\"\n        :is-submitting=\"isSubmitting\"\n        :is-creation=\"isCreation\"\n        :can-create-another=\"isCreation\"\n      />\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  ref,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\n\nimport { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';\nimport { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';\nimport { convertRequestErrorToMap } from '@tager/admin-services';\n\nimport { useFetchZones } from '../../../hooks';\nimport { BannerFormValues } from '../../../typings/banners';\nimport { useFetchBanner } from '../../../hooks/useFetchBanner';\nimport {\n  getBannersBannerFormUrl,\n  getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport { createBanner, updateBanner } from '../../../services/requests';\nimport { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';\n\nimport {\n  convertBannerFormValuesToPayload,\n  convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n  name: 'BannerForm',\n  components: { FormFooter, DynamicField },\n  setup(props, context: SetupContext) {\n    const bannerId = computed<string>(\n      () => context.root.$route.params.bannerId\n    );\n    const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n    /** Zones **/\n\n    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });\n\n    const zonesOptionList = computed<OptionType[]>(() =>\n      zones.value.map<OptionType>((zone) => ({\n        value: zone.id,\n        label: zone.name,\n      }))\n    );\n\n    /** Banner **/\n\n    const { data: banner, loading: isBannerLoading } = useFetchBanner({\n      context,\n      bannerId,\n      isCreation,\n    });\n\n    /** Form State **/\n\n    const isSubmitting = ref<boolean>(false);\n    const values = ref<BannerFormValues>(\n      convertBannerToFormValues(banner.value, zonesOptionList.value)\n    );\n    const errors = ref<Record<string, string>>({});\n\n    watch([banner, zones], () => {\n      values.value = convertBannerToFormValues(\n        banner.value,\n        zonesOptionList.value\n      );\n    });\n\n    /** Zone Fields **/\n\n    const {\n      loading: isZoneFieldsLoading,\n      data: zoneFields,\n    } = useFetchZoneFields({ context, values });\n\n    watch(zoneFields, () => {\n      values.value.fields = (\n        zoneFields.value?.fields ?? []\n      ).map((fieldConfig, index) =>\n        universalFieldUtils.createFormField(\n          fieldConfig,\n          banner.value ? banner.value.fields[index].value ?? null : null\n        )\n      );\n    });\n\n    const submitForm = (event: TagerFormSubmitEvent) => {\n      isSubmitting.value = true;\n\n      const body = convertBannerFormValuesToPayload(values.value);\n\n      const requestPromise = isCreation.value\n        ? createBanner(body)\n        : updateBanner(bannerId.value, body);\n\n      requestPromise\n        .then(({ data }) => {\n          errors.value = {};\n\n          if (event.type === 'create') {\n            context.root.$router.push(\n              getBannersBannerFormUrl({ bannerId: String(data.id) })\n            );\n          }\n\n          if (event.type === 'create_exit' || event.type === 'save_exit') {\n            context.root.$router.push(getBannersBannerListUrl());\n          }\n\n          if (event.type === 'create_create-another') {\n            values.value = convertBannerToFormValues(\n              null,\n              zonesOptionList.value\n            );\n          }\n\n          context.root.$toast({\n            variant: 'success',\n            title: context.root.$t('banners:success'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          errors.value = convertRequestErrorToMap(error);\n          context.root.$toast({\n            variant: 'danger',\n            title: context.root.$t('banners:error'),\n            body: isCreation.value\n              ? context.root.$t('banners:bannerCreationWasFailed')\n              : context.root.$t('banners:bannerUpdateWasFailed'),\n          });\n        })\n        .finally(() => {\n          isSubmitting.value = false;\n        });\n    };\n\n    const isContentLoading = computed<boolean>(\n      () =>\n        isBannerLoading.value ||\n        isZonesLoading.value ||\n        isZoneFieldsLoading.value\n    );\n\n    return {\n      isCreation,\n      isContentLoading,\n      isSubmitting,\n      values,\n      errors,\n      submitForm,\n      bannerListUrl: getBannersBannerListUrl(),\n      zonesOptionList,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n  }\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n\n  > *:first-child {\n    flex: 1 1 1px;\n  }\n\n  > *:last-child {\n    flex-basis: 30%;\n    margin-left: 20px;\n    padding-bottom: 8px;\n  }\n}\n</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n.zone {\n  display: flex;\n}\n.zone > *:first-child {\n  flex: 1 1 1px;\n}\n.zone > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n}\n\n.link {\n  display: flex;\n  align-items: flex-end;\n}\n.link > *:first-child {\n  flex: 1 1 1px;\n}\n.link > *:last-child {\n  flex-basis: 30%;\n  margin-left: 20px;\n  padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
 
     };
     /* scoped */
@@ -3671,6 +3719,7 @@
   exports.getBannersBannerListUrl = getBannersBannerListUrl;
   exports.getBannersMenuItem = getBannersMenuItem;
   exports.getBannersZoneListUrl = getBannersZoneListUrl;
+  exports.getZoneFields = getZoneFields;
   exports.getZones = getZones;
   exports.updateBanner = updateBanner;
 

package/dist/services/requests.d.ts

@@ -1,5 +1,5 @@
 import { ResponseBody } from '@tager/admin-services';
-import { Zone } from '../typings/zones';
+import { Zone, ZoneFields } from '../typings/zones';
 import { Banner, BannerPayload } from '../typings/banners';
 /** Zones **/
 export declare function getZones(params?: {
@@ -7,6 +7,7 @@ export declare function getZones(params?: {
     pageNumber?: number;
     pageSize?: number;
 }): Promise<ResponseBody<Zone[]>>;
+export declare function getZoneFields(zoneId: string): Promise<ResponseBody<ZoneFields>>;
 /** Banners **/
 export declare function getBanners(params?: {
     query?: string;

package/dist/typings/banners.d.ts

@@ -1,5 +1,6 @@
 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 declare enum Status {
     Waiting = "WAITING",
     Archived = "ARCHIVED",
@@ -18,17 +19,19 @@ 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 {
     link: Nullable<string>;
@@ -40,4 +43,5 @@ export interface BannerPayload {
     dateEnd: Nullable<string>;
     disabled: boolean;
     comment: string;
+    fields: FieldShortType<OutgoingValueUnion>[];
 }

package/dist/typings/zones.d.ts

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