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 DialogModal from "@/Components/DialogModal.vue";
import PrimaryButton from "@/Components/PrimaryButton.vue";
import InputLabel from "@/Components/InputLabel.vue";
import InputError from "@/Components/InputError.vue";
import TextInput from "@/Components/TextInput.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">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-semibold">Segments</h2>
            <PrimaryButton @click="openCreate">+ New</PrimaryButton>
          </div>

          <DialogModal :show="showCreate" @close="closeCreate">
            <template #title>New Segment</template>
            <template #content>
              <form @submit.prevent="store" class="space-y-4">
                <div>
                  <InputLabel for="nameCreate" value="Name" />
                  <TextInput
                    id="nameCreate"
                    v-model="createForm.name"
                    type="text"
                    class="mt-1 block w-full"
                  />
                  <InputError :message="createForm.errors.name" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="descCreate" value="Description" />
                  <TextInput
                    id="descCreate"
                    v-model="createForm.description"
                    type="text"
                    class="mt-1 block w-full"
                  />
                  <InputError :message="createForm.errors.description" class="mt-1" />
                </div>
                <div class="flex items-center gap-2">
                  <input id="activeCreate" type="checkbox" v-model="createForm.active" />
                  <label for="activeCreate">Active</label>
                </div>
                <div class="flex items-center gap-2">
                  <input
                    id="excludeCreate"
                    type="checkbox"
                    v-model="createForm.exclude"
                  />
                  <label for="excludeCreate">Exclude</label>
                </div>
                <div class="flex justify-end gap-2 mt-4">
                  <button
                    type="button"
                    @click="closeCreate"
                    class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
                  >
                    Cancel
                  </button>
                  <PrimaryButton :disabled="createForm.processing">Create</PrimaryButton>
                </div>
              </form>
            </template>
          </DialogModal>

          <DialogModal :show="showEdit" @close="closeEdit">
            <template #title>Edit Segment</template>
            <template #content>
              <form @submit.prevent="update" class="space-y-4">
                <div>
                  <InputLabel for="nameEdit" value="Name" />
                  <TextInput
                    id="nameEdit"
                    v-model="editForm.name"
                    type="text"
                    class="mt-1 block w-full"
                  />
                  <InputError :message="editForm.errors.name" class="mt-1" />
                </div>
                <div>
                  <InputLabel for="descEdit" value="Description" />
                  <TextInput
                    id="descEdit"
                    v-model="editForm.description"
                    type="text"
                    class="mt-1 block w-full"
                  />
                  <InputError :message="editForm.errors.description" class="mt-1" />
                </div>
                <div class="flex items-center gap-2">
                  <input id="activeEdit" type="checkbox" v-model="editForm.active" />
                  <label for="activeEdit">Active</label>
                </div>
                <div class="flex items-center gap-2">
                  <input id="excludeEdit" type="checkbox" v-model="editForm.exclude" />
                  <label for="excludeEdit">Exclude</label>
                </div>

                <div class="flex justify-end gap-2 mt-4">
                  <button
                    type="button"
                    @click="closeEdit"
                    class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
                  >
                    Cancel
                  </button>
                  <PrimaryButton :disabled="editForm.processing">Save</PrimaryButton>
                </div>
              </form>
            </template>
          </DialogModal>

          <table class="min-w-full text-left text-sm">
            <thead>
              <tr class="border-b">
                <th class="py-2 pr-4">ID</th>
                <th class="py-2 pr-4">Name</th>
                <th class="py-2 pr-4">Description</th>
                <th class="py-2 pr-4">Active</th>
                <th class="py-2 pr-4">Exclude</th>
                <th class="py-2 pr-4">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="s in segments" :key="s.id" class="border-b last:border-0">
                <td class="py-2 pr-4">{{ s.id }}</td>
                <td class="py-2 pr-4">{{ s.name }}</td>
                <td class="py-2 pr-4">{{ s.description }}</td>
                <td class="py-2 pr-4">
                  <span class="inline-flex items-center gap-1">
                    <span
                      :class="s.active ? 'bg-green-500' : 'bg-gray-400'"
                      class="inline-block w-2 h-2 rounded-full"
                    ></span>
                    {{ s.active ? "Yes" : "No" }}
                  </span>
                </td>
                <td class="py-2 pr-4">
                  <span class="inline-flex items-center gap-1">
                    <span
                      :class="s.exclude ? 'bg-green-500' : 'bg-gray-400'"
                      class="inline-block w-2 h-2 rounded-full"
                    ></span>
                    {{ s.exclude ? "Yes" : "No" }}
                  </span>
                </td>
                <td class="py-2 pr-4">
                  <button
                    class="text-indigo-600 hover:text-indigo-800"
                    @click="openEdit(s)"
                  >
                    Edit
                  </button>
                  <!-- Delete intentionally skipped as requested -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </AppLayout>
</template>