@tager/admin-banners 0.3.2 → 0.3.6

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

@@ -1,86 +1,97 @@
 <template>
   <page
-    :title="
+      :title="
       isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
     "
-    :is-content-loading="isContentLoading"
+      :is-content-loading="isContentLoading"
   >
     <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>
 
         <div class="date">
           <form-field
-            v-model="values.dateStart"
-            :label="$t('banners:from')"
-            name="dateStart"
-            type="date"
-            :max="values.dateEnd"
+              v-model="values.dateStart"
+              :label="$t('banners:from')"
+              name="dateStart"
+              type="date"
+              :max="values.dateEnd"
           />
 
           <form-field
-            v-model="values.dateEnd"
-            :label="$t('banners:to')"
-            name="dateEnd"
-            type="date"
-            :min="values.dateStart"
+              v-model="values.dateEnd"
+              :label="$t('banners:to')"
+              name="dateEnd"
+              type="date"
+              :min="values.dateStart"
           />
         </div>
 
         <form-field-checkbox
-          v-model="values.disabled"
-          name="disabled"
-          :label="$t('banners:disabled')"
-          :error="errors.disabled"
+            v-model="values.disabled"
+            name="disabled"
+            :label="$t('banners:disabled')"
+            :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"
         />
 
         <form-field
-          v-model="values.comment"
-          name="comment"
-          type="textarea"
-          :label="$t('banners:comment')"
-          :error="errors.comment"
+            v-model="values.comment"
+            name="comment"
+            type="textarea"
+            :label="$t('banners:comment')"
+            :error="errors.comment"
         />
       </form>
     </template>
 
     <template v-slot:footer>
       <FormFooter
-        :back-href="bannerListUrl"
-        :on-submit="submitForm"
-        :is-submitting="isSubmitting"
-        :is-creation="isCreation"
-        :can-create-another="isCreation"
+          :back-href="bannerListUrl"
+          :on-submit="submitForm"
+          :is-submitting="isSubmitting"
+          :is-creation="isCreation"
+          :can-create-another="isCreation"
       />
     </template>
   </page>
@@ -95,17 +106,17 @@ import {
   watch,
 } from '@vue/composition-api';
 
-import { FormFooter, OptionType, TagerFormSubmitEvent } from '@tager/admin-ui';
-import { convertRequestErrorToMap } from '@tager/admin-services';
+import {FormFooter, OptionType, TagerFormSubmitEvent} from '@tager/admin-ui';
+import {convertRequestErrorToMap} from '@tager/admin-services';
 
-import { useFetchZones } from '../../../hooks';
-import { BannerFormValues } from '../../../typings/banners';
-import { useFetchBanner } from '../../../hooks/useFetchBanner';
+import {useFetchZones} from '../../../hooks';
+import {BannerFormValues} from '../../../typings/banners';
+import {useFetchBanner} from '../../../hooks/useFetchBanner';
 import {
   getBannersBannerFormUrl,
   getBannersBannerListUrl,
 } from '../../../constants/paths';
