implemented "today" button for quickly setting promotion dates

This commit is contained in:
2025-12-17 22:58:46 -05:00
parent 00f8d583cc
commit b8750f1e8e

View File

@@ -26,7 +26,7 @@ import { error } from 'console';
import Input from '../ui/input/Input.vue'; import Input from '../ui/input/Input.vue';
import Field from '../ui/field/Field.vue'; import Field from '../ui/field/Field.vue';
const { handleSubmit, errors, values, resetForm } = useForm({ const { handleSubmit, errors, values, resetForm, setFieldValue } = useForm({
validationSchema: toTypedSchema(batchPromotionSchema), validationSchema: toTypedSchema(batchPromotionSchema),
validateOnMount: false, validateOnMount: false,
}) })
@@ -103,8 +103,21 @@ onMounted(async () => {
allRanks.value = await getAllRanks(); allRanks.value = await getAllRanks();
}) })
function setAllToday() {
const today = () => {
const d = new Date()
const year = d.getFullYear()
const month = String(d.getMonth() + 1).padStart(2, '0')
const day = String(d.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
values.promotions?.forEach((_, index) => {
// @ts-ignore
setFieldValue(`promotions[${index}].start_date`, today())
})
}
</script> </script>
<template> <template>
@@ -134,7 +147,10 @@ onMounted(async () => {
text-sm font-medium text-muted-foreground"> text-sm font-medium text-muted-foreground">
<div>Member</div> <div>Member</div>
<div>Rank</div> <div>Rank</div>
<div>Date</div> <div class="flex justify-between">
<p>Date</p><button @click.prevent.stop="setAllToday"
class="cursor-pointer border-1 rounded-full px-3 hover:bg-secondary hover:border-accent">Today</button>
</div>
<div></div> <div></div>
<div></div> <div></div>
</div> </div>
@@ -145,8 +161,8 @@ onMounted(async () => {
<!-- Member --> <!-- Member -->
<VeeField :name="`promotions[${index}].member_id`" v-slot="{ field, errors }"> <VeeField :name="`promotions[${index}].member_id`" v-slot="{ field, errors }">
<div class="flex flex-col min-w-0"> <div class="flex flex-col min-w-0">
<Combobox :model-value="field.value" @update:model-value="field.onChange" <Combobox :model-value="field.value"
:ignore-filter="true"> @update:model-value="field.onChange" :ignore-filter="true">
<ComboboxAnchor> <ComboboxAnchor>
<ComboboxInput class="w-full pl-3" placeholder="Search members…" <ComboboxInput class="w-full pl-3" placeholder="Search members…"
:display-value="id => :display-value="id =>
@@ -178,8 +194,8 @@ onMounted(async () => {
<!-- Rank --> <!-- Rank -->
<VeeField :name="`promotions[${index}].rank_id`" v-slot="{ field, errors }"> <VeeField :name="`promotions[${index}].rank_id`" v-slot="{ field, errors }">
<div class="flex flex-col min-w-0"> <div class="flex flex-col min-w-0">
<Combobox :model-value="field.value" @update:model-value="field.onChange" <Combobox :model-value="field.value"
:ignore-filter="true"> @update:model-value="field.onChange" :ignore-filter="true">
<ComboboxAnchor> <ComboboxAnchor>
<ComboboxInput class="w-full pl-3" placeholder="Select rank" <ComboboxInput class="w-full pl-3" placeholder="Select rank"
:display-value="id => rankById.get(id)?.name" :display-value="id => rankById.get(id)?.name"
@@ -190,8 +206,8 @@ onMounted(async () => {
<ComboboxGroup> <ComboboxGroup>
<div <div
class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed"> class="max-h-80 overflow-y-auto min-w-[12rem] scrollbar-themed">
<ComboboxItem v-for="rank in filteredRanks" :key="rank.id" <ComboboxItem v-for="rank in filteredRanks"
:value="rank.id"> :key="rank.id" :value="rank.id">
{{ rank.name }} {{ rank.name }}
<ComboboxItemIndicator> <ComboboxItemIndicator>
<Check /> <Check />