@blaze-cms/plugin-data-ui 0.139.0-alpha.3 → 0.139.0-alpha.6

package/src/components/ListingTable/service/index.js

@@ -1,12 +1,49 @@
 import buildListingQuery from '../../../utils/build-listing-query';
 
-const fetchData = async ({ client, querySettings: { entitySchema, queryParams } }) => {
-  const query = buildListingQuery(entitySchema);
+function buildVariables({ entitySchema, isSearchQuery, listFilters = [], queryParams = {} }) {
+  const { identifier } = entitySchema;
+  const { sort, offset, limit, where } = queryParams;
+  const [{ property, direction }] = sort;
+  const parsedOffset = `${property}:${direction}`;
+
+  if (!isSearchQuery)
+    return {
+      ...queryParams,
+      where: !Array.isArray(listFilters) ? listFilters : where
+    };
+
+  const rawQuery = {
+    bool: {
+      must: listFilters || [],
+      filter: [
+        {
+          term: {
+            entityIdentifier: identifier
+          }
+        }
+      ]
+    }
+  };
+
+  return {
+    limit,
+    offset,
+    sort: parsedOffset,
+    where: JSON.stringify(rawQuery)
+  };
+}
+
+const fetchData = async ({ client, querySettings: { entitySchema, queryParams }, listFilters }) => {
   const {
-    data: { listingData }
-  } = await client.query({ query, variables: queryParams, fetchPolicy: 'network-only' });
+    displayProperties: { adminListings: { dataSource: { source } = {} } = {} } = {}
+  } = entitySchema;
+
+  const isSearchQuery = source === 'search';
+  const query = buildListingQuery(entitySchema, isSearchQuery);
+  const variables = buildVariables({ entitySchema, listFilters, queryParams, isSearchQuery });
+  const { data = {} } = await client.query({ query, variables, fetchPolicy: 'network-only' });
 
-  return listingData;
+  return data.searchResults ? data.searchResults.results : data.listingData;
 };
 
 export { fetchData };

package/src/constants.js

@@ -25,6 +25,16 @@ const PAGE_BUILDER_TAB_INDEX = 1;
 const EDITOR_VIEW_TAB = 'Editor view';
 const EDITOR_VIEW_TAB_INDEX = 0;
 
