From 7662e0eb02f099e8863d2cc461e4f3f0b188c629 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Mon, 22 Jul 2024 23:00:44 +0800
Subject: [PATCH] list sheet, tree view sheet and two column select components
 support hidden field

---
 src/components/desktop/TwoColumnSelect.vue    | 10 ++++--
 .../mobile/ListItemSelectionSheet.vue         |  2 ++
 .../mobile/TreeViewSelectionSheet.vue         | 10 +++++-
 .../TwoColumnListItemSelectionSheet.vue       |  6 +++-
 src/lib/common.js                             | 36 ++++++++++++++-----
 5 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/components/desktop/TwoColumnSelect.vue b/src/components/desktop/TwoColumnSelect.vue
index 3b5e2fac..ed3ae12c 100644
--- a/src/components/desktop/TwoColumnSelect.vue
+++ b/src/components/desktop/TwoColumnSelect.vue
@@ -30,6 +30,7 @@
                         <v-list-item :class="{ 'primary-list-item-selected v-list-item--active text-primary': item === selectedPrimaryItem }"
                                      :key="primaryKeyField ? item[primaryKeyField] : item"
                                      v-for="item in items"
+                                     v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
                                      @click="onPrimaryItemClicked(item)">
                             <template #prepend>
                                 <ItemIcon class="mr-2" :icon-type="primaryIconType"
@@ -49,6 +50,7 @@
                         <v-list-item :class="{ 'secondary-list-item-selected v-list-item--active text-primary': isSecondarySelected(subItem) }"
                                      :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
                                      v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
+                                     v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
                                      @click="onSecondaryItemClicked(subItem)">
                             <template #prepend>
                                 <ItemIcon class="mr-2" :icon-type="secondaryIconType"
