- second commit
This commit is contained in:
parent
4fc3bb0a01
commit
59a99ff3c8
61 changed files with 2625 additions and 1182 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
import { StyleService } from '@/Stores/style.js';
|
||||
import { StyleService } from '@/Stores/style';
|
||||
|
||||
import {
|
||||
mdiContrastCircle,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
<script setup lang="ts">
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { Head, Link, useForm, router } from '@inertiajs/vue3';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
// import { reactive } from 'vue';
|
||||
import {
|
||||
mdiAccount,
|
||||
mdiAccountCircle,
|
||||
|
|
@ -9,7 +10,7 @@ import {
|
|||
mdiAsterisk,
|
||||
mdiFormTextboxPassword,
|
||||
mdiArrowLeftBoldOutline,
|
||||
mdiAlertBoxOutline,
|
||||
// mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import CardBox from '@/Components/CardBox.vue';
|
||||
|
|
@ -18,7 +19,7 @@ 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 NotificationBar from '@/Components/NotificationBar.vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
import { stardust } from '@eidellev/adonis-stardust/client';
|
||||
|
|
@ -41,16 +42,16 @@ const profileForm = useForm({
|
|||
email: props.user.email,
|
||||
});
|
||||
const profileSubmit = async () => {
|
||||
await router.post(stardust.route('admin.account.info.store', [props.user.id]), profileForm);
|
||||
await profileForm.post(stardust.route('admin.account.info.store', [props.user.id]));
|
||||
};
|
||||
|
||||
const passwordForm = useForm({
|
||||
old_password: null,
|
||||
new_password: null,
|
||||
confirm_password: null,
|
||||
old_password: "",
|
||||
new_password: "",
|
||||
confirm_password: "",
|
||||
});
|
||||
const passwordSubmit = async () => {
|
||||
await router.post(stardust.route('admin.account.info.store'), passwordForm, {
|
||||
await passwordForm.post(stardust.route('admin.account.info.store'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: (resp) => {
|
||||
console.log(resp);
|
||||
|
|
@ -68,9 +69,9 @@ const passwordSubmit = async () => {
|
|||
rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
<!-- <NotificationBar v-if="$page.props.flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
{{ $page.props.flash.message }}
|
||||
</NotificationBar>
|
||||
</NotificationBar> -->
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from '@inertiajs/vue3';
|
||||
<script setup lang="ts">
|
||||
import { Head, useForm, router } from '@inertiajs/vue3';
|
||||
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
|
|
@ -45,11 +45,11 @@ const submit = async () => {
|
|||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiAccountKey" title="Add user" main>
|
||||
<BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small />
|
||||
color="modern" 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 }">
|
||||
<FormField label="Login" :class="{ 'text-red-400': errors.login }">
|
||||
<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 }} -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { Head, Link, useForm, router } from "@inertiajs/vue3"
|
||||
<script setup lang="ts">
|
||||
import { Head, useForm, router } from "@inertiajs/vue3"
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiArrowLeftBoldOutline
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
<script setup lang="ts">
|
||||
// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { ComputedRef } from 'vue';
|
||||
import {
|
||||
mdiAccountKey,
|
||||
mdiPlus,
|
||||
|
|
@ -8,7 +9,7 @@ import {
|
|||
mdiTrashCan,
|
||||
mdiAlertBoxOutline,
|
||||
} from '@mdi/js';
|
||||
import { watch, computed } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
|
||||
import SectionMain from '@/Components/SectionMain.vue';
|
||||
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
|
||||
|
|
@ -44,7 +45,7 @@ const props = defineProps({
|
|||
// return props.filters.search;
|
||||
// });
|
||||
|
||||
const flash = computed(() => {
|
||||
const flash: ComputedRef<any> = computed(() => {
|
||||
// let test = usePage();
|
||||
// console.log(test);
|
||||
return usePage().props.flash;
|
||||
|
|
@ -73,7 +74,7 @@ const destroy = async (id) => {
|
|||
<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 />
|
||||
color="modern" rounded-full small />
|
||||
</SectionTitleLineWithButton>
|
||||
<!-- <label>{{ form.search }}</label> -->
|
||||
<NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
|
||||
|
|
@ -87,7 +88,7 @@ const destroy = async (id) => {
|
|||
<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"
|
||||
<BaseButton label="Search" type="submit" color="modern"
|
||||
class="ml-4 inline-flex items-center px-4 py-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,67 @@
|
|||
<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"
|
||||
<script setup lang="ts">
|
||||
import { Head } 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: () => ({}),
|
||||
}
|
||||
})
|
||||
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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -31,60 +31,70 @@ import FormControl from '@/Components/FormControl.vue';
|
|||
</script> -->
|
||||
|
||||
<template>
|
||||
<LayoutGuest>
|
||||
<LayoutGuest>
|
||||
<Head title="Login" />
|
||||
|
||||
<Head title="Login" />
|
||||
<SectionFullScreen v-slot="{ cardClass }" :bg="'greenBlue'">
|
||||
<CardBox :class="cardClass" form @submit.prevent="submit">
|
||||
<FormValidationErrors v-bind:errors="errors" />
|
||||
|
||||
<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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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' }" />
|
||||
|
||||
<FormCheckRadioGroup v-model="form.remember" name="remember" :options="{ remember: 'Remember' }" />
|
||||
|
||||
<!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
|
||||
<!-- <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>
|
||||
<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 />
|
||||
<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
|
||||
<!-- 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>
|
||||
</BaseButtons>
|
||||
<!-- <Link :href="stardust.route('app.register.show')"> Register </Link> -->
|
||||
</BaseLevel>
|
||||
</CardBox>
|
||||
</SectionFullScreen>
|
||||
</LayoutGuest>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useForm, Head, Link } from '@inertiajs/vue3';
|
||||
<script setup lang="ts">
|
||||
import { useForm, Head } from '@inertiajs/vue3';
|
||||
import { Ref } from 'vue';
|
||||
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
|
||||
import { mdiAccount, mdiAsterisk } from '@mdi/js';
|
||||
import LayoutGuest from '@/Layouts/LayoutGuest.vue';
|
||||
|
|
@ -101,45 +111,45 @@ 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 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 flash: Ref<any> = computed(() => {
|
||||
return usePage().props.flash;
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
canResetPassword: Boolean,
|
||||
status: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
defineProps({
|
||||
canResetPassword: Boolean,
|
||||
status: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: [],
|
||||
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');
|
||||
// }
|
||||
});
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script setup>
|
||||
<script setup lang="ts">
|
||||
import { Head } from '@inertiajs/vue3';
|
||||
import { computed, ref, onMounted } from 'vue';
|
||||
import { MainService } from '@/Stores/main';
|
||||
// import { Inertia } from '@inertiajs/inertia';
|
||||
import {
|
||||
mdiAccountMultiple,
|
||||
mdiCartOutline,
|
||||
mdiDatabaseOutline,
|
||||
mdiChartTimelineVariant,
|
||||
mdiFinance,
|
||||
|
|
@ -13,7 +13,7 @@ import {
|
|||
mdiGithub,
|
||||
mdiChartPie,
|
||||
} from '@mdi/js';
|
||||
import { containerMaxW } from '@/config.js'; // "xl:max-w-6xl xl:mx-auto"
|
||||
// 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';
|
||||
|
|
@ -27,7 +27,7 @@ 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 chartData = ref();
|
||||
const fillChartData = () => {
|
||||
chartData.value = chartConfig.sampleChartData();
|
||||
};
|
||||
|
|
@ -42,7 +42,7 @@ mainService.fetch('history');
|
|||
mainService.fetchApi('authors');
|
||||
mainService.fetchApi('datasets');
|
||||
|
||||
const clientBarItems = computed(() => mainService.clients.slice(0, 4));
|
||||
// const clientBarItems = computed(() => mainService.clients.slice(0, 4));
|
||||
const transactionBarItems = computed(() => mainService.history);
|
||||
|
||||
const authorBarItems = computed(() => mainService.authors.slice(0, 4));
|
||||
|
|
@ -109,9 +109,9 @@ const datasets = computed(() => mainService.datasets);
|
|||
|
||||
<SectionTitleLineWithButton :icon="mdiAccountMultiple" title="Submitters (to do)" />
|
||||
|
||||
<!-- <NotificationBar color="info" :icon="mdiMonitorCellphone">
|
||||
<NotificationBar color="info" :icon="mdiMonitorCellphone">
|
||||
<b>Responsive table.</b> Collapses on mobile
|
||||
</NotificationBar> -->
|
||||
</NotificationBar>
|
||||
|
||||
<CardBox :icon="mdiMonitorCellphone" title="Responsive table" has-table>
|
||||
<TableSampleClients />
|
||||
|
|
|
|||
604
resources/js/Pages/Submitter/Dataset/Create.vue
Normal file
604
resources/js/Pages/Submitter/Dataset/Create.vue
Normal file
|
|
@ -0,0 +1,604 @@
|
|||
<script setup lang="ts">
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
import { Dataset, Title } from '@/Dataset';
|
||||
import { mdiDatabasePlus, mdiMinusCircle, mdiPlusCircle, mdiFinance, mdiInformationOutline, mdiBookOpenPageVariant } 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';
|
||||
import CardBoxModal from '@/Components/CardBoxModal.vue';
|
||||
import BaseIcon from '@/Components/BaseIcon.vue';
|
||||
|
||||
import IconWizard from '@/Components/Icons/Wizard.vue';
|
||||
import IconMandatory from '@/Components/Icons/Mandatory.vue';
|
||||
import IconLanguage from '@/Components/Icons/Language.vue';
|
||||
import IconRecommendet from '@/Components/Icons/Recommendet.vue';
|
||||
import IconConfirm from '@/Components/Icons/Confirm.vue';
|
||||
import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
|
||||
|
||||
const props = defineProps({
|
||||
licenses: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
doctypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
titletypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
descriptiontypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
// const form = useForm({
|
||||
// language: '',
|
||||
// licenses: [],
|
||||
// type: '',
|
||||
// titles: [{ value: '', type: 'Main', language: Dataset.language }],
|
||||
// });
|
||||
// let language: (string | Ref<string>) = ref('');
|
||||
let language = ref('');
|
||||
let dataset = {
|
||||
language: language,
|
||||
licenses: [],
|
||||
rights: false,
|
||||
type: '',
|
||||
creating_corporation: 'Tethys RDR',
|
||||
titles: [{ value: '', type: 'Main', language: language }],
|
||||
descriptions: [{ value: '', type: 'Abstract', language: language }],
|
||||
// errors: undefined,
|
||||
};
|
||||
// const form = useForm({
|
||||
// language: language,
|
||||
// licenses: [],
|
||||
// rights: false,
|
||||
// type: '',
|
||||
// creating_corporation: 'Tethys RDR',
|
||||
// titles: [{ value: '', type: 'Main', language: language }],
|
||||
// descriptions: [{ value: '', type: 'Abstract', language: language }],
|
||||
// });
|
||||
const form = useForm<Dataset>(dataset);
|
||||
// dataset.language.value = 'de';
|
||||
|
||||
// const emit = defineEmits(['update:modelValue', 'setRef']);
|
||||
// computed({
|
||||
// get: () => form.rights,
|
||||
// set: (value) => {
|
||||
// emit('update:modelValue', value);
|
||||
// },
|
||||
// });
|
||||
|
||||
const isModalActive = ref(false);
|
||||
const formStep = ref(1);
|
||||
|
||||
// const submit = async () => {
|
||||
// await router.post(stardust.route('user.store'), form, {
|
||||
// onSuccess: () => {
|
||||
// form.reset(), (formStep.value = 1);
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
const nextStep = async () => {
|
||||
let route = stardust.route('dataset.first.step');
|
||||
if (formStep.value == 2) {
|
||||
route = stardust.route('dataset.second.step');
|
||||
}
|
||||
// formStep.value++;
|
||||
await form
|
||||
.transform((data) => ({
|
||||
...data,
|
||||
rights: form.rights && form.rights == true ? 'true' : 'false',
|
||||
}))
|
||||
.post(route, {
|
||||
form,
|
||||
onSuccess: () => {
|
||||
formStep.value++;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const prevStep = () => {
|
||||
formStep.value--;
|
||||
};
|
||||
|
||||
const addTitle = () => {
|
||||
let newTitle: Title = { value: '', language: '', type: '' };
|
||||
//this.dataset.files.push(uploadedFiles[i]);
|
||||
form.titles.push(newTitle);
|
||||
};
|
||||
const removeTitle = (key) => {
|
||||
form.titles.splice(key, 1);
|
||||
};
|
||||
|
||||
const addDescription = () => {
|
||||
let newDescription = { value: '', language: '', type: '' };
|
||||
//this.dataset.files.push(uploadedFiles[i]);
|
||||
form.descriptions.push(newDescription);
|
||||
};
|
||||
const removeDescription = (key) => {
|
||||
form.descriptions.splice(key, 1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CardBoxModal v-model="isModalActive" title="Einverständniserklärung *">
|
||||
Mit dem Setzen des Hakens bestätige ich hiermit
|
||||
<ul class="list-decimal">
|
||||
<li>
|
||||
die Data Policy von Tethys RDR sowie die Terms & Conditions von Tethys gelesen und verstanden zu haben (<a
|
||||
href="/docs/HandbuchTethys.pdf"
|
||||
target="_blank"
|
||||
>siehe hier</a
|
||||
>)
|
||||
</li>
|
||||
<li>das Einverständnis aller Co-Autoren über die bevorstehende Datenpublikation schriftlich eingeholt zu haben</li>
|
||||
<li>sowohl mit der Data Policy als auch mit den Terms & Conditions einverstanden zu sein</li>
|
||||
</ul>
|
||||
</CardBoxModal>
|
||||
|
||||
<LayoutAuthenticated>
|
||||
<Head title="Submit Dataset" />
|
||||
<SectionMain>
|
||||
<SectionTitleLineWithButton :icon="mdiDatabasePlus" title="Submit dataset" main>
|
||||
<!-- <BaseButton :route-name="stardust.route('user.index')" :icon="mdiArrowLeftBoldOutline" label="Back"
|
||||
color="white" rounded-full small /> -->
|
||||
</SectionTitleLineWithButton>
|
||||
|
||||
<CardBox>
|
||||
<div class="mx-4 p-4">
|
||||
<div class="flex items-center">
|
||||
<!-- <label>{{ form.titles[0].language }}</label>
|
||||
<label>{{ form.language }}</label> -->
|
||||
<icon-wizard :is-current="formStep == 1" :is-checked="formStep > 1" :label="'Language'">
|
||||
<icon-language></icon-language>
|
||||
</icon-wizard>
|
||||
|
||||
<icon-wizard :is-current="formStep == 2" :is-checked="formStep > 2" :label="'Mandatory'">
|
||||
<icon-mandatory></icon-mandatory>
|
||||
</icon-wizard>
|
||||
|
||||
<icon-wizard :is-current="formStep == 3" :is-checked="formStep > 3" :label="'Recommendet'">
|
||||
<icon-recommendet></icon-recommendet>
|
||||
</icon-wizard>
|
||||
|
||||
<icon-wizard :is-current="formStep == 4" :is-checked="false" :label="'Confirm'" :is-last-step="true">
|
||||
<icon-confirm></icon-confirm>
|
||||
</icon-wizard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mt-8: margin-top: 2rem; /* 32px */ 4 p-4: spacing 1rem 16px-->
|
||||
<div class="mt-8 p-4">
|
||||
<div v-if="formStep == 1">
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Language *"
|
||||
help="required: select dataset main language"
|
||||
:class="{ 'text-red-400': errors.language }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.language"
|
||||
:type="'select'"
|
||||
placeholder="[Enter Language]"
|
||||
:errors="form.errors.language"
|
||||
:options="['de', 'en']"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.language">
|
||||
{{ form.errors.language.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
label="Licenses"
|
||||
wrap-body
|
||||
:class="{ 'text-red-400': form.errors.licenses }"
|
||||
class="mt-8 w-full mx-2 flex-1"
|
||||
>
|
||||
<FormCheckRadioGroup v-model="form.licenses" name="roles" is-column :options="props.licenses" />
|
||||
</FormField>
|
||||
|
||||
<!-- <label for="rights">
|
||||
<input class="form-checkbox" name="rights" id="rights" type="checkbox" v-model="dataset.rights" />
|
||||
terms and conditions
|
||||
</label> -->
|
||||
<FormField
|
||||
label="Rights"
|
||||
help="You must agree to continue"
|
||||
wrap-body
|
||||
:class="{ 'text-red-400': form.errors.rights }"
|
||||
class="mt-8 w-full mx-2 flex-1 flex-col"
|
||||
>
|
||||
<label for="rights" class="checkbox mr-6 mb-3 last:mr-0">
|
||||
<input type="checkbox" id="rights" required v-model="form.rights" />
|
||||
<span class="check" />
|
||||
<a class="pl-2" target="_blank">terms and conditions </a>
|
||||
<!-- <BaseButton color="modern" :icon="mdiInformationOutline" small @click="isModalActive = true" /> -->
|
||||
<BaseIcon
|
||||
v-if="mdiInformationOutline"
|
||||
:path="mdiInformationOutline"
|
||||
@click.prevent="isModalActive = true"
|
||||
/>
|
||||
</label>
|
||||
</FormField>
|
||||
<div class="text-red-400 text-sm" v-if="errors.rights && Array.isArray(errors.rights)">
|
||||
<!-- {{ errors.password_confirmation }} -->
|
||||
{{ errors.rights.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="formStep == 2">
|
||||
<!-- <CardBox title="Performance" :icon="mdiFinance" :header-icon="mdiReload" class="mb-6"> -->
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Dataset Type *"
|
||||
help="required: dataset type"
|
||||
:class="{ 'text-red-400': form.errors.type }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.type"
|
||||
:type="'select'"
|
||||
placeholder="-- select type --"
|
||||
:errors="errors.type"
|
||||
:options="doctypes"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors.type && Array.isArray(form.errors.type)">
|
||||
{{ form.errors.type.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<!-- <div class="w-full mx-2 flex-1 svelte-1l8159u"></div> -->
|
||||
<!-- Creating Corporation -->
|
||||
<FormField
|
||||
label="Creating Corporation *"
|
||||
:class="{ 'text-red-400': form.errors.creating_corporation }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.creating_corporation"
|
||||
type="text"
|
||||
placeholder="[enter creating corporation]"
|
||||
:is-read-only="true"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors.creating_corporation && Array.isArray(form.errors.creating_corporation)"
|
||||
>
|
||||
{{ form.errors.creating_corporation.join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
<!-- <BaseDivider /> -->
|
||||
|
||||
<!-- titles -->
|
||||
<CardBox
|
||||
class="mb-6"
|
||||
:has-form-data="true"
|
||||
title="Titles"
|
||||
:icon="mdiFinance"
|
||||
:header-icon="mdiPlusCircle"
|
||||
v-on:header-icon-click="addTitle()"
|
||||
>
|
||||
<!-- <div class="py-6 border-t border-gray-100 dark:border-slate-800"> -->
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Main Title *"
|
||||
help="required: main title"
|
||||
:class="{ 'text-red-400': form.errors['titles.0.value'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.titles[0].value" type="text" placeholder="[enter main title]">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['titles.0.value'] && Array.isArray(form.errors['titles.0.value'])"
|
||||
>
|
||||
{{ form.errors['titles.0.value'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Main Title Language*"
|
||||
help="required: main title language"
|
||||
:class="{ 'text-red-400': form.errors['titles.0.language'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.titles[0].language" type="text" :is-read-only="true">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['titles.0.language'] && Array.isArray(form.errors['titles.0.language'])"
|
||||
>
|
||||
{{ form.errors['titles.0.language'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
<label v-if="form.titles.length > 1">additional titles </label>
|
||||
<!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
|
||||
<div v-if="form.titles.length > 1">
|
||||
<div v-for="(item, index) in form.titles">
|
||||
<div class="flex flex-col md:flex-row" v-if="item.type != 'Main'">
|
||||
<FormField v-if="item.type != 'Main'" label="Remove">
|
||||
<BaseButton
|
||||
:icon="mdiMinusCircle"
|
||||
class="mt-1"
|
||||
@click.prevent="removeTitle(index)"
|
||||
color="modern"
|
||||
small
|
||||
/>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Title Value *"
|
||||
:class="{ 'text-red-400': form.errors[`titles.${index}.value`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.titles[index].value"
|
||||
type="text"
|
||||
placeholder="[enter main title]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
|
||||
{{ form.errors[`titles.${index}.value`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Title Type*"
|
||||
:class="{ 'text-red-400': form.errors[`titles.${index}.type`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.titles[index].type"
|
||||
type="select"
|
||||
:options="titletypes"
|
||||
placeholder="[select title type]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="Array.isArray(form.errors[`titles.${index}.type`])">
|
||||
{{ form.errors[`titles.${index}.type`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Title Language*"
|
||||
:class="{ 'text-red-400': form.errors[`titles.${index}.language`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.titles[index].language"
|
||||
type="select"
|
||||
:options="['de', 'en']"
|
||||
placeholder="[select title language]"
|
||||
>
|
||||
<div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.language`]">
|
||||
{{ form.errors[`titles.${index}.language`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</CardBox>
|
||||
|
||||
<!-- Descriptions -->
|
||||
<CardBox
|
||||
class="mb-6"
|
||||
:has-form-data="true"
|
||||
title="Descriptions"
|
||||
:header-icon="mdiPlusCircle"
|
||||
v-on:header-icon-click="addDescription()"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<FormField
|
||||
label="Main Abstract *"
|
||||
help="required: main abstract"
|
||||
:class="{ 'text-red-400': form.errors['descriptions.0.value'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.descriptions[0].value"
|
||||
type="textarea"
|
||||
placeholder="[enter main abstract]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.value'])"
|
||||
>
|
||||
{{ form.errors['descriptions.0.value'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Main Title Language*"
|
||||
help="required: main abstract language"
|
||||
:class="{ 'text-red-400': form.errors['descriptions.0.language'] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl required v-model="form.descriptions[0].language" type="text" :is-read-only="true">
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="
|
||||
form.errors['descriptions.0.value'] && Array.isArray(form.errors['descriptions.0.language'])
|
||||
"
|
||||
>
|
||||
{{ form.errors['descriptions.0.language'].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
<label v-if="form.descriptions.length > 1">additional descriptions: </label>
|
||||
<!-- <BaseButton :icon="mdiPlusCircle" @click.prevent="addTitle()" color="modern" rounded-full small /> -->
|
||||
<div v-if="form.descriptions.length > 1">
|
||||
<div v-for="(item, index) in form.descriptions">
|
||||
<div class="flex flex-col md:flex-row" v-if="item.type != 'Abstract'">
|
||||
<FormField v-if="item.type != 'Abstract'" label="Remove">
|
||||
<BaseButton
|
||||
:icon="mdiMinusCircle"
|
||||
class="mt-1"
|
||||
@click.prevent="removeDescription(index)"
|
||||
color="modern"
|
||||
small
|
||||
/>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Description Value *"
|
||||
:class="{ 'text-red-400': form.errors[`descriptions.${index}.value`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.descriptions[index].value"
|
||||
type="text"
|
||||
placeholder="[enter additional description]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="
|
||||
form.errors[`descriptions.${index}.value`] &&
|
||||
Array.isArray(form.errors[`descriptions.${index}.value`])
|
||||
"
|
||||
>
|
||||
{{ form.errors[`descriptions.${index}.value`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Description Type *"
|
||||
:class="{ 'text-red-400': form.errors[`descriptions.${index}.type`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.descriptions[index].type"
|
||||
type="select"
|
||||
:options="descriptiontypes"
|
||||
placeholder="[select description type]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="
|
||||
form.errors[`descriptions.${index}.type`] &&
|
||||
Array.isArray(form.errors[`descriptions.${index}.type`])
|
||||
"
|
||||
>
|
||||
{{ form.errors[`descriptions.${index}.type`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
<FormField
|
||||
label="Description Language*"
|
||||
:class="{ 'text-red-400': form.errors[`titdescriptionsles.${index}.language`] }"
|
||||
class="w-full mx-2 flex-1"
|
||||
>
|
||||
<FormControl
|
||||
required
|
||||
v-model="form.descriptions[index].language"
|
||||
type="select"
|
||||
:options="['de', 'en']"
|
||||
placeholder="[select title language]"
|
||||
>
|
||||
<div
|
||||
class="text-red-400 text-sm"
|
||||
v-if="form.errors && Array.isArray(form.errors[`descriptions.${index}.language`])"
|
||||
>
|
||||
{{ form.errors[`descriptions.${index}.language`].join(', ') }}
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardBox>
|
||||
|
||||
<CardBox class="mb-6" :has-form-data="true" title="Authors" :icon="mdiBookOpenPageVariant" >
|
||||
<SearchAutocomplete
|
||||
source="/api/persons"
|
||||
:response-property="'first_name'"
|
||||
placeholder="search in person table...."
|
||||
></SearchAutocomplete>
|
||||
</CardBox>
|
||||
<!-- <SectionTitleLineWithButton :icon="mdiChartPie" title="Trends overview (to do publications per year)" class="flex flex-col md:flex-row" >
|
||||
</SectionTitleLineWithButton> -->
|
||||
</div>
|
||||
|
||||
<div v-if="formStep == 3">
|
||||
<label>To Do: Recommendet</label>
|
||||
<!-- <div class="w-full mx-2 flex-1 svelte-1l8159u">
|
||||
<div class="font-bold h-6 mt-3 text-gray-600 text-xs leading-8 uppercase">Username</div>
|
||||
<div class="bg-white my-2 p-1 flex border border-gray-200 rounded svelte-1l8159u">
|
||||
<input placeholder="Just a hint.." class="p-1 px-2 appearance-none outline-none w-full text-gray-800" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mx-2 flex-1 svelte-1l8159u">
|
||||
<div class="font-bold h-6 mt-3 text-gray-600 text-xs leading-8 uppercase">Your Email</div>
|
||||
<div class="bg-white my-2 p-1 flex border border-gray-200 rounded svelte-1l8159u">
|
||||
<input placeholder="jhon@doe.com" class="p-1 px-2 appearance-none outline-none w-full text-gray-800" />
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div v-if="formStep == 4">
|
||||
<label>To Do: File Upload</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex p-2 mt-4">
|
||||
<button
|
||||
v-if="formStep > 1"
|
||||
@click="prevStep"
|
||||
class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-gray-200 bg-gray-100 text-gray-700 border duration-200 ease-in-out border-gray-600 transition"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div class="flex-auto flex flex-row-reverse">
|
||||
<button
|
||||
v-if="formStep < 4"
|
||||
@click="nextStep"
|
||||
class="text-base ml-2 hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-600 bg-teal-600 text-teal-100 border duration-200 ease-in-out border-teal-600 transition"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
|
||||
<!-- <button
|
||||
class="text-base hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer hover:bg-teal-200 bg-teal-100 text-teal-700 border duration-200 ease-in-out border-teal-600 transition"
|
||||
>
|
||||
Skip
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CardBox>
|
||||
</SectionMain>
|
||||
</LayoutAuthenticated>
|
||||
</template>
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue