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,
});

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

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;
  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 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 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">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">
                  <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>