barmar/tethys.backend
1
0
Fork 0
forked from geolba/tethys.backend
Code Pull Requests Activity
master
tethys.backend/resources/js/Pages/Admin/Role/Index.vue

180 lines
6.3 KiB
Vue
Raw Permalink Normal View History

initial commit
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);
- add EventEmmitter for directly binding Events to component - add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
2023-03-31 12:54:15 +00:00
const deleteId = ref();
initial commit
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({});
// function destroy(id) {
// const destroy = async (id) => {
// if (confirm('Are you sure you want to delete?')) {
// await formDelete.delete(stardust.route('role.destroy', [id]));
// }
// };
const destroy = (id, e) => {
- add EventEmmitter for directly binding Events to component - add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
2023-03-31 12:54:15 +00:00
// console.log(id);
deleteId.value = id;
initial commit
2023-03-03 15:54:28 +00:00
isModalDangerActive.value = true;
};
- add EventEmmitter for directly binding Events to component - add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
2023-03-31 12:54:15 +00:00
const onConfirm = async (id) => {
// let id = 6;
await formDelete.delete(stardust.route('role.destroy', [id]));
deleteId.value = null;
initial commit
2023-03-03 15:54:28 +00:00
};
- add EventEmmitter for directly binding Events to component - add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
2023-03-31 12:54:15 +00:00
const onCancel = (id) => {
// console.log('cancel');
deleteId.value = null;
initial commit
2023-03-03 15:54:28 +00:00
};
</script>
<template>
<CardBoxModal
v-model="isModalDangerActive"
- add EventEmmitter for directly binding Events to component - add NotificationToast for messages - add leaflet map component and zoom control component - change focus:ring to focus:ring-2 inside BaseButton - `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js - npm updates
2023-03-31 12:54:15 +00:00
:delete-id="deleteId"
initial commit
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('role.create')"
: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>
- npm updates, remove rxjs - add draw.component.vue - only load needed leaflet classes into map.component.vue an Submitter/Create.vue - rename js/store.Map.ts to js/Stores/map.service.ts -
2023-04-06 16:56:41 +00:00
<CardBox class="mb-6" has-form-data>
initial commit
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('role.show', [role.id])"
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('role.edit', [role.id])"
color="info"
:icon="mdiSquareEditOutline"
small
/>
<BaseButton
v-if="can.delete"
color="danger"
:icon="mdiTrashCan"
small
@click="($event) => destroy(role.id, $event)"
/>
<!-- <BaseButton v-if="can.delete" color="danger" :icon="mdiTrashCan" small @click="isModalDangerActive = true" /> -->
</BaseButtons>
</td>
</tr>
</tbody>
</table>
<!-- <div class="py-4">
<Pagination v-bind:data="roles.meta" />
</div> -->
</CardBox>
</SectionMain>
</LayoutAuthenticated>
</template>
Copy Permalink