@alpaca-editor/core 1.0.0

package/src/editor/control-center/IndexSettings.tsx

@@ -0,0 +1,266 @@
+import { useEffect, useState, useCallback, ReactNode } from "react";
+import {
+  getIndexStatus,
+  rebuildIndex,
+  setupIndex,
+  setupRebuildJob,
+} from "../services/indexService";
+import { IndexStatus } from "../../types";
+import { Button } from "primereact/button";
+import { Spinner } from "../ui/Spinner";
+import { useEditContext } from "../client/editContext";
+import { FullItem } from "../pageModel";
+import { ProgressSpinner } from "primereact/progressspinner";
+
+export function IndexSettings({ index }: { index: { name: string } }) {
+  const editContext = useEditContext();
+  const [indexStatus, setIndexStatus] = useState<IndexStatus | undefined>(
+    undefined
+  );
+  const [settingsItem, setSettingsItem] = useState<FullItem | undefined>(
+    undefined
+  );
+  const [rebuildJobItem, setRebuildJobItem] = useState<FullItem | undefined>(
+    undefined
+  );
+
+  const fetchStatus = useCallback(() => {
+    getIndexStatus(index.name).then(async (result) => {
+      setIndexStatus(result);
+
+      if (result?.settingsItemId) {
+        const settingsItem = await editContext?.itemsRepository.getItem({
+          id: result.settingsItemId,
+          language: "en",
+          version: 0,
+        });
+        setSettingsItem(settingsItem);
+
+        if (result.rebuildJobItemId) {
+          const rebuildJobItem = await editContext?.itemsRepository.getItem({
+            id: result.rebuildJobItemId,
+            language: "en",
+            version: 0,
+          });
+          setRebuildJobItem(rebuildJobItem);
+        } else {
+          setRebuildJobItem(undefined);
+        }
+      } else {
+        setSettingsItem(undefined);
+        setRebuildJobItem(undefined);
+      }
+    });
+  }, [index]);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (indexStatus?.isRunning) {
+      interval = setInterval(() => {
+        fetchStatus();
+      }, 1000);
+    }
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [indexStatus?.isRunning, fetchStatus]);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  useEffect(() => {
+    setIndexStatus(undefined);
+  }, [index]);
+
+  if (!indexStatus) {
+    return (
+      <div className="flex flex-col h-full justify-center items-center gap-2 text-gray-500">
+        <Spinner />
+        Loading...
+      </div>
+    );
+  }
+
+  async function setupIndexAndRefresh(index: string) {
+    await setupIndex(index);
+    setIndexStatus(undefined);
+    fetchStatus();
+  }
+
+  async function setupRebuildJobAndRefresh(index: string) {
+    await setupRebuildJob(index);
+    setIndexStatus(undefined);
+    fetchStatus();
+  }
+
+  async function rebuildIndexAndRefresh(index: string) {
+    await rebuildIndex(index);
+    setTimeout(() => {
+      fetchStatus();
+    }, 1000);
+  }
+
+  return (
+    <div className="flex flex-col px-2 py-1 h-full">
+      <div className="flex flex-row items-center border-b p-1 mb-3">
+        <div className="">{index.name}</div>
+      </div>
+      <div className="ml-2">
+        {settingsItem && (
+          <>
+            <IndexProp headline="Settings">
+              <a
+                className="cursor-pointer underline"
+                onClick={() => {
+                  if (indexStatus.settingsItemId) {
+                    editContext?.loadItem(indexStatus.settingsItemId);
+                    editContext?.switchView("content-editor");
+                  }
+                }}
+              >
+                {settingsItem.path}
+              </a>
+            </IndexProp>
+            <IndexProp headline="Service">{indexStatus.serviceUrl}</IndexProp>
+            <IndexProp headline="Name">{indexStatus.name}</IndexProp>
+            <IndexProp headline="Rebuild Job">
+              {rebuildJobItem && (
+                <>
+                  <a
+                    className="cursor-pointer underline"
+                    onClick={() => {
+                      if (indexStatus.rebuildJobItemId) {
+                        editContext?.loadItem(indexStatus.rebuildJobItemId);
+                        editContext?.switchView("content-editor");
+                      }
+                    }}
+                  >
+                    {rebuildJobItem.path}
+                  </a>
+                  {indexStatus.canRebuild && !indexStatus.isRunning && (
+                    <div className="my-2">
+                      <Button
+                        label="Rebuild Index"
+                        onClick={() => {
+                          rebuildIndexAndRefresh(index.name);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {indexStatus.isRunning && (
+                    <div className="my-2 flex flex-row items-center justify-start">
+                      <div className="mr-2" style={{ width: "20px" }}>
+                        <ProgressSpinner
+                          style={{ width: "20px", height: "20px" }}
+                        />{" "}
+                      </div>
+                      Rebuilding... {indexStatus.rebuildCount.toLocaleString()}{" "}
+                      items, {indexStatus.rebuildTokensCount.toLocaleString()}{" "}
+                      tokens
+                    </div>
+                  )}
+                </>
+              )}
+              {!rebuildJobItem && (
+                <>
+                  <div className="text-sm text-gray-500 mb-2">
+                    No rebuild job found for this index
+                  </div>
+                  <Button
+                    label="Setup Rebuild Job"
+                    onClick={() => {
+                      setupRebuildJobAndRefresh(index.name);
+                    }}
+                  />
+                </>
+              )}
+            </IndexProp>
+            <IndexProp headline="Last Rebuild">
+              {indexStatus.lastRebuildStartDateTime
+                ? new Date(
+                    indexStatus.lastRebuildStartDateTime
+                  ).toLocaleString()
+                : "Never"}
+            </IndexProp>
+            {indexStatus.exists && (
+              <>
+                <IndexProp headline="Index Status">
+                  {Object.entries(indexStatus.languages).map(
+                    ([language, { numberOfItems, lastUpdated, status }]) => (
+                      <div
+                        key={language}
+                        className="flex items-center gap-2 text-xs"
+                      >
+                        <div className="font-bold">{language}:</div>
+                        <span
+                          className={`text-gray-500 ml-2 ${
+                            status === "Available"
+                              ? "text-green-500"
+                              : "text-yellow-500"
+                          }`}
+                        >
+                          {status}
+                        </span>
+                        <span className="text-gray-500">
+                          Items: {numberOfItems.toLocaleString()}{" "}
+                        </span>
+                        <span className="text-gray-500">
+                          Last updated: {new Date(lastUpdated).toLocaleString()}
+                        </span>
+                      </div>
+                    )
+                  )}
+                </IndexProp>
+              </>
+            )}
+            {indexStatus.errors?.length > 0 && (
+              <div>
+                <div>Errors:</div>
+                {indexStatus.errors.map((error, index) => (
+                  <div
+                    key={index}
+                    className="mt-2 p-2 bg-red-100 rounded-md text-red-800 border border-red-300 "
+                  >
+                    <div className="font-bold">{error.message}</div>
+                    <div className="text-sm">{error.details}</div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+        {!indexStatus?.exists && (
+          <div>
+            <div className="text-sm text-gray-500 mb-2">
+              Index does not exist
+            </div>
+            <Button
+              label="Setup index"
+              onClick={() => {
+                setupIndexAndRefresh(index.name);
+              }}
+            />
+          </div>
+        )}{" "}
+      </div>
+    </div>
+  );
+}
+
+function IndexProp({
+  headline,
+  children,
+}: {
+  headline: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="mb-2">
+      <div className="font-bold text-sm">{headline}</div>
+      <div className="text-sm">{children}</div>
+    </div>
+  );
+}

package/src/editor/control-center/Status.tsx

@@ -0,0 +1,7 @@
+export function Status() {
+  return (
+    <div className="flex flex-col justify-center items-center h-full">
+      Status
+    </div>
+  );
+}

package/src/editor/editor-warnings/ItemLocked.tsx

@@ -0,0 +1,63 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+import { ItemDescriptor } from "../pageModel";
+
+export function ItemLocked({ item }: EditorWarningProps) {
+  if (!item.canLock) return;
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (item.hasLock) {
+    return (
+      <EditorWarning title="Item locked" severity="warning">
+        <button
+          onClick={() => {
+            const items: ItemDescriptor[] = [item];
+            editContext!.operations.unlockItems(items);
+          }}
+        >
+          Release lock
+        </button>
+      </EditorWarning>
+    );
+  }
+  if (item.lockedBy == null) {
+    return (
+      <EditorWarning title="Item is locked" severity="warning">
+        <div>Locked by {item.lockedBy}</div>
+        {/* {item.canLock && (
+          <button
+            onClick={() => {
+              const items: ItemDescriptor[] = [item];
+              if ((item as ComponentData).linkedComponentItem)
+                items.push((item as ComponentData).linkedComponentItem);
+
+              editContext!.lockItems(items);
+            }}
+          >
+            Grab lock
+          </button>
+        )} */}
+      </EditorWarning>
+    );
+  }
+  // else {
+  //   return (
+  //     <EditorWarning title="Item not locked" severity="warning">
+  //       {item.canLock && (
+  //         <button
+  //           onClick={() => {
+  //             const items: ItemDescriptor[] = [item];
+  //             if ((item as ComponentData).linkedComponentItem)
+  //               items.push((item as ComponentData).linkedComponentItem);
+
+  //             editContext!.lockItems(items);
+  //           }}
+  //         >
+  //           Lock item
+  //         </button>
+  //       )}
+  //     </EditorWarning>
+  //   );
+  // }
+}

package/src/editor/editor-warnings/NoLanguageWriteAccess.tsx

@@ -0,0 +1,22 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWriteLanguageAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (!item.canWriteItem) return;
+  if (!item.canWriteLanguage) {
+    return (
+      <EditorWarning
+        title="You dont have language write access."
+        severity="warning"
+      >
+        <p>
+          You can't edit this item because you don't have write access for
+          language {editContext.page?.item.language}.
+        </p>
+      </EditorWarning>
+    );
+  }
+}

package/src/editor/editor-warnings/NoWorkflowWriteAccess.tsx

@@ -0,0 +1,23 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWorkflowWriteAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (!item.canWriteItem || !item.canWriteLanguage) return;
+  if (!item.canWriteWorkflow) {
+    return (
+      <EditorWarning
+        title="You dont have write access in the current workflow state."
+        severity="warning"
+      >
+        <p>
+          The item is in the workflow state{" "}
+          <span className="font-bold">{item.workflowState}</span> which
+          prevents you from editing.
+        </p>
+      </EditorWarning>
+    );
+  }
+}

package/src/editor/editor-warnings/NoWriteAccess.tsx

@@ -0,0 +1,15 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+import { useEditContext } from "../client/editContext";
+
+export function NoWriteAccess({ item }: EditorWarningProps) {
+  var editContext = useEditContext();
+  if (!editContext) return;
+  if (!item.canWriteItem) {
+    return (
+      <EditorWarning title="You dont have write access." severity="warning">
+        <p>You can't edit this item because you don't have write access.</p>
+      </EditorWarning>
+    );
+  }
+}

package/src/editor/editor-warnings/ValidationErrors.tsx

@@ -0,0 +1,54 @@
+import { EditorWarning } from "../EditorWarning";
+import { EditorWarningProps } from "../EditorWarnings";
+
+export function ValidationErrors({ item, editContext }: EditorWarningProps) {
+  let validationResult = editContext.validationResult
+    ?.find(
+      (x) =>
+        x.item.id === item.id &&
+        x.item.language === item.language &&
+        x.item.version === item.version
+    )
+    ?.results.filter((x) => x.itemId === item.id);
+
+  if (!validationResult) {
+    const pageResult = editContext.validationResult?.find(
+      (x) => x.item.id === editContext?.page?.item.id
+    );
+
+    if (pageResult)
+      validationResult = pageResult.results.filter((x) => x.itemId === item.id);
+  }
+
+  if (!validationResult?.length) return null;
+  const fields = validationResult?.filter((x) => x.fieldId);
+
+  return (
+    <EditorWarning title="Validation" severity="warning">
+      {validationResult
+        ?.filter((x) => !x.fieldId)
+        .map((x) => (
+          <div key={x.validator}>{x.message}</div>
+        ))}
+      {fields?.length > 0 && (
+        <div>
+          The following fields have validation messages:{" "}
+          {fields.map((x) => (
+            <span
+              className="cursor-pointer font-bold"
+              key={x.validator + x.fieldId}
+              onClick={() => {
+                const field = Object.values(item.fields).find(
+                  (f) => f.id === x.fieldId
+                );
+                if (field) editContext.setFocusedField(field.descriptor, false);
+              }}
+            >
+              {x.fieldName}
+            </span>
+          ))}
+        </div>
+      )}
+    </EditorWarning>
+  );
+}

package/src/editor/field-types/AttachmentEditor.tsx

@@ -0,0 +1,9 @@
+import { AttachmentField } from "../fieldTypes";
+
+export function AttachmentEditor({ field }: { field: AttachmentField }) {
+  return (
+    <div>
+      <img src={field.value.src} />
+    </div>
+  );
+}

package/src/editor/field-types/CheckboxEditor.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useEditContext } from "../client/editContext";
+
+import { Checkbox } from "primereact/checkbox";
+import { useEffect, useState } from "react";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { CheckboxField } from "../fieldTypes";
+
+export function CheckboxEditor({
+  field,
+  readOnly,
+}: {
+  field: CheckboxField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  useEffect(() => {
+    setIsUpdating(false);
+  }, [field]);
+
+  if (!editContext) return;
+  const fieldItem = field.descriptor.item;
+  if (!fieldItem) return;
+
+  if (isUpdating) {
+    return <ProgressSpinner style={{ width: "18px", height: "18px" }} />;
+  }
+
+  return (
+    <Checkbox
+      key={fieldItem.id + field.id + fieldItem.language + fieldItem.version}
+      checked={field.value}
+      disabled={readOnly}
+      onClick={() => {
+        setIsUpdating(true);
+        editContext.operations.editField({
+          field: field.descriptor,
+          rawValue: field.value ? "0" : "1",
+          refresh: "immediate",
+        });
+      }}
+    />
+  );
+}

package/src/editor/field-types/DropLinkEditor.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+
+import { useEditContext } from "../client/editContext";
+import { useEffect, useState } from "react";
+
+import { getLookupSources } from "../services/editService";
+import { InternalLinkField } from "../fieldTypes";
+import { ItemIdAndName } from "../pageModel";
+import { normalizeGuid } from "../utils";
+
+export function DropLinkEditor({
+  field,
+  readOnly,
+}: {
+  field: InternalLinkField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [lazyItems, setLazyItems] = useState<ItemIdAndName[]>([]);
+  const [lazyLoading, setLazyLoading] = useState<boolean>(true);
+
+  if (!field) return;
+
+  if (!editContext) return;
+
+  useEffect(() => {
+    onLazyLoad();
+  }, [field.descriptor]);
+
+  const onLazyLoad = async () => {
+    setLazyLoading(true);
+    const options = await getLookupSources(field, editContext.sessionId);
+    setLazyItems(options);
+    setLazyLoading(false);
+  };
+
+  return (
+    <Dropdown
+      value={field.value?.targetItemId}
+      disabled={readOnly}
+      onChange={(e: DropdownChangeEvent) => {
+        editContext?.operations.editField({
+          field: field.descriptor,
+          rawValue: normalizeGuid(e.value), // typeof e.value === "string" ? e.value : e.value.id, // This has changed in primereact
+        });
+      }}
+      options={lazyItems}
+      optionLabel="name"
+      optionValue="id"
+      placeholder="Select"
+      className="w-full md:w-14rem"
+      virtualScrollerOptions={{
+        lazy: true,
+        onLazyLoad: onLazyLoad,
+        itemSize: 38,
+        // showLoader: true,
+        loading: lazyLoading,
+        //delay: 250,
+        // loadingTemplate: (options) => {
+        //   return (
+        //     <div
+        //       className="flex align-items-center p-2"
+        //       style={{ height: "38px" }}
+        //     >
+        //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+        //     </div>
+        //   );
+        // },
+      }}
+    />
+  );
+}

package/src/editor/field-types/DropListEditor.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { Dropdown, DropdownChangeEvent } from "primereact/dropdown";
+
+import { useEditContext } from "../client/editContext";
+import { useEffect, useState } from "react";
+
+import { getLookupSources } from "../services/editService";
+import { TextField } from "../fieldTypes";
+import { ItemIdAndName } from "../pageModel";
+
+export function DropListEditor({
+  field,
+  readOnly,
+}: {
+  field: TextField;
+  readOnly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [lazyItems, setLazyItems] = useState<ItemIdAndName[]>([]);
+  const [lazyLoading, setLazyLoading] = useState<boolean>(true);
+
+  if (!field) return;
+
+  if (!editContext) return;
+
+  useEffect(() => {
+    onLazyLoad();
+  }, [field.descriptor]);
+
+  const onLazyLoad = async () => {
+    setLazyLoading(true);
+    const options = await getLookupSources(field, editContext.sessionId);
+    if (field.value && !options.find((o) => o.name === field.value)) {
+      console.log("Adding unknown option", field.value);
+      options.unshift({
+        id: "unknown",
+        name: `[Unknown: ${field.value}]`,
+      });
+    }
+    setLazyItems(options);
+    setLazyLoading(false);
+  };
+
+  return (
+    <Dropdown
+      value={
+        lazyItems.find((o) => o.name === field.value)?.name ||
+        "[Unknown: " + field.value + "]"
+      }
+      disabled={readOnly}
+      onChange={(e: DropdownChangeEvent) => {
+        editContext?.operations.editField({
+          field: field.descriptor,
+          rawValue: e.value,
+        });
+      }}
+      options={lazyItems}
+      optionLabel="name"
+      optionValue="name"
+      placeholder="Select"
+      className="w-full md:w-14rem"
+      virtualScrollerOptions={{
+        lazy: true,
+        onLazyLoad: onLazyLoad,
+        itemSize: 38,
+        // showLoader: true,
+        loading: lazyLoading,
+        //delay: 250,
+        // loadingTemplate: (options) => {
+        //   return (
+        //     <div
+        //       className="flex align-items-center p-2"
+        //       style={{ height: "38px" }}
+        //     >
+        //       <Skeleton width={options.even ? "60%" : "50%"} height="1rem" />
+        //     </div>
+        //   );
+        // },
+      }}
+    />
+  );
+}