@tager/admin-banners 0.3.5 → 0.3.6

package/dist/index.esm.js

@@ -29,6 +29,7 @@ const EN = {
     actions: 'actions',
     date: 'Date',
     name: 'Name',
+    priority: 'Priority',
     success: 'Success',
     error: 'Error',
     statuses: {
@@ -69,6 +70,7 @@ const RU = {
     actions: 'Действия',
     date: 'Дата',
     name: 'Название',
+    priority: 'Приоритет',
     success: 'Успех',
     error: 'Ошибка',
     statuses: {
@@ -2781,18 +2783,25 @@ function getColumnDefs$1(zoneList, t) {
         },
         {
             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 }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
         },
         {
-            id: 4,
+            id: 5,
             name: t('banners:image'),
             field: 'image',
             type: 'image',
         },
         {
-            id: 5,
+            id: 6,
             name: t('banners:link'),
             field: 'link',
             type: 'name',
@@ -2816,12 +2825,12 @@ function getColumnDefs$1(zoneList, t) {
             },
         },
         {
-            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' },
@@ -3240,22 +3249,23 @@ function useFetchBanner({ context, bannerId, isCreation, }) {
 }
 
 function convertBannerToFormValues(banner, zonesOptionList) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
     return {
-        link: (_a = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _a !== void 0 ? _a : '',
+        priority: (_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,
-        openNewTab: (_b = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _b !== void 0 ? _b : false,
-        dateStart: (_c = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _c !== void 0 ? _c : '',
-        dateEnd: (_d = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _d !== void 0 ? _d : '',
-        disabled: (_e = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _e !== void 0 ? _e : false,
-        comment: (_f = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _f !== void 0 ? _f : '',
+        openNewTab: (_c = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _c !== void 0 ? _c : false,
+        dateStart: (_d = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _d !== void 0 ? _d : '',
+        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 : '',
     };
 }
 function convertBannerFormValuesToPayload(values) {
     var _a, _b, _c, _d;
-    return Object.assign(Object.assign({}, values), { 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 : '' });
 }
 
 var script$2 = defineComponent({
@@ -3370,67 +3380,43 @@ var __vue_render__$2 = function () {
                 },
               },
               [
-                _c("form-field-select", {
-                  attrs: {
-                    name: "bannerZone",
-                    label: _vm.$t("banners:zone"),
-                    options: _vm.zonesOptionList,
-                    error: _vm.errors.bannerZone,
-                  },
-                  model: {
-                    value: _vm.values.bannerZone,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "bannerZone", $$v);
-                    },
-                    expression: "values.bannerZone",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field-file-input", {
-                  attrs: {
-                    name: "image",
-                    "file-type": "image",
-                    label: _vm.$t("banners:image"),
-                    error: _vm.errors.file,
-                  },
-                  model: {
-                    value: _vm.values.image,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "image", $$v);
-                    },
-                    expression: "values.image",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "link",
-                    label: _vm.$t("banners:link"),
-                    error: _vm.errors.name,
-                  },
-                  model: {
-                    value: _vm.values.link,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "link", $$v);
-                    },
-                    expression: "values.link",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field-checkbox", {
-                  attrs: {
-                    name: "openNewTab",
-                    label: _vm.$t("banners:openNewTab"),
-                    error: _vm.errors.openNewTab,
-                  },
-                  model: {
-                    value: _vm.values.openNewTab,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "openNewTab", $$v);
-                    },
-                    expression: "values.openNewTab",
-                  },
-                }),
+                _c(
+                  "div",
+                  { staticClass: "zone" },
+                  [
+                    _c("form-field-select", {
+                      attrs: {
+                        name: "bannerZone",
+                        label: _vm.$t("banners:zone"),
+                        options: _vm.zonesOptionList,
+                        error: _vm.errors.bannerZone,
+                      },
+                      model: {
+                        value: _vm.values.bannerZone,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "bannerZone", $$v);
+                        },
+                        expression: "values.bannerZone",
+                      },
+                    }),
+                    _vm._v(" "),
+                    _c("form-field", {
+                      attrs: {
+                        name: "priority",
+                        label: _vm.$t("banners:priority"),
+                        error: _vm.errors.priority,
+                      },
+                      model: {
+                        value: _vm.values.priority,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "priority", $$v);
+                        },
+                        expression: "values.priority",
+                      },
+                    }),
+                  ],
+                  1
+                ),
                 _vm._v(" "),
                 _c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
                 _vm._v(" "),
@@ -3488,6 +3474,59 @@ var __vue_render__$2 = function () {
                   },
                 }),
                 _vm._v(" "),
+                _c(
+                  "div",
+                  { staticClass: "link" },
+                  [
+                    _c("form-field", {
+                      attrs: {
+                        name: "link",
+                        label: _vm.$t("banners:link"),
+                        error: _vm.errors.name,
+                      },
+                      model: {
+                        value: _vm.values.link,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "link", $$v);
+                        },
+                        expression: "values.link",
+                      },
+                    }),
+                    _vm._v(" "),
+                    _c("form-field-checkbox", {
+                      attrs: {
+                        name: "openNewTab",
+                        label: _vm.$t("banners:openNewTab"),
+                        error: _vm.errors.openNewTab,
+                      },
+                      model: {
+                        value: _vm.values.openNewTab,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "openNewTab", $$v);
+                        },
+                        expression: "values.openNewTab",
+                      },
+                    }),
+                  ],
+                  1
+                ),
+                _vm._v(" "),
+                _c("form-field-file-input", {
+                  attrs: {
+                    name: "image",
+                    "file-type": "image",
+                    label: _vm.$t("banners:image"),
+                    error: _vm.errors.file,
+                  },
+                  model: {
+                    value: _vm.values.image,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.values, "image", $$v);
+                    },
+                    expression: "values.image",
+                  },
+                }),
+                _vm._v(" "),
                 _c("form-field", {
                   attrs: {
                     name: "comment",
@@ -3536,7 +3575,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-60ad1218_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\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":"AAsOA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACrOA;;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        <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-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.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\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        <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</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
+    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 });
 
   };
   /* scoped */

