@webiny/app-headless-cms 0.0.0-mt-1

package/admin/views/contentModels/ContentModels.js

@@ -0,0 +1,82 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useMemo } from "react";
+import { css } from "emotion";
+import { useSecurity } from "@webiny/app-security";
+import ContentModelsDataList from "./ContentModelsDataList";
+import NewContentModelDialog from "./NewContentModelDialog";
+import { Cell } from "@webiny/ui/Grid";
+import { Grid } from "@webiny/ui/Grid";
+var grid = /*#__PURE__*/css({
+  "&.mdc-layout-grid": {
+    padding: 0,
+    backgroundColor: "var(--mdc-theme-background)",
+    ">.mdc-layout-grid__inner": {
+      gridGap: 0
+    }
+  }
+}, "label:grid;");
+var centeredContent = /*#__PURE__*/css({
+  backgroundColor: "var(--mdc-theme-surface)",
+  ">.webiny-data-list": {
+    display: "flex",
+    flexDirection: "column",
+    height: "calc(100vh - 70px)",
+    ".mdc-list": {
+      overflow: "auto"
+    }
+  },
+  ">.mdc-list": {
+    display: "flex",
+    flexDirection: "column",
+    maxHeight: "calc(100vh - 70px)",
+    overflow: "auto"
+  }
+}, "label:centeredContent;");
+
+function ContentModels() {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      newContentModelDialogOpened = _React$useState2[0],
+      openNewContentModelDialog = _React$useState2[1];
+
+  var _useSecurity = useSecurity(),
+      identity = _useSecurity.identity;
+
+  var canCreate = useMemo(function () {
+    var permission = identity.getPermission("cms.contentModel");
+
+    if (!permission) {
+      return false;
+    }
+
+    if (typeof permission.rwd !== "string") {
+      return true;
+    }
+
+    return permission.rwd.includes("w");
+  }, []);
+  var onCreate = useCallback(function () {
+    return openNewContentModelDialog(true);
+  }, []);
+  var onClose = useCallback(function () {
+    return openNewContentModelDialog(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NewContentModelDialog, {
+    open: newContentModelDialogOpened,
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement(Grid, {
+    className: grid
+  }, /*#__PURE__*/React.createElement(Cell, {
+    span: 3
+  }), /*#__PURE__*/React.createElement(Cell, {
+    span: 6,
+    className: centeredContent
+  }, /*#__PURE__*/React.createElement(ContentModelsDataList, {
+    canCreate: canCreate,
+    onCreate: onCreate
+  })), /*#__PURE__*/React.createElement(Cell, {
+    span: 3
+  })));
+}
+
+export default ContentModels;

package/admin/views/contentModels/ContentModelsDataList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type ContentModelsDataListProps = {
+    canCreate: boolean;
+    onCreate: () => void;
+};
+declare const ContentModelsDataList: ({ canCreate, onCreate }: ContentModelsDataListProps) => JSX.Element;
+export default ContentModelsDataList;

package/admin/views/contentModels/ContentModelsDataList.js

@@ -0,0 +1,281 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useMemo, useState } from "react";
+import TimeAgo from "timeago-react";
+import { css } from "emotion";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
+import { ReactComponent as ViewListIcon } from "@svgr/webpack!../../icons/view_list.svg";
+import { useApolloClient, useQuery } from "../../hooks";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import * as UIL from "@webiny/ui/List";
+import { ButtonIcon, ButtonSecondary, IconButton } from "@webiny/ui/Button";
+import { Tooltip } from "@webiny/ui/Tooltip";
+import { i18n } from "@webiny/app/i18n";
+import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
+import { removeModelFromGroupCache, removeModelFromListCache } from "./cache";
+import * as GQL from "../../viewsGraphql";
+import { ReactComponent as AddIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/add-18px.svg";
+import SearchUI from "@webiny/app-admin/components/SearchUI";
+import { deserializeSorters, serializeSorters } from "../utils";
+import orderBy from "lodash/orderBy";
+import { Cell, Grid } from "@webiny/ui/Grid";
+import { Select } from "@webiny/ui/Select";
+import { ReactComponent as FilterIcon } from "@svgr/webpack!@webiny/app-admin/assets/icons/filter-24px.svg";
+import usePermission from "../../hooks/usePermission";
+var t = i18n.namespace("FormsApp.ContentModelsDataList");
+var SORTERS = [{
+  label: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["Newest to oldest"]))),
+  sorters: {
+    savedOn: "desc"
+  }
+}, {
+  label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Oldest to newest"]))),
+  sorters: {
+    savedOn: "asc"
+  }
+}, {
+  label: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["Name A-Z"]))),
+  sorters: {
+    name: "asc"
+  }
+}, {
+  label: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Name Z-A"]))),
+  sorters: {
+    name: "desc"
+  }
+}];
+var rightAlign = /*#__PURE__*/css({
+  alignItems: "flex-end !important",
+  justifyContent: "center !important"
+}, "label:rightAlign;");
+var listItemMinHeight = /*#__PURE__*/css({
+  minHeight: "66px !important"
+}, "label:listItemMinHeight;");
+
+var ContentModelsDataList = function ContentModelsDataList(_ref) {
+  var canCreate = _ref.canCreate,
+      onCreate = _ref.onCreate;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      filter = _useState2[0],
+      setFilter = _useState2[1];
+
+  var _useState3 = useState(serializeSorters(SORTERS[0].sorters)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      sort = _useState4[0],
+      setSort = _useState4[1];
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var client = useApolloClient();
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useConfirmationDialo = useConfirmationDialog({
+    dataTestId: "cms-delete-content-model-dialog"
+  }),
+      showConfirmation = _useConfirmationDialo.showConfirmation;
+
+  var _useQuery = useQuery(GQL.LIST_CONTENT_MODELS),
+      data = _useQuery.data,
+      loading = _useQuery.loading;
+
+  var _usePermission = usePermission(),
+      canDelete = _usePermission.canDelete,
+      canEdit = _usePermission.canEdit;
+
+  var filterData = useCallback(function (_ref2) {
+    var name = _ref2.name;
+    return name.toLowerCase().includes(filter);
+  }, [filter]);
+  var sortData = useCallback(function (list) {
+    if (!sort) {
+      return list;
+    }
+
+    var _Object$entries = Object.entries(deserializeSorters(sort)),
+        _Object$entries2 = _slicedToArray(_Object$entries, 1),
+        _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+        key = _Object$entries2$[0],
+        value = _Object$entries2$[1];
+
+    return orderBy(list, [key], [value]);
+  }, [sort]);
+  var models = loading ? [] : get(data, "listContentModels.data", []);
+
+  var deleteRecord = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(item) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              showConfirmation( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+                return _regeneratorRuntime.wrap(function _callee$(_context) {
+                  while (1) {
+                    switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return client.mutate({
+                          mutation: GQL.DELETE_CONTENT_MODEL,
+                          variables: {
+                            modelId: item.modelId
+                          },
+                          update: function update(cache, _ref5) {
+                            var data = _ref5.data;
+                            var error = data.deleteContentModel.error;
+
+                            if (error) {
+                              return showSnackbar(error.message, {
+                                title: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Something unexpected happened."])))
+                              });
+                            }
+
+                            removeModelFromListCache(cache, item);
+                            removeModelFromGroupCache(cache, item);
+                            showSnackbar(t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Content model {name} deleted successfully!."])))({
+                              name: item.name
+                            }));
+                          }
+                        });
+
+                      case 2:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }
+                }, _callee);
+              })));
+
+            case 1:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function deleteRecord(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var editRecord = function editRecord(contentModel) {
+    history.push("/cms/content-models/" + contentModel.modelId);
+  };
+
+  var viewContentEntries = useCallback(function (contentModel) {
+    return function () {
+      return history.push("/cms/content-entries/" + contentModel.modelId);
+    };
+  }, undefined);
+  var contentModelsDataListModalOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(UIL.DataListModalOverlay, null, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Select, {
+      value: sort,
+      onChange: setSort,
+      label: t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Sort by"]))),
+      description: "Sort content models by"
+    }, SORTERS.map(function (_ref6) {
+      var label = _ref6.label,
+          sorters = _ref6.sorters;
+      return /*#__PURE__*/React.createElement("option", {
+        key: label,
+        value: serializeSorters(sorters)
+      }, label);
+    })))));
+  }, [sort]);
+  var filteredData = filter === "" ? models : models.filter(filterData);
+  var contentModels = sortData(filteredData);
+  return /*#__PURE__*/React.createElement(UIL.DataList, {
+    loading: loading,
+    data: contentModels,
+    title: t(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["Content Models"]))),
+    actions: canCreate ? /*#__PURE__*/React.createElement(ButtonSecondary, {
+      "data-testid": "new-record-button",
+      onClick: onCreate
+    }, /*#__PURE__*/React.createElement(ButtonIcon, {
+      icon: /*#__PURE__*/React.createElement(AddIcon, null)
+    }), " ", t(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["New Model"])))) : null,
+    search: /*#__PURE__*/React.createElement(SearchUI, {
+      value: filter,
+      onChange: setFilter,
+      inputPlaceholder: t(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["Search content models"])))
+    }),
+    modalOverlay: contentModelsDataListModalOverlay,
+    modalOverlayAction: /*#__PURE__*/React.createElement(UIL.DataListModalOverlayAction, {
+      icon: /*#__PURE__*/React.createElement(FilterIcon, null),
+      "data-testid": "default-data-list.filter"
+    })
+  }, function (_ref7) {
+    var _ref7$data = _ref7.data,
+        data = _ref7$data === void 0 ? [] : _ref7$data;
+    return /*#__PURE__*/React.createElement(UIL.List, {
+      "data-testid": "default-data-list"
+    }, data.map(function (contentModel) {
+      var disableViewContent = contentModel.fields.length === 0;
+      var message = disableViewContent ? "To view the content, you first need to add a field and save the model" : "View content";
+      return /*#__PURE__*/React.createElement(UIL.ListItem, {
+        key: contentModel.modelId,
+        className: listItemMinHeight
+      }, /*#__PURE__*/React.createElement(UIL.ListItemText, null, contentModel.name, /*#__PURE__*/React.createElement(UIL.ListItemTextSecondary, null, t(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["Last modified: {time}."])))({
+        time: /*#__PURE__*/React.createElement(TimeAgo, {
+          datetime: contentModel.savedOn
+        })
+      }))), /*#__PURE__*/React.createElement(UIL.ListItemMeta, {
+        className: rightAlign
+      }, /*#__PURE__*/React.createElement(UIL.ListActions, null, canEdit(contentModel, "cms.contentModel") && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["{message}"])))({
+          message: message
+        }),
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        "data-testid": "cms-view-content-model-button",
+        icon: /*#__PURE__*/React.createElement(ViewListIcon, null),
+        label: t(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["View entries"]))),
+        onClick: viewContentEntries(contentModel),
+        disabled: disableViewContent
+      })), contentModel.plugin ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["Content model is registered via a plugin."]))),
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(EditIcon, {
+        disabled: true,
+        "data-testid": "cms-edit-content-model-button"
+      })) : /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["Edit content model"]))),
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(EditIcon, {
+        onClick: function onClick() {
+          return editRecord(contentModel);
+        },
+        "data-testid": "cms-edit-content-model-button"
+      }))), canDelete(contentModel, "cms.contentModel") && contentModel.plugin ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["Content model is registered via a plugin."]))),
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        disabled: true,
+        "data-testid": "cms-delete-content-model-button"
+      })) : /*#__PURE__*/React.createElement(Tooltip, {
+        content: t(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["Delete content model"]))),
+        placement: "top"
+      }, /*#__PURE__*/React.createElement(DeleteIcon, {
+        onClick: function onClick() {
+          return deleteRecord(contentModel);
+        },
+        "data-testid": "cms-delete-content-model-button"
+      })))));
+    }));
+  });
+};
+
+export default ContentModelsDataList;