+const ICON_SIZE = {
+  WIDTH: '25px',
+  HEIGHT: '25px'
+};
+
+const ICON_COLOR = {
+  STROKE: '#63779C',
+  FILL: '#63779C'
+};
+
 export {
   DATA_LISTING_PREFIX,
   ENTITY_PUBLISHED,
@@ -49,5 +59,7 @@ export {
   EDITOR_VIEW_TAB,
   PAGE_BUILDER_TAB,
   UNPUBLISHED_WARNING,
-  SAVE_BEFORE_PUBLISH_MESSAGE
+  SAVE_BEFORE_PUBLISH_MESSAGE,
+  ICON_SIZE,
+  ICON_COLOR
 };

package/src/icons/ContentIcon.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { ICON_COLOR } from '../constants';
+
+function ContentIcon({ fill = ICON_COLOR.FILL, stroke = ICON_COLOR.STROKE }) {
+  return (
+    <svg
+      width="19px"
+      height="19px"
+      viewBox="0 0 21 21"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>content</title>
+      <g id="Page-1" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+        <g id="content" transform="translate(1, 1)">
+          <g id="Group">
+            <path
+              d="M0,8.70833334 L5.445875,3.26245834 C6.37331215,2.33530123 7.87668785,2.33530123 8.804125,3.26245834 L14.25,8.70833334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M11.875,6.33333334 L13.758375,4.44995834 C14.6858122,3.52280123 16.1891878,3.52280123 17.116625,4.44995834 L19,6.33333334"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M2.375,19 L16.625,19 C17.9366763,19 19,17.9366763 19,16.625 L19,2.375 C19,1.06332371 17.9366763,0 16.625,0 L2.375,0 C1.06332371,0 0,1.06332371 0,2.375 L0,16.625 C0,17.9366763 1.06332371,19 2.375,19 Z"
+              id="Shape-path"
+              stroke={stroke}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <circle
+              id="Oval"
+              fill={fill}
+              fillRule="nonzero"
+              cx="11.4791666"
+              cy="2.77083334"
+              r="1.1875"
+            />
+          </g>
+          <line
+            x1={0}
+            y1="9.23611111"
+            x2={19}
+            y2="9.23611111"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="12.4027778"
+            x2="15.3055553"
+            y2="12.4027778"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <line
+            x1="3.95833334"
+            y1="15.5694445"
+            x2="12.1388885"
+            y2="15.5694445"
+            id="Path"
+            stroke={stroke}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default ContentIcon;

package/src/icons/SettingsIcon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
+
+function SettingsIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>setting</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth={1}
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 1)" stroke={stroke}>
+          <path
+            d="M8.13888889,1.46333333 C8.61222222,-0.487777777 11.3877778,-0.487777777 11.8611111,1.46333333 C12.0051589,2.05784356 12.4244819,2.54780471 12.9896128,2.78193979 C13.5547438,3.01607487 14.1977123,2.96622362 14.72,2.64777778 C16.4344444,1.60333333 18.3977778,3.56555556 17.3533333,5.28111111 C17.0353472,5.803171 16.9856162,6.44564563 17.2194755,7.0104213 C17.4533348,7.57519696 17.9426987,7.99444609 18.5366667,8.13888889 C20.4877778,8.61222222 20.4877778,11.3877778 18.5366667,11.8611111 C17.9421564,12.0051589 17.4521953,12.4244819 17.2180602,12.9896128 C16.9839251,13.5547438 17.0337764,14.1977123 17.3522222,14.72 C18.3966667,16.4344444 16.4344444,18.3977778 14.7188889,17.3533333 C14.196829,17.0353472 13.5543544,16.9856162 12.9895787,17.2194755 C12.424803,17.4533348 12.0055539,17.9426987 11.8611111,18.5366667 C11.3877778,20.4877778 8.61222222,20.4877778 8.13888889,18.5366667 C7.99484107,17.9421564 7.57551807,17.4521953 7.01038716,17.2180602 C6.44525624,16.9839251 5.80228769,17.0337764 5.28,17.3522222 C3.56555556,18.3966667 1.60222222,16.4344444 2.64666667,14.7188889 C2.96465281,14.196829 3.01438377,13.5543544 2.78052448,12.9895787 C2.5466652,12.424803 2.05730134,12.0055539 1.46333333,11.8611111 C-0.487777777,11.3877778 -0.487777777,8.61222222 1.46333333,8.13888889 C2.05784356,7.99484107 2.54780471,7.57551807 2.78193979,7.01038716 C3.01607487,6.44525624 2.96622362,5.80228769 2.64777778,5.28 C1.60333333,3.56555556 3.56555556,1.60222222 5.28111111,2.64666667 C6.38777778,3.32222222 7.83222222,2.72444444 8.13888889,1.46333333 Z"
+            id="Path"
+          />
+          <path
+            d="M13.6666666,10.3333333 C13.6666666,12.1742825 12.1742825,13.6666666 10.3333333,13.6666666 C8.49238416,13.6666666 7,12.1742825 7,10.3333333 C7,8.49238416 8.49238416,7 10.3333333,7 C12.1742825,7 13.6666666,8.49238416 13.6666666,10.3333333 L13.6666666,10.3333333 Z"
+            id="Path"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default SettingsIcon;

package/src/icons/TaxonomyIcon.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
+
+function TaxonomyIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>taxonomy</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 1)" stroke={stroke}>
+          <rect
+            id="Rectangle"
+            x="0"
+            y="13.2173913"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <rect
+            id="Rectangle"
+            x="13.2173913"
+            y="13.2173913"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <rect
+            id="Rectangle"
+            x="6.60869564"
+            y="0"
+            width="6.78260868"
+            height="6.60869564"
+            rx="1.5"
+          />
+          <path
+            d="M3.30434782,13.2173913 L3.30434782,12.115942 C3.30434782,10.8993147 4.2906191,9.91304346 5.50724637,9.91304346 L14.3188405,9.91304346 C15.5354678,9.91304346 16.5217391,10.8993147 16.5217391,12.115942 L16.5217391,13.2173913"
+            id="Path"
+          />
+          <line x1="9.91304346" y1="6.60869564" x2="9.91304346" y2="9.91304346" id="Path" />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default TaxonomyIcon;

package/src/icons/UsersIcon.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ICON_SIZE, ICON_COLOR } from '../constants';
+
+function UserIcon({
+  width = ICON_SIZE.WIDTH,
+  height = ICON_SIZE.HEIGHT,
+  stroke = ICON_COLOR.STROKE
+}) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 22 22"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink">
+      <title>user</title>
+      <g
+        id="Page-1"
+        stroke="none"
+        strokeWidth={1}
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round">
+        <g id="Group" transform="translate(1, 0.76)" stroke={stroke}>
+          <path
+            d="M2.35666666,16.4488888 C4.68824079,15.1310199 7.32175438,14.4403878 10,14.4444089 C12.7777778,14.4444089 15.3855556,15.1722221 17.6433334,16.4488888 M13.3333334,7.7777776 C13.3333334,9.61872677 11.8409492,11.1111109 10,11.1111109 C8.15905083,11.1111109 6.66666666,9.61872677 6.66666666,7.7777776 C6.66666666,5.93682842 8.15905083,4.44444425 10,4.44444425 C11.8409492,4.44444425 13.3333334,5.93682842 13.3333334,7.7777776 L13.3333334,7.7777776 Z M20,10 C20,13.5726558 18.0940108,16.8739261 15,18.660254 C11.9059893,20.446582 8.09401075,20.446582 5,18.660254 C1.90598917,16.8739261 0,13.5726558 0,10 C0,4.47715239 4.47715258,0 10,0 C15.5228474,0 20,4.47715239 20,10 L20,10 Z"
+            id="Shape"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default UserIcon;

