@riducms/admin 0.2.3 → 0.3.0

package/src/features/uploads/bulk-upload-editor.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import { Dialog } from "bits-ui";
+	import { Link } from "@hvniel/svelte-router";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button, buttonVariants } from "@riducms/ui";
+	import { tick, untrack } from "svelte";
+	import ChevronLeftIcon from "~icons/lucide/chevron-left";
+	import ChevronRightIcon from "~icons/lucide/chevron-right";
+	import XIcon from "~icons/lucide/x";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
+	import { documentPath, withContentLocale } from "@admin/core/routing/admin-paths";
+	import DocumentFieldSections from "@admin/features/documents/document-field-sections.svelte";
+	import UploadDocumentPreview from "@admin/features/documents/upload-document-preview-loader.svelte";
+	import type { BulkUploadController } from "@admin/features/uploads/bulk-upload-controller.svelte";
+
+	let {
+		controller,
+		closePath,
+		contentDirection,
+	}: {
+		controller: BulkUploadController;
+		closePath: string;
+		contentDirection: "ltr" | "rtl";
+	} = $props();
+	const i18n = getAdminI18n();
+	const formID = $props.id();
+	// Only submit/retry handlers read this DOM binding.
+	// svelte-ignore non_reactive_update
+	let formElement: HTMLFormElement;
+	const activeItem = $derived(controller.activeItem);
+
+	$effect(() => {
+		const item = activeItem;
+		if (item === undefined) return;
+		const blocked =
+			item.status === "complete" || item.status === "uncertain" || !controller.canCreate;
+		untrack(() => (item.form.writeBlocked = blocked));
+		return () => {
+			untrack(() => (item.form.writeBlocked = false));
+		};
+	});
+
+	async function save(event: SubmitEvent) {
+		event.preventDefault();
+		await saveAll();
+	}
+
+	async function saveAll() {
+		await controller.saveAll();
+		await focusActiveIssue();
+	}
+
+	async function retry() {
+		const item = controller.activeItem;
+		if (item === undefined) return;
+		await controller.retry(item);
+		await focusActiveIssue();
+	}
+
+	async function focusActiveIssue() {
+		await tick();
+		const issue = controller.activeItem?.form.issues[0];
+		if (issue !== undefined && formElement) await focusFieldIssue(issue.path, formElement);
+	}
+</script>
+
+<main class="ridu-bulk-upload-editor">
+	<header class="ridu-bulk-upload-header">
+		<Dialog.Title level={1} id="bulk-upload-title" class="ridu-bulk-upload-header__title">
+			{controller.collection === undefined
+				? i18n.t("uploads:asset")
+				: i18n.text(
+						controller.collection.labels.singular,
+						controller.collection.labels.singularTranslations
+					)}
+		</Dialog.Title>
+		<Link
+			class={buttonVariants({ variant: "ghost", size: "icon-sm" })}
+			to={closePath}
+			aria-label={i18n.t("general:close")}
+		>
+			<XIcon />
+		</Link>
+	</header>
+
+	<div class="ridu-bulk-upload-actions">
+		<div class="ridu-bulk-upload-actions__navigation">
+			<p>
+				<strong>{i18n.formatNumber(controller.activeIndex + 1)}</strong>
+				{i18n.t("uploads:ofFiles", {
+					count: controller.queue.length,
+					formattedCount: i18n.formatNumber(controller.queue.length),
+				})}
+			</p>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon-xs"
+				aria-label={i18n.t("general:previous")}
+				disabled={controller.queue.length < 2 || controller.running}
+				onclick={controller.previous}
+			>
+				<ChevronLeftIcon class="ridu-bulk-upload-actions__chevron" />
+			</Button>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon-xs"
+				aria-label={i18n.t("general:next")}
+				disabled={controller.queue.length < 2 || controller.running}
+				onclick={controller.next}
+			>
+				<ChevronRightIcon class="ridu-bulk-upload-actions__chevron" />
+			</Button>
+			<Button
+				type="button"
+				variant="outline"
+				size="sm"
+				disabled={controller.running ||
+					controller.draftItems.length === 0 ||
+					controller.bulkEditFields.length === 0}
+				onclick={controller.openBulkEdit}
+			>
+				{i18n.t("uploads:editAll")}
+			</Button>
+		</div>
+		<Button
+			type="submit"
+			form={formID}
+			disabled={controller.running ||
+				controller.preparing ||
+				controller.pendingCount === 0 ||
+				!controller.canCreate}
+		>
+			{i18n.t(controller.running ? "uploads:uploading" : "general:save")}
+		</Button>
+	</div>
+
+	{#if activeItem}
+		{#key activeItem.id}
+			<form
+				bind:this={formElement}
+				id={formID}
+				class="ridu-bulk-upload-editor__form"
+				novalidate
+				onsubmit={save}
+			>
+				{#if activeItem.error}
+					<Banner tone={activeItem.status === "uncertain" ? "warning" : "destructive"}>
+						<div class="ridu-bulk-upload-editor__error">
+							<span>{activeItem.error}</span>
+							{#if activeItem.status === "failed"}
+								<Button type="button" size="xs" variant="outline" onclick={retry}>
+									{i18n.t("general:retry")}
+								</Button>
+							{/if}
+						</div>
+					</Banner>
+				{/if}
+
+				{#if activeItem.documentID}
+					<Link
+						class="ridu-bulk-upload-editor__result"
+						to={withContentLocale(
+							documentPath(controller.collection?.slug ?? "", activeItem.documentID),
+							controller.locale
+						)}
+					>
+						{i18n.t("uploads:openAsset")}
+					</Link>
+				{/if}
+
+				<fieldset
+					dir={contentDirection}
+					disabled={!activeItem.editable || controller.running || !controller.canCreate}
+				>
+					{#if controller.collection?.uploadSettings}
+						<UploadDocumentPreview
+							draft={activeItem.upload}
+							settings={controller.collection.uploadSettings}
+							editable={activeItem.editable && controller.canCreate && !controller.running}
+						/>
+					{/if}
+					<DocumentFieldSections fields={controller.editableFields} form={activeItem.form} />
+				</fieldset>
+			</form>
+		{/key}
+	{/if}
+</main>

package/src/features/uploads/bulk-upload-file-picker.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import FileUpIcon from "~icons/lucide/file-up";
+
+	import type { BulkUploadController } from "@admin/features/uploads/bulk-upload-controller.svelte";
+
+	let { controller, compact = false }: { controller: BulkUploadController; compact?: boolean } =
+		$props();
+	const i18n = getAdminI18n();
+	let input: HTMLInputElement;
+	let dragging = $state(false);
+	const disabled = $derived(
+		!controller.uploadEnabled ||
+			!controller.canCreate ||
+			controller.running ||
+			controller.accessLoading
+	);
+	const acceptedTypes = $derived(controller.collection?.uploadSettings?.mimeTypes.join(",") ?? "");
+
+	function choose(event: Event) {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		controller.addFiles(Array.from(event.currentTarget.files ?? []));
+		event.currentTarget.value = "";
+	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragging = false;
+		if (disabled) return;
+		controller.addFiles(Array.from(event.dataTransfer?.files ?? []));
+	}
+</script>
+
+<!-- File drops supplement the keyboard-accessible chooser. -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class={[
+		"ridu-bulk-upload-picker",
+		{
+			"ridu-bulk-upload-picker--compact": compact,
+			"ridu-bulk-upload-picker--dragging": dragging,
+		},
+	]}
+	ondragover={(event) => {
+		event.preventDefault();
+		if (!disabled) dragging = true;
+	}}
+	ondragleave={(event) => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) dragging = false;
+	}}
+	ondrop={drop}
+>
+	<input
+		bind:this={input}
+		type="file"
+		multiple
+		accept={acceptedTypes}
+		{disabled}
+		aria-hidden="true"
+		tabindex="-1"
+		onchange={choose}
+	/>
+	<button type="button" {disabled} onclick={() => input.click()}>
+		<FileUpIcon aria-hidden="true" />
+		<span>{i18n.t(compact ? "uploads:addFile" : "uploads:chooseFile")}</span>
+	</button>
+	{#if !compact}
+		<p>{i18n.t("uploads:dropFile")}</p>
+	{/if}
+</div>

package/src/features/uploads/bulk-upload-remote.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { Link } from "@hvniel/svelte-router";
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button, Input } from "@riducms/ui";
+	import { tick, untrack } from "svelte";
+
+	import { Banner } from "@admin/components/ui/banner";
+	import { focusFieldIssue } from "@admin/core/forms/field-issue-focus";
+	import { documentPath, withContentLocale } from "@admin/core/routing/admin-paths";
+	import { bulkUploadRenderFields } from "@admin/features/uploads/bulk-upload";
+	import type { BulkUploadController } from "@admin/features/uploads/bulk-upload-controller.svelte";
+	import DocumentFieldSections from "@admin/features/documents/document-field-sections.svelte";
+
+	let {
+		controller,
+		contentDirection,
+	}: { controller: BulkUploadController; contentDirection: "ltr" | "rtl" } = $props();
+	const i18n = getAdminI18n();
+	const renderedFields = $derived(
+		bulkUploadRenderFields(controller.editableFields, "bulk-upload-remote")
+	);
+
+	$effect(() => {
+		const blocked =
+			controller.remoteOutcomeUncertain || !controller.uploadEnabled || !controller.canCreate;
+		untrack(() => (controller.remoteForm.writeBlocked = blocked));
+		return () => {
+			untrack(() => (controller.remoteForm.writeBlocked = false));
+		};
+	});
+
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		const form = event.currentTarget;
+		if (!(form instanceof HTMLFormElement)) return;
+		const urlInput = form.elements.namedItem("remoteURL");
+		if (!(urlInput instanceof HTMLInputElement) || !urlInput.reportValidity()) return;
+
+		await controller.uploadRemote();
+		const issue = controller.remoteForm.issues[0];
+		if (issue !== undefined) {
+			await tick();
+			await focusFieldIssue(issue.path, form);
+		}
+	}
+</script>
+
+<details class="ridu-bulk-upload-remote">
+	<summary>{i18n.t("uploads:pasteURL")}</summary>
+	<form novalidate onsubmit={submit}>
+		<p>{i18n.t("uploads:remoteImportDescription")}</p>
+		<div class="ridu-bulk-upload-remote__url">
+			<Input
+				type="url"
+				name="remoteURL"
+				required
+				aria-label={i18n.t("uploads:assetURL")}
+				placeholder="https://"
+				value={controller.remoteURL}
+				disabled={controller.remotePending || !controller.uploadEnabled || !controller.canCreate}
+				oninput={(event) => controller.setRemoteURL(event.currentTarget.value)}
+				onchange={controller.prepareRemoteDefaults}
+			/>
+		</div>
+
+		{#if controller.remoteError}
+			<Banner tone="destructive">{controller.remoteError}</Banner>
+		{/if}
+
+		{#if controller.remoteDocumentID && !controller.remoteForm.dirty}
+			<Link
+				class="ridu-bulk-upload-remote__result"
+				to={withContentLocale(
+					documentPath(controller.collection?.slug ?? "", controller.remoteDocumentID),
+					controller.locale
+				)}
+			>
+				{i18n.t("uploads:openImportedAsset")}
+			</Link>
+		{/if}
+
+		<fieldset
+			dir={contentDirection}
+			disabled={controller.remotePending || !controller.uploadEnabled || !controller.canCreate}
+		>
+			<DocumentFieldSections fields={renderedFields} form={controller.remoteForm} stacked />
+		</fieldset>
+
+		<Button
+			type="submit"
+			disabled={controller.remotePending ||
+				controller.remoteOutcomeUncertain ||
+				!controller.uploadEnabled ||
+				!controller.canCreate ||
+				controller.remoteURL.trim() === ""}
+		>
+			{i18n.t(controller.remotePending ? "uploads:importing" : "uploads:importFromURL")}
+		</Button>
+	</form>
+</details>

package/src/features/uploads/bulk-upload-route-loader.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { getAdminI18n } from "@riducms/plugin";
+	import { Button } from "@riducms/ui";
+	import { preparedAdminModule } from "@admin/core/bootstrap/admin-route-modules";
+	import { registerAdminScrollPage } from "@admin/core/routing/admin-scroll.svelte";
+
+	registerAdminScrollPage({ ready: () => false });
+	const i18n = getAdminI18n();
+	const route =
+		preparedAdminModule<typeof import("@admin/features/uploads/bulk-upload-route.svelte")>(
+			"bulk-upload"
+		) ?? import("@admin/features/uploads/bulk-upload-route.svelte");
+</script>
+
+{#await route}
+	<section
+		class="ridu-bulk-upload-module"
+		data-ridu-loading-surface="bulk-upload-module"
+		aria-busy="true"
+		aria-label={i18n.t("general:loading")}
+	>
+		<p>{i18n.t("general:loading")}</p>
+	</section>
+{:then { default: BulkUploadRoute }}
+	<BulkUploadRoute />
+{:catch}
+	<section class="ridu-bulk-upload-module ridu-bulk-upload-module--error" role="alert">
+		<p>{i18n.t("uploads:workspaceLoadFailed")}</p>
+		<Button onclick={() => window.location.reload()}>{i18n.t("general:reloadPage")}</Button>
+	</section>
+{/await}
+
+<style lang="scss">
+	@layer ridu.components {
+		.ridu-bulk-upload-module {
+			display: grid;
+			place-content: center;
+			justify-items: center;
+			gap: 20px;
+			min-block-size: 288px;
+			padding: 20px;
+			color: var(--foreground-muted);
+			font-size: var(--font-size-body);
+
+			&--error {
+				color: var(--destructive);
+			}
+
+			p {
+				margin: 0;
+			}
+		}
+	}
+</style>