-import { createBanner, updateBanner } from '../../../services/requests';
+import {createBanner, updateBanner} from '../../../services/requests';
 
 import {
   convertBannerFormValuesToPayload,
@@ -114,27 +125,27 @@ import {
 
 export default defineComponent({
   name: 'BannerForm',
-  components: { FormFooter },
+  components: {FormFooter},
   setup(props, context: SetupContext) {
     const bannerId = computed<string>(
-      () => context.root.$route.params.bannerId
+        () => context.root.$route.params.bannerId
     );
     const isCreation = computed<boolean>(() => bannerId.value === 'create');
 
     /** Zones **/
 
-    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
+    const {data: zones, loading: isZonesLoading} = useFetchZones({context});
 
     const zonesOptionList = computed<OptionType[]>(() =>
-      zones.value.map<OptionType>((zone) => ({
-        value: zone.id,
-        label: zone.name,
-      }))
+        zones.value.map<OptionType>((zone) => ({
+          value: zone.id,
+          label: zone.name,
+        }))
     );
 
     /** Banner **/
 
-    const { data: banner, loading: isBannerLoading } = useFetchBanner({
+    const {data: banner, loading: isBannerLoading} = useFetchBanner({
       context,
       bannerId,
       isCreation,
@@ -144,14 +155,14 @@ export default defineComponent({
 
     const isSubmitting = ref<boolean>(false);
     const values = ref<BannerFormValues>(
-      convertBannerToFormValues(banner.value, zonesOptionList.value)
+        convertBannerToFormValues(banner.value, zonesOptionList.value)
     );
     const errors = ref<Record<string, string>>({});
 
     watch([banner, zones], () => {
       values.value = convertBannerToFormValues(
-        banner.value,
-        zonesOptionList.value
+          banner.value,
+          zonesOptionList.value
       );
     });
 
@@ -161,56 +172,56 @@ export default defineComponent({
       const body = convertBannerFormValuesToPayload(values.value);
 
       const requestPromise = isCreation.value
-        ? createBanner(body)
-        : updateBanner(bannerId.value, body);
+          ? createBanner(body)
+          : updateBanner(bannerId.value, body);
 
       requestPromise
-        .then(({ data }) => {
-          errors.value = {};
-
-          if (event.type === 'create') {
-            context.root.$router.push(
-              getBannersBannerFormUrl({ bannerId: String(data.id) })
-            );
-          }
-
-          if (event.type === 'create_exit' || event.type === 'save_exit') {
-            context.root.$router.push(getBannersBannerListUrl());
-          }
-
-          if (event.type === 'create_create-another') {
-            values.value = convertBannerToFormValues(
-              null,
-              zonesOptionList.value
-            );
-          }
-
-          context.root.$toast({
-            variant: 'success',
-            title: context.root.$t('banners:success'),
-            body: isCreation.value
-              ? context.root.$t('banners:bannerWasSuccessfullyCreated')
-              : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
+          .then(({data}) => {
+            errors.value = {};
+
+            if (event.type === 'create') {
+              context.root.$router.push(
+                  getBannersBannerFormUrl({bannerId: String(data.id)})
+              );
+            }
+
+            if (event.type === 'create_exit' || event.type === 'save_exit') {
+              context.root.$router.push(getBannersBannerListUrl());
+            }
+
+            if (event.type === 'create_create-another') {
+              values.value = convertBannerToFormValues(
+                  null,
+                  zonesOptionList.value
+              );
+            }
+
+            context.root.$toast({
+              variant: 'success',
+              title: context.root.$t('banners:success'),
+              body: isCreation.value
+                  ? context.root.$t('banners:bannerWasSuccessfullyCreated')
+                  : context.root.$t('banners:bannerWasSuccessfullyUpdated'),
+            });
+          })
+          .catch((error) => {
+            console.error(error);
+            errors.value = convertRequestErrorToMap(error);
+            context.root.$toast({
+              variant: 'danger',
+              title: context.root.$t('banners:error'),
+              body: isCreation.value
+                  ? context.root.$t('banners:bannerCreationWasFailed')
+                  : context.root.$t('banners:bannerUpdateWasFailed'),
+            });
+          })
+          .finally(() => {
+            isSubmitting.value = false;
           });
-        })
-        .catch((error) => {
-          console.error(error);
-          errors.value = convertRequestErrorToMap(error);
-          context.root.$toast({
-            variant: 'danger',
-            title: context.root.$t('banners:error'),
-            body: isCreation.value
-              ? context.root.$t('banners:bannerCreationWasFailed')
-              : context.root.$t('banners:bannerUpdateWasFailed'),
-          });
-        })
-        .finally(() => {
-          isSubmitting.value = false;
-        });
     };
 
     const isContentLoading = computed<boolean>(
-      () => isBannerLoading.value || isZonesLoading.value
+        () => isBannerLoading.value || isZonesLoading.value
     );
 
     return {
@@ -233,4 +244,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),
     })
   );