Teren-app/resources/js/Pages/Imports/Templates/Partials/BasicTemplateInfo.vue

<script setup>
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import { Label } from "@/Components/ui/label";
import { Input } from "@/Components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import { Button } from "@/Components/ui/button";
import AppMultiSelect from "@/Components/app/ui/AppMultiSelect.vue";

const props = defineProps({
  form: { type: Object, required: true },
  clients: { type: Array, default: () => [] },
  segments: { type: Array, default: () => [] },
  actions: { type: Array, default: () => [] },
  decisions: { type: Array, default: () => [] },
  canChangeClient: { type: Boolean, default: true },
});

const emit = defineEmits(["save"]);
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle>Osnovne informacije</CardTitle>
    </CardHeader>
    <CardContent class="space-y-6">
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="space-y-2">
          <Label for="name">Ime predloge</Label>
          <Input id="name" v-model="form.name" type="text" />
        </div>
        
        <div class="space-y-2">
          <Label for="source_type">Vir</Label>
          <Select v-model="form.source_type">
            <SelectTrigger id="source_type">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="csv">CSV</SelectItem>
              <SelectItem value="xml">XML</SelectItem>
              <SelectItem value="xls">XLS</SelectItem>
              <SelectItem value="xlsx">XLSX</SelectItem>
              <SelectItem value="json">JSON</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div class="space-y-2">
          <Label for="default_record_type">Privzeti tip zapisa</Label>
          <Input
            id="default_record_type"
            v-model="form.default_record_type"
            type="text"
            placeholder="npr.: account, person"
          />
        </div>

        <div class="space-y-2">
          <Label for="client">Naročnik (izbirno)</Label>
          <Select v-model="form.client_uuid" :disabled="!canChangeClient">
            <SelectTrigger id="client">
              <SelectValue placeholder="Globalno (brez naročnika)" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem :value="null">Globalno (brez naročnika)</SelectItem>
              <SelectItem v-for="c in clients || []" :key="c.uuid" :value="c.uuid">
                {{ c.name }}
              </SelectItem>
            </SelectContent>
          </Select>
          <p v-if="!canChangeClient" class="text-xs text-amber-600">
            Ni mogoče spremeniti naročnika, ker ta predloga že vsebuje preslikave.
          </p>
        </div>

        <div class="space-y-2">
          <Label for="delimiter">Privzeti ločilni znak (CSV)</Label>
          <Select v-model="form.meta.delimiter">
            <SelectTrigger id="delimiter">
              <SelectValue placeholder="(Auto-detect)" />
            </SelectTrigger>
            <SelectContent>

              <SelectItem value=",">Vejica ,</SelectItem>
              <SelectItem value=";">Podpičje ;</SelectItem>
              <SelectItem value="\t">Tab \t</SelectItem>
              <SelectItem value="|">Pipe |</SelectItem>
              <SelectItem value=" ">Presledek ␠</SelectItem>
            </SelectContent>
          </Select>
          <p class="text-xs text-muted-foreground">
            Pusti prazno za samodejno zaznavo. Uporabi, ko zaznavanje ne deluje pravilno.
          </p>
        </div>

        <div class="space-y-2">
          <Label for="segment">Privzeti segment</Label>
          <Select v-model="form.meta.segment_id">
            <SelectTrigger id="segment">
              <SelectValue placeholder="(brez)" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem :value="null">(brez)</SelectItem>
              <SelectItem v-for="s in segments || []" :key="s.id" :value="s.id">
                {{ s.name }}
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div class="space-y-2">
          <Label for="action">Privzeto dejanje (post-contract activity)</Label>
          <Select v-model="form.meta.action_id">
            <SelectTrigger id="action">
              <SelectValue placeholder="(brez)" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem :value="null">(brez)</SelectItem>
              <SelectItem v-for="a in actions || []" :key="a.id" :value="a.id">
                {{ a.name }}
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div class="space-y-2">
          <Label for="decision">Privzeta odločitev (post-contract)</Label>
          <Select v-model="form.meta.decision_id" :disabled="!form.meta.action_id">
            <SelectTrigger id="decision">
              <SelectValue placeholder="(brez)" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem :value="null">(brez)</SelectItem>
              <SelectItem v-for="d in decisions || []" :key="d.id" :value="d.id">
                {{ d.name }}
              </SelectItem>
            </SelectContent>
          </Select>
          <p v-if="!form.meta.action_id" class="text-xs text-muted-foreground">
            Najprej izberi dejanje, nato odločitev.
          </p>
        </div>
      </div>

      <div class="flex items-center gap-6">
        <div class="flex items-center gap-2">
          <Checkbox
            id="is_active"
            :checked="form.is_active"
            @update:checked="form.is_active = $event"
          />
          <Label for="is_active" class="cursor-pointer">Aktivna</Label>
        </div>
        <div class="flex items-center gap-2">
          <Checkbox
            id="reactivate"
            :checked="form.reactivate"
            @update:checked="form.reactivate = $event"
          />
          <Label for="reactivate" class="cursor-pointer">Reaktivacija</Label>
        </div>
        <Button @click="emit('save')" class="ml-auto">Shrani</Button>
      </div>
    </CardContent>
  </Card>
</template>