@tager/admin-banners 0.1.5 → 0.3.0

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;

package/src/views/BannerAreaForm.vue

@@ -1,173 +0,0 @@
-<template>
-  <page
-    :title="isCreation ? 'Create Banner Area' : 'Update Banner Area'"
-    :is-content-loading="isContentLoading"
-    :footer="{ onSubmit: submitForm, backHref: getAreaListUrl() }"
-  >
-    <template v-slot:content>
-      <form novalidate @submit.prevent="submitForm">
-        <form-field
-          v-model="values.alias"
-          name="alias"
-          label="Alias"
-          :error="errors.alias"
-        />
-
-        <form-field
-          v-model="values.label"
-          name="label"
-          label="Label"
-          :error="errors.label"
-        />
-
-        <form-field
-          v-model="values.scenario"
-          name="scenario"
-          label="Scenario"
-          :error="errors.scenario"
-        />
-      </form>
-    </template>
-  </page>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { convertRequestErrorToMap } from '@tager/admin-services';
-
-import {
-  BannerAreaCreatePayload,
-  createBannerArea,
-  getBannerAreaById,
-  updateBannerArea,
-} from '../services/requests';
-import { BannerArea } from '../typings/model';
-import { getBannerAreaListUrl } from '../constants/paths';
-
-type FormValues = {
-  alias: string;
-  label: string;
-  scenario: string;
-};
-
-const initialValues: FormValues = {
-  alias: '',
-  label: '',
-  scenario: '',
-};
-
-export default Vue.extend({
-  name: 'BannerAreaForm',
-  data(): {
-    values: FormValues;
-    errors: Record<string, string>;
-    isContentLoading: boolean;
-  } {
-    return {
-      values: { ...initialValues },
-      errors: {},
-      isContentLoading: false,
-    };
-  },
-  computed: {
-    areaId(): string {
-      return this.$route.params.areaId;
-    },
-    isCreation(): boolean {
-      return this.areaId === 'create';
-    },
-  },
-  watch: {
-    areaId() {
-      this.updateValues();
-    },
-  },
-  mounted(): void {
-    this.updateValues();
-  },
-  methods: {
-    convertReviewToInitialValues(bannerArea: BannerArea): FormValues {
-      return {
-        alias: bannerArea.alias,
-        label: bannerArea.label,
-        scenario: bannerArea.scenario,
-      };
-    },
-    updateValues() {
-      if (this.isCreation) {
-        this.values = { ...initialValues };
-      } else {
-        this.isContentLoading = true;
-
-        getBannerAreaById(this.areaId)
-          .then((response) => {
-            this.values = this.convertReviewToInitialValues(response.data);
-          })
-          .catch(console.error)
-          .finally(() => {
-            this.isContentLoading = false;
-          });
-      }
-    },
-    submitForm() {
-      const body: BannerAreaCreatePayload = {
-        label: this.values.label,
-        alias: this.values.alias,
-        scenario: this.values.scenario,
-      };
-
-      const requestPromise = this.isCreation
-        ? createBannerArea(body)
-        : updateBannerArea(this.areaId, body);
-
-      requestPromise
-        .then(() => {
-          this.errors = {};
-          this.$router.push(getBannerAreaListUrl());
-
-          this.$toast({
-            variant: 'success',
-            title: 'Success',
-            body: `Banner Area was successfully ${
-              this.isCreation ? 'created' : 'updated'
-            }`,
-          });
-        })
-        .catch((error) => {
-          console.error(error);
-          this.errors = convertRequestErrorToMap(error);
-          this.$toast({
-            variant: 'danger',
-            title: 'Error',
-            body: `Blog bannerArea ${
-              this.isCreation ? 'creation' : 'update'
-            } was failed`,
-          });
-        });
-    },
-    getAreaListUrl: getBannerAreaListUrl,
-  },
-});
-</script>
-
-<style scoped lang="scss">
-.bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.save-button {
-  min-width: 100px;
-}
-
-.alias-field-inner {
-  display: flex;
-  align-items: center;
-
-  span {
-    font-size: 0.9em;
-    margin-right: 10px;
-  }
-}
-</style>