@nixxie-cms/core 1.0.0 → 1.0.2

package/internal-unstable/admin-ui/pages/ItemPage/dist/nixxie-cms-core-internal-unstable-admin-ui-pages-ItemPage.cjs.js

@@ -0,0 +1,463 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var router = require('next/router');
+var react = require('react');
+var button = require('@keystar/ui/button');
+var dialog = require('@keystar/ui/dialog');
+var icon = require('@keystar/ui/icon');
+var fileWarningIcon = require('@keystar/ui/icon/icons/fileWarningIcon');
+var layout = require('@keystar/ui/layout');
+var progress = require('@keystar/ui/progress');
+var slots = require('@keystar/ui/slots');
+var toast = require('@keystar/ui/toast');
+var typography = require('@keystar/ui/typography');
+var client = require('@apollo/client');
+var react$1 = require('@apollo/client/react');
+var pick = require('../../../../../dist/pick-5fe45878.cjs.js');
+var Errors = require('../../../../../dist/Errors-575adfa3.cjs.js');
+var GraphQLErrorNotice = require('../../../../../dist/GraphQLErrorNotice-cd74180d.cjs.js');
+var PageContainer = require('../../../../../dist/PageContainer-abd7159f.cjs.js');
+var adminUi_context_dist_nixxieCmsCoreAdminUiContext = require('../../../../../dist/context-b5204629.cjs.js');
+var Fields = require('../../../../../dist/Fields-e2c28056.cjs.js');
+var filters = require('../../../../../dist/filters-b3e5eb50.cjs.js');
+var utils = require('../../../../../dist/utils-230cddb1.cjs.js');
+var common = require('../../../../../dist/common-5933f758.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@keystar/ui/style');
+require('@babel/runtime/helpers/defineProperty');
+require('@keystar/ui/icon/icons/alertTriangleIcon');
+require('@keystar/ui/notice');
+require('next/head');
+require('next/link');
+require('apollo-upload-client/UploadHttpLink.mjs');
+require('@keystar/ui/core');
+require('@nixxie-cms/core/admin-ui/router');
+require('@keystar/ui/icon/icons/chevronLeftIcon');
+require('@keystar/ui/icon/icons/chevronRightIcon');
+require('@keystar/ui/icon/icons/undo2Icon');
+require('@keystar/ui/picker');
+require('@keystar/ui/tag');
+require('@keystar/ui/tooltip');
+require('../../../../../dist/admin-meta-graphql-306c224a.cjs.js');
+require('@react-aria/utils');
+require('@keystar/ui/icon/icons/textCursorInputIcon');
+require('@keystar/ui/utils');
+require('fast-deep-equal');
+require('graphql');
+require('@keystar/ui/action-group');
+require('@keystar/ui/breadcrumbs');
+require('@keystar/ui/icon/all');
+require('../../../../../dist/actionData-7858738d.cjs.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var router__default = /*#__PURE__*/_interopDefault(router);
+
+function useEventCallback(callback) {
+  const callbackRef = react.useRef(callback);
+  const cb = react.useCallback((...args) => {
+    return callbackRef.current(...args);
+  }, []);
+  react.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  return cb;
+}
+function DeleteButton({
+  list,
+  itemId,
+  itemLabel
+}) {
+  const [errorDialogValue, setErrorDialogValue] = react.useState(null);
+  const router$1 = router.useRouter();
+  const [deleteItem] = react$1.useMutation(client.gql`mutation ($id: ID!) {
+      ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
+        id
+      }
+    }`, {
+    variables: {
+      id: itemId
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(dialog.DialogTrigger, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+        tone: "critical",
+        children: "Delete"
+      }), /*#__PURE__*/jsxRuntime.jsx(dialog.AlertDialog, {
+        tone: "critical",
+        title: "Delete item",
+        cancelLabel: "Cancel",
+        primaryActionLabel: "Yes, delete",
+        onPrimaryAction: async () => {
+          try {
+            await deleteItem();
+          } catch (err) {
+            toast.toastQueue.critical('Unable to delete item', {
+              actionLabel: 'Details',
+              onAction: () => setErrorDialogValue(err),
+              shouldCloseOnAction: true
+            });
+            return;
+          }
+          toast.toastQueue.neutral(`${list.singular} deleted.`, {
+            timeout: 5000
+          });
+          router$1.push(list.isSingleton ? '/' : `/${list.path}`);
+        },
+        children: /*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+          children: ["Are you sure you want to delete ", /*#__PURE__*/jsxRuntime.jsx("strong", {
+            style: {
+              fontWeight: 600
+            },
+            children: itemLabel
+          }), "? This action cannot be undone."]
+        })
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(dialog.DialogContainer, {
+      onDismiss: () => setErrorDialogValue(null),
+      isDismissable: true,
+      children: errorDialogValue && /*#__PURE__*/jsxRuntime.jsx(Errors.ErrorDetailsDialog, {
+        title: "Unable to delete item",
+        error: errorDialogValue
+      })
+    })]
+  });
+}
+function ItemNotFound(props) {
+  return /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+    alignItems: "center",
+    backgroundColor: "surface",
+    borderRadius: "medium",
+    gap: "large",
+    justifyContent: "center",
+    minHeight: "scale.3000",
+    padding: "xlarge",
+    children: [/*#__PURE__*/jsxRuntime.jsx(icon.Icon, {
+      src: fileWarningIcon.fileWarningIcon,
+      color: "neutralEmphasis",
+      size: "large"
+    }), /*#__PURE__*/jsxRuntime.jsx(typography.Heading, {
+      align: "center",
+      children: "Not found"
+    }), /*#__PURE__*/jsxRuntime.jsx(slots.SlotProvider, {
+      slots: {
+        text: {
+          align: 'center',
+          maxWidth: 'scale.5000'
+        }
+      },
+      children: props.children
+    })]
+  });
+}
+function ResetButton(props) {
+  return /*#__PURE__*/jsxRuntime.jsxs(dialog.DialogTrigger, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+      tone: "accent",
+      isDisabled: !props.hasChanges,
+      children: "Reset"
+    }), /*#__PURE__*/jsxRuntime.jsx(dialog.AlertDialog, {
+      title: "Reset changes",
+      cancelLabel: "Cancel",
+      primaryActionLabel: "Yes, reset",
+      autoFocusButton: "primary",
+      onPrimaryAction: props.onReset,
+      children: "Are you sure? Any unsaved changes will be lost and cannot be recovered."
+    })]
+  });
+}
+function ItemForm({
+  listKey,
+  initialValue,
+  value,
+  onChange,
+  itemLabel,
+  onSaveSuccess,
+  fieldModes,
+  fieldPositions,
+  isRequireds
+}) {
+  const list = adminUi_context_dist_nixxieCmsCoreAdminUiContext.useList(listKey);
+  const itemId = initialValue.id;
+  const [updateError, setUpdateError] = react.useState(null);
+  const [update, {
+    loading,
+    error
+  }] = react$1.useMutation(client.gql`mutation ($id: ID!, $data: ${list.graphql.names.updateInputName}!) {
+      item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
+        id
+      }
+    }`, {
+    errorPolicy: 'all'
+  });
+  function resetValueState() {
+    onChange(initialValue);
+  }
+  const invalidFields = utils.useInvalidFields(list.fields, value, isRequireds);
+  const [forceValidation, setForceValidation] = react.useState(false);
+  const onSave = useEventCallback(async e => {
+    if (e.target !== e.currentTarget) return;
+    e.preventDefault();
+    const newForceValidation = invalidFields.size !== 0;
+    setForceValidation(newForceValidation);
+    if (newForceValidation) return;
+    const {
+      error: _error
+    } = await update({
+      variables: {
+        id: itemId,
+        data: utils.serializeValueToOperationItem('update', list.fields, value, initialValue)
+      }
+    });
+    const error = client.CombinedGraphQLErrors.is(_error) ? _error.errors.find(x => {
+      var _x$path;
+      return x.path === undefined || ((_x$path = x.path) === null || _x$path === void 0 ? void 0 : _x$path.length) === 1;
+    }) : _error;
+    if (error) {
+      toast.toastQueue.critical('Unable to save item', {
+        actionLabel: 'Details',
+        onAction: () => setUpdateError(new Error(error.message)),
+        shouldCloseOnAction: true
+      });
+      return;
+    }
+    toast.toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}.`, {
+      timeout: 5000
+    });
+    onSaveSuccess();
+  });
+  const hasChangedFields = utils.useHasChanges('update', list.fields, value, initialValue);
+  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("form", {
+      onSubmit: onSave,
+      style: {
+        display: 'contents'
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("button", {
+        type: "submit",
+        style: {
+          display: 'none'
+        }
+      }), /*#__PURE__*/jsxRuntime.jsxs(layout.VStack, {
+        gap: "large",
+        gridArea: "main",
+        marginTop: "xlarge",
+        minWidth: 0,
+        children: [/*#__PURE__*/jsxRuntime.jsx(GraphQLErrorNotice.GraphQLErrorNotice, {
+          errors: client.CombinedGraphQLErrors.is(error) ? error.errors.filter(x => {
+            var _x$path2;
+            return x.path === undefined || ((_x$path2 = x.path) === null || _x$path2 === void 0 ? void 0 : _x$path2.length) === 1;
+          }) : [error]
+        }), /*#__PURE__*/jsxRuntime.jsx(Fields.Fields, {
+          view: "itemView",
+          position: "form",
+          fields: list.fields,
+          groups: list.groups,
+          forceValidation: forceValidation,
+          invalidFields: invalidFields,
+          fieldModes: fieldModes,
+          fieldPositions: fieldPositions,
+          onChange: onChange,
+          value: value,
+          isRequireds: isRequireds
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(common.StickySidebar, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Fields.Fields, {
+          view: "itemView",
+          position: "sidebar",
+          fields: list.fields,
+          groups: list.groups,
+          forceValidation: forceValidation,
+          invalidFields: invalidFields,
+          onChange: onChange,
+          value: value,
+          fieldModes: fieldModes,
+          fieldPositions: fieldPositions,
+          isRequireds: isRequireds
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs(common.BaseToolbar, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(button.Button, {
+          isDisabled: !hasChangedFields,
+          isPending: loading,
+          prominence: "high",
+          type: "submit",
+          children: "Save"
+        }), /*#__PURE__*/jsxRuntime.jsx(ResetButton, {
+          hasChanges: hasChangedFields,
+          onReset: resetValueState
+        }), /*#__PURE__*/jsxRuntime.jsx(layout.Box, {
+          flex: true
+        }), !list.hideDelete ? /*#__PURE__*/jsxRuntime.jsx(DeleteButton, {
+          list: list,
+          itemId: itemId,
+          itemLabel: itemLabel
+        }) : null]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(dialog.DialogContainer, {
+      onDismiss: () => setUpdateError(null),
+      isDismissable: true,
+      children: updateError && /*#__PURE__*/jsxRuntime.jsx(Errors.ErrorDetailsDialog, {
+        title: "Unable to save item",
+        error: updateError
+      })
+    })]
+  });
+}
+const getItemPage = props => () => /*#__PURE__*/jsxRuntime.jsx(ItemPage, {
+  ...props
+});
+function ItemPage({
+  listKey
+}) {
+  var _item$list$labelField, _data$nixxie3, _data$nixxie4;
+  const list = adminUi_context_dist_nixxieCmsCoreAdminUiContext.useList(listKey);
+  const id_ = router.useRouter().query.id;
+  const [itemId] = Array.isArray(id_) ? id_ : [id_];
+  const {
+    data,
+    error,
+    loading,
+    refetch
+  } = adminUi_context_dist_nixxieCmsCoreAdminUiContext.useListItem(listKey, itemId !== null && itemId !== void 0 ? itemId : null);
+  const item = data === null || data === void 0 ? void 0 : data.item;
+  const itemLabel_ = (_item$list$labelField = item === null || item === void 0 ? void 0 : item[list.labelField]) !== null && _item$list$labelField !== void 0 ? _item$list$labelField : item === null || item === void 0 ? void 0 : item.id;
+  const itemLabel = typeof itemLabel_ === 'string' ? itemLabel_ : itemId !== null && itemId !== void 0 ? itemId : '';
+  const pageLoading = loading || itemId === undefined;
+  const pageLabel = itemLabel || itemId;
+  const pageTitle = list.isSingleton || typeof pageLabel !== 'string' ? list.label : pageLabel;
+  const initialValue = react.useMemo(() => {
+    if (!item) return null;
+    return utils.deserializeItemToValue(list.fields, item);
+  }, [list.fields, data === null || data === void 0 ? void 0 : data.item]);
+  const [value, setValue] = react.useState(null);
+  react.useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+  const {
+    actionModes,
+    fieldModes,
+    fieldPositions,
+    isRequireds
+  } = react.useMemo(() => {
+    const actionModes = {};
+    for (const action of list.actions) {
+      actionModes[action.key] = action.itemView.actionMode;
+    }
+    const fieldModes = {};
+    const fieldPositions = {};
+    const isRequireds = {};
+    for (const [fieldKey, field] of Object.entries(list.fields)) {
+      fieldModes[fieldKey] = field.itemView.fieldMode;
+      fieldPositions[fieldKey] = field.itemView.fieldPosition;
+      isRequireds[fieldKey] = field.itemView.isRequired;
+    }
+    for (const field of (_data$nixxie$adminMet = data === null || data === void 0 || (_data$nixxie = data.nixxie) === null || _data$nixxie === void 0 || (_data$nixxie = _data$nixxie.adminMeta) === null || _data$nixxie === void 0 || (_data$nixxie = _data$nixxie.list) === null || _data$nixxie === void 0 ? void 0 : _data$nixxie.fields) !== null && _data$nixxie$adminMet !== void 0 ? _data$nixxie$adminMet : []) {
+      var _data$nixxie$adminMet, _data$nixxie;
+      if (!(field !== null && field !== void 0 && field.itemView) || !field.key || !field.itemView.fieldMode || !field.itemView.fieldPosition || field.itemView.isRequired == null) continue;
+      fieldModes[field.key] = field.itemView.fieldMode;
+      fieldPositions[field.key] = field.itemView.fieldPosition;
+      isRequireds[field.key] = field.itemView.isRequired;
+    }
+    for (const action of (_data$nixxie$adminMet2 = data === null || data === void 0 || (_data$nixxie2 = data.nixxie) === null || _data$nixxie2 === void 0 || (_data$nixxie2 = _data$nixxie2.adminMeta) === null || _data$nixxie2 === void 0 || (_data$nixxie2 = _data$nixxie2.list) === null || _data$nixxie2 === void 0 ? void 0 : _data$nixxie2.actions) !== null && _data$nixxie$adminMet2 !== void 0 ? _data$nixxie$adminMet2 : []) {
+      var _data$nixxie$adminMet2, _data$nixxie2, _action$itemView;
+      if (!(action !== null && action !== void 0 && (_action$itemView = action.itemView) !== null && _action$itemView !== void 0 && _action$itemView.actionMode) || !action.key) continue;
+      actionModes[action.key] = action.itemView.actionMode;
+    }
+    return {
+      actionModes,
+      fieldModes,
+      fieldPositions,
+      isRequireds
+    };
+  }, [data === null || data === void 0 || (_data$nixxie3 = data.nixxie) === null || _data$nixxie3 === void 0 || (_data$nixxie3 = _data$nixxie3.adminMeta) === null || _data$nixxie3 === void 0 || (_data$nixxie3 = _data$nixxie3.list) === null || _data$nixxie3 === void 0 ? void 0 : _data$nixxie3.actions, data === null || data === void 0 || (_data$nixxie4 = data.nixxie) === null || _data$nixxie4 === void 0 || (_data$nixxie4 = _data$nixxie4.adminMeta) === null || _data$nixxie4 === void 0 || (_data$nixxie4 = _data$nixxie4.list) === null || _data$nixxie4 === void 0 ? void 0 : _data$nixxie4.fields, list.actions, list.fields]);
+  const actionsInContext = react.useMemo(() => {
+    if (!value) return [];
+    return list.actions.map(action => {
+      const fieldKeys = filters.getConditionalFilterFieldKeys(actionModes[action.key]);
+      const fields = pick.pick(list.fields, fieldKeys);
+      const serializedValue = filters.serializeItemForConditionalFilters(fields, value);
+      return {
+        ...action,
+        itemView: {
+          ...action.itemView,
+          actionMode: filters.resolveActionMode(actionModes[action.key], serializedValue)
+        }
+      };
+    }).filter(action => filters.isActionAvailable(action, action.itemView));
+  }, [actionModes, list.actions, list.fields, value]);
+  function onAction(action, resultId) {
+    const {
+      navigation
+    } = action.itemView;
+    if (navigation === 'follow' && resultId === itemId || navigation === 'refetch') {
+      refetch();
+    } else if (navigation === 'follow' && resultId) {
+      router__default["default"].push(`/${list.path}/${resultId}`);
+    } else {
+      router__default["default"].push(list.isSingleton ? '/' : `/${list.path}`);
+    }
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(PageContainer.PageContainer, {
+    title: pageTitle,
+    header: /*#__PURE__*/jsxRuntime.jsx(common.ItemPageHeader, {
+      list: list,
+      actions: actionsInContext,
+      label: typeof pageLabel !== 'string' ? 'Loading...' : pageLabel,
+      title: pageTitle,
+      item: item !== null && item !== void 0 ? item : null,
+      value: value !== null && value !== void 0 ? value : initialValue,
+      initialValue: initialValue,
+      onAction: onAction
+    }),
+    children: pageLoading ? /*#__PURE__*/jsxRuntime.jsx(layout.VStack, {
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      children: /*#__PURE__*/jsxRuntime.jsx(progress.ProgressCircle, {
+        "aria-label": "loading item data",
+        size: "large",
+        isIndeterminate: true
+      })
+    }) : /*#__PURE__*/jsxRuntime.jsxs(common.ColumnLayout, {
+      children: [/*#__PURE__*/jsxRuntime.jsxs(layout.Box, {
+        marginY: "xlarge",
+        children: [/*#__PURE__*/jsxRuntime.jsx(GraphQLErrorNotice.GraphQLErrorNotice, {
+          errors: [error]
+        }), item == null && (list.isSingleton ? itemId === '1' ? /*#__PURE__*/jsxRuntime.jsxs(ItemNotFound, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+            children: ["\u201C", list.label, "\u201D doesn\u2019t exist, or you don\u2019t have access to it."]
+          }), !list.hideCreate && /*#__PURE__*/jsxRuntime.jsx(pick.CreateButtonLink, {
+            list: list
+          })]
+        }) : /*#__PURE__*/jsxRuntime.jsx(ItemNotFound, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+            children: ["An item with ID ", /*#__PURE__*/jsxRuntime.jsxs("strong", {
+              children: ["\u201C", itemId, "\u201D"]
+            }), " does not exist."]
+          })
+        }) : /*#__PURE__*/jsxRuntime.jsx(ItemNotFound, {
+          children: /*#__PURE__*/jsxRuntime.jsxs(typography.Text, {
+            children: ["The item with ID ", /*#__PURE__*/jsxRuntime.jsxs("strong", {
+              children: ["\u201C", itemId, "\u201D"]
+            }), " doesn\u2019t exist, or you don\u2019t have access to it."]
+          })
+        }))]
+      }), initialValue && value && /*#__PURE__*/jsxRuntime.jsx(ItemForm, {
+        fieldModes: fieldModes,
+        fieldPositions: fieldPositions,
+        isRequireds: isRequireds,
+        listKey: listKey,
+        itemLabel: itemLabel,
+        initialValue: initialValue,
+        value: value,
+        onChange: setValue,
+        onSaveSuccess: refetch
+      })]
+    })
+  });
+}
+
+exports.getItemPage = getItemPage;