@webiny/app-headless-cms 0.0.0-unstable.40876133bb → 0.0.0-unstable.496cf268ac

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAdvancedSingleRenderer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _AdvancedSingleReferenceField = require("./components/AdvancedSingleReferenceField");
+var _useNewRefEntryDialog = require("../hooks/useNewRefEntryDialog");
+var _templateObject, _templateObject2;
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+var createAdvancedSingleRenderer = function createAdvancedSingleRenderer() {
+  return {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-ref-single-advanced",
+    renderer: {
+      rendererName: "ref-advanced-single",
+      name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Detailed view with modal search"]))),
+      description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a preview card of the selected record and the user searches through records using a modal window."]))),
+      canUse: function canUse(_ref) {
+        var field = _ref.field;
+        return field.type === "ref" && !field.multipleValues;
+      },
+      render: function render(props) {
+        var field = props.field,
+          getBind = props.getBind,
+          Label = props.Label,
+          contentModel = props.contentModel;
+        var Bind = getBind();
+        return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+          return /*#__PURE__*/_react.default.createElement(_useNewRefEntryDialog.NewRefEntryDialogContextProvider, null, /*#__PURE__*/_react.default.createElement(_AdvancedSingleReferenceField.AdvancedSingleReferenceField, {
+            field: field,
+            getBind: getBind,
+            bind: bind,
+            Label: Label,
+            contentModel: contentModel
+          }));
+        });
+      }
+    }
+  };
+};
+exports.createAdvancedSingleRenderer = createAdvancedSingleRenderer;

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","createAdvancedSingleRenderer","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","getBind","Label","contentModel","Bind","bind"],"sources":["detailedReferenceRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { AdvancedSingleReferenceField } from \"./components/AdvancedSingleReferenceField\";\nimport { NewRefEntryDialogContextProvider } from \"~/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nexport const createAdvancedSingleRenderer = (): CmsEditorFieldRendererPlugin => {\n    return {\n        type: \"cms-editor-field-renderer\",\n        name: \"cms-editor-field-renderer-ref-single-advanced\",\n        renderer: {\n            rendererName: \"ref-advanced-single\",\n            name: t`Detailed view with modal search`,\n            description: t`Renders a preview card of the selected record and the user searches through records using a modal window.`,\n            canUse({ field }) {\n                return field.type === \"ref\" && !field.multipleValues;\n            },\n            render: props => {\n                const { field, getBind, Label, contentModel } = props;\n\n                const Bind = getBind();\n                return (\n                    <Bind>\n                        {bind => {\n                            return (\n                                <NewRefEntryDialogContextProvider>\n                                    <AdvancedSingleReferenceField\n                                        field={field}\n                                        getBind={getBind}\n                                        bind={bind}\n                                        Label={Label}\n                                        contentModel={contentModel}\n                                    />\n                                </NewRefEntryDialogContextProvider>\n                            );\n                        }}\n                    </Bind>\n                );\n            }\n        }\n    };\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAAiH;AAEjH,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAE/C,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4B,GAAuC;EAC5E,OAAO;IACHC,IAAI,EAAE,2BAA2B;IACjCC,IAAI,EAAE,+CAA+C;IACrDC,QAAQ,EAAE;MACNC,YAAY,EAAE,qBAAqB;MACnCF,IAAI,EAAEL,CAAC,kHAAiC;MACxCQ,WAAW,EAAER,CAAC,8LAA2G;MACzHS,MAAM,wBAAY;QAAA,IAATC,KAAK,QAALA,KAAK;QACV,OAAOA,KAAK,CAACN,IAAI,KAAK,KAAK,IAAI,CAACM,KAAK,CAACC,cAAc;MACxD,CAAC;MACDC,MAAM,EAAE,gBAAAC,KAAK,EAAI;QACb,IAAQH,KAAK,GAAmCG,KAAK,CAA7CH,KAAK;UAAEI,OAAO,GAA0BD,KAAK,CAAtCC,OAAO;UAAEC,KAAK,GAAmBF,KAAK,CAA7BE,KAAK;UAAEC,YAAY,GAAKH,KAAK,CAAtBG,YAAY;QAE3C,IAAMC,IAAI,GAAGH,OAAO,EAAE;QACtB,oBACI,6BAAC,IAAI,QACA,UAAAI,IAAI,EAAI;UACL,oBACI,6BAAC,sDAAgC,qBAC7B,6BAAC,0DAA4B;YACzB,KAAK,EAAER,KAAM;YACb,OAAO,EAAEI,OAAQ;YACjB,IAAI,EAAEI,IAAK;YACX,KAAK,EAAEH,KAAM;YACb,YAAY,EAAEC;UAAa,EAC7B,CAC6B;QAE3C,CAAC,CACE;MAEf;IACJ;EACJ,CAAC;AACL,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferencesRenderer.d.ts

