changes
This commit is contained in:
Simon Pocrnjič
@@ -1,12 +1,12 @@
|
||||
<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';
|
||||
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,
|
||||
@@ -17,16 +17,18 @@ const showEdit = ref(false);
|
||||
const editing = ref(null);
|
||||
|
||||
const createForm = useForm({
|
||||
name: '',
|
||||
description: '',
|
||||
name: "",
|
||||
description: "",
|
||||
active: true,
|
||||
exclude: false,
|
||||
});
|
||||
|
||||
const editForm = useForm({
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
name: "",
|
||||
description: "",
|
||||
active: true,
|
||||
exclude: false,
|
||||
});
|
||||
|
||||
const openCreate = () => {
|
||||
@@ -41,7 +43,7 @@ const closeCreate = () => {
|
||||
};
|
||||
|
||||
const store = () => {
|
||||
createForm.post(route('settings.segments.store'), {
|
||||
createForm.post(route("settings.segments.store"), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
});
|
||||
@@ -51,8 +53,9 @@ const openEdit = (segment) => {
|
||||
editing.value = segment;
|
||||
editForm.id = segment.id;
|
||||
editForm.name = segment.name;
|
||||
editForm.description = segment.description ?? '';
|
||||
editForm.description = segment.description ?? "";
|
||||
editForm.active = !!segment.active;
|
||||
editForm.exclude = !!segment.exclude;
|
||||
showEdit.value = true;
|
||||
};
|
||||
|
||||
@@ -63,7 +66,7 @@ const closeEdit = () => {
|
||||
};
|
||||
|
||||
const update = () => {
|
||||
editForm.put(route('settings.segments.update', { segment: editForm.id }), {
|
||||
editForm.put(route("settings.segments.update", { segment: editForm.id }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeEdit(),
|
||||
});
|
||||
@@ -87,21 +90,44 @@ const update = () => {
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
<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>
|
||||
@@ -114,21 +140,41 @@ const update = () => {
|
||||
<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" />
|
||||
<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" />
|
||||
<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>
|
||||
<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>
|
||||
@@ -142,6 +188,7 @@ const update = () => {
|
||||
<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>
|
||||
@@ -152,12 +199,29 @@ const update = () => {
|
||||
<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
|
||||
: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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user