Teren-app/resources/js/Pages/Settings/Segments/Index.vue

<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { useForm, router } from "@inertiajs/vue3";
import { ref } from "vue";
import AppCard from "@/Components/app/ui/card/AppCard.vue";
import CardTitle from "@/Components/ui/card/CardTitle.vue";
import { LayoutGrid } from "lucide-vue-next";
import { Button } from "@/Components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/Components/ui/dialog";
import { Input } from "@/Components/ui/input";
import { Checkbox } from "@/Components/ui/checkbox";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/Components/ui/table";
import { Badge } from "@/Components/ui/badge";
import InputLabel from "@/Components/InputLabel.vue";
import InputError from "@/Components/InputError.vue";

const props = defineProps({
  segments: Array,
});

const showCreate = ref(false);
const showEdit = ref(false);
const editing = ref(null);

const createForm = useForm({
  name: "",
  description: "",
  active: true,
  exclude: false,
});

const editForm = useForm({
  id: null,
  name: "",
  description: "",
  active: true,
  exclude: false,
});

const openCreate = () => {
  createForm.reset();
  createForm.active = true;
  showCreate.value = true;
};

const closeCreate = () => {
  showCreate.value = false;
  createForm.reset();
};

const store = () => {
  createForm.post(route("settings.segments.store"), {
    preserveScroll: true,
    onSuccess: () => closeCreate(),
  });
};

const openEdit = (segment) => {
  editing.value = segment;
  editForm.id = segment.id;
  editForm.name = segment.name;
  editForm.description = segment.description ?? "";
  editForm.active = !!segment.active;
  editForm.exclude = !!segment.exclude;
  showEdit.value = true;
};

const closeEdit = () => {
  showEdit.value = false;
  editing.value = null;
  editForm.reset();
};

const update = () => {
  editForm.put(route("settings.segments.update", { segment: editForm.id }), {
    preserveScroll: true,
    onSuccess: () => closeEdit(),
  });
};
</script>

<template>
  <AppLayout title="Segments">
    <template #header></template>
    <div class="pt-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AppCard
          title=""
          padding="none"
          class="p-0! gap-0"
          header-class="py-3! px-4 gap-0 text-muted-foreground"
          body-class=""
        >
          <template #header>
            <div class="flex items-center justify-between w-full">
              <div class="flex items-center gap-2">
                <LayoutGrid :size="18" />
                <CardTitle class="uppercase">Segments</CardTitle>
              </div>
              <Button @click="openCreate">+ New</Button>
            </div>
          </template>

          <div class="border-t">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead>Active</TableHead>
                  <TableHead>Exclude</TableHead>
                  <TableHead>Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow v-for="s in segments" :key="s.id">
                  <TableCell>{{ s.id }}</TableCell>
                  <TableCell>{{ s.name }}</TableCell>
                  <TableCell>{{ s.description }}</TableCell>
                  <TableCell>
                    <Badge :variant="s.active ? 'default' : 'secondary'">
                      {{ s.active ? "Yes" : "No" }}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Badge :variant="s.exclude ? 'default' : 'secondary'">
                      {{ s.exclude ? "Yes" : "No" }}
                    </Badge>
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm" @click="openEdit(s)">
                      Edit
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          <!-- Create Dialog -->
          <Dialog v-model:open="showCreate">
            <DialogContent>
              <DialogHeader>
                <DialogTitle>New Segment</DialogTitle>
              </DialogHeader>
              <div class="space-y-4">
                <div>
                  <InputLabel for="nameCreate">Name</InputLabel>
                  <Input
                    id="nameCreate"
                    v-model="createForm.name"
                    type="text"
                  />
                  <InputError :message="createForm.errors.name" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="descCreate">Description</InputLabel>
                  <Input
                    id="descCreate"
                    v-model="createForm.description"
                    type="text"
                  />
                  <InputError :message="createForm.errors.description" class="mt-1" />
                </div>
                <div class="flex items-center gap-2">
                  <Checkbox id="activeCreate" v-model="createForm.active" />
                  <InputLabel for="activeCreate" class="text-sm font-normal cursor-pointer">
                    Active
                  </InputLabel>
                </div>
                <div class="flex items-center gap-2">
                  <Checkbox id="excludeCreate" v-model="createForm.exclude" />
                  <InputLabel for="excludeCreate" class="text-sm font-normal cursor-pointer">
                    Exclude
                  </InputLabel>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" @click="closeCreate">Cancel</Button>
                <Button @click="store" :disabled="createForm.processing">Create</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>

          <!-- Edit Dialog -->
          <Dialog v-model:open="showEdit">
            <DialogContent>
              <DialogHeader>
                <DialogTitle>Edit Segment</DialogTitle>
              </DialogHeader>
              <div class="space-y-4">
                <div>
                  <InputLabel for="nameEdit">Name</InputLabel>
                  <Input
                    id="nameEdit"
                    v-model="editForm.name"
                    type="text"
                  />
                  <InputError :message="editForm.errors.name" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="descEdit">Description</InputLabel>
                  <Input
                    id="descEdit"
                    v-model="editForm.description"
                    type="text"
                  />
                  <InputError :message="editForm.errors.description" class="mt-1" />
                </div>
                <div class="flex items-center gap-2">
                  <Checkbox id="activeEdit" v-model="editForm.active" />
                  <InputLabel for="activeEdit" class="text-sm font-normal cursor-pointer">
                    Active
                  </InputLabel>
                </div>
                <div class="flex items-center gap-2">
                  <Checkbox id="excludeEdit" v-model="editForm.exclude" />
                  <InputLabel for="excludeEdit" class="text-sm font-normal cursor-pointer">
                    Exclude
                  </InputLabel>
                </div>
              </div>
              <DialogFooter>
                <Button variant="outline" @click="closeEdit">Cancel</Button>
                <Button @click="update" :disabled="editForm.processing">Save</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        </AppCard>
      </div>
    </div>
  </AppLayout>
</template>