@tager/admin-banners 1.0.0 → 1.0.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i18n, request, useI18n, useResource, useResourceDelete, createId, useToast, navigateBack, convertRequestErrorToMap } from "@tager/admin-services";
+import { i18n, request, useI18n, useResource, isNotNullish, useResourceDelete, createId, useToast, navigateBack, convertRequestErrorToMap } from "@tager/admin-services";
 import { defineComponent, onMounted, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, toDisplayString, ref, watch, createElementVNode, withModifiers, createElementBlock, Fragment, renderList } from "vue";
 import { CountButton, DataTable, useDataTable, getFilterParamAsStringArray, getFilterParamAsString, getFilterParams, DeleteIcon, EditIcon, BaseButton, FormField, FormFieldMultiSelect, AdvancedSearch, FormFieldFileInput, FormFieldCheckbox, InputLabel, FormFieldSelect, FormFooter } from "@tager/admin-ui";
 import { Page } from "@tager/admin-layout";
@@ -351,12 +351,7 @@ function getColumnDefs(zoneList, t) {
     }
   ];
 }
-function useAdvancedSearch({
-  context,
-  t,
-  zoneList,
-  route
-}) {
+function useAdvancedSearch({ t, zoneList, route }) {
   const zonesOptionList = computed(
     () => zoneList.value.map(({ id, name }) => ({
       value: id,
@@ -427,7 +422,28 @@ function useAdvancedSearch({
       );
     }
   };
-  const tags = computed(() => []);
+  const tags = computed(
+    () => [
+      ...zoneFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: "zone",
+        title: t("banners:zone")
+      })),
+      ...statusFilter.value.map(({ value, label }) => ({
+        value,
+        label,
+        name: "status",
+        title: t("banners:status")
+      })),
+      dateFilter.value ? {
+        value: dateFilter.value,
+        label: dateFilter.value,
+        name: "date",
+        title: t("banners:date")
+      } : null
+    ].filter(isNotNullish)
+  );
   return {
     zoneFilter,
     zonesOptionList,
@@ -452,7 +468,7 @@ const _sfc_main$1 = defineComponent({
     Page,
     DataTable
   },
-  setup(props, context) {
+  setup() {
     const route = useRoute();
     const router = useRouter();
     const { t } = useI18n();
@@ -467,7 +483,6 @@ const _sfc_main$1 = defineComponent({
       tags,
       tagRemovalHandler
     } = useAdvancedSearch({
-      context,
       t,
       zoneList,
       route

package/dist/style.css

@@ -1 +1 @@
-.filters{display:flex;margin:0 -10px}.filters:not(:first-child){margin-top:10px}.filters .filter{padding:10px 10px 0;width:50%;margin:0}.date{display:grid;grid-template-columns:repeat(2,1fr);column-gap:10px}.zone{display:flex}.zone>*:first-child{flex:1 1 1px}.zone>*:last-child{flex-basis:30%;margin-left:20px}.link{display:flex;align-items:flex-end}.link>*:first-child{flex:1 1 1px}.link>*:last-child{flex-basis:30%;margin-left:20px;padding-bottom:8px}
+.filters{display:grid;gap:1rem;grid-template-columns:1fr 1fr 1fr}.date{display:grid;grid-template-columns:repeat(2,1fr);column-gap:10px}.zone{display:flex}.zone>*:first-child{flex:1 1 1px}.zone>*:last-child{flex-basis:30%;margin-left:20px}.link{display:flex;align-items:flex-end}.link>*:first-child{flex:1 1 1px}.link>*:last-child{flex-basis:30%;margin-left:20px;padding-bottom:8px}

package/dist/views/Banners/BannerList/hooks/useAdvancedSearch.d.ts

@@ -1,10 +1,9 @@
-import { ComputedRef, Ref, SetupContext } from 'vue';
+import { ComputedRef, Ref } from 'vue';
 import { TFunction } from 'i18next';
 import { RouteLocationNormalizedLoaded } from 'vue-router';
 import { FilterTagType, OptionType } from '@tager/admin-ui';
 import { Zone } from '../../../../typings/zones';
 interface Params {
-    context: SetupContext;
     t: TFunction;
     zoneList: Ref<Zone[]>;
     route: RouteLocationNormalizedLoaded;
@@ -19,5 +18,5 @@ interface State {
     tags: ComputedRef<FilterTagType[]>;
     tagRemovalHandler(event: FilterTagType): void;
 }
-export declare function useAdvancedSearch({ context, t, zoneList, route, }: Params): State;
+export declare function useAdvancedSearch({ t, zoneList, route }: Params): State;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tager/admin-banners",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "license": "MIT",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",

package/src/utils/paths.ts

@@ -1,15 +1,15 @@
-import {compile} from 'path-to-regexp';
+import { compile } from 'path-to-regexp';
 
-import {BANNERS_ROUTE_PATHS} from '../constants/paths';
+import { BANNERS_ROUTE_PATHS } from '../constants/paths';
 
 export function getBannersZoneListUrl() {
-    return BANNERS_ROUTE_PATHS.ZONE_LIST;
+  return BANNERS_ROUTE_PATHS.ZONE_LIST;
 }
 
 export function getBannersBannerListUrl() {
-    return BANNERS_ROUTE_PATHS.BANNER_LIST;
+  return BANNERS_ROUTE_PATHS.BANNER_LIST;
 }
 
 export function getBannersBannerFormUrl(params: { bannerId: number | string }) {
-    return compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
+  return compile(BANNERS_ROUTE_PATHS.BANNER_FORM)(params);
 }

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

@@ -122,7 +122,7 @@ export default defineComponent({
     Page,
     DataTable,
   },
-  setup(props, context: SetupContext) {
+  setup() {
     const route = useRoute();
     const router = useRouter();
     const { t } = useI18n();
@@ -139,7 +139,6 @@ export default defineComponent({
       tags,
       tagRemovalHandler,
     } = useAdvancedSearch({
-      context,
       t,
       zoneList,
       route,
@@ -230,17 +229,8 @@ export default defineComponent({
 
 <style lang="scss">
 .filters {
-  display: flex;
-  margin: 0 -10px;
-
-  &:not(:first-child) {
-    margin-top: 10px;
-  }
-
-  .filter {
-    padding: 10px 10px 0;
-    width: 50%;
-    margin: 0;
-  }
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr 1fr 1fr;
 }
 </style>

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

@@ -9,13 +9,13 @@ 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: Ref<Zone[]>;
   route: RouteLocationNormalizedLoaded;
@@ -39,12 +39,7 @@ enum FilterTypes {
   Status = 'status',
 }
 
-export function useAdvancedSearch({
-  context,
-  t,
-  zoneList,
-  route,
-}: Params): State {
+export function useAdvancedSearch({ t, zoneList, route }: Params): State {
   /** Zone **/
 
   const zonesOptionList = computed<OptionType[]>(() =>
@@ -137,7 +132,32 @@ export function useAdvancedSearch({
 
   /** 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,