@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.umd.js
CHANGED
|
@@ -29,6 +29,8 @@
|
|
|
29
29
|
remove: 'Remove',
|
|
30
30
|
actions: 'actions',
|
|
31
31
|
date: 'Date',
|
|
32
|
+
name: 'Name',
|
|
33
|
+
priority: 'Priority',
|
|
32
34
|
success: 'Success',
|
|
33
35
|
error: 'Error',
|
|
34
36
|
statuses: {
|
|
@@ -68,6 +70,8 @@
|
|
|
68
70
|
remove: 'Удалить',
|
|
69
71
|
actions: 'Действия',
|
|
70
72
|
date: 'Дата',
|
|
73
|
+
name: 'Название',
|
|
74
|
+
priority: 'Приоритет',
|
|
71
75
|
success: 'Успех',
|
|
72
76
|
error: 'Ошибка',
|
|
73
77
|
statuses: {
|
|
@@ -2749,12 +2753,13 @@
|
|
|
2749
2753
|
return '';
|
|
2750
2754
|
}
|
|
2751
2755
|
}
|
|
2752
|
-
function getColumnDefs$1(t) {
|
|
2756
|
+
function getColumnDefs$1(zoneList, t) {
|
|
2753
2757
|
return [
|
|
2754
2758
|
{
|
|
2755
2759
|
id: 0,
|
|
2756
2760
|
name: '#',
|
|
2757
2761
|
field: 'id',
|
|
2762
|
+
format: ({ rowIndex }) => String(rowIndex + 1),
|
|
2758
2763
|
style: { width: '50px', textAlign: 'center' },
|
|
2759
2764
|
headStyle: { width: '50px', textAlign: 'center' },
|
|
2760
2765
|
},
|
|
@@ -2762,7 +2767,12 @@
|
|
|
2762
2767
|
id: 1,
|
|
2763
2768
|
name: t('banners:zone'),
|
|
2764
2769
|
field: 'bannerZone',
|
|
2765
|
-
format: ({ row }) =>
|
|
2770
|
+
format: ({ row }) => {
|
|
2771
|
+
const foundBannerZone = zoneList.find((zone) => zone.id === row.bannerZone);
|
|
2772
|
+
return foundBannerZone
|
|
2773
|
+
? foundBannerZone.name
|
|
2774
|
+
: t('banners:bannerZoneIsDeleted');
|
|
2775
|
+
},
|
|
2766
2776
|
},
|
|
2767
2777
|
{
|
|
2768
2778
|
id: 2,
|
|
@@ -2774,18 +2784,25 @@
|
|
|
2774
2784
|
},
|
|
2775
2785
|
{
|
|
2776
2786
|
id: 3,
|
|
2787
|
+
name: t('banners:priority'),
|
|
2788
|
+
field: 'priority',
|
|
2789
|
+
style: { width: '100px', textAlign: 'center' },
|
|
2790
|
+
headStyle: { width: '100px', textAlign: 'center' },
|
|
2791
|
+
},
|
|
2792
|
+
{
|
|
2793
|
+
id: 4,
|
|
2777
2794
|
name: t('banners:period'),
|
|
2778
2795
|
field: 'dateStart',
|
|
2779
2796
|
format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
|
|
2780
2797
|
},
|
|
2781
2798
|
{
|
|
2782
|
-
id:
|
|
2799
|
+
id: 5,
|
|
2783
2800
|
name: t('banners:image'),
|
|
2784
2801
|
field: 'image',
|
|
2785
2802
|
type: 'image',
|
|
2786
2803
|
},
|
|
2787
2804
|
{
|
|
2788
|
-
id:
|
|
2805
|
+
id: 6,
|
|
2789
2806
|
name: t('banners:link'),
|
|
2790
2807
|
field: 'link',
|
|
2791
2808
|
type: 'name',
|
|
@@ -2804,14 +2821,17 @@
|
|
|
2804
2821
|
],
|
|
2805
2822
|
});
|
|
2806
2823
|
},
|
|
2824
|
+
options: {
|
|
2825
|
+
shouldOpenNewTab: true,
|
|
2826
|
+
},
|
|
2807
2827
|
},
|
|
2808
2828
|
{
|
|
2809
|
-
id:
|
|
2829
|
+
id: 7,
|
|
2810
2830
|
name: t('banners:comment'),
|
|
2811
2831
|
field: 'comment',
|
|
2812
2832
|
},
|
|
2813
2833
|
{
|
|
2814
|
-
id:
|
|
2834
|
+
id: 8,
|
|
2815
2835
|
name: t('banners:actions'),
|
|
2816
2836
|
field: 'actions',
|
|
2817
2837
|
style: { whiteSpace: 'nowrap', width: '100px' },
|
|
@@ -2862,7 +2882,7 @@
|
|
|
2862
2882
|
/** Params **/
|
|
2863
2883
|
const filterParams = compositionApi.computed(() => adminUi.getFilterParams({
|
|
2864
2884
|
[FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
|
|
2865
|
-
[FilterTypes.Date]: dateFilter.value,
|
|
2885
|
+
[FilterTypes.Date]: dateFilter.value || [],
|
|
2866
2886
|
[FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
|
|
2867
2887
|
}));
|
|
2868
2888
|
/** Tag removal handler **/
|
|
@@ -2928,7 +2948,7 @@
|
|
|
2928
2948
|
const isBusy = (bannerId) => {
|
|
2929
2949
|
return isDeleting(bannerId) || isBannersLoading.value;
|
|
2930
2950
|
};
|
|
2931
|
-
const columnDefs = compositionApi.computed(() => getColumnDefs$1(context.root.$t));
|
|
2951
|
+
const columnDefs = compositionApi.computed(() => getColumnDefs$1(zoneList.value, context.root.$t));
|
|
2932
2952
|
const isRowDataLoading = compositionApi.computed(() => isBannersLoading.value || isZonesLoading.value);
|
|
2933
2953
|
return {
|
|
2934
2954
|
columnDefs,
|
|
@@ -3179,7 +3199,7 @@
|
|
|
3179
3199
|
/* style */
|
|
3180
3200
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3181
3201
|
if (!inject) return
|
|
3182
|
-
inject("data-v-
|
|
3202
|
+
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 });
|
|
3183
3203
|
|
|
3184
3204
|
};
|
|
3185
3205
|
/* scoped */
|
|
@@ -3230,22 +3250,23 @@
|
|
|
3230
3250
|
}
|
|
3231
3251
|
|
|
3232
3252
|
function convertBannerToFormValues(banner, zonesOptionList) {
|
|
3233
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3253
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
3234
3254
|
const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
|
|
3235
3255
|
return {
|
|
3236
|
-
|
|
3256
|
+
priority: (_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1,
|
|
3257
|
+
link: (_b = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _b !== void 0 ? _b : '',
|
|
3237
3258
|
image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: adminServices.createId(), file: banner.image } : null,
|
|
3238
3259
|
bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
|
|
3239
|
-
openNewTab: (
|
|
3240
|
-
dateStart: (
|
|
3241
|
-
dateEnd: (
|
|
3242
|
-
disabled: (
|
|
3243
|
-
comment: (
|
|
3260
|
+
openNewTab: (_c = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _c !== void 0 ? _c : false,
|
|
3261
|
+
dateStart: (_d = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _d !== void 0 ? _d : '',
|
|
3262
|
+
dateEnd: (_e = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _e !== void 0 ? _e : '',
|
|
3263
|
+
disabled: (_f = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _f !== void 0 ? _f : false,
|
|
3264
|
+
comment: (_g = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _g !== void 0 ? _g : '',
|
|
3244
3265
|
};
|
|
3245
3266
|
}
|
|
3246
3267
|
function convertBannerFormValuesToPayload(values) {
|
|
3247
3268
|
var _a, _b, _c, _d;
|
|
3248
|
-
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 : '' });
|
|
3269
|
+
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 : '' });
|
|
3249
3270
|
}
|
|
3250
3271
|
|
|
3251
3272
|
var script$2 = compositionApi.defineComponent({
|
|
@@ -3360,67 +3381,43 @@
|
|
|
3360
3381
|
},
|
|
3361
3382
|
},
|
|
3362
3383
|
[
|
|
3363
|
-
_c(
|
|
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
|
-
},
|
|
3401
|
-
model: {
|
|
3402
|
-
value: _vm.values.link,
|
|
3403
|
-
callback: function ($$v) {
|
|
3404
|
-
_vm.$set(_vm.values, "link", $$v);
|
|
3405
|
-
},
|
|
3406
|
-
expression: "values.link",
|
|
3407
|
-
},
|
|
3408
|
-
}),
|
|
3409
|
-
_vm._v(" "),
|
|
3410
|
-
_c("form-field-checkbox", {
|
|
3411
|
-
attrs: {
|
|
3412
|
-
name: "openNewTab",
|
|
3413
|
-
label: _vm.$t("banners:openNewTab"),
|
|
3414
|
-
error: _vm.errors.openNewTab,
|
|
3415
|
-
},
|
|
3416
|
-
model: {
|
|
3417
|
-
value: _vm.values.openNewTab,
|
|
3418
|
-
callback: function ($$v) {
|
|
3419
|
-
_vm.$set(_vm.values, "openNewTab", $$v);
|
|
3420
|
-
},
|
|
3421
|
-
expression: "values.openNewTab",
|
|
3422
|
-
},
|
|
3423
|
-
}),
|
|
3384
|
+
_c(
|
|
3385
|
+
"div",
|
|
3386
|
+
{ staticClass: "zone" },
|
|
3387
|
+
[
|
|
3388
|
+
_c("form-field-select", {
|
|
3389
|
+
attrs: {
|
|
3390
|
+
name: "bannerZone",
|
|
3391
|
+
label: _vm.$t("banners:zone"),
|
|
3392
|
+
options: _vm.zonesOptionList,
|
|
3393
|
+
error: _vm.errors.bannerZone,
|
|
3394
|
+
},
|
|
3395
|
+
model: {
|
|
3396
|
+
value: _vm.values.bannerZone,
|
|
3397
|
+
callback: function ($$v) {
|
|
3398
|
+
_vm.$set(_vm.values, "bannerZone", $$v);
|
|
3399
|
+
},
|
|
3400
|
+
expression: "values.bannerZone",
|
|
3401
|
+
},
|
|
3402
|
+
}),
|
|
3403
|
+
_vm._v(" "),
|
|
3404
|
+
_c("form-field", {
|
|
3405
|
+
attrs: {
|
|
3406
|
+
name: "priority",
|
|
3407
|
+
label: _vm.$t("banners:priority"),
|
|
3408
|
+
error: _vm.errors.priority,
|
|
3409
|
+
},
|
|
3410
|
+
model: {
|
|
3411
|
+
value: _vm.values.priority,
|
|
3412
|
+
callback: function ($$v) {
|
|
3413
|
+
_vm.$set(_vm.values, "priority", $$v);
|
|
3414
|
+
},
|
|
3415
|
+
expression: "values.priority",
|
|
3416
|
+
},
|
|
3417
|
+
}),
|
|
3418
|
+
],
|
|
3419
|
+
1
|
|
3420
|
+
),
|
|
3424
3421
|
_vm._v(" "),
|
|
3425
3422
|
_c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
|
|
3426
3423
|
_vm._v(" "),
|
|
@@ -3478,6 +3475,59 @@
|
|
|
3478
3475
|
},
|
|
3479
3476
|
}),
|
|
3480
3477
|
_vm._v(" "),
|
|
3478
|
+
_c(
|
|
3479
|
+
"div",
|
|
3480
|
+
{ staticClass: "link" },
|
|
3481
|
+
[
|
|
3482
|
+
_c("form-field", {
|
|
3483
|
+
attrs: {
|
|
3484
|
+
name: "link",
|
|
3485
|
+
label: _vm.$t("banners:link"),
|
|
3486
|
+
error: _vm.errors.name,
|
|
3487
|
+
},
|
|
3488
|
+
model: {
|
|
3489
|
+
value: _vm.values.link,
|
|
3490
|
+
callback: function ($$v) {
|
|
3491
|
+
_vm.$set(_vm.values, "link", $$v);
|
|
3492
|
+
},
|
|
3493
|
+
expression: "values.link",
|
|
3494
|
+
},
|
|
3495
|
+
}),
|
|
3496
|
+
_vm._v(" "),
|
|
3497
|
+
_c("form-field-checkbox", {
|
|
3498
|
+
attrs: {
|
|
3499
|
+
name: "openNewTab",
|
|
3500
|
+
label: _vm.$t("banners:openNewTab"),
|
|
3501
|
+
error: _vm.errors.openNewTab,
|
|
3502
|
+
},
|
|
3503
|
+
model: {
|
|
3504
|
+
value: _vm.values.openNewTab,
|
|
3505
|
+
callback: function ($$v) {
|
|
3506
|
+
_vm.$set(_vm.values, "openNewTab", $$v);
|
|
3507
|
+
},
|
|
3508
|
+
expression: "values.openNewTab",
|
|
3509
|
+
},
|
|
3510
|
+
}),
|
|
3511
|
+
],
|
|
3512
|
+
1
|
|
3513
|
+
),
|
|
3514
|
+
_vm._v(" "),
|
|
3515
|
+
_c("form-field-file-input", {
|
|
3516
|
+
attrs: {
|
|
3517
|
+
name: "image",
|
|
3518
|
+
"file-type": "image",
|
|
3519
|
+
label: _vm.$t("banners:image"),
|
|
3520
|
+
error: _vm.errors.file,
|
|
3521
|
+
},
|
|
3522
|
+
model: {
|
|
3523
|
+
value: _vm.values.image,
|
|
3524
|
+
callback: function ($$v) {
|
|
3525
|
+
_vm.$set(_vm.values, "image", $$v);
|
|
3526
|
+
},
|
|
3527
|
+
expression: "values.image",
|
|
3528
|
+
},
|
|
3529
|
+
}),
|
|
3530
|
+
_vm._v(" "),
|
|
3481
3531
|
_c("form-field", {
|
|
3482
3532
|
attrs: {
|
|
3483
3533
|
name: "comment",
|
|
@@ -3526,7 +3576,7 @@
|
|
|
3526
3576
|
/* style */
|
|
3527
3577
|
const __vue_inject_styles__$2 = function (inject) {
|
|
3528
3578
|
if (!inject) return
|
|
3529
|
-
inject("data-v-
|
|
3579
|
+
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 });
|
|
3530
3580
|
|
|
3531
3581
|
};
|
|
3532
3582
|
/* scoped */
|
|
@@ -3605,8 +3655,8 @@
|
|
|
3605
3655
|
};
|
|
3606
3656
|
}
|
|
3607
3657
|
|
|
3608
|
-
adminServices.i18n.addTranslations('en', '
|
|
3609
|
-
adminServices.i18n.addTranslations('ru', '
|
|
3658
|
+
adminServices.i18n.addTranslations('en', 'banners', EN);
|
|
3659
|
+
adminServices.i18n.addTranslations('ru', 'banners', RU);
|
|
3610
3660
|
|
|
3611
3661
|
exports.BANNERS_BANNER_FORM_ROUTE = BANNERS_BANNER_FORM_ROUTE;
|
|
3612
3662
|
exports.BANNERS_BANNER_LIST_ROUTE = BANNERS_BANNER_LIST_ROUTE;
|
package/dist/locales/en.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare enum Status {
|
|
|
9
9
|
export interface Banner {
|
|
10
10
|
id: number;
|
|
11
11
|
status: Status;
|
|
12
|
+
priority: number;
|
|
12
13
|
link: Nullable<string>;
|
|
13
14
|
image: Nullable<FileType>;
|
|
14
15
|
bannerZone: Nullable<string>;
|
|
@@ -22,6 +23,7 @@ export interface BannerFormValues {
|
|
|
22
23
|
link: Nullable<string>;
|
|
23
24
|
image: Nullable<SingleFileInputValueType>;
|
|
24
25
|
bannerZone: Nullable<OptionType>;
|
|
26
|
+
priority: number;
|
|
25
27
|
openNewTab: boolean;
|
|
26
28
|
dateStart: string;
|
|
27
29
|
dateEnd: string;
|
|
@@ -31,10 +33,11 @@ export interface BannerFormValues {
|
|
|
31
33
|
export interface BannerPayload {
|
|
32
34
|
link: Nullable<string>;
|
|
33
35
|
image: Nullable<string>;
|
|
36
|
+
priority: number;
|
|
34
37
|
bannerZone: string;
|
|
35
38
|
openNewTab: boolean;
|
|
36
|
-
dateStart: string
|
|
37
|
-
dateEnd: string
|
|
39
|
+
dateStart: Nullable<string>;
|
|
40
|
+
dateEnd: Nullable<string>;
|
|
38
41
|
disabled: boolean;
|
|
39
42
|
comment: string;
|
|
40
43
|
}
|
|
@@ -21,6 +21,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
21
21
|
label: string;
|
|
22
22
|
disabled?: boolean | undefined;
|
|
23
23
|
} | null;
|
|
24
|
+
priority: number;
|
|
24
25
|
openNewTab: boolean;
|
|
25
26
|
dateStart: string;
|
|
26
27
|
dateEnd: string;
|
|
@@ -61,6 +62,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
|
|
|
61
62
|
label: string;
|
|
62
63
|
disabled?: boolean | undefined;
|
|
63
64
|
} | null;
|
|
65
|
+
priority: number;
|
|
64
66
|
openNewTab: boolean;
|
|
65
67
|
dateStart: string;
|
|
66
68
|
dateEnd: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { TFunction } from 'i18next';
|
|
2
2
|
import { ColumnDefinition } from '@tager/admin-ui';
|
|
3
3
|
import { Banner, Status } from '../../../typings/banners';
|
|
4
|
+
import { Zone } from '../../../typings/zones';
|
|
4
5
|
export declare function getStatus(type: Status, t: TFunction): string;
|
|
5
|
-
export declare function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[];
|
|
6
|
+
export declare function getColumnDefs(zoneList: Zone[], t: TFunction): ColumnDefinition<Banner>[];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tager/admin-banners",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"@rollup/plugin-commonjs": "^15.0.0",
|
|
28
28
|
"@rollup/plugin-node-resolve": "^9.0.0",
|
|
29
29
|
"@tager/admin-dynamic-field": "^0.1.18",
|
|
30
|
-
"@tager/admin-layout": "^0.5.
|
|
30
|
+
"@tager/admin-layout": "^0.5.4",
|
|
31
31
|
"@tager/admin-services": "^0.2.26",
|
|
32
|
-
"@tager/admin-ui": "^0.8.
|
|
32
|
+
"@tager/admin-ui": "^0.8.96",
|
|
33
33
|
"@types/lodash.isequal": "^4.5.5",
|
|
34
34
|
"@types/lodash.pick": "^4.4.6",
|
|
35
35
|
"@types/node": "12.x",
|
package/src/locales/en.ts
CHANGED
package/src/locales/ru.ts
CHANGED
package/src/main.ts
CHANGED
|
@@ -3,8 +3,8 @@ import { i18n } from '@tager/admin-services';
|
|
|
3
3
|
import EN from './locales/en';
|
|
4
4
|
import RU from './locales/ru';
|
|
5
5
|
|
|
6
|
-
i18n.addTranslations('en', '
|
|
7
|
-
i18n.addTranslations('ru', '
|
|
6
|
+
i18n.addTranslations('en', 'banners', EN);
|
|
7
|
+
i18n.addTranslations('ru', 'banners', RU);
|
|
8
8
|
|
|
9
9
|
export * from './constants/routes';
|
|
10
10
|
export * from './constants/menu';
|
package/src/typings/banners.ts
CHANGED
|
@@ -11,6 +11,7 @@ export enum Status {
|
|
|
11
11
|
export interface Banner {
|
|
12
12
|
id: number;
|
|
13
13
|
status: Status;
|
|
14
|
+
priority: number;
|
|
14
15
|
link: Nullable<string>;
|
|
15
16
|
image: Nullable<FileType>;
|
|
16
17
|
bannerZone: Nullable<string>;
|
|
@@ -25,6 +26,7 @@ export interface BannerFormValues {
|
|
|
25
26
|
link: Nullable<string>;
|
|
26
27
|
image: Nullable<SingleFileInputValueType>;
|
|
27
28
|
bannerZone: Nullable<OptionType>;
|
|
29
|
+
priority: number;
|
|
28
30
|
openNewTab: boolean;
|
|
29
31
|
dateStart: string;
|
|
30
32
|
dateEnd: string;
|
|
@@ -35,10 +37,11 @@ export interface BannerFormValues {
|
|
|
35
37
|
export interface BannerPayload {
|
|
36
38
|
link: Nullable<string>;
|
|
37
39
|
image: Nullable<string>;
|
|
40
|
+
priority: number;
|
|
38
41
|
bannerZone: string;
|
|
39
42
|
openNewTab: boolean;
|
|
40
|
-
dateStart: string
|
|
41
|
-
dateEnd: string
|
|
43
|
+
dateStart: Nullable<string>;
|
|
44
|
+
dateEnd: Nullable<string>;
|
|
42
45
|
disabled: boolean;
|
|
43
46
|
comment: string;
|
|
44
47
|
}
|
|
@@ -16,6 +16,7 @@ export function convertBannerToFormValues(
|
|
|
16
16
|
);
|
|
17
17
|
|
|
18
18
|
return {
|
|
19
|
+
priority: banner?.priority ?? 1,
|
|
19
20
|
link: banner?.link ?? '',
|
|
20
21
|
image: banner?.image ? { id: createId(), file: banner.image } : null,
|
|
21
22
|
bannerZone: foundZone ?? null,
|
|
@@ -32,6 +33,9 @@ export function convertBannerFormValuesToPayload(
|
|
|
32
33
|
): BannerPayload {
|
|
33
34
|
return {
|
|
34
35
|
...values,
|
|
36
|
+
priority: values.priority ? Number(values.priority) : 1,
|
|
37
|
+
dateStart: values.dateStart ? values.dateStart : null,
|
|
38
|
+
dateEnd: values.dateEnd ? values.dateEnd : null,
|
|
35
39
|
image: values.image?.file.id ?? null,
|
|
36
40
|
bannerZone: values.bannerZone?.value ?? '',
|
|
37
41
|
};
|