@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/FieldEditorPopup.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { OverlayPanel } from "primereact/overlaypanel";
+import {
+  SyntheticEvent,
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+
+import { FieldList } from "./FieldList";
+import { Field } from "./pageModel";
+
+export interface FieldEditorPopupRef {
+  show: (fields: Field[], sections: string[], event: SyntheticEvent) => void;
+  close: () => void;
+}
+
+interface FieldEditorPopupProps {}
+
+export const FieldEditorPopup = forwardRef<
+  FieldEditorPopupRef,
+  FieldEditorPopupProps
+>((_, ref) => {
+  const overlayRef = useRef<OverlayPanel>(null);
+
+  const [sections, setSections] = useState<string[]>([]);
+  const [fields, setFields] = useState<Field[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    show: (fields: Field[], sections: string[], ev: SyntheticEvent) => {
+      setFields(fields);
+      setSections(sections);
+      overlayRef.current?.toggle(ev, ev.target);
+    },
+    close: () => {
+      overlayRef.current?.hide();
+    },
+  }));
+
+  return (
+    <OverlayPanel ref={overlayRef}>
+      <div
+        className="w-96 h-96 flex flex-col gap-2 overflow-auto"
+        onClick={(ev) => ev.stopPropagation()}
+      >
+        <div className="flex justify-end p-3">
+          <i
+            className="pi pi-times cursor-pointer"
+            onClick={() => overlayRef?.current?.hide()}
+          />
+        </div>
+
+        {fields && (
+          <FieldList
+            fields={[{ fields }]}
+            sections={sections}
+            validators={[]}
+          />
+        )}
+      </div>
+    </OverlayPanel>
+  );
+});

package/src/editor/FieldHistory.tsx

@@ -0,0 +1,75 @@
+import { Field } from "../editor/pageModel";
+import { FieldHistoryItem } from "../types";
+import { getFieldHistory } from "../editor/services/editService";
+import { useEffect } from "react";
+import { useState } from "react";
+
+import { useEditContext } from "./client/editContext";
+import { formatDate } from "./utils";
+import { SimpleTable } from "./ui/SimpleTable";
+import { SimpleIconButton } from "./ui/SimpleIconButton";
+
+export function FieldHistory({
+  field,
+  onHover,
+  onRevert,
+}: {
+  field: Field;
+  onHover: (historyEntry: FieldHistoryItem | undefined) => void;
+  onRevert?: () => void;
+}) {
+  const [fieldHistory, setFieldHistory] = useState<FieldHistoryItem[]>([]);
+  const editContext = useEditContext();
+
+  if (!editContext) {
+    return null;
+  }
+
+  useEffect(() => {
+    getFieldHistory(field.descriptor.item, field.id).then((result) => {
+      setFieldHistory(result.data ?? []);
+    });
+  }, [field]);
+
+  if (fieldHistory.length === 0)
+    return <div className="p-2 text-xs text-gray-500">No history</div>;
+
+  return (
+    <div>
+      <div className="bg-gray-100 p-2 text-xs text-gray-500">Field History</div>
+      <div className="max-h-96 overflow-auto">
+        <SimpleTable
+          items={fieldHistory}
+          onRowHover={onHover}
+          rowClassName={(x) =>
+            x.undone
+              ? "text-gray-300 cursor-pointer hover:bg-gray-50 "
+              : "cursor-pointer hover:bg-gray-50"
+          }
+          columns={[
+            { header: "Date", body: (x) => formatDate(new Date(x.date)) },
+            { header: "User", body: (x) => x.user },
+            { header: "Version", body: (x) => x.version },
+            {
+              header: "Revert",
+              body: (x) => (
+                <SimpleIconButton
+                  icon="pi pi-undo"
+                  onClick={async () => {
+                    await editContext.operations.editField({
+                      field: field.descriptor,
+                      rawValue: x.rawValue,
+                      refresh: "immediate",
+                    });
+                    onRevert?.();
+                  }}
+                  label="Revert"
+                />
+              ),
+            },
+          ]}
+        />
+      </div>
+    </div>
+  );
+}

