Merge pull request #14 from sergio222-dev/develop

finished simple filters

database.types.ts

@@ -196,6 +196,24 @@ export type Database = {
       }
     }
     Views: {
+      card_rarity: {
+        Row: {
+          name: string | null
+        }
+        Relationships: []
+      }
+      card_sets: {
+        Row: {
+          name: string | null
+        }
+        Relationships: []
+      }
+      card_subtypes: {
+        Row: {
+          name: string | null
+        }
+        Relationships: []
+      }
       card_types: {
         Row: {
           name: string | null

src/features/cards/components/CardFilter.tsx

@@ -4,9 +4,9 @@ import { Button, ButtonIcon }                   from "~/components/button";
 import { ChipFilter, FilterField }              from "~/components/filterField/FilterField";
 import { Icon }                                 from "~/components/icons/Icon";
 import type { Filter }                          from "~/models/filters/Filter";
-import { FILTERS_TYPES }                        from "~/models/filters/Filter";
-import { useSubtypeLoader }                     from "~/providers/loaders/cards";
-import { FilterContext }    from '~/stores/filterContext';
+import { FILTERS_TYPES }                                                  from "~/models/filters/Filter";
+import { useRarityLoader, useSetLoader, useSubtypeLoader, useTypeLoader } from "~/providers/loaders/cards";
+import { FilterContext }                                                  from '~/stores/filterContext';
 import { Pagination }                           from './Pagination';
 
 const useCostFilters = () => {
@@ -33,25 +33,74 @@ const useTypeFilters = (types: string[]) => {
       id:         `type-${t}`,
       label:      `Type: ${t}`,
       value:      t,
-      field:      ['subtype', 'subtype2'],
+      field:      ['type'],
       filterType: FILTERS_TYPES.IN,
     }
   })
 
   return typeFilters;
 }
 
+const useRarityFilters = (rarities: string[]) => {
+  const rarityFilters: Filter[] = rarities.map(t => {
+    return {
+      id:         `rarity-${t}`,
+      label:      `Rarity: ${t}`,
+      value:      t,
+      field:      ['rarity'],
+      filterType: FILTERS_TYPES.IN,
+    }
+  })
+
+  return rarityFilters;
+}
+
+const useSetFilters = (sets: string[]) => {
+  const setFilters: Filter[] = sets.map(t => {
+    return {
+      id:         `set-${t}`,
+      label:      `Set: ${t}`,
+      value:      t,
+      field:      ['set'],
+      filterType: FILTERS_TYPES.IN,
+    }
+  })
+
+  return setFilters;
+}
+
+const useSubTypeFilters = (subtypes: string[]) => {
+  const subTypeFilters: Filter[] = subtypes.map(t => {
+    return {
+      id:         `subtype-${t}`,
+      label:      `Subtype: ${t}`,
+      value:      t,
+      field:      ['subtype', 'subtype2'],
+      filterType: FILTERS_TYPES.IN,
+    }
+  })
+
+  return subTypeFilters;
+}
+
 export const CardFilter = component$(() => {
   // Loaders
   const subtypes = useSubtypeLoader();
+  const types    = useTypeLoader();
+  const rarities = useRarityLoader();
+  const sets     = useSetLoader();
 
   // Context
   const c         = useContext(FilterContext);
   const refDialog = useSignal<HTMLDialogElement>();
 
   // STATE
   const costFilters = useCostFilters();
-  const typeFilters = useTypeFilters(subtypes.value);
+  const typeFilters = useTypeFilters(types.value);
+  const subTypeFilters = useSubTypeFilters(subtypes.value);
+  const rarityFilters = useRarityFilters(rarities.value);
+  const setFilters = useSetFilters(sets.value);
+
 
   // Handlers
   const addContainsFilter = $(async (value: string | undefined) => {
@@ -134,7 +183,7 @@ export const CardFilter = component$(() => {
               ))}
             </div>
           </Accordion>
-          <Accordion title="Type">
+          <Accordion title="Types">
             <div class="flex flex-wrap gap-2">
               {typeFilters.map(f => (
                 <p
@@ -148,6 +197,48 @@ export const CardFilter = component$(() => {
               ))}
             </div>
           </Accordion>
+          <Accordion title="Subtypes">
+            <div class="flex flex-wrap gap-2">
+              {subTypeFilters.map(f => (
+                <p
+                  class={`hover:bg-primary hover:text-white ring-2 ring-primary cursor-pointer px-2 py-1 
+                  ${isFilterInList(f) ? 'bg-primary text-white' : ''}`}
+                  key={f.id}
+                  onClick$={() => handleAddDialogFilter(f)}
+                >
+                  {f.label}
+                </p>
+              ))}
+            </div>
+          </Accordion>
+          <Accordion title="Sets">
+            <div class="flex flex-wrap gap-2">
+              {setFilters.map(f => (
+                <p
+                  class={`hover:bg-primary hover:text-white ring-2 ring-primary cursor-pointer px-2 py-1 
+                  ${isFilterInList(f) ? 'bg-primary text-white' : ''}`}
+                  key={f.id}
+                  onClick$={() => handleAddDialogFilter(f)}
+                >
+                  {f.label}
+                </p>
+              ))}
+            </div>
+          </Accordion>
+          <Accordion title="Rarirty">
+            <div class="flex flex-wrap gap-2">
+              {rarityFilters.map(f => (
+                <p
+                  class={`hover:bg-primary hover:text-white ring-2 ring-primary cursor-pointer px-2 py-1 
+                  ${isFilterInList(f) ? 'bg-primary text-white' : ''}`}
+                  key={f.id}
+                  onClick$={() => handleAddDialogFilter(f)}
+                >
+                  {f.label}
+                </p>
+              ))}
+            </div>
+          </Accordion>
         </div>
       </dialog>
       <Pagination/>

src/providers/loaders/cards.ts

@@ -6,7 +6,25 @@ import { getDefaultFilter } from '~/utils/cardFilters';
 // eslint-disable-next-line qwik/loader-location
 export const useSubtypeLoader = routeLoader$<string[]>(async (request) => {
   const cardRepo = new CardRepository(request);
-  return await cardRepo.getCardSubtype()
+  return await cardRepo.getViewCard("card_subtypes")
+});
+
+// eslint-disable-next-line qwik/loader-location
+export const useTypeLoader = routeLoader$<string[]>(async (request) => {
+  const cardRepo = new CardRepository(request);
+  return await cardRepo.getViewCard("card_types")
+});
+
+// eslint-disable-next-line qwik/loader-location
+export const useRarityLoader = routeLoader$<string[]>(async (request) => {
+  const cardRepo = new CardRepository(request);
+  return await cardRepo.getViewCard("card_rarity")
+});
+
+// eslint-disable-next-line qwik/loader-location
+export const useSetLoader = routeLoader$<string[]>(async (request) => {
+  const cardRepo = new CardRepository(request);
+  return await cardRepo.getViewCard("card_sets")
 });
 
 // eslint-disable-next-line qwik/loader-location

src/providers/repositories/CardRepository.ts

@@ -8,6 +8,8 @@ import { convertFiltersToExpression, convertToFilter } from "~/models/filters/Fi
 import type { FetchCardsPayload }                      from "~/models/infrastructure/FetchCardsPayload";
 import { getCardImageUrl }                             from '~/utils/cardImage';
 
+type View = "card_types" | "card_subtypes" | "card_sets" | "card_rarity";
+
 export class CardRepository {
 
   private readonly request: RequestEventLoader | RequestEventBase;
@@ -86,32 +88,51 @@ export class CardRepository {
     });
   }
 
-  public async getCardSubtype(): Promise<string[]> {
-
+  public async getViewCard(view: View): Promise<string[]>{
     const supabase = createClientServer(this.request);
 
+    let table: View;
+
+    switch (view) {
+      case "card_types":
+        table = "card_types";
+        break;
+      case "card_subtypes":
+        table = "card_subtypes";
+        break;
+      case "card_sets":
+        table = "card_sets";
+        break;
+      case "card_rarity":
+        table = "card_rarity";
+        break;
+      default:
+        table = "card_types";
+        break;
+    }
+
     const { data, error } = await supabase
-      .from('card_types')
+      .from(table)
       .select();
 
     if (error) {
-      Logger.error(error, `${CardRepository.name} ${this.getCardSubtype.name}`);
+      Logger.error(error, `${CardRepository.name} ${this.getViewCard.name}`);
     }
 
     if (!data) {
       return [];
     }
 
-    const subtypes = data.map(c => c.name);
-    const subtypesWithoutNull: string[] = [];
+    const values = data.map(c => c.name);
+    const valuesWithoutNull: string[] = [];
     // remove null values
-    subtypes.forEach(c => {
+    values.forEach(c => {
       if (c !== null) {
-        subtypesWithoutNull.push(c);
+        valuesWithoutNull.push(c);
       }
     });
 
-    return subtypesWithoutNull;
+    return valuesWithoutNull;
   }
 
   private addFilters(query: PostgrestTransformBuilder, filter: FetchCardsPayload) {
@@ -129,6 +150,7 @@ export class CardRepository {
     const mapFilters = convertFiltersToExpression(inFilters);
 
     [...mapFilters, ...containsFiltersExpression].forEach(e => {
+      console.log(e);
       query = query.or(e);
     });
   }

src/routes/cards/index.tsx

@@ -1,7 +1,7 @@
 import { component$ } from '@builder.io/qwik';
 import { Card }                           from '~/features/cards';
 
-export { useSubtypeLoader, useCardsLoader } from '~/providers/loaders/cards';
+export { useSubtypeLoader, useCardsLoader, useTypeLoader, useRarityLoader, useSetLoader } from '~/providers/loaders/cards';
 
 export default component$(() => {
   // const storeCards = useFilterStore();

src/routes/decks/create/[...id]/index.tsx

@@ -8,7 +8,7 @@ import { createClientServer }    from '~/lib/supabase-qwik';
 import type { DeckState }        from "~/models/Deck";
 import { DeckRepository }        from '~/providers/repositories/DeckRepository';
 
-export { useSubtypeLoader, useCardDeckLoader } from '~/providers/loaders/cards';
+export { useSubtypeLoader, useCardDeckLoader, useTypeLoader, useRarityLoader, useSetLoader } from '~/providers/loaders/cards';
 
 export const onRequest: RequestHandler = async (r) => {
   const supabase = createClientServer(r);