@tager/admin-banners 0.3.7 → 1.0.0

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

@@ -1,15 +1,15 @@
 <template>
-  <page
-    :title="$t('banners:banners')"
+  <Page
+    :title="$i18n.t('banners:banners')"
     :header-buttons="[
       {
-        text: $t('banners:createBanner'),
+        text: $i18n.t('banners:createBanner'),
         href: getBannersBannerFormUrl({ bannerId: 'create' }),
       },
     ]"
   >
-    <template v-slot:content>
-      <data-table
+    <template #content>
+      <DataTable
         :column-defs="columnDefs"
         :row-data="rowData"
         :loading="isRowDataLoading"
@@ -26,82 +26,85 @@
         }"
         @change="handleChange"
       >
-        <template v-slot:filters>
-          <advanced-search :tags="tags" @click:tag="tagRemovalHandler">
+        <template #filters>
+          <AdvancedSearch :tags="tags" @click:tag="tagRemovalHandler">
             <div class="filters">
-              <form-field-multi-select
-                v-model="zoneFilter"
+              <FormFieldMultiSelect
+                v-model:selected-options="zoneFilter"
                 :options="zonesOptionList"
                 name="zoneFilter"
                 :searchable="true"
-                :label="$t('banners:zone')"
+                :label="$i18n.t('banners:zone')"
                 class="filter"
               />
 
-              <form-field
-                v-model="dateFilter"
-                :label="$t('banners:date')"
+              <FormField
+                v-model:value="dateFilter"
+                :label="$i18n.t('banners:date')"
                 name="dateFilter"
                 type="date"
                 class="filter"
               />
 
-              <form-field-multi-select
-                v-model="statusFilter"
+              <FormFieldMultiSelect
+                v-model:selected-options="statusFilter"
                 :options="statusesOptionList"
                 name="statusFilter"
                 :searchable="true"
-                :label="$t('banners:status')"
+                :label="$i18n.t('banners:status')"
                 class="filter"
               />
             </div>
-          </advanced-search>
+          </AdvancedSearch>
         </template>
 
-        <template v-slot:cell(actions)="{ row }">
-          <base-button
+        <template #cell(actions)="{ row }">
+          <BaseButton
             variant="icon"
-            :title="$t('banners:edit')"
+            :title="$i18n.t('banners:edit')"
             :disabled="isBusy(row.id)"
             :href="getBannersBannerFormUrl({ bannerId: row.id })"
           >
-            <svg-icon name="edit" />
-          </base-button>
+            <EditIcon />
+          </BaseButton>
 
-          <base-button
+          <BaseButton
             variant="icon"
-            :title="$t('banners:remove')"
+            :title="$i18n.t('banners:remove')"
             :disabled="isBusy(row.id)"
             @click="handleResourceDelete(row.id)"
           >
-            <svg-icon name="delete" />
-          </base-button>
+            <DeleteIcon />
+          </BaseButton>
         </template>
-      </data-table>
+      </DataTable>
     </template>
-  </page>
+  </Page>
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  SetupContext,
-  watch,
-} from '@vue/composition-api';
+import { computed, defineComponent, SetupContext, watch } from 'vue';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
+import { useRoute, useRouter } from 'vue-router';
 
 import {
   ColumnDefinition,
   useDataTable,
-  useTranslation,
+  DataTable,
+  AdvancedSearch,
+  FormFieldMultiSelect,
+  FormField,
+  BaseButton,
+  EditIcon,
+  DeleteIcon,
 } from '@tager/admin-ui';
-import { useResourceDelete } from '@tager/admin-services';
+import { useI18n, useResourceDelete } from '@tager/admin-services';
+import { Page } from '@tager/admin-layout';
 
 import { deleteBanner, getBanners } from '../../../services/requests';
 import { Banner } from '../../../typings/banners';
-import { getBannersBannerFormUrl } from '../../../constants/paths';
+import { getBannersBannerFormUrl } from '../../../utils/paths';
 import { useFetchZones } from '../../../hooks';
 
 import { getColumnDefs } from './BannerList.helpers';
@@ -109,11 +112,22 @@ import { useAdvancedSearch } from './hooks';
 
 export default defineComponent({
   name: 'BannerList',
+  components: {
+    DeleteIcon,
+    EditIcon,
+    BaseButton,
+    FormField,
+    FormFieldMultiSelect,
+    AdvancedSearch,
+    Page,
+    DataTable,
+  },
   setup(props, context: SetupContext) {
-    const { t } = useTranslation(context);
-    const { loading: isZonesLoading, data: zoneList } = useFetchZones({
-      context,
-    });
+    const route = useRoute();
+    const router = useRouter();
+    const { t } = useI18n();
+
+    const { loading: isZonesLoading, data: zoneList } = useFetchZones();
 
     const {
       zoneFilter,
@@ -128,6 +142,7 @@ export default defineComponent({
       context,
       t,
       zoneList,
+      route,
     });
 
     const {
@@ -149,7 +164,6 @@ export default defineComponent({
           ...filterParams.value,
         }),
       initialValue: [],
-      context,
       resourceName: 'Banners',
     });
 
@@ -159,12 +173,12 @@ export default defineComponent({
       }
 
       const newQuery = {
-        ...pick(context.root.$route.query, ['query', 'pageNumber']),
+        ...pick(route.query, ['query', 'pageNumber']),
         ...filterParams.value,
       };
 
-      if (!isEqual(context.root.$route.query, newQuery)) {
-        context.root.$router.replace({ query: newQuery });
+      if (!isEqual(route.query, newQuery)) {
+        router.replace({ query: newQuery });
         fetchBanners();
       }
     });
@@ -173,7 +187,6 @@ export default defineComponent({
       deleteResource: deleteBanner,
       resourceName: 'Banner',
       onSuccess: fetchBanners,
-      context,
     });
 
     const isBusy = (bannerId: number): boolean => {
@@ -181,7 +194,7 @@ export default defineComponent({
     };
 
     const columnDefs = computed<ColumnDefinition<Banner>[]>(() =>
-      getColumnDefs(zoneList.value, context.root.$t)
+      getColumnDefs(zoneList.value, t)
     );
 
     const isRowDataLoading = computed<boolean>(

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,
@@ -23,7 +17,8 @@ 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,12 @@ enum FilterTypes {
   Status = 'status',
 }
 
-export function useAdvancedSearch({ context, t, zoneList }: Params): State {
+export function useAdvancedSearch({
+  context,
+  t,
+  zoneList,
+  route,
+}: Params): State {
   /** Zone **/
 
   const zonesOptionList = computed<OptionType[]>(() =>
@@ -55,7 +56,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 +73,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 +93,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 }) =>

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