From 2b18d4a983390528d1da870c48dee6a2b8202b1f Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 18:45:51 +0300
Subject: [PATCH 01/17] [MainUI] added grouping rules by semantic tag

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 62 ++++++++++++++++---
 1 file changed, 52 insertions(+), 10 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 3c0121e9fc..cd77d34f61 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -78,7 +78,16 @@
         <f7-block-title class="searchbar-hide-on-search">
           {{ rules.length }} {{ type.toLowerCase() }}
         </f7-block-title>
-
+        <div class="searchbar-found padding-left padding-right">
+          <f7-segmented strong tag="p">
+            <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
+              Alphabetical
+            </f7-button>
+            <f7-button :active="groupBy === 'semantic'" @click="switchGroupOrder('semantic')">
+              By Semantic Tag
+            </f7-button>
+          </f7-segmented>
+        </div>
         <f7-list
           v-show="rules.length > 0"
           class="searchbar-found col rules-list"
@@ -133,9 +142,10 @@
 
 <script>
 import RuleStatus from '@/components/rule/rule-status-mixin'
+import TagMixin from '@/components/tags/tag-mixin'
 
 export default {
-  mixins: [RuleStatus],
+  mixins: [RuleStatus, TagMixin],
   props: ['showScripts', 'showScenes'],
   components: {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')
@@ -149,6 +159,7 @@ export default {
       initSearchbar: false,
       selectedItems: [],
       showCheckboxes: false,
+      groupBy: 'alphabetical',
       eventSource: null
     }
   },
@@ -160,15 +171,34 @@ export default {
       return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/${this.type.toLowerCase()}`
     },
     indexedRules () {
-      return this.rules.reduce((prev, rule, i, rules) => {
-        const initial = rule.name.substring(0, 1).toUpperCase()
-        if (!prev[initial]) {
-          prev[initial] = []
-        }
-        prev[initial].push(rule)
+      if (this.groupBy === 'alphabetical') {
+        return this.rules.reduce((prev, rule, i, rules) => {
+          const initial = rule.name.substring(0, 1).toUpperCase()
+          if (!prev[initial]) {
+            prev[initial] = []
+          }
+          prev[initial].push(rule)
+
+          return prev
+        }, {})
+      } else if (this.groupBy === 'semantic') {
+        const semanticGroup = this.rules.reduce((prev, rule, i, rules) => {
+          let initial = rule.tags.filter((t) => t !== 'Script' && t !== 'Scene' &&
+            t !== 'Schedule' && this.isSemanticTag(t))
+          if (initial.length === 0) initial = '- No Semantic Tags -'
+
+          if (!prev[initial]) {
+            prev[initial] = []
+          }
+          prev[initial].push(rule)
 
-        return prev
-      }, {})
+          return prev
+        }, {})
+        return Object.keys(semanticGroup).sort((a, b) => a.localeCompare(b)).reduce((objEntries, key) => {
+          objEntries[key] = semanticGroup[key]
+          return objEntries
+        }, {})
+      }
     },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
@@ -325,6 +355,18 @@ export default {
         console.error(err)
         this.$f7.dialog.alert('An error occurred while enabling/disabling: ' + err)
       })
+    },
+    switchGroupOrder (groupBy) {
+      this.groupBy = groupBy
+      const searchbar = this.$refs.searchbar.$el.f7Searchbar
+      const filterQuery = searchbar.query
+      this.$nextTick(() => {
+        if (filterQuery) {
+          searchbar.clear()
+          searchbar.search(filterQuery)
+        }
+        if (groupBy === 'alphabetical') this.$refs.listIndex.update()
+      })
     }
   }
 }

From 3028bbc6eb5ce4f2e348909a185cf866372b2707 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 20:19:56 +0300
Subject: [PATCH 02/17] [MainUI] added grouping rules by semantic tag

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../web/src/pages/settings/rules/rules-list.vue             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index cd77d34f61..01ef48f160 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -83,8 +83,8 @@
             <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
               Alphabetical
             </f7-button>
-            <f7-button :active="groupBy === 'semantic'" @click="switchGroupOrder('semantic')">
-              By Semantic Tag
+            <f7-button v-if="type === 'Rules'" :active="groupBy === 'semantic'" @click="switchGroupOrder('semantic')">
+              By Semantic
             </f7-button>
           </f7-segmented>
         </div>
@@ -184,7 +184,7 @@ export default {
       } else if (this.groupBy === 'semantic') {
         const semanticGroup = this.rules.reduce((prev, rule, i, rules) => {
           let initial = rule.tags.filter((t) => t !== 'Script' && t !== 'Scene' &&
-            t !== 'Schedule' && this.isSemanticTag(t))
+            this.isSemanticTag(t))
           if (initial.length === 0) initial = '- No Semantic Tags -'
 
           if (!prev[initial]) {

From bdce931954d92b0c65e3d0b9a997d620829dcf6a Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 20:51:07 +0300
Subject: [PATCH 03/17] [MainUI] added grouping rules by all tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 01ef48f160..b9f324fa99 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -86,6 +86,9 @@
             <f7-button v-if="type === 'Rules'" :active="groupBy === 'semantic'" @click="switchGroupOrder('semantic')">
               By Semantic
             </f7-button>
+            <f7-button :active="groupBy === 'tags'" @click="switchGroupOrder('tags')">
+              By Tags
+            </f7-button>
           </f7-segmented>
         </div>
         <f7-list
@@ -198,6 +201,32 @@ export default {
           objEntries[key] = semanticGroup[key]
           return objEntries
         }, {})
+      } else if (this.groupBy === 'tags') {
+        const tagsMap = new Map()
+        this.rules.forEach((rule, i, rules) => {
+          if (rule.tags.length > 0) {
+            rule.tags.filter((t) => t !== 'Scratchpad')
+              .forEach(t => {
+                let tag = t.substring(0, 1).toUpperCase() + t.slice(1)
+                if (tag.includes('Marketplace:')) tag = '- Marketplace -'
+                let tags = []
+                if (tagsMap.has(tag)) tags = tagsMap.get(tag)
+                if (!tags.includes(rule)) tags.push(rule)
+                tagsMap.set(tag, tags)
+              })
+          } else {
+            let tags = []
+            if (tagsMap.has('- No Tags -')) tags = tagsMap.get('- No Tags -')
+            tags.push(rule)
+            tagsMap.set('- No Tags -', tags)
+          }
+        })
+
+        let tagsRules = Object.fromEntries(tagsMap)
+        return Object.keys(tagsRules).sort((a, b) => a.localeCompare(b)).reduce((objEntries, key) => {
+          objEntries[key] = tagsRules[key]
+          return objEntries
+        }, {})
       }
     },
     searchPlaceholder () {

From 7c90dd6bda87859aee8f5c382961620b9abf8110 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 23:30:30 +0300
Subject: [PATCH 04/17] [MainUI] added filtering rules by multiple tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 63 +++++++++++++++++--
 1 file changed, 59 insertions(+), 4 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index b9f324fa99..119df024a1 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -91,6 +91,17 @@
             </f7-button>
           </f7-segmented>
         </div>
+        <div class="block-title">
+          Tags:
+        </div>
+        <div class="block block-strong-ios block-outline-ios" ref="filterTags">
+          <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
+                   :color="isTagSelected(tag) ? 'blue' : ''"
+                   style="margin-right: 6px"
+                   @click="(e) => toggleSearchTag(e, tag)">
+            <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check-circle" aurora="f7:checkmark_circle_fill" />
+          </f7-chip>
+        </div>
         <f7-list
           v-show="rules.length > 0"
           class="searchbar-found col rules-list"
@@ -159,6 +170,8 @@ export default {
       loading: false,
       noRuleEngine: false,
       rules: [],
+      uniqueTags: [],
+      checkedTags: [],
       initSearchbar: false,
       selectedItems: [],
       showCheckboxes: false,
@@ -174,8 +187,10 @@ export default {
       return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/${this.type.toLowerCase()}`
     },
     indexedRules () {
+      const filteredRules = this.filterRules()
+      // console.warn('filteredRules:', filteredRules)
       if (this.groupBy === 'alphabetical') {
-        return this.rules.reduce((prev, rule, i, rules) => {
+        const initialGroup = filteredRules.reduce((prev, rule, i, rules) => {
           const initial = rule.name.substring(0, 1).toUpperCase()
           if (!prev[initial]) {
             prev[initial] = []
@@ -184,8 +199,9 @@ export default {
 
           return prev
         }, {})
+        return initialGroup
       } else if (this.groupBy === 'semantic') {
-        const semanticGroup = this.rules.reduce((prev, rule, i, rules) => {
+        const semanticGroup = filteredRules.reduce((prev, rule, i, rules) => {
           let initial = rule.tags.filter((t) => t !== 'Script' && t !== 'Scene' &&
             this.isSemanticTag(t))
           if (initial.length === 0) initial = '- No Semantic Tags -'
@@ -203,7 +219,7 @@ export default {
         }, {})
       } else if (this.groupBy === 'tags') {
         const tagsMap = new Map()
-        this.rules.forEach((rule, i, rules) => {
+        filteredRules.forEach((rule, i, rules) => {
           if (rule.tags.length > 0) {
             rule.tags.filter((t) => t !== 'Scratchpad')
               .forEach(t => {
@@ -262,6 +278,14 @@ export default {
           this.rules = this.rules.filter((r) => !r.tags || r.tags.indexOf('Scene') < 0)
         }
 
+        this.rules.forEach(rule => {
+          rule.tags.forEach(t => {
+            let tag = t.substring(0, 1).toUpperCase() + t.slice(1)
+            if (tag.includes('Marketplace:')) tag = 'Marketplace'
+            if (!this.uniqueTags.includes(tag)) this.uniqueTags.push(tag)
+          })
+        })
+
         this.loading = false
         this.ready = true
         setTimeout(() => {
@@ -394,7 +418,38 @@ export default {
           searchbar.clear()
           searchbar.search(filterQuery)
         }
-        if (groupBy === 'alphabetical') this.$refs.listIndex.update()
+        /*if (groupBy === 'alphabetical')*/ this.$refs.listIndex.update()
+      })
+    },
+    toggleSearchTag (e, item) {
+      const target = e.target
+
+      const idx = this.checkedTags.indexOf(item)
+      if (idx !== -1) {
+        this.checkedTags.splice(idx, 1)
+      } else {
+        this.checkedTags.push(item)
+      }
+      // update rules list
+      this.$refs.listIndex.update()
+    },
+    isTagSelected (tag) {
+      return this.checkedTags.includes(tag)
+    },
+    filterRules () {
+      return this.rules.filter((r) => {
+        console.warn('checkedTags', this.checkedTags)
+        if (this.checkedTags.length === 0) return true
+        let found = false
+        for (let i = 0; i < this.checkedTags.length; i++) {
+          for (let j = 0; j < r.tags.length; j++) {
+            if (r.tags[j].toLowerCase().indexOf(this.checkedTags[i].toLowerCase()) !== -1) {
+              found = true
+              break
+            }
+          }
+        }
+        return found
       })
     }
   }

From 0d82ad87a7a9ed4c599cff47c7bde5774eefc545 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 23:36:46 +0300
Subject: [PATCH 05/17] [MainUI] added filtering rules by multiple tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue  | 2 --
 1 file changed, 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 119df024a1..367e45a060 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -188,7 +188,6 @@ export default {
     },
     indexedRules () {
       const filteredRules = this.filterRules()
-      // console.warn('filteredRules:', filteredRules)
       if (this.groupBy === 'alphabetical') {
         const initialGroup = filteredRules.reduce((prev, rule, i, rules) => {
           const initial = rule.name.substring(0, 1).toUpperCase()
@@ -438,7 +437,6 @@ export default {
     },
     filterRules () {
       return this.rules.filter((r) => {
-        console.warn('checkedTags', this.checkedTags)
         if (this.checkedTags.length === 0) return true
         let found = false
         for (let i = 0; i < this.checkedTags.length; i++) {

From b07d3a3ab93f29d4bfd98ab75b7cbe99a3d7103c Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Mon, 9 Oct 2023 23:39:01 +0300
Subject: [PATCH 06/17] [MainUI] added filtering rules by multiple tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 367e45a060..e55845607d 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -417,7 +417,7 @@ export default {
           searchbar.clear()
           searchbar.search(filterQuery)
         }
-        /*if (groupBy === 'alphabetical')*/ this.$refs.listIndex.update()
+        this.$refs.listIndex.update()
       })
     },
     toggleSearchTag (e, item) {

From 5f5ee13117603c7b8bc35cf37a809ad0175ffc1c Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 00:02:24 +0300
Subject: [PATCH 07/17] [MainUI] added filtering rules by multiple tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index e55845607d..d09ab2aaff 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -242,6 +242,8 @@ export default {
           objEntries[key] = tagsRules[key]
           return objEntries
         }, {})
+      } else {
+        return this.rules
       }
     },
     searchPlaceholder () {

From daeac2e98670defb6b70540e4f7c96bfd456690a Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 08:45:42 +0300
Subject: [PATCH 08/17] [MainUI] fix material icon for checked chip

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../web/src/pages/settings/rules/rules-list.vue           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index d09ab2aaff..7037774c25 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -91,19 +91,19 @@
             </f7-button>
           </f7-segmented>
         </div>
-        <div class="block-title">
+        <div v-if="uniqueTags.length" class="block-title">
           Tags:
         </div>
-        <div class="block block-strong-ios block-outline-ios" ref="filterTags">
+        <div v-if="uniqueTags.length" class="block block-strong-ios block-outline-ios" ref="filterTags">
           <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
                    :color="isTagSelected(tag) ? 'blue' : ''"
                    style="margin-right: 6px"
                    @click="(e) => toggleSearchTag(e, tag)">
-            <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check-circle" aurora="f7:checkmark_circle_fill" />
+            <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check_circle" aurora="f7:checkmark_circle_fill" />
           </f7-chip>
         </div>
         <f7-list
-          v-show="rules.length > 0"
+          v-show="rules.length"
           class="searchbar-found col rules-list"
           ref="rulesList"
           media-list contacts-list>

From 33d16ddf05077a3292944e600a949e0bf9ee3762 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 09:05:59 +0300
Subject: [PATCH 09/17] [MainUI] fix group header for rule list

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 7037774c25..035b107956 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -106,7 +106,7 @@
           v-show="rules.length"
           class="searchbar-found col rules-list"
           ref="rulesList"
-          media-list contacts-list>
+          media-list :contacts-list="groupBy === 'alphabetical'">
           <f7-list-group v-for="(rulesWithInitial, initial) in indexedRules" :key="initial">
             <f7-list-item v-if="rulesWithInitial.length" :title="initial" group-title />
             <f7-list-item

From f18b4694eedb94575fa00b1c19dc76aa19720bb7 Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 09:32:08 +0300
Subject: [PATCH 10/17] [MainUI] rule list: added pointer cursor for filter
 chips

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 035b107956..485e28a609 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -97,7 +97,7 @@
         <div v-if="uniqueTags.length" class="block block-strong-ios block-outline-ios" ref="filterTags">
           <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
                    :color="isTagSelected(tag) ? 'blue' : ''"
-                   style="margin-right: 6px"
+                   style="margin-right: 6px; cursor: pointer;"
                    @click="(e) => toggleSearchTag(e, tag)">
             <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check_circle" aurora="f7:checkmark_circle_fill" />
           </f7-chip>

From 86e48acfa250afd5a719a9bc343bf3bf1518748c Mon Sep 17 00:00:00 2001
From: "Dmitry P. (d51x)" <dimonich110@gmail.com>
Date: Tue, 10 Oct 2023 10:13:48 +0300
Subject: [PATCH 11/17] [MainUI] rule list: sort chip tags

Signed-off-by: Dmitry P. (d51x) <dimonich110@gmail.com>
---
 .../web/src/pages/settings/rules/rules-list.vue             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 485e28a609..b1b373a852 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -91,9 +91,7 @@
             </f7-button>
           </f7-segmented>
         </div>
-        <div v-if="uniqueTags.length" class="block-title">
-          Tags:
-        </div>
+
         <div v-if="uniqueTags.length" class="block block-strong-ios block-outline-ios" ref="filterTags">
           <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
                    :color="isTagSelected(tag) ? 'blue' : ''"
@@ -287,6 +285,8 @@ export default {
           })
         })
 
+        this.uniqueTags.sort()
+
         this.loading = false
         this.ready = true
         setTimeout(() => {

From ee8800b6dece89b6b4fc889614f19d0aefd47be0 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 15:56:18 +0100
Subject: [PATCH 12/17] Remove sorting by tags and semantics

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 95 +++----------------
 1 file changed, 11 insertions(+), 84 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index b1b373a852..76908413db 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -78,19 +78,6 @@
         <f7-block-title class="searchbar-hide-on-search">
           {{ rules.length }} {{ type.toLowerCase() }}
         </f7-block-title>
-        <div class="searchbar-found padding-left padding-right">
-          <f7-segmented strong tag="p">
-            <f7-button :active="groupBy === 'alphabetical'" @click="switchGroupOrder('alphabetical')">
-              Alphabetical
-            </f7-button>
-            <f7-button v-if="type === 'Rules'" :active="groupBy === 'semantic'" @click="switchGroupOrder('semantic')">
-              By Semantic
-            </f7-button>
-            <f7-button :active="groupBy === 'tags'" @click="switchGroupOrder('tags')">
-              By Tags
-            </f7-button>
-          </f7-segmented>
-        </div>
 
         <div v-if="uniqueTags.length" class="block block-strong-ios block-outline-ios" ref="filterTags">
           <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
@@ -101,10 +88,10 @@
           </f7-chip>
         </div>
         <f7-list
-          v-show="rules.length"
+          v-show="rules.length > 0"
           class="searchbar-found col rules-list"
           ref="rulesList"
-          media-list :contacts-list="groupBy === 'alphabetical'">
+          media-list contacts-list>
           <f7-list-group v-for="(rulesWithInitial, initial) in indexedRules" :key="initial">
             <f7-list-item v-if="rulesWithInitial.length" :title="initial" group-title />
             <f7-list-item
@@ -173,7 +160,6 @@ export default {
       initSearchbar: false,
       selectedItems: [],
       showCheckboxes: false,
-      groupBy: 'alphabetical',
       eventSource: null
     }
   },
@@ -186,63 +172,16 @@ export default {
     },
     indexedRules () {
       const filteredRules = this.filterRules()
-      if (this.groupBy === 'alphabetical') {
-        const initialGroup = filteredRules.reduce((prev, rule, i, rules) => {
-          const initial = rule.name.substring(0, 1).toUpperCase()
-          if (!prev[initial]) {
-            prev[initial] = []
-          }
-          prev[initial].push(rule)
-
-          return prev
-        }, {})
-        return initialGroup
-      } else if (this.groupBy === 'semantic') {
-        const semanticGroup = filteredRules.reduce((prev, rule, i, rules) => {
-          let initial = rule.tags.filter((t) => t !== 'Script' && t !== 'Scene' &&
-            this.isSemanticTag(t))
-          if (initial.length === 0) initial = '- No Semantic Tags -'
-
-          if (!prev[initial]) {
-            prev[initial] = []
-          }
-          prev[initial].push(rule)
-
-          return prev
-        }, {})
-        return Object.keys(semanticGroup).sort((a, b) => a.localeCompare(b)).reduce((objEntries, key) => {
-          objEntries[key] = semanticGroup[key]
-          return objEntries
-        }, {})
-      } else if (this.groupBy === 'tags') {
-        const tagsMap = new Map()
-        filteredRules.forEach((rule, i, rules) => {
-          if (rule.tags.length > 0) {
-            rule.tags.filter((t) => t !== 'Scratchpad')
-              .forEach(t => {
-                let tag = t.substring(0, 1).toUpperCase() + t.slice(1)
-                if (tag.includes('Marketplace:')) tag = '- Marketplace -'
-                let tags = []
-                if (tagsMap.has(tag)) tags = tagsMap.get(tag)
-                if (!tags.includes(rule)) tags.push(rule)
-                tagsMap.set(tag, tags)
-              })
-          } else {
-            let tags = []
-            if (tagsMap.has('- No Tags -')) tags = tagsMap.get('- No Tags -')
-            tags.push(rule)
-            tagsMap.set('- No Tags -', tags)
-          }
-        })
+      const initialGroup = filteredRules.reduce((prev, rule, i, rules) => {
+        const initial = rule.name.substring(0, 1).toUpperCase()
+        if (!prev[initial]) {
+          prev[initial] = []
+        }
+        prev[initial].push(rule)
 
-        let tagsRules = Object.fromEntries(tagsMap)
-        return Object.keys(tagsRules).sort((a, b) => a.localeCompare(b)).reduce((objEntries, key) => {
-          objEntries[key] = tagsRules[key]
-          return objEntries
-        }, {})
-      } else {
-        return this.rules
-      }
+        return prev
+      }, {})
+      return initialGroup
     },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
@@ -410,18 +349,6 @@ export default {
         this.$f7.dialog.alert('An error occurred while enabling/disabling: ' + err)
       })
     },
-    switchGroupOrder (groupBy) {
-      this.groupBy = groupBy
-      const searchbar = this.$refs.searchbar.$el.f7Searchbar
-      const filterQuery = searchbar.query
-      this.$nextTick(() => {
-        if (filterQuery) {
-          searchbar.clear()
-          searchbar.search(filterQuery)
-        }
-        this.$refs.listIndex.update()
-      })
-    },
     toggleSearchTag (e, item) {
       const target = e.target
 

From c55abd87c60ca697eaecaabec432585d7d19a75e Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 16:21:46 +0100
Subject: [PATCH 13/17] Don't capitalize tags

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/rules/rules-list.vue              | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 76908413db..8cf772270b 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -218,9 +218,8 @@ export default {
 
         this.rules.forEach(rule => {
           rule.tags.forEach(t => {
-            let tag = t.substring(0, 1).toUpperCase() + t.slice(1)
-            if (tag.includes('Marketplace:')) tag = 'Marketplace'
-            if (!this.uniqueTags.includes(tag)) this.uniqueTags.push(tag)
+            if (t.startsWith('marketplace:')) t = 'Marketplace'
+            if (!this.uniqueTags.includes(t)) this.uniqueTags.push(t)
           })
         })
 

From dc0ddb55f2cb597eb76587a17b257846c33aca59 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 16:22:20 +0100
Subject: [PATCH 14/17] Refactorings

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 8cf772270b..c8542ea6c5 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -79,7 +79,7 @@
           {{ rules.length }} {{ type.toLowerCase() }}
         </f7-block-title>
 
-        <div v-if="uniqueTags.length" class="block block-strong-ios block-outline-ios" ref="filterTags">
+        <div v-if="uniqueTags.length > 0" class="block block-strong-ios block-outline-ios" ref="filterTags">
           <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
                    :color="isTagSelected(tag) ? 'blue' : ''"
                    style="margin-right: 6px; cursor: pointer;"
@@ -156,7 +156,7 @@ export default {
       noRuleEngine: false,
       rules: [],
       uniqueTags: [],
-      checkedTags: [],
+      selectedTags: [],
       initSearchbar: false,
       selectedItems: [],
       showCheckboxes: false,
@@ -170,9 +170,17 @@ export default {
     documentationLink () {
       return `https://${this.$store.state.runtimeInfo.buildString === 'Release Build' ? 'www' : 'next'}.openhab.org/link/${this.type.toLowerCase()}`
     },
+    filteredRules () {
+      if (this.selectedTags.length === 0) return this.rules
+      return this.rules.filter((r) => {
+        for (const t of this.selectedTags) {
+          if (r.tags.includes(t)) return true
+        }
+        return false
+      })
+    },
     indexedRules () {
-      const filteredRules = this.filterRules()
-      const initialGroup = filteredRules.reduce((prev, rule, i, rules) => {
+      return this.filteredRules.reduce((prev, rule, i, rules) => {
         const initial = rule.name.substring(0, 1).toUpperCase()
         if (!prev[initial]) {
           prev[initial] = []
@@ -181,7 +189,6 @@ export default {
 
         return prev
       }, {})
-      return initialGroup
     },
     searchPlaceholder () {
       return window.innerWidth >= 1280 ? 'Search (for advanced search, use the developer sidebar (Shift+Alt+D))' : 'Search'
@@ -349,34 +356,17 @@ export default {
       })
     },
     toggleSearchTag (e, item) {
-      const target = e.target
-
-      const idx = this.checkedTags.indexOf(item)
+      const idx = this.selectedTags.indexOf(item)
       if (idx !== -1) {
-        this.checkedTags.splice(idx, 1)
+        this.selectedTags.splice(idx, 1)
       } else {
-        this.checkedTags.push(item)
+        this.selectedTags.push(item)
       }
       // update rules list
       this.$refs.listIndex.update()
     },
     isTagSelected (tag) {
-      return this.checkedTags.includes(tag)
-    },
-    filterRules () {
-      return this.rules.filter((r) => {
-        if (this.checkedTags.length === 0) return true
-        let found = false
-        for (let i = 0; i < this.checkedTags.length; i++) {
-          for (let j = 0; j < r.tags.length; j++) {
-            if (r.tags[j].toLowerCase().indexOf(this.checkedTags[i].toLowerCase()) !== -1) {
-              found = true
-              break
-            }
-          }
-        }
-        return found
-      })
+      return this.selectedTags.includes(tag)
     }
   }
 }

From 7f65afd82b9035bcb6b3b5dd9a56b4ddd2339e71 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 16:30:04 +0100
Subject: [PATCH 15/17] Add option to reset filter

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../web/src/pages/settings/rules/rules-list.vue              | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index c8542ea6c5..2e15703066 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -76,7 +76,10 @@
 
       <f7-col v-else-if="rules.length > 0">
         <f7-block-title class="searchbar-hide-on-search">
-          {{ rules.length }} {{ type.toLowerCase() }}
+          {{ filteredRules.length }} {{ type.toLowerCase() }} {{ selectedTags.length > 0 ? ' - ' : '' }}
+          <f7-link v-if="selectedTags.length > 0" @click="selectedTags = []">
+            Reset filter
+          </f7-link>
         </f7-block-title>
 
         <div v-if="uniqueTags.length > 0" class="block block-strong-ios block-outline-ios" ref="filterTags">

From 429a5128270cec2433b350ad288d655c009e19dd Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 17:25:23 +0100
Subject: [PATCH 16/17] Place tag filter inside a accordion

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../src/pages/settings/rules/rules-list.vue   | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index 2e15703066..c0a5eec578 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -78,18 +78,24 @@
         <f7-block-title class="searchbar-hide-on-search">
           {{ filteredRules.length }} {{ type.toLowerCase() }} {{ selectedTags.length > 0 ? ' - ' : '' }}
           <f7-link v-if="selectedTags.length > 0" @click="selectedTags = []">
-            Reset filter
+            Reset filter(s)
           </f7-link>
         </f7-block-title>
 
-        <div v-if="uniqueTags.length > 0" class="block block-strong-ios block-outline-ios" ref="filterTags">
-          <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
-                   :color="isTagSelected(tag) ? 'blue' : ''"
-                   style="margin-right: 6px; cursor: pointer;"
-                   @click="(e) => toggleSearchTag(e, tag)">
-            <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check_circle" aurora="f7:checkmark_circle_fill" />
-          </f7-chip>
-        </div>
+        <f7-list v-if="uniqueTags.length > 0">
+          <f7-list-item accordion-item title="Filter by tags">
+            <f7-accordion-content>
+              <div class="block block-strong-ios block-outline-ios padding-bottom" ref="filterTags">
+                <f7-chip v-for="tag in uniqueTags" :key="tag" :text="tag" media-bg-color="blue"
+                         :color="isTagSelected(tag) ? 'blue' : ''"
+                         style="margin-right: 6px; cursor: pointer;"
+                         @click="(e) => toggleSearchTag(e, tag)">
+                  <f7-icon v-if="isTagSelected(tag)" slot="media" ios="f7:checkmark_circle_fill" md="material:check_circle" aurora="f7:checkmark_circle_fill" />
+                </f7-chip>
+              </div>
+            </f7-accordion-content>
+          </f7-list-item>
+        </f7-list>
         <f7-list
           v-show="rules.length > 0"
           class="searchbar-found col rules-list"

From 62865b690d6b16ce15e6e74708e84a9f94d9cd35 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Sun, 19 Nov 2023 17:41:19 +0100
Subject: [PATCH 17/17] Clean-Ups

Signed-off-by: Florian Hotze <florianh_dev@icloud.com>
---
 .../org.openhab.ui/web/src/pages/settings/rules/rules-list.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
index c0a5eec578..193d062ae6 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/rules/rules-list.vue
@@ -150,10 +150,9 @@
 
 <script>
 import RuleStatus from '@/components/rule/rule-status-mixin'
-import TagMixin from '@/components/tags/tag-mixin'
 
 export default {
-  mixins: [RuleStatus, TagMixin],
+  mixins: [RuleStatus],
   props: ['showScripts', 'showScenes'],
   components: {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue')