changed layout for consistency
This commit is contained in:
James Collins
@@ -5,35 +5,37 @@
|
||||
:title="pageHeading"
|
||||
:back-link="{ name: 'dashboard-article-list' }"
|
||||
back-title="Back to Articles" />
|
||||
<div class="max-w-7xl mx-auto mt-8 px-8">
|
||||
<SMLoading v-if="pageLoading" />
|
||||
<SMLoading v-if="form.loading()" />
|
||||
<div v-else class="max-w-7xl mx-auto px-8 mt-8">
|
||||
<SMForm
|
||||
v-else
|
||||
:model-value="form"
|
||||
@submit="handleSubmit"
|
||||
@failed-validation="handleFailValidation">
|
||||
<div class="mb-8">
|
||||
<SMInput control="title" @blur="updateSlug()" />
|
||||
<div>
|
||||
<SMInput class="mb-8" control="title" autofocus @blur="updateSlug()" />
|
||||
</div>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<SMInput control="slug" />
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput class="mb-8" control="slug" />
|
||||
<SMInput
|
||||
class="mb-8"
|
||||
type="datetime"
|
||||
control="publish_at"
|
||||
label="Publish Date" />
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<SMSelectImage control="hero" label="Hero image" required />
|
||||
<div>
|
||||
<SMSelectImage class="mb-8" control="hero" label="Hero image" required />
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<div>
|
||||
<SMDropdown
|
||||
class="mb-8"
|
||||
control="user_id"
|
||||
label="Created By"
|
||||
type="select"
|
||||
:options="authors" />
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<div>
|
||||
<SMEditor
|
||||
class="mb-8"
|
||||
v-model:model-value="form.controls.content.value" />
|
||||
</div>
|
||||
<SMInputAttachments v-model:model-value="attachments" />
|
||||
@@ -73,7 +75,6 @@ const route = useRoute();
|
||||
const router = useRouter();
|
||||
const userStore = useUserStore();
|
||||
let pageError = ref(200);
|
||||
const pageLoading = ref(false);
|
||||
const authors = ref({});
|
||||
const attachments = ref([]);
|
||||
const pageHeading = route.params.id ? "Edit Article" : "Create Article";
|
||||
@@ -136,7 +137,7 @@ const updateSlug = async () => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
if (route.params.id) {
|
||||
pageLoading.value = true;
|
||||
form.loading(true);
|
||||
let result = await api.get({
|
||||
url: "/articles/{id}",
|
||||
params: {
|
||||
@@ -172,7 +173,7 @@ const loadData = async () => {
|
||||
} catch (error) {
|
||||
pageError.value = error.status;
|
||||
} finally {
|
||||
pageLoading.value = false;
|
||||
form.loading(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -23,28 +23,32 @@
|
||||
}" />
|
||||
</div>
|
||||
<div
|
||||
class="flex gap-4 mb-8"
|
||||
class="flex flex-col md:flex-row gap-4"
|
||||
v-if="form.controls.location.value !== 'online'">
|
||||
<SMInput control="address" />
|
||||
<SMInput control="location_url" />
|
||||
<SMInput class="mb-4" control="address" />
|
||||
<SMInput class="mb-4" control="location_url" />
|
||||
</div>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput
|
||||
type="datetime"
|
||||
class="mb-4"
|
||||
control="start_at"
|
||||
label="Start Date/Time" />
|
||||
<SMInput
|
||||
type="datetime"
|
||||
class="mb-4"
|
||||
control="end_at"
|
||||
label="End Date/Time" />
|
||||
</div>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput
|
||||
type="datetime"
|
||||
class="mb-4"
|
||||
control="publish_at"
|
||||
label="Publish Date/Time" />
|
||||
<SMDropdown
|
||||
type="select"
|
||||
class="mb-4"
|
||||
control="status"
|
||||
:options="{
|
||||
draft: 'Draft',
|
||||
@@ -55,18 +59,19 @@
|
||||
cancelled: 'Cancelled',
|
||||
}" />
|
||||
</div>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<SMInput control="price"
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput class="mb-4" control="price"
|
||||
>Leave blank to hide from public. Also supports TBD and
|
||||
TBC.</SMInput
|
||||
>
|
||||
<SMInput control="ages"
|
||||
<SMInput class="mb-4" control="ages"
|
||||
>Leave blank to hide from public.</SMInput
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 mb-8">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<SMDropdown
|
||||
type="select"
|
||||
class="mb-4"
|
||||
control="registration_type"
|
||||
label="Registration"
|
||||
:options="{
|
||||
@@ -77,6 +82,7 @@
|
||||
}" />
|
||||
<SMInput
|
||||
v-if="registration_data?.visible"
|
||||
class="mb-4"
|
||||
control="registration_data"
|
||||
:label="registration_data?.title"
|
||||
:type="registration_data?.type" />
|
||||
|
||||
@@ -6,49 +6,53 @@
|
||||
:back-link="{ name: 'dashboard-media-list' }"
|
||||
back-title="Back to Media" />
|
||||
<SMLoading v-if="form.loading()" />
|
||||
<div v-else class="max-w-4xl mx-auto px-4 mt-12">
|
||||
<div v-else class="max-w-7xl mx-auto px-8 mt-8">
|
||||
<SMForm
|
||||
:model-value="form"
|
||||
@submit="handleSubmit"
|
||||
@failed-validation="handleFailValidation">
|
||||
<div>
|
||||
<SMImage v-if="!editMultiple" :src="imageUrl" />
|
||||
<SMImageStack v-if="editMultiple" :src="imageStackUrls" />
|
||||
<SMImage v-if="!editMultiple" class="mb-8" :src="imageUrl" />
|
||||
<SMImageStack v-else class="mb-8" :src="imageStackUrls" />
|
||||
</div>
|
||||
<SMInputFile
|
||||
v-if="!editMultiple"
|
||||
control="file"
|
||||
type="file"
|
||||
class="mt-4" />
|
||||
<SMInput control="title" class="mt-4" />
|
||||
<SMInput control="permission" class="mt-4" />
|
||||
<div v-if="!editMultiple" class="mt-4 flex flex-cols gap-4">
|
||||
class="mb-8" />
|
||||
<SMInput control="title" class="mb-8" />
|
||||
<SMInput control="permission" class="mb-8" />
|
||||
<div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput
|
||||
class="mb-8"
|
||||
v-model="computedFileSize"
|
||||
type="static"
|
||||
label="File Size" />
|
||||
<SMInput
|
||||
v-model="fileData.mime_type"
|
||||
class="mb-8"
|
||||
v-model="fileData.mime_type"
|
||||
type="static"
|
||||
label="File Mime Type" />
|
||||
</div>
|
||||
<div v-if="!editMultiple" class="mt-4 flex flex-cols gap-4">
|
||||
<div v-if="!editMultiple" class="flex flex-col md:flex-row gap-4">
|
||||
<SMInput
|
||||
class="mb-8"
|
||||
v-model="fileData.status"
|
||||
type="static"
|
||||
label="Status" />
|
||||
<SMInput
|
||||
class="mb-8"
|
||||
v-model="fileData.dimensions"
|
||||
type="static"
|
||||
label="Dimensions" />
|
||||
</div>
|
||||
<SMInput
|
||||
v-if="!editMultiple"
|
||||
class="mt-4"
|
||||
class="mb-8"
|
||||
v-model="fileData.url"
|
||||
type="static"
|
||||
label="URL" />
|
||||
<SMInput type="textarea" control="description" />
|
||||
<SMInput class="mb-8" textarea control="description" />
|
||||
<input
|
||||
role="button"
|
||||
type="submit"
|
||||
|
||||
@@ -16,9 +16,9 @@
|
||||
<SMLoading v-if="form.loading()" />
|
||||
<div v-else class="max-w-4xl mx-auto px-4 mt-12">
|
||||
<SMForm :model-value="form" @submit="handleSubmit">
|
||||
<SMInput class="mt-4" control="code" />
|
||||
<SMInput class="mb-8" control="code" />
|
||||
<SMInput
|
||||
class="mt-4"
|
||||
class="mb-8"
|
||||
type="static"
|
||||
v-model="used"
|
||||
label="Times used" />
|
||||
|
||||
@@ -16,17 +16,17 @@
|
||||
: 'Back to Dashboard'
|
||||
" />
|
||||
<SMLoading v-if="form.loading()" />
|
||||
<div v-else class="max-w-4xl mx-auto px-4 mt-12">
|
||||
<div v-else class="max-w-4xl mx-auto px-8 mb-8">
|
||||
<SMForm :model-value="form" @submit="handleSubmit">
|
||||
<SMInput class="mt-4" control="display_name" autofocus />
|
||||
<SMInput class="mt-4" control="email" type="email" />
|
||||
<SMInput class="mt-4" control="first_name"
|
||||
<SMInput class="mb-8" control="display_name" autofocus />
|
||||
<SMInput class="mb-8" control="email" type="email" />
|
||||
<SMInput class="mb-8" control="first_name"
|
||||
>This field is optional</SMInput
|
||||
>
|
||||
<SMInput class="mt-4" control="last_name"
|
||||
<SMInput class="mb-8" control="last_name"
|
||||
>This field is optional</SMInput
|
||||
>
|
||||
<SMInput class="mt-4" control="phone"
|
||||
<SMInput class="mb-8" control="phone"
|
||||
>This field is optional</SMInput
|
||||
>
|
||||
<template v-if="userStore.permissions.includes('admin/users')">
|
||||
|
||||
Reference in New Issue
Block a user