@tager/admin-banners 0.2.0 → 0.3.2

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';

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

@@ -0,0 +1,152 @@
+import {
+  computed,
+  ComputedRef,
+  ref,
+  Ref,
+  SetupContext,
+  watch,
+} from '@vue/composition-api';
+import { TFunction } from 'i18next';
+
+import {
+  FilterTagType,
+  getFilterParamAsString,
+  getFilterParamAsStringArray,
+  getFilterParams,
+  OptionType,
+} from '@tager/admin-ui';
+
+import { Zone } from '../../../../typings/zones';
+import { Status } from '../../../../typings/banners';
+import { getStatus } from '../BannerList.helpers';
+
+interface Params {
+  context: SetupContext;
+  t: TFunction;
+  zoneList: ComputedRef<Zone[]>;
+}
+
+interface State {
+  zoneFilter: Ref<OptionType[]>;
+  zonesOptionList: ComputedRef<OptionType[]>;
+  dateFilter: Ref<string>;
+  statusFilter: Ref<OptionType[]>;
+  statusesOptionList: ComputedRef<OptionType[]>;
+  filterParams: ComputedRef<Record<string, string | string[]>>;
+  tags: ComputedRef<FilterTagType[]>;
+  tagRemovalHandler(event: FilterTagType): void;
+}
+
+enum FilterTypes {
+  Zone = 'zone',
+  Date = 'date',
+  Status = 'status',
+}
+
+export function useAdvancedSearch({ context, t, zoneList }: Params): State {
+  /** Zone **/
+
+  const zonesOptionList = computed<OptionType[]>(() =>
+    zoneList.value.map(({ id, name }) => ({
+      value: id,
+      label: name,
+    }))
+  );
+
+  const initialZoneFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.Zone
+    );
+    return zonesOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const zoneFilter = ref<OptionType[]>(initialZoneFilter.value);
+
+  watch(initialZoneFilter, () => {
+    zoneFilter.value = initialZoneFilter.value;
+  });
+
+  /** Date **/
+
+  const initialDateFilter = computed<string>(
+    () =>
+      getFilterParamAsString(context.root.$route.query, FilterTypes.Date) ?? ''
+  );
+
+  const dateFilter = ref<string>(initialDateFilter.value);
+
+  watch(initialDateFilter, () => {
+    dateFilter.value = initialDateFilter.value;
+  });
+
+  /** Status **/
+
+  const statusesOptionList = computed<OptionType[]>(() =>
+    Object.entries(Status).map(([_, value]) => ({
+      value: value,
+      label: getStatus(value, t),
+    }))
+  );
+
+  const initialStatusFilter = computed<OptionType[]>(() => {
+    const queryValue = getFilterParamAsStringArray(
+      context.root.$route.query,
+      FilterTypes.Status
+    );
+    return statusesOptionList.value.filter(({ value }) =>
+      queryValue.some((selected) => selected === value)
+    );
+  });
+
+  const statusFilter = ref<OptionType[]>(initialStatusFilter.value);
+
+  watch(initialStatusFilter, () => {
+    statusFilter.value = initialStatusFilter.value;
+  });
+
+  /** Params **/
+
+  const filterParams = computed(() =>
+    getFilterParams({
+      [FilterTypes.Zone]: zoneFilter.value.map(({ value }) => value),
+      [FilterTypes.Date]: dateFilter.value,
+      [FilterTypes.Status]: statusFilter.value.map(({ value }) => value),
+    })
+  );
+
+  /** Tag removal handler **/
+
+  const tagRemovalHandler = (event: FilterTagType): void => {
+    if (event.name === FilterTypes.Zone) {
+      zoneFilter.value = zoneFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+    if (event.name === FilterTypes.Date) {
+      dateFilter.value = '';
+    }
+    if (event.name === FilterTypes.Status) {
+      statusFilter.value = statusFilter.value.filter(
+        ({ value }) => value !== event.value
+      );
+    }
+  };
+
+  /** Tags **/
+
+  const tags = computed<FilterTagType[]>(() => []);
+
+  return {
+    zoneFilter,
+    zonesOptionList,
+    dateFilter,
+    statusFilter,
+    statusesOptionList,
+    filterParams,
+    tags,
+    tagRemovalHandler,
+  };
+}

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

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

package/src/views/Home.vue

@@ -0,0 +1,37 @@
+<template>
+  <navigation-grid :nav-items="navItemList" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from '@vue/composition-api';
+
+import { NavigationGridItem } from '@tager/admin-ui';
+
+import {
+  getBannersZoneListUrl,
+  getBannersBannerListUrl,
+} from '../constants/paths';
+
+export default defineComponent({
+  name: 'Home',
+  setup(props, context) {
+    const navItemList = ref<NavigationGridItem[]>([
+      {
+        name: context.root.$t('banners:banners'),
+        linkList: [
+          {
+            url: getBannersZoneListUrl(),
+            text: context.root.$t('banners:zones'),
+          },
+          {
+            url: getBannersBannerListUrl(),
+            text: context.root.$t('banners:banners'),
+          },
+        ],
+      },
+    ]);
+
+    return { navItemList };
+  },
+});
+</script>

package/src/views/Zones/ZoneList/ZoneList.helpers.ts

@@ -0,0 +1,34 @@
+import { TFunction } from 'i18next';
+
+import { ColumnDefinition } from '@tager/admin-ui';
+
+import { Zone } from '../../../typings/zones';
+import { getBannersBannerListUrl } from '../../../constants/paths';
+
+export function getColumnDefs(t: TFunction): ColumnDefinition<Zone>[] {
+  return [
+    {
+      id: 0,
+      name: 'ID',
+      field: 'id',
+      style: { width: '50px', textAlign: 'center' },
+      headStyle: { width: '50px', textAlign: 'center' },
+    },
+    {
+      id: 1,
+      name: t('banners:name'),
+      field: 'name',
+      type: 'name',
+    },
+    {
+      id: 2,
+      name: t('banners:banners'),
+      field: 'bannersCount',
+      style: { whiteSpace: 'nowrap', width: '130px' },
+    },
+  ];
+}
+
+export function getLinkToBannersByZone(zoneId: number): string {
+  return `${getBannersBannerListUrl()}?filter[zone]=${zoneId}`;
+}

package/src/views/Zones/ZoneList/ZoneList.vue

@@ -0,0 +1,75 @@
+<template>
+  <page :title="$t('banners:zones')">
+    <template v-slot:content>
+      <data-table
+        :column-defs="columnDefs"
+        :row-data="rowData"
+        :loading="isRowDataLoading"
+        :error-message="errorMessage"
+        data-table="banners-zones"
+        :use-search="false"
+        :use-pagination="false"
+        @change="handleChange"
+      >
+        <template v-slot:cell(banners-count)="{ row }">
+          <count-button
+            :href="getLinkToBannersByZone(row.id)"
+            variant="outline-secondary"
+            :count="row.bannersCount"
+          >
+            {{ $t('banners:banners') }}
+          </count-button>
+        </template>
+      </data-table>
+    </template>
+  </page>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  SetupContext,
+} from '@vue/composition-api';
+
+import { useDataTable } from '@tager/admin-ui';
+
+import { Zone } from '../../../typings/zones';
+import { getZones } from '../../../services/requests';
+
+import { getColumnDefs, getLinkToBannersByZone } from './ZoneList.helpers';
+
+export default defineComponent({
+  name: 'ZoneList',
+  setup(props, context: SetupContext) {
+    const {
+      fetchEntityList: fetchZones,
+      isLoading: isZonesLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+    } = useDataTable<Zone>({
+      fetchEntityList: getZones,
+      initialValue: [],
+      context,
+      resourceName: 'Banner Zones',
+    });
+
+    onMounted(() => {
+      fetchZones();
+    });
+
+    const columnDefs = computed(() => getColumnDefs(context.root.$t));
+
+    return {
+      columnDefs,
+      isRowDataLoading: isZonesLoading,
+      rowData,
+      errorMessage,
+      handleChange,
+      getLinkToBannersByZone,
+    };
+  },
+});
+</script>

