mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-17 00:12:11 +08:00
migrate schedule frequency select / selection sheet to composition API and typescript
This commit is contained in:
MaysWind
@@ -25,11 +25,11 @@
|
||||
</v-list>
|
||||
</div>
|
||||
<div class="schedule-frequency-value-container">
|
||||
<v-list v-if="frequencyType === allTemplateScheduledFrequencyTypes.Disabled.type">
|
||||
<v-list-item :title="$t('None')"></v-list-item>
|
||||
<v-list v-if="frequencyType === ScheduledTemplateFrequencyType.Disabled.type">
|
||||
<v-list-item :title="tt('None')"></v-list-item>
|
||||
</v-list>
|
||||
<v-list select-strategy="classic" v-model:selected="frequencyValue"
|
||||
v-else-if="frequencyType === allTemplateScheduledFrequencyTypes.Weekly.type">
|
||||
v-else-if="frequencyType === ScheduledTemplateFrequencyType.Weekly.type">
|
||||
<v-list-item :key="weekDay.type" :value="weekDay.type" :title="weekDay.displayName"
|
||||
:class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(weekDay.type) }"
|
||||
v-for="weekDay in allWeekDays">
|
||||
@@ -39,7 +39,7 @@
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
<v-list select-strategy="classic" v-model:selected="frequencyValue"
|
||||
v-else-if="frequencyType === allTemplateScheduledFrequencyTypes.Monthly.type">
|
||||
v-else-if="frequencyType === ScheduledTemplateFrequencyType.Monthly.type">
|
||||
<v-list-item :key="monthDay.day" :value="monthDay.day" :title="monthDay.displayName"
|
||||
:class="{ 'frequency-value-selected v-list-item--active text-primary': isFrequencyValueSelected(monthDay.day) }"
|
||||
v-for="monthDay in allAvailableMonthDays">
|
||||
@@ -54,137 +54,102 @@
|
||||
</v-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapStores } from 'pinia';
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick, useTemplateRef } from 'vue';
|
||||
|
||||
import { type CommonScheduleFrequencySelectionProps, useScheduleFrequencySelectionBase } from '@/components/base/ScheduleFrequencySelectionBase.ts';
|
||||
|
||||
import { useI18n } from '@/locales/helpers.ts';
|
||||
|
||||
import { useUserStore } from '@/stores/user.ts';
|
||||
|
||||
import { ScheduledTemplateFrequencyType } from '@/core/template.ts';
|
||||
import { sortNumbersArray } from '@/lib/common.ts';
|
||||
import { scrollToSelectedItem } from '@/lib/ui/desktop.ts';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'type',
|
||||
'modelValue',
|
||||
'disabled',
|
||||
'readonly',
|
||||
'label'
|
||||
],
|
||||
emits: [
|
||||
'update:type',
|
||||
'update:modelValue'
|
||||
],
|
||||
data() {
|
||||
return {
|
||||
menuState: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useUserStore),
|
||||
allTransactionScheduledFrequencyTypes() {
|
||||
return this.$locale.getAllTransactionScheduledFrequencyTypes();
|
||||
},
|
||||
allTemplateScheduledFrequencyTypes() {
|
||||
return ScheduledTemplateFrequencyType.all();
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays(this.firstDayOfWeek);
|
||||
},
|
||||
allAvailableMonthDays() {
|
||||
const allAvailableDays = [];
|
||||
const props = defineProps<CommonScheduleFrequencySelectionProps>();
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:type', value: number): void;
|
||||
(e: 'update:modelValue', value: string): void;
|
||||
}>();
|
||||
|
||||
for (let i = 1; i <= 28; i++) {
|
||||
allAvailableDays.push({
|
||||
day: i,
|
||||
displayName: this.$locale.getMonthdayShortName(i),
|
||||
});
|
||||
}
|
||||
const { tt, getMultiMonthdayShortNames, getMultiWeekdayLongNames } = useI18n();
|
||||
|
||||
return allAvailableDays;
|
||||
},
|
||||
firstDayOfWeek() {
|
||||
return this.userStore.currentUserFirstDayOfWeek;
|
||||
},
|
||||
frequencyType: {
|
||||
get: function () {
|
||||
return this.type;
|
||||
},
|
||||
set: function (value) {
|
||||
if (this.type !== value) {
|
||||
this.$emit('update:type', value);
|
||||
const userStore = useUserStore();
|
||||
|
||||
if (value === ScheduledTemplateFrequencyType.Weekly.type) {
|
||||
this.frequencyValue = [this.firstDayOfWeek];
|
||||
} else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
|
||||
this.frequencyValue = [1];
|
||||
} else {
|
||||
this.frequencyValue = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
frequencyValue: {
|
||||
get: function () {
|
||||
const values = this.modelValue.split(',');
|
||||
const ret = [];
|
||||
const { allTransactionScheduledFrequencyTypes, allWeekDays, allAvailableMonthDays, getFrequencyValues } = useScheduleFrequencySelectionBase();
|
||||
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
if (values[i]) {
|
||||
ret.push(parseInt(values[i]));
|
||||
}
|
||||
}
|
||||
const dropdownMenu = useTemplateRef<HTMLElement>('dropdownMenu');
|
||||
|
||||
return sortNumbersArray(ret);
|
||||
},
|
||||
set: function (value) {
|
||||
this.$emit('update:modelValue', sortNumbersArray(value).join(','));
|
||||
}
|
||||
},
|
||||
displayFrequency() {
|
||||
if (this.type === ScheduledTemplateFrequencyType.Disabled.type) {
|
||||
return this.$t('Disabled');
|
||||
} else if (this.type === ScheduledTemplateFrequencyType.Weekly.type) {
|
||||
if (this.frequencyValue.length) {
|
||||
return this.$t('format.misc.everyMultiDaysOfWeek', {
|
||||
days: this.$locale.getMultiWeekdayLongNames(this.frequencyValue, this.firstDayOfWeek)
|
||||
});
|
||||
} else {
|
||||
return this.$t('Weekly');
|
||||
}
|
||||
} else if (this.type === ScheduledTemplateFrequencyType.Monthly.type) {
|
||||
if (this.frequencyValue.length) {
|
||||
return this.$t('format.misc.everyMultiDaysOfMonth', {
|
||||
days: this.$locale.getMultiMonthdayShortNames(this.frequencyValue)
|
||||
});
|
||||
} else {
|
||||
return this.$t('Monthly');
|
||||
}
|
||||
const menuState = ref<boolean>(false);
|
||||
|
||||
const firstDayOfWeek = computed<number>(() => userStore.currentUserFirstDayOfWeek);
|
||||
|
||||
const frequencyType = computed<number>({
|
||||
get: () => props.type,
|
||||
set: (value: number) => {
|
||||
if (props.type !== value) {
|
||||
emit('update:type', value);
|
||||
|
||||
if (value === ScheduledTemplateFrequencyType.Weekly.type) {
|
||||
frequencyValue.value = [firstDayOfWeek.value];
|
||||
} else if (value === ScheduledTemplateFrequencyType.Monthly.type) {
|
||||
frequencyValue.value = [1];
|
||||
} else {
|
||||
return '';
|
||||
frequencyValue.value = [];
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onMenuStateChanged(state) {
|
||||
const self = this;
|
||||
}
|
||||
});
|
||||
|
||||
if (state) {
|
||||
self.$nextTick(() => {
|
||||
if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
|
||||
scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
isFrequencyValueSelected(value) {
|
||||
for (let i = 0; i < this.frequencyValue.length; i++) {
|
||||
if (this.frequencyValue[i] === value) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
const frequencyValue = computed<number[]>({
|
||||
get: () => getFrequencyValues(props.modelValue),
|
||||
set: (value: number[]) => {
|
||||
emit('update:modelValue', sortNumbersArray(value).join(','));
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
const displayFrequency = computed<string>(() => {
|
||||
if (frequencyType.value === ScheduledTemplateFrequencyType.Disabled.type) {
|
||||
return tt('Disabled');
|
||||
} else if (frequencyType.value === ScheduledTemplateFrequencyType.Weekly.type) {
|
||||
if (frequencyValue.value.length) {
|
||||
return tt('format.misc.everyMultiDaysOfWeek', {
|
||||
days: getMultiWeekdayLongNames(frequencyValue.value, firstDayOfWeek.value)
|
||||
});
|
||||
} else {
|
||||
return tt('Weekly');
|
||||
}
|
||||
} else if (frequencyType.value === ScheduledTemplateFrequencyType.Monthly.type) {
|
||||
if (frequencyValue.value.length) {
|
||||
return tt('format.misc.everyMultiDaysOfMonth', {
|
||||
days: getMultiMonthdayShortNames(frequencyValue.value)
|
||||
});
|
||||
} else {
|
||||
return tt('Monthly');
|
||||
}
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
});
|
||||
|
||||
function isFrequencyValueSelected(value: number): boolean {
|
||||
for (let i = 0; i < frequencyValue.value.length; i++) {
|
||||
if (frequencyValue.value[i] === value) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onMenuStateChanged(state: boolean): void {
|
||||
if (state) {
|
||||
nextTick(() => {
|
||||
if (dropdownMenu.value && dropdownMenu.value.parentElement) {
|
||||
scrollToSelectedItem(dropdownMenu.value.parentElement, '.schedule-frequency-value-container', '.frequency-value-selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user