optimize transaction tag ui in transaction edit page

src/components/mobile/TransactionTagSelectionSheet.vue

@@ -0,0 +1,117 @@
+<template>
+    <f7-sheet :class="{ 'tag-selection-huge-sheet': hugeListItemRows }" :opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
+        <f7-toolbar>
+            <div class="left">
+                <f7-link sheet-close :text="$t('Cancel')"></f7-link>
+            </div>
+            <div class="right">
+                <f7-link :text="$t('Done')" @click="save"></f7-link>
+            </div>
+        </f7-toolbar>
+        <f7-page-content>
+            <f7-list no-hairlines class="no-margin-top no-margin-bottom" v-if="!items || !items.length || noAvailableTag">
+                <f7-list-item :title="$t('No available tag')"></f7-list-item>
+            </f7-list>
+            <f7-list no-hairlines class="no-margin-top no-margin-bottom" v-else-if="items && items.length && !noAvailableTag">
+                <f7-list-item checkbox v-for="item in items"
+                              v-show="!item.hidden"
+                              :key="item.id"
+                              :value="item.id"
+                              :checked="item.id | isChecked(selectedItemIds)"
+                              @change="changeItemSelection">
+                    <f7-block slot="title" class="no-padding no-margin">
+                        <div class="display-flex">
+                            <f7-icon slot="media" f7="number"></f7-icon>
+                            <div class="list-item-valign-middle padding-left-half">
+                                {{ item.name }}
+                            </div>
+                        </div>
+                    </f7-block>
+                </f7-list-item>
+            </f7-list>
+        </f7-page-content>
+    </f7-sheet>
+</template>
+
+<script>
+export default {
+    props: [
+        'value',
+        'items',
+        'show'
+    ],
+    data() {
+        const self = this;
+
+        return {
+            selectedItemIds: self.$utilities.copyArrayTo(self.value, [])
+        }
+    },
+    computed: {
+        hugeListItemRows() {
+            return this.items.length > 10;
+        },
+        noAvailableTag() {
+            for (let i = 0; i < this.items.length; i++) {
+                if (!this.items[i].hidden) {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+    },
+    methods: {
+        save() {
+            this.$emit('input', this.selectedItemIds);
+            this.$emit('update:show', false);
+        },
+        onSheetOpen() {
+            this.selectedItemIds = this.$utilities.copyArrayTo(this.value, []);
+        },
+        onSheetClosed() {
+            this.$emit('update:show', false);
+        },
+        changeItemSelection(e) {
+            const tagId = e.target.value;
+
+            if (e.target.checked) {
+                for (let i = 0; i < this.selectedItemIds.length; i++) {
+                    if (this.selectedItemIds[i] === tagId) {
+                        return;
+                    }
+                }
+
+                this.selectedItemIds.push(tagId);
+            } else {
+                for (let i = 0; i < this.selectedItemIds.length; i++) {
+                    if (this.selectedItemIds[i] === tagId) {
+                        this.selectedItemIds.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+        }
+    },
+    filters: {
+        isChecked(itemId, selectedItemIds) {
+            for (let i = 0; i < selectedItemIds.length; i++) {
+                if (selectedItemIds[i] === itemId) {
+                    return true;
+                }
+            }
+
+            return false;
+        }
+    }
+}
+</script>
+
+<style>
+@media (min-height: 630px) {
+    .tag-selection-huge-sheet {
+        height: 400px;
+    }
+}
+</style>
+self

src/mobile-main.js

@@ -93,6 +93,7 @@ import IconSelectionSheet from "./components/mobile/IconSelectionSheet.vue";
 import ColorSelectionSheet from "./components/mobile/ColorSelectionSheet.vue";
 import InformationSheet from "./components/mobile/InformationSheet.vue";
 import NumberPadSheet from "./components/mobile/NumberPadSheet.vue";
+import TransactionTagSelectionSheet from "./components/mobile/TransactionTagSelectionSheet.vue";
 
 import App from './Mobile.vue';
 
@@ -145,6 +146,7 @@ Vue.component('IconSelectionSheet', IconSelectionSheet);
 Vue.component('ColorSelectionSheet', ColorSelectionSheet);
 Vue.component('InformationSheet', InformationSheet);
 Vue.component('NumberPadSheet', NumberPadSheet);
+Vue.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
 
 Vue.filter('localized', (value, options) => localizedFilter({ i18n }, value, options));
 Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(value, precision, lowPrecisionValue));

src/views/mobile/transactions/Edit.vue

@@ -201,13 +201,16 @@
                     >
                     </f7-list-input>
 
-                    <f7-list-item :header="$t('Tags')" link="#"
+                    <f7-list-item
-                                  smart-select :smart-select-params="{ openIn: 'sheet', setValueText: false, closeOnSelect: true, sheetCloseLinkText: $t('Close') }">
+                        link="#"
-                        <select multiple v-model="transaction.tagIds">
+                        :header="$t('Tags')"
-                            <option v-for="tag in allTags"
+                        @click="showTransactionTagSheet = true"
-                                    :key="tag.id"
+                    >
-                                    :value="tag.id">{{ tag.name }}</option>
+                        <transaction-tag-selection-sheet :items="allTags"
-                        </select>
+                                                         :show.sync="showTransactionTagSheet"
+                                                         v-model="transaction.tagIds">
+                        </transaction-tag-selection-sheet>
+
                         <f7-block class="margin-top-half no-padding" slot="footer" v-if="transaction.tagIds && transaction.tagIds.length">
                             <f7-chip class="transaction-edit-tag" media-bg-color="black"
                                      v-for="tagId in transaction.tagIds"
@@ -276,7 +279,8 @@ export default {
             showDestinationAmountSheet: false,
             showCategorySheet: false,
             showSourceAccountSheet: false,
-            showDestinationAccountSheet: false
+            showDestinationAccountSheet: false,
+            showTransactionTagSheet: false
         };
     },
     computed: {