package/src/editor/FieldList.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { Section } from "./ui/Section";
+import { useEditContext } from "./client/editContext";
+import { FieldListFieldWithFallbacks } from "./FieldListFieldWithFallbacks";
+import { SingleValidatorResult } from "../types";
+import { Field } from "./pageModel";
+import { InputText } from "primereact/inputtext";
+import { Fragment, useState } from "react";
+import { Checkbox } from "primereact/checkbox";
+import uuid from "react-uuid";
+import { SimpleIconButton } from "./ui/SimpleIconButton";
+
+export type ItemFields = {
+  headline?: string;
+  fields: Field[];
+};
+
+export function FieldList({
+  fields,
+  compareToFields,
+  sections,
+  validators,
+  filter,
+  simplified,
+  showStandardFieldsEnabled,
+  readonly,
+}: {
+  fields: ItemFields[];
+  compareToFields?: Field[];
+  sections?: string[];
+  validators: SingleValidatorResult[];
+  filter?: (field: Field) => boolean;
+  simplified?: boolean;
+  showStandardFieldsEnabled?: boolean;
+  readonly?: boolean;
+}) {
+  const editContext = useEditContext();
+
+  const [searchFilter, setSearchFilter] = useState<string>("");
+  const [showStandardFields, setShowStandardFields] = useState<boolean>(false);
+  const uniqueId = uuid();
+
+  if (!editContext) return;
+  if (!fields) return;
+
+  return (
+    <div>
+      <div className="tour-field-list sticky top-0 z-10 ml-[1px] flex items-center gap-2 border-y border-gray-200 bg-gray-50 p-2">
+        <i className="pi pi-search" />
+        <div className="text-xs">Filter</div>
+        <InputText
+          className="flex-1 text-xs"
+          value={searchFilter}
+          onChange={(x) => setSearchFilter(x.target.value)}
+        />
+        {searchFilter && (
+          <SimpleIconButton
+            icon="pi pi-times"
+            onClick={() => setSearchFilter("")}
+            className="text-xs"
+            label="Clear"
+          />
+        )}
+        {showStandardFieldsEnabled && (
+          <>
+            <Checkbox
+              inputId={uniqueId}
+              checked={showStandardFields}
+              onChange={(e: any) => setShowStandardFields(e.checked)}
+            />{" "}
+            <label htmlFor={uniqueId} className="cursor-pointer text-xs">
+              Show standard fields
+            </label>
+          </>
+        )}
+      </div>
+
+      {fields.map((itemFields, index) => (
+        <Fragment key={index}>
+          {itemFields.headline && (
+            <div className="mt-2 flex items-center gap-1 border-b py-2 text-sm">
+              <i className="pi pi-angle-right" /> {itemFields.headline}
+            </div>
+          )}
+          <FieldListForSingleItem
+            key={index}
+            fields={itemFields.fields}
+            validators={validators}
+            filter={filter}
+            searchFilter={searchFilter}
+            showStandardFields={showStandardFields}
+            simplified={simplified}
+            sections={sections}
+            compareToFields={compareToFields}
+            readonly={readonly}
+          />
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+function FieldListForSingleItem({
+  fields,
+  validators,
+  filter,
+  searchFilter,
+  simplified,
+  sections,
+  showStandardFields,
+  compareToFields,
+  readonly,
+}: {
+  fields: Field[];
+  validators: SingleValidatorResult[];
+  filter?: (field: Field) => boolean;
+  searchFilter?: string;
+  simplified?: boolean;
+  sections?: string[];
+  showStandardFields?: boolean;
+  compareToFields?: Field[];
+  readonly?: boolean;
+}) {
+  let fieldsArray = Array.isArray(fields)
+    ? (fields as Field[])
+    : (Object.values(fields) as Field[]);
+
+  if (filter) fieldsArray = fieldsArray.filter(filter);
+
+  if (searchFilter) {
+    const searchFilterLower = searchFilter.toLowerCase();
+    fieldsArray = fieldsArray.filter(
+      (x) =>
+        x.name?.toLowerCase().includes(searchFilterLower) ||
+        x.displayName?.toLowerCase().includes(searchFilterLower),
+    );
+  }
+
+  if (!showStandardFields) {
+    fieldsArray = fieldsArray.filter((x) => !x.name?.startsWith("__"));
+  }
+
+  const sectionsGrouping = fieldsArray.reduce((acc, value) => {
+    // Group initialization
+    const section = value.section || "";
+
+    if (value.descriptor.item.id)
+      if (!acc[section]) {
+        acc[section] = [];
+      }
+    // Grouping
+    acc[section].push(value);
+
+    return acc;
+  }, {} as any);
+
+  const sectionList: Field[][] = Object.values(sectionsGrouping);
+  sectionList.sort(
+    (a: Field[], b: Field[]) =>
+      (a[0]?.sectionSortOrder || 0) - (b[0]?.sectionSortOrder || 0),
+  );
+
+  function getSectionFields(fields: Field[]) {
+    fields.sort((a: any, b: any) => a?.sortOrder - b?.sortOrder);
+
+    return fields.map((field) => (
+      <FieldListFieldWithFallbacks
+        key={field.id}
+        fieldDescriptor={field.descriptor}
+        simplified={simplified}
+        validators={validators.filter((x) => x.fieldId === field.id)}
+        compareToField={compareToFields?.find((x) => x.id === field.id)}
+        readonly={readonly}
+      />
+    ));
+  }
+  return sectionList
+    .map((x) => x[0]?.section)
+    .filter((x) => !sections || sections.includes(x!))
+    .map((section) =>
+      simplified ? (
+        getSectionFields(sectionsGrouping[section!])
+      ) : (
+        <Section key={section} title={section!}>
+          {getSectionFields(sectionsGrouping[section!])}
+        </Section>
+      ),
+    );
+}