@@ -0,0 +1,2 @@
+import { CmsEditorFieldRendererPlugin } from "../../../../../types";
+export declare const createAdvancedMultipleRenderer: () => CmsEditorFieldRendererPlugin;

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferencesRenderer.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAdvancedMultipleRenderer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _i18n = require("@webiny/app/i18n");
+var _AdvancedMultipleReferenceField = require("./components/AdvancedMultipleReferenceField");
+var _templateObject, _templateObject2;
+var t = _i18n.i18n.ns("app-headless-cms/admin/fields/ref");
+var createAdvancedMultipleRenderer = function createAdvancedMultipleRenderer() {
+  return {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-ref-multiple-advanced",
+    renderer: {
+      rendererName: "ref-advanced-multiple",
+      name: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Detailed view with modal search"]))),
+      description: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Renders a preview card of the selected record and the user searches through records using a modal window."]))),
+      canUse: function canUse(_ref) {
+        var field = _ref.field;
+        return field.type === "ref" && !!field.multipleValues;
+      },
+      render: function render(props) {
+        var field = props.field,
+          getBind = props.getBind,
+          Label = props.Label,
+          contentModel = props.contentModel;
+        var Bind = getBind();
+        return /*#__PURE__*/_react.default.createElement(Bind, null, function (bind) {
+          return /*#__PURE__*/_react.default.createElement(_AdvancedMultipleReferenceField.AdvancedMultipleReferenceField, {
+            field: field,
+            getBind: getBind,
+            bind: bind,
+            Label: Label,
+            contentModel: contentModel
+          });
+        });
+      }
+    }
+  };
+};
+exports.createAdvancedMultipleRenderer = createAdvancedMultipleRenderer;

