@evenicanpm/portal-editor-ui 1.5.0 → 1.7.0

package/src/features/editor/components/column-list/column-list.tsx

@@ -0,0 +1,212 @@
+import {
+	closestCenter,
+	DndContext,
+	type DragEndEvent,
+	PointerSensor,
+	TouchSensor,
+	useSensor,
+	useSensors,
+} from "@dnd-kit/core";
+import {
+	arrayMove,
+	SortableContext,
+	verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import type { Column, ViewConfig } from "@evenicanpm/portal-types-schemas";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import {
+	Box,
+	Button,
+	Card,
+	CardContent,
+	Chip,
+	Menu,
+	MenuItem,
+	Typography,
+} from "@mui/material";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import type { EditorQueries } from "../editor";
+import { ColumnCard } from "./column-card";
+import {
+	addFieldToEnd,
+	getRemovedFields,
+	getVisibleFields,
+	patchField,
+	removeField,
+	reorderVisibleFields,
+} from "./column-list-state";
+
+export type ColumnListProps = {
+	resourceKey: string;
+	initialState: ViewConfig;
+	editorQueries: EditorQueries;
+};
+
+export function ColumnList({
+	resourceKey,
+	initialState,
+	editorQueries,
+}: Readonly<ColumnListProps>) {
+	const columns = initialState.Columns;
+	const actions = initialState.Actions;
+	const [fields, setFields] = useState<Column[]>(columns ?? []);
+	const [addAnchor, setAddAnchor] = useState<null | HTMLElement>(null);
+	const addOpen = Boolean(addAnchor);
+
+	const sensors = useSensors(
+		useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
+		useSensor(TouchSensor, {
+			activationConstraint: { delay: 150, tolerance: 5 },
+		}),
+	);
+
+	const qc = useQueryClient();
+
+	const saveConfig = useMutation({
+		...editorQueries.saveViewConfigMutation(resourceKey),
+		onSuccess: () => {
+			qc.invalidateQueries({ queryKey: ["viewConfig", resourceKey] });
+		},
+	});
+
+	const visibleFields = getVisibleFields(fields);
+	const removedFields = getRemovedFields(fields);
+
+	const onDragEnd = (event: DragEndEvent) => {
+		const { active, over } = event;
+		if (!over) return;
+		if (active.id === over.id) return;
+
+		setFields((prev) =>
+			reorderVisibleFields(prev, String(active.id), String(over.id), arrayMove),
+		);
+	};
+
+	const onChangeField = (id: string, patch: Partial<Column>) => {
+		setFields((prev) => patchField(prev, id, patch));
+	};
+
+	const onRemoveField = (id: string) => {
+		setFields((prev) => removeField(prev, id));
+	};
+
+	const onAddField = (id: string) => {
+		setFields((prev) => addFieldToEnd(prev, id));
+	};
+
+	const isDirty =
+		JSON.stringify(initialState.Columns) !== JSON.stringify(fields);
+
+	const onSaveClick = () => {
+		if (!isDirty) return;
+
+		saveConfig.mutate({
+			key: resourceKey,
+			viewConfig: { Columns: fields, Actions: actions },
+		});
+	};
+
+	return (
+		<>
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "flex-end",
+					alignItems: "center",
+					position: "relative",
+					mb: 2,
+					height: 40,
+				}}
+			>
+				{isDirty && (
+					<Chip
+						label="Unsaved Changes"
+						size="small"
+						color="warning"
+						variant="outlined"
+						sx={{
+							fontWeight: "bold",
+							height: 20,
+							position: "absolute",
+							left: 0,
+						}}
+					/>
+				)}
+				<Button
+					variant="contained"
+					onClick={onSaveClick}
+					disabled={!isDirty}
+					sx={{ minWidth: 150 }}
+				>
+					Save Changes
+				</Button>
+			</Box>
+
+			<DndContext
+				sensors={sensors}
+				collisionDetection={closestCenter}
+				onDragEnd={onDragEnd}
+			>
+				{fields.length === 0 ? (
+					<Card
+						variant="outlined"
+						sx={{
+							textAlign: "center",
+							color: "text.secondary",
+						}}
+					>
+						<CardContent>
+							<Typography variant="subtitle1">No fields found</Typography>
+						</CardContent>
+					</Card>
+				) : (
+					<SortableContext
+						items={visibleFields.map((f) => f.Data)}
+						strategy={verticalListSortingStrategy}
+					>
+						<Box>
+							{visibleFields.map((field) => (
+								<ColumnCard
+									key={field.Data}
+									field={field}
+									onChange={onChangeField}
+									onRemove={onRemoveField}
+								/>
+							))}
+
+							<Box sx={{ display: "flex", justifyContent: "center", mt: 1 }}>
+								<Button
+									variant="outlined"
+									startIcon={<AddCircleOutlineIcon />}
+									onClick={(e) => setAddAnchor(e.currentTarget)}
+									disabled={removedFields.length === 0}
+								>
+									Add column
+								</Button>
+							</Box>
+
+							<Menu
+								anchorEl={addAnchor}
+								open={addOpen}
+								onClose={() => setAddAnchor(null)}
+							>
+								{removedFields.map((f) => (
+									<MenuItem
+										key={f.Data}
+										onClick={() => {
+											onAddField(f.Data);
+											setAddAnchor(null);
+										}}
+									>
+										{f.Label || f.Data}
+									</MenuItem>
+								))}
+							</Menu>
+						</Box>
+					</SortableContext>
+				)}
+			</DndContext>
+		</>
+	);
+}

