@tager/admin-banners 0.1.6 → 0.3.1

package/dist/index.esm.js

@@ -1,178 +1,176 @@
-import Vue from 'vue';
-import { request, getMessageFromError, convertRequestErrorToMap } from '@tager/admin-services';
+import { request, useResource, useResourceDelete, createId, convertRequestErrorToMap, i18n } from '@tager/admin-services';
+import { defineComponent, onMounted, computed, ref, watch } from '@vue/composition-api';
+import { useDataTable, getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, FormFooter } from '@tager/admin-ui';
 import { compile } from 'path-to-regexp';
-import { formatBoolean } from '@tager/admin-ui';
 
-/** Banner area */
-function getBannerAreaList() {
-    return request.get({ path: '/market-boards' });
-}
-function getBannerAreaById(areaId) {
-    return request.get({ path: `/market-boards/${areaId}` });
-}
-function getBannerAreaByAlias(areaAlias) {
-    return request.get({ path: `/market-boards/${areaAlias}` });
-}
-function createBannerArea(payload) {
-    return request.post({ path: '/market-boards', body: payload });
-}
-function updateBannerArea(areaId, payload) {
-    return request.put({ path: `/market-boards/${areaId}`, body: payload });
-}
-function deleteBannerArea(areaId) {
-    return request.delete({ path: `/market-boards/${areaId}` });
+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',
+    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: 'Главная',
+    zone: 'Баннерная зона',
+    zones: 'Баннерные зоны',
+    banners: 'Баннеры',
+    bannerForm: 'Форма баннера',
+    createBanner: 'Добавить баннер',
+    updateBanner: 'Редактировать баннер',
+    link: 'Ссылка',
+    image: 'Картинка',
+    openNewTab: 'Открывать в новой вкладке',
+    period: 'Срок действия',
+    from: 'От',
+    to: 'До',
+    disabled: 'Выключен',
+    comment: 'Комментарий',
+    status: 'Статус',
+    bannerZoneIsDeleted: 'Баннерная зона удалена',
+    newTab: 'Новая вкладка',
+    yes: 'Да',
+    no: 'Нет',
+    edit: 'Редактировать',
+    remove: 'Удалить',
+    actions: 'Действия',
+    date: 'Дата',
+    success: 'Успех',
+    error: 'Ошибка',
+    statuses: {
+        waiting: 'В ожидании',
+        archived: 'Архивный',
+        active: 'Активный',
+        disabled: 'Отключен',
+    },
+    bannerWasSuccessfullyCreated: 'Баннер успешно создан',
+    bannerWasSuccessfullyUpdated: 'Баннер успешно обновлен',
+    bannerCreationWasFailed: 'Не удалось создать баннер',
+    bannerUpdateWasFailed: 'Не удалось обновить баннер',
+};
+
+/** Zones **/
+function getZones(params) {
+    return request.get({ path: '/admin/adv/zones', params });
 }
