optimize ui

src/components/mobile/ListItemSelectionSheet.vue

@@ -1,5 +1,5 @@
 <template>
-    <f7-sheet :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+    <f7-sheet :class="{ 'list-item-selection-huge-sheet': hugeListItemRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
         <f7-toolbar>
             <div class="left"></div>
             <div class="right">
@@ -14,6 +14,7 @@
                               :value="valueType === 'index' ? index : (valueField ? item[valueField] : item)"
                               :title="titleField ? item[titleField] : item"
                               @click="onItemClicked(item, index)">
+                    <f7-icon slot="media" :icon="item[iconField] | icon(iconType)" :style="{ color: '#' + (colorField ? item[colorField] : '000000') }" v-if="iconField"></f7-icon>
                     <f7-icon slot="after" class="list-item-checked" f7="checkmark_alt" v-if="isSelected(item, index)"></f7-icon>
                 </f7-list-item>
             </f7-list>
@@ -26,9 +27,12 @@ export default {
     props: [
         'value',
         'valueType', // item or index
-        'keyField', // for value type = item
+        'keyField', // for value type == item
-        'valueField',
+        'valueField', // for value type == item
         'titleField',
+        'iconField',
+        'iconType',
+        'colorField',
         'items',
         'show'
     ],
@@ -39,12 +43,21 @@ export default {
             currentValue: self.value
         }
     },
+    computed: {
+        hugeListItemRows() {
+            return this.items.length > 10;
+        }
+    },
     methods: {
         onItemClicked(item, index) {
             if (this.valueType === 'index') {
                 this.currentValue = index;
             } else {
-                this.currentValue = item;
+                if (this.valueField) {
+                    this.currentValue = item[this.valueField];
+                } else {
+                    this.currentValue = item;
+                }
             }
 
             this.$emit('input', this.currentValue);
@@ -60,9 +73,21 @@ export default {
             if (this.valueType === 'index') {
                 return this.currentValue === index;
             } else {
-                return this.currentValue === item;
+                if (this.valueField) {
+                    return this.currentValue === item[this.valueField];
+                } else {
+                    return this.currentValue === item;
+                }
             }
         }
     }
 }
 </script>
+
+<style>
+@media (min-height: 630px) {
+    .list-item-selection-huge-sheet {
+        height: 400px;
+    }
+}
+</style>

src/filters/icon.js

@@ -0,0 +1,12 @@
+import accountIcon from "./accountIcon.js";
+import categoryIcon from "./categoryIcon.js";
+
+export default function (iconId, iconType) {
+    if (iconType === 'account') {
+        return accountIcon(iconId);
+    } else if (iconType === 'category') {
+        return categoryIcon(iconId);
+    } else {
+        return '';
+    }
+}

src/mobile-main.js

@@ -32,6 +32,7 @@ import exchangeRates from './lib/exchangeRates.js';
 import webauthn from './lib/webauthn.js';
 import utils from './lib/utils.js';
 import currencyFilter from './filters/currency.js';
+import iconFilter from './filters/icon.js';
 import accountIconFilter from './filters/accountIcon.js';
 import categoryIconFilter from './filters/categoryIcon.js';
 import tokenDeviceFilter from './filters/tokenDevice.js';
@@ -201,6 +202,7 @@ Vue.prototype.$exchangeRates = exchangeRates;
 Vue.prototype.$user = userstate;
 
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));
+Vue.filter('icon', (value, iconType) => iconFilter(value, iconType));
 Vue.filter('accountIcon', (value) => accountIconFilter(value));
 Vue.filter('categoryIcon', (value) => categoryIconFilter(value));
 Vue.filter('tokenDevice', (value) => tokenDeviceFilter(value));

src/views/mobile/transactions/Edit.vue

@@ -21,10 +21,11 @@
                 <f7-list>
                     <f7-list-item
                         class="transaction-edit-amount padding-top-half padding-bottom-half"
+                        style="font-size: 40px;"
                         header="Expense Amount" title="0.00">
                     </f7-list-item>
