Add categories (#60)

* add category filtering * have a category list * fix categories behaviour * fix filter behaviour * select ALL category button when categoryFilter is empty --------- Co-authored-by: Pavol Rusnak <pavol@rusnak.io>
lnbits · Jan 22, 2024 · 57fead8 · 57fead8
1 parent 891ad1c
commit 57fead8
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 9 deletions.
diff --git a/models.py b/models.py
@@ -116,6 +116,7 @@ class Item(BaseModel):
     description: Optional[str]
     tax: Optional[float] = 0.0
     disabled: bool = False
+    categories: Optional[List[str]] = []
 
 
 class CreateUpdateItemData(BaseModel):

diff --git a/templates/tpos/index.html b/templates/tpos/index.html
@@ -363,7 +363,6 @@ <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} TPoS extension</h6>
             v-if="formDialog.data.tip_wallet"
             use-input
             use-chips
-            multiple
             hide-dropdown-icon
             input-debounce="0"
             new-value-mode="add-unique"
@@ -459,6 +458,20 @@ <h6 class="text-subtitle1 q-my-none">{{SITE_TITLE}} TPoS extension</h6>
           v-model.number="itemDialog.data.price"
           :label="`Price (${itemDialog.data.currency})*`"
         ></q-input>
+        <q-select
+          filled
+          multiple
+          dense
+          emit-value
+          v-model="itemDialog.data.categories"
+          :options="categoryList"
+          use-input
+          use-chips
+          hide-dropdown-icon
+          input-debounce="0"
+          new-value-mode="add-unique"
+          label="Categories (hit enter to add values)"
+        ></q-select>
         <q-input
           filled
           dense
@@ -784,6 +797,7 @@ <h6 class="text-subtitle1 q-my-none">
             title: '',
             image: '',
             price: '',
+            categories: [],
             disabled: false
           }
         },
@@ -843,6 +857,21 @@ <h6 class="text-subtitle1 q-my-none">
         }
       }
     },
+    computed: {
+      categoryList() {
+        return this.tposs.reduce((acc, tpos) => {
+          tpos.items.forEach(item => {
+            item.categories &&
+            item.categories.forEach(category => {
+              if (!acc.includes(category)) {
+                acc.push(category)
+              }
+            })
+          })
+          return acc
+        }, [])
+      }
+    },
     methods: {
       generatePIN() {
         // random 6 digit PIN
@@ -1007,6 +1036,7 @@ <h6 class="text-subtitle1 q-my-none">
           title: '',
           image: '',
           price: '',
+          categories: [],
           disabled: false
         }
       },

diff --git a/templates/tpos/tpos.html b/templates/tpos/tpos.html
@@ -322,6 +322,21 @@ <h5 class="q-mt-none q-mb-sm">${totalfsat}<small> sat</small></h5>
           </q-input>
         </div>
       </div>
+      <div
+        v-if="categories && categories.length"
+        class="flex justify-center q-pa-md q-gutter-md"
+      >
+        <template v-for="category in Array.from(categories.values())">
+          <q-btn
+            color="secondary"
+            size="lg"
+            padding="lg"
+            :label="category"
+            @click="handleCategoryBtn(category)"
+            :outline="!(categoryFilter === category || (categoryFilter === '' && category === 'All'))"
+          ></q-btn>
+        </template>
+      </div>
       <div class="row q-col-gutter-md q-pa-md">
         <div
           class="col-12 col-sm-6 col-md-4 col-lg-3"
@@ -742,6 +757,7 @@ <h5 class="q-mt-none">
         showPoS: true,
         cartDrawer: this.$q.screen.width > 1200,
         searchTerm: '',
+        categoryFilter: '',
         cart: new Map()
       }
     },
@@ -811,14 +827,23 @@ <h5 class="q-mt-none">
         return this.isFullScreen ? 'fullscreen_exit' : 'fullscreen'
       },
       filteredItems() {
-        if (!this.searchTerm) return this.items.filter(item => !item.disabled)
-
-        return this.items.filter(item => {
-          return (
-            !item.disabled &&
-            item.title.toLowerCase().includes(this.searchTerm.toLowerCase())
-          )
-        })
+        // filter out disabled items
+        let items = this.items.filter(item => !item.disabled)
+        // if searchTerm entered, filter out items that don't match
+        if (this.searchTerm) {
+          items = items.filter(item => {
+            return item.title.toLowerCase().includes(this.searchTerm.toLowerCase())
+          })
+        }
+        // if categoryFilter entered, filter out items that don't match
+        if (this.categoryFilter) {
+          items = items.filter(item => {
+            return item.categories
+              .map(c => c.toLowerCase())
+              .includes(this.categoryFilter.toLowerCase())
+          })
+        }
+        return items
       },
       drawerWidth() {
         return this.$q.screen.width < 500 ? 375 : 450
@@ -1200,6 +1225,27 @@ <h5 class="q-mt-none">
       },
       handleColorScheme(val) {
         this.$q.localStorage.set('lnbits.tpos.color', val)
+      },
+      extractCategories(items) {
+        let categories = new Set()
+        items
+          .map(item => {
+            item.categories &&
+              item.categories.forEach(category => categories.add(category))
+          })
+          .filter(Boolean)
+
+        if (categories.size) {
+          categories = ['All', ...categories]
+        }
+        return Array.from(categories)
+      },
+      handleCategoryBtn(category) {
+        if (this.categoryFilter == category) {
+          this.categoryFilter = ''
+        } else {
+          this.categoryFilter = category == 'All' ? '' : category
+        }
       }
     },
     created: function () {
@@ -1225,6 +1271,7 @@ <h5 class="q-mt-none">
       })
       if (this.items.length > 0) {
         this.showPoS = false
+        this.categories = this.extractCategories(this.items)
       }
 
       window.addEventListener('keyup', event => {