@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/sidebar/ViewSelector.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { classNames } from "primereact/utils";
+
+import { useEditContext } from "../client/editContext";
+import { cn } from "../../lib/utils";
+
+export function ViewSelector() {
+  const editContext = useEditContext();
+  const userViews = editContext?.userInfo.views;
+
+  const views =
+    editContext?.configuration.editor.views
+      .filter(
+        (x) =>
+          (x.visible && x.visible(editContext)) || (!x.visible && !x.hidden),
+      )
+      .filter(
+        (x) =>
+          !userViews || userViews.map((view) => view.name).includes(x.name),
+      ) ?? [];
+
+  return (
+    <div
+      className={cn(
+        "z-10 flex items-center gap-3 bg-neutral-200 p-2 shadow-md",
+        editContext?.isMobile
+          ? "scrollbar-hide flex-row overflow-x-auto"
+          : "max-w-11 flex-col",
+      )}
+    >
+      {views
+        .filter((x) => x.icon)
+        .map((x, i) => (
+          <div
+            title={x.title}
+            key={i}
+            className={classNames(
+              editContext?.viewName == x.name
+                ? "active bg-neutral-350 rounded-sm text-neutral-800"
+                : "text-neutral-500 hover:text-gray-900",
+              "cursor-pointer p-1.5",
+              editContext?.isMobile ? "flex-shrink-0" : "",
+            )}
+            data-sidebarview-name={x.name}
+            onClick={() => {
+              if (x.name !== editContext?.viewName) {
+                editContext?.switchView(x.name);
+              }
+            }}
+          >
+            {x.icon &&
+              React.isValidElement(x.icon) &&
+              React.cloneElement(x.icon as React.ReactElement<any>, {
+                className: "w-5 h-5",
+              })}
+          </div>
+        ))}
+    </div>
+  );
+}

package/src/editor/sidebar/Workbox.tsx

@@ -0,0 +1,209 @@
+import { useEditContext } from "../client/editContext";
+import { Tooltip } from "primereact/tooltip";
+import { Button } from "primereact/button";
+import { useRef, useState } from "react";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import { classNames } from "primereact/utils";
+
+import { SimpleTable } from "../ui/SimpleTable";
+import { WorkboxItem } from "../../types";
+
+export function Workbox() {
+  const [validationOverlayItem, setValidationOverlayItem] =
+    useState<WorkboxItem>();
+
+  const editContext = useEditContext();
+
+  const validationResult = editContext?.validationResult;
+
+  if (!editContext) return null;
+
+  const validationOverlay = useRef<OverlayPanel>(null);
+
+  const nameBodyTemplate = (wbItem: WorkboxItem) => {
+    const id = wbItem.item.id + wbItem.item.language + wbItem.item.version;
+    return (
+      <div className="flex gap-2 items-center">
+        {/* {(wbItem.lockedBy || wbItem.hasLock) && (
+          <>
+            <i
+              className={
+                `lock-tooltip-${id} ` +
+                "text-xs pi pi-lock cursor-pointer " +
+                (wbItem.hasLock ? "text-green-600" : "text-red-600")
+              }
+              onClick={() => {
+                unlockItems([wbItem.item]);
+              }}
+            />
+            <Tooltip
+              target={`.a-lock-tooltip-${id}`}
+              content={wbItem.lockedBy}
+            />
+          </>
+        )}
+        {!wbItem.lockedBy && !wbItem.hasLock && (
+          <i
+            className="text-xs pi pi-lock-open cursor-pointer"
+            onClick={() => {
+              lockItems([wbItem.item]);
+            }}
+          />
+        )} */}
+
+        <span
+          className={`name-tooltip-${id} break-all`}
+          style={{ position: "relative" }}
+        >
+          {wbItem.name}{" "}
+          <span className="text-gray-500">
+            ({wbItem.item.language}, {wbItem.item.version})
+          </span>
+          <Tooltip target={`.a-name-tooltip-${id}`} content={wbItem.path} />
+        </span>
+      </div>
+    );
+  };
+
+  const stateBodyTemplate = (item: WorkboxItem) => {
+    if (item.isPublishable) {
+      const targets = Object.keys(item.publishStatus);
+      return targets.map((x) => (
+        <div key={x}>
+          {targets.length > 1 && (
+            <>
+              <b>{x}</b>:
+            </>
+          )}
+          {item.publishStatus[x]}
+        </div>
+      ));
+    } else return item.workflowState;
+  };
+
+  const actionsBodyTemplate = (item: WorkboxItem) => {
+    return (
+      <div className="flex flex-wrap gap-1">
+        {!item.isFinalState &&
+          item.workflowCommands?.map((action) => {
+            return (
+              <Button
+                key={action.id}
+                label={action.name}
+                className="text-xs p-1"
+                onClick={() =>
+                  editContext.operations.executeWorkflowCommand(
+                    item.item,
+                    action.id
+                  )
+                }
+                size="small"
+              />
+            );
+          })}
+      </div>
+    );
+  };
+
+  const validationTemplate = (item: WorkboxItem) => {
+    const validator = validationResult?.find(
+      (x) =>
+        x.item.id === item.item.id &&
+        x.item.language === item.item.language &&
+        x.item.version === item.item.version
+    );
+    if (!validator || !validator.results.length) return null;
+    return (
+      <div
+        className={classNames(
+          "cursor-pointer",
+          getValidationErrorLevelClass(
+            validator.results.reduce(
+              (prev, curr) => Math.max(prev, curr.result),
+              0
+            )
+          )
+        )}
+        onClick={(ev) => {
+          setValidationOverlayItem(item);
+          validationOverlay.current?.toggle(ev);
+        }}
+      >
+        {validator.results.length}
+      </div>
+    );
+  };
+
+  if (!editContext.workboxItems) return null;
+
+  const overlayResult = validationResult?.find(
+    (x) =>
+      x.item.id === validationOverlayItem?.item.id &&
+      x.item.language === validationOverlayItem?.item.language &&
+      x.item.version === validationOverlayItem?.item.version
+  );
+
+  const getValidationErrorLevelClass = (level: number) => {
+    switch (level) {
+      case 0:
+        return "text-green-600";
+      case 1:
+        return "text-blue-600";
+      case 2:
+        return "text-yellow-600";
+      case 3:
+        return "text-orange-600";
+      case 4:
+      case 5:
+        return "text-red-600";
+    }
+  };
+
+  const columns = [
+    { body: nameBodyTemplate, header: "Item" },
+    { body: stateBodyTemplate, header: "State" },
+    { body: actionsBodyTemplate, header: "Actions" },
+    {
+      body: validationTemplate,
+      align: "center",
+      header: <i className="pi pi-check" />,
+    },
+  ];
+
+  return (
+    <>
+      <SimpleTable items={editContext.workboxItems} columns={columns} />
+      <OverlayPanel ref={validationOverlay}>
+        <table className="text-xs border-spacing-1 border-separate m-3">
+          <thead>
+            <tr>
+              <th className="text-left">Item</th>
+              <th className="text-left">Field</th>
+              <th className="text-left">Validator</th>
+              <th className="text-left">Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            {overlayResult &&
+              overlayResult.results.map((x) => (
+                <tr key={x.fieldId + x.itemId}>
+                  <td>{x.itemName}</td>
+                  <td>{x.fieldName}</td>
+                  <td>{x.validator}</td>
+                  <td
+                    className={classNames(
+                      "text-xs break-all max-w-48",
+                      getValidationErrorLevelClass(x.result)
+                    )}
+                  >
+                    {x.message}
+                  </td>
+                </tr>
+              ))}
+          </tbody>
+        </table>
+      </OverlayPanel>
+    </>
+  );
+}

