tethys.backend/resources/js/Pages/Admin/Role/Index.vue

171 lines
6.0 KiB
Vue
Raw Permalink Normal View History

2023-03-03 15:54:28 +00:00
<script setup>
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
import { mdiAccountKey, mdiPlus, mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline } from '@mdi/js';
import { computed, ref } from 'vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionMain from '@/Components/SectionMain.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import CardBox from '@/Components/CardBox.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import NotificationBar from '@/Components/NotificationBar.vue';
import Pagination from '@/Components/Admin/Pagination.vue';
import Sort from '@/Components/Admin/Sort.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
import CardBoxModal from '@/Components/CardBoxModal.vue';
const isModalDangerActive = ref(false);
const deleteId = ref();
2023-03-03 15:54:28 +00:00
const props = defineProps({
roles: {
type: Object,
default: () => ({}),
},
filters: {
type: Object,
default: () => ({}),
},
can: {
type: Object,
default: () => ({}),
},
});
const flash = computed(() => {
// let test = usePage();
// console.log(test);
return usePage().props.flash;
});
const form = useForm({
search: props.filters.search,
});
const formDelete = useForm({});
const destroy = (id, e) => {
// console.log(id);
deleteId.value = id;
2023-03-03 15:54:28 +00:00
isModalDangerActive.value = true;
};
const onConfirm = async (id) => {
// let id = 6;
await formDelete.delete(stardust.route('settings.role.destroy', [id]));
deleteId.value = null;
2023-03-03 15:54:28 +00:00
};
const onCancel = (id) => {
// console.log('cancel');
deleteId.value = null;
2023-03-03 15:54:28 +00:00
};
</script>
<template>
<CardBoxModal
v-model="isModalDangerActive"
:delete-id="deleteId"
2023-03-03 15:54:28 +00:00
large-title="Please confirm"
button="danger"
button-label="Delete"
has-cancel
v-on:confirm="onConfirm"
v-on:cancel="onCancel"
>
<p>Lorem ipsum dolor sit amet <b>adipiscing elit</b></p>
<p>This is sample modal</p>
</CardBoxModal>
<LayoutAuthenticated>
<Head title="Roles" />
<SectionMain>
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Roles" main>
<BaseButton
v-if="can.create"
:route-name="stardust.route('settings.role.create')"
2023-03-03 15:54:28 +00:00
:icon="mdiPlus"
label="Add"
color="info"
rounded-full
small
/>
</SectionTitleLineWithButton>
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
{{ flash.message }}
</NotificationBar>
<CardBox class="mb-6" has-table>
<!-- <form @submit.prevent="form.get(stardust.route('role.index'))">
<div class="py-2 flex">
<div class="flex pl-4">
<input
type="search"
v-model="form.search"
class="rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
placeholder="Search"
/>
<BaseButton
label="Search"
type="submit"
color="info"
class="ml-4 inline-flex items-center px-4 py-2"
/>
</div>
</div>
</form> -->
</CardBox>
<CardBox class="mb-6" has-form-data>
2023-03-03 15:54:28 +00:00
<table>
<thead>
<tr>
<th>
<Sort label="Name" attribute="name" />
</th>
<th>
<Sort label="Description" attribute="description" />
</th>
<th v-if="can.edit || can.delete">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="role in roles" :key="role.id">
<td data-label="Name">
<Link
:href="stardust.route('settings.role.show', [role.id])"
2023-03-03 15:54:28 +00:00
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400"
>
{{ role.name }}
</Link>
</td>
<td data-label="Description">
{{ role.description }}
</td>
<td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
<BaseButtons type="justify-start lg:justify-end" no-wrap>
<BaseButton
v-if="can.edit"
:route-name="stardust.route('settings.role.edit', [role.id])"
2023-03-03 15:54:28 +00:00
color="info"
:icon="mdiSquareEditOutline"
small
/>
<!-- <BaseButton
2023-03-03 15:54:28 +00:00
v-if="can.delete"
color="danger"
:icon="mdiTrashCan"
small
@click="($event) => destroy(role.id, $event)"
/> -->
2023-03-03 15:54:28 +00:00
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>