package/src/views/Zones/ZoneList/index.ts

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

package/dist/views/BannerAreaForm.vue.d.ts

@@ -1,22 +0,0 @@
-import Vue from 'vue';
-import { BannerArea } from '../typings/model';
-import { getBannerAreaListUrl } from '../constants/paths';
-declare type FormValues = {
-    alias: string;
-    label: string;
-    scenario: string;
-};
-declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
-    values: FormValues;
-    errors: Record<string, string>;
-    isContentLoading: boolean;
-}, {
-    convertReviewToInitialValues(bannerArea: BannerArea): FormValues;
-    updateValues(): void;
-    submitForm(): void;
-    getAreaListUrl: typeof getBannerAreaListUrl;
-}, {
-    areaId: string;
-    isCreation: boolean;
-}, Record<never, any>>;
-export default _default;

package/dist/views/BannerAreaList.vue.d.ts

@@ -1,17 +0,0 @@
-import Vue from 'vue';
-import { ColumnDefinition } from '@tager/admin-ui';
-import { Nullable } from '@tager/admin-services';
-import { BannerArea } from '../typings/model';
-declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
-    columnDefs: Array<ColumnDefinition<BannerArea>>;
-    rowData: Array<BannerArea>;
-    deletingBannerAreaIdList: Array<number>;
-    isRowDataLoading: boolean;
-    errorMessage: Nullable<string>;
-}, {
-    getBannerAreaUrl(areaId: number | string): string;
-    refreshBannerAreaList(): Promise<void>;
-    handleBannerAreaDelete(bannerArea: BannerArea): void;
-    getLinkToBannerItems(areaAlias: string): string;
-}, unknown, Record<never, any>>;
-export default _default;

package/dist/views/BannerItemForm.vue.d.ts

@@ -1,27 +0,0 @@
-import Vue from 'vue';
-import { FileType, Nullable } from '@tager/admin-services';
-import { BannerArea, BannerItem } from '../typings/model';
-declare type FormValues = {
-    title: string;
-    text: string;
-    buttonLink: string;
-    buttonLabel: string;
-    buttonIsNewTab: boolean;
-    image: Nullable<FileType>;
-};
-declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
-    values: FormValues;
-    errors: Record<string, string>;
-    isContentLoading: boolean;
-    bannerArea: Nullable<BannerArea>;
-}, {
-    updateValues(): void;
-    convertReviewToInitialValues(bannerItem: BannerItem): FormValues;
-    submitForm(): void;
-}, {
-    itemId: string;
-    areaAlias: string;
-    isCreation: boolean;
-    bannerItemListUrl: string;
-}, Record<never, any>>;
-export default _default;

package/dist/views/BannerItemList.vue.d.ts

@@ -1,22 +0,0 @@
-import Vue from 'vue';
-import { ColumnDefinition } from '@tager/admin-ui';
-import { Nullable } from '@tager/admin-services';
-import { BannerArea, BannerItem } from '../typings/model';
-declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
-    columnDefs: Array<ColumnDefinition<BannerItem>>;
-    rowData: Array<BannerItem>;
-    deletingBannerItemIdList: Array<number>;
-    isBannerItemMoving: boolean;
-    isRowDataLoading: boolean;
-    errorMessage: Nullable<string>;
-    bannerArea: Nullable<BannerArea>;
-}, {
-    refreshBannerItemList(): Promise<void>;
-    moveBannerItem(bannerItemId: number, direction: 'up' | 'down'): void;
-    handleBannerItemDelete(bannerItem: BannerItem): void;
-    getLinkToBannerItemForm(bannerItemId: number | string): string;
-}, {
-    areaAlias: string;
-    pageTitle: string;
-}, Record<never, any>>;
-export default _default;

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from './constants/routes';
-export * from './constants/menu';
-export * from './constants/paths';

package/src/locales/en.js

@@ -1,3 +0,0 @@
-const EN = {};
-
-export default EN;

package/src/locales/ru.js

@@ -1,3 +0,0 @@
-const RU = {};
-
-export default RU;