package/admin/views/contentModels/NewContentModelDialog.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as UID from "@webiny/ui/Dialog";
+export declare type NewContentModelDialogProps = {
+    open: boolean;
+    onClose: UID.DialogOnClose;
+};
+declare const NewContentModelDialog: React.FC<NewContentModelDialogProps>;
+export default NewContentModelDialog;

package/admin/views/contentModels/NewContentModelDialog.js

@@ -0,0 +1,196 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback } from "react";
+import { css } from "emotion";
+import get from "lodash/get";
+import { useRouter } from "@webiny/react-router";
+import { Form } from "@webiny/form";
+import { Input } from "@webiny/ui/Input";
+import { Select } from "@webiny/ui/Select";
+import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { validation } from "@webiny/validation";
+import { useQuery, useMutation } from "../../hooks";
+import { i18n } from "@webiny/app/i18n";
+import { ButtonDefault } from "@webiny/ui/Button";
+import * as UID from "@webiny/ui/Dialog";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { addModelToGroupCache, addModelToListCache } from "./cache";
+import * as GQL from "../../viewsGraphql";
+var t = i18n.ns("app-headless-cms/admin/views/content-models/new-content-model-dialog");
+var narrowDialog = /*#__PURE__*/css({
+  ".mdc-dialog__surface": {
+    width: 600,
+    minWidth: 600
+  }
+}, "label:narrowDialog;");
+var noPadding = /*#__PURE__*/css({
+  padding: "5px !important"
+}, "label:noPadding;");
+
+/**
+ * This list is to disallow creating models that might interfere with GraphQL schema creation.
+ * Add more if required.
+ */
+var disallowedModelIdEndingList = ["Response", "List", "Meta", "Input", "Sorter"];
+
+var NewContentModelDialog = function NewContentModelDialog(_ref) {
+  var open = _ref.open,
+      onClose = _ref.onClose;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var _useSnackbar = useSnackbar(),
+      showSnackbar = _useSnackbar.showSnackbar;
+
+  var _useRouter = useRouter(),
+      history = _useRouter.history;
+
+  var _useMutation = useMutation(GQL.CREATE_CONTENT_MODEL, {
+    update: function update(cache, _ref2) {
+      var data = _ref2.data;
+      var _data$createContentMo = data.createContentModel,
+          model = _data$createContentMo.data,
+          error = _data$createContentMo.error;
+
+      if (error) {
+        return showSnackbar(error.message);
+      }
+
+      addModelToListCache(cache, model);
+      addModelToGroupCache(cache, model);
+      history.push("/cms/content-models/" + model.modelId);
+    }
+  }),
+      _useMutation2 = _slicedToArray(_useMutation, 1),
+      createContentModel = _useMutation2[0];
+
+  var _useQuery = useQuery(GQL.LIST_MENU_CONTENT_GROUPS_MODELS, {
+    skip: !open
+  }),
+      data = _useQuery.data;
+
+  var contentModelGroups = get(data, "listContentModelGroups.data", []).map(function (item) {
+    return {
+      value: item.id,
+      label: item.name
+    };
+  });
+  var nameValidator = useCallback(function (name) {
+    var target = (name || "").trim();
+
+    if (!target.charAt(0).match(/[a-zA-Z]/)) {
+      throw new Error("Value is not valid - must not start with a number.");
+    }
+
+    if (target.toLowerCase() === "id") {
+      throw new Error('Value is not valid - "id" is an auto-generated field.');
+    }
+
+    var _iterator = _createForOfIteratorHelper(disallowedModelIdEndingList),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var ending = _step.value;
+        var re = new RegExp("".concat(ending, "$"), "i");
+        var matched = target.match(re);
+
+        if (matched === null) {
+          continue;
+        }
+
+        throw new Error("Model name that ends with \"".concat(ending, "\" is not allowed."));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    return true;
+  }, undefined);
+  return /*#__PURE__*/React.createElement(UID.Dialog, {
+    open: open,
+    onClose: onClose,
+    className: narrowDialog,
+    "data-testid": "cms-new-content-model-modal"
+  }, open && /*#__PURE__*/React.createElement(Form, {
+    data: {
+      group: get(contentModelGroups, "0.value")
+    },
+    onSubmit: /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                setLoading(true);
+                _context.next = 3;
+                return createContentModel({
+                  variables: {
+                    data: data
+                  }
+                });
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }()
+  }, function (_ref4) {
+    var Bind = _ref4.Bind,
+        submit = _ref4.submit;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(CircularProgress, null), /*#__PURE__*/React.createElement(UID.DialogTitle, null, t(_templateObject || (_templateObject = _taggedTemplateLiteral(["New Content Model"])))), /*#__PURE__*/React.createElement(UID.DialogContent, null, /*#__PURE__*/React.createElement(Grid, {
+      className: noPadding
+    }, /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "name",
+      validators: [validation.create("required,maxLength:100"), nameValidator]
+    }, /*#__PURE__*/React.createElement(Input, {
+      label: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["Name"]))),
+      description: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["The name of the content model"])))
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "group",
+      validators: validation.create("required")
+    }, /*#__PURE__*/React.createElement(Select, {
+      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["Choose a content model group"]))),
+      label: t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["Content model group"]))),
+      options: contentModelGroups
+    }))), /*#__PURE__*/React.createElement(Cell, {
+      span: 12
+    }, /*#__PURE__*/React.createElement(Bind, {
+      name: "description"
+    }, function (props) {
+      return /*#__PURE__*/React.createElement(Input, Object.assign({}, props, {
+        rows: 4,
+        maxLength: 200,
+        characterCount: true,
+        label: t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["Description"])))
+      }));
+    })))), /*#__PURE__*/React.createElement(UID.DialogActions, null, /*#__PURE__*/React.createElement(ButtonDefault, {
+      onClick: submit
+    }, "+ ", t(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["Create"]))))));
+  }));
+};
+
+export default NewContentModelDialog;

