@tager/admin-banners 0.3.3 → 0.3.7
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/hooks/useFetchZoneFields.d.ts +8 -0
- package/dist/index.esm.js +182 -83
- package/dist/index.umd.js +185 -86
- package/dist/locales/en.d.ts +2 -0
- package/dist/services/requests.d.ts +2 -1
- package/dist/typings/banners.d.ts +9 -2
- package/dist/typings/zones.d.ts +4 -0
- package/dist/views/Banners/BannerForm/BannerForm.vue.d.ts +9170 -0
- package/dist/views/Banners/BannerList/BannerList.helpers.d.ts +2 -1
- package/package.json +3 -3
- package/src/hooks/useFetchZoneFields.ts +48 -0
- package/src/locales/en.ts +2 -0
- package/src/locales/ru.ts +2 -0
- package/src/services/requests.ts +7 -1
- package/src/typings/banners.ts +14 -2
- package/src/typings/zones.ts +6 -0
- package/src/views/Banners/BannerForm/BannerForm.helpers.ts +10 -0
- package/src/views/Banners/BannerForm/BannerForm.vue +98 -30
- 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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tager/admin-services'), require('@vue/composition-api'), require('@tager/admin-ui'), require('path-to-regexp')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', '@tager/admin-services', '@vue/composition-api', '@tager/admin-ui', 'path-to-regexp'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TagerAdminBanners = {}, global.adminServices, global.compositionApi, global.adminUi, global.pathToRegexp));
|
|
5
|
-
}(this, (function (exports, adminServices, compositionApi, adminUi, pathToRegexp) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tager/admin-services'), require('@vue/composition-api'), require('@tager/admin-ui'), require('path-to-regexp'), require('@tager/admin-dynamic-field')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', '@tager/admin-services', '@vue/composition-api', '@tager/admin-ui', 'path-to-regexp', '@tager/admin-dynamic-field'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TagerAdminBanners = {}, global.adminServices, global.compositionApi, global.adminUi, global.pathToRegexp, global.adminDynamicField));
|
|
5
|
+
}(this, (function (exports, adminServices, compositionApi, adminUi, pathToRegexp, adminDynamicField) { 'use strict';
|
|
6
6
|
|
|
7
7
|
const EN = {
|
|
8
8
|
home: 'Home',
|
|
@@ -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: {
|
|
@@ -86,6 +90,9 @@
|
|
|
86
90
|
function getZones(params) {
|
|
87
91
|
return adminServices.request.get({ path: '/admin/adv/zones', params });
|
|
88
92
|
}
|
|
93
|
+
function getZoneFields(zoneId) {
|
|
94
|
+
return adminServices.request.get({ path: `/admin/adv/zones/${zoneId}` });
|
|
95
|
+
}
|
|
89
96
|
/** Banners **/
|
|
90
97
|
function getBanners(params) {
|
|
91
98
|
return adminServices.request.get({ path: '/admin/adv', params });
|
|
@@ -2749,12 +2756,13 @@
|
|
|
2749
2756
|
return '';
|
|
2750
2757
|
}
|
|
2751
2758
|
}
|
|
2752
|
-
function getColumnDefs$1(t) {
|
|
2759
|
+
function getColumnDefs$1(zoneList, t) {
|
|
2753
2760
|
return [
|
|
2754
2761
|
{
|
|
2755
2762
|
id: 0,
|
|
2756
2763
|
name: '#',
|
|
2757
2764
|
field: 'id',
|
|
2765
|
+
format: ({ rowIndex }) => String(rowIndex + 1),
|
|
2758
2766
|
style: { width: '50px', textAlign: 'center' },
|
|
2759
2767
|
headStyle: { width: '50px', textAlign: 'center' },
|
|
2760
2768
|
},
|
|
@@ -2762,7 +2770,12 @@
|
|
|
2762
2770
|
id: 1,
|
|
2763
2771
|
name: t('banners:zone'),
|
|
2764
2772
|
field: 'bannerZone',
|
|
2765
|
-
format: ({ row }) =>
|
|
2773
|
+
format: ({ row }) => {
|
|
2774
|
+
const foundBannerZone = zoneList.find((zone) => zone.id === row.bannerZone);
|
|
2775
|
+
return foundBannerZone
|
|
2776
|
+
? foundBannerZone.name
|
|
2777
|
+
: t('banners:bannerZoneIsDeleted');
|
|
2778
|
+
},
|
|
2766
2779
|
},
|
|
2767
2780
|
{
|
|
2768
2781
|
id: 2,
|
|
@@ -2774,18 +2787,25 @@
|
|
|
2774
2787
|
},
|
|
2775
2788
|
{
|
|
2776
2789
|
id: 3,
|
|
2790
|
+
name: t('banners:priority'),
|
|
2791
|
+
field: 'priority',
|
|
2792
|
+
style: { width: '100px', textAlign: 'center' },
|
|
2793
|
+
headStyle: { width: '100px', textAlign: 'center' },
|
|
2794
|
+
},
|
|
2795
|
+
{
|
|
2796
|
+
id: 4,
|
|
2777
2797
|
name: t('banners:period'),
|
|
2778
2798
|
field: 'dateStart',
|
|
2779
2799
|
format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
|
|
2780
2800
|
},
|
|
2781
2801
|
{
|
|
2782
|
-
id:
|
|
2802
|
+
id: 5,
|
|
2783
2803
|
name: t('banners:image'),
|
|
2784
2804
|
field: 'image',
|
|
2785
2805
|
type: 'image',
|
|
2786
2806
|
},
|
|
2787
2807
|
{
|
|
2788
|
-
id:
|
|
2808
|
+
id: 6,
|
|
2789
2809
|
name: t('banners:link'),
|
|
2790
2810
|
field: 'link',
|
|
2791
2811
|
type: 'name',
|
|
@@ -2804,14 +2824,17 @@
|
|
|
2804
2824
|
],
|
|
2805
2825
|
});
|
|
2806
2826
|
},
|
|
2827
|
+
options: {
|
|
2828
|
+
shouldOpenNewTab: true,
|
|
2829
|
+
},
|
|
2807
2830
|
},
|
|
2808
2831
|
{
|
|
2809
|
-
id:
|
|
2832
|
+
id: 7,
|
|
2810
2833
|
name: t('banners:comment'),
|
|
2811
2834
|
field: 'comment',
|
|
2812
2835
|
},
|
|
2813
2836
|
{
|
|
2814
|
-
id:
|
|
2837
|
+
id: 8,
|
|
2815
2838
|
name: t('banners:actions'),
|
|
2816
2839
|
field: 'actions',
|
|
2817
2840
|
style: { whiteSpace: 'nowrap', width: '100px' },
|
|
@@ -2862,7 +2885,7 @@
|
|
|
2862
2885
|
/** Params **/
|
|
2863
2886
|
const filterParams = compositionApi.computed(() => adminUi.getFilterParams({
|
|
2864
2887
|
[FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
|
|
2865
|
-
[FilterTypes.Date]: dateFilter.value,
|
|
2888
|
+
[FilterTypes.Date]: dateFilter.value || [],
|
|
2866
2889
|
[FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
|
|
2867
2890
|
}));
|
|
2868
2891
|
/** Tag removal handler **/
|
|
@@ -2928,7 +2951,7 @@
|
|
|
2928
2951
|
const isBusy = (bannerId) => {
|
|
2929
2952
|
return isDeleting(bannerId) || isBannersLoading.value;
|
|
2930
2953
|
};
|
|
2931
|
-
const columnDefs = compositionApi.computed(() => getColumnDefs$1(context.root.$t));
|
|
2954
|
+
const columnDefs = compositionApi.computed(() => getColumnDefs$1(zoneList.value, context.root.$t));
|
|
2932
2955
|
const isRowDataLoading = compositionApi.computed(() => isBannersLoading.value || isZonesLoading.value);
|
|
2933
2956
|
return {
|
|
2934
2957
|
columnDefs,
|
|
@@ -3179,7 +3202,7 @@
|
|
|
3179
3202
|
/* style */
|
|
3180
3203
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3181
3204
|
if (!inject) return
|
|
3182
|
-
inject("data-v-
|
|
3205
|
+
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
3206
|
|
|
3184
3207
|
};
|
|
3185
3208
|
/* scoped */
|
|
@@ -3229,28 +3252,56 @@
|
|
|
3229
3252
|
return resource;
|
|
3230
3253
|
}
|
|
3231
3254
|
|
|
3255
|
+
function useFetchZoneFields({ context, values, }) {
|
|
3256
|
+
const zoneId = compositionApi.computed(() => { var _a, _b; return (_b = (_a = values.value.bannerZone) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : ''; });
|
|
3257
|
+
const [fetchZoneFields, resource] = adminServices.useResource({
|
|
3258
|
+
fetchResource: () => getZoneFields(zoneId.value),
|
|
3259
|
+
initialValue: null,
|
|
3260
|
+
context,
|
|
3261
|
+
resourceName: 'Zone Fields',
|
|
3262
|
+
});
|
|
3263
|
+
compositionApi.onMounted(() => {
|
|
3264
|
+
if (!zoneId.value) {
|
|
3265
|
+
return;
|
|
3266
|
+
}
|
|
3267
|
+
fetchZoneFields();
|
|
3268
|
+
});
|
|
3269
|
+
compositionApi.watch(zoneId, () => {
|
|
3270
|
+
if (!zoneId.value) {
|
|
3271
|
+
return;
|
|
3272
|
+
}
|
|
3273
|
+
fetchZoneFields();
|
|
3274
|
+
});
|
|
3275
|
+
return resource;
|
|
3276
|
+
}
|
|
3277
|
+
|
|
3232
3278
|
function convertBannerToFormValues(banner, zonesOptionList) {
|
|
3233
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3279
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
3234
3280
|
const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
|
|
3235
3281
|
return {
|
|
3236
|
-
|
|
3282
|
+
priority: String((_a = banner === null || banner === void 0 ? void 0 : banner.priority) !== null && _a !== void 0 ? _a : 1),
|
|
3283
|
+
link: (_b = banner === null || banner === void 0 ? void 0 : banner.link) !== null && _b !== void 0 ? _b : '',
|
|
3237
3284
|
image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: adminServices.createId(), file: banner.image } : null,
|
|
3238
3285
|
bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
|
|
3239
|
-
openNewTab: (
|
|
3240
|
-
dateStart: (
|
|
3241
|
-
dateEnd: (
|
|
3242
|
-
disabled: (
|
|
3243
|
-
comment: (
|
|
3286
|
+
openNewTab: (_c = banner === null || banner === void 0 ? void 0 : banner.openNewTab) !== null && _c !== void 0 ? _c : false,
|
|
3287
|
+
dateStart: (_d = banner === null || banner === void 0 ? void 0 : banner.dateStart) !== null && _d !== void 0 ? _d : '',
|
|
3288
|
+
dateEnd: (_e = banner === null || banner === void 0 ? void 0 : banner.dateEnd) !== null && _e !== void 0 ? _e : '',
|
|
3289
|
+
disabled: (_f = banner === null || banner === void 0 ? void 0 : banner.disabled) !== null && _f !== void 0 ? _f : false,
|
|
3290
|
+
comment: (_g = banner === null || banner === void 0 ? void 0 : banner.comment) !== null && _g !== void 0 ? _g : '',
|
|
3291
|
+
fields: [],
|
|
3244
3292
|
};
|
|
3245
3293
|
}
|
|
3246
3294
|
function convertBannerFormValuesToPayload(values) {
|
|
3247
3295
|
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 : ''
|
|
3296
|
+
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 : '', fields: values.fields.map((field) => ({
|
|
3297
|
+
name: field.config.name,
|
|
3298
|
+
value: adminDynamicField.universalFieldUtils.getOutgoingValue(field),
|
|
3299
|
+
})) });
|
|
3249
3300
|
}
|
|
3250
3301
|
|
|
3251
3302
|
var script$2 = compositionApi.defineComponent({
|
|
3252
3303
|
name: 'BannerForm',
|
|
3253
|
-
components: { FormFooter: adminUi.FormFooter },
|
|
3304
|
+
components: { FormFooter: adminUi.FormFooter, DynamicField: adminDynamicField.DynamicField },
|
|
3254
3305
|
setup(props, context) {
|
|
3255
3306
|
const bannerId = compositionApi.computed(() => context.root.$route.params.bannerId);
|
|
3256
3307
|
const isCreation = compositionApi.computed(() => bannerId.value === 'create');
|
|
@@ -3273,6 +3324,15 @@
|
|
|
3273
3324
|
compositionApi.watch([banner, zones], () => {
|
|
3274
3325
|
values.value = convertBannerToFormValues(banner.value, zonesOptionList.value);
|
|
3275
3326
|
});
|
|
3327
|
+
/** Zone Fields **/
|
|
3328
|
+
const { loading: isZoneFieldsLoading, data: zoneFields, } = useFetchZoneFields({ context, values });
|
|
3329
|
+
compositionApi.watch(zoneFields, () => {
|
|
3330
|
+
var _a, _b;
|
|
3331
|
+
values.value.fields = ((_b = (_a = zoneFields.value) === null || _a === void 0 ? void 0 : _a.fields) !== null && _b !== void 0 ? _b : []).map((fieldConfig, index) => {
|
|
3332
|
+
var _a;
|
|
3333
|
+
return adminDynamicField.universalFieldUtils.createFormField(fieldConfig, banner.value ? (_a = banner.value.fields[index].value) !== null && _a !== void 0 ? _a : null : null);
|
|
3334
|
+
});
|
|
3335
|
+
});
|
|
3276
3336
|
const submitForm = (event) => {
|
|
3277
3337
|
isSubmitting.value = true;
|
|
3278
3338
|
const body = convertBannerFormValuesToPayload(values.value);
|
|
@@ -3314,7 +3374,9 @@
|
|
|
3314
3374
|
isSubmitting.value = false;
|
|
3315
3375
|
});
|
|
3316
3376
|
};
|
|
3317
|
-
const isContentLoading = compositionApi.computed(() => isBannerLoading.value ||
|
|
3377
|
+
const isContentLoading = compositionApi.computed(() => isBannerLoading.value ||
|
|
3378
|
+
isZonesLoading.value ||
|
|
3379
|
+
isZoneFieldsLoading.value);
|
|
3318
3380
|
return {
|
|
3319
3381
|
isCreation,
|
|
3320
3382
|
isContentLoading,
|
|
@@ -3360,67 +3422,43 @@
|
|
|
3360
3422
|
},
|
|
3361
3423
|
},
|
|
3362
3424
|
[
|
|
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
|
-
}),
|
|
3425
|
+
_c(
|
|
3426
|
+
"div",
|
|
3427
|
+
{ staticClass: "zone" },
|
|
3428
|
+
[
|
|
3429
|
+
_c("form-field-select", {
|
|
3430
|
+
attrs: {
|
|
3431
|
+
name: "bannerZone",
|
|
3432
|
+
label: _vm.$t("banners:zone"),
|
|
3433
|
+
options: _vm.zonesOptionList,
|
|
3434
|
+
error: _vm.errors.bannerZone,
|
|
3435
|
+
},
|
|
3436
|
+
model: {
|
|
3437
|
+
value: _vm.values.bannerZone,
|
|
3438
|
+
callback: function ($$v) {
|
|
3439
|
+
_vm.$set(_vm.values, "bannerZone", $$v);
|
|
3440
|
+
},
|
|
3441
|
+
expression: "values.bannerZone",
|
|
3442
|
+
},
|
|
3443
|
+
}),
|
|
3444
|
+
_vm._v(" "),
|
|
3445
|
+
_c("form-field", {
|
|
3446
|
+
attrs: {
|
|
3447
|
+
name: "priority",
|
|
3448
|
+
label: _vm.$t("banners:priority"),
|
|
3449
|
+
error: _vm.errors.priority,
|
|
3450
|
+
},
|
|
3451
|
+
model: {
|
|
3452
|
+
value: _vm.values.priority,
|
|
3453
|
+
callback: function ($$v) {
|
|
3454
|
+
_vm.$set(_vm.values, "priority", $$v);
|
|
3455
|
+
},
|
|
3456
|
+
expression: "values.priority",
|
|
3457
|
+
},
|
|
3458
|
+
}),
|
|
3459
|
+
],
|
|
3460
|
+
1
|
|
3461
|
+
),
|
|
3424
3462
|
_vm._v(" "),
|
|
3425
3463
|
_c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
|
|
3426
3464
|
_vm._v(" "),
|
|
@@ -3478,6 +3516,66 @@
|
|
|
3478
3516
|
},
|
|
3479
3517
|
}),
|
|
3480
3518
|
_vm._v(" "),
|
|
3519
|
+
_c(
|
|
3520
|
+
"div",
|
|
3521
|
+
{ staticClass: "link" },
|
|
3522
|
+
[
|
|
3523
|
+
_c("form-field", {
|
|
3524
|
+
attrs: {
|
|
3525
|
+
name: "link",
|
|
3526
|
+
label: _vm.$t("banners:link"),
|
|
3527
|
+
error: _vm.errors.name,
|
|
3528
|
+
},
|
|
3529
|
+
model: {
|
|
3530
|
+
value: _vm.values.link,
|
|
3531
|
+
callback: function ($$v) {
|
|
3532
|
+
_vm.$set(_vm.values, "link", $$v);
|
|
3533
|
+
},
|
|
3534
|
+
expression: "values.link",
|
|
3535
|
+
},
|
|
3536
|
+
}),
|
|
3537
|
+
_vm._v(" "),
|
|
3538
|
+
_c("form-field-checkbox", {
|
|
3539
|
+
attrs: {
|
|
3540
|
+
name: "openNewTab",
|
|
3541
|
+
label: _vm.$t("banners:openNewTab"),
|
|
3542
|
+
error: _vm.errors.openNewTab,
|
|
3543
|
+
},
|
|
3544
|
+
model: {
|
|
3545
|
+
value: _vm.values.openNewTab,
|
|
3546
|
+
callback: function ($$v) {
|
|
3547
|
+
_vm.$set(_vm.values, "openNewTab", $$v);
|
|
3548
|
+
},
|
|
3549
|
+
expression: "values.openNewTab",
|
|
3550
|
+
},
|
|
3551
|
+
}),
|
|
3552
|
+
],
|
|
3553
|
+
1
|
|
3554
|
+
),
|
|
3555
|
+
_vm._v(" "),
|
|
3556
|
+
_c("form-field-file-input", {
|
|
3557
|
+
attrs: {
|
|
3558
|
+
name: "image",
|
|
3559
|
+
"file-type": "image",
|
|
3560
|
+
label: _vm.$t("banners:image"),
|
|
3561
|
+
error: _vm.errors.file,
|
|
3562
|
+
},
|
|
3563
|
+
model: {
|
|
3564
|
+
value: _vm.values.image,
|
|
3565
|
+
callback: function ($$v) {
|
|
3566
|
+
_vm.$set(_vm.values, "image", $$v);
|
|
3567
|
+
},
|
|
3568
|
+
expression: "values.image",
|
|
3569
|
+
},
|
|
3570
|
+
}),
|
|
3571
|
+
_vm._v(" "),
|
|
3572
|
+
_vm._l(_vm.values.fields, function (field) {
|
|
3573
|
+
return _c("DynamicField", {
|
|
3574
|
+
key: field.name,
|
|
3575
|
+
attrs: { field: field },
|
|
3576
|
+
})
|
|
3577
|
+
}),
|
|
3578
|
+
_vm._v(" "),
|
|
3481
3579
|
_c("form-field", {
|
|
3482
3580
|
attrs: {
|
|
3483
3581
|
name: "comment",
|
|
@@ -3494,7 +3592,7 @@
|
|
|
3494
3592
|
},
|
|
3495
3593
|
}),
|
|
3496
3594
|
],
|
|
3497
|
-
|
|
3595
|
+
2
|
|
3498
3596
|
),
|
|
3499
3597
|
]
|
|
3500
3598
|
},
|
|
@@ -3526,7 +3624,7 @@
|
|
|
3526
3624
|
/* style */
|
|
3527
3625
|
const __vue_inject_styles__$2 = function (inject) {
|
|
3528
3626
|
if (!inject) return
|
|
3529
|
-
inject("data-v-
|
|
3627
|
+
inject("data-v-ddc2a1b6_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":"AA8QA;EACA,aAAA;EACA,qCAAA;EACA,gBAAA;AC7QA;ADgRA;EACA,aAAA;AC7QA;AD+QA;EACA,aAAA;AC7QA;ADgRA;EACA,eAAA;EACA,iBAAA;AC9QA;ADkRA;EACA,aAAA;EACA,qBAAA;AC/QA;ADiRA;EACA,aAAA;AC/QA;ADkRA;EACA,eAAA;EACA,iBAAA;EACA,mBAAA;AChRA;;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 <DynamicField\n v-for=\"field of values.fields\"\n :key=\"field.name\"\n :field=\"field\"\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 { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';\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';\nimport { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';\n\nimport {\n convertBannerFormValuesToPayload,\n convertBannerToFormValues,\n} from './BannerForm.helpers';\n\nexport default defineComponent({\n name: 'BannerForm',\n components: { FormFooter, DynamicField },\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 /** Zone Fields **/\n\n const {\n loading: isZoneFieldsLoading,\n data: zoneFields,\n } = useFetchZoneFields({ context, values });\n\n watch(zoneFields, () => {\n values.value.fields = (\n zoneFields.value?.fields ?? []\n ).map((fieldConfig, index) =>\n universalFieldUtils.createFormField(\n fieldConfig,\n banner.value ? banner.value.fields[index].value ?? null : null\n )\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 () =>\n isBannerLoading.value ||\n isZonesLoading.value ||\n isZoneFieldsLoading.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
3628
|
|
|
3531
3629
|
};
|
|
3532
3630
|
/* scoped */
|
|
@@ -3621,6 +3719,7 @@
|
|
|
3621
3719
|
exports.getBannersBannerListUrl = getBannersBannerListUrl;
|
|
3622
3720
|
exports.getBannersMenuItem = getBannersMenuItem;
|
|
3623
3721
|
exports.getBannersZoneListUrl = getBannersZoneListUrl;
|
|
3722
|
+
exports.getZoneFields = getZoneFields;
|
|
3624
3723
|
exports.getZones = getZones;
|
|
3625
3724
|
exports.updateBanner = updateBanner;
|
|
3626
3725
|
|
package/dist/locales/en.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ResponseBody } from '@tager/admin-services';
|
|
2
|
-
import { Zone } from '../typings/zones';
|
|
2
|
+
import { Zone, ZoneFields } from '../typings/zones';
|
|
3
3
|
import { Banner, BannerPayload } from '../typings/banners';
|
|
4
4
|
/** Zones **/
|
|
5
5
|
export declare function getZones(params?: {
|
|
@@ -7,6 +7,7 @@ export declare function getZones(params?: {
|
|
|
7
7
|
pageNumber?: number;
|
|
8
8
|
pageSize?: number;
|
|
9
9
|
}): Promise<ResponseBody<Zone[]>>;
|
|
10
|
+
export declare function getZoneFields(zoneId: string): Promise<ResponseBody<ZoneFields>>;
|
|
10
11
|
/** Banners **/
|
|
11
12
|
export declare function getBanners(params?: {
|
|
12
13
|
query?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FileType, Nullable } from '@tager/admin-services';
|
|
2
2
|
import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
|
|
3
|
+
import { FieldShortType, FieldUnion, IncomingValueUnion, OutgoingValueUnion } from '@tager/admin-dynamic-field';
|
|
3
4
|
export declare enum Status {
|
|
4
5
|
Waiting = "WAITING",
|
|
5
6
|
Archived = "ARCHIVED",
|
|
@@ -9,6 +10,7 @@ export declare enum Status {
|
|
|
9
10
|
export interface Banner {
|
|
10
11
|
id: number;
|
|
11
12
|
status: Status;
|
|
13
|
+
priority: number;
|
|
12
14
|
link: Nullable<string>;
|
|
13
15
|
image: Nullable<FileType>;
|
|
14
16
|
bannerZone: Nullable<string>;
|
|
@@ -17,24 +19,29 @@ export interface Banner {
|
|
|
17
19
|
dateEnd: Nullable<string>;
|
|
18
20
|
disabled: boolean;
|
|
19
21
|
comment: Nullable<string>;
|
|
22
|
+
fields: FieldShortType<IncomingValueUnion>[];
|
|
20
23
|
}
|
|
21
24
|
export interface BannerFormValues {
|
|
22
25
|
link: Nullable<string>;
|
|
23
26
|
image: Nullable<SingleFileInputValueType>;
|
|
24
27
|
bannerZone: Nullable<OptionType>;
|
|
28
|
+
priority: string;
|
|
25
29
|
openNewTab: boolean;
|
|
26
30
|
dateStart: string;
|
|
27
31
|
dateEnd: string;
|
|
28
32
|
disabled: boolean;
|
|
29
33
|
comment: string;
|
|
34
|
+
fields: FieldUnion[];
|
|
30
35
|
}
|
|
31
36
|
export interface BannerPayload {
|
|
32
37
|
link: Nullable<string>;
|
|
33
38
|
image: Nullable<string>;
|
|
39
|
+
priority: number;
|
|
34
40
|
bannerZone: string;
|
|
35
41
|
openNewTab: boolean;
|
|
36
|
-
dateStart: string
|
|
37
|
-
dateEnd: string
|
|
42
|
+
dateStart: Nullable<string>;
|
|
43
|
+
dateEnd: Nullable<string>;
|
|
38
44
|
disabled: boolean;
|
|
39
45
|
comment: string;
|
|
46
|
+
fields: FieldShortType<OutgoingValueUnion>[];
|
|
40
47
|
}
|
package/dist/typings/zones.d.ts
CHANGED