package/dist/index.umd.js

@@ -30,6 +30,7 @@
       actions: 'actions',
       date: 'Date',
       name: 'Name',
+      priority: 'Priority',
       success: 'Success',
       error: 'Error',
       statuses: {
@@ -70,6 +71,7 @@
       actions: 'Действия',
       date: 'Дата',
       name: 'Название',
+      priority: 'Приоритет',
       success: 'Успех',
       error: 'Ошибка',
       statuses: {
@@ -2782,18 +2784,25 @@
           },
           {
               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 }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
           },
           {
-              id: 4,
+              id: 5,
               name: t('banners:image'),
               field: 'image',
               type: 'image',
           },
           {
-              id: 5,
+              id: 6,
               name: t('banners:link'),
               field: 'link',
               type: 'name',
@@ -2817,12 +2826,12 @@
               },
           },
           {
-              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' },
@@ -3241,22 +3250,23 @@
   }
 
   function convertBannerToFormValues(banner, zonesOptionList) {
-      var _a, _b, _c, _d, _e, _f;
+      var _a, _b, _c, _d, _e, _f, _g;
       const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
       return {
-          link: (_a = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _a !== void 0 ? _a : '',
+          priority: (_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,
-          openNewTab: (_b = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _b !== void 0 ? _b : false,
-          dateStart: (_c = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _c !== void 0 ? _c : '',
-          dateEnd: (_d = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _d !== void 0 ? _d : '',
-          disabled: (_e = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _e !== void 0 ? _e : false,
-          comment: (_f = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _f !== void 0 ? _f : '',
+          openNewTab: (_c = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _c !== void 0 ? _c : false,
+          dateStart: (_d = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _d !== void 0 ? _d : '',
+          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 : '',
       };
   }
   function convertBannerFormValuesToPayload(values) {
       var _a, _b, _c, _d;
-      return Object.assign(Object.assign({}, values), { 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 : '' });
   }
 
   var script$2 = compositionApi.defineComponent({
@@ -3371,67 +3381,43 @@
                   },
                 },
                 [
-                  _c("form-field-select", {
-                    attrs: {
-                      name: "bannerZone",
-                      label: _vm.$t("banners:zone"),
-                      options: _vm.zonesOptionList,
-                      error: _vm.errors.bannerZone,
-                    },
-                    model: {
-                      value: _vm.values.bannerZone,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "bannerZone", $$v);
-                      },
-                      expression: "values.bannerZone",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field-file-input", {
-                    attrs: {
-                      name: "image",
-                      "file-type": "image",
-                      label: _vm.$t("banners:image"),
-                      error: _vm.errors.file,
-                    },
-                    model: {
-                      value: _vm.values.image,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "image", $$v);
-                      },
-                      expression: "values.image",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field", {
-                    attrs: {
-                      name: "link",
-                      label: _vm.$t("banners:link"),
-                      error: _vm.errors.name,
-                    },
-                    model: {
-                      value: _vm.values.link,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "link", $$v);
-                      },
-                      expression: "values.link",
-                    },
-                  }),
-                  _vm._v(" "),
-                  _c("form-field-checkbox", {
-                    attrs: {
-                      name: "openNewTab",
-                      label: _vm.$t("banners:openNewTab"),
-                      error: _vm.errors.openNewTab,
-                    },
-                    model: {
-                      value: _vm.values.openNewTab,
-                      callback: function ($$v) {
-                        _vm.$set(_vm.values, "openNewTab", $$v);
-                      },
-                      expression: "values.openNewTab",
-                    },
-                  }),
+                  _c(
+                    "div",
+                    { staticClass: "zone" },
+                    [
+                      _c("form-field-select", {
+                        attrs: {
+                          name: "bannerZone",
+                          label: _vm.$t("banners:zone"),
+                          options: _vm.zonesOptionList,
+                          error: _vm.errors.bannerZone,
+                        },
+                        model: {
+                          value: _vm.values.bannerZone,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "bannerZone", $$v);
+                          },
+                          expression: "values.bannerZone",
+                        },
+                      }),
+                      _vm._v(" "),
+                      _c("form-field", {
+                        attrs: {
+                          name: "priority",
+                          label: _vm.$t("banners:priority"),
+                          error: _vm.errors.priority,
+                        },
+                        model: {
+                          value: _vm.values.priority,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "priority", $$v);
+                          },
+                          expression: "values.priority",
+                        },
+                      }),
+                    ],
+                    1
+                  ),
                   _vm._v(" "),
                   _c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
                   _vm._v(" "),
@@ -3489,6 +3475,59 @@
                     },
                   }),
                   _vm._v(" "),
