@tager/admin-banners 0.3.3 → 0.3.7

package/dist/views/Banners/BannerList/BannerList.helpers.d.ts

@@ -1,5 +1,6 @@
 import { TFunction } from 'i18next';
 import { ColumnDefinition } from '@tager/admin-ui';
 import { Banner, Status } from '../../../typings/banners';
+import { Zone } from '../../../typings/zones';
 export declare function getStatus(type: Status, t: TFunction): string;
-export declare function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[];
+export declare function getColumnDefs(zoneList: Zone[], t: TFunction): ColumnDefinition<Banner>[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-banners",
-  "version": "0.3.3",
+  "version": "0.3.7",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -27,9 +27,9 @@
     "@rollup/plugin-commonjs": "^15.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@tager/admin-dynamic-field": "^0.1.18",
-    "@tager/admin-layout": "^0.5.3",
+    "@tager/admin-layout": "^0.5.4",
     "@tager/admin-services": "^0.2.26",
-    "@tager/admin-ui": "^0.8.85",
+    "@tager/admin-ui": "^0.8.96",
     "@types/lodash.isequal": "^4.5.5",
     "@types/lodash.pick": "^4.4.6",
     "@types/node": "12.x",

package/src/hooks/useFetchZoneFields.ts

@@ -0,0 +1,48 @@
+import {
+  computed,
+  onMounted,
+  Ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+import { Nullable, ResourceRef, useResource } from '@tager/admin-services';
+
+import { getZoneFields } from '../services/requests';
+import { ZoneFields } from '../typings/zones';
+import { BannerFormValues } from '../typings/banners';
+
+export function useFetchZoneFields({
+  context,
+  values,
+}: {
+  context: SetupContext;
+  values: Ref<BannerFormValues>;
+}): ResourceRef<Nullable<ZoneFields>> {
+  const zoneId = computed(() => values.value.bannerZone?.value ?? '');
+
+  const [fetchZoneFields, resource] = useResource<Nullable<ZoneFields>>({
+    fetchResource: () => getZoneFields(zoneId.value),
+    initialValue: null,
+    context,
+    resourceName: 'Zone Fields',
+  });
+
+  onMounted(() => {
+    if (!zoneId.value) {
+      return;
+    }
+
+    fetchZoneFields();
+  });
+
+  watch(zoneId, () => {
+    if (!zoneId.value) {
+      return;
+    }
+
+    fetchZoneFields();
+  });
+
+  return resource;
+}

package/src/locales/en.ts

@@ -23,6 +23,8 @@ const EN = {
   remove: 'Remove',
   actions: 'actions',
   date: 'Date',
+  name: 'Name',
+  priority: 'Priority',
 
   success: 'Success',
   error: 'Error',

package/src/locales/ru.ts

@@ -25,6 +25,8 @@ const RU: typeof EN = {
   remove: 'Удалить',
   actions: 'Действия',
   date: 'Дата',
+  name: 'Название',
+  priority: 'Приоритет',
 
   success: 'Успех',
   error: 'Ошибка',

package/src/services/requests.ts

@@ -1,6 +1,6 @@
 import { request, ResponseBody } from '@tager/admin-services';
 
-import { Zone } from '../typings/zones';
+import { Zone, ZoneFields } from '../typings/zones';
 import { Banner, BannerPayload } from '../typings/banners';
 
 /** Zones **/
@@ -13,6 +13,12 @@ export function getZones(params?: {
   return request.get({ path: '/admin/adv/zones', params });
 }
 
+export function getZoneFields(
+  zoneId: string
+): Promise<ResponseBody<ZoneFields>> {
+  return request.get({ path: `/admin/adv/zones/${zoneId}` });
+}
+
 /** Banners **/
 
 export function getBanners(params?: {

package/src/typings/banners.ts

@@ -1,5 +1,11 @@
 import { FileType, Nullable } from '@tager/admin-services';
 import { OptionType, SingleFileInputValueType } from '@tager/admin-ui';
+import {
+  FieldShortType,
+  FieldUnion,
+  IncomingValueUnion,
+  OutgoingValueUnion,
+} from '@tager/admin-dynamic-field';
 
 export enum Status {
   Waiting = 'WAITING',
@@ -11,6 +17,7 @@ export enum Status {
 export interface Banner {
   id: number;
   status: Status;
+  priority: number;
   link: Nullable<string>;
   image: Nullable<FileType>;
   bannerZone: Nullable<string>;
@@ -19,26 +26,31 @@ export interface Banner {
   dateEnd: Nullable<string>;
   disabled: boolean;
   comment: Nullable<string>;
+  fields: FieldShortType<IncomingValueUnion>[];
 }
 
 export interface BannerFormValues {
   link: Nullable<string>;
   image: Nullable<SingleFileInputValueType>;
   bannerZone: Nullable<OptionType>;
+  priority: string;
   openNewTab: boolean;
   dateStart: string;
   dateEnd: string;
   disabled: boolean;
   comment: string;
+  fields: FieldUnion[];
 }
 
 export interface BannerPayload {
   link: Nullable<string>;
   image: Nullable<string>;
+  priority: number;
   bannerZone: string;
   openNewTab: boolean;
-  dateStart: string;
-  dateEnd: string;
+  dateStart: Nullable<string>;
+  dateEnd: Nullable<string>;
   disabled: boolean;
   comment: string;
+  fields: FieldShortType<OutgoingValueUnion>[];
 }

package/src/typings/zones.ts

@@ -1,5 +1,11 @@
+import { FieldConfigUnion } from '@tager/admin-dynamic-field';
+
 export interface Zone {
   id: string;
   name: string;
   bannersCount: number;
 }
+
+export interface ZoneFields extends Zone {
+  fields: FieldConfigUnion[];
+}

package/src/views/Banners/BannerForm/BannerForm.helpers.ts

@@ -1,5 +1,6 @@
 import { OptionType } from '@tager/admin-ui';
 import { createId, Nullable } from '@tager/admin-services';
+import { universalFieldUtils } from '@tager/admin-dynamic-field';
 
 import {
   Banner,
@@ -16,6 +17,7 @@ export function convertBannerToFormValues(
   );
 
   return {
+    priority: String(banner?.priority ?? 1),
     link: banner?.link ?? '',
     image: banner?.image ? { id: createId(), file: banner.image } : null,
     bannerZone: foundZone ?? null,
@@ -24,6 +26,7 @@ export function convertBannerToFormValues(
     dateEnd: banner?.dateEnd ?? '',
     disabled: banner?.disabled ?? false,
     comment: banner?.comment ?? '',
+    fields: [],
   };
 }
 
@@ -32,7 +35,14 @@ export function convertBannerFormValuesToPayload(
 ): BannerPayload {
   return {
     ...values,
+    priority: values.priority ? Number(values.priority) : 1,
+    dateStart: values.dateStart ? values.dateStart : null,
+    dateEnd: values.dateEnd ? values.dateEnd : null,
     image: values.image?.file.id ?? null,
     bannerZone: values.bannerZone?.value ?? '',
+    fields: values.fields.map((field) => ({
+      name: field.config.name,
+      value: universalFieldUtils.getOutgoingValue(field),
+    })),
   };
 }

package/src/views/Banners/BannerForm/BannerForm.vue

@@ -7,35 +7,22 @@
   >
     <template v-slot:content>
       <form novalidate @submit.prevent="submitForm">
-        <form-field-select
-          v-model="values.bannerZone"
-          name="bannerZone"
-          :label="$t('banners:zone')"
-          :options="zonesOptionList"
-          :error="errors.bannerZone"
-        />
-
-        <form-field-file-input
-          v-model="values.image"
-          name="image"
-          file-type="image"
-          :label="$t('banners:image')"
-          :error="errors.file"
-        />
-
-        <form-field
-          v-model="values.link"
-          name="link"
-          :label="$t('banners:link')"
-          :error="errors.name"
-        />
+        <div class="zone">
+          <form-field-select
+            v-model="values.bannerZone"
+            name="bannerZone"
+            :label="$t('banners:zone')"
+            :options="zonesOptionList"
+            :error="errors.bannerZone"
+          />
 
-        <form-field-checkbox
-          v-model="values.openNewTab"
-          name="openNewTab"
-          :label="$t('banners:openNewTab')"
-          :error="errors.openNewTab"
-        />
+          <form-field
+            v-model="values.priority"
+            name="priority"
+            :label="$t('banners:priority')"
+            :error="errors.priority"
+          />
+        </div>
 
         <input-label>{{ $t('banners:period') }}</input-label>
 
@@ -64,6 +51,36 @@
           :error="errors.disabled"
         />
 
+        <div class="link">
+          <form-field
+            v-model="values.link"
+            name="link"
+            :label="$t('banners:link')"
+            :error="errors.name"
+          />
+
+          <form-field-checkbox
+            v-model="values.openNewTab"
+            name="openNewTab"
+            :label="$t('banners:openNewTab')"
+            :error="errors.openNewTab"
+          />
+        </div>
+
+        <form-field-file-input
+          v-model="values.image"
+          name="image"
+          file-type="image"
+          :label="$t('banners:image')"
+          :error="errors.file"
+        />
+
+        <DynamicField
+          v-for="field of values.fields"
+          :key="field.name"
+          :field="field"
+        />
+
         <form-field
           v-model="values.comment"
           name="comment"
@@ -96,6 +113,7 @@ import {
 } from '@vue/composition-api';
 
 import { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';
+import { DynamicField, universalFieldUtils } from '@tager/admin-dynamic-field';
 import { convertRequestErrorToMap } from '@tager/admin-services';
 
 import { useFetchZones } from '../../../hooks';
@@ -106,6 +124,7 @@ import {
   getBannersBannerListUrl,
 } from '../../../constants/paths';
 import { createBanner, updateBanner } from '../../../services/requests';
+import { useFetchZoneFields } from '../../../hooks/useFetchZoneFields';
 
 import {
   convertBannerFormValuesToPayload,
@@ -114,7 +133,7 @@ import {
 
 export default defineComponent({
   name: 'BannerForm',
-  components: { FormFooter },
+  components: { FormFooter, DynamicField },
   setup(props, context: SetupContext) {
     const bannerId = computed<string>(
       () => context.root.$route.params.bannerId
@@ -155,6 +174,24 @@ export default defineComponent({
       );
     });
 
+    /** Zone Fields **/
+
+    const {
+      loading: isZoneFieldsLoading,
+      data: zoneFields,
+    } = useFetchZoneFields({ context, values });
+
+    watch(zoneFields, () => {
+      values.value.fields = (
+        zoneFields.value?.fields ?? []
+      ).map((fieldConfig, index) =>
+        universalFieldUtils.createFormField(
+          fieldConfig,
+          banner.value ? banner.value.fields[index].value ?? null : null
+        )
+      );
+    });
+
     const submitForm = (event: TagerFormSubmitEvent) => {
       isSubmitting.value = true;
 
@@ -210,7 +247,10 @@ export default defineComponent({
     };
 
     const isContentLoading = computed<boolean>(
-      () => isBannerLoading.value || isZonesLoading.value
+      () =>
+        isBannerLoading.value ||
+        isZonesLoading.value ||
+        isZoneFieldsLoading.value
     );
 
     return {
@@ -233,4 +273,32 @@ export default defineComponent({
   grid-template-columns: repeat(2, 1fr);
   column-gap: 10px;
 }
+
+.zone {
+  display: flex;
+
+  > *:first-child {
+    flex: 1 1 1px;
+  }
+
+  > *:last-child {
+    flex-basis: 30%;
+    margin-left: 20px;
+  }
+}
+
+.link {
+  display: flex;
+  align-items: flex-end;
+
+  > *:first-child {
+    flex: 1 1 1px;
+  }
+
+  > *:last-child {
+    flex-basis: 30%;
+    margin-left: 20px;
+    padding-bottom: 8px;
+  }
+}
 </style>

package/src/views/Banners/BannerList/BannerList.helpers.ts

@@ -3,6 +3,7 @@ import { TFunction } from 'i18next';
 import { ColumnDefinition } from '@tager/admin-ui';
 
 import { Banner, Status } from '../../../typings/banners';
+import { Zone } from '../../../typings/zones';
 
 export function getStatus(type: Status, t: TFunction) {
   switch (type) {
@@ -20,12 +21,16 @@ export function getStatus(type: Status, t: TFunction) {
   }
 }
 
-export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
+export function getColumnDefs(
+  zoneList: Zone[],
+  t: TFunction
+): ColumnDefinition<Banner>[] {
   return [
     {
       id: 0,
       name: '#',
       field: 'id',
+      format: ({ rowIndex }) => String(rowIndex + 1),
       style: { width: '50px', textAlign: 'center' },
       headStyle: { width: '50px', textAlign: 'center' },
     },
@@ -33,8 +38,14 @@ export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
       id: 1,
       name: t('banners:zone'),
       field: 'bannerZone',
-      format: ({ row }) =>
-        row.bannerZone ? row.bannerZone : t('banners:bannerZoneIsDeleted'),
+      format: ({ row }) => {
+        const foundBannerZone = zoneList.find(
+          (zone) => zone.id === row.bannerZone
+        );
+        return foundBannerZone
+          ? foundBannerZone.name
+          : t('banners:bannerZoneIsDeleted');
+      },
     },
     {
       id: 2,
@@ -46,6 +57,13 @@ export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
     },
     {
       id: 3,
+      name: t('banners:priority'),
+      field: 'priority',
+      style: { width: '100px', textAlign: 'center' },
+      headStyle: { width: '100px', textAlign: 'center' },
+    },
+    {
+      id: 4,
       name: t('banners:period'),
       field: 'dateStart',
       format: ({ row }) =>
@@ -54,13 +72,13 @@ export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
         }`,
     },
     {
-      id: 4,
+      id: 5,
       name: t('banners:image'),
       field: 'image',
       type: 'image',
     },
     {
-      id: 5,
+      id: 6,
       name: t('banners:link'),
       field: 'link',
       type: 'name',
@@ -76,14 +94,17 @@ export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
           },
         ],
       }),
+      options: {
+        shouldOpenNewTab: true,
+      },
     },
     {
-      id: 6,
+      id: 7,
       name: t('banners:comment'),
       field: 'comment',
     },
     {
-      id: 7,
+      id: 8,
       name: t('banners:actions'),
       field: 'actions',
       style: { whiteSpace: 'nowrap', width: '100px' },

package/src/views/Banners/BannerList/BannerList.vue

@@ -181,7 +181,7 @@ export default defineComponent({
     };
 
     const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>
-      getColumnDefs(context.root.$t)
+      getColumnDefs(zoneList.value, context.root.$t)
     );
 
     const isRowDataLoading = computed<boolean>(

package/src/views/Banners/BannerList/hooks/useAdvancedSearch.ts

@@ -112,7 +112,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
   const filterParams = computed(() =>
     getFilterParams({
       [FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
-      [FilterTypes.Date]: dateFilter.value,
+      [FilterTypes.Date]: dateFilter.value || [],
       [FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
     })
   );