package/src/editor/ui/CenteredMessage.tsx

@@ -0,0 +1,7 @@
+export function CenteredMessage({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex justify-center items-center h-full text-gray-500">
+      {children}
+    </div>
+  );
+}

package/src/editor/ui/CopyMoveTargetSelectorDialog.tsx

@@ -0,0 +1,81 @@
+import { Button } from "primereact/button";
+
+import { useState } from "react";
+
+import { FullItem, ItemDescriptor } from "../pageModel";
+import { Dialog } from "primereact/dialog";
+import DialogButtons from "./DialogButtons";
+import { DialogProps } from "../client/editContext";
+import { ScrollingContentTree } from "../ScrollingContentTree";
+import { EditContextType } from "../client/editContext";
+import { rootItemId } from "../../config/config";
+
+export type CopyMoveTargetSelectorDialogProps = {
+  items: FullItem[];
+  editContext: EditContextType;
+  label: string;
+  header: string;
+};
+
+export function CopyMoveTargetSelectorDialog(
+  props: CopyMoveTargetSelectorDialogProps & DialogProps<ItemDescriptor>,
+) {
+  if (!props) return null;
+
+  const [selectedItem, setSelectedItem] = useState<
+    (ItemDescriptor & { canCreate: boolean }) | null
+  >();
+
+  const handleOk = () => {
+    props.onClose?.(selectedItem ?? null);
+  };
+
+  const handleCancel = () => {
+    props.onClose?.(null);
+  };
+
+  return (
+    <Dialog
+      visible={true}
+      style={{ width: "70vw", height: "90vh" }}
+      onHide={() => {
+        props.onClose?.(null);
+      }}
+      onShow={() => {}}
+      header={props.header}
+    >
+      <div className="flex h-full flex-1 flex-col">
+        <div className="relative flex-1 py-3">
+          <ScrollingContentTree
+            selectedItemId={selectedItem?.id}
+            expandedItemId={props.items[0]?.id}
+            rootItemId={rootItemId}
+            onSelectionChange={async (node) => {
+              if (!props.items[0]) return;
+              if (!node[0]) setSelectedItem(null);
+              else {
+                const item = await props.editContext.itemsRepository.getItem(
+                  node[0],
+                );
+                setSelectedItem({
+                  id: node[0].id,
+                  version: 0,
+                  language: props.items[0].language,
+                  canCreate: item?.canCreate ?? false,
+                });
+              }
+            }}
+          />
+        </div>
+        <DialogButtons>
+          <Button
+            onClick={handleOk}
+            label={props.label}
+            disabled={!selectedItem || !selectedItem.canCreate}
+          />
+          <Button onClick={handleCancel} label="Cancel" />
+        </DialogButtons>
+      </div>
+    </Dialog>
+  );
+}

package/src/editor/ui/CopyToClipboardButton.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { Copy } from "lucide-react";
+import { useEditContext } from "../client/editContext";
+
+export function CopyToClipboardButton({ text }: { text: string }) {
+  const editContext = useEditContext();
+  const handleCopyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    editContext!.showToast({
+      summary: "Copied to clipboard",
+      severity: "success",
+    });
+  };
+
+  return (
+    <span
+      className="ml-1 cursor-pointer"
+      onClick={() => handleCopyToClipboard(text)}
+    >
+      <Copy size={14} />
+    </span>
+  );
+}

package/src/editor/ui/DialogButtons.tsx

@@ -0,0 +1,11 @@
+export default function DialogButtons({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-end gap-3 p-4 border-t">
+      {children}
+    </div>
+  );
+}