package/admin/plugins/fieldRenderers/ref/advanced/detailedReferencesRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["t","i18n","ns","createAdvancedMultipleRenderer","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","props","getBind","Label","contentModel","Bind","bind"],"sources":["detailedReferencesRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { AdvancedMultipleReferenceField } from \"./components/AdvancedMultipleReferenceField\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/ref\");\n\nexport const createAdvancedMultipleRenderer = (): CmsEditorFieldRendererPlugin => {\n    return {\n        type: \"cms-editor-field-renderer\",\n        name: \"cms-editor-field-renderer-ref-multiple-advanced\",\n        renderer: {\n            rendererName: \"ref-advanced-multiple\",\n            name: t`Detailed view with modal search`,\n            description: t`Renders a preview card of the selected record and the user searches through records using a modal window.`,\n            canUse({ field }) {\n                return field.type === \"ref\" && !!field.multipleValues;\n            },\n            render: props => {\n                const { field, getBind, Label, contentModel } = props;\n\n                const Bind = getBind();\n                return (\n                    <Bind>\n                        {bind => {\n                            return (\n                                <AdvancedMultipleReferenceField\n                                    field={field}\n                                    getBind={getBind}\n                                    bind={bind}\n                                    Label={Label}\n                                    contentModel={contentModel}\n                                />\n                            );\n                        }}\n                    </Bind>\n                );\n            }\n        }\n    };\n};\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AAA6F;AAE7F,IAAMA,CAAC,GAAGC,UAAI,CAACC,EAAE,CAAC,mCAAmC,CAAC;AAE/C,IAAMC,8BAA8B,GAAG,SAAjCA,8BAA8B,GAAuC;EAC9E,OAAO;IACHC,IAAI,EAAE,2BAA2B;IACjCC,IAAI,EAAE,iDAAiD;IACvDC,QAAQ,EAAE;MACNC,YAAY,EAAE,uBAAuB;MACrCF,IAAI,EAAEL,CAAC,kHAAiC;MACxCQ,WAAW,EAAER,CAAC,8LAA2G;MACzHS,MAAM,wBAAY;QAAA,IAATC,KAAK,QAALA,KAAK;QACV,OAAOA,KAAK,CAACN,IAAI,KAAK,KAAK,IAAI,CAAC,CAACM,KAAK,CAACC,cAAc;MACzD,CAAC;MACDC,MAAM,EAAE,gBAAAC,KAAK,EAAI;QACb,IAAQH,KAAK,GAAmCG,KAAK,CAA7CH,KAAK;UAAEI,OAAO,GAA0BD,KAAK,CAAtCC,OAAO;UAAEC,KAAK,GAAmBF,KAAK,CAA7BE,KAAK;UAAEC,YAAY,GAAKH,KAAK,CAAtBG,YAAY;QAE3C,IAAMC,IAAI,GAAGH,OAAO,EAAE;QACtB,oBACI,6BAAC,IAAI,QACA,UAAAI,IAAI,EAAI;UACL,oBACI,6BAAC,8DAA8B;YAC3B,KAAK,EAAER,KAAM;YACb,OAAO,EAAEI,OAAQ;YACjB,IAAI,EAAEI,IAAK;YACX,KAAK,EAAEH,KAAM;YACb,YAAY,EAAEC;UAAa,EAC7B;QAEV,CAAC,CACE;MAEf;IACJ;EACJ,CAAC;AACL,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.d.ts

@@ -0,0 +1,44 @@
+import { CmsContentEntryStatusType, CmsIdentity, CmsErrorResponse, CmsMetaResponse, CmsModel } from "../../../../../../types";
+import { CmsReferenceContentEntry } from "../../components/types";
+import { CmsEntryGetEntryVariable } from "../../components/graphql";
+export interface ListLatestCmsEntriesResponse {
+    entries: {
+        data: CmsReferenceContentEntry[];
+        error: CmsErrorResponse | null;
+    };
+}
+export interface ListLatestCmsEntriesVariables {
+    entries: CmsEntryGetEntryVariable[];
+}
+export declare const LIST_LATEST_CONTENT_ENTRIES: import("graphql").DocumentNode;
+export interface SearchQueryResponseEntry {
+    id: string;
+    entryId: string;
+    savedOn: Date;
+    createdOn: Date;
+    createdBy: CmsIdentity;
+    ownedBy: CmsIdentity;
+    modifiedBy: CmsIdentity;
+    meta: {
+        title: string;
+        description?: string;
+        image?: string;
+        status: CmsContentEntryStatusType;
+    };
+}
+export interface SearchQueryResponse {
+    content: {
+        data: SearchQueryResponseEntry[];
+        error: CmsErrorResponse | null;
+        meta: CmsMetaResponse;
+    };
+}
+export interface SearchQueryVariables {
+    where?: {
+        [key: string]: any;
+    };
+    sort?: string[];
+    limit?: number;
+    after?: string;
+}
+export declare const createSearchQuery: (model: CmsModel) => import("graphql").DocumentNode;

package/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSearchQuery = exports.LIST_LATEST_CONTENT_ENTRIES = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _graphqlTag = _interopRequireDefault(require("graphql-tag"));
+var _upperFirst = _interopRequireDefault(require("lodash/upperFirst"));
+var _pluralize = _interopRequireDefault(require("pluralize"));
+var _templateObject, _templateObject2;
+var fields = "\n    data {\n        id\n        entryId\n        title\n        description\n        image\n        status\n        createdOn\n        savedOn\n        model {\n            name\n            modelId\n        }\n        createdBy {\n            id\n            displayName\n            type\n        }\n        modifiedBy {\n            id\n            displayName\n            type\n        }\n        published {\n            id\n        }\n    }\n    error {\n        message\n        code\n        data\n    }\n";
+var LIST_LATEST_CONTENT_ENTRIES = (0, _graphqlTag.default)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    query CmsListLatestContentEntries($entries: [CmsModelEntryInput!]!) {\n        entries: getLatestContentEntries(entries: $entries) {\n            ", "\n        }\n    }\n"])), fields);
+exports.LIST_LATEST_CONTENT_ENTRIES = LIST_LATEST_CONTENT_ENTRIES;
+var createSearchQuery = function createSearchQuery(model) {
+  var ucFirstPluralizedModelId = (0, _upperFirst.default)((0, _pluralize.default)(model.modelId));
+  var ucFirstModelId = (0, _upperFirst.default)(model.modelId);
+  return (0, _graphqlTag.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        query Search", "($where: ", "ListWhereInput, $sort: [", "ListSorter], $limit: Int, $after: String) {\n            content: list", "(\n            where: $where\n            sort: $sort\n            limit: $limit\n            after: $after\n            ) {\n            data {\n                id\n                entryId\n                savedOn\n                createdOn\n                createdBy {\n                    id\n                    type\n                    displayName\n                }\n                ownedBy {\n                    id\n                    type\n                    displayName\n                }\n                modifiedBy {\n                    id\n                    type\n                    displayName\n                }\n                meta {\n                    title\n                    description\n                    image\n                    status\n                }\n            }\n            meta {\n                cursor\n                hasMoreItems\n                totalCount\n            }\n            error {\n                message\n                code\n                data\n            }\n        }\n        }"])), ucFirstPluralizedModelId, ucFirstModelId, ucFirstModelId, ucFirstPluralizedModelId);
+};
+exports.createSearchQuery = createSearchQuery;

package/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["fields","LIST_LATEST_CONTENT_ENTRIES","gql","createSearchQuery","model","ucFirstPluralizedModelId","upperFirst","pluralize","modelId","ucFirstModelId"],"sources":["graphql.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport {\n    CmsContentEntryStatusType,\n    CmsIdentity,\n    CmsErrorResponse,\n    CmsMetaResponse,\n    CmsModel\n} from \"~/types\";\nimport { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { CmsEntryGetEntryVariable } from \"~/admin/plugins/fieldRenderers/ref/components/graphql\";\nimport upperFirst from \"lodash/upperFirst\";\nimport pluralize from \"pluralize\";\n\nconst fields = `\n    data {\n        id\n        entryId\n        title\n        description\n        image\n        status\n        createdOn\n        savedOn\n        model {\n            name\n            modelId\n        }\n        createdBy {\n            id\n            displayName\n            type\n        }\n        modifiedBy {\n            id\n            displayName\n            type\n        }\n        published {\n            id\n        }\n    }\n    error {\n        message\n        code\n        data\n    }\n`;\n\nexport interface ListLatestCmsEntriesResponse {\n    entries: {\n        data: CmsReferenceContentEntry[];\n        error: CmsErrorResponse | null;\n    };\n}\n\nexport interface ListLatestCmsEntriesVariables {\n    entries: CmsEntryGetEntryVariable[];\n}\n\nexport const LIST_LATEST_CONTENT_ENTRIES = gql`\n    query CmsListLatestContentEntries($entries: [CmsModelEntryInput!]!) {\n        entries: getLatestContentEntries(entries: $entries) {\n            ${fields}\n        }\n    }\n`;\n\nexport interface SearchQueryResponseEntry {\n    id: string;\n    entryId: string;\n    savedOn: Date;\n    createdOn: Date;\n    createdBy: CmsIdentity;\n    ownedBy: CmsIdentity;\n    modifiedBy: CmsIdentity;\n    meta: {\n        title: string;\n        description?: string;\n        image?: string;\n        status: CmsContentEntryStatusType;\n    };\n}\n\nexport interface SearchQueryResponse {\n    content: {\n        data: SearchQueryResponseEntry[];\n        error: CmsErrorResponse | null;\n        meta: CmsMetaResponse;\n    };\n}\n\nexport interface SearchQueryVariables {\n    where?: {\n        [key: string]: any;\n    };\n    sort?: string[];\n    limit?: number;\n    after?: string;\n}\n\nexport const createSearchQuery = (model: CmsModel) => {\n    const ucFirstPluralizedModelId = upperFirst(pluralize(model.modelId));\n    const ucFirstModelId = upperFirst(model.modelId);\n\n    return gql`\n        query Search${ucFirstPluralizedModelId}($where: ${ucFirstModelId}ListWhereInput, $sort: [${ucFirstModelId}ListSorter], $limit: Int, $after: String) {\n            content: list${ucFirstPluralizedModelId}(\n            where: $where\n            sort: $sort\n            limit: $limit\n            after: $after\n            ) {\n            data {\n                id\n                entryId\n                savedOn\n                createdOn\n                createdBy {\n                    id\n                    type\n                    displayName\n                }\n                ownedBy {\n                    id\n                    type\n                    displayName\n                }\n                modifiedBy {\n                    id\n                    type\n                    displayName\n                }\n                meta {\n                    title\n                    description\n                    image\n                    status\n                }\n            }\n            meta {\n                cursor\n                hasMoreItems\n                totalCount\n            }\n            error {\n                message\n                code\n                data\n            }\n        }\n        }`;\n};\n"],"mappings":";;;;;;;;AAAA;AAUA;AACA;AAAkC;AAElC,IAAMA,MAAM,ygBAiCX;AAaM,IAAMC,2BAA2B,OAAGC,mBAAG,qQAGhCF,MAAM,CAGnB;AAAC;AAmCK,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAe,EAAK;EAClD,IAAMC,wBAAwB,GAAG,IAAAC,mBAAU,EAAC,IAAAC,kBAAS,EAACH,KAAK,CAACI,OAAO,CAAC,CAAC;EACrE,IAAMC,cAAc,GAAG,IAAAH,mBAAU,EAACF,KAAK,CAACI,OAAO,CAAC;EAEhD,WAAON,mBAAG,8vCACQG,wBAAwB,EAAYI,cAAc,EAA2BA,cAAc,EACtFJ,wBAAwB;AA6CnD,CAAC;AAAC"}

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.d.ts

@@ -0,0 +1,15 @@
+import { CmsModel } from "../../../../../../types";
+import { CmsReferenceContentEntry } from "../../components/types";
+interface Params {
+    model: CmsModel;
+    limit: number;
+}
+export declare const useEntries: (params: Params) => {
+    runSearch: (query?: string) => void;
+    loadMore: () => void;
+    loading: boolean;
+    entries: CmsReferenceContentEntry[];
+    error: string | null;
+    hasMore: boolean;
+};
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEntries = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _hooks = require("../../../../../hooks");
+var _graphql = require("./graphql");
+var searchableFieldTypes = ["text", "long-text"];
+var isFieldSearchable = function isFieldSearchable(field) {
+  return searchableFieldTypes.includes(field.type);
+};
+var useEntries = function useEntries(params) {
+  var client = (0, _hooks.useApolloClient)();
+  var model = params.model,
+    limit = params.limit;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    entries = _useState2[0],
+    setEntries = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    searchQuery = _useState8[0],
+    setSearchQuery = _useState8[1];
+  var _useState9 = (0, _react.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    cursor = _useState10[0],
+    setCursor = _useState10[1];
+  var SEARCH_QUERY = (0, _react.useMemo)(function () {
+    return (0, _graphql.createSearchQuery)(model);
+  }, [model.modelId]);
+  var createWhere = (0, _react.useCallback)(function (query) {
+    if (!query) {
+      return {};
+    }
+    var conditions = model.fields.map(function (field) {
+      if (!isFieldSearchable(field)) {
+        return null;
+      }
+      return (0, _defineProperty2.default)({}, "".concat(field.fieldId, "_contains"), query);
+    }).filter(Boolean);
+    if (conditions.length === 0) {
+      return {};
+    }
+    return {
+      OR: conditions
+    };
+  }, [model.modelId]);
+  var executeQuery = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(params) {
+      var query, items, after, where, result, newItems;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            query = params.query, items = params.items, after = params.after;
+            if (!loading) {
+              _context.next = 4;
+              break;
+            }
+            console.log("Cannot run a new search. Please wait for the previous one to finish.");
+            return _context.abrupt("return");
+          case 4:
+            setLoading(true);
+            where = createWhere(query);
+            _context.prev = 6;
+            _context.next = 9;
+            return client.query({
+              query: SEARCH_QUERY,
+              variables: {
+                where: where,
+                sort: ["savedOn_DESC"],
+                limit: limit,
+                after: after
+              }
+            });
+          case 9:
+            result = _context.sent;
+            if (!result.data.content.error) {
+              _context.next = 16;
+              break;
+            }
+            setEntries([]);
+            setError(result.data.content.error.message);
+            return _context.abrupt("return");
+          case 16:
+            if (result.data.content.data) {
+              _context.next = 22;
+              break;
+            }
+            setEntries([]);
+            setError("Unknown error while fetching entries for model ".concat(model.modelId, ". Please check your network requests tab."));
+            return _context.abrupt("return");
+          case 22:
+            newItems = result.data.content.data.map(function (entry) {
+              return {
+                id: entry.id,
+                entryId: entry.entryId,
+                title: entry.meta.title,
+                description: entry.meta.description,
+                image: entry.meta.image,
+                status: entry.meta.status,
+                model: {
+                  modelId: model.modelId,
+                  name: model.name
+                },
+                createdBy: entry.createdBy,
+                modifiedBy: entry.modifiedBy,
+                createdOn: entry.createdOn,
+                savedOn: entry.savedOn
+              };
+            });
+            setEntries(items.concat(newItems));
+            setCursor(result.data.content.meta.cursor || undefined);
+            setError(null);
+          case 26:
+            _context.next = 34;
+            break;
+          case 28:
+            _context.prev = 28;
+            _context.t0 = _context["catch"](6);
+            setEntries([]);
+            console.log("Error while fetching entries for model ".concat(model.modelId, "."));
+            console.log(JSON.stringify(_context.t0));
+            setError(_context.t0.message);
+          case 34:
+            _context.prev = 34;
+            setLoading(false);
+            return _context.finish(34);
+          case 37:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[6, 28, 34, 37]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [model.modelId, entries, loading, error]);
+  var runSearch = (0, _react.useCallback)(function (query) {
+    if (searchQuery === query) {
+      console.log("Skipping search as it is the same as the previous one.");
+      return;
+    }
+    setSearchQuery(query);
+    executeQuery({
+      query: query,
+      items: []
+    });
+  }, [executeQuery, searchQuery]);
+  var loadMore = (0, _react.useCallback)(function () {
+    if (loading) {
+      console.log("Please wait until the loading finishes to start a new one.");
+      return;
+    } else if (!cursor) {
+      console.log("Trying to load more results but there is no cursor defined. Probably there are no more results.");
+      return;
+    }
+    executeQuery({
+      query: searchQuery,
+      items: entries,
+      after: cursor
+    });
+  }, [searchQuery, loading, cursor, entries]);
+  return {
+    runSearch: runSearch,
+    loadMore: loadMore,
+    loading: loading,
+    entries: entries,
+    error: error,
+    hasMore: !!cursor
+  };
+};
+exports.useEntries = useEntries;

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["searchableFieldTypes","isFieldSearchable","field","includes","type","useEntries","params","client","useApolloClient","model","limit","useState","entries","setEntries","loading","setLoading","error","setError","undefined","searchQuery","setSearchQuery","cursor","setCursor","SEARCH_QUERY","useMemo","createSearchQuery","modelId","createWhere","useCallback","query","conditions","fields","map","fieldId","filter","Boolean","length","OR","executeQuery","items","after","console","log","where","variables","sort","result","data","content","message","newItems","entry","id","entryId","title","meta","description","image","status","name","createdBy","modifiedBy","createdOn","savedOn","concat","JSON","stringify","runSearch","loadMore","hasMore"],"sources":["useEntries.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from \"react\";\nimport { CmsModel, CmsModelField } from \"~/types\";\nimport { CmsReferenceContentEntry } from \"~/admin/plugins/fieldRenderers/ref/components/types\";\nimport { useApolloClient } from \"~/admin/hooks\";\nimport {\n    createSearchQuery,\n    SearchQueryResponse,\n    SearchQueryVariables\n} from \"~/admin/plugins/fieldRenderers/ref/advanced/hooks/graphql\";\n\nconst searchableFieldTypes = [\"text\", \"long-text\"];\nconst isFieldSearchable = (field: CmsModelField): boolean => {\n    return searchableFieldTypes.includes(field.type);\n};\n\ninterface ExecuteQueryParams {\n    items: CmsReferenceContentEntry[];\n    query?: string;\n    after?: string;\n}\n\ninterface Params {\n    model: CmsModel;\n    limit: number;\n}\n\nexport const useEntries = (params: Params) => {\n    const client = useApolloClient();\n    const { model, limit } = params;\n\n    const [entries, setEntries] = useState<CmsReferenceContentEntry[]>([]);\n    const [loading, setLoading] = useState<boolean>(false);\n    const [error, setError] = useState<string | null>(null);\n    const [searchQuery, setSearchQuery] = useState<string | undefined>(undefined);\n    const [cursor, setCursor] = useState<string | undefined>();\n\n    const SEARCH_QUERY = useMemo(() => {\n        return createSearchQuery(model);\n    }, [model.modelId]);\n\n    const createWhere = useCallback(\n        (query?: string) => {\n            if (!query) {\n                return {};\n            }\n            const conditions = model.fields\n                .map(field => {\n                    if (!isFieldSearchable(field)) {\n                        return null;\n                    }\n                    return {\n                        [`${field.fieldId}_contains`]: query\n                    };\n                })\n                .filter(Boolean);\n            if (conditions.length === 0) {\n                return {};\n            }\n            return {\n                OR: conditions\n            };\n        },\n        [model.modelId]\n    );\n\n    const executeQuery = useCallback(\n        async (params: ExecuteQueryParams) => {\n            const { query, items, after } = params;\n            if (loading) {\n                console.log(`Cannot run a new search. Please wait for the previous one to finish.`);\n                return;\n            }\n            setLoading(true);\n\n            const where = createWhere(query);\n\n            try {\n                const result = await client.query<SearchQueryResponse, SearchQueryVariables>({\n                    query: SEARCH_QUERY,\n                    variables: {\n                        where,\n                        sort: [\"savedOn_DESC\"],\n                        limit,\n                        after\n                    }\n                });\n\n                if (result.data.content.error) {\n                    setEntries([]);\n                    setError(result.data.content.error.message);\n                    return;\n                } else if (!result.data.content.data) {\n                    setEntries([]);\n                    setError(\n                        `Unknown error while fetching entries for model ${model.modelId}. Please check your network requests tab.`\n                    );\n                    return;\n                } else {\n                    const newItems = result.data.content.data.map(entry => {\n                        return {\n                            id: entry.id,\n                            entryId: entry.entryId,\n                            title: entry.meta.title,\n                            description: entry.meta.description,\n                            image: entry.meta.image,\n                            status: entry.meta.status,\n                            model: {\n                                modelId: model.modelId,\n                                name: model.name\n                            },\n                            createdBy: entry.createdBy,\n                            modifiedBy: entry.modifiedBy,\n                            createdOn: entry.createdOn,\n                            savedOn: entry.savedOn\n                        };\n                    });\n                    setEntries(items.concat(newItems));\n                    setCursor(result.data.content.meta.cursor || undefined);\n                    setError(null);\n                }\n            } catch (ex) {\n                setEntries([]);\n                console.log(`Error while fetching entries for model ${model.modelId}.`);\n                console.log(JSON.stringify(ex));\n                setError(ex.message);\n            } finally {\n                setLoading(false);\n            }\n        },\n        [model.modelId, entries, loading, error]\n    );\n\n    const runSearch = useCallback(\n        (query?: string) => {\n            if (searchQuery === query) {\n                console.log(`Skipping search as it is the same as the previous one.`);\n                return;\n            }\n            setSearchQuery(query);\n            executeQuery({\n                query,\n                items: []\n            });\n        },\n        [executeQuery, searchQuery]\n    );\n\n    const loadMore = useCallback(() => {\n        if (loading) {\n            console.log(`Please wait until the loading finishes to start a new one.`);\n            return;\n        } else if (!cursor) {\n            console.log(\n                `Trying to load more results but there is no cursor defined. Probably there are no more results.`\n            );\n            return;\n        }\n        executeQuery({\n            query: searchQuery,\n            items: entries,\n            after: cursor\n        });\n    }, [searchQuery, loading, cursor, entries]);\n\n    return {\n        runSearch,\n        loadMore,\n        loading,\n        entries,\n        error,\n        hasMore: !!cursor\n    };\n};\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.d.ts

@@ -0,0 +1,12 @@
+import { CmsReferenceContentEntry, CmsReferenceValue as BaseCmsReferenceValue } from "../../components/types";
+interface UseReferencesParams {
+    values?: BaseCmsReferenceValue[] | BaseCmsReferenceValue | null;
+    perPage?: number;
+}
+export declare const useReferences: ({ values: initialValues, perPage }: UseReferencesParams) => {
+    loading: boolean;
+    entries: CmsReferenceContentEntry[];
+    error: string | null | undefined;
+    loadMore: () => void;
+};
+export {};

package/admin/plugins/fieldRenderers/ref/advanced/hooks/useReferences.js

@@ -0,0 +1,214 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useReferences = void 0;
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _chunk = _interopRequireDefault(require("lodash/chunk"));
+var _react = require("react");
+var _hooks = require("../../../../../hooks");
+var _graphql = require("./graphql");
+var _utils = require("@webiny/utils");
+var executeSearch = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(params) {
+    var setLoading, setError, setEntries, client, values, _result$data$entries, result, _error, _entries;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          setLoading = params.setLoading, setError = params.setError, setEntries = params.setEntries, client = params.client, values = params.values;
+          setLoading(true);
+          _context.prev = 2;
+          _context.next = 5;
+          return client.query({
+            query: _graphql.LIST_LATEST_CONTENT_ENTRIES,
+            variables: {
+              entries: values.map(function (value) {
+                return {
+                  id: value.id,
+                  modelId: value.modelId
+                };
+              })
+            }
+          });
+        case 5:
+          result = _context.sent;
+          _error = (_result$data$entries = result.data.entries) === null || _result$data$entries === void 0 ? void 0 : _result$data$entries.error;
+          if (!_error) {
+            _context.next = 10;
+            break;
+          }
+          setError(_error.message);
+          return _context.abrupt("return");
+        case 10:
+          _entries = result.data.entries.data.reduce(function (collection, entry) {
+            collection[entry.entryId] = entry;
+            return collection;
+          }, {});
+          setError(null);
+          setEntries(_entries);
+          _context.next = 18;
+          break;
+        case 15:
+          _context.prev = 15;
+          _context.t0 = _context["catch"](2);
+          setError(_context.t0.message);
+        case 18:
+          _context.prev = 18;
+          setLoading(false);
+          return _context.finish(18);
+        case 21:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 15, 18, 21]]);
+  }));
+  return function executeSearch(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var useReferences = function useReferences(_ref2) {
+  var initialValues = _ref2.values,
+    _ref2$perPage = _ref2.perPage,
+    perPage = _ref2$perPage === void 0 ? 10 : _ref2$perPage;
+  var client = (0, _hooks.useApolloClient)();
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    entries = _useState2[0],
+    _setEntries = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)(null),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    hash = _useState8[0],
+    setHash = _useState8[1];
+  var _useState9 = (0, _react.useState)(0),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    currentPage = _useState10[0],
+    setCurrentPage = _useState10[1];
+  var pages = (0, _react.useMemo)(function () {
+    var values = Array.isArray(initialValues) ? initialValues : initialValues ? [initialValues] : [];
+    return (0, _chunk.default)(values.map(function (value) {
+      var _parseIdentifier = (0, _utils.parseIdentifier)(value.id),
+        entryId = _parseIdentifier.id;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, value), {}, {
+        entryId: entryId
+      });
+    }), perPage);
+  }, [initialValues, perPage]);
+  var entriesToLoad = (0, _react.useMemo)(function () {
+    /**
+     * We need to make sure that all the previous page entries are loaded
+     * And we add the current page entries to the list.
+     */
+    var toLoad = [];
+    for (var p = 0; p <= currentPage; p++) {
+      var page = pages[p];
+      if (!page || page.length === 0) {
+        return toLoad;
+      }
+      toLoad.push.apply(toLoad, (0, _toConsumableArray2.default)(page.filter(function (item) {
+        return !entries[item.entryId];
+      })));
+    }
+    return toLoad;
+  }, [pages, currentPage]);
+  (0, _react.useEffect)(function () {
+    var _window$crypto;
+    if (entriesToLoad.length === 0) {
+      return;
+    }
+    var value = entriesToLoad.map(function (item) {
+      return item.id;
+    }).sort().join("-");
+    if (value.length === 0) {
+      return;
+    }
+    /**
+     * If there is no crypto.subtle, lets skip this - but at this point the hash will be enormous.
+     */
+    if (!((_window$crypto = window.crypto) !== null && _window$crypto !== void 0 && _window$crypto.subtle)) {
+      if (hash === value) {
+        return;
+      }
+      setHash(value);
+      return;
+    }
+    window.crypto.subtle.digest("SHA-1", new TextEncoder().encode(value)).then(function (encoded) {
+      var decoded = new TextDecoder().decode(encoded);
+      if (hash === decoded) {
+        return;
+      }
+      setHash(decoded);
+    });
+  }, [entriesToLoad]);
+  (0, _react.useEffect)(function () {
+    if (!hash || entriesToLoad.length === 0) {
+      return;
+    }
+    executeSearch({
+      client: client,
+      values: entriesToLoad,
+      setLoading: setLoading,
+      setError: setError,
+      setEntries: function setEntries(items) {
+        _setEntries(function (prev) {
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, prev), items);
+        });
+      }
+    });
+  }, [hash]);
+  var loadMore = (0, _react.useCallback)(function () {
+    var nextPage = currentPage + 1;
+    if (!pages[nextPage] || pages[nextPage].length === 0) {
+      return;
+    }
+    setCurrentPage(nextPage);
+  }, [pages, currentPage]);
+
+  /**
+   * This variable contains all the pages with entries, up to the current page, which is inlcuded.
+   */
+  var loadedEntries = (0, _react.useMemo)(function () {
+    var collection = [];
+    for (var page = 0; page <= currentPage; page++) {
+      var items = pages[page] || [];
+      var _iterator = (0, _createForOfIteratorHelper2.default)(items),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var item = _step.value;
+          var entry = entries[item.entryId];
+          if (!entry) {
+            continue;
+          }
+          collection.push(entry);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    return collection;
+  }, [currentPage, entries, pages]);
+  return {
+    loading: loading,
+    entries: loadedEntries,
+    error: error,
+    loadMore: loadMore
+  };
+};
+exports.useReferences = useReferences;