forked from geolba/tethys.backend
initial commit
This commit is contained in:
Arno Kaimbacher
commit
4fc3bb0a01
202 changed files with 41729 additions and 0 deletions
72
resources/js/Pages/Admin/Permission/Create.vue
Normal file
72
resources/js/Pages/Admin/Permission/Create.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Create permission" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
:icon="mdiAccountKey"
|
||||
title="Add permission"
|
||||
main
|
||||
>
|
||||
<BaseButton
|
||||
:route-name="route('permission.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox
|
||||
form
|
||||
@submit.prevent="form.post(route('permission.store'))"
|
||||
>
|
||||
<FormField
|
||||
label="Name"
|
||||
:class="{ 'text-red-400': form.errors.name }"
|
||||
>
|
||||
<FormControl
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Enter Name"
|
||||
:error="form.errors.name"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
80
resources/js/Pages/Admin/Permission/Edit.vue
Normal file
80
resources/js/Pages/Admin/Permission/Edit.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
|
||||
const props = defineProps({
|
||||
permission: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
_method: 'put',
|
||||
name: props.permission.name,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Update permission" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
:icon="mdiAccountKey"
|
||||
title="Update permission"
|
||||
main
|
||||
>
|
||||
<BaseButton
|
||||
:route-name="route('permission.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox
|
||||
form
|
||||
@submit.prevent="form.post(route('permission.update', props.permission.id))"
|
||||
>
|
||||
<FormField
|
||||
label="Name"
|
||||
:class="{ 'text-red-400': form.errors.name }"
|
||||
>
|
||||
<FormControl
|
||||
v-model="form.name"
|
||||
type="text"
|
||||
placeholder="Enter Name"
|
||||
:error="form.errors.name"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
color="info"
|
||||
label="Submit"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
158
resources/js/Pages/Admin/Permission/Index.vue
Normal file
158
resources/js/Pages/Admin/Permission/Index.vue
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiPlus,
|
||||
mdiSquareEditOutline,
|
||||
mdiTrashCan,
|
||||
mdiAlertBoxOutline,
|
||||
} from "@mdi/js"
|
||||
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"
|
||||
|
||||
const props = defineProps({
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
search: props.filters.search,
|
||||
})
|
||||
|
||||
const formDelete = useForm({})
|
||||
|
||||
function destroy(id) {
|
||||
if (confirm("Are you sure you want to delete?")) {
|
||||
formDelete.delete(route("permission.destroy", id))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Permissions" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
:icon="mdiAccountKey"
|
||||
title="Permissions"
|
||||
main
|
||||
>
|
||||
<BaseButton
|
||||
v-if="can.delete"
|
||||
:route-name="route('permission.create')"
|
||||
:icon="mdiPlus"
|
||||
label="Add"
|
||||
color="info"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<NotificationBar
|
||||
v-if="$page.props.flash.message"
|
||||
color="success"
|
||||
:icon="mdiAlertBoxOutline"
|
||||
>
|
||||
{{ $page.props.flash.message }}
|
||||
</NotificationBar>
|
||||
<CardBox class="mb-6" has-table>
|
||||
<form @submit.prevent="form.get(route('permission.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-table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Sort label="Name" attribute="name" />
|
||||
</th>
|
||||
<th v-if="can.edit || can.delete">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="permission in permissions.data" :key="permission.id">
|
||||
<td data-label="Name">
|
||||
<Link
|
||||
:href="route('permission.show', permission.id)"
|
||||
class="
|
||||
no-underline
|
||||
hover:underline
|
||||
text-cyan-600
|
||||
dark:text-cyan-400
|
||||
"
|
||||
>
|
||||
{{ permission.name }}
|
||||
</Link>
|
||||
</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="route('permission.edit', permission.id)"
|
||||
color="info"
|
||||
:icon="mdiSquareEditOutline"
|
||||
small
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="can.delete"
|
||||
color="danger"
|
||||
:icon="mdiTrashCan"
|
||||
small
|
||||
@click="destroy(permission.id)"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="py-4">
|
||||
<Pagination :data="permissions" />
|
||||
</div>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
81
resources/js/Pages/Admin/Permission/Show.vue
Normal file
81
resources/js/Pages/Admin/Permission/Show.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import BaseButton from "@/Components/BaseButton.vue"
|
||||
|
||||
const props = defineProps({
|
||||
permission: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<Head title="View permission" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton
|
||||
:icon="mdiAccountKey"
|
||||
title="View permission"
|
||||
main
|
||||
>
|
||||
<BaseButton
|
||||
:route-name="route('permission.index')"
|
||||
:icon="mdiArrowLeftBoldOutline"
|
||||
label="Back"
|
||||
color="white"
|
||||
rounded-full
|
||||
small
|
||||
/>
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox class="mb-6">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td
|
||||
class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
"
|
||||
>
|
||||
Name
|
||||
</td>
|
||||
<td data-label="Name">
|
||||
{{ permission.name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td
|
||||
class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
"
|
||||
>
|
||||
Created
|
||||
</td>
|
||||
<td data-label="Created">
|
||||
{{ new Date(permission.created_at).toLocaleString() }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
94
resources/js/Pages/Admin/Role/Create.vue
Normal file
94
resources/js/Pages/Admin/Role/Create.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAccount, mdiNoteText, mdiFormTextarea
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
name: '',
|
||||
display_name: '',
|
||||
description: '',
|
||||
permissions: []
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
await form.post(stardust.route('role.store'), form);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Add role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.post(stardust.route('role.store'))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
|
||||
<FormField label="Name" help="Required. Role name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Display Name" help="Optional. Display name" :class="{ 'text-red-400': form.errors.display_name }">
|
||||
<FormControl v-model="form.display_name" name="display_name" :error="form.errors.display_name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.display_name">
|
||||
{{ form.errors.display_name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Description" help="Optional. Description of new role" :class="{ 'text-red-400': form.errors.description }">
|
||||
<FormControl v-model="form.description" v-bind:icon="mdiFormTextarea" name="display_name" :type="'textarea'" :error="form.errors.description">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.permissions && Array.isArray(form.errors.permissions)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ form.errors.permissions.join(', ') }}
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
91
resources/js/Pages/Admin/Role/Edit.vue
Normal file
91
resources/js/Pages/Admin/Role/Edit.vue
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiFormTextarea
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
_method: 'put',
|
||||
name: props.role.name,
|
||||
description: props.role.description,
|
||||
permissions: props.roleHasPermissions
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
// await Inertia.post(stardust.route('user.store'), form);
|
||||
await form.put(stardust.route('role.update', [props.role.id]), form);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Update role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('role.update', [props.role.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
|
||||
<FormField label="Name" :class="{ 'text-red-400': form.errors.name }">
|
||||
<FormControl v-model="form.name" type="text" placeholder="Enter Name" required :error="form.errors.name">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.name">
|
||||
{{ form.errors.name }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Description" help="Optional. Description of new role" :class="{ 'text-red-400': form.errors.description }">
|
||||
<FormControl v-model="form.description" v-bind:icon="mdiFormTextarea" name="display_name" :type="'textarea'" :error="form.errors.description">
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.description">
|
||||
{{ form.errors.description }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Permissions" wrap-body>
|
||||
<FormCheckRadioGroup v-model="form.permissions" name="permissions" is-column :options="props.permissions" />
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
173
resources/js/Pages/Admin/Role/Index.vue
Normal file
173
resources/js/Pages/Admin/Role/Index.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
<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 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) => {
|
||||
console.log(id);
|
||||
isModalDangerActive.value = true;
|
||||
};
|
||||
|
||||
const onConfirm = async () => {
|
||||
await ormDelete.delete(stardust.route('role.destroy', [id]));
|
||||
};
|
||||
|
||||
const onCancel = () => {
|
||||
console.log('cancel');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBoxModal
|
||||
v-model="isModalDangerActive"
|
||||
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>
|
||||
<CardBox class="mb-6" has-table>
|
||||
<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>
|
||||
79
resources/js/Pages/Admin/Role/Show.vue
Normal file
79
resources/js/Pages/Admin/Role/Show.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import BaseButton from "@/Components/BaseButton.vue"
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
role: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
permissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roleHasPermissions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="View role" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="View role" main>
|
||||
<BaseButton :route-name="stardust.route('role.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox class="mb-6">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">
|
||||
Name
|
||||
</td>
|
||||
<td data-label="Name">
|
||||
{{ role.name }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-4 pl-8 text-slate-500 dark:text-slate-400 hidden lg:block">
|
||||
Name
|
||||
</td>
|
||||
<td data-label="Description">
|
||||
{{ role.description }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
">
|
||||
Created
|
||||
</td>
|
||||
<td data-label="Created">
|
||||
<!-- {{ new Date(role.created_at).toLocaleString() }} -->
|
||||
{{ role.created_at }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
52
resources/js/Pages/Admin/Settings.vue
Normal file
52
resources/js/Pages/Admin/Settings.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
|
||||
import {
|
||||
mdiContrastCircle,
|
||||
mdiInformation,
|
||||
mdiCheckCircle,
|
||||
mdiAlert,
|
||||
mdiAlertCircle,
|
||||
mdiOpenInNew,
|
||||
mdiClose,
|
||||
mdiReload,
|
||||
mdiTrendingUp,
|
||||
} from '@mdi/js';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
// import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
// import NotificationBar from "@/components/NotificationBar.vue";
|
||||
// import BaseDivider from "@/components/BaseDivider.vue";
|
||||
// import CardBoxModal from "@/components/CardBoxModal.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
// import FormField from "@/components/FormField.vue";
|
||||
// import FormCheckRadioGroup from "@/components/FormCheckRadioGroup.vue";
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue";
|
||||
// import SectionTitleLineWithButton from "@/components/SectionTitleLineWithButton.vue";
|
||||
// import CardBoxComponentEmpty from "@/components/CardBoxComponentEmpty.vue";
|
||||
// import CardBoxComponentTitle from "@/components/CardBoxComponentTitle.vue";
|
||||
// import PillTag from "@/components/PillTag.vue";
|
||||
|
||||
// const modalOneActive = ref(false);
|
||||
// const modalTwoActive = ref(false);
|
||||
// const modalThreeActive = ref(false);
|
||||
// const notificationSettingsModel = ref([]);
|
||||
|
||||
const styleService = StyleService();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionTitle first>Dark mode</SectionTitle>
|
||||
|
||||
<SectionMain>
|
||||
<CardBox class="md:w-7/12 lg:w-5/12 xl:w-4/12 shadow-2xl md:mx-auto">
|
||||
<div class="text-center py-24 lg:py-12 text-gray-500 dark:text-slate-400">
|
||||
<BaseButton label="Toggle" color="contrast" @click="styleService.setDarkMode()" />
|
||||
</div>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
151
resources/js/Pages/Admin/User/AccountInfo.vue
Normal file
151
resources/js/Pages/Admin/User/AccountInfo.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<script setup>
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { Head, Link, useForm, router } from '@inertiajs/vue3';
|
||||
import {
|
||||
mdiAccount,
|
||||
mdiAccountCircle,
|
||||
mdiLock,
|
||||
mdiMail,
|
||||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import NotificationBar from '@/Components/NotificationBar.vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
|
||||
const props = defineProps({
|
||||
// user will be returned from controller action
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const profileForm = useForm({
|
||||
login: props.user.login,
|
||||
email: props.user.email,
|
||||
});
|
||||
const profileSubmit = async () => {
|
||||
await router.post(stardust.route('admin.account.info.store', [props.user.id]), profileForm);
|
||||
};
|
||||
|
||||
const passwordForm = useForm({
|
||||
old_password: null,
|
||||
new_password: null,
|
||||
confirm_password: null,
|
||||
});
|
||||
const passwordSubmit = async () => {
|
||||
await router.post(stardust.route('admin.account.info.store'), passwordForm, {
|
||||
preserveScroll: true,
|
||||
onSuccess: (resp) => {
|
||||
console.log(resp);
|
||||
passwordForm.reset();
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
|
||||
<BaseButton :route-name="stardust.route('dashboard')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ $page.props.flash.message }}
|
||||
</NotificationBar>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- password form -->
|
||||
<!-- <CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileForm.post(route('admin.account.info.store'))"> -->
|
||||
<CardBox title="Edit Profile" :icon="mdiAccountCircle" form @submit.prevent="profileSubmit()">
|
||||
<FormField label="Login" help="Required. Your login name" :class="{ 'text-red-400': errors.login }">
|
||||
<FormControl v-model="profileForm.login" v-bind:icon="mdiAccount" name="login" required :error="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField label="Email" help="Required. Your e-mail" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required
|
||||
:error="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email">
|
||||
{{ errors.email }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton color="info" type="submit" label="Submit" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
||||
<!-- password form -->
|
||||
<!-- <CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordForm.post(route('admin.account.password.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => passwordForm.reset(),
|
||||
})
|
||||
"> -->
|
||||
<CardBox title="Change Password" :icon="mdiLock" form @submit.prevent="passwordSubmit()">
|
||||
<FormField label="Current password" help="Required. Your current password"
|
||||
:class="{ 'text-red-400': passwordForm.errors.old_password }">
|
||||
<FormControl v-model="passwordForm.old_password" :icon="mdiAsterisk" name="old_password" type="password"
|
||||
required :error="passwordForm.errors.old_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.old_password">
|
||||
{{ passwordForm.errors.old_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="New password" help="Required. New password" :class="{ 'text-red-400': passwordForm.errors.new_password }">
|
||||
<FormControl v-model="passwordForm.new_password" :icon="mdiFormTextboxPassword" name="new_password"
|
||||
type="password" required :error="passwordForm.errors.new_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.new_password">
|
||||
{{ passwordForm.errors.new_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Confirm password" help="Required. New password one more time"
|
||||
:class="{ 'text-red-400': passwordForm.errors.confirm_password }">
|
||||
<FormControl v-model="passwordForm.confirm_password" :icon="mdiFormTextboxPassword" name="confirm_password"
|
||||
type="password" required :error="passwordForm.errors.confirm_password">
|
||||
<div class="text-red-400 text-sm" v-if="passwordForm.errors.confirm_password">
|
||||
{{ passwordForm.errors.confirm_password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
||||
</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
110
resources/js/Pages/Admin/User/Create.vue
Normal file
110
resources/js/Pages/Admin/User/Create.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
|
||||
const props = defineProps({
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
login: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
roles: [],
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
await router.post(stardust.route('user.store'), form);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Add user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- @submit.prevent="form.post(stardust.route('user.store'))" -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
<FormField label="Login" :class="{ 'text-red-400': errors.name }">
|
||||
<FormControl v-model="form.login" type="text" placeholder="Enter Login" :errors="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login && Array.isArray(errors.login)">
|
||||
<!-- {{ errors.login }} -->
|
||||
{{ errors.login.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Email" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="form.email" type="text" placeholder="Enter Email" :errors="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email && Array.isArray(errors.email)">
|
||||
<!-- {{ errors.email }} -->
|
||||
{{ errors.email.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password" :class="{ 'text-red-400': errors.password }">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password"
|
||||
:errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password && Array.isArray(errors.password)">
|
||||
<!-- {{ errors.password }} -->
|
||||
{{ errors.password.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
|
||||
<FormControl v-model="form.password_confirmation" type="password"
|
||||
placeholder="Enter Password Confirmation" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm"
|
||||
v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.password_confirmation.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Roles" wrap-body :class="{ 'text-red-400': errors.roles }">
|
||||
<FormCheckRadioGroup v-model="form.roles" name="roles" is-column :options="props.roles" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="errors.roles && Array.isArray(errors.roles)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.roles.join(', ') }}
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
118
resources/js/Pages/Admin/User/Edit.vue
Normal file
118
resources/js/Pages/Admin/User/Edit.vue
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import FormField from '@/Components/FormField.vue'
|
||||
import FormControl from '@/Components/FormControl.vue'
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue'
|
||||
import BaseDivider from '@/Components/BaseDivider.vue'
|
||||
import BaseButton from '@/Components/BaseButton.vue'
|
||||
import BaseButtons from '@/Components/BaseButtons.vue'
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
userHasRoles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
_method: 'put',
|
||||
login: props.user.login,
|
||||
email: props.user.email,
|
||||
password: '',
|
||||
password_confirmation: '',
|
||||
roles: props.userHasRoles, // fill actual user roles from db
|
||||
})
|
||||
|
||||
const submit = async () => {
|
||||
// await Inertia.post(stardust.route('user.store'), form);
|
||||
await router.put(stardust.route('user.update', [props.user.id]), form);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Update user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Update user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <CardBox form @submit.prevent="form.put(stardust.route('user.update', [props.user.id]))"> -->
|
||||
<CardBox form @submit.prevent="submit()">
|
||||
|
||||
<FormField label="Enter Login" :class="{ 'text-red-400': errors.name }">
|
||||
<FormControl v-model="form.login" type="text" placeholder="Name" :errors="errors.login">
|
||||
<div class="text-red-400 text-sm" v-if="errors.login">
|
||||
{{ errors.login }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Enter Email" :class="{ 'text-red-400': errors.email }">
|
||||
<FormControl v-model="form.email" type="text" placeholder="Email" :errors="errors.email">
|
||||
<div class="text-red-400 text-sm" v-if="errors.email && Array.isArray(errors.email)">
|
||||
{{ errors.email.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password" :class="{ 'text-red-400': errors.password }">
|
||||
<FormControl v-model="form.password" type="password" placeholder="Enter Password" :errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password">
|
||||
{{ errors.password }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
|
||||
<FormControl v-model="form.password_confirmation" type="password" placeholder="Enter Password Confirmation"
|
||||
:errors="errors.password">
|
||||
<div class="text-red-400 text-sm" v-if="errors.password_confirmation && Array.isArray(errors.password_confirmation)">
|
||||
{{ errors.password_confirmation.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="Roles" wrap-body :class="{ 'text-red-400': errors.roles }">
|
||||
<FormCheckRadioGroup v-model="form.roles" name="roles" is-column :options="props.roles" />
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="errors.roles && Array.isArray(errors.roles)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.roles.join(', ') }}
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" :class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing" />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
163
resources/js/Pages/Admin/User/Index.vue
Normal file
163
resources/js/Pages/Admin/User/Index.vue
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<script setup>
|
||||
// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiPlus,
|
||||
mdiSquareEditOutline,
|
||||
mdiTrashCan,
|
||||
mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import { watch, computed } 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 { Vue } from 'vue-facing-decorator';
|
||||
|
||||
const props = defineProps({
|
||||
users: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
can: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
// user: {
|
||||
// type: Object,
|
||||
// default: () => ({}),
|
||||
// }
|
||||
});
|
||||
|
||||
// const search = computed(() => {
|
||||
// return props.filters.search;
|
||||
// });
|
||||
|
||||
const flash = computed(() => {
|
||||
// let test = usePage();
|
||||
// console.log(test);
|
||||
return usePage().props.flash;
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
search: props.filters.search,
|
||||
});
|
||||
|
||||
const formDelete = useForm({});
|
||||
|
||||
// async function destroy(id) {
|
||||
const destroy = async (id) => {
|
||||
if (confirm('Are you sure you want to delete?')) {
|
||||
await formDelete.delete(stardust.route('user.destroy', [id]));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Users" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Tethys Users" main>
|
||||
<BaseButton v-if="can.create" :route-name="stardust.route('user.create')" :icon="mdiPlus" label="Add"
|
||||
color="info" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <label>{{ form.search }}</label> -->
|
||||
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ flash.message }}
|
||||
</NotificationBar>
|
||||
<!-- <NotificationBar color="success" :icon="mdiAlertBoxOutline">{{ users.meta }}</NotificationBar> -->
|
||||
<CardBox class="mb-6" has-table>
|
||||
<form @submit.prevent="form.get(stardust.route('user.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>
|
||||
<!-- table -->
|
||||
<CardBox class="mb-6" has-table>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<Sort label="Login" attribute="login" :search="form.search" />
|
||||
</th>
|
||||
<th>
|
||||
<Sort label="Email" attribute="email" :search="form.search" />
|
||||
</th>
|
||||
<th v-if="can.edit || can.delete">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr v-for="user in users.data" :key="user.id">
|
||||
<td data-label="Login">
|
||||
<Link v-bind:href="stardust.route('user.show', [user.id])"
|
||||
class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
|
||||
{{ user.login }}
|
||||
</Link>
|
||||
<!-- {{ user.id }} -->
|
||||
</td>
|
||||
<td data-label="Email">
|
||||
{{ user.email }}
|
||||
</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('user.edit', [user.id])"
|
||||
color="info"
|
||||
:icon="mdiSquareEditOutline"
|
||||
small
|
||||
/>
|
||||
<BaseButton
|
||||
v-if="can.delete"
|
||||
color="danger"
|
||||
:icon="mdiTrashCan"
|
||||
small
|
||||
@click="destroy(user.id)"
|
||||
/>
|
||||
</BaseButtons>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="py-4">
|
||||
<Pagination v-bind:data="users.meta" />
|
||||
<!-- <ul>
|
||||
<li>
|
||||
<a href="{{ users.page == 1 ? '#' : '?page=' + (users.page - 1) }}">Previous</a>
|
||||
</li>
|
||||
@each(page in ???)
|
||||
<li>
|
||||
<a href="?page={{ page }}">{{ page }}</a>
|
||||
</li>
|
||||
@endeach
|
||||
<li>
|
||||
<a href="{{ users.lastPage == users.page ? '#' : '?page=' + (users.page + 1) }}">Next</a>
|
||||
</li>
|
||||
</ul> -->
|
||||
</div>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
92
resources/js/Pages/Admin/User/Show.vue
Normal file
92
resources/js/Pages/Admin/User/Show.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline,
|
||||
} from "@mdi/js"
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue"
|
||||
import SectionMain from "@/Components/SectionMain.vue"
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue"
|
||||
import CardBox from "@/Components/CardBox.vue"
|
||||
import BaseButton from "@/Components/BaseButton.vue"
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
userHasRoles: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated :user="user">
|
||||
|
||||
<Head title="View user" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="View user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back" color="white"
|
||||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<CardBox class="mb-6">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
">
|
||||
Login
|
||||
</td>
|
||||
<td data-label="Login">
|
||||
{{ user.login }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
">
|
||||
Email
|
||||
</td>
|
||||
<td data-label="Email">
|
||||
{{ user.email }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="
|
||||
p-4
|
||||
pl-8
|
||||
text-slate-500
|
||||
dark:text-slate-400
|
||||
hidden
|
||||
lg:block
|
||||
">
|
||||
Created
|
||||
</td>
|
||||
<td data-label="Created">
|
||||
{{ new Date(user.created_at).toLocaleString() }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
87
resources/js/Pages/App.vue
Normal file
87
resources/js/Pages/App.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div>
|
||||
<Link href="/app/login">Login</Link>
|
||||
<h1 class="text-red-500">Welcome, {{ testing }}</h1>
|
||||
<n-button>Testing</n-button>
|
||||
<n-input v-bind:value="testing"></n-input>
|
||||
|
||||
<div class="features">
|
||||
<ul>
|
||||
<li v-for="user in users">
|
||||
<span>{{ user.login }}</span>
|
||||
<span>{{ user.email }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <script>
|
||||
import { Link } from '@inertiajs/inertia-vue3';
|
||||
import DefaultLayout from '@/Layouts/Default.vue';
|
||||
import { NInput, NButton } from 'naive-ui';
|
||||
|
||||
export default {
|
||||
layout: DefaultLayout,
|
||||
props: {
|
||||
testing: String,
|
||||
users: Array,
|
||||
},
|
||||
|
||||
components: {
|
||||
Link,
|
||||
NInput,
|
||||
NButton,
|
||||
},
|
||||
};
|
||||
</script> -->
|
||||
|
||||
<!-- <script lang="js">
|
||||
import { Link } from '@inertiajs/vue3'
|
||||
import DefaultLayout from '../Layouts/Default.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
testing: String,
|
||||
},
|
||||
|
||||
components: {
|
||||
Link,
|
||||
DefaultLayout
|
||||
}
|
||||
}
|
||||
</script> -->
|
||||
|
||||
<script lang ="ts">
|
||||
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||||
import IUser from "App/Models/User";
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
import DefaultLayout from '@/Layouts/Default.vue';
|
||||
import { NInput, NButton } from 'naive-ui';
|
||||
|
||||
@Component({
|
||||
options: {
|
||||
layout: DefaultLayout,
|
||||
},
|
||||
name: 'AppComponent',
|
||||
components: {
|
||||
Link,
|
||||
NInput,
|
||||
NButton,
|
||||
},
|
||||
})
|
||||
export default class AppComponent extends Vue {
|
||||
// Component Property
|
||||
@Prop({
|
||||
type: String,
|
||||
default: () => (""),
|
||||
})
|
||||
testing: string;
|
||||
|
||||
@Prop({
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
})
|
||||
users: Array<IUser>;
|
||||
}
|
||||
</script>
|
||||
145
resources/js/Pages/Auth/Login.vue
Normal file
145
resources/js/Pages/Auth/Login.vue
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<!-- <template>
|
||||
<div>
|
||||
<Link href="/app">Home</Link>
|
||||
<br />
|
||||
<h1>Login</h1>
|
||||
<Head>
|
||||
<title>About - My app</title>
|
||||
<meta
|
||||
head-key="description"
|
||||
name="description"
|
||||
content="This is a page specific description"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AuthLayout from '@/Layouts/Auth.vue';
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
export default {
|
||||
layout: AuthLayout,
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
// import { Head, Link } from '@inertiajs/vue3';
|
||||
import { Head, Link } from '@inertiajs/inertia-vue3'
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
</script> -->
|
||||
|
||||
<template>
|
||||
<LayoutGuest>
|
||||
|
||||
<Head title="Login" />
|
||||
|
||||
<SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
|
||||
<CardBox :class="cardClass" form @submit.prevent="submit">
|
||||
<FormValidationErrors v-bind:errors="errors" />
|
||||
|
||||
<NotificationBarInCard v-if="status" color="info">
|
||||
{{ status }}
|
||||
</NotificationBarInCard>
|
||||
|
||||
<FormField label="Email" label-for="email" help="Please enter your email">
|
||||
<FormControl v-model="form.email" :icon="mdiAccount" id="email" autocomplete="email" type="email"
|
||||
required />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Password" label-for="password" help="Please enter your password">
|
||||
<FormControl v-model="form.password" :icon="mdiAsterisk" type="password" id="password"
|
||||
autocomplete="current-password" required />
|
||||
</FormField>
|
||||
|
||||
<FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
|
||||
|
||||
<!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
|
||||
{{ flash.message }}
|
||||
class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
|
||||
</NotificationBar> -->
|
||||
<div v-if="flash && flash.message" class="flex flex-col mt-6 animate-fade-in">
|
||||
<div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
|
||||
<p class="font-bold">Be Warned</p>
|
||||
<p>{{ flash.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<!-- buttons -->
|
||||
<BaseLevel>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Login" :class="{ 'opacity-25': form.processing }"
|
||||
v-bind:disabled="form.processing" />
|
||||
<!-- <BaseButton v-if="canResetPassword" :route-name="route('password.request')" color="info" outline
|
||||
label="Remind" /> -->
|
||||
</BaseButtons>
|
||||
<Link :href="stardust.route('app.register.show')"> Register </Link>
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</SectionFullScreen>
|
||||
</LayoutGuest>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useForm, Head, Link } from '@inertiajs/vue3';
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { mdiAccount, mdiAsterisk } from '@mdi/js';
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
import SectionFullScreen from '@/Components/SectionFullScreen.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import FormCheckRadioGroup from '@/Components/FormCheckRadioGroup.vue';
|
||||
import FormField from '@/Components/FormField.vue';
|
||||
import FormControl from '@/Components/FormControl.vue';
|
||||
import BaseDivider from '@/Components/BaseDivider.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import BaseButtons from '@/Components/BaseButtons.vue';
|
||||
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
|
||||
import NotificationBarInCard from '@/Components/NotificationBarInCard.vue';
|
||||
import BaseLevel from '@/Components/BaseLevel.vue';
|
||||
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
import NotificationBar from '@/Components/NotificationBar.vue';
|
||||
import { computed } from 'vue';
|
||||
import { usePage } from '@inertiajs/vue3';
|
||||
|
||||
// interface IErrorMessage {
|
||||
// [key: string]: Array<string>;
|
||||
// }
|
||||
const flash = computed(() => {
|
||||
return usePage().props.flash;
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
canResetPassword: Boolean,
|
||||
status: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: [],
|
||||
});
|
||||
|
||||
const submit = async() => {
|
||||
await form
|
||||
.transform((data) => ({
|
||||
...data,
|
||||
remember: form.remember && form.remember.length ? 'on' : '',
|
||||
}))
|
||||
.post(stardust.route('login.store'), {
|
||||
// onFinish: () => {
|
||||
// form.reset('password');
|
||||
// }
|
||||
});
|
||||
};
|
||||
</script>
|
||||
59
resources/js/Pages/Auth/Register.vue
Normal file
59
resources/js/Pages/Auth/Register.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<br /> -->
|
||||
<h1>Register</h1>
|
||||
<form @submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" />
|
||||
<n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" />
|
||||
|
||||
<n-button attr-type="submit"> Register </n-button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import AuthLayout from '../../Layouts/Auth.vue';
|
||||
import AuthLayout from '@/Layouts/Auth.vue';
|
||||
import { reactive } from 'vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { Inertia } from '@inertiajs/inertia';
|
||||
import { NButton, NInput } from 'naive-ui';
|
||||
// import { useForm } from '@inertiajs/inertia-vue3'
|
||||
import FormInput from '@/Components/FormInput.vue'
|
||||
|
||||
export default {
|
||||
layout: AuthLayout,
|
||||
|
||||
components: {
|
||||
NButton,
|
||||
// NInput,
|
||||
FormInput
|
||||
},
|
||||
|
||||
setup() {
|
||||
// const form = useForm({
|
||||
// email: '',
|
||||
// password: ''
|
||||
// });
|
||||
const form = reactive({
|
||||
email: null,
|
||||
password: null,
|
||||
});
|
||||
|
||||
const submit = async () => {
|
||||
await Inertia.post('/app/register', form);
|
||||
};
|
||||
|
||||
return { form, submit };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- <script setup>
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
// import DefaultLayout from '../../Layouts/Default.vue';
|
||||
</script> -->
|
||||
123
resources/js/Pages/Dashboard.vue
Normal file
123
resources/js/Pages/Dashboard.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<script setup>
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
mdiCartOutline,
|
||||
mdiDatabaseOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiFinance,
|
||||
mdiMonitorCellphone,
|
||||
mdiReload,
|
||||
mdiGithub,
|
||||
mdiChartPie,
|
||||
} from '@mdi/js';
|
||||
import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
|
||||
import * as chartConfig from '@/Components/Charts/chart.config.js';
|
||||
import LineChart from '@/Components/Charts/LineChart.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBoxWidget from '@/Components/CardBoxWidget.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
import TableSampleClients from '@/Components/TableSampleClients.vue';
|
||||
import NotificationBar from '@/Components/NotificationBar.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import CardBoxTransaction from '@/Components/CardBoxTransaction.vue';
|
||||
import CardBoxClient from '@/Components/CardBoxClient.vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import SectionBannerStarOnGitHub from '@/Components/SectionBannerStarOnGitea.vue';
|
||||
const chartData = ref(null);
|
||||
const fillChartData = () => {
|
||||
chartData.value = chartConfig.sampleChartData();
|
||||
};
|
||||
onMounted(() => {
|
||||
fillChartData();
|
||||
});
|
||||
const mainService = MainService();
|
||||
/* Fetch sample data */
|
||||
mainService.fetch('clients');
|
||||
mainService.fetch('history');
|
||||
|
||||
mainService.fetchApi('authors');
|
||||
mainService.fetchApi('datasets');
|
||||
|
||||
const clientBarItems = computed(() => mainService.clients.slice(0, 4));
|
||||
const transactionBarItems = computed(() => mainService.history);
|
||||
|
||||
const authorBarItems = computed(() => mainService.authors.slice(0, 4));
|
||||
const authors = computed(() => mainService.authors);
|
||||
const datasets = computed(() => mainService.datasets);
|
||||
// const props = defineProps({
|
||||
// user: {
|
||||
// type: Object,
|
||||
// default: () => ({}),
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
|
||||
<Head title="Dashboard" />
|
||||
|
||||
<!-- <section class="p-6" v-bind:class="containerMaxW"> -->
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Overview" main>
|
||||
<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
||||
label="Star on Gitea" color="contrast" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6">
|
||||
<CardBoxWidget trend="12%" trend-type="up" color="text-emerald-500" :icon="mdiAccountMultiple"
|
||||
:number="authors.length" label="Authors" />
|
||||
<CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiDatabaseOutline" :number="datasets.length"
|
||||
label="Publications" />
|
||||
<!-- <CardBoxWidget trend="193" trend-type="info" color="text-blue-500" :icon="mdiCartOutline" :number="datasets.length"
|
||||
prefix="$" label="Publications" /> -->
|
||||
<CardBoxWidget trend="Overflow" trend-type="alert" color="text-red-500" :icon="mdiChartTimelineVariant"
|
||||
:number="256" suffix="%" label="Performance" />
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxClient
|
||||
v-for="client in authorBarItems"
|
||||
:key="client.id"
|
||||
:name="client.name"
|
||||
:email="client.email"
|
||||
:date="client.created_at"
|
||||
:text="client.datasetCount"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between">
|
||||
<CardBoxTransaction v-for="(transaction, index) in transactionBarItems" :key="index"
|
||||
:amount="transaction.amount" :date="transaction.date" :business="transaction.business"
|
||||
:type="transaction.type" :name="transaction.name" :account="transaction.account" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SectionBannerStarOnGitHub />
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" />
|
||||
<CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"
|
||||
@header-icon-click="fillChartData">
|
||||
<div v-if="chartData">
|
||||
<line-chart :data="chartData" class="h-96" />
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
|
||||
|
||||
<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone">
|
||||
<b>Responsive table.</b> Collapses on mobile
|
||||
</NotificationBar> -->
|
||||
|
||||
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<TableSampleClients />
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
<!-- </section> -->
|
||||
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
79
resources/js/Pages/Error.vue
Normal file
79
resources/js/Pages/Error.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!-- https://github.com/inertiajs/inertia-laravel/issues/56 -->
|
||||
<script setup>
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import { computed } from 'vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import BaseButton from '@/Components/BaseButton.vue';
|
||||
import { mdiChartTimelineVariant, mdiGithub } from '@mdi/js';
|
||||
|
||||
const props = defineProps({
|
||||
status: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const title = computed(() => {
|
||||
return {
|
||||
503: '503: Service Unavailable',
|
||||
500: '500: Server Error',
|
||||
404: '404: Page Not Found',
|
||||
403: '404: Forbidden',
|
||||
401: '401: Unauthorized',
|
||||
}[props.status];
|
||||
});
|
||||
|
||||
const description = computed(() => {
|
||||
return {
|
||||
503: 'Sorry, we are doing some maintenance. Please check back soon.',
|
||||
500: 'Whoops, something went wrong on our servers.',
|
||||
404: 'Sorry, the page you are looking for could not be found.',
|
||||
403: 'Sorry, you are forbidden from accessing this page.',
|
||||
401: 'Sorry, you are forbidden from accessing this page.',
|
||||
}[props.status];
|
||||
});
|
||||
// export default {
|
||||
// // layout: LayoutAuthenticated,
|
||||
// props: {
|
||||
// status: Number,
|
||||
// },
|
||||
// computed: {
|
||||
// title() {
|
||||
// return {
|
||||
// 503: '503: Service Unavailable',
|
||||
// 500: '500: Server Error',
|
||||
// 404: '404: Page Not Found',
|
||||
// 403: '404: Forbidden',
|
||||
// 401: '404: Forbidden',
|
||||
// }[this.status];
|
||||
// },
|
||||
// description() {
|
||||
// return {
|
||||
// 503: 'Sorry, we are doing some maintenance. Please check back soon.',
|
||||
// 500: 'Whoops, something went wrong on our servers.',
|
||||
// 404: 'Sorry, the page you are looking for could not be found.',
|
||||
// 403: 'Sorry, you are forbidden from accessing this page.',
|
||||
// 401: 'Sorry, you are forbidden from accessing this page.',
|
||||
// }[this.status];
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton v-bind:icon="mdiChartTimelineVariant" title="Error" main>
|
||||
<BaseButton href="https://gitea.geologie.ac.at/geolba/tethys" target="_blank" :icon="mdiGithub"
|
||||
label="Star on Gitea" color="contrast" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<h1>{{ title }}</h1>
|
||||
<div>{{ props.message }}</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
101
resources/js/Pages/ProfileView.vue
Normal file
101
resources/js/Pages/ProfileView.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<script setup>
|
||||
import { reactive } from "vue";
|
||||
import { MainService } from "@/Stores/main";
|
||||
import {
|
||||
mdiAccount,
|
||||
mdiMail,
|
||||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiGithub,
|
||||
} from "@mdi/js";
|
||||
import SectionMain from "@/Components/SectionMain.vue";
|
||||
import CardBox from "@/Components/CardBox.vue";
|
||||
import BaseDivider from "@/Components/BaseDivider.vue";
|
||||
import FormField from "@/Components/FormField.vue";
|
||||
import FormControl from "@/Components/FormControl.vue";
|
||||
import FormFilePicker from "@/Components/FormFilePicker.vue";
|
||||
import BaseButton from "@/Components/BaseButton.vue";
|
||||
import BaseButtons from "@/Components/BaseButtons.vue";
|
||||
// import UserCard from "@/Components/UserCard.vue";
|
||||
import LayoutAuthenticated from "@/Layouts/LayoutAuthenticated.vue";
|
||||
import SectionTitleLineWithButton from "@/Components/SectionTitleLineWithButton.vue";
|
||||
const mainService = MainService();
|
||||
const profileForm = reactive({
|
||||
name: mainService.userName,
|
||||
email: mainService.userEmail,
|
||||
});
|
||||
const passwordForm = reactive({
|
||||
password_current: "",
|
||||
password: "",
|
||||
password_confirmation: "",
|
||||
});
|
||||
const submitProfile = () => {
|
||||
mainService.setUser(profileForm);
|
||||
};
|
||||
const submitPass = () => {
|
||||
//
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<LayoutAuthenticated>
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccount" title="Profile" main>
|
||||
<BaseButton href="https://github.com/justboil/admin-one-vue-tailwind" target="_blank" :icon="mdiGithub"
|
||||
label="Star on GitHub" color="contrast" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<UserCard class="mb-6" />
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<CardBox is-form @submit.prevent="submitProfile">
|
||||
<FormField label="Avatar" help="Max 500kb">
|
||||
<FormFilePicker label="Upload" />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Name" help="Required. Your name">
|
||||
<FormControl v-model="profileForm.name" :icon="mdiAccount" name="username" required
|
||||
autocomplete="username" />
|
||||
</FormField>
|
||||
<FormField label="E-mail" help="Required. Your e-mail">
|
||||
<FormControl v-model="profileForm.email" :icon="mdiMail" type="email" name="email" required
|
||||
autocomplete="email" />
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton color="info" type="submit" label="Submit" />
|
||||
<BaseButton color="info" label="Options" outline />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
|
||||
<CardBox is-form @submit.prevent="submitPass">
|
||||
<FormField label="Current password" help="Required. Your current password">
|
||||
<FormControl v-model="passwordForm.password_current" :icon="mdiAsterisk" name="password_current"
|
||||
type="password" required autocomplete="current-password" />
|
||||
</FormField>
|
||||
|
||||
<BaseDivider />
|
||||
|
||||
<FormField label="New password" help="Required. New password">
|
||||
<FormControl v-model="passwordForm.password" :icon="mdiFormTextboxPassword" name="password"
|
||||
type="password" required autocomplete="new-password" />
|
||||
</FormField>
|
||||
|
||||
<FormField label="Confirm password" help="Required. New password one more time">
|
||||
<FormControl v-model="passwordForm.password_confirmation" :icon="mdiFormTextboxPassword"
|
||||
name="password_confirmation" type="password" required autocomplete="new-password" />
|
||||
</FormField>
|
||||
|
||||
<template #footer>
|
||||
<BaseButtons>
|
||||
<BaseButton type="submit" color="info" label="Submit" />
|
||||
<BaseButton color="info" label="Options" outline />
|
||||
</BaseButtons>
|
||||
</template>
|
||||
</CardBox>
|
||||
</div>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
70
resources/js/Pages/register-view/register-view-component.ts
Normal file
70
resources/js/Pages/register-view/register-view-component.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { Component, Vue, Prop } from 'vue-facing-decorator';
|
||||
import AuthLayout from '@/Layouts/Auth.vue';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import { NButton } from 'naive-ui';
|
||||
import { useForm, InertiaForm, router } from '@inertiajs/vue3';
|
||||
import FormInput from '@/Components/FormInput.vue'; // @/Components/FormInput.vue'
|
||||
// import { defineComponent, reactive } from 'vue';
|
||||
|
||||
// export default defineComponent({
|
||||
// layout: AuthLayout,
|
||||
|
||||
// components: {
|
||||
// NButton,
|
||||
// FormInput,
|
||||
// },
|
||||
|
||||
// setup() {
|
||||
// // const form = useForm({
|
||||
// // email: '',
|
||||
// // password: ''
|
||||
// // });
|
||||
// const form = reactive({
|
||||
// email: null,
|
||||
// password: null,
|
||||
// });
|
||||
|
||||
// const submit = async () => {
|
||||
// await Inertia.post('/app/register', form);
|
||||
// };
|
||||
|
||||
// return { form, submit };
|
||||
// },
|
||||
// });
|
||||
|
||||
export interface IErrorMessage {
|
||||
[key: string]: Array<string>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
options: {
|
||||
layout: AuthLayout,
|
||||
},
|
||||
name: 'RegisterViewComponent',
|
||||
components: {
|
||||
NButton,
|
||||
FormInput,
|
||||
},
|
||||
})
|
||||
export default class RegisterViewComponent extends Vue {
|
||||
// Component Property
|
||||
@Prop({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
})
|
||||
errors: IErrorMessage;
|
||||
|
||||
// Data Property
|
||||
form: InertiaForm<any> = useForm({
|
||||
email: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
results: Array<any> = [];
|
||||
|
||||
// Component method
|
||||
public async submit(): Promise<void> {
|
||||
// await Inertia.post('/app/register', this.form);
|
||||
await router.post('/app/register', this.form);
|
||||
}
|
||||
}
|
||||
128
resources/js/Pages/register-view/register-view-component.vue
Normal file
128
resources/js/Pages/register-view/register-view-component.vue
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- <Link href="/app">Home</Link>
|
||||
<br /> -->
|
||||
<h1>Register</h1>
|
||||
<form v-on:submit.prevent="submit()" class="max-w-sm">
|
||||
<!-- <form @submit.prevent="form.post('/app/register')" class="max-w-sm"> -->
|
||||
<!-- <n-input type="email" v-model:value="form.email" placeholder="email" class="mb-3" /> -->
|
||||
<!-- <n-input type="password" v-model:value="form.password" placeholder="Password" class="mb-3" /> -->
|
||||
<!-- <n-input v-bind:label="'Emai22l'" v-model:value="form.email" />
|
||||
<n-input v-bind:label="'Password'" v-bind:type="'password'" v-model:value="form.password" /> -->
|
||||
<!-- <form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" /> -->
|
||||
|
||||
<form-input v-bind:label="'Emai22l'" v-bind:type="'email'" v-model="form.email" :errors="errors.email" />
|
||||
<form-input v-bind:label="'Password'" v-bind:type="'password'" v-model="form.password" :errors="errors.password"/>
|
||||
|
||||
<n-button attr-type="submit"> Register </n-button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import RegisterViewComponent from "@/Pages/register-view/register-view-component";
|
||||
// import RegisterViewComponent from "./register-view-component";
|
||||
// const test = RegisterViewComponent;
|
||||
export default RegisterViewComponent;
|
||||
|
||||
|
||||
// import { Component, Vue, Prop } from "vue-facing-decorator";
|
||||
// import AuthLayout from '@/Layouts/Auth.vue';
|
||||
// // import { reactive } from 'vue';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
// import { NButton } from 'naive-ui';
|
||||
// import FormInput from '@/Components/FormInput.vue';// @/Components/FormInput.vue'
|
||||
// // import { defineComponent } from 'vue';
|
||||
|
||||
|
||||
|
||||
// export default {
|
||||
// layout: AuthLayout,
|
||||
|
||||
// components: {
|
||||
// // NButton,
|
||||
// // NInput,
|
||||
// FormInput
|
||||
// },
|
||||
|
||||
// setup() {
|
||||
// // const form = useForm({
|
||||
// // email: '',
|
||||
// // password: ''
|
||||
// // });
|
||||
// const form = reactive({
|
||||
// email: null,
|
||||
// password: null,
|
||||
// });
|
||||
|
||||
// const submit = async () => {
|
||||
// await Inertia.post('/app/register', form);
|
||||
// };
|
||||
|
||||
// return { form, submit };
|
||||
// },
|
||||
// };
|
||||
|
||||
// export default defineComponent({
|
||||
// layout: AuthLayout,
|
||||
|
||||
// components: {
|
||||
// NButton,
|
||||
// FormInput
|
||||
// },
|
||||
|
||||
// setup() {
|
||||
// // const form = useForm({
|
||||
// // email: '',
|
||||
// // password: ''
|
||||
// // });
|
||||
// const form = reactive({
|
||||
// email: null,
|
||||
// password: null,
|
||||
// });
|
||||
|
||||
// const submit = async () => {
|
||||
// await Inertia.post('/app/register', form);
|
||||
// };
|
||||
|
||||
// return { form, submit };
|
||||
// },
|
||||
// })
|
||||
|
||||
// @Component({
|
||||
// options: {
|
||||
// layout: AuthLayout
|
||||
// },
|
||||
// name: "RegisterViewComponent",
|
||||
// components: {
|
||||
// NButton,
|
||||
// FormInput
|
||||
// },
|
||||
// })
|
||||
// export default class RegisterViewComponent extends Vue {
|
||||
|
||||
// @Prop()
|
||||
// type!: string;
|
||||
|
||||
// public form = {
|
||||
// email: null,
|
||||
// password: null,
|
||||
// };
|
||||
|
||||
// results: Array<any> = [];
|
||||
|
||||
// submit = async () => {
|
||||
// await Inertia.post('/app/register', this.form);
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
|
||||
// </script>
|
||||
|
||||
<!-- <style scoped>
|
||||
.greeting {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style> -->
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue