@tager/admin-banners 0.3.6 → 1.0.1

package/dist/index.mjs

@@ -0,0 +1,1008 @@
+import { i18n, request, useI18n, useResource, isNotNullish, useResourceDelete, createId, useToast, navigateBack, convertRequestErrorToMap } from "@tager/admin-services";
+import { defineComponent, onMounted, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, toDisplayString, ref, watch, createElementVNode, withModifiers, createElementBlock, Fragment, renderList } from "vue";
+import { CountButton, DataTable, useDataTable, getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, FormFieldFileInput, FormFieldCheckbox, InputLabel, FormFieldSelect, FormFooter } from "@tager/admin-ui";
+import { Page } from "@tager/admin-layout";
+import { universalFieldUtils, DynamicField } from "@tager/admin-dynamic-field";
+import "i18next";
+import { compile } from "path-to-regexp";
+import isEqual from "lodash.isequal";
+import pick from "lodash.pick";
+import { useRoute, useRouter } from "vue-router";
+const EN = {
+  home: "Home",
+  zone: "Banner zone",
+  zones: "Banner zones",
+  banners: "Banners",
+  bannerForm: "Banner Form",
+  createBanner: "Create Banner",
+  updateBanner: "Update Banner",
+  link: "Link",
+  image: "Image",
+  openNewTab: "Open new tab",
+  period: "Period",
+  from: "From",
+  to: "To",
+  disabled: "Disabled",
+  comment: "Comment",
+  status: "Status",
+  bannerZoneIsDeleted: "Banner zone is deleted",
+  newTab: "New Tab",
+  yes: "Yes",
+  no: "No",
+  edit: "Edit",
+  remove: "Remove",
+  actions: "actions",
+  date: "Date",
+  name: "Name",
+  priority: "Priority",
+  success: "Success",
+  error: "Error",
+  statuses: {
+    waiting: "Waiting",
+    archived: "Archived",
+    active: "Active",
+    disabled: "Disabled"
+  },
+  bannerWasSuccessfullyCreated: "Banner was successfully created",
+  bannerWasSuccessfullyUpdated: "Banner was successfully updated",
+  bannerCreationWasFailed: "Banner creation was failed",
+  bannerUpdateWasFailed: "Banner update was failed"
+};
+const RU = {
+  home: "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
+  zone: "\u0411\u0430\u043D\u043D\u0435\u0440\u043D\u0430\u044F \u0437\u043E\u043D\u0430",
+  zones: "\u0411\u0430\u043D\u043D\u0435\u0440\u043D\u044B\u0435 \u0437\u043E\u043D\u044B",
+  banners: "\u0411\u0430\u043D\u043D\u0435\u0440\u044B",
+  bannerForm: "\u0424\u043E\u0440\u043C\u0430 \u0431\u0430\u043D\u043D\u0435\u0440\u0430",
+  createBanner: "\u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440",
+  updateBanner: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440",
+  link: "\u0421\u0441\u044B\u043B\u043A\u0430",
+  image: "\u041A\u0430\u0440\u0442\u0438\u043D\u043A\u0430",
+  openNewTab: "\u041E\u0442\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u0432 \u043D\u043E\u0432\u043E\u0439 \u0432\u043A\u043B\u0430\u0434\u043A\u0435",
+  period: "\u0421\u0440\u043E\u043A \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F",
+  from: "\u041E\u0442",
+  to: "\u0414\u043E",
+  disabled: "\u0412\u044B\u043A\u043B\u044E\u0447\u0435\u043D",
+  comment: "\u041A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u0439",
+  status: "\u0421\u0442\u0430\u0442\u0443\u0441",
+  bannerZoneIsDeleted: "\u0411\u0430\u043D\u043D\u0435\u0440\u043D\u0430\u044F \u0437\u043E\u043D\u0430 \u0443\u0434\u0430\u043B\u0435\u043D\u0430",
+  newTab: "\u041D\u043E\u0432\u0430\u044F \u0432\u043A\u043B\u0430\u0434\u043A\u0430",
+  yes: "\u0414\u0430",
+  no: "\u041D\u0435\u0442",
+  edit: "\u0420\u0435\u0434\u0430\u043A\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+  remove: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C",
+  actions: "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F",
+  date: "\u0414\u0430\u0442\u0430",
+  name: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435",
+  priority: "\u041F\u0440\u0438\u043E\u0440\u0438\u0442\u0435\u0442",
+  success: "\u0423\u0441\u043F\u0435\u0445",
+  error: "\u041E\u0448\u0438\u0431\u043A\u0430",
+  statuses: {
+    waiting: "\u0412 \u043E\u0436\u0438\u0434\u0430\u043D\u0438\u0438",
+    archived: "\u0410\u0440\u0445\u0438\u0432\u043D\u044B\u0439",
+    active: "\u0410\u043A\u0442\u0438\u0432\u043D\u044B\u0439",
+    disabled: "\u041E\u0442\u043A\u043B\u044E\u0447\u0435\u043D"
+  },
+  bannerWasSuccessfullyCreated: "\u0411\u0430\u043D\u043D\u0435\u0440 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0441\u043E\u0437\u0434\u0430\u043D",
+  bannerWasSuccessfullyUpdated: "\u0411\u0430\u043D\u043D\u0435\u0440 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D",
+  bannerCreationWasFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440",
+  bannerUpdateWasFailed: "\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0431\u0430\u043D\u043D\u0435\u0440"
+};
+function applyTranslations() {
+  i18n.addTranslations("en", "banners", EN);
+  i18n.addTranslations("ru", "banners", RU);
+}
+var Status = /* @__PURE__ */ ((Status2) => {
+  Status2["Waiting"] = "WAITING";
+  Status2["Archived"] = "ARCHIVED";
+  Status2["Active"] = "ACTIVE";
+  Status2["Disabled"] = "DISABLED";
+  return Status2;
+})(Status || {});
+function getZones(params) {
+  return request.get({ path: "/admin/adv/zones", params });
+}
+function getZoneFields(zoneId) {
+  return request.get({ path: `/admin/adv/zones/${zoneId}` });
+}
+function getBanners(params) {
+  return request.get({ path: "/admin/adv", params });
+}
+function getBanner(bannerId) {
+  return request.get({ path: `/admin/adv/${bannerId}` });
+}
+function createBanner(payload) {
+  return request.post({ path: "/admin/adv", body: payload });
+}
+function updateBanner(bannerId, payload) {
+  return request.put({
+    path: `/admin/adv/${bannerId}`,
+    body: payload
+  });
+}
+function deleteBanner(bannerId) {
+  return request.delete({ path: `/admin/adv/${bannerId}` });
+}
+function getBannerCount() {
+  return request.get({ path: "/admin/adv/count" });
+}
+const BANNERS_ROUTE_PATHS = {
+  ZONE_LIST: "/banners/zones",
+  BANNER_LIST: "/banners",
+  BANNER_FORM: "/banners/:bannerId"
+};
+function getBannersZoneListUrl() {
+  return BANNERS_ROUTE_PATHS.ZONE_LIST;
+}
+function getBannersBannerListUrl() {
+  return BANNERS_ROUTE_PATHS.BANNER_LIST;
+}
+function getBannersBannerFormUrl(params) {
+  return compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
+}
+function getColumnDefs$1(t) {
+  return [
+    {
+      id: 0,
+      name: "ID",
+      field: "id",
+      style: { width: "50px", textAlign: "center" },
+      headStyle: { width: "50px", textAlign: "center" }
+    },
+    {
+      id: 1,
+      name: t("banners:name"),
+      field: "name",
+      type: "name"
+    },
+    {
+      id: 2,
+      name: t("banners:banners"),
+      field: "bannersCount",
+      style: { whiteSpace: "nowrap", width: "130px" }
+    }
+  ];
+}
+function getLinkToBannersByZone(zoneId) {
+  return `${getBannersBannerListUrl()}?filter[zone]=${zoneId}`;
+}
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$2 = defineComponent({
+  name: "ZoneList",
+  components: { CountButton, Page, DataTable },
+  setup() {
+    const i18n2 = useI18n();
+    const {
+      fetchEntityList: fetchZones,
+      isLoading: isZonesLoading,
+      rowData,
+      errorMessage,
+      handleChange
+    } = useDataTable({
+      fetchEntityList: getZones,
+      initialValue: [],
+      resourceName: "Banner Zones"
+    });
+    onMounted(() => {
+      fetchZones();
+    });
+    const columnDefs = computed(() => getColumnDefs$1(i18n2.t));
+    return {
+      columnDefs,
+      isRowDataLoading: isZonesLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      getLinkToBannersByZone
+    };
+  }
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CountButton = resolveComponent("CountButton");
+  const _component_DataTable = resolveComponent("DataTable");
+  const _component_Page = resolveComponent("Page");
+  return openBlock(), createBlock(_component_Page, {
+    title: _ctx.$i18n.t("banners:zones")
+  }, {
+    content: withCtx(() => [
+      createVNode(_component_DataTable, {
+        "column-defs": _ctx.columnDefs,
+        "row-data": _ctx.rowData,
+        loading: _ctx.isRowDataLoading,
+        "error-message": _ctx.errorMessage,
+        "data-table": "banners-zones",
+        "use-search": false,
+        "use-pagination": false,
+        onChange: _ctx.handleChange
+      }, {
+        "cell(banners-count)": withCtx(({ row }) => [
+          createVNode(_component_CountButton, {
+            href: _ctx.getLinkToBannersByZone(row.id),
+            variant: "outline-secondary",
+            count: row.bannersCount
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.$i18n.t("banners:banners")), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "count"])
+        ]),
+        _: 1
+      }, 8, ["column-defs", "row-data", "loading", "error-message", "onChange"])
+    ]),
+    _: 1
+  }, 8, ["title"]);
+}
+var ZoneList = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+function useFetchZones() {
+  const [fetchZones, resource] = useResource({
+    fetchResource: getZones,
+    initialValue: [],
+    resourceName: "Banner zones"
+  });
+  onMounted(() => {
+    fetchZones();
+  });
+  return resource;
+}
+function getStatus(type, t) {
+  switch (type) {
+    case Status.Waiting:
+      return t("banners:statuses.waiting");
+    case Status.Archived:
+      return t("banners:statuses.archived");
+    case Status.Active:
+      return t("banners:statuses.active");
+    case Status.Disabled:
+      return t("banners:statuses.disabled");
+    default:
+      return "";
+  }
+}
+function getColumnDefs(zoneList, t) {
+  return [
+    {
+      id: 0,
+      name: "#",
+      field: "id",
+      format: ({ rowIndex }) => String(rowIndex + 1),
+      style: { width: "50px", textAlign: "center" },
+      headStyle: { width: "50px", textAlign: "center" }
+    },
+    {
+      id: 1,
+      name: t("banners:zone"),
+      field: "bannerZone",
+      format: ({ row }) => {
+        const foundBannerZone = zoneList.find(
+          (zone) => zone.id === row.bannerZone
+        );
+        return foundBannerZone ? foundBannerZone.name : t("banners:bannerZoneIsDeleted");
+      }
+    },
+    {
+      id: 2,
+      name: t("banners:status"),
+      field: "status",
+      format: ({ row }) => getStatus(row.status, t),
+      style: { width: "120px" },
+      headStyle: { width: "120px" }
+    },
+    {
+      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: 5,
+      name: t("banners:image"),
+      field: "image",
+      type: "image"
+    },
+    {
+      id: 6,
+      name: t("banners:link"),
+      field: "link",
+      type: "name",
+      format: ({ row }) => {
+        var _a, _b;
+        return {
+          adminLink: {
+            url: (_a = row.link) != null ? _a : "",
+            text: (_b = row.link) != null ? _b : ""
+          },
+          paramList: [
+            {
+              name: t("banners:newTab"),
+              value: row.openNewTab ? t("banners:yes") : t("banners:no")
+            }
+          ]
+        };
+      },
+      options: {
+        shouldOpenNewTab: true
+      }
+    },
+    {
+      id: 7,
+      name: t("banners:comment"),
+      field: "comment"
+    },
+    {
+      id: 8,
+      name: t("banners:actions"),
+      field: "actions",
+      style: { whiteSpace: "nowrap", width: "100px" },
+      headStyle: { whiteSpace: "nowrap", width: "100px" }
+    }
+  ];
+}
+function useAdvancedSearch({ t, zoneList, route }) {
+  const zonesOptionList = computed(
+    () => zoneList.value.map(({ id, name }) => ({
+      value: id,
+      label: name
+    }))
+  );
+  const initialZoneFilter = computed(() => {
+    const queryValue = getFilterParamAsStringArray(
+      route.query,
+      "zone"
+    );
+    return zonesOptionList.value.filter(
+      ({ value }) => queryValue.some((selected) => selected === value)
+    );
+  });
+  const zoneFilter = ref(initialZoneFilter.value);
+  watch(initialZoneFilter, () => {
+    zoneFilter.value = initialZoneFilter.value;
+  });
+  const initialDateFilter = computed(
+    () => {
+      var _a;
+      return (_a = getFilterParamAsString(route.query, "date")) != null ? _a : "";
+    }
+  );
+  const dateFilter = ref(initialDateFilter.value);
+  watch(initialDateFilter, () => {
+    dateFilter.value = initialDateFilter.value;
+  });
+  const statusesOptionList = computed(
+    () => Object.entries(Status).map(([_, value]) => ({
+      value,
+      label: getStatus(value, t)
+    }))
+  );
+  const initialStatusFilter = computed(() => {
+    const queryValue = getFilterParamAsStringArray(
+      route.query,
+      "status"
+    );
+    return statusesOptionList.value.filter(
+      ({ value }) => queryValue.some((selected) => selected === value)
+    );
+  });
+  const statusFilter = ref(initialStatusFilter.value);
+  watch(initialStatusFilter, () => {
+    statusFilter.value = initialStatusFilter.value;
+  });
+  const filterParams = computed(
+    () => getFilterParams({
+      ["zone"]: zoneFilter.value.map(({ value }) => value),
+      ["date"]: dateFilter.value || [],
+      ["status"]: statusFilter.value.map(({ value }) => value)
+    })
+  );
+  const tagRemovalHandler = (event) => {
+    if (event.name === "zone") {
+      zoneFilter.value = zoneFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+    if (event.name === "date") {
+      dateFilter.value = "";
+    }
+    if (event.name === "status") {
+      statusFilter.value = statusFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+  };
+  const tags = computed(
+    () => [
+      ...zoneFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: "zone",
+        title: t("banners:zone")
+      })),
+      ...statusFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: "status",
+        title: t("banners:status")
+      })),
+      dateFilter.value ? {
+        value: dateFilter.value,
+        label: dateFilter.value,
+        name: "date",
+        title: t("banners:date")
+      } : null
+    ].filter(isNotNullish)
+  );
+  return {
+    zoneFilter,
+    zonesOptionList,
+    dateFilter,
+    statusFilter,
+    statusesOptionList,
+    filterParams,
+    tags,
+    tagRemovalHandler
+  };
+}
+var BannerList_vue_vue_type_style_index_0_lang = "";
+const _sfc_main$1 = defineComponent({
+  name: "BannerList",
+  components: {
+    DeleteIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const { t } = useI18n();
+    const { loading: isZonesLoading, data: zoneList } = useFetchZones();
+    const {
+      zoneFilter,
+      zonesOptionList,
+      dateFilter,
+      statusFilter,
+      statusesOptionList,
+      filterParams,
+      tags,
+      tagRemovalHandler
+    } = useAdvancedSearch({
+      t,
+      zoneList,
+      route
+    });
+    const {
+      fetchEntityList: fetchBanners,
+      isLoading: isBannersLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      searchQuery,
+      pageNumber,
+      pageCount,
+      pageSize
+    } = useDataTable({
+      fetchEntityList: (params) => getBanners({
+        query: params.searchQuery,
+        pageNumber: params.pageNumber,
+        pageSize: params.pageSize,
+        ...filterParams.value
+      }),
+      initialValue: [],
+      resourceName: "Banners"
+    });
+    watch(filterParams, () => {
+      if (isZonesLoading.value) {
+        return;
+      }
+      const newQuery = {
+        ...pick(route.query, ["query", "pageNumber"]),
+        ...filterParams.value
+      };
+      if (!isEqual(route.query, newQuery)) {
+        router.replace({ query: newQuery });
+        fetchBanners();
+      }
+    });
+    const { isDeleting, handleResourceDelete } = useResourceDelete({
+      deleteResource: deleteBanner,
+      resourceName: "Banner",
+      onSuccess: fetchBanners
+    });
+    const isBusy = (bannerId) => {
+      return isDeleting(bannerId) || isBannersLoading.value;
+    };
+    const columnDefs = computed(
+      () => getColumnDefs(zoneList.value, t)
+    );
+    const isRowDataLoading = computed(
+      () => isBannersLoading.value || isZonesLoading.value
+    );
+    return {
+      columnDefs,
+      isRowDataLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      getBannersBannerFormUrl,
+      searchQuery,
+      pageNumber,
+      pageCount,
+      pageSize,
+      isBusy,
+      handleResourceDelete,
+      zoneFilter,
+      zonesOptionList,
+      dateFilter,
+      statusFilter,
+      statusesOptionList,
+      tags,
+      tagRemovalHandler
+    };
+  }
+});
+const _hoisted_1$1 = { class: "filters" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FormFieldMultiSelect = resolveComponent("FormFieldMultiSelect");
+  const _component_FormField = resolveComponent("FormField");
+  const _component_AdvancedSearch = resolveComponent("AdvancedSearch");
+  const _component_EditIcon = resolveComponent("EditIcon");
+  const _component_BaseButton = resolveComponent("BaseButton");
+  const _component_DeleteIcon = resolveComponent("DeleteIcon");
+  const _component_DataTable = resolveComponent("DataTable");
+  const _component_Page = resolveComponent("Page");
+  return openBlock(), createBlock(_component_Page, {
+    title: _ctx.$i18n.t("banners:banners"),
+    "header-buttons": [
+      {
+        text: _ctx.$i18n.t("banners:createBanner"),
+        href: _ctx.getBannersBannerFormUrl({ bannerId: "create" })
+      }
+    ]
+  }, {
+    content: withCtx(() => [
+      createVNode(_component_DataTable, {
+        "column-defs": _ctx.columnDefs,
+        "row-data": _ctx.rowData,
+        loading: _ctx.isRowDataLoading,
+        "error-message": _ctx.errorMessage,
+        "data-table": "banners",
+        "use-search": true,
+        "use-pagination": true,
+        "search-query": _ctx.searchQuery,
+        pagination: {
+          pageNumber: _ctx.pageNumber,
+          pageCount: _ctx.pageCount,
+          pageSize: _ctx.pageSize,
+          disabled: _ctx.isRowDataLoading
+        },
+        onChange: _ctx.handleChange
+      }, {
+        filters: withCtx(() => [
+          createVNode(_component_AdvancedSearch, {
+            tags: _ctx.tags,
+            "onClick:tag": _ctx.tagRemovalHandler
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1$1, [
+                createVNode(_component_FormFieldMultiSelect, {
+                  "selected-options": _ctx.zoneFilter,
+                  "onUpdate:selected-options": _cache[0] || (_cache[0] = ($event) => _ctx.zoneFilter = $event),
+                  options: _ctx.zonesOptionList,
+                  name: "zoneFilter",
+                  searchable: true,
+                  label: _ctx.$i18n.t("banners:zone"),
+                  class: "filter"
+                }, null, 8, ["selected-options", "options", "label"]),
+                createVNode(_component_FormField, {
+                  value: _ctx.dateFilter,
+                  "onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.dateFilter = $event),
+                  label: _ctx.$i18n.t("banners:date"),
+                  name: "dateFilter",
+                  type: "date",
+                  class: "filter"
+                }, null, 8, ["value", "label"]),
+                createVNode(_component_FormFieldMultiSelect, {
+                  "selected-options": _ctx.statusFilter,
+                  "onUpdate:selected-options": _cache[2] || (_cache[2] = ($event) => _ctx.statusFilter = $event),
+                  options: _ctx.statusesOptionList,
+                  name: "statusFilter",
+                  searchable: true,
+                  label: _ctx.$i18n.t("banners:status"),
+                  class: "filter"
+                }, null, 8, ["selected-options", "options", "label"])
+              ])
+            ]),
+            _: 1
+          }, 8, ["tags", "onClick:tag"])
+        ]),
+        "cell(actions)": withCtx(({ row }) => [
+          createVNode(_component_BaseButton, {
+            variant: "icon",
+            title: _ctx.$i18n.t("banners:edit"),
+            disabled: _ctx.isBusy(row.id),
+            href: _ctx.getBannersBannerFormUrl({ bannerId: row.id })
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_EditIcon)
+            ]),
+            _: 2
+          }, 1032, ["title", "disabled", "href"]),
+          createVNode(_component_BaseButton, {
+            variant: "icon",
+            title: _ctx.$i18n.t("banners:remove"),
+            disabled: _ctx.isBusy(row.id),
+            onClick: ($event) => _ctx.handleResourceDelete(row.id)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_DeleteIcon)
+            ]),
+            _: 2
+          }, 1032, ["title", "disabled", "onClick"])
+        ]),
+        _: 1
+      }, 8, ["column-defs", "row-data", "loading", "error-message", "search-query", "pagination", "onChange"])
+    ]),
+    _: 1
+  }, 8, ["title", "header-buttons"]);
+}
+var BannerList = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+function useFetchBanner({
+  bannerId,
+  isCreation
+}) {
+  const [fetchBanner, resource] = useResource({
+    fetchResource: () => getBanner(bannerId.value),
+    initialValue: null,
+    resourceName: "Banner"
+  });
+  onMounted(() => {
+    if (isCreation.value || !bannerId.value) {
+      return;
+    }
+    fetchBanner();
+  });
+  watch(bannerId, () => {
+    if (isCreation.value || !bannerId.value) {
+      return;
+    }
+    fetchBanner();
+  });
+  return resource;
+}
+function useFetchZoneFields({
+  values
+}) {
+  const zoneId = computed(() => {
+    var _a, _b;
+    return (_b = (_a = values.value.bannerZone) == null ? void 0 : _a.value) != null ? _b : "";
+  });
+  const [fetchZoneFields, resource] = useResource({
+    fetchResource: () => getZoneFields(zoneId.value),
+    initialValue: null,
+    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 ? void 0 : banner.bannerZone)
+  );
+  return {
+    priority: String((_a = banner == null ? void 0 : banner.priority) != null ? _a : 1),
+    link: (_b = banner == null ? void 0 : banner.link) != null ? _b : "",
+    image: (banner == null ? void 0 : banner.image) ? { id: createId(), file: banner.image } : null,
+    bannerZone: foundZone != null ? foundZone : null,
+    openNewTab: (_c = banner == null ? void 0 : banner.openNewTab) != null ? _c : false,
+    dateStart: (_d = banner == null ? void 0 : banner.dateStart) != null ? _d : "",
+    dateEnd: (_e = banner == null ? void 0 : banner.dateEnd) != null ? _e : "",
+    disabled: (_f = banner == null ? void 0 : banner.disabled) != null ? _f : false,
+    comment: (_g = banner == null ? void 0 : banner.comment) != null ? _g : "",
+    fields: []
+  };
+}
+function convertBannerFormValuesToPayload(values) {
+  var _a, _b, _c, _d;
+  return {
+    ...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 ? void 0 : _a.file.id) != null ? _b : null,
+    bannerZone: (_d = (_c = values.bannerZone) == null ? void 0 : _c.value) != null ? _d : "",
+    fields: values.fields.map((field) => ({
+      name: field.config.name,
+      value: universalFieldUtils.getOutgoingValue(field)
+    }))
+  };
+}
+var BannerForm_vue_vue_type_style_index_0_lang = "";
+const _sfc_main = defineComponent({
+  name: "BannerForm",
+  components: {
+    FormFieldFileInput,
+    FormFieldCheckbox,
+    InputLabel,
+    FormField,
+    FormFieldSelect,
+    Page,
+    FormFooter,
+    DynamicField
+  },
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const toast = useToast();
+    const { t } = useI18n();
+    const bannerId = computed(() => route.params.bannerId);
+    const isCreation = computed(() => bannerId.value === "create");
+    const { data: zones, loading: isZonesLoading } = useFetchZones();
+    const zonesOptionList = computed(
+      () => zones.value.map((zone) => ({
+        value: zone.id,
+        label: zone.name
+      }))
+    );
+    const { data: banner, loading: isBannerLoading } = useFetchBanner({
+      bannerId,
+      isCreation
+    });
+    const isSubmitting = ref(false);
+    const values = ref(
+      convertBannerToFormValues(banner.value, zonesOptionList.value)
+    );
+    const errors = ref({});
+    watch([banner, zones], () => {
+      values.value = convertBannerToFormValues(
+        banner.value,
+        zonesOptionList.value
+      );
+    });
+    const { loading: isZoneFieldsLoading, data: zoneFields } = useFetchZoneFields({ values });
+    watch(zoneFields, () => {
+      var _a, _b;
+      values.value.fields = ((_b = (_a = zoneFields.value) == null ? void 0 : _a.fields) != null ? _b : []).map(
+        (fieldConfig, index) => {
+          var _a2;
+          return universalFieldUtils.createFormField(
+            fieldConfig,
+            banner.value ? (_a2 = banner.value.fields[index].value) != null ? _a2 : null : null
+          );
+        }
+      );
+    });
+    const submitForm = (event) => {
+      isSubmitting.value = true;
+      const body = convertBannerFormValuesToPayload(values.value);
+      const requestPromise = isCreation.value ? createBanner(body) : updateBanner(bannerId.value, body);
+      requestPromise.then(({ data }) => {
+        errors.value = {};
+        if (event.type === "create") {
+          router.push(getBannersBannerFormUrl({ bannerId: String(data.id) }));
+        } else if (event.type === "create_exit" || event.type === "save_exit") {
+          navigateBack(router, getBannersBannerListUrl());
+        } else if (event.type === "create_create-another") {
+          values.value = convertBannerToFormValues(
+            null,
+            zonesOptionList.value
+          );
+        }
+        toast.show({
+          variant: "success",
+          title: t("banners:success"),
+          body: isCreation.value ? t("banners:bannerWasSuccessfullyCreated") : t("banners:bannerWasSuccessfullyUpdated")
+        });
+      }).catch((error) => {
+        console.error(error);
+        errors.value = convertRequestErrorToMap(error);
+        toast.show({
+          variant: "danger",
+          title: t("banners:error"),
+          body: isCreation.value ? t("banners:bannerCreationWasFailed") : t("banners:bannerUpdateWasFailed")
+        });
+      }).finally(() => {
+        isSubmitting.value = false;
+      });
+    };
+    const isContentLoading = computed(
+      () => isBannerLoading.value || isZonesLoading.value || isZoneFieldsLoading.value
+    );
+    return {
+      isCreation,
+      isContentLoading,
+      isSubmitting,
+      values,
+      errors,
+      submitForm,
+      bannerListUrl: getBannersBannerListUrl(),
+      zonesOptionList
+    };
+  }
+});
+const _hoisted_1 = { class: "zone" };
+const _hoisted_2 = { class: "date" };
+const _hoisted_3 = { class: "link" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FormFieldSelect = resolveComponent("FormFieldSelect");
+  const _component_FormField = resolveComponent("FormField");
+  const _component_InputLabel = resolveComponent("InputLabel");
+  const _component_FormFieldCheckbox = resolveComponent("FormFieldCheckbox");
+  const _component_FormFieldFileInput = resolveComponent("FormFieldFileInput");
+  const _component_DynamicField = resolveComponent("DynamicField");
+  const _component_FormFooter = resolveComponent("FormFooter");
+  const _component_Page = resolveComponent("Page");
+  return openBlock(), createBlock(_component_Page, {
+    title: _ctx.isCreation ? _ctx.$i18n.t("banners:createBanner") : _ctx.$i18n.t("banners:updateBanner"),
+    "is-content-loading": _ctx.isContentLoading
+  }, {
+    content: withCtx(() => [
+      createElementVNode("form", {
+        novalidate: "",
+        onSubmit: _cache[9] || (_cache[9] = withModifiers((...args) => _ctx.submitForm && _ctx.submitForm(...args), ["prevent"]))
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_component_FormFieldSelect, {
+            value: _ctx.values.bannerZone,
+            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => _ctx.values.bannerZone = $event),
+            name: "bannerZone",
+            label: _ctx.$i18n.t("banners:zone"),
+            options: _ctx.zonesOptionList,
+            error: _ctx.errors.bannerZone
+          }, null, 8, ["value", "label", "options", "error"]),
+          createVNode(_component_FormField, {
+            value: _ctx.values.priority,
+            "onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.values.priority = $event),
+            name: "priority",
+            label: _ctx.$i18n.t("banners:priority"),
+            error: _ctx.errors.priority
+          }, null, 8, ["value", "label", "error"])
+        ]),
+        createVNode(_component_InputLabel, null, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(_ctx.$i18n.t("banners:period")), 1)
+          ]),
+          _: 1
+        }),
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_component_FormField, {
+            value: _ctx.values.dateStart,
+            "onUpdate:value": _cache[2] || (_cache[2] = ($event) => _ctx.values.dateStart = $event),
+            label: _ctx.$i18n.t("banners:from"),
+            name: "dateStart",
+            type: "date",
+            max: _ctx.values.dateEnd
+          }, null, 8, ["value", "label", "max"]),
+          createVNode(_component_FormField, {
+            value: _ctx.values.dateEnd,
+            "onUpdate:value": _cache[3] || (_cache[3] = ($event) => _ctx.values.dateEnd = $event),
+            label: _ctx.$i18n.t("banners:to"),
+            name: "dateEnd",
+            type: "date",
+            min: _ctx.values.dateStart
+          }, null, 8, ["value", "label", "min"])
+        ]),
+        createVNode(_component_FormFieldCheckbox, {
+          checked: _ctx.values.disabled,
+          "onUpdate:checked": _cache[4] || (_cache[4] = ($event) => _ctx.values.disabled = $event),
+          name: "disabled",
+          label: _ctx.$i18n.t("banners:disabled"),
+          error: _ctx.errors.disabled
+        }, null, 8, ["checked", "label", "error"]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_component_FormField, {
+            value: _ctx.values.link,
+            "onUpdate:value": _cache[5] || (_cache[5] = ($event) => _ctx.values.link = $event),
+            name: "link",
+            label: _ctx.$i18n.t("banners:link"),
+            error: _ctx.errors.name
+          }, null, 8, ["value", "label", "error"]),
+          createVNode(_component_FormFieldCheckbox, {
+            checked: _ctx.values.openNewTab,
+            "onUpdate:checked": _cache[6] || (_cache[6] = ($event) => _ctx.values.openNewTab = $event),
+            name: "openNewTab",
+            label: _ctx.$i18n.t("banners:openNewTab"),
+            error: _ctx.errors.openNewTab
+          }, null, 8, ["checked", "label", "error"])
+        ]),
+        createVNode(_component_FormFieldFileInput, {
+          value: _ctx.values.image,
+          "onUpdate:value": _cache[7] || (_cache[7] = ($event) => _ctx.values.image = $event),
+          name: "image",
+          "file-type": "image",
+          label: _ctx.$i18n.t("banners:image"),
+          error: _ctx.errors.file
+        }, null, 8, ["value", "label", "error"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.values.fields, (field) => {
+          return openBlock(), createBlock(_component_DynamicField, {
+            key: field.name,
+            field
+          }, null, 8, ["field"]);
+        }), 128)),
+        createVNode(_component_FormField, {
+          value: _ctx.values.comment,
+          "onUpdate:value": _cache[8] || (_cache[8] = ($event) => _ctx.values.comment = $event),
+          name: "comment",
+          type: "textarea",
+          label: _ctx.$i18n.t("banners:comment"),
+          error: _ctx.errors.comment
+        }, null, 8, ["value", "label", "error"])
+      ], 32)
+    ]),
+    footer: withCtx(() => [
+      createVNode(_component_FormFooter, {
+        "back-href": _ctx.bannerListUrl,
+        "is-submitting": _ctx.isSubmitting,
+        "is-creation": _ctx.isCreation,
+        "can-create-another": _ctx.isCreation,
+        onSubmit: _ctx.submitForm
+      }, null, 8, ["back-href", "is-submitting", "is-creation", "can-create-another", "onSubmit"])
+    ]),
+    _: 1
+  }, 8, ["title", "is-content-loading"]);
+}
+var BannerForm = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const BANNERS_ZONE_LIST_ROUTE = {
+  path: BANNERS_ROUTE_PATHS.ZONE_LIST,
+  component: ZoneList,
+  name: "Zones",
+  meta: {
+    getBreadcrumbs: (route, { t }) => [
+      { url: "/", text: t("banners:home") },
+      { url: BANNERS_ROUTE_PATHS.ZONE_LIST, text: t("banners:zones") }
+    ]
+  }
+};
+const BANNERS_BANNER_LIST_ROUTE = {
+  path: BANNERS_ROUTE_PATHS.BANNER_LIST,
+  component: BannerList,
+  name: "Banners",
+  meta: {
+    getBreadcrumbs: (route, { t }) => [
+      { url: "/", text: t("banners:home") },
+      { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t("banners:banners") }
+    ]
+  }
+};
+const BANNERS_BANNER_FORM_ROUTE = {
+  path: BANNERS_ROUTE_PATHS.BANNER_FORM,
+  component: BannerForm,
+  name: "Banner Form",
+  meta: {
+    getBreadcrumbs: (route, { t }) => [
+      { url: "/", text: t("banners:home") },
+      { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t("banners:banners") },
+      { url: route.path, text: t("banners:bannerForm") }
+    ]
+  }
+};
+applyTranslations();
+export { BANNERS_BANNER_FORM_ROUTE, BANNERS_BANNER_LIST_ROUTE, BANNERS_ZONE_LIST_ROUTE, createBanner, deleteBanner, getBanner, getBannerCount, getBanners, getBannersBannerFormUrl, getBannersBannerListUrl, getBannersZoneListUrl, getZoneFields, getZones, updateBanner };