package/src/features/editor/components/editor-dms-card.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { CheckCircle } from "@mui/icons-material";
+import { Avatar, Box, Paper, Stack, Typography } from "@mui/material";
+
+interface Props {
+	/** Currently selected resource */
+	selectedResourceKey: string;
+	/** A pojo with providers -> images */
+	providerImageMap: Record<string, string>;
+	/** A pojo with resources -> providers */
+	resourceProviderMap: Record<string, string>;
+}
+
+/**
+ * Editor view header contains provider details and other
+ * resource/view config data not related to the column list.
+ */
+export function EditorDMSCard({
+	selectedResourceKey,
+	providerImageMap,
+	resourceProviderMap,
+}: Readonly<Props>) {
+	const selectedResourceProvider = resourceProviderMap[selectedResourceKey];
+	const logoUrl = providerImageMap[selectedResourceProvider];
+	return (
+		<Paper
+			elevation={1}
+			sx={{
+				p: { xs: 2, sm: 3 },
+				mb: 3,
+				borderRadius: 2,
+			}}
+		>
+			<Stack
+				direction={{ xs: "column", sm: "row" }}
+				justifyContent="space-between"
+				alignItems={{ xs: "stretch", sm: "center" }}
+				spacing={2}
+			>
+				<Stack direction="row" spacing={2} alignItems="center">
+					<Avatar
+						src={logoUrl}
+						alt={`${selectedResourceKey}-${logoUrl}`}
+						sx={{
+							width: 56,
+							height: 56,
+						}}
+					/>
+					<Box>
+						<Typography variant="h5" fontWeight={700}>
+							Resource: {selectedResourceKey || "None"}
+						</Typography>
+						<Stack
+							direction="row"
+							spacing={1}
+							alignItems="center"
+							sx={{ mt: 0.5 }}
+						>
+							<Typography variant="body2" color="text.secondary">
+								provider: {selectedResourceProvider}
+							</Typography>
+
+							<Stack direction="row" spacing={0.5} alignItems="center">
+								<CheckCircle sx={{ fontSize: 16, color: "success.main" }} />
+								<Typography
+									variant="body2"
+									sx={{ color: "success.main", fontWeight: 600 }}
+								>
+									enabled
+								</Typography>
+							</Stack>
+						</Stack>
+					</Box>
+				</Stack>
+			</Stack>
+		</Paper>
+	);
+}

package/src/features/editor/components/editor-tabs.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Box, Paper, Tab, Tabs, Typography } from "@mui/material";
+
+interface Props {
+	/** List of resource keys to select from */
+	resourceList: string[];
+	/** Currently selected key */
+	selectedResourceKey: string;
+	/** Action to take when resource changes. */
+	handleChangeResource: (id: string) => void;
+}
+
+/**
+ * Tab-based selection menu for resource keys on the editor page.
+ */
+function EditorResourceTabs({
+	resourceList,
+	selectedResourceKey,
+	handleChangeResource,
+}: Readonly<Props>) {
+	return (
+		<Box sx={{ my: 3 }}>
+			<Typography variant="subtitle1" fontWeight={600} gutterBottom>
+				Selected Resource
+			</Typography>
+			<Paper>
+				<Tabs
+					value={selectedResourceKey}
+					onChange={(_, v) => handleChangeResource(v)}
+					variant="fullWidth"
+				>
+					{resourceList.map((docType) => (
+						<Tab key={docType} label={docType} value={docType} />
+					))}
+				</Tabs>
+			</Paper>
+		</Box>
+	);
+}
+
+export { EditorResourceTabs };

package/src/features/editor/components/editor.tsx

