@tager/admin-banners 0.3.2 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +131 -81
- package/dist/index.umd.js +131 -81
- package/dist/locales/en.d.ts +2 -0
- package/dist/typings/banners.d.ts +5 -2
- package/dist/views/Banners/BannerForm/BannerForm.vue.d.ts +2 -0
- package/dist/views/Banners/BannerList/BannerList.helpers.d.ts +2 -1
- package/package.json +3 -3
- package/src/locales/en.ts +2 -0
- package/src/locales/ru.ts +2 -0
- package/src/main.ts +2 -2
- package/src/typings/banners.ts +5 -2
- package/src/views/Banners/BannerForm/BannerForm.helpers.ts +4 -0
- package/src/views/Banners/BannerForm/BannerForm.vue +154 -115
- package/src/views/Banners/BannerList/BannerList.helpers.ts +28 -7
- package/src/views/Banners/BannerList/BannerList.vue +1 -1
- package/src/views/Banners/BannerList/hooks/useAdvancedSearch.ts +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -28,6 +28,8 @@ const EN = {
|
|
|
28
28
|
remove: 'Remove',
|
|
29
29
|
actions: 'actions',
|
|
30
30
|
date: 'Date',
|
|
31
|
+
name: 'Name',
|
|
32
|
+
priority: 'Priority',
|
|
31
33
|
success: 'Success',
|
|
32
34
|
error: 'Error',
|
|
33
35
|
statuses: {
|
|
@@ -67,6 +69,8 @@ const RU = {
|
|
|
67
69
|
remove: 'Удалить',
|
|
68
70
|
actions: 'Действия',
|
|
69
71
|
date: 'Дата',
|
|
72
|
+
name: 'Название',
|
|
73
|
+
priority: 'Приоритет',
|
|
70
74
|
success: 'Успех',
|
|
71
75
|
error: 'Ошибка',
|
|
72
76
|
statuses: {
|
|
@@ -2748,12 +2752,13 @@ function getStatus(type, t) {
|
|
|
2748
2752
|
return '';
|
|
2749
2753
|
}
|
|
2750
2754
|
}
|
|
2751
|
-
function getColumnDefs$1(t) {
|
|
2755
|
+
function getColumnDefs$1(zoneList, t) {
|
|
2752
2756
|
return [
|
|
2753
2757
|
{
|
|
2754
2758
|
id: 0,
|
|
2755
2759
|
name: '#',
|
|
2756
2760
|
field: 'id',
|
|
2761
|
+
format: ({ rowIndex }) => String(rowIndex + 1),
|
|
2757
2762
|
style: { width: '50px', textAlign: 'center' },
|
|
2758
2763
|
headStyle: { width: '50px', textAlign: 'center' },
|
|
2759
2764
|
},
|
|
@@ -2761,7 +2766,12 @@ function getColumnDefs$1(t) {
|
|
|
2761
2766
|
id: 1,
|
|
2762
2767
|
name: t('banners:zone'),
|
|
2763
2768
|
field: 'bannerZone',
|
|
2764
|
-
format: ({ row }) =>
|
|
2769
|
+
format: ({ row }) => {
|
|
2770
|
+
const foundBannerZone = zoneList.find((zone) => zone.id === row.bannerZone);
|
|
2771
|
+
return foundBannerZone
|
|
2772
|
+
? foundBannerZone.name
|
|
2773
|
+
: t('banners:bannerZoneIsDeleted');
|
|
2774
|
+
},
|
|
2765
2775
|
},
|
|
2766
2776
|
{
|
|
2767
2777
|
id: 2,
|
|
@@ -2773,18 +2783,25 @@ function getColumnDefs$1(t) {
|
|
|
2773
2783
|
},
|
|
2774
2784
|
{
|
|
2775
2785
|
id: 3,
|
|
2786
|
+
name: t('banners:priority'),
|
|
2787
|
+
field: 'priority',
|
|
2788
|
+
style: { width: '100px', textAlign: 'center' },
|
|
2789
|
+
headStyle: { width: '100px', textAlign: 'center' },
|
|
2790
|
+
},
|
|
2791
|
+
{
|
|
2792
|
+
id: 4,
|
|
2776
2793
|
name: t('banners:period'),
|
|
2777
2794
|
field: 'dateStart',
|
|
2778
2795
|
format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
|
|
2779
2796
|
},
|
|
2780
2797
|
{
|
|
2781
|
-
id:
|
|
2798
|
+
id: 5,
|
|
2782
2799
|
name: t('banners:image'),
|
|
2783
2800
|
field: 'image',
|
|
2784
2801
|
type: 'image',
|
|
2785
2802
|
},
|
|
2786
2803
|
{
|
|
2787
|
-
id:
|
|
2804
|
+
id: 6,
|
|
2788
2805
|
name: t('banners:link'),
|
|
2789
2806
|
field: 'link',
|
|
2790
2807
|
type: 'name',
|
|
@@ -2803,14 +2820,17 @@ function getColumnDefs$1(t) {
|
|
|
2803
2820
|
],
|
|
2804
2821
|
});
|
|
2805
2822
|
},
|
|
2823
|
+
options: {
|
|
2824
|
+
shouldOpenNewTab: true,
|
|
2825
|
+
},
|
|
2806
2826
|
},
|
|
2807
2827
|
{
|
|
2808
|
-
id:
|
|
2828
|
+
id: 7,
|
|
2809
2829
|
name: t('banners:comment'),
|
|
2810
2830
|
field: 'comment',
|
|
2811
2831
|
},
|
|
2812
2832
|
{
|
|
2813
|
-
id:
|
|
2833
|
+
id: 8,
|
|
2814
2834
|
name: t('banners:actions'),
|
|
2815
2835
|
field: 'actions',
|
|
2816
2836
|
style: { whiteSpace: 'nowrap', width: '100px' },
|
|
@@ -2861,7 +2881,7 @@ function useAdvancedSearch({ context, t, zoneList }) {
|
|
|
2861
2881
|
/** Params **/
|
|
2862
2882
|
const filterParams = computed(() => getFilterParams({
|
|
2863
2883
|
[FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
|
|
2864
|
-
[FilterTypes.Date]: dateFilter.value,
|
|
2884
|
+
[FilterTypes.Date]: dateFilter.value || [],
|
|
2865
2885
|
[FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
|
|
2866
2886
|
}));
|
|
2867
2887
|
/** Tag removal handler **/
|
|
@@ -2927,7 +2947,7 @@ var script$1 = defineComponent({
|
|
|
2927
2947
|
const isBusy = (bannerId) => {
|
|
2928
2948
|
return isDeleting(bannerId) || isBannersLoading.value;
|
|
2929
2949
|
};
|
|
2930
|
-
const columnDefs = computed(() => getColumnDefs$1(context.root.$t));
|
|
2950
|
+
const columnDefs = computed(() => getColumnDefs$1(zoneList.value, context.root.$t));
|
|
2931
2951
|
const isRowDataLoading = computed(() => isBannersLoading.value || isZonesLoading.value);
|
|
2932
2952
|
return {
|
|
2933
2953
|
columnDefs,
|
|
@@ -3178,7 +3198,7 @@ __vue_render__$1._withStripped = true;
|
|
|
3178
3198
|
/* style */
|
|
3179
3199
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3180
3200
|
if (!inject) return
|
|
3181
|
-
inject("data-v-
|
|
3201
|
+
inject("data-v-23927d9c_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(zoneList.value, 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 });
|
|
3182
3202
|
|
|
3183
3203
|
};
|
|
3184
3204
|
/* scoped */
|
|
@@ -3229,22 +3249,23 @@ function useFetchBanner({ context, bannerId, isCreation, }) {
|
|
|
3229
3249
|
}
|
|
3230
3250
|
|
|
3231
3251
|
function convertBannerToFormValues(banner, zonesOptionList) {
|
|
3232
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3252
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
3233
3253
|
const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
|
|
3234
3254
|
return {
|
|
3235
|
-
|
|
3255
|
+
priority: (_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1,
|
|
3256
|
+
link: (_b = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _b !== void 0 ? _b : '',
|
|
3236
3257
|
image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: createId(), file: banner.image } : null,
|
|
3237
3258
|
bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
|
|
3238
|
-
openNewTab: (
|
|
3239
|
-
dateStart: (
|
|
3240
|
-
dateEnd: (
|
|
3241
|
-
disabled: (
|
|
3242
|
-
comment: (
|
|
3259
|
+
openNewTab: (_c = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _c !== void 0 ? _c : false,
|
|
3260
|
+
dateStart: (_d = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _d !== void 0 ? _d : '',
|
|
3261
|
+
dateEnd: (_e = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _e !== void 0 ? _e : '',
|
|
3262
|
+
disabled: (_f = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _f !== void 0 ? _f : false,
|
|
3263
|
+
comment: (_g = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _g !== void 0 ? _g : '',
|
|
3243
3264
|
};
|
|
3244
3265
|
}
|
|
3245
3266
|
function convertBannerFormValuesToPayload(values) {
|
|
3246
3267
|
var _a, _b, _c, _d;
|
|
3247
|
-
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 : '' });
|
|
3268
|
+
return Object.assign(Object.assign({}, values), { priority: values.priority ? Number(values.priority) : 1, dateStart: values.dateStart ? values.dateStart : null, dateEnd: values.dateEnd ? values.dateEnd : null, image: (_b = (_a = values.image) === null || _a === void 0 ? void 0 : _a.file.id) !== null && _b !== void 0 ? _b : null, bannerZone: (_d = (_c = values.bannerZone) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '' });
|
|
3248
3269
|
}
|
|
3249
3270
|
|
|
3250
3271
|
var script$2 = defineComponent({
|
|
@@ -3359,67 +3380,43 @@ var __vue_render__$2 = function () {
|
|
|
3359
3380
|
},
|
|
3360
3381
|
},
|
|
3361
3382
|
[
|
|
3362
|
-
_c(
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
|
|
3368
|
-
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
"
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3391
|
-
|
|
3392
|
-
|
|
3393
|
-
|
|
3394
|
-
|
|
3395
|
-
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
},
|
|
3400
|
-
model: {
|
|
3401
|
-
value: _vm.values.link,
|
|
3402
|
-
callback: function ($$v) {
|
|
3403
|
-
_vm.$set(_vm.values, "link", $$v);
|
|
3404
|
-
},
|
|
3405
|
-
expression: "values.link",
|
|
3406
|
-
},
|
|
3407
|
-
}),
|
|
3408
|
-
_vm._v(" "),
|
|
3409
|
-
_c("form-field-checkbox", {
|
|
3410
|
-
attrs: {
|
|
3411
|
-
name: "openNewTab",
|
|
3412
|
-
label: _vm.$t("banners:openNewTab"),
|
|
3413
|
-
error: _vm.errors.openNewTab,
|
|
3414
|
-
},
|
|
3415
|
-
model: {
|
|
3416
|
-
value: _vm.values.openNewTab,
|
|
3417
|
-
callback: function ($$v) {
|
|
3418
|
-
_vm.$set(_vm.values, "openNewTab", $$v);
|
|
3419
|
-
},
|
|
3420
|
-
expression: "values.openNewTab",
|
|
3421
|
-
},
|
|
3422
|
-
}),
|
|
3383
|
+
_c(
|
|
3384
|
+
"div",
|
|
3385
|
+
{ staticClass: "zone" },
|
|
3386
|
+
[
|
|
3387
|
+
_c("form-field-select", {
|
|
3388
|
+
attrs: {
|
|
3389
|
+
name: "bannerZone",
|
|
3390
|
+
label: _vm.$t("banners:zone"),
|
|
3391
|
+
options: _vm.zonesOptionList,
|
|
3392
|
+
error: _vm.errors.bannerZone,
|
|
3393
|
+
},
|
|
3394
|
+
model: {
|
|
3395
|
+
value: _vm.values.bannerZone,
|
|
3396
|
+
callback: function ($$v) {
|
|
3397
|
+
_vm.$set(_vm.values, "bannerZone", $$v);
|
|
3398
|
+
},
|
|
3399
|
+
expression: "values.bannerZone",
|
|
3400
|
+
},
|
|
3401
|
+
}),
|
|
3402
|
+
_vm._v(" "),
|
|
3403
|
+
_c("form-field", {
|
|
3404
|
+
attrs: {
|
|
3405
|
+
name: "priority",
|
|
3406
|
+
label: _vm.$t("banners:priority"),
|
|
3407
|
+
error: _vm.errors.priority,
|
|
3408
|
+
},
|
|
3409
|
+
model: {
|
|
3410
|
+
value: _vm.values.priority,
|
|
3411
|
+
callback: function ($$v) {
|
|
3412
|
+
_vm.$set(_vm.values, "priority", $$v);
|
|
3413
|
+
},
|
|
3414
|
+
expression: "values.priority",
|
|
3415
|
+
},
|
|
3416
|
+
}),
|
|
3417
|
+
],
|
|
3418
|
+
1
|
|
3419
|
+
),
|
|
3423
3420
|
_vm._v(" "),
|
|
3424
3421
|
_c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
|
|
3425
3422
|
_vm._v(" "),
|
|
@@ -3477,6 +3474,59 @@ var __vue_render__$2 = function () {
|
|
|
3477
3474
|
},
|
|
3478
3475
|
}),
|
|
3479
3476
|
_vm._v(" "),
|
|
3477
|
+
_c(
|
|
3478
|
+
"div",
|
|
3479
|
+
{ staticClass: "link" },
|
|
3480
|
+
[
|
|
3481
|
+
_c("form-field", {
|
|
3482
|
+
attrs: {
|
|
3483
|
+
name: "link",
|
|
3484
|
+
label: _vm.$t("banners:link"),
|
|
3485
|
+
error: _vm.errors.name,
|
|
3486
|
+
},
|
|
3487
|
+
model: {
|
|
3488
|
+
value: _vm.values.link,
|
|
3489
|
+
callback: function ($$v) {
|
|
3490
|
+
_vm.$set(_vm.values, "link", $$v);
|
|
3491
|
+
},
|
|
3492
|
+
expression: "values.link",
|
|
3493
|
+
},
|
|
3494
|
+
}),
|
|
3495
|
+
_vm._v(" "),
|
|
3496
|
+
_c("form-field-checkbox", {
|
|
3497
|
+
attrs: {
|
|
3498
|
+
name: "openNewTab",
|
|
3499
|
+
label: _vm.$t("banners:openNewTab"),
|
|
3500
|
+
error: _vm.errors.openNewTab,
|
|
3501
|
+
},
|
|
3502
|
+
model: {
|
|
3503
|
+
value: _vm.values.openNewTab,
|
|
3504
|
+
callback: function ($$v) {
|
|
3505
|
+
_vm.$set(_vm.values, "openNewTab", $$v);
|
|
3506
|
+
},
|
|
3507
|
+
expression: "values.openNewTab",
|
|
3508
|
+
},
|
|
3509
|
+
}),
|
|
3510
|
+
],
|
|
3511
|
+
1
|
|
3512
|
+
),
|
|
3513
|
+
_vm._v(" "),
|
|
3514
|
+
_c("form-field-file-input", {
|
|
3515
|
+
attrs: {
|
|
3516
|
+
name: "image",
|
|
3517
|
+
"file-type": "image",
|
|
3518
|
+
label: _vm.$t("banners:image"),
|
|
3519
|
+
error: _vm.errors.file,
|
|
3520
|
+
},
|
|
3521
|
+
model: {
|
|
3522
|
+
value: _vm.values.image,
|
|
3523
|
+
callback: function ($$v) {
|
|
3524
|
+
_vm.$set(_vm.values, "image", $$v);
|
|
3525
|
+
},
|
|
3526
|
+
expression: "values.image",
|
|
3527
|
+
},
|
|
3528
|
+
}),
|
|
3529
|
+
_vm._v(" "),
|
|
3480
3530
|
_c("form-field", {
|
|
3481
3531
|
attrs: {
|
|
3482
3532
|
name: "comment",
|
|
@@ -3525,7 +3575,7 @@ __vue_render__$2._withStripped = true;
|
|
|
3525
3575
|
/* style */
|
|
3526
3576
|
const __vue_inject_styles__$2 = function (inject) {
|
|
3527
3577
|
if (!inject) return
|
|
3528
|
-
inject("data-v-
|
|
3578
|
+
inject("data-v-6400fd96_0", { source: ".date {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n column-gap: 10px;\n}\n.zone {\n display: flex;\n}\n.zone > *:first-child {\n flex: 1 1 1px;\n}\n.zone > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n}\n.link {\n display: flex;\n align-items: flex-end;\n}\n.link > *:first-child {\n flex: 1 1 1px;\n}\n.link > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */", map: {"version":3,"sources":["/home/runner/work/tager-admin-banners/tager-admin-banners/src/views/Banners/BannerForm/BannerForm.vue","BannerForm.vue"],"names":[],"mappings":"AAiPA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AChPA;ADmPA;EACA,aAAA;AChPA;ADkPA;EACA,aAAA;AChPA;ADmPA;EACA,eAAA;EACA,iBAAA;ACjPA;ADqPA;EACA,aAAA;EACA,qBAAA;AClPA;ADoPA;EACA,aAAA;AClPA;ADqPA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;ACnPA;;AAEA,yCAAyC","file":"BannerForm.vue","sourcesContent":["<template>\n <page\n :title=\"\n isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')\n \"\n :is-content-loading=\"isContentLoading\"\n >\n <template v-slot:content>\n <form novalidate @submit.prevent=\"submitForm\">\n <div class=\"zone\">\n <form-field-select\n v-model=\"values.bannerZone\"\n name=\"bannerZone\"\n :label=\"$t('banners:zone')\"\n :options=\"zonesOptionList\"\n :error=\"errors.bannerZone\"\n />\n\n <form-field\n v-model=\"values.priority\"\n name=\"priority\"\n :label=\"$t('banners:priority')\"\n :error=\"errors.priority\"\n />\n </div>\n\n <input-label>{{ $t('banners:period') }}</input-label>\n\n <div class=\"date\">\n <form-field\n v-model=\"values.dateStart\"\n :label=\"$t('banners:from')\"\n name=\"dateStart\"\n type=\"date\"\n :max=\"values.dateEnd\"\n />\n\n <form-field\n v-model=\"values.dateEnd\"\n :label=\"$t('banners:to')\"\n name=\"dateEnd\"\n type=\"date\"\n :min=\"values.dateStart\"\n />\n </div>\n\n <form-field-checkbox\n v-model=\"values.disabled\"\n name=\"disabled\"\n :label=\"$t('banners:disabled')\"\n :error=\"errors.disabled\"\n />\n\n <div class=\"link\">\n <form-field\n v-model=\"values.link\"\n name=\"link\"\n :label=\"$t('banners:link')\"\n :error=\"errors.name\"\n />\n\n <form-field-checkbox\n v-model=\"values.openNewTab\"\n name=\"openNewTab\"\n :label=\"$t('banners:openNewTab')\"\n :error=\"errors.openNewTab\"\n />\n </div>\n\n <form-field-file-input\n v-model=\"values.image\"\n name=\"image\"\n file-type=\"image\"\n :label=\"$t('banners:image')\"\n :error=\"errors.file\"\n />\n\n <form-field\n v-model=\"values.comment\"\n name=\"comment\"\n type=\"textarea\"\n :label=\"$t('banners:comment')\"\n :error=\"errors.comment\"\n />\n </form>\n </template>\n\n <template v-slot:footer>\n <FormFooter\n :back-href=\"bannerListUrl\"\n :on-submit=\"submitForm\"\n :is-submitting=\"isSubmitting\"\n :is-creation=\"isCreation\"\n :can-create-another=\"isCreation\"\n />\n </template>\n </page>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n SetupContext,\n watch,\n} from '@vue/composition-api';\n\nimport {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';\nimport {convertRequestErrorToMap} from '@tager/admin-services';\n\nimport {useFetchZones} from '../../../hooks';\nimport {BannerFormValues} from '../../../typings/banners';\nimport {useFetchBanner} from '../../../hooks/useFetchBanner';\nimport {\n getBannersBannerFormUrl,\n getBannersBannerListUrl,\n} from '../../../constants/paths';\nimport {createBanner, updateBanner} from '../../../services/requests';\n\nimport {\n convertBannerFormValuesToPayload,\n convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n name: 'BannerForm',\n components: {FormFooter},\n setup(props, context: SetupContext) {\n const bannerId = computed<string>(\n () => context.root.$route.params.bannerId\n );\n const isCreation = computed<boolean>(() => bannerId.value === 'create');\n\n /** Zones **/\n\n const {data: zones, loading: isZonesLoading} = useFetchZones({context});\n\n const zonesOptionList = computed<OptionType[]>(() =>\n zones.value.map<OptionType>((zone) => ({\n value: zone.id,\n label: zone.name,\n }))\n );\n\n /** Banner **/\n\n const {data: banner, loading: isBannerLoading} = useFetchBanner({\n context,\n bannerId,\n isCreation,\n });\n\n /** Form State **/\n\n const isSubmitting = ref<boolean>(false);\n const values = ref<BannerFormValues>(\n convertBannerToFormValues(banner.value, zonesOptionList.value)\n );\n const errors = ref<Record<string, string>>({});\n\n watch([banner, zones], () => {\n values.value = convertBannerToFormValues(\n banner.value,\n zonesOptionList.value\n );\n });\n\n const submitForm = (event: TagerFormSubmitEvent) => {\n isSubmitting.value = true;\n\n const body = convertBannerFormValuesToPayload(values.value);\n\n const requestPromise = isCreation.value\n ? createBanner(body)\n : updateBanner(bannerId.value, body);\n\n requestPromise\n .then(({data}) => {\n errors.value = {};\n\n if (event.type === 'create') {\n context.root.$router.push(\n getBannersBannerFormUrl({bannerId: String(data.id)})\n );\n }\n\n if (event.type === 'create_exit' || event.type === 'save_exit') {\n context.root.$router.push(getBannersBannerListUrl());\n }\n\n if (event.type === 'create_create-another') {\n values.value = convertBannerToFormValues(\n null,\n zonesOptionList.value\n );\n }\n\n context.root.$toast({\n variant: 'success',\n title: context.root.$t('banners:success'),\n body: isCreation.value\n ? context.root.$t('banners:bannerWasSuccessfullyCreated')\n : context.root.$t('banners:bannerWasSuccessfullyUpdated'),\n });\n })\n .catch((error) => {\n console.error(error);\n errors.value = convertRequestErrorToMap(error);\n context.root.$toast({\n variant: 'danger',\n title: context.root.$t('banners:error'),\n body: isCreation.value\n ? context.root.$t('banners:bannerCreationWasFailed')\n : context.root.$t('banners:bannerUpdateWasFailed'),\n });\n })\n .finally(() => {\n isSubmitting.value = false;\n });\n };\n\n const isContentLoading = computed<boolean>(\n () => isBannerLoading.value || isZonesLoading.value\n );\n\n return {\n isCreation,\n isContentLoading,\n isSubmitting,\n values,\n errors,\n submitForm,\n bannerListUrl: getBannersBannerListUrl(),\n zonesOptionList,\n };\n },\n});\n</script>\n\n<style lang=\"scss\">\n.date {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n column-gap: 10px;\n}\n\n.zone {\n display: flex;\n\n > *:first-child {\n flex: 1 1 1px;\n }\n\n > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n }\n}\n\n.link {\n display: flex;\n align-items: flex-end;\n\n > *:first-child {\n flex: 1 1 1px;\n }\n\n > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n padding-bottom: 8px;\n }\n}\n</style>\n",".date {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n column-gap: 10px;\n}\n\n.zone {\n display: flex;\n}\n.zone > *:first-child {\n flex: 1 1 1px;\n}\n.zone > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n}\n\n.link {\n display: flex;\n align-items: flex-end;\n}\n.link > *:first-child {\n flex: 1 1 1px;\n}\n.link > *:last-child {\n flex-basis: 30%;\n margin-left: 20px;\n padding-bottom: 8px;\n}\n\n/*# sourceMappingURL=BannerForm.vue.map */"]}, media: undefined });
|
|
3529
3579
|
|
|
3530
3580
|
};
|
|
3531
3581
|
/* scoped */
|
|
@@ -3604,7 +3654,7 @@ function getBannersMenuItem(params) {
|
|
|
3604
3654
|
};
|
|
3605
3655
|
}
|
|
3606
3656
|
|
|
3607
|
-
i18n.addTranslations('en', '
|
|
3608
|
-
i18n.addTranslations('ru', '
|
|
3657
|
+
i18n.addTranslations('en', 'banners', EN);
|
|
3658
|
+
i18n.addTranslations('ru', 'banners', RU);
|
|
3609
3659
|
|
|
3610
3660
|
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 };
|