✨ Multiple filters for items

src/components/Shop/ShopTable.vue

@@ -11,7 +11,7 @@ import {
   biCaretRight,
   biBook
 } from '@quasar/extras/bootstrap-icons';
-import { item_columns, item_filters } from 'src/types/filters';
+import { item_columns, item_filters, rarities } from 'src/types/filters';
 import { itemsStore, settingsStore } from 'src/stores/store';
 import { useQuasar } from 'quasar';
 import { matPriorityHigh, matWarning } from '@quasar/extras/material-icons';
@@ -50,13 +50,20 @@ const pagination = ref({
   rowsNumber: 0
 });
 const sources = ref<string[]>();
-
-const filters = ref<item_filters>({
-  name: '',
-  level: { min: 0, max: 25 },
-  rarity: null,
-  type: null,
-  source: '',
+const filters = ref<{
+  name_filter: string;
+  level_filter: { min: number; max: number };
+  rarity_filter: rarities[];
+  type_filter: string[];
+  source_filter: string[];
+  sort_by: item_columns;
+  order_by: 'ascending' | 'descending';
+}>({
+  name_filter: '',
+  level_filter: { min: 0, max: 25 },
+  rarity_filter: [],
+  type_filter: [],
+  source_filter: [],
   sort_by: 'name',
   order_by: 'ascending'
 });
@@ -127,8 +134,31 @@ const columns: {
 ];
 
 const fetchFromServer = debounce(async function (startRow: number, rowsPerPage: number) {
+  const body: item_filters = {
+    min_level_filter: filters.value.level_filter.min,
+    max_level_filter: filters.value.level_filter.max,
+    pathfinder_version: settings.getPfVersion
+  };
+  if (filters.value.name_filter != '') {
+    body.name_filter = filters.value.name_filter;
+  }
+  if (filters.value.rarity_filter != undefined && filters.value.rarity_filter.length > 0) {
+    body.rarity_filter = filters.value.rarity_filter;
+  }
+  if (filters.value.type_filter != undefined && filters.value.type_filter.length > 0) {
+    body.type_filter = filters.value.type_filter;
+  }
+  if (filters.value.source_filter != undefined && filters.value.source_filter.length > 0) {
+    body.source_filter = filters.value.source_filter;
+  }
   try {
-    const request = await requestItems(startRow, rowsPerPage, filters.value, settings.getPfVersion);
+    const request = await requestItems(
+      startRow,
+      rowsPerPage,
+      filters.value.sort_by,
+      filters.value.order_by,
+      body
+    );
     if (request) {
       pagination.value.rowsNumber = request.total;
       rows.value = request.results;
@@ -165,11 +195,11 @@ async function onRequest(props) {
 
 const resetFilters = () => {
   filters.value = {
-    name: '',
-    level: { min: 0, max: 25 },
-    rarity: null,
-    type: null,
-    source: '',
+    name_filter: '',
+    level_filter: { min: 0, max: 25 },
+    rarity_filter: [],
+    type_filter: [],
+    source_filter: [],
     sort_by: 'name',
     order_by: 'ascending'
   };
@@ -487,11 +517,12 @@ try {
           >
             <div class="col-grow">
               <q-select
+                multiple
                 dense
                 outlined
                 clearable
                 options-dense
-                v-model="filters.source"
+                v-model="filters.source_filter"
                 :options="Object.freeze(sources)"
                 :label="columns[0].label"
                 :style="columns[0].style"
@@ -510,7 +541,7 @@ try {
               <q-input
                 dense
                 outlined
-                v-model="filters.name"
+                v-model="filters.name_filter"
                 :label="columns[1].label"
                 :style="columns[1].style"
               />
@@ -544,13 +575,13 @@ try {
                 stack-label
               >
                 <template v-slot:control>
-                  {{ filters.level.min }} to {{ filters.level.max }}
+                  {{ filters.level_filter.min }} to {{ filters.level_filter.max }}
                 </template>
                 <q-popup-proxy>
                   <q-banner rounded>
                     <div class="tw-pt-8 tw-px-1">
                       <q-range
-                        v-model="filters.level"
+                        v-model="filters.level_filter"
                         label-always
                         :min="0"
                         :max="25"
@@ -585,11 +616,12 @@ try {
           >
             <div class="col-grow">
               <q-select
+                multiple
                 dense
                 outlined
                 clearable
                 options-dense
-                v-model="filters.rarity"
+                v-model="filters.rarity_filter"
                 :options="Object.freeze(['Common', 'Uncommon', 'Rare', 'Unique'])"
                 :label="columns[3].label"
                 :style="columns[3].style"
@@ -617,11 +649,12 @@ try {
           >
             <div class="col-grow">
               <q-select
+                multiple
                 dense
                 outlined
                 clearable
                 options-dense
-                v-model="filters.type"
+                v-model="filters.type_filter"
                 :options="Object.freeze(['Armor', 'Consumable', 'Equipment', 'Shield', 'Weapon'])"
                 :label="columns[4].label"
                 :style="columns[4].style"

src/types/filters.ts

@@ -32,11 +32,11 @@ export type variants = 'Weak' | 'Base' | 'Elite';
 export type item_columns = 'id' | 'name' | 'level' | 'rarity' | 'type' | 'source';
 
 export type item_filters = {
-  name: string;
-  level: { min: number; max: number };
-  rarity: rarities | null;
-  type: 'consumable' | 'equipment' | null;
-  source: string;
-  sort_by: item_columns;
-  order_by: 'ascending' | 'descending';
+  name_filter?: string;
+  min_level_filter?: number;
+  max_level_filter?: number;
+  rarity_filter?: rarities[];
+  type_filter?: string[];
+  source_filter?: string[];
+  pathfinder_version: string;
 };

src/utils/shop-api-calls.ts

@@ -1,5 +1,5 @@
 import { backendUrl } from 'src/boot/globals';
-import type { item_filters } from 'src/types/filters';
+import type { item_columns, item_filters } from 'src/types/filters';
 import type { item, item_response } from 'src/types/item';
 
 export async function requestSources() {
@@ -21,49 +21,32 @@ export async function requestSources() {
 }
 
 export async function requestItems(
-  start: number,
+  cursor: number,
   page_size: number,
-  filters: item_filters,
-  version: string
+  sort_by: item_columns,
+  order_by: 'ascending' | 'descending',
+  body: item_filters
 ) {
   if (page_size === 0) {
     page_size = -1;
   }
+
   try {
     const requestOptions = {
-      method: 'GET',
-      headers: { accept: 'application/json' }
+      method: 'POST',
+      headers: { accept: 'application/json', 'Content-Type': 'application/json' },
+      body: JSON.stringify(body)
     };
-    let request =
+    const request =
       backendUrl +
       '/shop/list?cursor=' +
-      start +
+      cursor +
       '&page_size=' +
       page_size +
-      '&pathfinder_version=' +
-      version +
       '&sort_by=' +
-      filters.sort_by +
+      sort_by +
       '&order_by=' +
-      filters.order_by;
-    if (filters.name) {
-      request += '&name_filter=' + filters.name;
-    }
-    if (filters.level.min != undefined) {
-      request += '&min_level_filter=' + filters.level.min;
-    }
-    if (filters.level.max != undefined) {
-      request += '&max_level_filter=' + filters.level.max;
-    }
-    if (filters.rarity) {
-      request += '&rarity_filter=' + filters.rarity;
-    }
-    if (filters.type) {
-      request += '&type_filter=' + filters.type;
-    }
-    if (filters.source) {
-      request += '&source_filter=' + filters.source;
-    }
+      order_by;
     const response = await fetch(request, requestOptions);
     const data = await response.json();
     if (!response.ok) {