-/** Banners */
-function getBannerItemList(areaId) {
-    return request.get({ path: `/market-boards/${areaId}/items` });
+/** Banners **/
+function getBanners(params) {
+    return request.get({ path: '/admin/adv', params });
 }
-function getBannerItemById(bannerItemId) {
-    return request.get({ path: `/market-boards/items/${bannerItemId}` });
+function getBanner(bannerId) {
+    return request.get({ path: `/admin/adv/${bannerId}` });
 }
-function createBannerItem(areaId, payload) {
-    return request.post({
-        path: `/market-boards/${areaId}/items`,
-        body: payload,
-    });
+function createBanner(payload) {
+    return request.post({ path: '/admin/adv', body: payload });
 }
-function updateBannerItem(bannerItemId, payload) {
+function updateBanner(bannerId, payload) {
     return request.put({
-        path: `/market-boards/items/${bannerItemId}`,
+        path: `/admin/adv/${bannerId}`,
         body: payload,
     });
 }
-function deleteBannerItem(bannerItemId) {
-    return request.delete({ path: `/market-boards/items/${bannerItemId}` });
+function deleteBanner(bannerId) {
+    return request.delete({ path: `/admin/banners/${bannerId}` });
 }
-function moveBannerItem(bannerItemId, direction) {
-    return request.post({
-        path: `/market-boards/items/${bannerItemId}/${direction}`,
-    });
+function getBannerCount() {
+    return request.get({ path: '/admin/adv/count' });
 }
 
-const BANNER_ROUTE_PATHS = {
-    AREA_LIST: '/banners',
-    AREA_FORM: '/banners/:areaId',
-    ITEM_LIST: '/banners/:areaAlias/items',
-    ITEM_FORM: '/banners/:areaAlias/items/:itemId',
+const BANNERS_ROUTE_PATHS = {
+    ZONE_LIST: '/banners/zones',
+    BANNER_LIST: '/banners',
+    BANNER_FORM: '/banners/:bannerId',
 };
-function getBannerAreaListUrl() {
-    return BANNER_ROUTE_PATHS.AREA_LIST;
-}
-function getBannerAreaFormUrl(params) {
-    return compile(BANNER_ROUTE_PATHS.AREA_FORM)({
-        areaId: params.areaId,
-    });
+function getBannersZoneListUrl() {
+    return BANNERS_ROUTE_PATHS.ZONE_LIST;
 }
-function getBannerItemListUrl(params) {
-    return compile(BANNER_ROUTE_PATHS.ITEM_LIST)({
-        areaAlias: params.areaAlias,
-    });
+function getBannersBannerListUrl() {
+    return BANNERS_ROUTE_PATHS.BANNER_LIST;
 }
-function getBannerItemFormUrl(params) {
-    return compile(BANNER_ROUTE_PATHS.ITEM_FORM)({
-        areaAlias: params.areaAlias,
-        itemId: params.itemId,
-    });
+function getBannersBannerFormUrl(params) {
+    return compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
 }
 
-const COLUMN_DEFS = [
-    {
-        id: 1,
-        name: 'ID',
-        field: 'id',
-        style: { width: '50px', textAlign: 'center' },
-        headStyle: { width: '50px', textAlign: 'center' },
-    },
-    { id: 2, name: 'Alias', field: 'alias' },
-    { id: 3, name: 'Label', field: 'label' },
-    { id: 4, name: 'Scenario', field: 'scenario' },
-    {
-        id: 6,
-        name: 'Banner Items',
-        field: 'linkToBannerItems',
-        style: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-        headStyle: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },
-    },
-    {
-        id: 8,
-        name: 'Actions',
-        field: 'actions',
-        style: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-        headStyle: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },
-    },
-];
-var script = Vue.extend({
-    name: 'BannerAreaList',
-    data() {
-        return {
-            columnDefs: COLUMN_DEFS,
-            rowData: [],
-            deletingBannerAreaIdList: [],
-            isRowDataLoading: false,
-            errorMessage: null,
-        };
-    },
-    mounted() {
-        this.refreshBannerAreaList();
-    },
-    methods: {
-        getBannerAreaUrl(areaId) {
-            return getBannerAreaFormUrl({ areaId });
-        },
-        refreshBannerAreaList() {
-            this.isRowDataLoading = true;
-            return getBannerAreaList()
-                .then((response) => {
-                this.rowData = response.data;
-                this.errorMessage = null;
-            })
-                .catch((error) => {
-                console.error(error);
-                this.rowData = [];
-                this.errorMessage = getMessageFromError(error);
-            })
-                .finally(() => {
-                this.isRowDataLoading = false;
-            });
+function getColumnDefs(t) {
+    return [
+        {
+            id: 0,
+            name: 'ID',
+            field: 'id',
+            style: { width: '50px', textAlign: 'center' },
+            headStyle: { width: '50px', textAlign: 'center' },
         },
-        handleBannerAreaDelete(bannerArea) {
-            const shouldDeleteBannerArea = confirm(`Are you sure you want to delete banner area "${bannerArea.label}"`);
-            if (!shouldDeleteBannerArea)
-                return;
-            this.deletingBannerAreaIdList.push(bannerArea.id);
-            deleteBannerArea(bannerArea.id)
-                .then((response) => {
-                if (response.success) {
-                    this.refreshBannerAreaList().then(() => {
-                        this.deletingBannerAreaIdList.filter((id) => id !== bannerArea.id);
-                    });
-                    this.$toast({
-                        variant: 'success',
-                        title: 'Success',
-                        body: 'Banner area was successfully removed',
-                    });
-                }
-                else {
-                    this.$toast({
-                        variant: 'danger',
-                        title: 'Error',
-                        body: 'Banner area deletion was failed',
-                    });
-                }
-            })
-                .catch((error) => {
-                console.error(error);
-                this.$toast({
-                    variant: 'danger',
-                    title: 'Error',
-                    body: 'Banner area deletion was failed',
-                });
-            });
+        {
+            id: 1,
+            name: t('banners:name'),
+            field: 'name',
+            type: 'name',
         },
-        getLinkToBannerItems(areaAlias) {
-            return getBannerItemListUrl({ areaAlias });
+        {
+            id: 2,
+            name: t('banners:banners'),
+            field: 'bannersCount',
+            style: { whiteSpace: 'nowrap', width: '130px' },
         },
+    ];
+}
+function getLinkToBannersByZone(zoneId) {
+    return `${getBannersBannerListUrl()}?filter[zone]=${zoneId}`;
+}
+
+var script = defineComponent({
+    name: 'ZoneList',
+    setup(props, context) {
+        const { fetchEntityList: fetchZones, isLoading: isZonesLoading, rowData, errorMessage, handleChange, } = useDataTable({
+            fetchEntityList: getZones,
+            initialValue: [],
+            context,
+            resourceName: 'Banner Zones',
+        });
+        onMounted(() => {
+            fetchZones();
+        });
+        const columnDefs = computed(() => getColumnDefs(context.root.$t));
+        return {
+            columnDefs,
+            isRowDataLoading: isZonesLoading,
+            rowData,
+            errorMessage,
+            handleChange,
+            getLinkToBannersByZone,
+        };
     },
 });
 
@@ -251,59 +249,6 @@ function normalizeComponent(template, style, script, scopeId, isFunctionalTempla
     return script;
 }
 
-const isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return (id, style) => addStyle(id, style);
-}
-let HEAD;
-const styles = {};
-function addStyle(id, css) {
-    const group = isOldIE ? css.media || 'default' : id;
-    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        let code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                style.element.setAttribute('media', css.media);
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            const index = style.ids.size - 1;
-            const textNode = document.createTextNode(code);
-            const nodes = style.element.childNodes;
-            if (nodes[index])
-                style.element.removeChild(nodes[index]);
-            if (nodes.length)
-                style.element.insertBefore(textNode, nodes[index]);
-            else
-                style.element.appendChild(textNode);
-        }
-    }
-}
-
 /* script */
 const __vue_script__ = script;
 
@@ -313,82 +258,45 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("page", {
-    attrs: {
-      title: "Banner Areas",
-      "header-buttons": [
-        { text: "New banner area", href: _vm.getBannerAreaUrl("create") },
-      ],
-    },
+    attrs: { title: _vm.$t("banners:zones") },
     scopedSlots: _vm._u([
       {
         key: "content",
         fn: function () {
           return [
-            _c("base-table", {
+            _c("data-table", {
               attrs: {
                 "column-defs": _vm.columnDefs,
                 "row-data": _vm.rowData,
                 loading: _vm.isRowDataLoading,
                 "error-message": _vm.errorMessage,
+                "data-table": "banners-zones",
+                "use-search": false,
+                "use-pagination": false,
               },
+              on: { change: _vm.handleChange },
               scopedSlots: _vm._u([
                 {
-                  key: "cell(link-to-banner-items)",
+                  key: "cell(banners-count)",
                   fn: function (ref) {
                     var row = ref.row;
                     return [
                       _c(
-                        "base-button",
+                        "count-button",
                         {
                           attrs: {
-                            href: _vm.getLinkToBannerItems(row.alias),
+                            href: _vm.getLinkToBannersByZone(row.id),
                             variant: "outline-secondary",
+                            count: row.bannersCount,
                           },
                         },
-                        [_vm._v("\n          Banner Items\n        ")]
-                      ),
-                    ]
-                  },
-                },
-                {
-                  key: "cell(actions)",
-                  fn: function (ref) {
-                    var row = ref.row;
-                    return [
-                      _c(
-                        "base-button",
-                        {
-                          attrs: {
-                            variant: "icon",
-                            title: "Edit",
-                            disabled: _vm.deletingBannerAreaIdList.includes(
-                              row.id
-                            ),
-                            href: _vm.getBannerAreaUrl(row.id),
-                          },
-                        },
-                        [_c("svg-icon", { attrs: { name: "edit" } })],
-                        1
-                      ),
-                      _vm._v(" "),
-                      _c(
-                        "base-button",
-                        {
-                          attrs: {
-                            variant: "icon",
-                            title: "Remove",
-                            disabled: _vm.deletingBannerAreaIdList.includes(
-                              row.id
-                            ),
-                          },
-                          on: {
-                            click: function ($event) {
-                              return _vm.handleBannerAreaDelete(row)
-                            },
-                          },
-                        },
-                        [_c("svg-icon", { attrs: { name: "delete" } })],
-                        1
+                        [
+                          _vm._v(
+                            "\n          " +
+                              _vm._s(_vm.$t("banners:banners")) +
+                              "\n        "
+                          ),
+                        ]
                       ),
                     ]
                   },
@@ -406,17 +314,15 @@ var __vue_staticRenderFns__ = [];
 __vue_render__._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__ = function (inject) {
-    if (!inject) return
-    inject("data-v-60c3bc88_0", { source: ".actions-cell button[data-v-60c3bc88]:not(:last-child) {\n  margin-right: 0.5rem;\n}\n\n/*# sourceMappingURL=BannerAreaList.vue.map */", map: {"version":3,"sources":["D:\\Work\\tager-admin-banners\\src\\views\\BannerAreaList.vue","BannerAreaList.vue"],"names":[],"mappings":"AA2KA;EACA,oBAAA;AC1KA;;AAEA,6CAA6C","file":"BannerAreaList.vue","sourcesContent":["<template>\n  <page\n    title=\"Banner Areas\"\n    :header-buttons=\"[\n      { text: 'New banner area', href: getBannerAreaUrl('create') },\n    ]\"\n  >\n    <template v-slot:content>\n      <base-table\n        :column-defs=\"columnDefs\"\n        :row-data=\"rowData\"\n        :loading=\"isRowDataLoading\"\n        :error-message=\"errorMessage\"\n      >\n        <template v-slot:cell(link-to-banner-items)=\"{ row }\">\n          <base-button\n            :href=\"getLinkToBannerItems(row.alias)\"\n            variant=\"outline-secondary\"\n          >\n            Banner Items\n          </base-button>\n        </template>\n\n        <template v-slot:cell(actions)=\"{ row }\">\n          <base-button\n            variant=\"icon\"\n            title=\"Edit\"\n            :disabled=\"deletingBannerAreaIdList.includes(row.id)\"\n            :href=\"getBannerAreaUrl(row.id)\"\n          >\n            <svg-icon name=\"edit\"></svg-icon>\n          </base-button>\n          <base-button\n            variant=\"icon\"\n            title=\"Remove\"\n            :disabled=\"deletingBannerAreaIdList.includes(row.id)\"\n            @click=\"handleBannerAreaDelete(row)\"\n          >\n            <svg-icon name=\"delete\"></svg-icon>\n          </base-button>\n        </template>\n      </base-table>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { ColumnDefinition } from '@tager/admin-ui';\nimport { getMessageFromError, Nullable } from '@tager/admin-services';\n\nimport { BannerArea } from '../typings/model';\nimport { deleteBannerArea, getBannerAreaList } from '../services/requests';\nimport { getBannerAreaFormUrl, getBannerItemListUrl } from '../constants/paths';\n\nconst COLUMN_DEFS: Array<ColumnDefinition<BannerArea>> = [\n  {\n    id: 1,\n    name: 'ID',\n    field: 'id',\n    style: { width: '50px', textAlign: 'center' },\n    headStyle: { width: '50px', textAlign: 'center' },\n  },\n  { id: 2, name: 'Alias', field: 'alias' },\n  { id: 3, name: 'Label', field: 'label' },\n  { id: 4, name: 'Scenario', field: 'scenario' },\n  {\n    id: 6,\n    name: 'Banner Items',\n    field: 'linkToBannerItems',\n    style: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },\n    headStyle: { whiteSpace: 'nowrap', width: '120px', textAlign: 'center' },\n  },\n  {\n    id: 8,\n    name: 'Actions',\n    field: 'actions',\n    style: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },\n    headStyle: { whiteSpace: 'nowrap', width: '110px', textAlign: 'center' },\n  },\n];\n\nexport default Vue.extend({\n  name: 'BannerAreaList',\n  data(): {\n    columnDefs: Array<ColumnDefinition<BannerArea>>;\n    rowData: Array<BannerArea>;\n    deletingBannerAreaIdList: Array<number>;\n    isRowDataLoading: boolean;\n    errorMessage: Nullable<string>;\n  } {\n    return {\n      columnDefs: COLUMN_DEFS,\n      rowData: [],\n      deletingBannerAreaIdList: [],\n      isRowDataLoading: false,\n      errorMessage: null,\n    };\n  },\n  mounted(): void {\n    this.refreshBannerAreaList();\n  },\n  methods: {\n    getBannerAreaUrl(areaId: number | string): string {\n      return getBannerAreaFormUrl({ areaId });\n    },\n    refreshBannerAreaList(): Promise<void> {\n      this.isRowDataLoading = true;\n\n      return getBannerAreaList()\n        .then((response) => {\n          this.rowData = response.data;\n          this.errorMessage = null;\n        })\n        .catch((error) => {\n          console.error(error);\n          this.rowData = [];\n          this.errorMessage = getMessageFromError(error);\n        })\n        .finally(() => {\n          this.isRowDataLoading = false;\n        });\n    },\n    handleBannerAreaDelete(bannerArea: BannerArea) {\n      const shouldDeleteBannerArea = confirm(\n        `Are you sure you want to delete banner area \"${bannerArea.label}\"`\n      );\n\n      if (!shouldDeleteBannerArea) return;\n\n      this.deletingBannerAreaIdList.push(bannerArea.id);\n\n      deleteBannerArea(bannerArea.id)\n        .then((response) => {\n          if (response.success) {\n            this.refreshBannerAreaList().then(() => {\n              this.deletingBannerAreaIdList.filter(\n                (id) => id !== bannerArea.id\n              );\n            });\n            this.$toast({\n              variant: 'success',\n              title: 'Success',\n              body: 'Banner area was successfully removed',\n            });\n          } else {\n            this.$toast({\n              variant: 'danger',\n              title: 'Error',\n              body: 'Banner area deletion was failed',\n            });\n          }\n        })\n        .catch((error) => {\n          console.error(error);\n          this.$toast({\n            variant: 'danger',\n            title: 'Error',\n            body: 'Banner area deletion was failed',\n          });\n        });\n    },\n    getLinkToBannerItems(areaAlias: string) {\n      return getBannerItemListUrl({ areaAlias });\n    },\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.actions-cell {\n  button:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n}\n</style>\n",".actions-cell button:not(:last-child) {\n  margin-right: 0.5rem;\n}\n\n/*# sourceMappingURL=BannerAreaList.vue.map */"]}, media: undefined });
-
-  };
+  const __vue_inject_styles__ = undefined;
   /* scoped */
-  const __vue_scope_id__ = "data-v-60c3bc88";
+  const __vue_scope_id__ = undefined;
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
   const __vue_is_functional_template__ = false;
+  /* style inject */
+  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -431,368 +337,2691 @@ __vue_render__._withStripped = true;
     __vue_is_functional_template__,
     __vue_module_identifier__,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );
 
-const initialValues = {
-    alias: '',
-    label: '',
-    scenario: '',
-};
-var script$1 = Vue.extend({
-    name: 'BannerAreaForm',
-    data() {
-        return {
-            values: Object.assign({}, initialValues),
-            errors: {},
-            isContentLoading: false,
-        };
-    },
-    computed: {
-        areaId() {
-            return this.$route.params.areaId;
-        },
-        isCreation() {
-            return this.areaId === 'create';
-        },
-    },
-    watch: {
-        areaId() {
-            this.updateValues();
-        },
-    },
-    mounted() {
-        this.updateValues();
-    },
-    methods: {
-        convertReviewToInitialValues(bannerArea) {
-            return {
-                alias: bannerArea.alias,
-                label: bannerArea.label,
-                scenario: bannerArea.scenario,
-            };
-        },
-        updateValues() {
-            if (this.isCreation) {
-                this.values = Object.assign({}, initialValues);
-            }
-            else {
-                this.isContentLoading = true;
-                getBannerAreaById(this.areaId)
-                    .then((response) => {
-                    this.values = this.convertReviewToInitialValues(response.data);
-                })
-                    .catch(console.error)
-                    .finally(() => {
-                    this.isContentLoading = false;
-                });
-            }
-        },
-        submitForm() {
-            const body = {
-                label: this.values.label,
-                alias: this.values.alias,
-                scenario: this.values.scenario,
-            };
-            const requestPromise = this.isCreation
-                ? createBannerArea(body)
-                : updateBannerArea(this.areaId, body);
-            requestPromise
-                .then(() => {
-                this.errors = {};
-                this.$router.push(getBannerAreaListUrl());
-                this.$toast({
-                    variant: 'success',
-                    title: 'Success',
-                    body: `Banner Area was successfully ${this.isCreation ? 'created' : 'updated'}`,
-                });
-            })
-                .catch((error) => {
-                console.error(error);
-                this.errors = convertRequestErrorToMap(error);
-                this.$toast({
-                    variant: 'danger',
-                    title: 'Error',
-                    body: `Blog bannerArea ${this.isCreation ? 'creation' : 'update'} was failed`,
-                });
-            });
-        },
-        getAreaListUrl: getBannerAreaListUrl,
-    },
-});
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-/* script */
-const __vue_script__$1 = script$1;
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+	  path: basedir,
+	  exports: {},
+	  require: function (path, base) {
+      return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+    }
+	}, fn(module, module.exports), module.exports;
+}
 
-/* template */
-var __vue_render__$1 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("page", {
-    attrs: {
-      title: _vm.isCreation ? "Create Banner Area" : "Update Banner Area",
-      "is-content-loading": _vm.isContentLoading,
-      footer: { onSubmit: _vm.submitForm, backHref: _vm.getAreaListUrl() },
-    },
-    scopedSlots: _vm._u([
-      {
-        key: "content",
-        fn: function () {
-          return [
-            _c(
-              "form",
-              {
-                attrs: { novalidate: "" },
-                on: {
-                  submit: function ($event) {
-                    $event.preventDefault();
-                    return _vm.submitForm($event)
-                  },
-                },
-              },
-              [
-                _c("form-field", {
-                  attrs: {
-                    name: "alias",
-                    label: "Alias",
-                    error: _vm.errors.alias,
-                  },
-                  model: {
-                    value: _vm.values.alias,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "alias", $$v);
-                    },
-                    expression: "values.alias",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "label",
-                    label: "Label",
-                    error: _vm.errors.label,
-                  },
-                  model: {
-                    value: _vm.values.label,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "label", $$v);
-                    },
-                    expression: "values.label",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field", {
-                  attrs: {
-                    name: "scenario",
-                    label: "Scenario",
-                    error: _vm.errors.scenario,
-                  },
-                  model: {
-                    value: _vm.values.scenario,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "scenario", $$v);
-                    },
-                    expression: "values.scenario",
-                  },
-                }),
-              ],
-              1
-            ),
-          ]
-        },
-        proxy: true,
-      },
-    ]),
-  })
-};
-var __vue_staticRenderFns__$1 = [];
-__vue_render__$1._withStripped = true;
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
 
-  /* style */
-  const __vue_inject_styles__$1 = function (inject) {
-    if (!inject) return
-    inject("data-v-78a20f0f_0", { source: ".bottom[data-v-78a20f0f] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.save-button[data-v-78a20f0f] {\n  min-width: 100px;\n}\n.alias-field-inner[data-v-78a20f0f] {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span[data-v-78a20f0f] {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerAreaForm.vue.map */", map: {"version":3,"sources":["D:\\Work\\tager-admin-banners\\src\\views\\BannerAreaForm.vue","BannerAreaForm.vue"],"names":[],"mappings":"AAyJA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;ACxJA;AD2JA;EACA,gBAAA;ACxJA;AD2JA;EACA,aAAA;EACA,mBAAA;ACxJA;AD0JA;EACA,gBAAA;EACA,kBAAA;ACxJA;;AAEA,6CAA6C","file":"BannerAreaForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"isCreation ? 'Create Banner Area' : 'Update Banner Area'\"\n    :is-content-loading=\"isContentLoading\"\n    :footer=\"{ onSubmit: submitForm, backHref: getAreaListUrl() }\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent=\"submitForm\">\n        <form-field\n          v-model=\"values.alias\"\n          name=\"alias\"\n          label=\"Alias\"\n          :error=\"errors.alias\"\n        />\n\n        <form-field\n          v-model=\"values.label\"\n          name=\"label\"\n          label=\"Label\"\n          :error=\"errors.label\"\n        />\n\n        <form-field\n          v-model=\"values.scenario\"\n          name=\"scenario\"\n          label=\"Scenario\"\n          :error=\"errors.scenario\"\n        />\n      </form>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { convertRequestErrorToMap } from '@tager/admin-services';\n\nimport {\n  BannerAreaCreatePayload,\n  createBannerArea,\n  getBannerAreaById,\n  updateBannerArea,\n} from '../services/requests';\nimport { BannerArea } from '../typings/model';\nimport { getBannerAreaListUrl } from '../constants/paths';\n\ntype FormValues = {\n  alias: string;\n  label: string;\n  scenario: string;\n};\n\nconst initialValues: FormValues = {\n  alias: '',\n  label: '',\n  scenario: '',\n};\n\nexport default Vue.extend({\n  name: 'BannerAreaForm',\n  data(): {\n    values: FormValues;\n    errors: Record<string, string>;\n    isContentLoading: boolean;\n  } {\n    return {\n      values: { ...initialValues },\n      errors: {},\n      isContentLoading: false,\n    };\n  },\n  computed: {\n    areaId(): string {\n      return this.$route.params.areaId;\n    },\n    isCreation(): boolean {\n      return this.areaId === 'create';\n    },\n  },\n  watch: {\n    areaId() {\n      this.updateValues();\n    },\n  },\n  mounted(): void {\n    this.updateValues();\n  },\n  methods: {\n    convertReviewToInitialValues(bannerArea: BannerArea): FormValues {\n      return {\n        alias: bannerArea.alias,\n        label: bannerArea.label,\n        scenario: bannerArea.scenario,\n      };\n    },\n    updateValues() {\n      if (this.isCreation) {\n        this.values = { ...initialValues };\n      } else {\n        this.isContentLoading = true;\n\n        getBannerAreaById(this.areaId)\n          .then((response) => {\n            this.values = this.convertReviewToInitialValues(response.data);\n          })\n          .catch(console.error)\n          .finally(() => {\n            this.isContentLoading = false;\n          });\n      }\n    },\n    submitForm() {\n      const body: BannerAreaCreatePayload = {\n        label: this.values.label,\n        alias: this.values.alias,\n        scenario: this.values.scenario,\n      };\n\n      const requestPromise = this.isCreation\n        ? createBannerArea(body)\n        : updateBannerArea(this.areaId, body);\n\n      requestPromise\n        .then(() => {\n          this.errors = {};\n          this.$router.push(getBannerAreaListUrl());\n\n          this.$toast({\n            variant: 'success',\n            title: 'Success',\n            body: `Banner Area was successfully ${\n              this.isCreation ? 'created' : 'updated'\n            }`,\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          this.errors = convertRequestErrorToMap(error);\n          this.$toast({\n            variant: 'danger',\n            title: 'Error',\n            body: `Blog bannerArea ${\n              this.isCreation ? 'creation' : 'update'\n            } was failed`,\n          });\n        });\n    },\n    getAreaListUrl: getBannerAreaListUrl,\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n\n  span {\n    font-size: 0.9em;\n    margin-right: 10px;\n  }\n}\n</style>\n",".bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerAreaForm.vue.map */"]}, media: undefined });
+var lodash_isequal = createCommonjsModule(function (module, exports) {
+/**
+ * Lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright JS Foundation and other contributors <https://js.foundation/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
 
-  };
-  /* scoped */
-  const __vue_scope_id__$1 = "data-v-78a20f0f";
-  /* module identifier */
-  const __vue_module_identifier__$1 = undefined;
-  /* functional template */
-  const __vue_is_functional_template__$1 = false;
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
+/** Used as the size to enable large array optimizations. */
+var LARGE_ARRAY_SIZE = 200;
 
-  
-  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
-    __vue_inject_styles__$1,
-    __vue_script__$1,
-    __vue_scope_id__$1,
-    __vue_is_functional_template__$1,
-    __vue_module_identifier__$1,
-    false,
-    createInjector,
-    undefined,
-    undefined
-  );
+/** Used to stand-in for `undefined` hash values. */
+var HASH_UNDEFINED = '__lodash_hash_undefined__';
 
-const COLUMN_DEFS$1 = [
-    {
-        id: 2,
-        name: 'Image',
-        field: 'image',
-        type: 'image',
-    },
-    {
-        id: 1,
-        name: 'Title',
-        field: 'title',
-    },
-    { id: 3, name: 'Text', field: 'text', type: 'html' },
-    { id: 4, name: 'Button: Label', field: 'buttonLabel' },
-    { id: 5, name: 'Button: Link', field: 'buttonLink' },
-    {
-        id: 6,
-        name: 'Button: Is new tab?',
-        field: 'buttonIsNewTab',
-        format: ({ row }) => formatBoolean(row.buttonIsNewTab),
-    },
-    {
-        id: 7,
-        name: 'Actions',
-        field: 'actions',
-        style: { whiteSpace: 'nowrap', width: '205px' },
-        headStyle: { whiteSpace: 'nowrap', width: '205px' },
-    },
-];
-var script$2 = Vue.extend({
-    name: 'BannerItemList',
-    data() {
-        return {
-            bannerArea: null,
-            columnDefs: COLUMN_DEFS$1,
-            rowData: [],
-            deletingBannerItemIdList: [],
-            isBannerItemMoving: false,
-            isRowDataLoading: false,
-            errorMessage: null,
-        };
-    },
-    computed: {
-        areaAlias() {
-            return this.$route.params.areaAlias;
+/** Used to compose bitmasks for value comparisons. */
+var COMPARE_PARTIAL_FLAG = 1,
+    COMPARE_UNORDERED_FLAG = 2;
+
+/** Used as references for various `Number` constants. */
+var MAX_SAFE_INTEGER = 9007199254740991;
+
+/** `Object#toString` result references. */
+var argsTag = '[object Arguments]',
+    arrayTag = '[object Array]',
+    asyncTag = '[object AsyncFunction]',
+    boolTag = '[object Boolean]',
+    dateTag = '[object Date]',
+    errorTag = '[object Error]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    mapTag = '[object Map]',
+    numberTag = '[object Number]',
+    nullTag = '[object Null]',
+    objectTag = '[object Object]',
+    promiseTag = '[object Promise]',
+    proxyTag = '[object Proxy]',
+    regexpTag = '[object RegExp]',
+    setTag = '[object Set]',
+    stringTag = '[object String]',
+    symbolTag = '[object Symbol]',
+    undefinedTag = '[object Undefined]',
+    weakMapTag = '[object WeakMap]';
+
+var arrayBufferTag = '[object ArrayBuffer]',
+    dataViewTag = '[object DataView]',
+    float32Tag = '[object Float32Array]',
+    float64Tag = '[object Float64Array]',
+    int8Tag = '[object Int8Array]',
+    int16Tag = '[object Int16Array]',
+    int32Tag = '[object Int32Array]',
+    uint8Tag = '[object Uint8Array]',
+    uint8ClampedTag = '[object Uint8ClampedArray]',
+    uint16Tag = '[object Uint16Array]',
+    uint32Tag = '[object Uint32Array]';
+
+/**
+ * Used to match `RegExp`
+ * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
+ */
+var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+
+/** Used to detect host constructors (Safari). */
+var reIsHostCtor = /^\[object .+?Constructor\]$/;
+
+/** Used to detect unsigned integer values. */
+var reIsUint = /^(?:0|[1-9]\d*)$/;
+
+/** Used to identify `toStringTag` values of typed arrays. */
+var typedArrayTags = {};
+typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
+typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
+typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
+typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
+typedArrayTags[uint32Tag] = true;
+typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
+typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
+typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
+typedArrayTags[errorTag] = typedArrayTags[funcTag] =
+typedArrayTags[mapTag] = typedArrayTags[numberTag] =
+typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
+typedArrayTags[setTag] = typedArrayTags[stringTag] =
+typedArrayTags[weakMapTag] = false;
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/** Detect free variable `exports`. */
+var freeExports =  exports && !exports.nodeType && exports;
+
+/** Detect free variable `module`. */
+var freeModule = freeExports && 'object' == 'object' && module && !module.nodeType && module;
+
+/** Detect the popular CommonJS extension `module.exports`. */
+var moduleExports = freeModule && freeModule.exports === freeExports;
+
+/** Detect free variable `process` from Node.js. */
+var freeProcess = moduleExports && freeGlobal.process;
+
+/** Used to access faster Node.js helpers. */
+var nodeUtil = (function() {
+  try {
+    return freeProcess && freeProcess.binding && freeProcess.binding('util');
+  } catch (e) {}
+}());
+
+/* Node.js helper references. */
+var nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
+
+/**
+ * A specialized version of `_.filter` for arrays without support for
+ * iteratee shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} predicate The function invoked per iteration.
+ * @returns {Array} Returns the new filtered array.
+ */
+function arrayFilter(array, predicate) {
+  var index = -1,
+      length = array == null ? 0 : array.length,
+      resIndex = 0,
+      result = [];
+
+  while (++index < length) {
+    var value = array[index];
+    if (predicate(value, index, array)) {
+      result[resIndex++] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * Appends the elements of `values` to `array`.
+ *
+ * @private
+ * @param {Array} array The array to modify.
+ * @param {Array} values The values to append.
+ * @returns {Array} Returns `array`.
+ */
+function arrayPush(array, values) {
+  var index = -1,
+      length = values.length,
+      offset = array.length;
+
+  while (++index < length) {
+    array[offset + index] = values[index];
+  }
+  return array;
+}
+
+/**
+ * A specialized version of `_.some` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} predicate The function invoked per iteration.
+ * @returns {boolean} Returns `true` if any element passes the predicate check,
+ *  else `false`.
+ */
+function arraySome(array, predicate) {
+  var index = -1,
+      length = array == null ? 0 : array.length;
+
+  while (++index < length) {
+    if (predicate(array[index], index, array)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * The base implementation of `_.times` without support for iteratee shorthands
+ * or max array length checks.
+ *
+ * @private
+ * @param {number} n The number of times to invoke `iteratee`.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the array of results.
+ */
+function baseTimes(n, iteratee) {
+  var index = -1,
+      result = Array(n);
+
+  while (++index < n) {
+    result[index] = iteratee(index);
+  }
+  return result;
+}
+
+/**
+ * The base implementation of `_.unary` without support for storing metadata.
+ *
+ * @private
+ * @param {Function} func The function to cap arguments for.
+ * @returns {Function} Returns the new capped function.
+ */
+function baseUnary(func) {
+  return function(value) {
+    return func(value);
+  };
+}
+
+/**
+ * Checks if a `cache` value for `key` exists.
+ *
+ * @private
+ * @param {Object} cache The cache to query.
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function cacheHas(cache, key) {
+  return cache.has(key);
+}
+
+/**
+ * Gets the value at `key` of `object`.
+ *
+ * @private
+ * @param {Object} [object] The object to query.
+ * @param {string} key The key of the property to get.
+ * @returns {*} Returns the property value.
+ */
+function getValue(object, key) {
+  return object == null ? undefined : object[key];
+}
+
+/**
+ * Converts `map` to its key-value pairs.
+ *
+ * @private
+ * @param {Object} map The map to convert.
+ * @returns {Array} Returns the key-value pairs.
+ */
+function mapToArray(map) {
+  var index = -1,
+      result = Array(map.size);
+
+  map.forEach(function(value, key) {
+    result[++index] = [key, value];
+  });
+  return result;
+}
+
+/**
+ * Creates a unary function that invokes `func` with its argument transformed.
+ *
+ * @private
+ * @param {Function} func The function to wrap.
+ * @param {Function} transform The argument transform.
+ * @returns {Function} Returns the new function.
+ */
+function overArg(func, transform) {
+  return function(arg) {
+    return func(transform(arg));
+  };
+}
+
+/**
+ * Converts `set` to an array of its values.
+ *
+ * @private
+ * @param {Object} set The set to convert.
+ * @returns {Array} Returns the values.
+ */
+function setToArray(set) {
+  var index = -1,
+      result = Array(set.size);
+
+  set.forEach(function(value) {
+    result[++index] = value;
+  });
+  return result;
+}
+
+/** Used for built-in method references. */
+var arrayProto = Array.prototype,
+    funcProto = Function.prototype,
+    objectProto = Object.prototype;
+
+/** Used to detect overreaching core-js shims. */
+var coreJsData = root['__core-js_shared__'];
+
+/** Used to resolve the decompiled source of functions. */
+var funcToString = funcProto.toString;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/** Used to detect methods masquerading as native. */
+var maskSrcKey = (function() {
+  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
+  return uid ? ('Symbol(src)_1.' + uid) : '';
+}());
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/** Used to detect if a method is native. */
+var reIsNative = RegExp('^' +
+  funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
+  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
+);
+
+/** Built-in value references. */
+var Buffer = moduleExports ? root.Buffer : undefined,
+    Symbol = root.Symbol,
+    Uint8Array = root.Uint8Array,
+    propertyIsEnumerable = objectProto.propertyIsEnumerable,
+    splice = arrayProto.splice,
+    symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeGetSymbols = Object.getOwnPropertySymbols,
+    nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
+    nativeKeys = overArg(Object.keys, Object);
+
+/* Built-in method references that are verified to be native. */
+var DataView = getNative(root, 'DataView'),
+    Map = getNative(root, 'Map'),
+    Promise = getNative(root, 'Promise'),
+    Set = getNative(root, 'Set'),
+    WeakMap = getNative(root, 'WeakMap'),
+    nativeCreate = getNative(Object, 'create');
+
+/** Used to detect maps, sets, and weakmaps. */
+var dataViewCtorString = toSource(DataView),
+    mapCtorString = toSource(Map),
+    promiseCtorString = toSource(Promise),
+    setCtorString = toSource(Set),
+    weakMapCtorString = toSource(WeakMap);
+
+/** Used to convert symbols to primitives and strings. */
+var symbolProto = Symbol ? Symbol.prototype : undefined,
+    symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
+
+/**
+ * Creates a hash object.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function Hash(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+/**
+ * Removes all key-value entries from the hash.
+ *
+ * @private
+ * @name clear
+ * @memberOf Hash
+ */
+function hashClear() {
+  this.__data__ = nativeCreate ? nativeCreate(null) : {};
+  this.size = 0;
+}
+
+/**
+ * Removes `key` and its value from the hash.
+ *
+ * @private
+ * @name delete
+ * @memberOf Hash
+ * @param {Object} hash The hash to modify.
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function hashDelete(key) {
+  var result = this.has(key) && delete this.__data__[key];
+  this.size -= result ? 1 : 0;
+  return result;
+}
+
+/**
+ * Gets the hash value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf Hash
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function hashGet(key) {
+  var data = this.__data__;
+  if (nativeCreate) {
+    var result = data[key];
+    return result === HASH_UNDEFINED ? undefined : result;
+  }
+  return hasOwnProperty.call(data, key) ? data[key] : undefined;
+}
+
+/**
+ * Checks if a hash value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf Hash
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function hashHas(key) {
+  var data = this.__data__;
+  return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
+}
+
+/**
+ * Sets the hash `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf Hash
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the hash instance.
+ */
+function hashSet(key, value) {
+  var data = this.__data__;
+  this.size += this.has(key) ? 0 : 1;
+  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
+  return this;
+}
+
+// Add methods to `Hash`.
+Hash.prototype.clear = hashClear;
+Hash.prototype['delete'] = hashDelete;
+Hash.prototype.get = hashGet;
+Hash.prototype.has = hashHas;
+Hash.prototype.set = hashSet;
+
+/**
+ * Creates an list cache object.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function ListCache(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+/**
+ * Removes all key-value entries from the list cache.
+ *
+ * @private
+ * @name clear
+ * @memberOf ListCache
+ */
+function listCacheClear() {
+  this.__data__ = [];
+  this.size = 0;
+}
+
+/**
+ * Removes `key` and its value from the list cache.
+ *
+ * @private
+ * @name delete
+ * @memberOf ListCache
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function listCacheDelete(key) {
+  var data = this.__data__,
+      index = assocIndexOf(data, key);
+
+  if (index < 0) {
+    return false;
+  }
+  var lastIndex = data.length - 1;
+  if (index == lastIndex) {
+    data.pop();
+  } else {
+    splice.call(data, index, 1);
+  }
+  --this.size;
+  return true;
+}
+
+/**
+ * Gets the list cache value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf ListCache
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function listCacheGet(key) {
+  var data = this.__data__,
+      index = assocIndexOf(data, key);
+
+  return index < 0 ? undefined : data[index][1];
+}
+
+/**
+ * Checks if a list cache value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf ListCache
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function listCacheHas(key) {
+  return assocIndexOf(this.__data__, key) > -1;
+}
+
+/**
+ * Sets the list cache `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf ListCache
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the list cache instance.
+ */
+function listCacheSet(key, value) {
+  var data = this.__data__,
+      index = assocIndexOf(data, key);
+
+  if (index < 0) {
+    ++this.size;
+    data.push([key, value]);
+  } else {
+    data[index][1] = value;
+  }
+  return this;
+}
+
+// Add methods to `ListCache`.
+ListCache.prototype.clear = listCacheClear;
+ListCache.prototype['delete'] = listCacheDelete;
+ListCache.prototype.get = listCacheGet;
+ListCache.prototype.has = listCacheHas;
+ListCache.prototype.set = listCacheSet;
+
+/**
+ * Creates a map cache object to store key-value pairs.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function MapCache(entries) {
+  var index = -1,
+      length = entries == null ? 0 : entries.length;
+
+  this.clear();
+  while (++index < length) {
+    var entry = entries[index];
+    this.set(entry[0], entry[1]);
+  }
+}
+
+/**
+ * Removes all key-value entries from the map.
+ *
+ * @private
+ * @name clear
+ * @memberOf MapCache
+ */
+function mapCacheClear() {
+  this.size = 0;
+  this.__data__ = {
+    'hash': new Hash,
+    'map': new (Map || ListCache),
+    'string': new Hash
+  };
+}
+
+/**
+ * Removes `key` and its value from the map.
+ *
+ * @private
+ * @name delete
+ * @memberOf MapCache
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function mapCacheDelete(key) {
+  var result = getMapData(this, key)['delete'](key);
+  this.size -= result ? 1 : 0;
+  return result;
+}
+
+/**
+ * Gets the map value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf MapCache
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function mapCacheGet(key) {
+  return getMapData(this, key).get(key);
+}
+
+/**
+ * Checks if a map value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf MapCache
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function mapCacheHas(key) {
+  return getMapData(this, key).has(key);
+}
+
+/**
+ * Sets the map `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf MapCache
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the map cache instance.
+ */
+function mapCacheSet(key, value) {
+  var data = getMapData(this, key),
+      size = data.size;
+
+  data.set(key, value);
+  this.size += data.size == size ? 0 : 1;
+  return this;
+}
+
+// Add methods to `MapCache`.
+MapCache.prototype.clear = mapCacheClear;
+MapCache.prototype['delete'] = mapCacheDelete;
+MapCache.prototype.get = mapCacheGet;
+MapCache.prototype.has = mapCacheHas;
+MapCache.prototype.set = mapCacheSet;
+
+/**
+ *
+ * Creates an array cache object to store unique values.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [values] The values to cache.
+ */
+function SetCache(values) {
+  var index = -1,
+      length = values == null ? 0 : values.length;
+
+  this.__data__ = new MapCache;
+  while (++index < length) {
+    this.add(values[index]);
+  }
+}
+
+/**
+ * Adds `value` to the array cache.
+ *
+ * @private
+ * @name add
+ * @memberOf SetCache
+ * @alias push
+ * @param {*} value The value to cache.
+ * @returns {Object} Returns the cache instance.
+ */
+function setCacheAdd(value) {
+  this.__data__.set(value, HASH_UNDEFINED);
+  return this;
+}
+
+/**
+ * Checks if `value` is in the array cache.
+ *
+ * @private
+ * @name has
+ * @memberOf SetCache
+ * @param {*} value The value to search for.
+ * @returns {number} Returns `true` if `value` is found, else `false`.
+ */
+function setCacheHas(value) {
+  return this.__data__.has(value);
+}
+
+// Add methods to `SetCache`.
+SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
+SetCache.prototype.has = setCacheHas;
+
+/**
+ * Creates a stack cache object to store key-value pairs.
+ *
+ * @private
+ * @constructor
+ * @param {Array} [entries] The key-value pairs to cache.
+ */
+function Stack(entries) {
+  var data = this.__data__ = new ListCache(entries);
+  this.size = data.size;
+}
+
+/**
+ * Removes all key-value entries from the stack.
+ *
+ * @private
+ * @name clear
+ * @memberOf Stack
+ */
+function stackClear() {
+  this.__data__ = new ListCache;
+  this.size = 0;
+}
+
+/**
+ * Removes `key` and its value from the stack.
+ *
+ * @private
+ * @name delete
+ * @memberOf Stack
+ * @param {string} key The key of the value to remove.
+ * @returns {boolean} Returns `true` if the entry was removed, else `false`.
+ */
+function stackDelete(key) {
+  var data = this.__data__,
+      result = data['delete'](key);
+
+  this.size = data.size;
+  return result;
+}
+
+/**
+ * Gets the stack value for `key`.
+ *
+ * @private
+ * @name get
+ * @memberOf Stack
+ * @param {string} key The key of the value to get.
+ * @returns {*} Returns the entry value.
+ */
+function stackGet(key) {
+  return this.__data__.get(key);
+}
+
+/**
+ * Checks if a stack value for `key` exists.
+ *
+ * @private
+ * @name has
+ * @memberOf Stack
+ * @param {string} key The key of the entry to check.
+ * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
+ */
+function stackHas(key) {
+  return this.__data__.has(key);
+}
+
+/**
+ * Sets the stack `key` to `value`.
+ *
+ * @private
+ * @name set
+ * @memberOf Stack
+ * @param {string} key The key of the value to set.
+ * @param {*} value The value to set.
+ * @returns {Object} Returns the stack cache instance.
+ */
+function stackSet(key, value) {
+  var data = this.__data__;
+  if (data instanceof ListCache) {
+    var pairs = data.__data__;
+    if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
+      pairs.push([key, value]);
+      this.size = ++data.size;
+      return this;
+    }
+    data = this.__data__ = new MapCache(pairs);
+  }
+  data.set(key, value);
+  this.size = data.size;
+  return this;
+}
+
+// Add methods to `Stack`.
+Stack.prototype.clear = stackClear;
+Stack.prototype['delete'] = stackDelete;
+Stack.prototype.get = stackGet;
+Stack.prototype.has = stackHas;
+Stack.prototype.set = stackSet;
+
+/**
+ * Creates an array of the enumerable property names of the array-like `value`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @param {boolean} inherited Specify returning inherited property names.
+ * @returns {Array} Returns the array of property names.
+ */
+function arrayLikeKeys(value, inherited) {
+  var isArr = isArray(value),
+      isArg = !isArr && isArguments(value),
+      isBuff = !isArr && !isArg && isBuffer(value),
+      isType = !isArr && !isArg && !isBuff && isTypedArray(value),
+      skipIndexes = isArr || isArg || isBuff || isType,
+      result = skipIndexes ? baseTimes(value.length, String) : [],
+      length = result.length;
+
+  for (var key in value) {
+    if ((inherited || hasOwnProperty.call(value, key)) &&
+        !(skipIndexes && (
+           // Safari 9 has enumerable `arguments.length` in strict mode.
+           key == 'length' ||
+           // Node.js 0.10 has enumerable non-index properties on buffers.
+           (isBuff && (key == 'offset' || key == 'parent')) ||
+           // PhantomJS 2 has enumerable non-index properties on typed arrays.
+           (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
+           // Skip index properties.
+           isIndex(key, length)
+        ))) {
+      result.push(key);
+    }
+  }
+  return result;
+}
+
+/**
+ * Gets the index at which the `key` is found in `array` of key-value pairs.
+ *
+ * @private
+ * @param {Array} array The array to inspect.
+ * @param {*} key The key to search for.
+ * @returns {number} Returns the index of the matched value, else `-1`.
+ */
+function assocIndexOf(array, key) {
+  var length = array.length;
+  while (length--) {
+    if (eq(array[length][0], key)) {
+      return length;
+    }
+  }
+  return -1;
+}
+
+/**
+ * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
+ * `keysFunc` and `symbolsFunc` to get the enumerable property names and
+ * symbols of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Function} keysFunc The function to get the keys of `object`.
+ * @param {Function} symbolsFunc The function to get the symbols of `object`.
+ * @returns {Array} Returns the array of property names and symbols.
+ */
+function baseGetAllKeys(object, keysFunc, symbolsFunc) {
+  var result = keysFunc(object);
+  return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
+}
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+/**
+ * The base implementation of `_.isArguments`.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ */
+function baseIsArguments(value) {
+  return isObjectLike(value) && baseGetTag(value) == argsTag;
+}
+
+/**
+ * The base implementation of `_.isEqual` which supports partial comparisons
+ * and tracks traversed objects.
+ *
+ * @private
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @param {boolean} bitmask The bitmask flags.
+ *  1 - Unordered comparison
+ *  2 - Partial comparison
+ * @param {Function} [customizer] The function to customize comparisons.
+ * @param {Object} [stack] Tracks traversed `value` and `other` objects.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ */
+function baseIsEqual(value, other, bitmask, customizer, stack) {
+  if (value === other) {
+    return true;
+  }
+  if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
+    return value !== value && other !== other;
+  }
+  return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
+}
+
+/**
+ * A specialized version of `baseIsEqual` for arrays and objects which performs
+ * deep comparisons and tracks traversed objects enabling objects with circular
+ * references to be compared.
+ *
+ * @private
+ * @param {Object} object The object to compare.
+ * @param {Object} other The other object to compare.
+ * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+ * @param {Function} customizer The function to customize comparisons.
+ * @param {Function} equalFunc The function to determine equivalents of values.
+ * @param {Object} [stack] Tracks traversed `object` and `other` objects.
+ * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+ */
+function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
+  var objIsArr = isArray(object),
+      othIsArr = isArray(other),
+      objTag = objIsArr ? arrayTag : getTag(object),
+      othTag = othIsArr ? arrayTag : getTag(other);
+
+  objTag = objTag == argsTag ? objectTag : objTag;
+  othTag = othTag == argsTag ? objectTag : othTag;
+
+  var objIsObj = objTag == objectTag,
+      othIsObj = othTag == objectTag,
+      isSameTag = objTag == othTag;
+
+  if (isSameTag && isBuffer(object)) {
+    if (!isBuffer(other)) {
+      return false;
+    }
+    objIsArr = true;
+    objIsObj = false;
+  }
+  if (isSameTag && !objIsObj) {
+    stack || (stack = new Stack);
+    return (objIsArr || isTypedArray(object))
+      ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
+      : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
+  }
+  if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
+    var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
+        othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
+
+    if (objIsWrapped || othIsWrapped) {
+      var objUnwrapped = objIsWrapped ? object.value() : object,
+          othUnwrapped = othIsWrapped ? other.value() : other;
+
+      stack || (stack = new Stack);
+      return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
+    }
+  }
+  if (!isSameTag) {
+    return false;
+  }
+  stack || (stack = new Stack);
+  return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
+}
+
+/**
+ * The base implementation of `_.isNative` without bad shim checks.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a native function,
+ *  else `false`.
+ */
+function baseIsNative(value) {
+  if (!isObject(value) || isMasked(value)) {
+    return false;
+  }
+  var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
+  return pattern.test(toSource(value));
+}
+
+/**
+ * The base implementation of `_.isTypedArray` without Node.js optimizations.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+ */
+function baseIsTypedArray(value) {
+  return isObjectLike(value) &&
+    isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
+}
+
+/**
+ * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ */
+function baseKeys(object) {
+  if (!isPrototype(object)) {
+    return nativeKeys(object);
+  }
+  var result = [];
+  for (var key in Object(object)) {
+    if (hasOwnProperty.call(object, key) && key != 'constructor') {
+      result.push(key);
+    }
+  }
+  return result;
+}
+
+/**
+ * A specialized version of `baseIsEqualDeep` for arrays with support for
+ * partial deep comparisons.
+ *
+ * @private
+ * @param {Array} array The array to compare.
+ * @param {Array} other The other array to compare.
+ * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+ * @param {Function} customizer The function to customize comparisons.
+ * @param {Function} equalFunc The function to determine equivalents of values.
+ * @param {Object} stack Tracks traversed `array` and `other` objects.
+ * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
+ */
+function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
+  var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
+      arrLength = array.length,
+      othLength = other.length;
+
+  if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
+    return false;
+  }
+  // Assume cyclic values are equal.
+  var stacked = stack.get(array);
+  if (stacked && stack.get(other)) {
+    return stacked == other;
+  }
+  var index = -1,
+      result = true,
+      seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;
+
+  stack.set(array, other);
+  stack.set(other, array);
+
+  // Ignore non-index properties.
+  while (++index < arrLength) {
+    var arrValue = array[index],
+        othValue = other[index];
+
+    if (customizer) {
+      var compared = isPartial
+        ? customizer(othValue, arrValue, index, other, array, stack)
+        : customizer(arrValue, othValue, index, array, other, stack);
+    }
+    if (compared !== undefined) {
+      if (compared) {
+        continue;
+      }
+      result = false;
+      break;
+    }
+    // Recursively compare arrays (susceptible to call stack limits).
+    if (seen) {
+      if (!arraySome(other, function(othValue, othIndex) {
+            if (!cacheHas(seen, othIndex) &&
+                (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
+              return seen.push(othIndex);
+            }
+          })) {
+        result = false;
+        break;
+      }
+    } else if (!(
+          arrValue === othValue ||
+            equalFunc(arrValue, othValue, bitmask, customizer, stack)
+        )) {
+      result = false;
+      break;
+    }
+  }
+  stack['delete'](array);
+  stack['delete'](other);
+  return result;
+}
+
+/**
+ * A specialized version of `baseIsEqualDeep` for comparing objects of
+ * the same `toStringTag`.
+ *
+ * **Note:** This function only supports comparing values with tags of
+ * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
+ *
+ * @private
+ * @param {Object} object The object to compare.
+ * @param {Object} other The other object to compare.
+ * @param {string} tag The `toStringTag` of the objects to compare.
+ * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+ * @param {Function} customizer The function to customize comparisons.
+ * @param {Function} equalFunc The function to determine equivalents of values.
+ * @param {Object} stack Tracks traversed `object` and `other` objects.
+ * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+ */
+function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
+  switch (tag) {
+    case dataViewTag:
+      if ((object.byteLength != other.byteLength) ||
+          (object.byteOffset != other.byteOffset)) {
+        return false;
+      }
+      object = object.buffer;
+      other = other.buffer;
+
+    case arrayBufferTag:
+      if ((object.byteLength != other.byteLength) ||
+          !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
+        return false;
+      }
+      return true;
+
+    case boolTag:
+    case dateTag:
+    case numberTag:
+      // Coerce booleans to `1` or `0` and dates to milliseconds.
+      // Invalid dates are coerced to `NaN`.
+      return eq(+object, +other);
+
+    case errorTag:
+      return object.name == other.name && object.message == other.message;
+
+    case regexpTag:
+    case stringTag:
+      // Coerce regexes to strings and treat strings, primitives and objects,
+      // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
+      // for more details.
+      return object == (other + '');
+
+    case mapTag:
+      var convert = mapToArray;
+
+    case setTag:
+      var isPartial = bitmask & COMPARE_PARTIAL_FLAG;
+      convert || (convert = setToArray);
+
+      if (object.size != other.size && !isPartial) {
+        return false;
+      }
+      // Assume cyclic values are equal.
+      var stacked = stack.get(object);
+      if (stacked) {
+        return stacked == other;
+      }
+      bitmask |= COMPARE_UNORDERED_FLAG;
+
+      // Recursively compare objects (susceptible to call stack limits).
+      stack.set(object, other);
+      var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
+      stack['delete'](object);
+      return result;
+
+    case symbolTag:
+      if (symbolValueOf) {
+        return symbolValueOf.call(object) == symbolValueOf.call(other);
+      }
+  }
+  return false;
+}
+
+/**
+ * A specialized version of `baseIsEqualDeep` for objects with support for
+ * partial deep comparisons.
+ *
+ * @private
+ * @param {Object} object The object to compare.
+ * @param {Object} other The other object to compare.
+ * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
+ * @param {Function} customizer The function to customize comparisons.
+ * @param {Function} equalFunc The function to determine equivalents of values.
+ * @param {Object} stack Tracks traversed `object` and `other` objects.
+ * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
+ */
+function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
+  var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
+      objProps = getAllKeys(object),
+      objLength = objProps.length,
+      othProps = getAllKeys(other),
+      othLength = othProps.length;
+
+  if (objLength != othLength && !isPartial) {
+    return false;
+  }
+  var index = objLength;
+  while (index--) {
+    var key = objProps[index];
+    if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
+      return false;
+    }
+  }
+  // Assume cyclic values are equal.
+  var stacked = stack.get(object);
+  if (stacked && stack.get(other)) {
+    return stacked == other;
+  }
+  var result = true;
+  stack.set(object, other);
+  stack.set(other, object);
+
+  var skipCtor = isPartial;
+  while (++index < objLength) {
+    key = objProps[index];
+    var objValue = object[key],
+        othValue = other[key];
+
+    if (customizer) {
+      var compared = isPartial
+        ? customizer(othValue, objValue, key, other, object, stack)
+        : customizer(objValue, othValue, key, object, other, stack);
+    }
+    // Recursively compare objects (susceptible to call stack limits).
+    if (!(compared === undefined
+          ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))
+          : compared
+        )) {
+      result = false;
+      break;
+    }
+    skipCtor || (skipCtor = key == 'constructor');
+  }
+  if (result && !skipCtor) {
+    var objCtor = object.constructor,
+        othCtor = other.constructor;
+
+    // Non `Object` object instances with different constructors are not equal.
+    if (objCtor != othCtor &&
+        ('constructor' in object && 'constructor' in other) &&
+        !(typeof objCtor == 'function' && objCtor instanceof objCtor &&
+          typeof othCtor == 'function' && othCtor instanceof othCtor)) {
+      result = false;
+    }
+  }
+  stack['delete'](object);
+  stack['delete'](other);
+  return result;
+}
+
+/**
+ * Creates an array of own enumerable property names and symbols of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names and symbols.
+ */
+function getAllKeys(object) {
+  return baseGetAllKeys(object, keys, getSymbols);
+}
+
+/**
+ * Gets the data for `map`.
+ *
+ * @private
+ * @param {Object} map The map to query.
+ * @param {string} key The reference key.
+ * @returns {*} Returns the map data.
+ */
+function getMapData(map, key) {
+  var data = map.__data__;
+  return isKeyable(key)
+    ? data[typeof key == 'string' ? 'string' : 'hash']
+    : data.map;
+}
+
+/**
+ * Gets the native function at `key` of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {string} key The key of the method to get.
+ * @returns {*} Returns the function if it's native, else `undefined`.
+ */
+function getNative(object, key) {
+  var value = getValue(object, key);
+  return baseIsNative(value) ? value : undefined;
+}
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag),
+      tag = value[symToStringTag];
+
+  try {
+    value[symToStringTag] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag] = tag;
+    } else {
+      delete value[symToStringTag];
+    }
+  }
+  return result;
+}
+
+/**
+ * Creates an array of the own enumerable symbols of `object`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of symbols.
+ */
+var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
+  if (object == null) {
+    return [];
+  }
+  object = Object(object);
+  return arrayFilter(nativeGetSymbols(object), function(symbol) {
+    return propertyIsEnumerable.call(object, symbol);
+  });
+};
+
+/**
+ * Gets the `toStringTag` of `value`.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+var getTag = baseGetTag;
+
+// Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
+if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
+    (Map && getTag(new Map) != mapTag) ||
+    (Promise && getTag(Promise.resolve()) != promiseTag) ||
+    (Set && getTag(new Set) != setTag) ||
+    (WeakMap && getTag(new WeakMap) != weakMapTag)) {
+  getTag = function(value) {
+    var result = baseGetTag(value),
+        Ctor = result == objectTag ? value.constructor : undefined,
+        ctorString = Ctor ? toSource(Ctor) : '';
+
+    if (ctorString) {
+      switch (ctorString) {
+        case dataViewCtorString: return dataViewTag;
+        case mapCtorString: return mapTag;
+        case promiseCtorString: return promiseTag;
+        case setCtorString: return setTag;
+        case weakMapCtorString: return weakMapTag;
+      }
+    }
+    return result;
+  };
+}
+
+/**
+ * Checks if `value` is a valid array-like index.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
+ * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
+ */
+function isIndex(value, length) {
+  length = length == null ? MAX_SAFE_INTEGER : length;
+  return !!length &&
+    (typeof value == 'number' || reIsUint.test(value)) &&
+    (value > -1 && value % 1 == 0 && value < length);
+}
+
+/**
+ * Checks if `value` is suitable for use as unique object key.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
+ */
+function isKeyable(value) {
+  var type = typeof value;
+  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
+    ? (value !== '__proto__')
+    : (value === null);
+}
+
+/**
+ * Checks if `func` has its source masked.
+ *
+ * @private
+ * @param {Function} func The function to check.
+ * @returns {boolean} Returns `true` if `func` is masked, else `false`.
+ */
+function isMasked(func) {
+  return !!maskSrcKey && (maskSrcKey in func);
+}
+
+/**
+ * Checks if `value` is likely a prototype object.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
+ */
+function isPrototype(value) {
+  var Ctor = value && value.constructor,
+      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
+
+  return value === proto;
+}
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString(value) {
+  return nativeObjectToString.call(value);
+}
+
+/**
+ * Converts `func` to its source code.
+ *
+ * @private
+ * @param {Function} func The function to convert.
+ * @returns {string} Returns the source code.
+ */
+function toSource(func) {
+  if (func != null) {
+    try {
+      return funcToString.call(func);
+    } catch (e) {}
+    try {
+      return (func + '');
+    } catch (e) {}
+  }
+  return '';
+}
+
+/**
+ * Performs a
+ * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
+ * comparison between two values to determine if they are equivalent.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.eq(object, object);
+ * // => true
+ *
+ * _.eq(object, other);
+ * // => false
+ *
+ * _.eq('a', 'a');
+ * // => true
+ *
+ * _.eq('a', Object('a'));
+ * // => false
+ *
+ * _.eq(NaN, NaN);
+ * // => true
+ */
+function eq(value, other) {
+  return value === other || (value !== value && other !== other);
+}
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
+  return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
+    !propertyIsEnumerable.call(value, 'callee');
+};
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike(value) {
+  return value != null && isLength(value.length) && !isFunction(value);
+}
+
+/**
+ * Checks if `value` is a buffer.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.3.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
+ * @example
+ *
+ * _.isBuffer(new Buffer(2));
+ * // => true
+ *
+ * _.isBuffer(new Uint8Array(2));
+ * // => false
+ */
+var isBuffer = nativeIsBuffer || stubFalse;
+
+/**
+ * Performs a deep comparison between two values to determine if they are
+ * equivalent.
+ *
+ * **Note:** This method supports comparing arrays, array buffers, booleans,
+ * date objects, error objects, maps, numbers, `Object` objects, regexes,
+ * sets, strings, symbols, and typed arrays. `Object` objects are compared
+ * by their own, not inherited, enumerable properties. Functions and DOM
+ * nodes are compared by strict equality, i.e. `===`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to compare.
+ * @param {*} other The other value to compare.
+ * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
+ * @example
+ *
+ * var object = { 'a': 1 };
+ * var other = { 'a': 1 };
+ *
+ * _.isEqual(object, other);
+ * // => true
+ *
+ * object === other;
+ * // => false
+ */
+function isEqual(value, other) {
+  return baseIsEqual(value, other);
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = baseGetTag(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength(value) {
+  return typeof value == 'number' &&
+    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return value != null && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a typed array.
+ *
+ * @static
+ * @memberOf _
+ * @since 3.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
+ * @example
+ *
+ * _.isTypedArray(new Uint8Array);
+ * // => true
+ *
+ * _.isTypedArray([]);
+ * // => false
+ */
+var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
+
+/**
+ * Creates an array of the own enumerable property names of `object`.
+ *
+ * **Note:** Non-object values are coerced to objects. See the
+ * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
+ * for more details.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the array of property names.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.keys(new Foo);
+ * // => ['a', 'b'] (iteration order is not guaranteed)
+ *
+ * _.keys('hi');
+ * // => ['0', '1']
+ */
+function keys(object) {
+  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
+}
+
+/**
+ * This method returns a new empty array.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.13.0
+ * @category Util
+ * @returns {Array} Returns the new empty array.
+ * @example
+ *
+ * var arrays = _.times(2, _.stubArray);
+ *
+ * console.log(arrays);
+ * // => [[], []]
+ *
+ * console.log(arrays[0] === arrays[1]);
+ * // => false
+ */
+function stubArray() {
+  return [];
+}
+
+/**
+ * This method returns `false`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.13.0
+ * @category Util
+ * @returns {boolean} Returns `false`.
+ * @example
+ *
+ * _.times(2, _.stubFalse);
+ * // => [false, false]
+ */
+function stubFalse() {
+  return false;
+}
+
+module.exports = isEqual;
+});
+
+/**
+ * lodash (Custom Build) <https://lodash.com/>
+ * Build: `lodash modularize exports="npm" -o ./`
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** Used as references for various `Number` constants. */
+var INFINITY = 1 / 0,
+    MAX_SAFE_INTEGER = 9007199254740991;
+
+/** `Object#toString` result references. */
+var argsTag = '[object Arguments]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    symbolTag = '[object Symbol]';
+
+/** Detect free variable `global` from Node.js. */
+var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root = freeGlobal || freeSelf || Function('return this')();
+
+/**
+ * A faster alternative to `Function#apply`, this function invokes `func`
+ * with the `this` binding of `thisArg` and the arguments of `args`.
+ *
+ * @private
+ * @param {Function} func The function to invoke.
+ * @param {*} thisArg The `this` binding of `func`.
+ * @param {Array} args The arguments to invoke `func` with.
+ * @returns {*} Returns the result of `func`.
+ */
+function apply(func, thisArg, args) {
+  switch (args.length) {
+    case 0: return func.call(thisArg);
+    case 1: return func.call(thisArg, args[0]);
+    case 2: return func.call(thisArg, args[0], args[1]);
+    case 3: return func.call(thisArg, args[0], args[1], args[2]);
+  }
+  return func.apply(thisArg, args);
+}
+
+/**
+ * A specialized version of `_.map` for arrays without support for iteratee
+ * shorthands.
+ *
+ * @private
+ * @param {Array} [array] The array to iterate over.
+ * @param {Function} iteratee The function invoked per iteration.
+ * @returns {Array} Returns the new mapped array.
+ */
+function arrayMap(array, iteratee) {
+  var index = -1,
+      length = array ? array.length : 0,
+      result = Array(length);
+
+  while (++index < length) {
+    result[index] = iteratee(array[index], index, array);
+  }
+  return result;
+}
+
+/**
+ * Appends the elements of `values` to `array`.
+ *
+ * @private
+ * @param {Array} array The array to modify.
+ * @param {Array} values The values to append.
+ * @returns {Array} Returns `array`.
+ */
+function arrayPush(array, values) {
+  var index = -1,
+      length = values.length,
+      offset = array.length;
+
+  while (++index < length) {
+    array[offset + index] = values[index];
+  }
+  return array;
+}
+
+/** Used for built-in method references. */
+var objectProto = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var objectToString = objectProto.toString;
+
+/** Built-in value references. */
+var Symbol = root.Symbol,
+    propertyIsEnumerable = objectProto.propertyIsEnumerable,
+    spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max;
+
+/**
+ * The base implementation of `_.flatten` with support for restricting flattening.
+ *
+ * @private
+ * @param {Array} array The array to flatten.
+ * @param {number} depth The maximum recursion depth.
+ * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
+ * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
+ * @param {Array} [result=[]] The initial result value.
+ * @returns {Array} Returns the new flattened array.
+ */
+function baseFlatten(array, depth, predicate, isStrict, result) {
+  var index = -1,
+      length = array.length;
+
+  predicate || (predicate = isFlattenable);
+  result || (result = []);
+
+  while (++index < length) {
+    var value = array[index];
+    if (depth > 0 && predicate(value)) {
+      if (depth > 1) {
+        // Recursively flatten arrays (susceptible to call stack limits).
+        baseFlatten(value, depth - 1, predicate, isStrict, result);
+      } else {
+        arrayPush(result, value);
+      }
+    } else if (!isStrict) {
+      result[result.length] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * The base implementation of `_.pick` without support for individual
+ * property identifiers.
+ *
+ * @private
+ * @param {Object} object The source object.
+ * @param {string[]} props The property identifiers to pick.
+ * @returns {Object} Returns the new object.
+ */
+function basePick(object, props) {
+  object = Object(object);
+  return basePickBy(object, props, function(value, key) {
+    return key in object;
+  });
+}
+
+/**
+ * The base implementation of  `_.pickBy` without support for iteratee shorthands.
+ *
+ * @private
+ * @param {Object} object The source object.
+ * @param {string[]} props The property identifiers to pick from.
+ * @param {Function} predicate The function invoked per property.
+ * @returns {Object} Returns the new object.
+ */
+function basePickBy(object, props, predicate) {
+  var index = -1,
+      length = props.length,
+      result = {};
+
+  while (++index < length) {
+    var key = props[index],
+        value = object[key];
+
+    if (predicate(value, key)) {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
+/**
+ * The base implementation of `_.rest` which doesn't validate or coerce arguments.
+ *
+ * @private
+ * @param {Function} func The function to apply a rest parameter to.
+ * @param {number} [start=func.length-1] The start position of the rest parameter.
+ * @returns {Function} Returns the new function.
+ */
+function baseRest(func, start) {
+  start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
+  return function() {
+    var args = arguments,
+        index = -1,
+        length = nativeMax(args.length - start, 0),
+        array = Array(length);
+
+    while (++index < length) {
+      array[index] = args[start + index];
+    }
+    index = -1;
+    var otherArgs = Array(start + 1);
+    while (++index < start) {
+      otherArgs[index] = args[index];
+    }
+    otherArgs[start] = array;
+    return apply(func, this, otherArgs);
+  };
+}
+
+/**
+ * Checks if `value` is a flattenable `arguments` object or array.
+ *
+ * @private
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
+ */
+function isFlattenable(value) {
+  return isArray(value) || isArguments(value) ||
+    !!(spreadableSymbol && value && value[spreadableSymbol]);
+}
+
+/**
+ * Converts `value` to a string key if it's not a string or symbol.
+ *
+ * @private
+ * @param {*} value The value to inspect.
+ * @returns {string|symbol} Returns the key.
+ */
+function toKey(value) {
+  if (typeof value == 'string' || isSymbol(value)) {
+    return value;
+  }
+  var result = (value + '');
+  return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
+}
+
+/**
+ * Checks if `value` is likely an `arguments` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an `arguments` object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArguments(function() { return arguments; }());
+ * // => true
+ *
+ * _.isArguments([1, 2, 3]);
+ * // => false
+ */
+function isArguments(value) {
+  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
+  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
+    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
+}
+
+/**
+ * Checks if `value` is classified as an `Array` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+ * @example
+ *
+ * _.isArray([1, 2, 3]);
+ * // => true
+ *
+ * _.isArray(document.body.children);
+ * // => false
+ *
+ * _.isArray('abc');
+ * // => false
+ *
+ * _.isArray(_.noop);
+ * // => false
+ */
+var isArray = Array.isArray;
+
+/**
+ * Checks if `value` is array-like. A value is considered array-like if it's
+ * not a function and has a `value.length` that's an integer greater than or
+ * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
+ * @example
+ *
+ * _.isArrayLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLike(document.body.children);
+ * // => true
+ *
+ * _.isArrayLike('abc');
+ * // => true
+ *
+ * _.isArrayLike(_.noop);
+ * // => false
+ */
+function isArrayLike(value) {
+  return value != null && isLength(value.length) && !isFunction(value);
+}
+
+/**
+ * This method is like `_.isArrayLike` except that it also checks if `value`
+ * is an object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an array-like object,
+ *  else `false`.
+ * @example
+ *
+ * _.isArrayLikeObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isArrayLikeObject(document.body.children);
+ * // => true
+ *
+ * _.isArrayLikeObject('abc');
+ * // => false
+ *
+ * _.isArrayLikeObject(_.noop);
+ * // => false
+ */
+function isArrayLikeObject(value) {
+  return isObjectLike(value) && isArrayLike(value);
+}
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 8-9 which returns 'object' for typed array and other constructors.
+  var tag = isObject(value) ? objectToString.call(value) : '';
+  return tag == funcTag || tag == genTag;
+}
+
+/**
+ * Checks if `value` is a valid array-like length.
+ *
+ * **Note:** This method is loosely based on
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
+ * @example
+ *
+ * _.isLength(3);
+ * // => true
+ *
+ * _.isLength(Number.MIN_VALUE);
+ * // => false
+ *
+ * _.isLength(Infinity);
+ * // => false
+ *
+ * _.isLength('3');
+ * // => false
+ */
+function isLength(value) {
+  return typeof value == 'number' &&
+    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
+}
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+function isObject(value) {
+  var type = typeof value;
+  return !!value && (type == 'object' || type == 'function');
+}
+
+/**
+ * Checks if `value` is object-like. A value is object-like if it's not `null`
+ * and has a `typeof` result of "object".
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+ * @example
+ *
+ * _.isObjectLike({});
+ * // => true
+ *
+ * _.isObjectLike([1, 2, 3]);
+ * // => true
+ *
+ * _.isObjectLike(_.noop);
+ * // => false
+ *
+ * _.isObjectLike(null);
+ * // => false
+ */
+function isObjectLike(value) {
+  return !!value && typeof value == 'object';
+}
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && objectToString.call(value) == symbolTag);
+}
+
+/**
+ * Creates an object composed of the picked `object` properties.
+ *
+ * @static
+ * @since 0.1.0
+ * @memberOf _
+ * @category Object
+ * @param {Object} object The source object.
+ * @param {...(string|string[])} [props] The property identifiers to pick.
+ * @returns {Object} Returns the new object.
+ * @example
+ *
+ * var object = { 'a': 1, 'b': '2', 'c': 3 };
+ *
+ * _.pick(object, ['a', 'c']);
+ * // => { 'a': 1, 'c': 3 }
+ */
+var pick = baseRest(function(object, props) {
+  return object == null ? {} : basePick(object, arrayMap(baseFlatten(props, 1), toKey));
+});
+
+var lodash_pick = pick;
+
+function useFetchZones(params) {
+    const [fetchZones, resource] = useResource({
+        fetchResource: getZones,
+        initialValue: [],
+        context: params.context,
+        resourceName: 'Banner zones',
+    });
+    onMounted(() => {
+        fetchZones();
+    });
+    return resource;
+}
+
+var Status;
+(function (Status) {
+    Status["Waiting"] = "WAITING";
+    Status["Archived"] = "ARCHIVED";
+    Status["Active"] = "ACTIVE";
+    Status["Disabled"] = "DISABLED";
+})(Status || (Status = {}));
+
+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$1(t) {
+    return [
+        {
+            id: 0,
+            name: '#',
+            field: 'id',
+            style: { width: '50px', textAlign: 'center' },
+            headStyle: { width: '50px', textAlign: 'center' },
         },
-        pageTitle() {
-            return this.bannerArea ? `"${this.bannerArea.label}" banners` : 'Banners';
+        {
+            id: 1,
+            name: t('banners:zone'),
+            field: 'bannerZone',
+            format: ({ row }) => row.bannerZone ? row.bannerZone : t('banners:bannerZoneIsDeleted'),
         },
-    },
-    watch: {
-        areaAlias() {
-            this.refreshBannerItemList();
+        {
+            id: 2,
+            name: t('banners:status'),
+            field: 'status',
+            format: ({ row }) => getStatus(row.status, t),
+            style: { width: '120px' },
+            headStyle: { width: '120px' },
         },
-    },
-    mounted() {
-        this.refreshBannerItemList();
-    },
-    methods: {
-        refreshBannerItemList() {
-            this.isRowDataLoading = true;
-            return getBannerAreaByAlias(this.areaAlias)
-                .then((response) => {
-                this.bannerArea = response.data;
-                return getBannerItemList(this.bannerArea.id);
-            })
-                .then((response) => {
-                this.rowData = response.data;
-                this.errorMessage = null;
-            })
-                .catch((error) => {
-                console.error(error);
-                this.rowData = [];
-                this.errorMessage = getMessageFromError(error);
-            })
-                .finally(() => {
-                this.isRowDataLoading = false;
-            });
+        {
+            id: 3,
+            name: t('banners:period'),
+            field: 'dateStart',
+            format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
         },
-        moveBannerItem(bannerItemId, direction) {
-            this.isBannerItemMoving = true;
-            moveBannerItem(bannerItemId, direction)
-                .then((response) => {
-                if (response.success) {
-                    return this.refreshBannerItemList();
-                }
-            })
-                .catch(console.error)
-                .finally(() => {
-                this.isBannerItemMoving = false;
-            });
+        {
+            id: 4,
+            name: t('banners:image'),
+            field: 'image',
+            type: 'image',
         },
-        handleBannerItemDelete(bannerItem) {
-            const shouldDeleteBannerItem = confirm(`Are you sure you want to delete banner item "${bannerItem.title}"`);
-            if (shouldDeleteBannerItem) {
-                this.deletingBannerItemIdList.push(bannerItem.id);
-                deleteBannerItem(bannerItem.id)
-                    .then((response) => {
-                    if (response.success) {
-                        this.refreshBannerItemList().then(() => {
-                            this.deletingBannerItemIdList.filter((id) => id !== bannerItem.id);
-                        });
-                        this.$toast({
-                            variant: 'success',
-                            title: 'Success',
-                            body: 'Banner Item was successfully removed',
-                        });
-                    }
-                    else {
-                        this.$toast({
-                            variant: 'danger',
-                            title: 'Error',
-                            body: 'Banner Item deletion was failed',
-                        });
-                    }
-                })
-                    .catch((error) => {
-                    console.error(error);
-                    this.$toast({
-                        variant: 'danger',
-                        title: 'Error',
-                        body: 'Banner Item deletion was failed',
-                    });
+        {
+            id: 5,
+            name: t('banners:link'),
+            field: 'link',
+            type: 'name',
+            format: ({ row }) => {
+                var _a, _b;
+                return ({
+                    adminLink: {
+                        url: (_a = row.link) !== null && _a !== void 0 ? _a : '',
+                        text: (_b = row.link) !== null && _b !== void 0 ? _b : '',
+                    },
+                    paramList: [
+                        {
+                            name: t('banners:newTab'),
+                            value: row.openNewTab ? t('banners:yes') : t('banners:no'),
+                        },
+                    ],
                 });
-            }
+            },
         },
-        getLinkToBannerItemForm(bannerItemId) {
-            var _a, _b;
-            return getBannerItemFormUrl({
-                areaAlias: (_b = (_a = this.bannerArea) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : 'unknowm',
-                itemId: bannerItemId,
-            });
+        {
+            id: 6,
+            name: t('banners:comment'),
+            field: 'comment',
+        },
+        {
+            id: 7,
+            name: t('banners:actions'),
+            field: 'actions',
+            style: { whiteSpace: 'nowrap', width: '100px' },
+            headStyle: { whiteSpace: 'nowrap', width: '100px' },
         },
+    ];
+}
+
+var FilterTypes;
+(function (FilterTypes) {
+    FilterTypes["Zone"] = "zone";
+    FilterTypes["Date"] = "date";
+    FilterTypes["Status"] = "status";
+})(FilterTypes || (FilterTypes = {}));
+function useAdvancedSearch({ context, t, zoneList }) {
+    /** Zone **/
+    const zonesOptionList = computed(() => zoneList.value.map(({ id, name }) => ({
+        value: id,
+        label: name,
+    })));
+    const initialZoneFilter = computed(() => {
+        const queryValue = getFilterParamAsStringArray(context.root.$route.query, FilterTypes.Zone);
+        return zonesOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+    });
+    const zoneFilter = ref(initialZoneFilter.value);
+    watch(initialZoneFilter, () => {
+        zoneFilter.value = initialZoneFilter.value;
+    });
+    /** Date **/
+    const initialDateFilter = computed(() => { var _a; return (_a = getFilterParamAsString(context.root.$route.query, FilterTypes.Date)) !== null && _a !== void 0 ? _a : ''; });
+    const dateFilter = ref(initialDateFilter.value);
+    watch(initialDateFilter, () => {
+        dateFilter.value = initialDateFilter.value;
+    });
+    /** Status **/
+    const statusesOptionList = computed(() => Object.entries(Status).map(([_, value]) => ({
+        value: value,
+        label: getStatus(value, t),
+    })));
+    const initialStatusFilter = computed(() => {
+        const queryValue = getFilterParamAsStringArray(context.root.$route.query, FilterTypes.Status);
+        return statusesOptionList.value.filter(({ value }) => queryValue.some((selected) => selected === value));
+    });
+    const statusFilter = ref(initialStatusFilter.value);
+    watch(initialStatusFilter, () => {
+        statusFilter.value = initialStatusFilter.value;
+    });
+    /** Params **/
+    const filterParams = computed(() => getFilterParams({
+        [FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
+        [FilterTypes.Date]: dateFilter.value,
+        [FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
+    }));
+    /** Tag removal handler **/
+    const tagRemovalHandler = (event) => {
+        if (event.name === FilterTypes.Zone) {
+            zoneFilter.value = zoneFilter.value.filter(({ value }) => value !== event.value);
+        }
+        if (event.name === FilterTypes.Date) {
+            dateFilter.value = '';
+        }
+        if (event.name === FilterTypes.Status) {
+            statusFilter.value = statusFilter.value.filter(({ value }) => value !== event.value);
+        }
+    };
+    /** Tags **/
+    const tags = computed(() => []);
+    return {
+        zoneFilter,
+        zonesOptionList,
+        dateFilter,
+        statusFilter,
+        statusesOptionList,
+        filterParams,
+        tags,
+        tagRemovalHandler,
+    };
+}
+
+var script$1 = defineComponent({
+    name: 'BannerList',
+    setup(props, context) {
+        const { t } = useTranslation(context);
+        const { loading: isZonesLoading, data: zoneList } = useFetchZones({
+            context,
+        });
+        const { zoneFilter, zonesOptionList, dateFilter, statusFilter, statusesOptionList, filterParams, tags, tagRemovalHandler, } = useAdvancedSearch({
+            context,
+            t,
+            zoneList,
+        });
+        const { fetchEntityList: fetchBanners, isLoading: isBannersLoading, rowData, errorMessage, handleChange, searchQuery, pageNumber, pageCount, pageSize, } = useDataTable({
+            fetchEntityList: (params) => getBanners(Object.assign({ query: params.searchQuery, pageNumber: params.pageNumber, pageSize: params.pageSize }, filterParams.value)),
+            initialValue: [],
+            context,
+            resourceName: 'Banners',
+        });
+        watch(filterParams, () => {
+            if (isZonesLoading.value) {
+                return;
+            }
+            const newQuery = Object.assign(Object.assign({}, lodash_pick(context.root.$route.query, ['query', 'pageNumber'])), filterParams.value);
+            if (!lodash_isequal(context.root.$route.query, newQuery)) {
+                context.root.$router.replace({ query: newQuery });
+                fetchBanners();
+            }
+        });
+        const { isDeleting, handleResourceDelete } = useResourceDelete({
+            deleteResource: deleteBanner,
+            resourceName: 'Banner',
+            onSuccess: fetchBanners,
+            context,
+        });
+        const isBusy = (bannerId) => {
+            return isDeleting(bannerId) || isBannersLoading.value;
+        };
+        const columnDefs = computed(() => getColumnDefs$1(context.root.$t));
+        const isRowDataLoading = computed(() => isBannersLoading.value || isZonesLoading.value);
+        return {
+            columnDefs,
+            isRowDataLoading,
+            rowData,
+            errorMessage,
+            handleChange,
+            getBannersBannerFormUrl,
+            searchQuery,
+            pageNumber,
+            pageCount,
+            pageSize,
+            isBusy,
+            handleResourceDelete,
+            // Advanced search
+            zoneFilter,
+            zonesOptionList,
+            dateFilter,
+            statusFilter,
+            statusesOptionList,
+            tags,
+            tagRemovalHandler,
+        };
     },
 });
 
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
 /* script */
-const __vue_script__$2 = script$2;
+const __vue_script__$1 = script$1;
 
 /* template */
-var __vue_render__$2 = function () {
+var __vue_render__$1 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("page", {
     attrs: {
-      title: _vm.pageTitle,
+      title: _vm.$t("banners:banners"),
       "header-buttons": [
         {
-          text: "New Banner Item",
-          href: _vm.getLinkToBannerItemForm("create"),
+          text: _vm.$t("banners:createBanner"),
+          href: _vm.getBannersBannerFormUrl({ bannerId: "create" }),
         },
       ],
     },
@@ -801,72 +3030,116 @@ var __vue_render__$2 = function () {
         key: "content",
         fn: function () {
           return [
-            _c("base-table", {
+            _c("data-table", {
               attrs: {
                 "column-defs": _vm.columnDefs,
                 "row-data": _vm.rowData,
                 loading: _vm.isRowDataLoading,
                 "error-message": _vm.errorMessage,
-                enumerable: "",
+                "data-table": "banners",
+                "use-search": true,
+                "use-pagination": true,
+                "search-query": _vm.searchQuery,
+                pagination: {
+                  pageNumber: _vm.pageNumber,
+                  pageCount: _vm.pageCount,
+                  pageSize: _vm.pageSize,
+                  disabled: _vm.isRowDataLoading,
+                },
               },
+              on: { change: _vm.handleChange },
               scopedSlots: _vm._u([
                 {
-                  key: "cell(actions)",
-                  fn: function (ref) {
-                    var row = ref.row;
-                    var rowIndex = ref.rowIndex;
+                  key: "filters",
+                  fn: function () {
                     return [
                       _c(
-                        "base-button",
-                        {
-                          attrs: {
-                            variant: "icon",
-                            title: "Edit",
-                            disabled: _vm.deletingBannerItemIdList.includes(
-                              row.id
-                            ),
-                            href: _vm.getLinkToBannerItemForm(row.id),
-                          },
-                        },
-                        [_c("svg-icon", { attrs: { name: "edit" } })],
-                        1
-                      ),
-                      _vm._v(" "),
-                      _c(
-                        "base-button",
+                        "advanced-search",
                         {
-                          attrs: {
-                            variant: "icon",
-                            title: "Move up",
-                            disabled: rowIndex === 0 || _vm.isBannerItemMoving,
-                          },
-                          on: {
-                            click: function ($event) {
-                              return _vm.moveBannerItem(row.id, "up")
-                            },
-                          },
+                          attrs: { tags: _vm.tags },
+                          on: { "click:tag": _vm.tagRemovalHandler },
                         },
-                        [_c("svg-icon", { attrs: { name: "north" } })],
-                        1
+                        [
+                          _c(
+                            "div",
+                            { staticClass: "filters" },
+                            [
+                              _c("form-field-multi-select", {
+                                staticClass: "filter",
+                                attrs: {
+                                  options: _vm.zonesOptionList,
+                                  name: "zoneFilter",
+                                  searchable: true,
+                                  label: _vm.$t("banners:zone"),
+                                },
+                                model: {
+                                  value: _vm.zoneFilter,
+                                  callback: function ($$v) {
+                                    _vm.zoneFilter = $$v;
+                                  },
+                                  expression: "zoneFilter",
+                                },
+                              }),
+                              _vm._v(" "),
+                              _c("form-field", {
+                                staticClass: "filter",
+                                attrs: {
+                                  label: _vm.$t("banners:date"),
+                                  name: "dateFilter",
+                                  type: "date",
+                                },
+                                model: {
+                                  value: _vm.dateFilter,
+                                  callback: function ($$v) {
+                                    _vm.dateFilter = $$v;
+                                  },
+                                  expression: "dateFilter",
+                                },
+                              }),
+                              _vm._v(" "),
+                              _c("form-field-multi-select", {
+                                staticClass: "filter",
+                                attrs: {
+                                  options: _vm.statusesOptionList,
+                                  name: "statusFilter",
+                                  searchable: true,
+                                  label: _vm.$t("banners:status"),
+                                },
+                                model: {
+                                  value: _vm.statusFilter,
+                                  callback: function ($$v) {
+                                    _vm.statusFilter = $$v;
+                                  },
+                                  expression: "statusFilter",
+                                },
+                              }),
+                            ],
+                            1
+                          ),
+                        ]
                       ),
-                      _vm._v(" "),
+                    ]
+                  },
+                  proxy: true,
+                },
+                {
+                  key: "cell(actions)",
+                  fn: function (ref) {
+                    var row = ref.row;
+                    return [
                       _c(
                         "base-button",
                         {
                           attrs: {
                             variant: "icon",
-                            title: "Move down",
-                            disabled:
-                              rowIndex === _vm.rowData.length - 1 ||
-                              _vm.isBannerItemMoving,
-                          },
-                          on: {
-                            click: function ($event) {
-                              return _vm.moveBannerItem(row.id, "down")
-                            },
+                            title: _vm.$t("banners:edit"),
+                            disabled: _vm.isBusy(row.id),
+                            href: _vm.getBannersBannerFormUrl({
+                              bannerId: row.id,
+                            }),
                           },
                         },
-                        [_c("svg-icon", { attrs: { name: "south" } })],
+                        [_c("svg-icon", { attrs: { name: "edit" } })],
                         1
                       ),
                       _vm._v(" "),
@@ -875,14 +3148,12 @@ var __vue_render__$2 = function () {
                         {
                           attrs: {
                             variant: "icon",
-                            title: "Remove",
-                            disabled: _vm.deletingBannerItemIdList.includes(
-                              row.id
-                            ),
+                            title: _vm.$t("banners:remove"),
+                            disabled: _vm.isBusy(row.id),
                           },
                           on: {
                             click: function ($event) {
-                              return _vm.handleBannerItemDelete(row)
+                              return _vm.handleResourceDelete(row.id)
                             },
                           },
                         },
@@ -901,169 +3172,175 @@ var __vue_render__$2 = function () {
     ]),
   })
 };
-var __vue_staticRenderFns__$2 = [];
-__vue_render__$2._withStripped = true;
+var __vue_staticRenderFns__$1 = [];
+__vue_render__$1._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$2 = function (inject) {
+  const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-0834d29c_0", { source: "\n\n/*# sourceMappingURL=BannerItemList.vue.map */", map: {"version":3,"sources":["BannerItemList.vue"],"names":[],"mappings":";;AAEA,6CAA6C","file":"BannerItemList.vue"}, media: undefined });
+    inject("data-v-92c7e846_0", { source: ".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n/*# sourceMappingURL=BannerList.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerList/BannerList.vue","BannerList.vue"],"names":[],"mappings":"AA0NA;EACA,aAAA;EACA,eAAA;ACzNA;AD2NA;EACA,gBAAA;ACzNA;AD4NA;EACA,oBAAA;EACA,UAAA;EACA,SAAA;AC1NA;;AAEA,yCAAyC","file":"BannerList.vue","sourcesContent":["<template>\n  <page\n    :title=\"$t('banners:banners')\"\n    :header-buttons=\"[\n      {\n        text: $t('banners:createBanner'),\n        href: getBannersBannerFormUrl({ bannerId: 'create' }),\n      },\n    ]\"\n  >\n    <template v-slot:content>\n      <data-table\n        :column-defs=\"columnDefs\"\n        :row-data=\"rowData\"\n        :loading=\"isRowDataLoading\"\n        :error-message=\"errorMessage\"\n        data-table=\"banners\"\n        :use-search=\"true\"\n        :use-pagination=\"true\"\n        :search-query=\"searchQuery\"\n        :pagination=\"{\n          pageNumber,\n          pageCount,\n          pageSize,\n          disabled: isRowDataLoading,\n        }\"\n        @change=\"handleChange\"\n      >\n        <template v-slot:filters>\n          <advanced-search :tags=\"tags\" @click:tag=\"tagRemovalHandler\">\n            <div class=\"filters\">\n              <form-field-multi-select\n                v-model=\"zoneFilter\"\n                :options=\"zonesOptionList\"\n                name=\"zoneFilter\"\n                :searchable=\"true\"\n                :label=\"$t('banners:zone')\"\n                class=\"filter\"\n              />\n\n              <form-field\n                v-model=\"dateFilter\"\n                :label=\"$t('banners:date')\"\n                name=\"dateFilter\"\n                type=\"date\"\n                class=\"filter\"\n              />\n\n              <form-field-multi-select\n                v-model=\"statusFilter\"\n                :options=\"statusesOptionList\"\n                name=\"statusFilter\"\n                :searchable=\"true\"\n                :label=\"$t('banners:status')\"\n                class=\"filter\"\n              />\n            </div>\n          </advanced-search>\n        </template>\n\n        <template v-slot:cell(actions)=\"{ row }\">\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('banners:edit')\"\n            :disabled=\"isBusy(row.id)\"\n            :href=\"getBannersBannerFormUrl({ bannerId: row.id })\"\n          >\n            <svg-icon name=\"edit\" />\n          </base-button>\n\n          <base-button\n            variant=\"icon\"\n            :title=\"$t('banners:remove')\"\n            :disabled=\"isBusy(row.id)\"\n            @click=\"handleResourceDelete(row.id)\"\n          >\n            <svg-icon name=\"delete\" />\n          </base-button>\n        </template>\n      </data-table>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  SetupContext,\n  watch,\n} from '@vue/composition-api';\nimport isEqual from 'lodash.isequal';\nimport pick from 'lodash.pick';\n\nimport {\n  ColumnDefinition,\n  useDataTable,\n  useTranslation,\n} from '@tager/admin-ui';\nimport { useResourceDelete } from '@tager/admin-services';\n\nimport { deleteBanner, getBanners } from '../../../services/requests';\nimport { Banner } from '../../../typings/banners';\nimport { getBannersBannerFormUrl } from '../../../constants/paths';\nimport { useFetchZones } from '../../../hooks';\n\nimport { getColumnDefs } from './BannerList.helpers';\nimport { useAdvancedSearch } from './hooks';\n\nexport default defineComponent({\n  name: 'BannerList',\n  setup(props, context: SetupContext) {\n    const { t } = useTranslation(context);\n    const { loading: isZonesLoading, data: zoneList } = useFetchZones({\n      context,\n    });\n\n    const {\n      zoneFilter,\n      zonesOptionList,\n      dateFilter,\n      statusFilter,\n      statusesOptionList,\n      filterParams,\n      tags,\n      tagRemovalHandler,\n    } = useAdvancedSearch({\n      context,\n      t,\n      zoneList,\n    });\n\n    const {\n      fetchEntityList: fetchBanners,\n      isLoading: isBannersLoading,\n      rowData,\n      errorMessage,\n      handleChange,\n      searchQuery,\n      pageNumber,\n      pageCount,\n      pageSize,\n    } = useDataTable<Banner>({\n      fetchEntityList: (params) =>\n        getBanners({\n          query: params.searchQuery,\n          pageNumber: params.pageNumber,\n          pageSize: params.pageSize,\n          ...filterParams.value,\n        }),\n      initialValue: [],\n      context,\n      resourceName: 'Banners',\n    });\n\n    watch(filterParams, () => {\n      if (isZonesLoading.value) {\n        return;\n      }\n\n      const newQuery = {\n        ...pick(context.root.$route.query, ['query', 'pageNumber']),\n        ...filterParams.value,\n      };\n\n      if (!isEqual(context.root.$route.query, newQuery)) {\n        context.root.$router.replace({ query: newQuery });\n        fetchBanners();\n      }\n    });\n\n    const { isDeleting, handleResourceDelete } = useResourceDelete({\n      deleteResource: deleteBanner,\n      resourceName: 'Banner',\n      onSuccess: fetchBanners,\n      context,\n    });\n\n    const isBusy = (bannerId: number): boolean => {\n      return isDeleting(bannerId) || isBannersLoading.value;\n    };\n\n    const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>\n      getColumnDefs(context.root.$t)\n    );\n\n    const isRowDataLoading = computed<boolean>(\n      () => isBannersLoading.value || isZonesLoading.value\n    );\n\n    return {\n      columnDefs,\n      isRowDataLoading,\n      rowData,\n      errorMessage,\n      handleChange,\n      getBannersBannerFormUrl,\n      searchQuery,\n      pageNumber,\n      pageCount,\n      pageSize,\n      isBusy,\n      handleResourceDelete,\n\n      // Advanced search\n      zoneFilter,\n      zonesOptionList,\n      dateFilter,\n      statusFilter,\n      statusesOptionList,\n      tags,\n      tagRemovalHandler,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\">\n.filters {\n  display: flex;\n  margin: 0 -10px;\n\n  &:not(:first-child) {\n    margin-top: 10px;\n  }\n\n  .filter {\n    padding: 10px 10px 0;\n    width: 50%;\n    margin: 0;\n  }\n}\n</style>\n",".filters {\n  display: flex;\n  margin: 0 -10px;\n}\n.filters:not(:first-child) {\n  margin-top: 10px;\n}\n.filters .filter {\n  padding: 10px 10px 0;\n  width: 50%;\n  margin: 0;\n}\n\n/*# sourceMappingURL=BannerList.vue.map */"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$2 = "data-v-0834d29c";
+  const __vue_scope_id__$1 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$2 = undefined;
+  const __vue_module_identifier__$1 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$2 = false;
+  const __vue_is_functional_template__$1 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
+  const __vue_component__$1 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
+    __vue_inject_styles__$1,
+    __vue_script__$1,
+    __vue_scope_id__$1,
+    __vue_is_functional_template__$1,
+    __vue_module_identifier__$1,
     false,
     createInjector,
     undefined,
     undefined
   );
 
-const INITIAL_VALUES = {
-    title: '',
-    text: '',
-    buttonLink: '',
-    buttonLabel: '',
-    buttonIsNewTab: false,
-    image: null,
-};
-var script$3 = Vue.extend({
-    name: 'BannerItemForm',
-    data() {
-        return {
-            values: Object.assign({}, INITIAL_VALUES),
-            errors: {},
-            isContentLoading: false,
-            bannerArea: null,
-        };
-    },
-    computed: {
-        itemId() {
-            return this.$route.params.itemId;
-        },
-        areaAlias() {
-            return this.$route.params.areaAlias;
-        },
-        isCreation() {
-            return this.itemId === 'create';
-        },
-        bannerItemListUrl() {
-            var _a, _b;
-            return getBannerItemListUrl({
-                areaAlias: (_b = (_a = this.bannerArea) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : 'unknown',
-            });
-        },
-    },
-    watch: {
-        itemId() {
-            this.updateValues();
-        },
-        areaAlias() {
-            this.updateValues();
-        },
-    },
-    mounted() {
-        this.updateValues();
-    },
-    methods: {
-        updateValues() {
-            this.isContentLoading = true;
-            Promise.all([
-                getBannerAreaByAlias(this.areaAlias)
-                    .then((response) => {
-                    this.bannerArea = response.data;
-                })
-                    .catch(console.error),
-                this.isCreation
-                    ? new Promise((resolve) => {
-                        this.values = Object.assign({}, INITIAL_VALUES);
-                        resolve();
-                    })
-                    : getBannerItemById(this.itemId)
-                        .then((response) => {
-                        this.values = this.convertReviewToInitialValues(response.data);
-                    })
-                        .catch(console.error),
-            ]).finally(() => {
-                this.isContentLoading = false;
-            });
-        },
-        convertReviewToInitialValues(bannerItem) {
-            var _a;
-            return {
-                title: bannerItem.title,
-                text: bannerItem.text,
-                buttonLink: (_a = bannerItem.buttonLink) !== null && _a !== void 0 ? _a : '',
-                buttonLabel: bannerItem.buttonLabel,
-                buttonIsNewTab: bannerItem.buttonIsNewTab,
-                image: bannerItem.image,
-            };
-        },
-        submitForm() {
-            var _a, _b, _c, _d;
-            const creationBody = {
-                title: this.values.title,
-                text: this.values.text,
-                buttonLink: this.values.buttonLink.trim() || null,
-                buttonLabel: this.values.buttonLabel,
-                buttonIsNewTab: this.values.buttonIsNewTab,
-                image: (_b = (_a = this.values.image) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : null,
-            };
-            const requestPromise = this.isCreation
-                ? createBannerItem((_d = (_c = this.bannerArea) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : 'unknown', creationBody)
-                : updateBannerItem(this.itemId, creationBody);
+function useFetchBanner({ context, bannerId, isCreation, }) {
+    const [fetchBanner, resource] = useResource({
+        fetchResource: () => getBanner(bannerId.value),
+        initialValue: null,
+        context,
+        resourceName: 'Banner',
+    });
+    onMounted(() => {
+        if (isCreation.value) {
+            return;
+        }
+        fetchBanner();
+    });
+    watch(bannerId, () => {
+        if (isCreation.value) {
+            return;
+        }
+        fetchBanner();
+    });
+    return resource;
+}
+
+function convertBannerToFormValues(banner, zonesOptionList) {
+    var _a, _b, _c, _d, _e, _f;
+    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 : '',
+        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 : '',
+    };
+}
+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 : '' });
+}
+
+var script$2 = defineComponent({
+    name: 'BannerForm',
+    components: { FormFooter },
+    setup(props, context) {
+        const bannerId = computed(() => context.root.$route.params.bannerId);
+        const isCreation = computed(() => bannerId.value === 'create');
+        /** Zones **/
+        const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
+        const zonesOptionList = computed(() => zones.value.map((zone) => ({
+            value: zone.id,
+            label: zone.name,
+        })));
+        /** Banner **/
+        const { data: banner, loading: isBannerLoading } = useFetchBanner({
+            context,
+            bannerId,
+            isCreation,
+        });
+        /** Form State **/
+        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 submitForm = (event) => {
+            isSubmitting.value = true;
+            const body = convertBannerFormValuesToPayload(values.value);
+            const requestPromise = isCreation.value
+                ? createBanner(body)
+                : updateBanner(bannerId.value, body);
             requestPromise
-                .then(() => {
-                this.errors = {};
-                this.$router.push(this.bannerItemListUrl);
-                this.$toast({
+                .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: 'Success',
-                    body: `Banner item has been successfully ${this.isCreation ? 'created' : 'updated'}`,
+                    title: context.root.$t('banners:success'),
+                    body: isCreation.value
+                        ? context.root.$t('banners:bannerWasSuccessfullyCreated')
+                        : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
                 });
             })
                 .catch((error) => {
                 console.error(error);
-                this.errors = convertRequestErrorToMap(error);
-                this.$toast({
+                errors.value = convertRequestErrorToMap(error);
+                context.root.$toast({
                     variant: 'danger',
-                    title: 'Error',
-                    body: `Banner item ${this.isCreation ? 'creation' : 'update'} has been failed`,
+                    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(() => isBannerLoading.value || isZonesLoading.value);
+        return {
+            isCreation,
+            isContentLoading,
+            isSubmitting,
+            values,
+            errors,
+            submitForm,
+            bannerListUrl: getBannersBannerListUrl(),
+            zonesOptionList,
+        };
     },
 });
 
 /* script */
-const __vue_script__$3 = script$3;
+const __vue_script__$2 = script$2;
 
 /* template */
-var __vue_render__$3 = function () {
+var __vue_render__$2 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("page", {
     attrs: {
-      title: _vm.isCreation ? "Create Banner Item" : "Update Banner Item",
+      title: _vm.isCreation
+        ? _vm.$t("banners:createBanner")
+        : _vm.$t("banners:updateBanner"),
       "is-content-loading": _vm.isContentLoading,
-      footer: { onSubmit: _vm.submitForm, backHref: _vm.bannerItemListUrl },
     },
     scopedSlots: _vm._u([
       {
@@ -1077,46 +3354,33 @@ var __vue_render__$3 = function () {
                 on: {
                   submit: function ($event) {
                     $event.preventDefault();
+                    return _vm.submitForm($event)
                   },
                 },
               },
               [
-                _c("form-field", {
-                  attrs: {
-                    name: "title",
-                    label: "Title",
-                    error: _vm.errors.title,
-                    type: "textarea",
-                  },
-                  model: {
-                    value: _vm.values.title,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.values, "title", $$v);
-                    },
-                    expression: "values.title",
-                  },
-                }),
-                _vm._v(" "),
-                _c("form-field-rich-text-input", {
+                _c("form-field-select", {
                   attrs: {
-                    name: "text",
-                    label: "Text",
-                    error: _vm.errors.text,
+                    name: "bannerZone",
+                    label: _vm.$t("banners:zone"),
+                    options: _vm.zonesOptionList,
+                    error: _vm.errors.bannerZone,
                   },
                   model: {
-                    value: _vm.values.text,
+                    value: _vm.values.bannerZone,
                     callback: function ($$v) {
-                      _vm.$set(_vm.values, "text", $$v);
+                      _vm.$set(_vm.values, "bannerZone", $$v);
                     },
-                    expression: "values.text",
+                    expression: "values.bannerZone",
                   },
                 }),
                 _vm._v(" "),
                 _c("form-field-file-input", {
                   attrs: {
-                    label: "Image",
                     name: "image",
                     "file-type": "image",
+                    label: _vm.$t("banners:image"),
+                    error: _vm.errors.file,
                   },
                   model: {
                     value: _vm.values.image,
@@ -1129,46 +3393,103 @@ var __vue_render__$3 = function () {
                 _vm._v(" "),
                 _c("form-field", {
                   attrs: {
-                    name: "buttonLabel",
-                    label: "Button: Label",
-                    error: _vm.errors.buttonLabel,
+                    name: "link",
+                    label: _vm.$t("banners:link"),
+                    error: _vm.errors.name,
                   },
                   model: {
-                    value: _vm.values.buttonLabel,
+                    value: _vm.values.link,
                     callback: function ($$v) {
-                      _vm.$set(_vm.values, "buttonLabel", $$v);
+                      _vm.$set(_vm.values, "link", $$v);
                     },
-                    expression: "values.buttonLabel",
+                    expression: "values.link",
                   },
                 }),
                 _vm._v(" "),
-                _c("form-field", {
+                _c("form-field-checkbox", {
                   attrs: {
-                    name: "buttonLink",
-                    label: "Button: Link",
-                    error: _vm.errors.buttonLink,
+                    name: "openNewTab",
+                    label: _vm.$t("banners:openNewTab"),
+                    error: _vm.errors.openNewTab,
                   },
                   model: {
-                    value: _vm.values.buttonLink,
+                    value: _vm.values.openNewTab,
                     callback: function ($$v) {
-                      _vm.$set(_vm.values, "buttonLink", $$v);
+                      _vm.$set(_vm.values, "openNewTab", $$v);
                     },
-                    expression: "values.buttonLink",
+                    expression: "values.openNewTab",
                   },
                 }),
                 _vm._v(" "),
+                _c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
+                _vm._v(" "),
+                _c(
+                  "div",
+                  { staticClass: "date" },
+                  [
+                    _c("form-field", {
+                      attrs: {
+                        label: _vm.$t("banners:from"),
+                        name: "dateStart",
+                        type: "date",
+                        max: _vm.values.dateEnd,
+                      },
+                      model: {
+                        value: _vm.values.dateStart,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "dateStart", $$v);
+                        },
+                        expression: "values.dateStart",
+                      },
+                    }),
+                    _vm._v(" "),
+                    _c("form-field", {
+                      attrs: {
+                        label: _vm.$t("banners:to"),
+                        name: "dateEnd",
+                        type: "date",
+                        min: _vm.values.dateStart,
+                      },
+                      model: {
+                        value: _vm.values.dateEnd,
+                        callback: function ($$v) {
+                          _vm.$set(_vm.values, "dateEnd", $$v);
+                        },
+                        expression: "values.dateEnd",
+                      },
+                    }),
+                  ],
+                  1
+                ),
+                _vm._v(" "),
                 _c("form-field-checkbox", {
                   attrs: {
-                    name: "buttonIsNewTab",
-                    label: "Button: Is new tab?",
-                    error: _vm.errors.buttonIsNewTab,
+                    name: "disabled",
+                    label: _vm.$t("banners:disabled"),
+                    error: _vm.errors.disabled,
+                  },
+                  model: {
+                    value: _vm.values.disabled,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.values, "disabled", $$v);
+                    },
+                    expression: "values.disabled",
+                  },
+                }),
+                _vm._v(" "),
+                _c("form-field", {
+                  attrs: {
+                    name: "comment",
+                    type: "textarea",
+                    label: _vm.$t("banners:comment"),
+                    error: _vm.errors.comment,
                   },
                   model: {
-                    value: _vm.values.buttonIsNewTab,
+                    value: _vm.values.comment,
                     callback: function ($$v) {
-                      _vm.$set(_vm.values, "buttonIsNewTab", $$v);
+                      _vm.$set(_vm.values, "comment", $$v);
                     },
-                    expression: "values.buttonIsNewTab",
+                    expression: "values.comment",
                   },
                 }),
               ],
@@ -1178,106 +3499,112 @@ var __vue_render__$3 = function () {
         },
         proxy: true,
       },
+      {
+        key: "footer",
+        fn: function () {
+          return [
+            _c("FormFooter", {
+              attrs: {
+                "back-href": _vm.bannerListUrl,
+                "on-submit": _vm.submitForm,
+                "is-submitting": _vm.isSubmitting,
+                "is-creation": _vm.isCreation,
+                "can-create-another": _vm.isCreation,
+              },
+            }),
+          ]
+        },
+        proxy: true,
+      },
     ]),
   })
 };
-var __vue_staticRenderFns__$3 = [];
-__vue_render__$3._withStripped = true;
+var __vue_staticRenderFns__$2 = [];
+__vue_render__$2._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$3 = function (inject) {
+  const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-2ed0e9d3_0", { source: ".bottom[data-v-2ed0e9d3] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.save-button[data-v-2ed0e9d3] {\n  min-width: 100px;\n}\n.alias-field-inner[data-v-2ed0e9d3] {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span[data-v-2ed0e9d3] {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerItemForm.vue.map */", map: {"version":3,"sources":["D:\\Work\\tager-admin-banners\\src\\views\\BannerItemForm.vue","BannerItemForm.vue"],"names":[],"mappings":"AAmNA;EACA,aAAA;EACA,8BAAA;EACA,mBAAA;AClNA;ADqNA;EACA,gBAAA;AClNA;ADqNA;EACA,aAAA;EACA,mBAAA;AClNA;ADoNA;EACA,gBAAA;EACA,kBAAA;AClNA;;AAEA,6CAA6C","file":"BannerItemForm.vue","sourcesContent":["<template>\n  <page\n    :title=\"isCreation ? 'Create Banner Item' : 'Update Banner Item'\"\n    :is-content-loading=\"isContentLoading\"\n    :footer=\"{ onSubmit: submitForm, backHref: bannerItemListUrl }\"\n  >\n    <template v-slot:content>\n      <form novalidate @submit.prevent>\n        <form-field\n          v-model=\"values.title\"\n          name=\"title\"\n          label=\"Title\"\n          :error=\"errors.title\"\n          type=\"textarea\"\n        />\n\n        <form-field-rich-text-input\n          v-model=\"values.text\"\n          name=\"text\"\n          label=\"Text\"\n          :error=\"errors.text\"\n        />\n\n        <form-field-file-input\n          v-model=\"values.image\"\n          label=\"Image\"\n          name=\"image\"\n          file-type=\"image\"\n        />\n\n        <form-field\n          v-model=\"values.buttonLabel\"\n          name=\"buttonLabel\"\n          label=\"Button: Label\"\n          :error=\"errors.buttonLabel\"\n        />\n\n        <form-field\n          v-model=\"values.buttonLink\"\n          name=\"buttonLink\"\n          label=\"Button: Link\"\n          :error=\"errors.buttonLink\"\n        />\n\n        <form-field-checkbox\n          v-model=\"values.buttonIsNewTab\"\n          name=\"buttonIsNewTab\"\n          label=\"Button: Is new tab?\"\n          :error=\"errors.buttonIsNewTab\"\n        />\n      </form>\n    </template>\n  </page>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport {\n  convertRequestErrorToMap,\n  FileType,\n  Nullable,\n} from '@tager/admin-services';\n\nimport {\n  BannerItemCreatePayload,\n  createBannerItem,\n  getBannerAreaByAlias,\n  getBannerItemById,\n  updateBannerItem,\n} from '../services/requests';\nimport { BannerArea, BannerItem } from '../typings/model';\nimport { getBannerItemListUrl } from '../constants/paths';\n\ntype FormValues = {\n  title: string;\n  text: string;\n  buttonLink: string;\n  buttonLabel: string;\n  buttonIsNewTab: boolean;\n  image: Nullable<FileType>;\n};\n\nconst INITIAL_VALUES: FormValues = {\n  title: '',\n  text: '',\n  buttonLink: '',\n  buttonLabel: '',\n  buttonIsNewTab: false,\n  image: null,\n};\n\nexport default Vue.extend({\n  name: 'BannerItemForm',\n  data(): {\n    values: FormValues;\n    errors: Record<string, string>;\n    isContentLoading: boolean;\n    bannerArea: Nullable<BannerArea>;\n  } {\n    return {\n      values: { ...INITIAL_VALUES },\n      errors: {},\n      isContentLoading: false,\n      bannerArea: null,\n    };\n  },\n  computed: {\n    itemId(): string {\n      return this.$route.params.itemId;\n    },\n    areaAlias(): string {\n      return this.$route.params.areaAlias;\n    },\n    isCreation(): boolean {\n      return this.itemId === 'create';\n    },\n    bannerItemListUrl(): string {\n      return getBannerItemListUrl({\n        areaAlias: this.bannerArea?.alias ?? 'unknown',\n      });\n    },\n  },\n  watch: {\n    itemId() {\n      this.updateValues();\n    },\n    areaAlias() {\n      this.updateValues();\n    },\n  },\n  mounted(): void {\n    this.updateValues();\n  },\n  methods: {\n    updateValues(): void {\n      this.isContentLoading = true;\n\n      Promise.all([\n        getBannerAreaByAlias(this.areaAlias)\n          .then((response) => {\n            this.bannerArea = response.data;\n          })\n          .catch(console.error),\n        this.isCreation\n          ? new Promise((resolve) => {\n              this.values = { ...INITIAL_VALUES };\n              resolve();\n            })\n          : getBannerItemById(this.itemId)\n              .then((response) => {\n                this.values = this.convertReviewToInitialValues(response.data);\n              })\n              .catch(console.error),\n      ]).finally(() => {\n        this.isContentLoading = false;\n      });\n    },\n    convertReviewToInitialValues(bannerItem: BannerItem): FormValues {\n      return {\n        title: bannerItem.title,\n        text: bannerItem.text,\n        buttonLink: bannerItem.buttonLink ?? '',\n        buttonLabel: bannerItem.buttonLabel,\n        buttonIsNewTab: bannerItem.buttonIsNewTab,\n        image: bannerItem.image,\n      };\n    },\n    submitForm() {\n      const creationBody: BannerItemCreatePayload = {\n        title: this.values.title,\n        text: this.values.text,\n        buttonLink: this.values.buttonLink.trim() || null,\n        buttonLabel: this.values.buttonLabel,\n        buttonIsNewTab: this.values.buttonIsNewTab,\n        image: this.values.image?.id ?? null,\n      };\n\n      const requestPromise = this.isCreation\n        ? createBannerItem(this.bannerArea?.id ?? 'unknown', creationBody)\n        : updateBannerItem(this.itemId, creationBody);\n\n      requestPromise\n        .then(() => {\n          this.errors = {};\n          this.$router.push(this.bannerItemListUrl);\n\n          this.$toast({\n            variant: 'success',\n            title: 'Success',\n            body: `Banner item has been successfully ${\n              this.isCreation ? 'created' : 'updated'\n            }`,\n          });\n        })\n        .catch((error) => {\n          console.error(error);\n          this.errors = convertRequestErrorToMap(error);\n          this.$toast({\n            variant: 'danger',\n            title: 'Error',\n            body: `Banner item ${\n              this.isCreation ? 'creation' : 'update'\n            } has been failed`,\n          });\n        });\n    },\n  },\n});\n</script>\n\n<style scoped lang=\"scss\">\n.bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n\n  span {\n    font-size: 0.9em;\n    margin-right: 10px;\n  }\n}\n</style>\n",".bottom {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.save-button {\n  min-width: 100px;\n}\n\n.alias-field-inner {\n  display: flex;\n  align-items: center;\n}\n.alias-field-inner span {\n  font-size: 0.9em;\n  margin-right: 10px;\n}\n\n/*# sourceMappingURL=BannerItemForm.vue.map */"]}, media: undefined });
+    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 });
 
   };
   /* scoped */
-  const __vue_scope_id__$3 = "data-v-2ed0e9d3";
+  const __vue_scope_id__$2 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$3 = undefined;
+  const __vue_module_identifier__$2 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$3 = false;
+  const __vue_is_functional_template__$2 = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$3 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
-    __vue_inject_styles__$3,
-    __vue_script__$3,
-    __vue_scope_id__$3,
-    __vue_is_functional_template__$3,
-    __vue_module_identifier__$3,
+  const __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
     false,
     createInjector,
     undefined,
     undefined
   );
 
-const HOME_BREADCRUMB = { path: '/', label: 'Home' };
-const BANNER_AREA_LIST_ROUTE = {
-    path: BANNER_ROUTE_PATHS.AREA_LIST,
+const BANNERS_ZONE_LIST_ROUTE = {
+    path: BANNERS_ROUTE_PATHS.ZONE_LIST,
     component: __vue_component__,
-    name: 'Banner Area List',
+    name: 'Zones',
     meta: {
-        getBreadcrumbs: (route) => [
-            HOME_BREADCRUMB,
-            { path: route.path, label: route.name },
+        getBreadcrumbs: (route, t) => [
+            { url: '/', text: t('banners:home') },
+            { url: BANNERS_ROUTE_PATHS.ZONE_LIST, text: t('banners:zones') },
         ],
     },
 };
-const BANNER_AREA_FORM_ROUTE = {
-    path: BANNER_ROUTE_PATHS.AREA_FORM,
+const BANNERS_BANNER_LIST_ROUTE = {
+    path: BANNERS_ROUTE_PATHS.BANNER_LIST,
     component: __vue_component__$1,
-    name: 'Banner Area Form',
+    name: 'Banners',
     meta: {
-        getBreadcrumbs: (route) => [
-            HOME_BREADCRUMB,
-            {
-                path: BANNER_ROUTE_PATHS.AREA_LIST,
-                label: BANNER_AREA_LIST_ROUTE.name,
-            },
-            { path: route.path, label: route.name },
+        getBreadcrumbs: (route, t) => [
+            { url: '/', text: t('banners:home') },
+            { url: BANNERS_ROUTE_PATHS.BANNER_LIST, text: t('banners:banners') },
         ],
     },
 };
-const BANNER_ITEM_LIST_ROUTE = {
-    path: BANNER_ROUTE_PATHS.ITEM_LIST,
+const BANNERS_BANNER_FORM_ROUTE = {
+    path: BANNERS_ROUTE_PATHS.BANNER_FORM,
     component: __vue_component__$2,
-    name: 'Banner Item List',
+    name: 'Banner Form',
     meta: {
-        getBreadcrumbs: (route) => [
-            HOME_BREADCRUMB,
-            { path: route.path, label: route.name },
+        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') },
         ],
     },
-};
-const BANNER_ITEM_FORM_ROUTE = {
-    path: BANNER_ROUTE_PATHS.ITEM_FORM,
-    component: __vue_component__$3,
-    name: 'Banner Item Form',
-    meta: {
-        getBreadcrumbs: (route) => [
-            HOME_BREADCRUMB,
+};
+
+function getBannersMenuItem(params) {
+    return {
+        id: 'banners',
+        text: params.t('banners:banners'),
+        icon: 'viewList',
+        children: [
+            { text: params.t('banners:zones'), url: getBannersZoneListUrl() },
+            { text: params.t('banners:banners'), url: getBannersBannerListUrl() },
             {
-                path: getBannerItemListUrl({ areaAlias: route.params.areaAlias }),
-                label: BANNER_ITEM_LIST_ROUTE.name,
+                text: params.t('banners:createBanner'),
+                url: getBannersBannerFormUrl({ bannerId: 'create' }),
             },
-            { path: route.path, label: route.name },
         ],
-    },
-};
+    };
+}
 
-const BANNER_MENU_ITEM = {
-    id: 'banner',
-    name: 'Banners',
-    path: '',
-    icon: 'viewList',
-    children: [
-        { name: 'Banner areas', path: '/banners' },
-        { name: 'Create banner area', path: '/banners/create' },
-    ],
-};
+i18n.addTranslations('en', 'blog', EN);
+i18n.addTranslations('ru', 'blog', RU);
 
-export { BANNER_AREA_FORM_ROUTE, BANNER_AREA_LIST_ROUTE, BANNER_ITEM_FORM_ROUTE, BANNER_ITEM_LIST_ROUTE, BANNER_MENU_ITEM, BANNER_ROUTE_PATHS, getBannerAreaFormUrl, getBannerAreaListUrl, getBannerItemFormUrl, getBannerItemListUrl };
+export { BANNERS_BANNER_FORM_ROUTE, BANNERS_BANNER_LIST_ROUTE, BANNERS_ROUTE_PATHS, BANNERS_ZONE_LIST_ROUTE, createBanner, deleteBanner, getBanner, getBannerCount, getBanners, getBannersBannerFormUrl, getBannersBannerListUrl, getBannersMenuItem, getBannersZoneListUrl, getZones, updateBanner };