publish operations
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import { getApp } from "../../app";
|
||||
import { post } from "../../modules/remote";
|
||||
import Icon from "./../../common/Icon.svelte";
|
||||
let { record, status } = $props();
|
||||
let date = $state(null);
|
||||
const app = getApp();
|
||||
function handlePublish() {
|
||||
post(app.url("records/publish"), { id: record.id }, (data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
});
|
||||
}
|
||||
|
||||
function handleTrash() {
|
||||
post(app.url("records/trash"), { id: record.id }, (data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
});
|
||||
}
|
||||
function handleSchedule() {
|
||||
post(
|
||||
app.url("records/schedule"),
|
||||
{ id: record.id, date: date },
|
||||
(data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="display: flex; gap:20px">
|
||||
{#if status != "trashed"}
|
||||
<button onclick={handlePublish}>Publish Now</button>
|
||||
{/if}
|
||||
<details class="dropdown">
|
||||
<summary role="button" class="secondary"
|
||||
><Icon icon="ellipsis-vertical"></Icon></summary
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<form onsubmit={handleSchedule}>
|
||||
<fieldset role="group">
|
||||
<input
|
||||
bind:value={date}
|
||||
type="datetime-local"
|
||||
aria-label="Datetime local"
|
||||
required
|
||||
/>
|
||||
<button>Schedule</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</li>
|
||||
<li><a href="#">View Revisions</a></li>
|
||||
{#if status != "trashed"}
|
||||
<li>
|
||||
<button onclick={handleTrash}>Move to trash</button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</details>
|
||||
</div>
|
||||
@@ -3,6 +3,8 @@
|
||||
import { onMount } from "svelte";
|
||||
import TextField from "./fields/TextField.svelte";
|
||||
import LocaleChooser from "./LocaleChooser.svelte";
|
||||
import RecordStatus from "./RecordStatus.svelte";
|
||||
import PublishingOptions from "./PublishingOptions.svelte";
|
||||
import { getSelectedLocales } from "./locale.svelte.js";
|
||||
let { channel, user, data } = $props();
|
||||
let selectedLocales = $state(getSelectedLocales());
|
||||
@@ -16,42 +18,52 @@
|
||||
<!-- <svelte:window on:beforeunload={beforeUnload} /> -->
|
||||
<ChannelLayout {body} {channel} schemas={data.schemas} {user}></ChannelLayout>
|
||||
{#snippet body()}
|
||||
<LocaleChooser {channel} onLocaleChange={handleLocaleChange}
|
||||
></LocaleChooser>
|
||||
{#each data.fields as field}
|
||||
<div style="display:flex;gap:20px;">
|
||||
{#if field.type === "text"}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
errors={data.validationErrors.filter(
|
||||
(f) => f.id === field.fieldId && f.locale === "main",
|
||||
)}
|
||||
schemaField={field}
|
||||
locale="main"
|
||||
dataField={data.draftData.find(
|
||||
(f) => f.id === field.id && f.locale === "main",
|
||||
)}
|
||||
></TextField>
|
||||
{#if field.translatable}
|
||||
{#each selectedLocales as locale (locale)}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
errors={data.validationErrors.filter(
|
||||
(f) =>
|
||||
f.fieldId === field.id &&
|
||||
f.locale === locale,
|
||||
)}
|
||||
schemaField={field}
|
||||
{locale}
|
||||
dataField={data.draftData.find(
|
||||
(f) => f.id === field.id && f.locale === locale,
|
||||
)}
|
||||
></TextField>
|
||||
{/each}
|
||||
<RecordStatus {channel} {record} status={data.recordStatus}></RecordStatus>
|
||||
<div style="display:flex;gap:20px;justify-content: space-between;">
|
||||
<LocaleChooser {channel} onLocaleChange={handleLocaleChange}
|
||||
></LocaleChooser>
|
||||
<PublishingOptions {record} status={data.recordStatus}
|
||||
></PublishingOptions>
|
||||
</div>
|
||||
<fieldset disabled={data.recordStatus === "trashed"}>
|
||||
{#each data.fields as field}
|
||||
<div style="display:flex;gap:20px;">
|
||||
{#if field.type === "text"}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={data.validationErrors.find(
|
||||
(f) =>
|
||||
f.fieldId === field.id && f.locale === "main",
|
||||
)}
|
||||
schemaField={field}
|
||||
locale="main"
|
||||
dataField={data.draftData.find(
|
||||
(f) => f.id === field.id && f.locale === "main",
|
||||
)}
|
||||
></TextField>
|
||||
{#if field.translatable}
|
||||
{#each selectedLocales as locale (locale)}
|
||||
<TextField
|
||||
{channel}
|
||||
{record}
|
||||
validationError={data.validationErrors.find(
|
||||
(f) =>
|
||||
f.fieldId === field.id &&
|
||||
f.locale === locale,
|
||||
)}
|
||||
schemaField={field}
|
||||
{locale}
|
||||
dataField={data.draftData.find(
|
||||
(f) =>
|
||||
f.id === field.id &&
|
||||
f.locale === locale,
|
||||
)}
|
||||
></TextField>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</fieldset>
|
||||
{/snippet}
|
||||
|
||||
@@ -0,0 +1,84 @@
|
||||
<script>
|
||||
import { getApp } from "../../app";
|
||||
import { post } from "../../modules/remote";
|
||||
let { record, status } = $props();
|
||||
const app = getApp();
|
||||
|
||||
function handleUntrash() {
|
||||
post(app.url("records/untrash"), { id: record.id }, (data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
});
|
||||
}
|
||||
function handleUnschedule() {
|
||||
post(app.url("records/unschedule"), { id: record.id }, (data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
});
|
||||
}
|
||||
function handleUnpublish() {
|
||||
post(app.url("records/unpublish"), { id: record.id }, (data, err) => {
|
||||
Turbo.visit(window.location.href);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="record-status record-status-{status}"
|
||||
style="display: flex; gap:20px"
|
||||
>
|
||||
{#if status === "trashed"}
|
||||
<span>This record is Trashed</span>
|
||||
<button onclick={handleUntrash}>Restore</button>
|
||||
{:else if status === "scheduled_and_published"}
|
||||
<div>
|
||||
<div>
|
||||
<span>
|
||||
This record was published at {record.publishedAt}
|
||||
</span>
|
||||
<button onclick={handleUnpublish}>Unpublish</button>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
It is scheduled to be republished at {record.scheduledAt}
|
||||
</span>
|
||||
<button onclick={handleUnschedule}>Unschedule</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if status === "published"}
|
||||
<span>
|
||||
This record was published at {record.publishedAt}
|
||||
</span>
|
||||
<button onclick={handleUnpublish}>Cancel</button>
|
||||
{:else if status === "scheduled"}
|
||||
<span>
|
||||
This record is scheduled to be published at {record.scheduledAt}
|
||||
</span>
|
||||
<button onclick={handleUnschedule}>Cancel</button>
|
||||
{:else}
|
||||
<span>This record is a draft. Not yet published</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.record-status {
|
||||
border: 1px solid;
|
||||
border-radius: 7px;
|
||||
padding: 10px 20px;
|
||||
margin: 0 0 30px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.record-status-trashed {
|
||||
border-color: red;
|
||||
}
|
||||
.record-status-scheduled_and_published {
|
||||
border-color: blue;
|
||||
}
|
||||
.record-status-published {
|
||||
border-color: green;
|
||||
}
|
||||
.record-status-scheduled {
|
||||
border-color: orange;
|
||||
}
|
||||
.record-status-draft {
|
||||
border-color: gray;
|
||||
}
|
||||
</style>
|
||||
@@ -2,13 +2,14 @@
|
||||
import { post } from "../../../modules/remote";
|
||||
import { getApp } from "../../../app";
|
||||
import { getLocaleName } from "../locale.svelte.js";
|
||||
let { channel, record, schemaField, dataField, locale, errors } = $props();
|
||||
let { channel, record, schemaField, dataField, locale, validationError } =
|
||||
$props();
|
||||
let originalValue = dataField?.value ?? schemaField.props.default;
|
||||
let newValue = $state(originalValue);
|
||||
let valuesChanged = $derived(newValue !== originalValue);
|
||||
let errorMessage = $state("");
|
||||
let validationErrors = $state(errors);
|
||||
let hasErrors = $derived(validationErrors.length > 0);
|
||||
// let validationErrorState = $state(validationError);
|
||||
let hasError = $derived(!!validationError);
|
||||
const app = getApp();
|
||||
|
||||
function save() {
|
||||
@@ -28,7 +29,7 @@
|
||||
if (err.isNotEmpty()) {
|
||||
errorMessage = err.first();
|
||||
} else {
|
||||
validationErrors = data.validationErrors;
|
||||
validationError = data.validationError;
|
||||
originalValue = newValue;
|
||||
}
|
||||
},
|
||||
@@ -119,11 +120,11 @@
|
||||
onblur={handleBlur}
|
||||
oncompositionstart={handleCompositionStart}
|
||||
oncompositionend={handleCompositionEnd}
|
||||
aria-invalid={hasErrors ? "true" : ""}
|
||||
aria-invalid={hasError ? "true" : ""}
|
||||
/>
|
||||
{#if hasErrors}
|
||||
{#if hasError}
|
||||
<small id={schemaField.id + "-help"}
|
||||
>{validationErrors[0].message}</small
|
||||
>{validationError.message}</small
|
||||
>
|
||||
{:else if schemaField.help != ""}
|
||||
<small id={schemaField.id + "-help"}>{schemaField.help}</small>
|
||||
|
||||
Reference in New Issue
Block a user