From 8dad1225758a74fc6a79f8c8a7c2cc728f8295eb Mon Sep 17 00:00:00 2001
From: Raphael Odini <raphodn@users.noreply.github.com>
Date: Sun, 31 Mar 2024 00:19:11 +0100
Subject: [PATCH] refactor: new ProductFilterMenu component (#479)

---
 src/components/ProductFilterMenu.vue | 33 ++++++++++++++++++++++++++++
 src/views/BrandDetail.vue            | 13 ++---------
 src/views/CategoryDetail.vue         | 13 ++---------
 src/views/ProductList.vue            | 16 +++-----------
 4 files changed, 40 insertions(+), 35 deletions(-)
 create mode 100644 src/components/ProductFilterMenu.vue

diff --git a/src/components/ProductFilterMenu.vue b/src/components/ProductFilterMenu.vue
new file mode 100644
index 00000000000..35cc6c3a067
--- /dev/null
+++ b/src/components/ProductFilterMenu.vue
@@ -0,0 +1,33 @@
+<template>
+  <v-menu scroll-strategy="close">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" size="small" class="mr-2" rounded="xl" prepend-icon="mdi-filter-variant" :active="!!productFilter">{{ $t('Common.Filter') }}</v-btn>
+    </template>
+    <v-list>
+      <v-list-item :slim="true" v-for="filter in productFilterList" :key="filter.key" :prepend-icon="(productFilter === filter.key) ? 'mdi-check-circle' : 'mdi-circle-outline'" :active="productFilter === filter.key" @click="selectProductFilter(filter.key)">
+        {{ $t('Common.' + filter.value) }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import constants from '../constants'
+
+export default {
+  props: {
+    'productFilter': String,
+  },
+  data() {
+    return {
+      productFilterList: constants.PRODUCT_FILTER_LIST,
+    }
+  },
+  emits: ['update:productFilter'],
+  methods: {
+    selectProductFilter(filter) {
+      this.$emit('update:productFilter', filter)
+    }
+  }
+}
+</script>
diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
index 36cba88d3ed..c69afa6a2d8 100644
--- a/src/views/BrandDetail.vue
+++ b/src/views/BrandDetail.vue
@@ -30,16 +30,7 @@
 
   <v-row v-if="!loading">
     <v-col>
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" class="mr-2" prepend-icon="mdi-filter-variant" :active="!!productFilter">{{ $t('Common.Filter') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="filter in productFilterList" :key="filter.key" :prepend-icon="(productFilter === filter.key) ? 'mdi-check-circle' : 'mdi-circle-outline'" :active="productFilter === filter.key" @click="toggleProductFilter(filter.key)">
-            {{ $t('Common.' + filter.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
 
       <v-menu scroll-strategy="close">
         <template v-slot:activator="{ props }">
@@ -74,6 +65,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
     'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
     'ShareButton': defineAsyncComponent(() => import('../components/ShareButton.vue'))
@@ -82,7 +74,6 @@ export default {
     return {
       // filter & order
       productFilter: '',
-      productFilterList: constants.PRODUCT_FILTER_LIST,
       productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
       productOrderList: constants.PRODUCT_ORDER_BY_LIST,
       // data
diff --git a/src/views/CategoryDetail.vue b/src/views/CategoryDetail.vue
index 50c564f8397..365f5e43c2c 100644
--- a/src/views/CategoryDetail.vue
+++ b/src/views/CategoryDetail.vue
@@ -30,16 +30,7 @@
 
   <v-row v-if="!loading">
     <v-col>
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" class="mr-2" prepend-icon="mdi-filter-variant" :active="!!productFilter">{{ $t('Common.Filter') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="filter in productFilterList" :key="filter.key" :prepend-icon="(productFilter === filter.key) ? 'mdi-check-circle' : 'mdi-circle-outline'" :active="productFilter === filter.key" @click="toggleProductFilter(filter.key)">
-            {{ $t('Common.' + filter.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
 
       <v-menu scroll-strategy="close">
         <template v-slot:activator="{ props }">
@@ -74,6 +65,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
     'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
     'ShareButton': defineAsyncComponent(() => import('../components/ShareButton.vue'))
@@ -82,7 +74,6 @@ export default {
     return {
       // filter & order
       productFilter: '',
-      productFilterList: constants.PRODUCT_FILTER_LIST,
       productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
       productOrderList: constants.PRODUCT_ORDER_BY_LIST,
       // data
diff --git a/src/views/ProductList.vue b/src/views/ProductList.vue
index cd9bf02627c..0cdabe132cf 100644
--- a/src/views/ProductList.vue
+++ b/src/views/ProductList.vue
@@ -9,20 +9,10 @@
       <v-chip class="mr-2" label variant="text" prepend-icon="mdi-food-outline">
         {{ productTotal }}<span class="d-none d-sm-inline">&nbsp;products</span>
       </v-chip>
+      <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
       <v-menu scroll-strategy="close">
         <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" class="mr-2" prepend-icon="mdi-filter-variant" :active="!!productFilter">{{ $t('Common.Filter') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="filter in productFilterList" :key="filter.key" :prepend-icon="(productFilter === filter.key) ? 'mdi-check-circle' : 'mdi-circle-outline'" :active="productFilter === filter.key" @click="toggleProductFilter(filter.key)">
-            {{ $t('Common.' + filter.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
-
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon"  :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
+          <v-btn v-bind="props" size="small" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon" :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
         </template>
         <v-list>
           <v-list-item :slim="true" v-for="order in productOrderList" :key="order.key" :prepend-icon="order.icon" :active="productOrder === order.key" @click="selectProductOrder(order.key)">
@@ -53,13 +43,13 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
   },
   data() {
     return {
       // filter & order
       productFilter: '',
-      productFilterList: constants.PRODUCT_FILTER_LIST,
       productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
       productOrderList: constants.PRODUCT_ORDER_BY_LIST,
       // data