package/src/icons/index.js

@@ -0,0 +1,6 @@
+import UserIcon from './UsersIcon';
+import TaxonomyIcon from './TaxonomyIcon';
+import ContentIcon from './ContentIcon';
+import SettingsIcon from './SettingsIcon';
+
+export { UserIcon, TaxonomyIcon, ContentIcon, SettingsIcon };

package/src/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import pkg from '../package.json';
 import { DATA_LISTING_PREFIX, PLUGIN_NAME } from './constants';
 import getAddContentMenuItems from './utils/add-content-menu-items';
+import { UserIcon, TaxonomyIcon, ContentIcon, SettingsIcon } from './icons';
 
 const EntityDataListing = React.lazy(() =>
   import(/* webpackChunkName: 'EntityDataListing' */ './components/EntityDataListing')
@@ -12,14 +13,7 @@ const EntityManager = React.lazy(() =>
 );
 
 export default async function load(app) {
-  // To load different plugin information into menu
-  const sectionKey = 'content';
-
-  app.events.once('load:menu-section', addSection => {
-    addSection(sectionKey, { header: 'content', order: 100 });
-  });
-
-  app.events.once('load:menu-items', getAddContentMenuItems(app, sectionKey));
+  app.events.once('admin:menu:config:load', getAddContentMenuItems(app));
 
   app.events.once('load:custom:field:type', addFieldType => {
     Object.keys(formFieldTypes).forEach(type => {
@@ -31,6 +25,40 @@ export default async function load(app) {
     await app.events.emitAsync('load:custom:field:type', getFormBuilderLookup.addFieldType);
   });
 
+  app.events.once('admin:menu:config:load', ({ addConfig }) => {
+    addConfig({
+      main: {
+        items: {
+          content: {
+            label: 'content',
+            loadOpen: true,
+            items: {},
+            icon: ContentIcon,
+            order: 10
+          },
+          taxonomy: {
+            label: 'Taxonomy',
+            items: {},
+            icon: TaxonomyIcon,
+            order: 40
+          },
+          user: {
+            label: 'User',
+            items: {},
+            icon: UserIcon,
+            order: 90
+          },
+          settings: {
+            label: 'Settings',
+            items: {},
+            icon: SettingsIcon,
+            order: 100
+          }
+        }
+      }
+    });
+  });
+
   const entityDataListingRoute = {
     path: `${DATA_LISTING_PREFIX}/:entityIdentifier`,
     key: 'entityDataListing',

package/src/utils/add-content-menu-items.js

@@ -2,8 +2,8 @@ import { getQuery } from '@blaze-cms/admin-ui-utils';
 
 const { MENU_PERMISSIONS } = require('../constants');
 
-function getAddContentMenuItems(app, sectionKey) {
-  return async addItem => {
+function getAddContentMenuItems(app) {
+  return async ({ addConfig }) => {
     const client = app.getClient();
     const {
       data: { getEntitySchemas }
@@ -14,9 +14,48 @@ function getAddContentMenuItems(app, sectionKey) {
         canDoActions: MENU_PERMISSIONS
       }
     });
+
+    if (!getEntitySchemas || !getEntitySchemas.length) return; // no items so don't add section
+
+    const menuItems = {};
+    const sectionMenuItems = { settings: {} };
+
+    getEntitySchemas.forEach(({ id, displayName, displayProperties }) => {
+      if (!displayProperties) return null;
+
+      const { adminMenu: { sectionKey = 'settings' } = {} } = displayProperties;
+      const sectionItems = sectionMenuItems[sectionKey] || {};
+      sectionItems[id] = {
+        label: displayName,
+        uri: `/data-listing/${id}`
+      };
+      sectionMenuItems[sectionKey] = sectionItems;
+    });
+
+    const menuConfig = {
+      main: {
+        items: {
+          settings: {
+            items: menuItems
+          }
+        }
+      }
+    };
+
+    Object.entries(sectionMenuItems).forEach(([sectionKey, sectionItems]) => {
+      const sectionConfig = menuConfig.main.items[sectionKey] || {};
+      sectionConfig.items = sectionItems;
+      menuConfig.main.items[sectionKey] = sectionConfig;
+    });
+
     getEntitySchemas.forEach(({ id, displayName }) => {
-      addItem({ name: displayName, uri: `/data-listing/${id}` }, sectionKey);
+      menuItems[id] = {
+        label: displayName,
+        uri: `/data-listing/${id}`
+      };
     });
+
+    addConfig(menuConfig);
   };
 }
 

package/src/utils/build-listing-query.js

@@ -1,13 +1,23 @@
 import { gql } from '@apollo/client';
 import { BlazeError } from '@blaze-cms/core-errors';
+import { getDynamicQuery } from '@blaze-cms/admin-ui-utils';
 
-function buildListingQuery(entitySchema) {
+const buildAdminSearchQuery = entitySchema => {
+  const { listingProperties = [] } = entitySchema || {};
+  const parsedProperties = `id, ${listingProperties.join(' ') || 'id name'}`;
+
+  return getDynamicQuery('ADMIN_SEARCH')([entitySchema], parsedProperties, true);
+};
+
+function buildListingQuery(entitySchema, isSearchQuery) {
   if (!entitySchema.actions || !entitySchema.actions.getAll || !entitySchema.listingProperties) {
     throw new BlazeError(
       'Listing query requires getAll action and listingProperties from entity schema'
     );
   }
 
+  if (isSearchQuery) return buildAdminSearchQuery(entitySchema);
+
   const sortType =
     entitySchema.actions.getAll[0].toUpperCase() + entitySchema.actions.getAll.substr(1);
 

package/src/utils/get-default-query-params.js

@@ -1,4 +1,4 @@
-const getDefaultQueryParams = ({ schema }) => {
+const getDefaultQueryParams = schema => {
   const updated = schema.properties && schema.properties.updated;
   const { adminDefaultListingFilter: where } = schema.displayProperties || {};