@@ -0,0 +1,62 @@
+"use client";
+import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
+import { Box } from "@mui/material";
+import type { QueryKey } from "@tanstack/react-query";
+import { useState } from "react";
+import { ColumnListSection } from "./column-list";
+import { EditorDMSCard } from "./editor-dms-card";
+import { EditorResourceTabs } from "./editor-tabs";
+
+export type SaveInput = { key: string; viewConfig: ViewConfig };
+
+export type ViewConfigQuery = (resourceKey: string) => {
+	queryKey: QueryKey;
+	queryFn: () => Promise<ViewConfig>;
+};
+
+export type SaveViewConfigMutation = (resourceKey: string) => {
+	mutationKey: QueryKey;
+	mutationFn: (input: SaveInput) => Promise<ViewConfig>;
+};
+
+export type EditorQueries = {
+	viewConfigQuery: ViewConfigQuery;
+	saveViewConfigMutation: SaveViewConfigMutation;
+};
+
+export interface EditorProps {
+	resourceList: string[];
+	providerMetaData: Record<string, string>;
+	resourceProviderMap: Record<string, string>;
+	editorQueries: EditorQueries;
+}
+/**
+ * Top-Level editor component.
+ */
+export function Editor({
+	resourceList,
+	providerMetaData,
+	resourceProviderMap,
+	editorQueries,
+}: Readonly<EditorProps>) {
+	const [currentResource, setCurrentResource] = useState(resourceList[0]);
+
+	return (
+		<Box sx={{ p: { sm: 3 }, maxWidth: 1200, mx: "auto" }}>
+			<EditorResourceTabs
+				resourceList={resourceList}
+				handleChangeResource={setCurrentResource}
+				selectedResourceKey={currentResource}
+			/>
+			<EditorDMSCard
+				selectedResourceKey={currentResource}
+				providerImageMap={providerMetaData}
+				resourceProviderMap={resourceProviderMap}
+			/>
+			<ColumnListSection
+				currentResourceKey={currentResource}
+				editorQueries={editorQueries}
+			/>
+		</Box>
+	);
+}

package/{dist/index.d.ts → src/index.ts}

@@ -1,2 +1,3 @@
 export { Portal, type PortalProps } from "./editor";
+
 export { Editor } from "./features/editor";

package/dist/features/editor/components/column-list/column-card/column-card-options.d.ts

@@ -1,9 +0,0 @@
-export type ColumnCardOptionsValue = {
-    isSortable: boolean;
-    isSearchable: boolean;
-};
-export type ColumnCardOptionsProps = {
-    value: ColumnCardOptionsValue;
-    onChange: (patch: Partial<ColumnCardOptionsValue>) => void;
-};
-export declare function ColumnCardOptions({ value, onChange, }: Readonly<ColumnCardOptionsProps>): import("react").JSX.Element;

package/dist/features/editor/components/column-list/column-card/column-card-title.d.ts

@@ -1,4 +0,0 @@
-export type ColumnCardTitleProps = {
-    value: string;
-};
-export declare function ColumnCardTitle({ value }: Readonly<ColumnCardTitleProps>): import("react").JSX.Element;

package/dist/features/editor/components/column-list/column-card/column-card.d.ts

@@ -1,8 +0,0 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
-import * as React from "react";
-export type ColumnCardProps = {
-    field: Column;
-    onChange: (id: string, patch: Partial<Column>) => void;
-    onRemove: (id: string) => void;
-};
-export declare function ColumnCard({ field, onChange, onRemove, }: Readonly<ColumnCardProps>): React.JSX.Element;

package/dist/features/editor/components/column-list/column-card/drag-handle.d.ts

@@ -1,6 +0,0 @@
-import type { DraggableAttributes, DraggableSyntheticListeners } from "@dnd-kit/core";
-export type DragHandleProps = {
-    attributes: DraggableAttributes;
-    listeners?: DraggableSyntheticListeners;
-};
-export declare function DragHandle({ attributes, listeners, }: Readonly<DragHandleProps>): import("react").JSX.Element;

package/dist/features/editor/components/column-list/column-card/editable-label.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-export type EditableLabelProps = {
-    value: string;
-    onCommit: (next: string) => void;
-    labelPrefix?: string;
-    inputWidth?: {
-        xs: string | number;
-        sm: string | number;
-    };
-};
-export declare function EditableLabel({ value, onCommit, labelPrefix, inputWidth, }: Readonly<EditableLabelProps>): React.JSX.Element;

package/dist/features/editor/components/column-list/column-list-section.d.ts

@@ -1,12 +0,0 @@
-import type { EditorQueries } from "../editor";
-interface ColumnProps {
-    currentResourceKey: string;
-    editorQueries: EditorQueries;
-}
-/**
- * The view config column list section that handles
- * fetching the initial view config data thats stored in the db
- * and handles loading state skeleton view while data is pending
- */
-export declare function ColumnListSection({ currentResourceKey, editorQueries, }: Readonly<ColumnProps>): import("react").JSX.Element;
-export {};

package/dist/features/editor/components/column-list/column-list-skeleton.d.ts

