@tager/admin-banners 0.3.6 → 1.0.1

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

@@ -1,12 +1,6 @@
-import {
-  computed,
-  ComputedRef,
-  ref,
-  Ref,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, ComputedRef, ref, Ref, SetupContext, watch } from 'vue';
 import { TFunction } from 'i18next';
+import { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import {
   FilterTagType,
@@ -15,15 +9,16 @@ import {
   getFilterParams,
   OptionType,
 } from '@tager/admin-ui';
+import { isNotNullish } from '@tager/admin-services';
 
 import { Zone } from '../../../../typings/zones';
 import { Status } from '../../../../typings/banners';
 import { getStatus } from '../BannerList.helpers';
 
 interface Params {
-  context: SetupContext;
   t: TFunction;
-  zoneList: ComputedRef<Zone[]>;
+  zoneList: Ref<Zone[]>;
+  route: RouteLocationNormalizedLoaded;
 }
 
 interface State {
@@ -34,6 +29,7 @@ interface State {
   statusesOptionList: ComputedRef<OptionType[]>;
   filterParams: ComputedRef<Record<string, string | string[]>>;
   tags: ComputedRef<FilterTagType[]>;
+
   tagRemovalHandler(event: FilterTagType): void;
 }
 
@@ -43,7 +39,7 @@ enum FilterTypes {
   Status = 'status',
 }
 
-export function useAdvancedSearch({ context, t, zoneList }: Params): State {
+export function useAdvancedSearch({ t, zoneList, route }: Params): State {
   /** Zone **/
 
   const zonesOptionList = computed<OptionType[]>(() =>
@@ -55,7 +51,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
 
   const initialZoneFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.Zone
     );
     return zonesOptionList.value.filter(({ value }) =>
@@ -72,8 +68,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
   /** Date **/
 
   const initialDateFilter = computed<string>(
-    () =>
-      getFilterParamAsString(context.root.$route.query, FilterTypes.Date) ?? ''
+    () => getFilterParamAsString(route.query, FilterTypes.Date) ?? ''
   );
 
   const dateFilter = ref<string>(initialDateFilter.value);
@@ -93,7 +88,7 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
 
   const initialStatusFilter = computed<OptionType[]>(() => {
     const queryValue = getFilterParamAsStringArray(
-      context.root.$route.query,
+      route.query,
       FilterTypes.Status
     );
     return statusesOptionList.value.filter(({ value }) =>
@@ -137,7 +132,32 @@ export function useAdvancedSearch({ context, t, zoneList }: Params): State {
 
   /** Tags **/
 
-  const tags = computed<FilterTagType[]>(() => []);
+  const tags = computed<FilterTagType[]>(() =>
+    [
+      ...zoneFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.Zone,
+        title: t('banners:zone'),
+      })),
+
+      ...statusFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: FilterTypes.Status,
+        title: t('banners:status'),
+      })),
+
+      dateFilter.value
+        ? {
+            value: dateFilter.value,
+            label: dateFilter.value,
+            name: FilterTypes.Date,
+            title: t('banners:date'),
+          }
+        : null,
+    ].filter(isNotNullish)
+  );
 
   return {
     zoneFilter,

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

@@ -3,7 +3,7 @@ import { TFunction } from 'i18next';
 import { ColumnDefinition } from '@tager/admin-ui';
 
 import { Zone } from '../../../typings/zones';
-import { getBannersBannerListUrl } from '../../../constants/paths';
+import { getBannersBannerListUrl } from '../../../utils/paths';
 
 export function getColumnDefs(t: TFunction): ColumnDefinition<Zone>[] {
   return [

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

@@ -1,7 +1,7 @@
 <template>
-  <page :title="$t('banners:zones')">
-    <template v-slot:content>
-      <data-table
+  <Page :title="$i18n.t('banners:zones')">
+    <template #content>
+      <DataTable
         :column-defs="columnDefs"
         :row-data="rowData"
         :loading="isRowDataLoading"
@@ -11,29 +11,26 @@
         :use-pagination="false"
         @change="handleChange"
       >
-        <template v-slot:cell(banners-count)="{ row }">
-          <count-button
+        <template #cell(banners-count)="{ row }">
+          <CountButton
             :href="getLinkToBannersByZone(row.id)"
             variant="outline-secondary"
             :count="row.bannersCount"
           >
-            {{ $t('banners:banners') }}
-          </count-button>
+            {{ $i18n.t('banners:banners') }}
+          </CountButton>
         </template>
-      </data-table>
+      </DataTable>
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onMounted,
-  SetupContext,
-} from '@vue/composition-api';
+import { computed, defineComponent, onMounted, SetupContext } from 'vue';
 
-import { useDataTable } from '@tager/admin-ui';
+import { CountButton, useDataTable, DataTable } from '@tager/admin-ui';
+import { Page } from '@tager/admin-layout';
+import { useI18n } from '@tager/admin-services';
 
 import { Zone } from '../../../typings/zones';
 import { getZones } from '../../../services/requests';
@@ -42,7 +39,10 @@ import { getColumnDefs, getLinkToBannersByZone } from './ZoneList.helpers';
 
 export default defineComponent({
   name: 'ZoneList',
-  setup(props, context: SetupContext) {
+  components: { CountButton, Page, DataTable },
+  setup() {
+    const i18n = useI18n();
+
     const {
       fetchEntityList: fetchZones,
       isLoading: isZonesLoading,
@@ -52,7 +52,6 @@ export default defineComponent({
     } = useDataTable<Zone>({
       fetchEntityList: getZones,
       initialValue: [],
-      context,
       resourceName: 'Banner Zones',
     });
 
@@ -60,7 +59,7 @@ export default defineComponent({
       fetchZones();
     });
 
-    const columnDefs = computed(() => getColumnDefs(context.root.$t));
+    const columnDefs = computed(() => getColumnDefs(i18n.t));
 
     return {
       columnDefs,

package/CHANGELOG.md

@@ -1,13 +0,0 @@
-# [0.0.2] (2020-06-06)
-
-### Features
-
-* **services:** Use VUE_APP_API_ORIGIN env variable as initial api origin value in ApiService
-
-# [0.0.3] (2020-06-06)
-
-### Bug Fixes
-
-* **services:** Use api origin from ApiService to configure url for file upload
-
-

package/dist/constants/menu.d.ts

@@ -1,5 +0,0 @@
-import { MenuItemType } from '@tager/admin-layout';
-import { TranslateFunction } from '@tager/admin-services';
-export declare function getBannersMenuItem(params: {
-    t: TranslateFunction;
-}): MenuItemType;

package/dist/dev.d.ts

@@ -1 +0,0 @@
-import '@tager/admin-ui/dist/admin-ui.css';