+                  _c(
+                    "div",
+                    { staticClass: "link" },
+                    [
+                      _c("form-field", {
+                        attrs: {
+                          name: "link",
+                          label: _vm.$t("banners:link"),
+                          error: _vm.errors.name,
+                        },
+                        model: {
+                          value: _vm.values.link,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "link", $$v);
+                          },
+                          expression: "values.link",
+                        },
+                      }),
+                      _vm._v(" "),
+                      _c("form-field-checkbox", {
+                        attrs: {
+                          name: "openNewTab",
+                          label: _vm.$t("banners:openNewTab"),
+                          error: _vm.errors.openNewTab,
+                        },
+                        model: {
+                          value: _vm.values.openNewTab,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.values, "openNewTab", $$v);
+                          },
+                          expression: "values.openNewTab",
+                        },
+                      }),
+                    ],
+                    1
+                  ),
+                  _vm._v(" "),
+                  _c("form-field-file-input", {
+                    attrs: {
+                      name: "image",
+                      "file-type": "image",
+                      label: _vm.$t("banners:image"),
+                      error: _vm.errors.file,
+                    },
+                    model: {
+                      value: _vm.values.image,
+                      callback: function ($$v) {
+                        _vm.$set(_vm.values, "image", $$v);
+                      },
+                      expression: "values.image",
+                    },
+                  }),
+                  _vm._v(" "),
                   _c("form-field", {
                     attrs: {
                       name: "comment",
@@ -3537,7 +3576,7 @@
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-60ad1218_0", { source: ".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\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":"AAsOA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;ACrOA;;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        <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-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.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\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        <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</style>\n",".date {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  column-gap: 10px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
+      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 });
 
     };
     /* scoped */

package/dist/locales/en.d.ts

@@ -24,6 +24,7 @@ declare const EN: {
     actions: string;
     date: string;
     name: string;
+    priority: string;
     success: string;
     error: string;
     statuses: {

package/dist/typings/banners.d.ts

@@ -9,6 +9,7 @@ export declare enum Status {
 export interface Banner {
     id: number;
     status: Status;
+    priority: number;
     link: Nullable<string>;
     image: Nullable<FileType>;
     bannerZone: Nullable<string>;
@@ -22,6 +23,7 @@ export interface BannerFormValues {
     link: Nullable<string>;
     image: Nullable<SingleFileInputValueType>;
     bannerZone: Nullable<OptionType>;
+    priority: number;
     openNewTab: boolean;
     dateStart: string;
     dateEnd: string;
@@ -31,10 +33,11 @@ export interface BannerFormValues {
 export interface BannerPayload {
     link: Nullable<string>;
     image: Nullable<string>;
+    priority: number;
     bannerZone: string;
     openNewTab: boolean;
-    dateStart: string;
-    dateEnd: string;
+    dateStart: Nullable<string>;
+    dateEnd: Nullable<string>;
     disabled: boolean;
     comment: string;
 }

package/dist/views/Banners/BannerForm/BannerForm.vue.d.ts

@@ -21,6 +21,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
             disabled?: boolean | undefined;
         } | null;
+        priority: number;
         openNewTab: boolean;
         dateStart: string;
         dateEnd: string;
@@ -61,6 +62,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
             label: string;
             disabled?: boolean | undefined;
         } | null;
+        priority: number;
         openNewTab: boolean;
         dateStart: string;
         dateEnd: string;

package/package.json

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

package/src/locales/en.ts

@@ -24,6 +24,7 @@ const EN = {
   actions: 'actions',
   date: 'Date',
   name: 'Name',
+  priority: 'Priority',
 
   success: 'Success',
   error: 'Error',

package/src/locales/ru.ts

@@ -26,6 +26,7 @@ const RU: typeof EN = {
   actions: 'Действия',
   date: 'Дата',
   name: 'Название',
+  priority: 'Приоритет',
 
   success: 'Успех',
   error: 'Ошибка',

package/src/typings/banners.ts

@@ -11,6 +11,7 @@ export enum Status {
 export interface Banner {
   id: number;
   status: Status;
+  priority: number;
   link: Nullable<string>;
   image: Nullable<FileType>;
   bannerZone: Nullable<string>;
@@ -25,6 +26,7 @@ export interface BannerFormValues {
   link: Nullable<string>;
   image: Nullable<SingleFileInputValueType>;
   bannerZone: Nullable<OptionType>;
+  priority: number;
   openNewTab: boolean;
   dateStart: string;
   dateEnd: string;
@@ -35,10 +37,11 @@ export interface BannerFormValues {
 export interface BannerPayload {
   link: Nullable<string>;
   image: Nullable<string>;
+  priority: number;
   bannerZone: string;
   openNewTab: boolean;
-  dateStart: string;
-  dateEnd: string;
+  dateStart: Nullable<string>;
+  dateEnd: Nullable<string>;
   disabled: boolean;
   comment: string;
 }

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

@@ -16,6 +16,7 @@ export function convertBannerToFormValues(
   );
 
   return {
+    priority: banner?.priority ?? 1,
     link: banner?.link ?? '',
     image: banner?.image ? { id: createId(), file: banner.image } : null,
     bannerZone: foundZone ?? null,
@@ -32,6 +33,9 @@ export function convertBannerFormValuesToPayload(
 ): BannerPayload {
   return {
     ...values,
+    priority: values.priority ? Number(values.priority) : 1,
+    dateStart: values.dateStart ? values.dateStart : null,
+    dateEnd: values.dateEnd ? values.dateEnd : null,
     image: values.image?.file.id ?? null,
     bannerZone: values.bannerZone?.value ?? '',
   };

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

@@ -1,86 +1,97 @@
 <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">
-        <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">
+          <form-field-select
+              v-model="values.bannerZone"
+              name="bannerZone"
+              :label="$t('banners:zone')"
+              :options="zonesOptionList"
+              :error="errors.bannerZone"
+          />
 
-        <form-field-checkbox
-          v-model="values.openNewTab"
-          name="openNewTab"
-          :label="$t('banners:openNewTab')"
-          :error="errors.openNewTab"
-        />
+          <form-field
+              v-model="values.priority"
+              name="priority"
+              :label="$t('banners:priority')"
+              :error="errors.priority"
+          />
+        </div>
 
         <input-label>{{ $t('banners:period') }}</input-label>
 
         <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"
+          />
+
+          <form-field-checkbox
+              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"
         />
 
         <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>
@@ -95,17 +106,17 @@ 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 {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 {
   convertBannerFormValuesToPayload,
@@ -114,27 +125,27 @@ import {
 
 export default defineComponent({
   name: 'BannerForm',
-  components: { FormFooter },
+  components: {FormFooter},
   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,
@@ -144,14 +155,14 @@ 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
       );
     });
 
@@ -161,56 +172,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'),
+          .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;
           });
-        })
-        .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
     );
 
     return {
@@ -233,4 +244,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' },