@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
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Ref, SetupContext } from '@vue/composition-api';
|
|
2
|
+
import { Nullable, ResourceRef } from '@tager/admin-services';
|
|
3
|
+
import { ZoneFields } from '../typings/zones';
|
|
4
|
+
import { BannerFormValues } from '../typings/banners';
|
|
5
|
+
export declare function useFetchZoneFields({ context, values, }: {
|
|
6
|
+
context: SetupContext;
|
|
7
|
+
values: Ref<BannerFormValues>;
|
|
8
|
+
}): ResourceRef<Nullable<ZoneFields>>;
|
package/dist/index.esm.js
CHANGED
|
@@ -2,6 +2,7 @@ import { request, useResource, useResourceDelete, createId, convertRequestErrorT
|
|
|
2
2
|
import { defineComponent, onMounted, computed, ref, watch } from '@vue/composition-api';
|
|
3
3
|
import { useDataTable, getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, useTranslation, FormFooter } from '@tager/admin-ui';
|
|
4
4
|
import { compile } from 'path-to-regexp';
|
|
5
|
+
import { universalFieldUtils, DynamicField } from '@tager/admin-dynamic-field';
|
|
5
6
|
|
|
6
7
|
const EN = {
|
|
7
8
|
home: 'Home',
|
|
@@ -28,6 +29,8 @@ const EN = {
|
|
|
28
29
|
remove: 'Remove',
|
|
29
30
|
actions: 'actions',
|
|
30
31
|
date: 'Date',
|
|
32
|
+
name: 'Name',
|
|
33
|
+
priority: 'Priority',
|
|
31
34
|
success: 'Success',
|
|
32
35
|
error: 'Error',
|
|
33
36
|
statuses: {
|
|
@@ -67,6 +70,8 @@ const RU = {
|
|
|
67
70
|
remove: 'Удалить',
|
|
68
71
|
actions: 'Действия',
|
|
69
72
|
date: 'Дата',
|
|
73
|
+
name: 'Название',
|
|
74
|
+
priority: 'Приоритет',
|
|
70
75
|
success: 'Успех',
|
|
71
76
|
error: 'Ошибка',
|
|
72
77
|
statuses: {
|
|
@@ -85,6 +90,9 @@ const RU = {
|
|
|
85
90
|
function getZones(params) {
|
|
86
91
|
return request.get({ path: '/admin/adv/zones', params });
|
|
87
92
|
}
|
|
93
|
+
function getZoneFields(zoneId) {
|
|
94
|
+
return request.get({ path: `/admin/adv/zones/${zoneId}` });
|
|
95
|
+
}
|
|
88
96
|
/** Banners **/
|
|
89
97
|
function getBanners(params) {
|
|
90
98
|
return request.get({ path: '/admin/adv', params });
|
|
@@ -2748,12 +2756,13 @@ function getStatus(type, t) {
|
|
|
2748
2756
|
return '';
|
|
2749
2757
|
}
|
|
2750
2758
|
}
|
|
2751
|
-
function getColumnDefs$1(t) {
|
|
2759
|
+
function getColumnDefs$1(zoneList, t) {
|
|
2752
2760
|
return [
|
|
2753
2761
|
{
|
|
2754
2762
|
id: 0,
|
|
2755
2763
|
name: '#',
|
|
2756
2764
|
field: 'id',
|
|
2765
|
+
format: ({ rowIndex }) => String(rowIndex + 1),
|
|
2757
2766
|
style: { width: '50px', textAlign: 'center' },
|
|
2758
2767
|
headStyle: { width: '50px', textAlign: 'center' },
|
|
2759
2768
|
},
|
|
@@ -2761,7 +2770,12 @@ function getColumnDefs$1(t) {
|
|
|
2761
2770
|
id: 1,
|
|
2762
2771
|
name: t('banners:zone'),
|
|
2763
2772
|
field: 'bannerZone',
|
|
2764
|
-
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
|
+
},
|
|
2765
2779
|
},
|
|
2766
2780
|
{
|
|
2767
2781
|
id: 2,
|
|
@@ -2773,18 +2787,25 @@ function getColumnDefs$1(t) {
|
|
|
2773
2787
|
},
|
|
2774
2788
|
{
|
|
2775
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,
|
|
2776
2797
|
name: t('banners:period'),
|
|
2777
2798
|
field: 'dateStart',
|
|
2778
2799
|
format: ({ row }) => `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''}`,
|
|
2779
2800
|
},
|
|
2780
2801
|
{
|
|
2781
|
-
id:
|
|
2802
|
+
id: 5,
|
|
2782
2803
|
name: t('banners:image'),
|
|
2783
2804
|
field: 'image',
|
|
2784
2805
|
type: 'image',
|
|
2785
2806
|
},
|
|
2786
2807
|
{
|
|
2787
|
-
id:
|
|
2808
|
+
id: 6,
|
|
2788
2809
|
name: t('banners:link'),
|
|
2789
2810
|
field: 'link',
|
|
2790
2811
|
type: 'name',
|
|
@@ -2803,14 +2824,17 @@ function getColumnDefs$1(t) {
|
|
|
2803
2824
|
],
|
|
2804
2825
|
});
|
|
2805
2826
|
},
|
|
2827
|
+
options: {
|
|
2828
|
+
shouldOpenNewTab: true,
|
|
2829
|
+
},
|
|
2806
2830
|
},
|
|
2807
2831
|
{
|
|
2808
|
-
id:
|
|
2832
|
+
id: 7,
|
|
2809
2833
|
name: t('banners:comment'),
|
|
2810
2834
|
field: 'comment',
|
|
2811
2835
|
},
|
|
2812
2836
|
{
|
|
2813
|
-
id:
|
|
2837
|
+
id: 8,
|
|
2814
2838
|
name: t('banners:actions'),
|
|
2815
2839
|
field: 'actions',
|
|
2816
2840
|
style: { whiteSpace: 'nowrap', width: '100px' },
|
|
@@ -2861,7 +2885,7 @@ function useAdvancedSearch({ context, t, zoneList }) {
|
|
|
2861
2885
|
/** Params **/
|
|
2862
2886
|
const filterParams = computed(() => getFilterParams({
|
|
2863
2887
|
[FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
|
|
2864
|
-
[FilterTypes.Date]: dateFilter.value,
|
|
2888
|
+
[FilterTypes.Date]: dateFilter.value || [],
|
|
2865
2889
|
[FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
|
|
2866
2890
|
}));
|
|
2867
2891
|
/** Tag removal handler **/
|
|
@@ -2927,7 +2951,7 @@ var script$1 = defineComponent({
|
|
|
2927
2951
|
const isBusy = (bannerId) => {
|
|
2928
2952
|
return isDeleting(bannerId) || isBannersLoading.value;
|
|
2929
2953
|
};
|
|
2930
|
-
const columnDefs = computed(() => getColumnDefs$1(context.root.$t));
|
|
2954
|
+
const columnDefs = computed(() => getColumnDefs$1(zoneList.value, context.root.$t));
|
|
2931
2955
|
const isRowDataLoading = computed(() => isBannersLoading.value || isZonesLoading.value);
|
|
2932
2956
|
return {
|
|
2933
2957
|
columnDefs,
|
|
@@ -3178,7 +3202,7 @@ __vue_render__$1._withStripped = true;
|
|
|
3178
3202
|
/* style */
|
|
3179
3203
|
const __vue_inject_styles__$1 = function (inject) {
|
|
3180
3204
|
if (!inject) return
|
|
3181
|
-
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 });
|
|
3182
3206
|
|
|
3183
3207
|
};
|
|
3184
3208
|
/* scoped */
|
|
@@ -3228,28 +3252,56 @@ function useFetchBanner({ context, bannerId, isCreation, }) {
|
|
|
3228
3252
|
return resource;
|
|
3229
3253
|
}
|
|
3230
3254
|
|
|
3255
|
+
function useFetchZoneFields({ context, values, }) {
|
|
3256
|
+
const zoneId = 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] = useResource({
|
|
3258
|
+
fetchResource: () => getZoneFields(zoneId.value),
|
|
3259
|
+
initialValue: null,
|
|
3260
|
+
context,
|
|
3261
|
+
resourceName: 'Zone Fields',
|
|
3262
|
+
});
|
|
3263
|
+
onMounted(() => {
|
|
3264
|
+
if (!zoneId.value) {
|
|
3265
|
+
return;
|
|
3266
|
+
}
|
|
3267
|
+
fetchZoneFields();
|
|
3268
|
+
});
|
|
3269
|
+
watch(zoneId, () => {
|
|
3270
|
+
if (!zoneId.value) {
|
|
3271
|
+
return;
|
|
3272
|
+
}
|
|
3273
|
+
fetchZoneFields();
|
|
3274
|
+
});
|
|
3275
|
+
return resource;
|
|
3276
|
+
}
|
|
3277
|
+
|
|
3231
3278
|
function convertBannerToFormValues(banner, zonesOptionList) {
|
|
3232
|
-
var _a, _b, _c, _d, _e, _f;
|
|
3279
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
3233
3280
|
const foundZone = zonesOptionList.find(({ value }) => value === (banner === null || banner === void 0 ? void 0 : banner.bannerZone));
|
|
3234
3281
|
return {
|
|
3235
|
-
|
|
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 : '',
|
|
3236
3284
|
image: (banner === null || banner === void 0 ? void 0 : banner.image) ? { id: createId(), file: banner.image } : null,
|
|
3237
3285
|
bannerZone: foundZone !== null && foundZone !== void 0 ? foundZone : null,
|
|
3238
|
-
openNewTab: (
|
|
3239
|
-
dateStart: (
|
|
3240
|
-
dateEnd: (
|
|
3241
|
-
disabled: (
|
|
3242
|
-
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: [],
|
|
3243
3292
|
};
|
|
3244
3293
|
}
|
|
3245
3294
|
function convertBannerFormValuesToPayload(values) {
|
|
3246
3295
|
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 : ''
|
|
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: universalFieldUtils.getOutgoingValue(field),
|
|
3299
|
+
})) });
|
|
3248
3300
|
}
|
|
3249
3301
|
|
|
3250
3302
|
var script$2 = defineComponent({
|
|
3251
3303
|
name: 'BannerForm',
|
|
3252
|
-
components: { FormFooter },
|
|
3304
|
+
components: { FormFooter, DynamicField },
|
|
3253
3305
|
setup(props, context) {
|
|
3254
3306
|
const bannerId = computed(() => context.root.$route.params.bannerId);
|
|
3255
3307
|
const isCreation = computed(() => bannerId.value === 'create');
|
|
@@ -3272,6 +3324,15 @@ var script$2 = defineComponent({
|
|
|
3272
3324
|
watch([banner, zones], () => {
|
|
3273
3325
|
values.value = convertBannerToFormValues(banner.value, zonesOptionList.value);
|
|
3274
3326
|
});
|
|
3327
|
+
/** Zone Fields **/
|
|
3328
|
+
const { loading: isZoneFieldsLoading, data: zoneFields, } = useFetchZoneFields({ context, values });
|
|
3329
|
+
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 universalFieldUtils.createFormField(fieldConfig, banner.value ? (_a = banner.value.fields[index].value) !== null && _a !== void 0 ? _a : null : null);
|
|
3334
|
+
});
|
|
3335
|
+
});
|
|
3275
3336
|
const submitForm = (event) => {
|
|
3276
3337
|
isSubmitting.value = true;
|
|
3277
3338
|
const body = convertBannerFormValuesToPayload(values.value);
|
|
@@ -3313,7 +3374,9 @@ var script$2 = defineComponent({
|
|
|
3313
3374
|
isSubmitting.value = false;
|
|
3314
3375
|
});
|
|
3315
3376
|
};
|
|
3316
|
-
const isContentLoading = computed(() => isBannerLoading.value ||
|
|
3377
|
+
const isContentLoading = computed(() => isBannerLoading.value ||
|
|
3378
|
+
isZonesLoading.value ||
|
|
3379
|
+
isZoneFieldsLoading.value);
|
|
3317
3380
|
return {
|
|
3318
3381
|
isCreation,
|
|
3319
3382
|
isContentLoading,
|
|
@@ -3359,67 +3422,43 @@ var __vue_render__$2 = function () {
|
|
|
3359
3422
|
},
|
|
3360
3423
|
},
|
|
3361
3424
|
[
|
|
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
|
-
}),
|
|
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
|
+
),
|
|
3423
3462
|
_vm._v(" "),
|
|
3424
3463
|
_c("input-label", [_vm._v(_vm._s(_vm.$t("banners:period")))]),
|
|
3425
3464
|
_vm._v(" "),
|
|
@@ -3477,6 +3516,66 @@ var __vue_render__$2 = function () {
|
|
|
3477
3516
|
},
|
|
3478
3517
|
}),
|
|
3479
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(" "),
|
|
3480
3579
|
_c("form-field", {
|
|
3481
3580
|
attrs: {
|
|
3482
3581
|
name: "comment",
|
|
@@ -3493,7 +3592,7 @@ var __vue_render__$2 = function () {
|
|
|
3493
3592
|
},
|
|
3494
3593
|
}),
|
|
3495
3594
|
],
|
|
3496
|
-
|
|
3595
|
+
2
|
|
3497
3596
|
),
|
|
3498
3597
|
]
|
|
3499
3598
|
},
|
|
@@ -3525,7 +3624,7 @@ __vue_render__$2._withStripped = true;
|
|
|
3525
3624
|
/* style */
|
|
3526
3625
|
const __vue_inject_styles__$2 = function (inject) {
|
|
3527
3626
|
if (!inject) return
|
|
3528
|
-
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 });
|
|
3529
3628
|
|
|
3530
3629
|
};
|
|
3531
3630
|
/* scoped */
|
|
@@ -3607,4 +3706,4 @@ function getBannersMenuItem(params) {
|
|
|
3607
3706
|
i18n.addTranslations('en', 'banners', EN);
|
|
3608
3707
|
i18n.addTranslations('ru', 'banners', RU);
|
|
3609
3708
|
|
|
3610
|
-
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 };
|
|
3709
|
+
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, getZoneFields, getZones, updateBanner };
|