code refactor

src/components/mobile/ListItemSelectionSheet.vue

@@ -10,9 +10,9 @@
             <f7-list no-hairlines class="no-margin-top no-margin-bottom">
                 <f7-list-item link="#" no-chevron
                               v-for="(item, index) in items"
-                              :key="valueType === 'index' ? index : (keyField ? item[keyField] : item)"
-                              :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
-                              :title="titleField ? (titleI18n ? $t(item[titleField]) : item[titleField]) : (titleI18n ? $t(item) : item)"
+                              :key="item | itemKeyValue(index, keyField, valueType)"
+                              :value="item | itemKeyValue(index, valueField, valueType)"
+                              :title="item | itemFieldContentOrItem(titleField, titleI18n)"
                               @click="onItemClicked(item, index)">
                     <f7-icon slot="media"
                              :icon="item[iconField] | icon(iconType)"
@@ -84,6 +84,17 @@ export default {
                 }
             }
         }
+    },
+    filters: {
+        itemKeyValue(item, index, fieldName, valueType) {
+            if (valueType === 'index') {
+                return index;
+            } else if (fieldName) {
+                return item[fieldName];
+            } else {
+                return item;
+            }
+        }
     }
 }
 </script>

src/components/mobile/TreeViewSelectionSheet.vue

@@ -11,8 +11,8 @@
                 <f7-treeview-item v-for="item in items"
                                   item-toggle
                                   :opened="isPrimaryItemHasSecondaryValue(item)"
-                                  :key="primaryKeyField ? item[primaryKeyField] : item"
-                                  :label="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)">
+                                  :key="item | itemFieldContentOrItem(primaryKeyField, false)"
+                                  :label="item | itemFieldContentOrItem(primaryTitleField, primaryTitleI18n)">
                     <f7-icon slot="media"
                              :icon="item[primaryIconField] | icon(primaryIconType)"
                              :style="item[primaryColorField] | iconStyle(primaryIconType, 'var(--default-icon-color)')"
@@ -21,8 +21,8 @@
                     <f7-treeview-item v-for="subItem in item[primarySubItemsField]"
                                       selectable
                                       :selected="isSecondarySelected(subItem)"
-                                      :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
-                                      :label="secondaryTitleField ? (secondaryTitleI18n ? $t(subItem[secondaryTitleField]) : subItem[secondaryTitleField]) : (secondaryTitleI18n ? $t(subItem) : subItem)"
+                                      :key="subItem | itemFieldContentOrItem(secondaryKeyField, false)"
+                                      :label="subItem | itemFieldContentOrItem(secondaryTitleField, secondaryTitleI18n)"
                                       @click="onSecondaryItemClicked(subItem)">
                         <f7-icon slot="media"
                                  :icon="subItem[secondaryIconField] | icon(secondaryIconType)"

src/components/mobile/TwoColumnListItemSelectionSheet.vue

@@ -13,9 +13,9 @@
                         <f7-list no-hairlines class="primary-list no-margin-top no-margin-bottom">
                             <f7-list-item link="#" no-chevron
                                           v-for="item in items"
-                                          :key="primaryKeyField ? item[primaryKeyField] : item"
-                                          :value="primaryValueField ? item[primaryValueField] : item"
-                                          :title="primaryTitleField ? (primaryTitleI18n ? $t(item[primaryTitleField]) : item[primaryTitleField]) : (primaryTitleI18n ? $t(item) : item)"
+                                          :key="item | itemFieldContentOrItem(primaryKeyField, false)"
+                                          :value="item | itemFieldContentOrItem(primaryValueField, false)"
+                                          :title="item | itemFieldContentOrItem(primaryTitleField, primaryTitleI18n)"
                                           @click="onPrimaryItemClicked(item)">
                                 <f7-icon slot="media"
                                          :icon="item[primaryIconField] | icon(primaryIconType)"
@@ -31,9 +31,9 @@
                         <f7-list no-hairlines class="secondary-list no-margin-top no-margin-bottom" v-if="selectedPrimaryItem && primarySubItemsField && selectedPrimaryItem[primarySubItemsField]">
                             <f7-list-item link="#" no-chevron
                                           v-for="subItem in selectedPrimaryItem[primarySubItemsField]"
-                                          :key="secondaryKeyField ? subItem[secondaryKeyField] : subItem"
-                                          :value="secondaryValueField ? subItem[secondaryValueField] : subItem"
-                                          :title="secondaryTitleField ? (secondaryTitleI18n ? $t(subItem[secondaryTitleField]) : subItem[secondaryTitleField]) : (secondaryTitleI18n ? $t(subItem) : subItem)"
+                                          :key="subItem | itemFieldContentOrItem(secondaryKeyField, false)"
+                                          :value="subItem | itemFieldContentOrItem(secondaryValueField, false)"
+                                          :title="subItem | itemFieldContentOrItem(secondaryTitleField, secondaryTitleI18n)"
                                           @click="onSecondaryItemClicked(subItem)">
                                 <f7-icon slot="media"
                                          :icon="subItem[secondaryIconField] | icon(secondaryIconType)"

src/filters/itemFieldContentOrItem.js

@@ -0,0 +1,15 @@
+export default function ({i18n}, value, fieldName, translate) {
+    let content = '';
+
+    if (fieldName) {
+        content = value[fieldName];
+    } else {
+        content = value;
+    }
+
+    if (translate) {
+        content = i18n.t(content);
+    }
+
+    return content;
+}

src/mobile-main.js

@@ -31,6 +31,7 @@ import userstate from './lib/userstate.js';
 import exchangeRates from './lib/exchangeRates.js';
 import webauthn from './lib/webauthn.js';
 import utils from './lib/utils.js';
+import itemFieldContentOrItemFilter from './filters/itemFieldContentOrItem.js';
 import currencyFilter from './filters/currency.js';
 import iconFilter from './filters/icon.js';
 import iconStyleFilter from './filters/iconStyle.js';
@@ -208,6 +209,7 @@ Vue.prototype.$services = services;
 Vue.prototype.$exchangeRates = exchangeRates;
 Vue.prototype.$user = userstate;
 
+Vue.filter('itemFieldContentOrItem', (value, fieldName, translate) => itemFieldContentOrItemFilter({ i18n }, value, fieldName, translate));
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
 Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
 Vue.filter('iconStyle', (value, iconType, defaultColor) => iconStyleFilter(value, iconType, defaultColor));