chore: query filter attributes from meilisearch

stacksjs · Jun 23, 2022 · 313876b · 313876b
1 parent 5e0ec97
commit 313876b
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 57 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1 @@
+VITE_MEILISEARCH_KEY=
diff --git a/.gitignore b/.gitignore
@@ -6,7 +6,7 @@ dist-ssr
 .DS_STORE
 .cache
 .temp
-
+.env
 # Cypress
 cypress/downloads
 cypress/fixtures

diff --git a/src/components.d.ts b/src/components.d.ts
@@ -8,7 +8,6 @@ declare module '@vue/runtime-core' {
     Table: typeof import('./components/Table.vue')['default']
     TableBody: typeof import('./components/TableBody.vue')['default']
     TableCellActionItems: typeof import('./components/TableCellActionItems.vue')['default']
-    TableFilter: typeof import('./components/TableFilter.vue')['default']
     TableFilters: typeof import('./components/TableFilters.vue')['default']
     TableHead: typeof import('./components/TableHead.vue')['default']
     TablePagination: typeof import('./components/TablePagination.vue')['default']

diff --git a/src/components/TableFilters.vue b/src/components/TableFilters.vue
@@ -2,59 +2,77 @@
 import { ref } from 'vue-demi'
 import Multiselect from '@vueform/multiselect'
 
-const activeFilters = [
-  { value: [{ value: 'Scott Brothers Dairy', label: 'Scott Brothers Dairy' }, { value: 'Southwest Traders', label: 'Southwest Traders' }], name: 'Customer Name' },
-  {
-    value: [
-      { value: 'General Data', label: 'General Data' },
-      { value: 'Liberty Glove & Safety', label: 'Liberty Glove & Safety' },
-      { value: 'Paragon Films', label: 'Paragon Films' },
-      { value: 'Smurfit Kappa', label: 'Smurfit Kappa' },
-      { value: 'Wardkraft', label: 'Wardkraft' },
-      { value: 'WestRock', label: 'WestRock' },
-    ],
-    name: 'Vendor Name',
-  },
-  {
-    value: [
-      { value: '1000', label: '1000' },
-      { value: '1001', label: '1001' },
-      { value: '1002', label: '1002' },
-      { value: '1003', label: '1003' },
-      { value: '1004', label: '1004' },
-      { value: '1005', label: '1005' },
-    ],
-    name: 'Invoice Number',
-  },
-  {
-    value: [
-      { value: '1000', label: '1000' },
-      { value: '1001', label: '1001' },
-      { value: '1002', label: '1002' },
-      { value: '1003', label: '1003' },
-      { value: '1004', label: '1004' },
-      { value: '1005', label: '1005' },
-    ],
-    name: 'Order',
-  },
-  {
-    value: [
-      { value: '1000', label: '1000' },
-      { value: '1001', label: '1001' },
-      { value: '1002', label: '1002' },
-      { value: '1003', label: '1003' },
-      { value: '1004', label: '1004' },
-      { value: '1005', label: '1005' },
-    ],
-    name: 'Purchase Order',
-  },
-  { value: [], name: 'Part Name' },
-  { value: [], name: 'Stage' },
-  { value: [], name: 'Has Document Type' },
-  { value: [], name: 'Has No Document Type' },
-]
+// const activeFilters = [
+//   { value: [{ value: 'Scott Brothers Dairy', label: 'Scott Brothers Dairy' }, { value: 'Southwest Traders', label: 'Southwest Traders' }], name: 'Customer Name' },
+//   {
+//     value: [
+//       { value: 'General Data', label: 'General Data' },
+//       { value: 'Liberty Glove & Safety', label: 'Liberty Glove & Safety' },
+//       { value: 'Paragon Films', label: 'Paragon Films' },
+//       { value: 'Smurfit Kappa', label: 'Smurfit Kappa' },
+//       { value: 'Wardkraft', label: 'Wardkraft' },
+//       { value: 'WestRock', label: 'WestRock' },
+//     ],
+//     name: 'Vendor Name',
+//   },
+//   {
+//     value: [
+//       { value: '1000', label: '1000' },
+//       { value: '1001', label: '1001' },
+//       { value: '1002', label: '1002' },
+//       { value: '1003', label: '1003' },
+//       { value: '1004', label: '1004' },
+//       { value: '1005', label: '1005' },
+//     ],
+//     name: 'Invoice Number',
+//   },
+//   {
+//     value: [
+//       { value: '1000', label: '1000' },
+//       { value: '1001', label: '1001' },
+//       { value: '1002', label: '1002' },
+//       { value: '1003', label: '1003' },
+//       { value: '1004', label: '1004' },
+//       { value: '1005', label: '1005' },
+//     ],
+//     name: 'Order',
+//   },
+//   {
+//     value: [
+//       { value: '1000', label: '1000' },
+//       { value: '1001', label: '1001' },
+//       { value: '1002', label: '1002' },
+//       { value: '1003', label: '1003' },
+//       { value: '1004', label: '1004' },
+//       { value: '1005', label: '1005' },
+//     ],
+//     name: 'Purchase Order',
+//   },
+//   { value: [], name: 'Part Name' },
+//   { value: [], name: 'Stage' },
+//   { value: [], name: 'Has Document Type' },
+//   { value: [], name: 'Has No Document Type' },
+// ]
 
 const open = ref(false)
+
+const { searchFilters, type } = await useTable()
+
+const activeFilters = await searchFilters(type.value)
+
+const allFilters = activeFilters.map((filter: string) => {
+  const filterName = filter.split('_')
+  const name = []
+
+  for (let i = 0; i < filterName.length; i++)
+    name[i] = filterName[i].charAt(0).toUpperCase() + filterName[i].substring(1)
+
+  // Directly return the joined string
+
+  return { name: name.join(' ') }
+})
+
+console.log(allFilters)
 </script>
 
 <template>
@@ -101,19 +119,19 @@ const open = ref(false)
       <div id="disclosure-1" class="border-t border-gray-200 py-10">
         <div class="max-w-7xl mx-auto  px-4 text-sm sm:px-6 md:gap-x-6 lg:px-8">
           <div class="grid grid-cols-1 gap-y-10 auto-rows-min md:grid-cols-4 md:gap-x-6">
-            <fieldset v-for="(filter, index) in activeFilters" :key="index">
+            <fieldset v-for="(filter, index) in allFilters" :key="index">
               <legend class="block font-medium">
                 {{ filter.name }}
               </legend>
               <div class="pt-6 space-y-6 sm:pt-4 sm:space-y-4">
                 <div class="flex items-center text-base sm:text-sm">
-                  <Multiselect
+                  <!-- <Multiselect
                     :options="filter.value"
                     mode="tags"
                     :close-on-select="false"
                     :searchable="true"
                     :create-option="true"
-                  />
+                  /> -->
                 </div>
               </div>
             </fieldset>

diff --git a/src/composables/table.ts b/src/composables/table.ts
@@ -131,7 +131,7 @@ function client(): MeiliSearch {
 
   return new MeiliSearch({
     host: table.source,
-    apiKey: table.password,
+    apiKey: import.meta.env.VITE_MEILISEARCH_KEY,
   })
 }
 
@@ -169,6 +169,10 @@ async function search(q?: string, options?: SearchParams): Promise<void | Search
   }
 }
 
+async function searchFilters(index: string): Promise<any> {
+  return await client().index(index).getFilterableAttributes()
+}
+
 function goToPrevPage() {
   if (table.currentPage === 1 || currentPage === undefined || table === undefined)
     return
@@ -251,6 +255,10 @@ function columnName(col: string) {
   return col.split(':')[0].trim()
 }
 
+function filterName(filter: string) {
+  return filter.split(':')[0].trim()
+}
+
 export async function useTable(store?: TableStore) {
   return {
     store,
@@ -270,6 +278,7 @@ export async function useTable(store?: TableStore) {
     goToNextPage,
     goToPage,
     search,
+    searchFilters,
     searchParams,
     toggleSort,
     isColumnUsedAsSort,
@@ -284,5 +293,6 @@ export async function useTable(store?: TableStore) {
     selectedAll,
     totalPages,
     pages,
+    filterName,
   }
 }