@@ -1 +0,0 @@
-export declare function ColumnListSkeleton(): import("react").JSX.Element;

package/dist/features/editor/components/column-list/column-list-state.d.ts

@@ -1,33 +0,0 @@
-import type { Column } from "@evenicanpm/portal-types-schemas";
-/**
- * Reassigns sequential ColumnOrder values (1..n) to visible fields.
- */
-export declare function normalizeVisibleOrders(list: Column[]): Column[];
-/**
- * Returns fields that are currently visible (ColumnOrder not null),
- * sorted by ColumnOrder.
- */
-export declare function getVisibleFields(fields: Column[]): Column[];
-/**
- * Returns fields that are currently removed (ColumnOrder null),
- * sorted alphabetically by label or data key.
- */
-export declare function getRemovedFields(fields: Column[]): Column[];
-/**
- * Applies a partial update to a single field by id.
- */
-export declare function patchField(fields: Column[], id: string, patch: Partial<Column>): Column[];
-/**
- * Removes a field from the visible list by setting ColumnOrder to null
- * and re-normalizes remaining visible fields.
- */
-export declare function removeField(fields: Column[], id: string): Column[];
-/**
- * Adds a previously removed field back to the end of the visible list
- * and re-normalizes ordering.
- */
-export declare function addFieldToEnd(fields: Column[], id: string): Column[];
-/**
- * Reorders visible fields after a drag operation and updates ColumnOrder.
- */
-export declare function reorderVisibleFields(fields: Column[], activeId: string, overId: string, arrayMoveFn: <T>(array: T[], from: number, to: number) => T[]): Column[];

package/dist/features/editor/components/column-list/column-list-title.d.ts

@@ -1,5 +0,0 @@
-interface Props {
-    selectedResourceKey: string;
-}
-export declare function ColumnListTitle({ selectedResourceKey }: Readonly<Props>): import("react").JSX.Element;
-export {};

package/dist/features/editor/components/column-list/column-list.d.ts

@@ -1,8 +0,0 @@
-import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
-import type { EditorQueries } from "../editor";
-export type ColumnListProps = {
-    resourceKey: string;
-    initialState: ViewConfig;
-    editorQueries: EditorQueries;
-};
-export declare function ColumnList({ resourceKey, initialState, editorQueries, }: Readonly<ColumnListProps>): import("react").JSX.Element;

package/dist/features/editor/components/editor-dms-card.d.ts

@@ -1,14 +0,0 @@
-interface Props {
-    /** Currently selected resource */
-    selectedResourceKey: string;
-    /** A pojo with providers -> images */
-    providerImageMap: Record<string, string>;
-    /** A pojo with resources -> providers */
-    resourceProviderMap: Record<string, string>;
-}
-/**
- * Editor view header contains provider details and other
- * resource/view config data not related to the column list.
- */
-export declare function EditorDMSCard({ selectedResourceKey, providerImageMap, resourceProviderMap, }: Readonly<Props>): import("react").JSX.Element;
-export {};

package/dist/features/editor/components/editor-tabs.d.ts

@@ -1,13 +0,0 @@
-interface Props {
-    /** List of resource keys to select from */
-    resourceList: string[];
-    /** Currently selected key */
-    selectedResourceKey: string;
-    /** Action to take when resource changes. */
-    handleChangeResource: (id: string) => void;
-}
-/**
- * Tab-based selection menu for resource keys on the editor page.
- */
-declare function EditorResourceTabs({ resourceList, selectedResourceKey, handleChangeResource, }: Readonly<Props>): import("react").JSX.Element;
-export { EditorResourceTabs };

package/dist/features/editor/components/editor.d.ts

@@ -1,28 +0,0 @@
-import type { ViewConfig } from "@evenicanpm/portal-types-schemas";
-import type { QueryKey } from "@tanstack/react-query";
-export type SaveInput = {
-    key: string;
-    viewConfig: ViewConfig;
-};
-export type ViewConfigQuery = (resourceKey: string) => {
-    queryKey: QueryKey;
-    queryFn: () => Promise<ViewConfig>;
-};
-export type SaveViewConfigMutation = (resourceKey: string) => {
-    mutationKey: QueryKey;
-    mutationFn: (input: SaveInput) => Promise<ViewConfig>;
-};
-export type EditorQueries = {
-    viewConfigQuery: ViewConfigQuery;
-    saveViewConfigMutation: SaveViewConfigMutation;
-};
-export interface EditorProps {
-    resourceList: string[];
-    providerMetaData: Record<string, string>;
-    resourceProviderMap: Record<string, string>;
-    editorQueries: EditorQueries;
-}
-/**
- * Top-Level editor component.
- */
-export declare function Editor({ resourceList, providerMetaData, resourceProviderMap, editorQueries, }: Readonly<EditorProps>): import("react").JSX.Element;