Add Calendar for date fields

test-frontend/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@internationalized/date": "^3.5.3",
     "@tanstack/vue-table": "^8.16.0",
     "@vee-validate/zod": "^4.12.7",
     "@vueuse/core": "^10.9.0",

test-frontend/src/components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

test-frontend/src/components/ui/button/index.ts

@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

test-frontend/src/components/ui/search/form/FieldSelector.vue

@@ -31,7 +31,6 @@ const emit = defineEmits(['update:modelValue', 'change']);
 const currentFieldsConfig = computed(() => fieldsConfiguration[props.parentField]);
 
 const handleChange = (value: string | number) => {
-  console.log("Value changed to:", value);
   emit('update:modelValue', value);
 };
 

test-frontend/src/components/ui/search/form/ValueInput.vue

@@ -1,5 +1,6 @@
 <template>
   <Input v-if="isInput" :modelValue="modelValue" type="text" placeholder="Value" @update:modelValue="handleChange" class="w-full"/>
+
   <Select v-if="isSelect" :modelValue="modelValue" @update:modelValue="handleChange">
     <SelectTrigger class="w-[180px]">
       <SelectValue placeholder="Value" />
@@ -10,6 +11,24 @@
       </SelectItem>
     </SelectContent>
   </Select>
+
+  <Popover v-if="isDate">
+    <PopoverTrigger as-child>
+      <Button
+          variant="outline"
+          :class="cn(
+          'w-[280px] justify-start text-left font-normal',
+          !dateValue && 'text-muted-foreground',
+        )"
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        {{ dateValue ? df.format(dateValue.toDate(getLocalTimeZone())) : "Pick a date" }}
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <Calendar v-model="dateValue" initial-focus />
+    </PopoverContent>
+  </Popover>
 </template>
 
 <script lang="ts" setup>
@@ -20,8 +39,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/shadcn/select'
+import {
+  DateFormatter,
+  type DateValue,
+  getLocalTimeZone,
+  CalendarDate
+} from '@internationalized/date'
+
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { Calendar } from '@/components/ui/shadcn/calendar'
+import { Button } from '@/components/ui/shadcn/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/shadcn/popover'
+import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/shadcn/input'
-import {computed} from 'vue';
+import {computed, ref, watch, watchEffect} from 'vue';
 import {fieldsConfiguration} from '@/lib/search/fieldsConfiguration.ts';
 
 const props = defineProps({
@@ -30,14 +61,36 @@ const props = defineProps({
   parentField: String
 });
 
+
+const df = new DateFormatter('fr-FR', {
+  dateStyle: 'short',
+})
+
+const dateValue = ref<DateValue>()
+
 const emit = defineEmits(['update:modelValue']);
 
 const currentFieldsConfig = computed(() => fieldsConfiguration[props.parentField]);
 
 const isInput = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'input');
 const isSelect = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'select');
+const isDate = computed(() => currentFieldsConfig.value[props.field]?.valueComponent === 'date');
 const valueOptions = computed(() => currentFieldsConfig.value[props.field]?.valueOptions ?? []);
 
+watch(dateValue, (newDate) => {
+  if (newDate) {
+    const formattedDate = `${newDate.year}-${String(newDate.month).padStart(2, '0')}-${String(newDate.day).padStart(2, '0')}`;
+    emit('update:modelValue', formattedDate);
+  }
+});
+
+watchEffect(() => {
+  if (isDate.value && props.modelValue) {
+    const [year, month, day] = props.modelValue.split('-').map(Number);
+    dateValue.value = new CalendarDate( year, month, day);
+  }
+});
+
 const handleChange = (value: string | number) => {
   emit('update:modelValue', value);
 };

test-frontend/src/components/ui/shadcn/calendar/Calendar.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from './index.ts'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarCell.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarCellTrigger.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarGrid.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarGridBody.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarGridHead.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarGridRow.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>

test-frontend/src/components/ui/shadcn/calendar/CalendarHeadCell.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { type HTMLAttributes, computed } from 'vue'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-9 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>