@@ -69,7 +71,7 @@
 
 <script>
 import {
-    getFirstItem,
+    getFirstVisibleItem,
     getItemByKeyValue,
     getNameByKeyValue,
     getPrimaryValueBySecondaryValue
@@ -100,6 +102,7 @@ export default {
         'primaryIconField',
         'primaryIconType',
         'primaryColorField',
+        'primaryHiddenField',
         'primarySubItemsField',
         'secondaryKeyField',
         'secondaryValueField',
@@ -112,6 +115,7 @@ export default {
         'secondaryIconField',
         'secondaryIconType',
         'secondaryColorField',
+        'secondaryHiddenField',
         'noItemText',
         'items'
     ],
@@ -133,7 +137,7 @@ export default {
             },
             set: function (value) {
                 const primaryItem = getItemByKeyValue(this.items, value, this.primaryValueField);
-                const secondaryItem = getFirstItem(primaryItem[this.primarySubItemsField]);
+                const secondaryItem = getFirstVisibleItem(primaryItem[this.primarySubItemsField], this.primaryHiddenField);
 
                 if (secondaryItem) {
                     if (this.secondaryValueField) {
@@ -214,7 +218,7 @@ export default {
             }
         },
         getPrimaryValueBySecondaryValue(secondaryValue) {
-            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
+            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
         },
         onMenuStateChanged(state) {
             const self = this;
diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 361543e4..a989f315 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/src/components/mobile/ListItemSelectionSheet.vue
@@ -17,6 +17,7 @@
                               :class="{ 'list-item-selected': isSelected(item, index) }"
                               :key="getItemValue(item, index, keyField, valueType)"
                               v-for="(item, index) in items"
+                              v-show="item && (!hiddenField || !item[hiddenField])"
                               @click="onItemClicked(item, index)">
                     <template #content-start>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
@@ -44,6 +45,7 @@ export default {
         'iconField',
         'iconType',
         'colorField',
+        'hiddenField',
         'items',
         'show'
     ],
diff --git a/src/components/mobile/TreeViewSelectionSheet.vue b/src/components/mobile/TreeViewSelectionSheet.vue
index 6b3cdead..e3cb5627 100644
--- a/src/components/mobile/TreeViewSelectionSheet.vue
+++ b/src/components/mobile/TreeViewSelectionSheet.vue
@@ -15,7 +15,8 @@
                                   :opened="isPrimaryItemHasSecondaryValue(item)"
                                   :label="$tIf((primaryTitleField ? item[primaryTitleField] : item), primaryTitleI18n)"
                                   :key="primaryKeyField ? item[primaryKeyField] : item"
-                                  v-for="item in items">
+                                  v-for="item in items"
+                                  v-show="item && (!primaryHiddenField || !item[primaryHiddenField])">
                     <template #media>
                         <ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]"
                                   :color="item[primaryColorField]" v-if="primaryIconField"></ItemIcon>
@@ -26,6 +27,7 @@
                                       :label="$tIf((secondaryTitleField ? subItem[secondaryTitleField] : subItem), secondaryTitleI18n)"
                                       :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
                                       v-for="subItem in item[primarySubItemsField]"
+                                      v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
                                       @click="onSecondaryItemClicked(subItem)">
                         <template #media>
                             <ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]"
@@ -52,6 +54,7 @@ export default {
         'primaryIconField',
         'primaryIconType',
         'primaryColorField',
+        'primaryHiddenField',
         'primarySubItemsField',
         'secondaryKeyField',
         'secondaryValueField',
@@ -60,6 +63,7 @@ export default {
         'secondaryIconField',
         'secondaryIconType',
         'secondaryColorField',
+        'secondaryHiddenField',
         'items',
         'show'
     ],
@@ -121,6 +125,10 @@ export default {
             for (let i = 0; i < primaryItem[this.primarySubItemsField].length; i++) {
                 const secondaryItem = primaryItem[this.primarySubItemsField][i];
 
+                if (this.secondaryHiddenField && secondaryItem[this.secondaryHiddenField]) {
+                    continue;
+                }
+
                 if (this.secondaryValueField && secondaryItem[this.secondaryValueField] === this.currentValue) {
                     return true;
                 } else if (!this.secondaryValueField && secondaryItem === this.currentValue) {
diff --git a/src/components/mobile/TwoColumnListItemSelectionSheet.vue b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
index 9b6d7373..47546e33 100644
--- a/src/components/mobile/TwoColumnListItemSelectionSheet.vue
+++ b/src/components/mobile/TwoColumnListItemSelectionSheet.vue
@@ -21,6 +21,7 @@
                                           :footer="$tIf(item[primaryFooterField], primaryFooterI18n)"
                                           :key="primaryKeyField ? item[primaryKeyField] : item"
                                           v-for="item in items"
+                                          v-show="item && (!primaryHiddenField || !item[primaryHiddenField])"
                                           @click="onPrimaryItemClicked(item)">
                                 <template #media>
                                     <ItemIcon :icon-type="primaryIconType" :icon-id="item[primaryIconField]" :color="item[primaryColorField]"></ItemIcon>
@@ -43,6 +44,7 @@
                                           :footer="$tIf(subItem[secondaryFooterField], secondaryFooterI18n)"
                                           :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
                                           v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
+                                          v-show="subItem && (!secondaryHiddenField || !subItem[secondaryHiddenField])"
                                           @click="onSecondaryItemClicked(subItem)">
                                 <template #media>
                                     <ItemIcon :icon-type="secondaryIconType" :icon-id="subItem[secondaryIconField]" :color="subItem[secondaryColorField]"></ItemIcon>
@@ -80,6 +82,7 @@ export default {
         'primaryIconField',
         'primaryIconType',
         'primaryColorField',
+        'primaryHiddenField',
         'primarySubItemsField',
         'secondaryKeyField',
         'secondaryValueField',
@@ -92,6 +95,7 @@ export default {
         'secondaryIconField',
         'secondaryIconType',
         'secondaryColorField',
+        'secondaryHiddenField',
         'items',
         'show'
     ],
@@ -151,7 +155,7 @@ export default {
             }
         },
         getPrimaryValueBySecondaryValue(secondaryValue) {
-            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.secondaryValueField, secondaryValue);
+            return getPrimaryValueBySecondaryValue(this.items, this.primarySubItemsField, this.primaryValueField, this.primaryHiddenField, this.secondaryValueField, this.secondaryHiddenField, secondaryValue);
         },
         close() {
             this.$emit('update:show', false);
diff --git a/src/lib/common.js b/src/lib/common.js
index c526677b..addb8c44 100644
--- a/src/lib/common.js
+++ b/src/lib/common.js
@@ -214,10 +214,14 @@ export function stringToArrayBuffer(str){
     return Uint8Array.from(str, c => c.charCodeAt(0)).buffer;
 }
 
-export function getFirstItem(items) {
-    if (isArray(items)) {
-        if (items.length > 0) {
-            return items[0];
+export function getFirstVisibleItem(items, hiddenField) {
+    if (isArray(items) && items.length > 0) {
+        for (let i = 0; i < items.length; i++) {
+            if (hiddenField && items[i][hiddenField]) {
+                continue;
+            }
+
+            return items[i];
         }
     } else {
         for (let field in items) {
@@ -225,6 +229,10 @@ export function getFirstItem(items) {
                 continue;
             }
 
+            if (hiddenField && items[field][hiddenField]) {
+                continue;
+            }
+
             return items[field];
         }
     }
@@ -467,10 +475,14 @@ export function selectInvert(filterItemIds, allItemsMap) {
     }
 }
 
-export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue) {
+export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue) {
     for (let i = 0; i < primaryItem[primarySubItemsField].length; i++) {
         const secondaryItem = primaryItem[primarySubItemsField][i];
 
+        if (secondaryHiddenField && secondaryItem[secondaryHiddenField]) {
+            continue;
+        }
+
         if (secondaryValueField && secondaryItem[secondaryValueField] === secondaryValue) {
             return true;
         } else if (!secondaryValueField && secondaryItem === secondaryValue) {
@@ -481,13 +493,17 @@ export function isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField
     return false;
 }
 
-export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, secondaryValueField, secondaryValue) {
+export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, primaryValueField, primaryHiddenField, secondaryValueField, secondaryHiddenField, secondaryValue) {
     if (primarySubItemsField) {
         if (isArray(items)) {
             for (let i = 0; i < items.length; i++) {
                 const primaryItem = items[i];
 
-                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
+                if (primaryHiddenField && primaryItem[primaryHiddenField]) {
+                    continue;
+                }
+
+                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
                     if (primaryValueField) {
                         return primaryItem[primaryValueField];
                     } else {
@@ -503,7 +519,11 @@ export function getPrimaryValueBySecondaryValue(items, primarySubItemsField, pri
 
                 const primaryItem = items[field];
 
-                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryValue)) {
+                if (primaryHiddenField && primaryItem[primaryHiddenField]) {
+                    continue;
+                }
+
+                if (isPrimaryItemHasSecondaryValue(primaryItem, primarySubItemsField, secondaryValueField, secondaryHiddenField, secondaryValue)) {
                     if (primaryValueField) {
                         return primaryItem[primaryValueField];
                     } else {