package/admin/views/contentModels/cache.d.ts

@@ -0,0 +1,5 @@
+import { CmsEditorContentModel } from "../../../types";
+export declare const addModelToListCache: (cache: any, model: CmsEditorContentModel) => void;
+export declare const addModelToGroupCache: (cache: any, model: CmsEditorContentModel) => void;
+export declare const removeModelFromListCache: (cache: any, model: CmsEditorContentModel) => void;
+export declare const removeModelFromGroupCache: (cache: any, model: CmsEditorContentModel) => void;

package/admin/views/contentModels/cache.js

@@ -0,0 +1,68 @@
+import dotProp from "dot-prop-immutable";
+import * as GQL from "../../viewsGraphql";
+export var addModelToListCache = function addModelToListCache(cache, model) {
+  var _cache$readQuery = cache.readQuery({
+    query: GQL.LIST_CONTENT_MODELS
+  }),
+      listContentModels = _cache$readQuery.listContentModels;
+
+  var newModelIndex = listContentModels.data.length;
+  cache.writeQuery({
+    query: GQL.LIST_CONTENT_MODELS,
+    data: {
+      listContentModels: dotProp.set(listContentModels, "data.".concat(newModelIndex), model)
+    }
+  });
+};
+export var addModelToGroupCache = function addModelToGroupCache(cache, model) {
+  var _cache$readQuery2 = cache.readQuery({
+    query: GQL.LIST_MENU_CONTENT_GROUPS_MODELS
+  }),
+      groupsList = _cache$readQuery2.listContentModelGroups;
+
+  var groupIndex = groupsList.data.findIndex(function (g) {
+    return g.id === model.group.id;
+  });
+  var newGroupModelIndex = groupsList.data[groupIndex].contentModels.length;
+  cache.writeQuery({
+    query: GQL.LIST_MENU_CONTENT_GROUPS_MODELS,
+    data: {
+      listContentModelGroups: dotProp.set(groupsList, "data.".concat(groupIndex, ".contentModels.").concat(newGroupModelIndex), model)
+    }
+  });
+};
+export var removeModelFromListCache = function removeModelFromListCache(cache, model) {
+  var _cache$readQuery3 = cache.readQuery({
+    query: GQL.LIST_CONTENT_MODELS
+  }),
+      listContentModels = _cache$readQuery3.listContentModels;
+
+  var modelIndex = listContentModels.data.findIndex(function (m) {
+    return m.modelId === model.modelId;
+  });
+  cache.writeQuery({
+    query: GQL.LIST_CONTENT_MODELS,
+    data: {
+      listContentModels: dotProp.delete(listContentModels, "data.".concat(modelIndex))
+    }
+  });
+};
+export var removeModelFromGroupCache = function removeModelFromGroupCache(cache, model) {
+  var _cache$readQuery4 = cache.readQuery({
+    query: GQL.LIST_MENU_CONTENT_GROUPS_MODELS
+  }),
+      groupsList = _cache$readQuery4.listContentModelGroups;
+
+  var groupIndex = groupsList.data.findIndex(function (g) {
+    return g.id === model.group.id;
+  });
+  var modelIndex = groupsList.data[groupIndex].contentModels.findIndex(function (m) {
+    return m.modelId === model.modelId;
+  });
+  cache.writeQuery({
+    query: GQL.LIST_MENU_CONTENT_GROUPS_MODELS,
+    data: {
+      listContentModelGroups: dotProp.delete(groupsList, "data.".concat(groupIndex, ".contentModels.").concat(modelIndex))
+    }
+  });
+};

package/admin/views/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const serializeSorters: (data: any) => any;
+export declare const deserializeSorters: (data: string) => Record<string, "asc" | "desc" | boolean>;

package/admin/views/utils.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export var serializeSorters = function serializeSorters(data) {
+  if (!data) {
+    return data;
+  }
+
+  var _Object$entries = Object.entries(data),
+      _Object$entries2 = _slicedToArray(_Object$entries, 1),
+      _Object$entries2$ = _slicedToArray(_Object$entries2[0], 2),
+      key = _Object$entries2$[0],
+      value = _Object$entries2$[1];
+
+  return "".concat(key, ":").concat(value);
+};
+export var deserializeSorters = function deserializeSorters(data) {
+  if (typeof data !== "string") {
+    return data;
+  }
+
+  var _ref = data.split(":"),
+      _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+
+  return _defineProperty({}, key, value);
+};