@tager/admin-banners 0.1.5 → 0.3.0

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

@@ -0,0 +1,236 @@
+<template>
+  <page
+    :title="
+      isCreation ? $t('banners:createBanner') : $t('banners:updateBanner')
+    "
+    :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"
+        />
+
+        <form-field-checkbox
+          v-model="values.openNewTab"
+          name="openNewTab"
+          :label="$t('banners:openNewTab')"
+          :error="errors.openNewTab"
+        />
+
+        <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"
+          />
+
+          <form-field
+            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"
+        />
+
+        <form-field
+          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"
+      />
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+
+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 {
+  getBannersBannerFormUrl,
+  getBannersBannerListUrl,
+} from '../../../constants/paths';
+import { createBanner, updateBanner } from '../../../services/requests';
+
+import {
+  convertBannerFormValuesToPayload,
+  convertBannerToFormValues,
+} from './BannerForm.helpers';
+
+export default defineComponent({
+  name: 'BannerForm',
+  components: { FormFooter },
+  setup(props, context: SetupContext) {
+    const bannerId = computed<string>(
+      () => context.root.$route.params.bannerId
+    );
+    const isCreation = computed<boolean>(() => bannerId.value === 'create');
+
+    /** Zones **/
+
+    const { data: zones, loading: isZonesLoading } = useFetchZones({ context });
+
+    const zonesOptionList = computed<OptionType[]>(() =>
+      zones.value.map<OptionType>((zone) => ({
+        value: zone.id,
+        label: zone.name,
+      }))
+    );
+
+    /** Banner **/
+
+    const { data: banner, loading: isBannerLoading } = useFetchBanner({
+      context,
+      bannerId,
+      isCreation,
+    });
+
+    /** Form State **/
+
+    const isSubmitting = ref<boolean>(false);
+    const values = ref<BannerFormValues>(
+      convertBannerToFormValues(banner.value, zonesOptionList.value)
+    );
+    const errors = ref<Record<string, string>>({});
+
+    watch([banner, zones], () => {
+      values.value = convertBannerToFormValues(
+        banner.value,
+        zonesOptionList.value
+      );
+    });
+
+    const submitForm = (event: TagerFormSubmitEvent) => {
+      isSubmitting.value = true;
+
+      const body = convertBannerFormValuesToPayload(values.value);
+
+      const requestPromise = isCreation.value
+        ? 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'),
+          });
+        })
+        .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
+    );
+
+    return {
+      isCreation,
+      isContentLoading,
+      isSubmitting,
+      values,
+      errors,
+      submitForm,
+      bannerListUrl: getBannersBannerListUrl(),
+      zonesOptionList,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.date {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 10px;
+}
+</style>

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

@@ -0,0 +1 @@
+export { default } from './BannerForm.vue';

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

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+
+import { ColumnDefinition } from '@tager/admin-ui';
+
+import { Banner, Status } from '../../../typings/banners';
+
+export function getStatus(type: Status, t: TFunction) {
+  switch (type) {
+    case Status.Waiting:
+      return t('banners:statuses.waiting');
+    case Status.Archived:
+      return t('banners:statuses.archived');
+    case Status.Active:
+      return t('banners:statuses.active');
+    case Status.Disabled:
+      return t('banners:statuses.disabled');
+
+    default:
+      return '';
+  }
+}
+
+export function getColumnDefs(t: TFunction): ColumnDefinition<Banner>[] {
+  return [
+    {
+      id: 0,
+      name: '#',
+      field: 'id',
+      style: { width: '50px', textAlign: 'center' },
+      headStyle: { width: '50px', textAlign: 'center' },
+    },
+    {
+      id: 1,
+      name: t('banners:zone'),
+      field: 'bannerZone',
+      format: ({ row }) =>
+        row.bannerZone ? row.bannerZone : t('banners:bannerZoneIsDeleted'),
+    },
+    {
+      id: 2,
+      name: t('banners:status'),
+      field: 'status',
+      format: ({ row }) => getStatus(row.status, t),
+      style: { width: '120px' },
+      headStyle: { width: '120px' },
+    },
+    {
+      id: 3,
+      name: t('banners:period'),
+      field: 'dateStart',
+      format: ({ row }) =>
+        `${row.dateStart ? `${t('banners:from')} ${row.dateStart}` : ''} ${
+          row.dateEnd ? `${t('banners:to')} ${row.dateEnd}` : ''
+        }`,
+    },
+    {
+      id: 4,
+      name: t('banners:image'),
+      field: 'image',
+      type: 'image',
+    },
+    {
+      id: 5,
+      name: t('banners:link'),
+      field: 'link',
+      type: 'name',
+      format: ({ row }) => ({
+        adminLink: {
+          url: row.link ?? '',
+          text: row.link ?? '',
+        },
+        paramList: [
+          {
+            name: t('banners:newTab'),
+            value: row.openNewTab ? t('banners:yes') : t('banners:no'),
+          },
+        ],
+      }),
+    },
+    {
+      id: 6,
+      name: t('banners:comment'),
+      field: 'comment',
+    },
+    {
+      id: 7,
+      name: t('banners:actions'),
+      field: 'actions',
+      style: { whiteSpace: 'nowrap', width: '100px' },
+      headStyle: { whiteSpace: 'nowrap', width: '100px' },
+    },
+  ];
+}

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

@@ -0,0 +1,233 @@
+<template>
+  <page
+    :title="$t('banners:banners')"
+    :header-buttons="[
+      {
+        text: $t('banners:createBanner'),
+        href: getBannersBannerFormUrl({ bannerId: 'create' }),
+      },
+    ]"
+  >
+    <template v-slot:content>
+      <data-table
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        data-table="banners"
+        :use-search="true"
+        :use-pagination="true"
+        :search-query="searchQuery"
+        :pagination="{
+          pageNumber,
+          pageCount,
+          pageSize,
+          disabled: isRowDataLoading,
+        }"
+        @change="handleChange"
+      >
+        <template v-slot:filters>
+          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
+            <div class="filters">
+              <form-field-multi-select
+                v-model="zoneFilter"
+                :options="zonesOptionList"
+                name="zoneFilter"
+                :searchable="true"
+                :label="$t('banners:zone')"
+                class="filter"
+              />
+
+              <form-field
+                v-model="dateFilter"
+                :label="$t('banners:date')"
+                name="dateFilter"
+                type="date"
+                class="filter"
+              />
+
+              <form-field-multi-select
+                v-model="statusFilter"
+                :options="statusesOptionList"
+                name="statusFilter"
+                :searchable="true"
+                :label="$t('banners:status')"
+                class="filter"
+              />
+            </div>
+          </advanced-search>
+        </template>
+
+        <template v-slot:cell(actions)="{ row }">
+          <base-button
+            variant="icon"
+            :title="$t('banners:edit')"
+            :disabled="isBusy(row.id)"
+            :href="getBannersBannerFormUrl({ bannerId: row.id })"
+          >
+            <svg-icon name="edit" />
+          </base-button>
+
+          <base-button
+            variant="icon"
+            :title="$t('banners:remove')"
+            :disabled="isBusy(row.id)"
+            @click="handleResourceDelete(row.id)"
+          >
+            <svg-icon name="delete" />
+          </base-button>
+        </template>
+      </data-table>
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+import isEqual from 'lodash.isequal';
+import pick from 'lodash.pick';
+
+import {
+  ColumnDefinition,
+  useDataTable,
+  useTranslation,
+} from '@tager/admin-ui';
+import { useResourceDelete } from '@tager/admin-services';
+
+import { deleteBanner, getBanners } from '../../../services/requests';
+import { Banner } from '../../../typings/banners';
+import { getBannersBannerFormUrl } from '../../../constants/paths';
+import { useFetchZones } from '../../../hooks';
+
+import { getColumnDefs } from './BannerList.helpers';
+import { useAdvancedSearch } from './hooks';
+
+export default defineComponent({
+  name: 'BannerList',
+  setup(props, context: SetupContext) {
+    const { t } = useTranslation(context);
+    const { loading: isZonesLoading, data: zoneList } = useFetchZones({
+      context,
+    });
+
+    const {
+      zoneFilter,
+      zonesOptionList,
+      dateFilter,
+      statusFilter,
+      statusesOptionList,
+      filterParams,
+      tags,
+      tagRemovalHandler,
+    } = useAdvancedSearch({
+      context,
+      t,
+      zoneList,
+    });
+
+    const {
+      fetchEntityList: fetchBanners,
+      isLoading: isBannersLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      searchQuery,
+      pageNumber,
+      pageCount,
+      pageSize,
+    } = useDataTable<Banner>({
+      fetchEntityList: (params) =>
+        getBanners({
+          query: params.searchQuery,
+          pageNumber: params.pageNumber,
+          pageSize: params.pageSize,
+          ...filterParams.value,
+        }),
+      initialValue: [],
+      context,
+      resourceName: 'Banners',
+    });
+
+    watch(filterParams, () => {
+      if (isZonesLoading.value) {
+        return;
+      }
+
+      const newQuery = {
+        ...pick(context.root.$route.query, ['query', 'pageNumber']),
+        ...filterParams.value,
+      };
+
+      if (!isEqual(context.root.$route.query, newQuery)) {
+        context.root.$router.replace({ query: newQuery });
+        fetchBanners();
+      }
+    });
+
+    const { isDeleting, handleResourceDelete } = useResourceDelete({
+      deleteResource: deleteBanner,
+      resourceName: 'Banner',
+      onSuccess: fetchBanners,
+      context,
+    });
+
+    const isBusy = (bannerId: number): boolean => {
+      return isDeleting(bannerId) || isBannersLoading.value;
+    };
+
+    const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>
+      getColumnDefs(context.root.$t)
+    );
+
+    const isRowDataLoading = computed<boolean>(
+      () => isBannersLoading.value || isZonesLoading.value
+    );
+
+    return {
+      columnDefs,
+      isRowDataLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      getBannersBannerFormUrl,
+      searchQuery,
+      pageNumber,
+      pageCount,
+      pageSize,
+      isBusy,
+      handleResourceDelete,
+
+      // Advanced search
+      zoneFilter,
+      zonesOptionList,
+      dateFilter,
+      statusFilter,
+      statusesOptionList,
+      tags,
+      tagRemovalHandler,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+.filters {
+  display: flex;
+  margin: 0 -10px;
+
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  .filter {
+    padding: 10px 10px 0;
+    width: 50%;
+    margin: 0;
+  }
+}
+</style>

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

@@ -0,0 +1 @@
+export { useAdvancedSearch } from './useAdvancedSearch';