-                    <f7-list-item header="Category" placeholder="Category"></f7-list-item>
+                    <f7-list-item class="transaction-edit-category" header="Category" link="#"></f7-list-item>
-                    <f7-list-input label="Account" placeholder="Account Name"></f7-list-input>
+                    <f7-list-item class="transaction-edit-account" header="Account" title="Account Name" link="#"></f7-list-item>
                     <f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
                     <f7-list-item header="Tags" link="#"></f7-list-item>
                     <f7-list-input type="textarea" label="Description" placeholder="Your transaction description (optional)"></f7-list-input>
@@ -66,34 +67,46 @@
                     </f7-list-item>
 
                     <f7-list-item
+                        class="transaction-edit-category"
+                        link="#"
                         :header="$t('Category')"
                     >
                     </f7-list-item>
 
-                    <f7-list-input
+                    <f7-list-item
-                        type="select"
+                        class="transaction-edit-account"
+                        link="#"
                         :class="{ 'disabled': !plainAllAccounts.length }"
-                        :label="$t(sourceAccountName)"
+                        :header="$t(sourceAccountName)"
-                        :value="transaction.sourceAccountId"
+                        :title="transaction.sourceAccountId | accountName(plainAllAccounts)"
-                        @input="transaction.sourceAccountId = $event.target.value"
+                        @click="transaction.showSourceAccountSheet = true"
                     >
-                        <option v-for="account in plainAllAccounts"
+                        <ListItemSelectionSheet value-type="item"
-                                :key="account.id"
+                                                key-field="id" value-field="id" title-field="name"
-                                :value="account.id">{{ account.name }}</option>
+                                                icon-field="icon" icon-type="account" color-field="color"
-                    </f7-list-input>
+                                                :items="plainAllAccounts"
+                                                :show.sync="transaction.showSourceAccountSheet"
+                                                v-model="transaction.sourceAccountId">
+                        </ListItemSelectionSheet>
+                    </f7-list-item>
 
-                    <f7-list-input
+                    <f7-list-item
-                        type="select"
+                        class="transaction-edit-account"
+                        link="#"
                         :class="{ 'disabled': !plainAllAccounts.length }"
-                        :label="$t('Destination Account')"
+                        :header="$t('Destination Account')"
-                        :value="transaction.destinationAccountId"
+                        :title="transaction.destinationAccountId | accountName(plainAllAccounts)"
                         v-if="transaction.type === $constants.transaction.allTransactionTypes.Transfer"
-                        @input="transaction.destinationAccountId = $event.target.value"
+                        @click="transaction.showDestinationAccountSheet = true"
                     >
-                        <option v-for="account in plainAllAccounts"
+                        <ListItemSelectionSheet value-type="item"
-                                :key="account.id"
+                                                key-field="id" value-field="id" title-field="name"
-                                :value="account.id">{{ account.name }}</option>
+                                                icon-field="icon" icon-type="account" color-field="color"
-                    </f7-list-input>
+                                                :items="plainAllAccounts"
+                                                :show.sync="transaction.showDestinationAccountSheet"
+                                                v-model="transaction.destinationAccountId">
+                        </ListItemSelectionSheet>
+                    </f7-list-item>
 
                     <f7-list-input
                         :label="$t('Transaction Time')"
@@ -153,7 +166,9 @@ export default {
                 tagIds: [],
                 comment: '',
                 showSourceAmountSheet: false,
-                showDestinationAmountSheet: false
+                showDestinationAmountSheet: false,
+                showSourceAccountSheet: false,
+                showDestinationAccountSheet: false
             },
             allAccounts: [],
             allCategories: {},
@@ -381,6 +396,15 @@ export default {
         }
     },
     filters: {
+        accountName(accountId, allAccounts) {
+            for (let i = 0; i < allAccounts.length; i++) {
+                if (allAccounts[i].id === accountId) {
+                    return allAccounts[i].name;
+                }
+            }
+
+            return '';
+        },
         tagName(tagId, allTags) {
             for (let i = 0; i < allTags.length; i++) {
                 if (allTags[i].id === tagId) {
@@ -404,6 +428,10 @@ export default {
     font-weight: bolder;
 }
 
+.transaction-edit-account .item-header {
+    margin-bottom: 11px;
+}
+
 .transaction-edit-time input[type="datetime-local"] {
     max-width: inherit;
 }