Teren-app/resources/js/Components/DocumentsTable/DocumentUploadDialog.vue

<script setup>
import CreateDialog from '@/Components/Dialogs/CreateDialog.vue'
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'
import { ref, watch } from 'vue'
import { router } from '@inertiajs/vue3'
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/Components/ui/form'
import { Input } from '@/Components/ui/input'
import { Textarea } from '@/Components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'
import { Switch } from '@/Components/ui/switch'

const props = defineProps({
  show: { type: Boolean, default: false },
  postUrl: { type: String, required: true },
  // Optional list of contracts to allow attaching the document directly to a contract
  // Each item should have at least: { uuid, reference }
  contracts: { type: Array, default: () => [] },
})
const emit = defineEmits(['close', 'uploaded'])

const MAX_SIZE = 25 * 1024 * 1024 // 25MB
const ALLOWED_EXTS = ['doc','docx','pdf','txt','csv','xls','xlsx','jpeg','jpg','png']

const formSchema = toTypedSchema(z.object({
  name: z.string().min(1, 'Ime je obvezno'),
  description: z.string().optional(),
  file: z.instanceof(File).refine((file) => file.size > 0, 'Izberite datoteko'),
  is_public: z.boolean().default(true),
  contract_uuid: z.string().nullable().optional(),
}))

const form = useForm({
  validationSchema: formSchema,
  initialValues: {
    name: '',
    description: '',
    file: null,
    is_public: true,
    contract_uuid: null,
  },
})

const localError = ref('')

watch(() => props.show, (v) => {
  if (!v) return
  localError.value = ''
  form.resetForm()
})

const onFileChange = (e) => {
  localError.value = ''
  const f = e.target.files?.[0]
  if (!f) {
    form.setFieldValue('file', null)
    return
  }
  const ext = (f.name.split('.').pop() || '').toLowerCase()
  if (!ALLOWED_EXTS.includes(ext)) {
    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
    e.target.value = ''
    form.setFieldValue('file', null)
    return
  }
  if (f.size > MAX_SIZE) {
    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
    e.target.value = ''
    form.setFieldValue('file', null)
    return
  }
  form.setFieldValue('file', f)
  if (!form.values.name) {
    form.setFieldValue('name', f.name.replace(/\.[^.]+$/, ''))
  }
}

const submit = form.handleSubmit(async (values) => {
  localError.value = ''
  if (!values.file) {
    localError.value = 'Prosimo izberite datoteko.'
    return
  }
  const ext = (values.file.name.split('.').pop() || '').toLowerCase()
  if (!ALLOWED_EXTS.includes(ext)) {
    localError.value = 'Nepodprta vrsta datoteke. Dovoljeno: ' + ALLOWED_EXTS.join(', ')
    return
  }
  if (values.file.size > MAX_SIZE) {
    localError.value = 'Datoteka je prevelika. Največja velikost je 25MB.'
    return
  }

  const formData = new FormData()
  formData.append('name', values.name)
  formData.append('description', values.description || '')
  formData.append('file', values.file)
  formData.append('is_public', values.is_public ? '1' : '0')
  if (values.contract_uuid) {
    formData.append('contract_uuid', values.contract_uuid)
  }

  router.post(props.postUrl, formData, {
    forceFormData: true,
    onSuccess: () => {
      emit('uploaded')
      emit('close')
      form.resetForm()
    },
    onError: (errors) => {
      // Set form errors if any
      if (errors.name) form.setFieldError('name', errors.name)
      if (errors.description) form.setFieldError('description', errors.description)
      if (errors.file) form.setFieldError('file', errors.file)
      if (errors.contract_uuid) form.setFieldError('contract_uuid', errors.contract_uuid)
    },
  })
})

const close = () => emit('close')

const onConfirm = () => {
  submit()
}
</script>

<template>
  <CreateDialog
    :show="props.show"
    title="Dodaj dokument"
    max-width="lg"
    confirm-text="Naloži"
    :processing="!!form.isSubmitting.value"
    :disabled="!form.values.file"
    @close="close"
    @confirm="onConfirm"
  >
    <form @submit.prevent="submit" class="space-y-4">
      <FormField v-if="props.contracts && props.contracts.length" v-slot="{ value, handleChange }" name="contract_uuid">
        <FormItem>
          <FormLabel>Pripiši k</FormLabel>
          <Select :model-value="value" @update:model-value="handleChange">
            <FormControl>
              <SelectTrigger>
                <SelectValue placeholder="Primer" />
              </SelectTrigger>
            </FormControl>
            <SelectContent>
              <SelectItem :value="null">Primer</SelectItem>
              <SelectItem
                v-for="c in props.contracts"
                :key="c.uuid"
                :value="c.uuid"
              >
                Pogodba: {{ c.reference }}
              </SelectItem>
            </SelectContent>
          </Select>
          <FormMessage />
        </FormItem>
      </FormField>

      <FormField v-slot="{ componentField }" name="name">
        <FormItem>
          <FormLabel>Ime</FormLabel>
          <FormControl>
            <Input id="doc_name" v-bind="componentField" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>

      <FormField v-slot="{ componentField }" name="description">
        <FormItem>
          <FormLabel>Opis</FormLabel>
          <FormControl>
            <Textarea id="doc_desc" v-bind="componentField" rows="3" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>

      <FormField v-slot="{ value, handleChange }" name="file">
        <FormItem>
          <FormLabel>Datoteka (max 25MB)</FormLabel>
          <FormControl>
            <Input
              id="doc_file"
              type="file"
              @change="onFileChange"
              accept=".doc,.docx,.pdf,.txt,.csv,.xls,.xlsx,.jpeg,.jpg,.png"
            />
          </FormControl>
          <FormMessage />
          <div v-if="localError" class="text-sm text-red-600 mt-1">{{ localError }}</div>
          <div v-if="value" class="text-sm text-gray-600 mt-1">
            Izbrana datoteka: {{ value.name }} ({{ (value.size / 1024).toFixed(2) }} KB)
          </div>
        </FormItem>
      </FormField>

      <FormField v-slot="{ value, handleChange }" name="is_public">
        <FormItem class="flex flex-row items-start space-x-3 space-y-0">
          <FormControl>
            <Switch
              :model-value="value"
              @update:model-value="handleChange"
            />
          </FormControl>
          <div class="space-y-1 leading-none">
            <FormLabel>Javno</FormLabel>
          </div>
        </FormItem>
      </FormField>
    </form>
  </CreateDialog>
</template>