Teren-app/resources/js/Pages/Settings/Archive/Partials/CreateRuleForm.vue

<script setup>
import { Button } from "@/Components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/Components/ui/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { Checkbox } from "@/Components/ui/checkbox";
import AppCheckboxArray from "@/Components/app/ui/AppCheckboxArray.vue";
import { Input } from "@/Components/ui/input";
import { Textarea } from "@/Components/ui/textarea";
import InputLabel from "@/Components/InputLabel.vue";
import InputError from "@/Components/InputError.vue";
import { ref, computed } from "vue";

const props = defineProps({
  form: Object,
  archiveEntities: Array,
  actions: Array,
  segments: Array,
});

const emit = defineEmits(["submit"]);

const selectedEntity = ref(null);

function onFocusChange() {
  const found = props.archiveEntities.find((e) => e.focus === props.form.focus);
  selectedEntity.value = found || null;
  props.form.related = [];
}

const availableDecisions = computed(() => {
  if (!props.form.action_id) return [];
  const action = props.actions.find((a) => a.id === props.form.action_id);
  return action?.decisions || [];
});

function handleActionChange() {
  props.form.decision_id = null;
}
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle class="text-base">New Archive Rule</CardTitle>
    </CardHeader>
    <CardContent class="space-y-4">
      <div>
        <InputLabel for="new_segment">Segment (optional)</InputLabel>
        <Select v-model="form.segment_id">
          <SelectTrigger id="new_segment" class="w-full">
            <SelectValue placeholder="-- none --" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem :value="null">-- none --</SelectItem>
            <SelectItem v-for="seg in segments" :key="seg.id" :value="seg.id">
              {{ seg.name }}
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <InputLabel for="new_action">Action (optional)</InputLabel>
        <Select v-model="form.action_id" @update:model-value="handleActionChange">
          <SelectTrigger id="new_action" class="w-full">
            <SelectValue placeholder="-- none --" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem :value="null">-- none --</SelectItem>
            <SelectItem v-for="a in actions" :key="a.id" :value="a.id">
              {{ a.name }}
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <InputLabel for="new_decision">Decision (optional)</InputLabel>
        <Select v-model="form.decision_id" :disabled="!form.action_id">
          <SelectTrigger id="new_decision" class="w-full">
            <SelectValue placeholder="-- none --" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem :value="null">-- none --</SelectItem>
            <SelectItem v-for="d in availableDecisions" :key="d.id" :value="d.id">
              {{ d.name }}
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div>
        <InputLabel for="new_name">Name</InputLabel>
        <Input id="new_name" v-model="form.name" type="text" />
        <InputError :message="form.errors.name" class="mt-1" />
      </div>

      <div>
        <InputLabel for="new_focus">Focus Entity</InputLabel>
        <Select v-model="form.focus" @update:model-value="onFocusChange">
          <SelectTrigger id="new_focus" class="w-full">
            <SelectValue placeholder="-- choose --" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem v-for="ae in archiveEntities" :key="ae.id" :value="ae.focus">
              {{ ae.name || ae.focus }}
            </SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div v-if="selectedEntity" class="space-y-2">
        <InputLabel>Related Tables</InputLabel>
        <div class="flex flex-wrap gap-2">
          <label
            v-for="r in selectedEntity.related"
            :key="r"
            class="inline-flex items-center gap-2 text-sm bg-muted px-3 py-1.5 rounded-md border cursor-pointer hover:bg-muted/80"
          >
            <AppCheckboxArray :value="r" v-model="form.related" />
            <span>{{ r }}</span>
          </label>
        </div>
      </div>

      <div>
        <InputLabel for="new_description">Description</InputLabel>
        <Textarea id="new_description" v-model="form.description" rows="2" />
        <InputError :message="form.errors.description" class="mt-1" />
      </div>

      <div class="flex items-center gap-2">
        <Checkbox id="new_enabled" v-model="form.enabled" />
        <InputLabel for="new_enabled" class="text-sm font-normal cursor-pointer">
          Enabled
        </InputLabel>
      </div>

      <div class="flex items-center gap-2">
        <Checkbox id="new_soft" v-model="form.soft" />
        <InputLabel for="new_soft" class="text-sm font-normal cursor-pointer">
          Soft Archive
        </InputLabel>
      </div>

      <div class="flex items-center gap-2">
        <Checkbox id="new_reactivate" v-model="form.reactivate" />
        <InputLabel for="new_reactivate" class="text-sm font-normal cursor-pointer">
          Reactivate (undo archive)
        </InputLabel>
      </div>

      <div>
        <InputLabel for="new_strategy">Strategy</InputLabel>
        <Select v-model="form.strategy">
          <SelectTrigger id="new_strategy" class="w-full">
            <SelectValue placeholder="Select strategy" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="immediate">Immediate</SelectItem>
            <SelectItem value="scheduled">Scheduled</SelectItem>
            <SelectItem value="queued">Queued</SelectItem>
            <SelectItem value="manual">Manual (never auto-run)</SelectItem>
          </SelectContent>
        </Select>
        <InputError :message="form.errors.strategy" class="mt-1" />
      </div>

      <Button @click="emit('submit')" :disabled="form.processing" class="w-full">
        Create Rule
      </Button>

      <div v-if="Object.keys(form.errors).length" class="text-xs text-red-600">
        Please fix validation errors.
      </div>
    </CardContent>
  </Card>
</template>