17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 23 Pull Requests 4 Actions 3 Packages Projects Releases 12 Wiki Activity

disabled datepickers until Type selected

Browse Source
This commit is contained in:
ajdj100
2025-12-17 10:03:46 -05:00
parent 8f397131d4
commit 6f3ab2da73
1 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
ui/src/components/loa/loaForm.vue
View File

@@ -226,18 +226,28 @@ const filteredMembers = computed(() => {
<FieldContent> <FieldContent>
<FieldLabel>Start Date</FieldLabel> <FieldLabel>Start Date</FieldLabel>
<Popover> <Popover>
<PopoverTrigger as-child> <div class="relative inline-flex items-center group">
<Button variant="outline" :class="cn( <PopoverTrigger as-child>
'w-full justify-start text-left font-normal', <Button :disabled="!values.type" variant="outline" :class="cn(
!field.value && 'text-muted-foreground', 'w-full justify-start text-left font-normal',
)"> !field.value && 'text-muted-foreground',
<CalendarIcon class="mr-2 h-4 w-4" /> )">
{{ field.value ? df.format(field.value) : "Pick a date" }} <CalendarIcon class="mr-2 h-4 w-4" />
</Button> {{ field.value ? df.format(field.value) : "Pick a date" }}
</PopoverTrigger> </Button>
</PopoverTrigger>
<!-- Tooltip bubble -->
<div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150">
Select an LOA type first
</div>
</div>
<PopoverContent class="w-auto p-0"> <PopoverContent class="w-auto p-0">
<Calendar <Calendar
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))" @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
layout="month-and-year" :min-value="today(getLocalTimeZone())" /> layout="month-and-year" :min-value="today(getLocalTimeZone())" />
</PopoverContent> </PopoverContent>
@@ -253,18 +263,28 @@ const filteredMembers = computed(() => {
<FieldContent> <FieldContent>
<FieldLabel>End Date</FieldLabel> <FieldLabel>End Date</FieldLabel>
<Popover> <Popover>
<PopoverTrigger as-child> <div class="relative inline-flex items-center group">
<Button variant="outline" :class="cn( <PopoverTrigger as-child>
'w-full justify-start text-left font-normal', <Button :disabled="!values.type" variant="outline" :class="cn(
!field.value && 'text-muted-foreground', 'w-full justify-start text-left font-normal',
)"> !field.value && 'text-muted-foreground',
<CalendarIcon class="mr-2 h-4 w-4" /> )">
{{ field.value ? df.format(field.value) : "Pick a date" }} <CalendarIcon class="mr-2 h-4 w-4" />
</Button> {{ field.value ? df.format(field.value) : "Pick a date" }}
</PopoverTrigger> </Button>
</PopoverTrigger>
<!-- Tooltip bubble -->
<div v-if="!values?.type" class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2
whitespace-nowrap rounded-md bg-popover px-2 py-1 text-xs
text-popover-foreground shadow-md border border-border
opacity-0 translate-y-1
group-hover:opacity-100 group-hover:translate-y-0
transition-opacity transition-transform duration-150">
Select an LOA type first
</div>
</div>
<PopoverContent class="w-auto p-0"> <PopoverContent class="w-auto p-0">
<Calendar <Calendar
@update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))" @update:model-value="(val: CalendarDate) => field.onChange(val.toDate(getLocalTimeZone()))"
:default-placeholder="defaultPlaceholder" :min-value="minEndDate" :default-placeholder="defaultPlaceholder" :min-value="minEndDate"
:max-value="maxEndDate" layout="month-and-year"> :max-value="maxEndDate" layout="month-and-year">