Delete expires ots & add duration to create

resources/js/pages/ots/Create.vue

@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import otsRoutes from '@/routes/ots';
-import { Save } from '@lucide/vue';
-import { Head, useForm } from '@inertiajs/vue3';
-import { Button } from '@/components/ui/button';
-import { Label } from '@/components/ui/label';
+import {Save} from '@lucide/vue';
+import {Head, useForm} from '@inertiajs/vue3';
+import {Button} from '@/components/ui/button';
+import {Label} from '@/components/ui/label';
 import InputError from '@/components/InputError.vue';
-import { Card, CardContent } from '@/components/ui/card';
-import { Textarea } from '@/components/ui/textarea';
+import {Card, CardContent} from '@/components/ui/card';
+import {Textarea} from '@/components/ui/textarea';
+import {Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
+
+const props = defineProps<{
+  durations: {
+    value: number,
+    label: string
+  }[],
+}>();
 
 const form = useForm({
   secret: '',
+  duration: props.durations[props.durations.length - 1].value
 });
 
 function submit(): void {
@@ -19,11 +28,11 @@ function submit(): void {
 
 <template>
   <div class="flex flex-col justify-center p-16">
-    <Head title="OTS" />
+    <Head title="OTS"/>
     <Card class="w-full">
       <CardContent>
         <form class="grid w-full gap-5 py-4" @submit.prevent="submit">
-          <div class="grid grid-cols-2 items-start">
+          <div class="grid grid-cols-2 items-start gap-4">
             <div class="col-span-2 grid items-start gap-3">
               <Label for="secret">Secret</Label>
               <Textarea
@@ -33,12 +42,28 @@ function submit(): void {
                 autofocus
                 name="secret"
               />
-              <InputError :message="form.errors.secret" />
+              <InputError :message="form.errors.secret"/>
+            </div>
+            <div class="grid items-start gap-3">
+              <Label for="duration">Duration</Label>
+              <Select v-model="form.duration">
+                <SelectTrigger class="w-full">
+                  <SelectValue placeholder="Select expires duration" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem v-for="duration in durations" :value="duration.value">
+                      {{ duration.label }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <InputError :message="form.errors.duration"/>
             </div>
           </div>
           <div class="flex w-full justify-end">
             <Button :disabled="form.processing" class="w-fit" type="submit">
-              <component :is="Save" />
+              <component :is="Save"/>
               Erstellen
             </Button>
           </div>