mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-16 07:57:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

add add/edit transaction category dialog

Browse Source
This commit is contained in:
MaysWind
2023-08-07 00:55:13 +08:00
parent 1753a6c247
commit c33c0487cf
7 changed files with 601 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/ColorSelect.vue
+132
View File
@@ -0,0 +1,132 @@
<template>
<v-select
item-title="icon"
item-value="id"
persistent-placeholder
:disabled="disabled"
:label="label"
v-model="color"
@update:menu="onMenuStateChanged"
>
<template #selection="{ item }">
<v-label>
<v-icon :icon="icons.square" :color="`#${item.raw}`" />
</v-label>
</template>
<template #no-data>
<div class="color-select-dropdown" ref="dropdownMenu">
<div class="color-item" :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
:style="`grid-template-columns: repeat(${itemPerRow}, minmax(0, 1fr));`"
:key="idx" v-for="(row, idx) in allColorRows">
<div class="text-center" :key="colorInfo.color" v-for="colorInfo in row">
<div class="cursor-pointer" @click="color = colorInfo.color">
<v-icon class="ma-2" :icon="icons.square" :color="`#${colorInfo.color}`" v-if="!modelValue || modelValue !== colorInfo.color" />
<v-badge class="right-bottom-icon" color="primary"
location="bottom right" offset-x="8" offset-y="8" :icon="icons.checked"
v-if="modelValue && modelValue === colorInfo.color">
<v-icon class="ma-2" :icon="icons.square" :color="`#${colorInfo.color}`" />
</v-badge>
</div>
</div>
</div>
</div>
</template>
</v-select>
</template>
<script>
import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
import {
mdiSquareRounded,
mdiCheck
} from '@mdi/js';
export default {
props: [
'modelValue',
'disabled',
'label',
'columnCount',
'allColorInfos'
],
emits: [
'update:modelValue',
],
data() {
const self = this;
return {
itemPerRow: self.columnCount || 7,
icons: {
square: mdiSquareRounded,
checked: mdiCheck
}
}
},
computed: {
allColorRows() {
const ret = [];
let rowCount = -1;
for (let i = 0; i < this.allColorInfos.length; i++) {
if (i % this.itemPerRow === 0) {
ret[++rowCount] = [];
}
ret[rowCount].push({
color: this.allColorInfos[i]
});
}
return ret;
},
color: {
get: function () {
return this.modelValue;
},
set: function (value) {
this.$emit('update:modelValue', value);
}
}
},
methods: {
hasSelectedIcon(row) {
if (!this.modelValue || !row || !row.length) {
return false;
}
for (let i = 0; i < row.length; i++) {
if (row[i].id === this.modelValue) {
return true;
}
}
return false;
},
onMenuStateChanged(state) {
const self = this;
if (state) {
self.$nextTick(() => {
if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, null, '.row-has-selected-item');
}
});
}
}
}
}
</script>
<style>
.color-select-dropdown {
padding-left: 8px;
padding-right: 8px;
}
.color-select-dropdown .color-item {
display: grid;
}
</style>
src/components/desktop/IconSelect.vue
+141
View File
@@ -0,0 +1,141 @@
<template>
<v-select
item-title="icon"
item-value="id"
persistent-placeholder
:disabled="disabled"
:label="label"
v-model="icon"
@update:menu="onMenuStateChanged"
>
<template #selection="{ item }">
<v-label>
<ItemIcon icon-type="category" size="23px" :icon-id="icon" :color="color" />
</v-label>
</template>
<template #no-data>
<div class="icon-select-dropdown" ref="dropdownMenu">
<div class="icon-item" :class="{ 'row-has-selected-item': hasSelectedIcon(row) }"
:style="`grid-template-columns: repeat(${itemPerRow}, minmax(0, 1fr));`"
:key="idx" v-for="(row, idx) in allIconRows">
<div class="text-center" :key="iconInfo.id" v-for="iconInfo in row">
<div class="cursor-pointer" @click="icon = iconInfo.id">
<ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" v-if="!modelValue || modelValue !== iconInfo.id" />
<v-badge class="right-bottom-icon" color="primary"
location="bottom right" offset-x="8" offset-y="10" :icon="icons.checked"
v-if="modelValue && modelValue === iconInfo.id">
<ItemIcon class="ma-2" icon-type="fixed" :icon-id="iconInfo.icon" :color="color" />
</v-badge>
</div>
</div>
</div>
</div>
</template>
</v-select>
</template>
<script>
import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
import {
mdiCheck
} from '@mdi/js';
export default {
props: [
'modelValue',
'disabled',
'label',
'color',
'columnCount',
'allIconInfos'
],
emits: [
'update:modelValue',
],
data() {
const self = this;
return {
itemPerRow: self.columnCount || 7,
icons: {
checked: mdiCheck
}
}
},
computed: {
allIconRows() {
const ret = [];
let rowCount = 0;
for (let iconInfoId in this.allIconInfos) {
if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
continue;
}
const iconInfo = this.allIconInfos[iconInfoId];
if (!ret[rowCount]) {
ret[rowCount] = [];
} else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
rowCount++;
ret[rowCount] = [];
}
ret[rowCount].push({
id: iconInfoId,
icon: iconInfo.icon
});
}
return ret;
},
icon: {
get: function () {
return this.modelValue;
},
set: function (value) {
this.$emit('update:modelValue', value);
}
}
},
methods: {
hasSelectedIcon(row) {
if (!this.modelValue || !row || !row.length) {
return false;
}
for (let i = 0; i < row.length; i++) {
if (row[i].id === this.modelValue) {
return true;
}
}
return false;
},
onMenuStateChanged(state) {
const self = this;
if (state) {
self.$nextTick(() => {
if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, null, '.row-has-selected-item');
}
});
}
}
}
}
</script>
<style>
.icon-select-dropdown {
padding-left: 8px;
padding-right: 8px;
}
.icon-select-dropdown .icon-item {
display: grid;
}
</style>