@blaze-cms/react-page-builder 0.114.0-alpha.0 → 0.114.0-alpha.1

package/lib-es/components/SearchFilter/helpers/build-query.js

@@ -10,12 +10,10 @@ const buildQuery = (filterValues, filters) => {
     type
   }) => {
     if (type === TEXT_SEARCH) return;
-    propsToDisplay.map(prop => {
+    propsToDisplay.forEach(prop => {
       const value = filterValues[prop];
       const parsedValue = parseFilterValue(prop, type, value);
-      if (!parsedValue) return null;
       if (parsedValue) newQuery.push(parsedValue);
-      return parsedValue;
     });
   });
   return newQuery.join('&');

package/lib-es/components/SearchFilter/helpers/build-query.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SearchFilter/helpers/build-query.js"],"names":["SEARCH_TERM","TEXT_SEARCH","parseFilterValue","buildQuery","filterValues","filters","newQuery","searchValue","push","forEach","propsToDisplay","type","map","prop","value","parsedValue","join"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,cAAzC;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;;AAEA,MAAMC,UAAU,GAAG,CAACC,YAAD,EAAeC,OAAf,KAA2B;AAC5C,QAAMC,QAAQ,GAAG,EAAjB;AACA,QAAMC,WAAW,GAAGH,YAAY,CAACJ,WAAD,CAAhC;AACA,MAAIO,WAAJ,EAAiBD,QAAQ,CAACE,IAAT,CAAe,GAAER,WAAY,IAAGO,WAAY,EAA5C;AAEjBF,EAAAA,OAAO,CAACI,OAAR,CAAgB,CAAC;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA;AAAlB,GAAD,KAA8B;AAC5C,QAAIA,IAAI,KAAKV,WAAb,EAA0B;AAC1BS,IAAAA,cAAc,CAACE,GAAf,CAAmBC,IAAI,IAAI;AACzB,YAAMC,KAAK,GAAGV,YAAY,CAACS,IAAD,CAA1B;AACA,YAAME,WAAW,GAAGb,gBAAgB,CAACW,IAAD,EAAOF,IAAP,EAAaG,KAAb,CAApC;AACA,UAAI,CAACC,WAAL,EAAkB,OAAO,IAAP;AAClB,UAAIA,WAAJ,EAAiBT,QAAQ,CAACE,IAAT,CAAcO,WAAd;AACjB,aAAOA,WAAP;AACD,KAND;AAOD,GATD;AAWA,SAAOT,QAAQ,CAACU,IAAT,CAAc,GAAd,CAAP;AACD,CAjBD;;AAmBA,eAAeb,UAAf","sourcesContent":["import { SEARCH_TERM, TEXT_SEARCH } from '../constants';\nimport parseFilterValue from './parse-filter-value';\n\nconst buildQuery = (filterValues, filters) => {\n  const newQuery = [];\n  const searchValue = filterValues[SEARCH_TERM];\n  if (searchValue) newQuery.push(`${SEARCH_TERM}=${searchValue}`);\n\n  filters.forEach(({ propsToDisplay, type }) => {\n    if (type === TEXT_SEARCH) return;\n    propsToDisplay.map(prop => {\n      const value = filterValues[prop];\n      const parsedValue = parseFilterValue(prop, type, value);\n      if (!parsedValue) return null;\n      if (parsedValue) newQuery.push(parsedValue);\n      return parsedValue;\n    });\n  });\n\n  return newQuery.join('&');\n};\n\nexport default buildQuery;\n"],"file":"build-query.js"}
+{"version":3,"sources":["../../../../src/components/SearchFilter/helpers/build-query.js"],"names":["SEARCH_TERM","TEXT_SEARCH","parseFilterValue","buildQuery","filterValues","filters","newQuery","searchValue","push","forEach","propsToDisplay","type","prop","value","parsedValue","join"],"mappings":"AAAA,SAASA,WAAT,EAAsBC,WAAtB,QAAyC,cAAzC;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;;AAEA,MAAMC,UAAU,GAAG,CAACC,YAAD,EAAeC,OAAf,KAA2B;AAC5C,QAAMC,QAAQ,GAAG,EAAjB;AACA,QAAMC,WAAW,GAAGH,YAAY,CAACJ,WAAD,CAAhC;AACA,MAAIO,WAAJ,EAAiBD,QAAQ,CAACE,IAAT,CAAe,GAAER,WAAY,IAAGO,WAAY,EAA5C;AAEjBF,EAAAA,OAAO,CAACI,OAAR,CAAgB,CAAC;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA;AAAlB,GAAD,KAA8B;AAC5C,QAAIA,IAAI,KAAKV,WAAb,EAA0B;AAE1BS,IAAAA,cAAc,CAACD,OAAf,CAAuBG,IAAI,IAAI;AAC7B,YAAMC,KAAK,GAAGT,YAAY,CAACQ,IAAD,CAA1B;AACA,YAAME,WAAW,GAAGZ,gBAAgB,CAACU,IAAD,EAAOD,IAAP,EAAaE,KAAb,CAApC;AACA,UAAIC,WAAJ,EAAiBR,QAAQ,CAACE,IAAT,CAAcM,WAAd;AAClB,KAJD;AAKD,GARD;AAUA,SAAOR,QAAQ,CAACS,IAAT,CAAc,GAAd,CAAP;AACD,CAhBD;;AAkBA,eAAeZ,UAAf","sourcesContent":["import { SEARCH_TERM, TEXT_SEARCH } from '../constants';\nimport parseFilterValue from './parse-filter-value';\n\nconst buildQuery = (filterValues, filters) => {\n  const newQuery = [];\n  const searchValue = filterValues[SEARCH_TERM];\n  if (searchValue) newQuery.push(`${SEARCH_TERM}=${searchValue}`);\n\n  filters.forEach(({ propsToDisplay, type }) => {\n    if (type === TEXT_SEARCH) return;\n\n    propsToDisplay.forEach(prop => {\n      const value = filterValues[prop];\n      const parsedValue = parseFilterValue(prop, type, value);\n      if (parsedValue) newQuery.push(parsedValue);\n    });\n  });\n\n  return newQuery.join('&');\n};\n\nexport default buildQuery;\n"],"file":"build-query.js"}

package/lib-es/helpers/get-generic-render-variables.js

@@ -1,15 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["limit", "offset"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import checkSortby from './check-sort-by';
 import getSortbyFieldName from './get-sort-by-field-name';
 import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
+const buildSortValues = (sortFilters, relations, stringProps) => {
+  if (!sortFilters || !sortFilters.length) return {
+    sort: []
+  };
+  const sortValues = sortFilters.map(({
+    sort,
+    propsToDisplay
+  }) => !!sort && !!propsToDisplay[0] && `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`).filter(Boolean).join(',');
+  return {
+    sort: sortValues
+  };
+};
+
 const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {
   if (isTextSearchApplied) {
     return {};
@@ -17,23 +27,20 @@ const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied
 
   const {
     sort,
-    sortby
+    sortby,
+    sortProperties = []
   } = filterProps;
-  const isSortbyArray = Array.isArray(sortby);
-  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);
-  const sortValue = hasSortFields ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}` : '';
-  return sortValue ? {
-    sort: sortValue
-  } : {};
+  return buildSortValues([{
+    sort,
+    propsToDisplay: [sortby]
+  }, ...sortProperties], relations, stringProps);
 };
 
-const getGenericRenderVariables = (relations, _ref = {}, stringProps = [], rawQueryStringified = '', isTextSearchFilterApplied = false) => {
-  let {
+const getGenericRenderVariables = (relations, filterProps = {}, stringProps = [], rawQueryStringified = '', isTextSearchFilterApplied = false) => {
+  const {
     limit = DEFAULT_LIMIT,
     offset
-  } = _ref,
-      filterProps = _objectWithoutProperties(_ref, _excluded);
-
+  } = filterProps;
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
   const raw = rawQueryStringified ? {
     rawQueryStringified

package/lib-es/helpers/get-generic-render-variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["checkSortby","getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","getCorrectSort","relations","filterProps","stringProps","isTextSearchApplied","sort","sortby","isSortbyArray","Array","isArray","hasSortFields","sortValue","toLowerCase","getGenericRenderVariables","rawQueryStringified","isTextSearchFilterApplied","limit","offset","raw","Number"],"mappings":";;;;;;;;AAAA,OAAOA,WAAP,MAAwB,iBAAxB;AACA,OAAOC,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,cAAc,GAAG,CAACC,SAAD,EAAYC,WAAZ,EAAyBC,WAAzB,EAAsCC,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAmBJ,WAAzB;AAEA,QAAMK,aAAa,GAAGC,KAAK,CAACC,OAAN,CAAcH,MAAd,CAAtB;AAEA,QAAMI,aAAa,GAAGL,IAAI,IAAIT,WAAW,CAACU,MAAD,EAASC,aAAT,CAAzC;AAEA,QAAMI,SAAS,GAAGD,aAAa,GAC1B,GAAEb,kBAAkB,CAACI,SAAD,EAAYK,MAAZ,EAAoBH,WAApB,EAAiCI,aAAjC,CAAgD,IAAGF,IAAI,CAACO,WAAL,EAAmB,EADhE,GAE3B,EAFJ;AAIA,SAAOD,SAAS,GAAG;AAAEN,IAAAA,IAAI,EAAEM;AAAR,GAAH,GAAyB,EAAzC;AACD,CAfD;;AAiBA,MAAME,yBAAyB,GAAG,CAChCZ,SADgC,EAEhC,OAAoD,EAFpB,EAGhCE,WAAW,GAAG,EAHkB,EAIhCW,mBAAmB,GAAG,EAJU,EAKhCC,yBAAyB,GAAG,KALI,KAM7B;AAAA,MAJH;AAAEC,IAAAA,KAAK,GAAGlB,aAAV;AAAyBmB,IAAAA;AAAzB,GAIG;AAAA,MAJiCf,WAIjC;;AACH,QAAMG,IAAI,GAAGL,cAAc,CAACC,SAAD,EAAYC,WAAZ,EAAyBC,WAAzB,EAAsCY,yBAAtC,CAA3B;AACA,QAAMG,GAAG,GAAGJ,mBAAmB,GAAG;AAAEA,IAAAA;AAAF,GAAH,GAA6B,EAA5D;AAEA;AACEE,IAAAA,KAAK,EAAEG,MAAM,CAACH,KAAK,IAAIlB,aAAV,CADf;AAEEmB,IAAAA,MAAM,EAAEE,MAAM,CAACF,MAAM,IAAIlB,cAAX;AAFhB,KAGKM,IAHL,GAIKa,GAJL;AAMD,CAhBD;;AAkBA,eAAeL,yBAAf","sourcesContent":["import checkSortby from './check-sort-by';\nimport getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby } = filterProps;\n\n  const isSortbyArray = Array.isArray(sortby);\n\n  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);\n\n  const sortValue = hasSortFields\n    ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}`\n    : '';\n\n  return sortValue ? { sort: sortValue } : {};\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  { limit = DEFAULT_LIMIT, offset, ...filterProps } = {},\n  stringProps = [],\n  rawQueryStringified = '',\n  isTextSearchFilterApplied = false\n) => {\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n  const raw = rawQueryStringified ? { rawQueryStringified } : {};\n\n  return {\n    limit: Number(limit || DEFAULT_LIMIT),\n    offset: Number(offset || DEFAULT_OFFSET),\n    ...sort,\n    ...raw\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}
+{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","buildSortValues","sortFilters","relations","stringProps","length","sort","sortValues","map","propsToDisplay","toLowerCase","filter","Boolean","join","getCorrectSort","filterProps","isTextSearchApplied","sortby","sortProperties","getGenericRenderVariables","rawQueryStringified","isTextSearchFilterApplied","limit","offset","raw","Number"],"mappings":";;;;;;AAAA,OAAOA,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,eAAe,GAAG,CAACC,WAAD,EAAcC,SAAd,EAAyBC,WAAzB,KAAyC;AAC/D,MAAI,CAACF,WAAD,IAAgB,CAACA,WAAW,CAACG,MAAjC,EAAyC,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP;AACzC,QAAMC,UAAU,GAAGL,WAAW,CAC3BM,GADgB,CAEf,CAAC;AAAEF,IAAAA,IAAF;AAAQG,IAAAA;AAAR,GAAD,KACE,CAAC,CAACH,IAAF,IACA,CAAC,CAACG,cAAc,CAAC,CAAD,CADhB,IAEC,GAAEX,kBAAkB,CAACK,SAAD,EAAYM,cAAc,CAAC,CAAD,CAA1B,EAA+BL,WAA/B,CAA4C,IAAGE,IAAI,CAACI,WAAL,EAAmB,EAL1E,EAOhBC,MAPgB,CAOTC,OAPS,EAQhBC,IARgB,CAQX,GARW,CAAnB;AAUA,SAAO;AAAEP,IAAAA,IAAI,EAAEC;AAAR,GAAP;AACD,CAbD;;AAcA,MAAMO,cAAc,GAAG,CAACX,SAAD,EAAYY,WAAZ,EAAyBX,WAAzB,EAAsCY,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEV,IAAAA,IAAF;AAAQW,IAAAA,MAAR;AAAgBC,IAAAA,cAAc,GAAG;AAAjC,MAAwCH,WAA9C;AAEA,SAAOd,eAAe,CACpB,CAAC;AAAEK,IAAAA,IAAF;AAAQG,IAAAA,cAAc,EAAE,CAACQ,MAAD;AAAxB,GAAD,EAAqC,GAAGC,cAAxC,CADoB,EAEpBf,SAFoB,EAGpBC,WAHoB,CAAtB;AAKD,CAXD;;AAaA,MAAMe,yBAAyB,GAAG,CAChChB,SADgC,EAEhCY,WAAW,GAAG,EAFkB,EAGhCX,WAAW,GAAG,EAHkB,EAIhCgB,mBAAmB,GAAG,EAJU,EAKhCC,yBAAyB,GAAG,KALI,KAM7B;AACH,QAAM;AAAEC,IAAAA,KAAK,GAAGvB,aAAV;AAAyBwB,IAAAA;AAAzB,MAAoCR,WAA1C;AACA,QAAMT,IAAI,GAAGQ,cAAc,CAACX,SAAD,EAAYY,WAAZ,EAAyBX,WAAzB,EAAsCiB,yBAAtC,CAA3B;AACA,QAAMG,GAAG,GAAGJ,mBAAmB,GAAG;AAAEA,IAAAA;AAAF,GAAH,GAA6B,EAA5D;AAEA;AACEE,IAAAA,KAAK,EAAEG,MAAM,CAACH,KAAK,IAAIvB,aAAV,CADf;AAEEwB,IAAAA,MAAM,EAAEE,MAAM,CAACF,MAAM,IAAIvB,cAAX;AAFhB,KAGKM,IAHL,GAIKkB,GAJL;AAMD,CAjBD;;AAmBA,eAAeL,yBAAf","sourcesContent":["import getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst buildSortValues = (sortFilters, relations, stringProps) => {\n  if (!sortFilters || !sortFilters.length) return { sort: [] };\n  const sortValues = sortFilters\n    .map(\n      ({ sort, propsToDisplay }) =>\n        !!sort &&\n        !!propsToDisplay[0] &&\n        `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`\n    )\n    .filter(Boolean)\n    .join(',');\n\n  return { sort: sortValues };\n};\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby, sortProperties = [] } = filterProps;\n\n  return buildSortValues(\n    [{ sort, propsToDisplay: [sortby] }, ...sortProperties],\n    relations,\n    stringProps\n  );\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  filterProps = {},\n  stringProps = [],\n  rawQueryStringified = '',\n  isTextSearchFilterApplied = false\n) => {\n  const { limit = DEFAULT_LIMIT, offset } = filterProps;\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n  const raw = rawQueryStringified ? { rawQueryStringified } : {};\n\n  return {\n    limit: Number(limit || DEFAULT_LIMIT),\n    offset: Number(offset || DEFAULT_OFFSET),\n    ...sort,\n    ...raw\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.114.0-alpha.0",
+  "version": "0.114.0-alpha.1",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -88,5 +88,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "28a128c55187783ae2f1ed47eda71e4d94b72109"
+  "gitHead": "afa1f76f62004ccdd452d59043ac378a87e08be1"
 }

package/src/components/Card/CardRender.js

@@ -9,26 +9,45 @@ import { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';
 import {
   getUpdatedFilterBy,
   getEntityData,
+  getRequiredSchemas,
   sortResponseData,
   getUnpublishedEntityName,
   renderChildren,
   splitChildren,
   removeExtraItems,
-  getRequiredSchemas,
   appendImages
 } from '../../helpers';
 import { filtersSetup, filterQuerySetup, shouldSkipSingleQuery, shouldReturn } from './helpers';
 
 const CardContainer = dynamic(() => import('./CardContainer'));
 
-const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variableProps }) => {
+const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherProps }) => {
   const {
     parent: { itemId, itemEntity },
     filterBy = [],
     filterByProperty = [],
-    sortby = [],
+    sortby,
+    sort,
+    sortProperties = [],
     operator: filterOperator = AND
-  } = variableProps;
+  } = otherProps;
+
+  const updatedSortProperties = [...sortProperties];
+  if (!updatedSortProperties.length && sort) {
+    updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+  }
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay }) => propsToDisplay)
+    .filter(Boolean)
+    .flat();
+
+  const variableProps = {
+    ...otherProps,
+    sortProperties: updatedSortProperties,
+    sort: null,
+    sortby: null
+  };
 
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj([
@@ -70,7 +89,7 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     loading: schemaLoading,
     error: schemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     _loading
   );
 
@@ -94,7 +113,6 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     itemsToDisplay,
     entitySameAsCurrentItemEntity
   });
-
   const { data, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)

package/src/components/Card/helpers/filter-query-setup.js

@@ -41,6 +41,7 @@ const filterQuerySetup = ({
     stringProps,
     JSON.stringify(rawQuery)
   );
+
   return { variables, limit };
 };
 

package/src/components/List/ListBuilder.js

@@ -51,14 +51,15 @@ const ListBuilder = props => {
     filterEntitySchema,
     requiredSchema,
     searchValues,
-    azFilter
+    azFilter,
+    sortProperties
   } = props;
   const isInfinite = paginationType === INFINITE;
   const listComponent = getListComponent(isCard, paginationType);
   const propsToDisplayValues = checkPropsToUse(propsToDisplay);
   const entityFields = buildPropsQuery(entitySchema, propsToDisplayValues, props) || '';
   const limitToUse = limit || itemsToDisplay.length;
-  const shouldApplyDefaultSort = !sortby || !sortby.length;
+  const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
   const { entityType, docType } = getEntityData(entity);
@@ -105,7 +106,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(azRawQuery),
@@ -147,7 +149,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(rawQuery),
@@ -198,7 +201,8 @@ ListBuilder.propTypes = {
   operator: PropTypes.string.isRequired,
   filterOperator: PropTypes.string.isRequired,
   paginationType: PropTypes.string,
-  azFilter: PropTypes.string
+  azFilter: PropTypes.string,
+  sortProperties: PropTypes.array
 };
 
 ListBuilder.defaultProps = {
@@ -209,7 +213,8 @@ ListBuilder.defaultProps = {
   offset: 0,
   paginationType: 'infinite',
   inheritedFilters: [],
-  azFilter: ''
+  azFilter: '',
+  sortProperties: []
 };
 
 export default ListBuilder;

package/src/components/List/ListFactory.js

@@ -7,7 +7,7 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
-import { getAzQueryFilter } from './helpers';
+import { getAzQueryFilter, getSortProps } from './helpers';
 import {
   getGenericProps,
   getRequiredSchemas,
@@ -36,7 +36,8 @@ const ListFactory = props => {
     sortby: defaultSortBy,
     sort: defaultSort,
     searchFilter,
-    operator: filterOperator
+    operator: filterOperator,
+    sortProperties
   } = props;
 
   const { isPreview } = useContext(MainContext);
@@ -46,8 +47,14 @@ const ListFactory = props => {
   const { query, url, query: { sort: querySort, sortby: querySortBy } = {} } = parseUrl(
     parsedQuery
   );
-  const sort = querySort || defaultSort;
-  const sortby = querySortBy ? [querySortBy] : defaultSortBy || [];
+  const { sortbyFilters, updatedSortProperties } = getSortProps({
+    querySort,
+    sortProperties,
+    defaultSort,
+    querySortBy,
+    defaultSortBy
+  });
+
   const { itemEntity, itemId } = parent;
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const paginationIndex = getPaginationIndex(query, name);
@@ -75,7 +82,7 @@ const ListFactory = props => {
     loading: requiredSchemaLoading,
     error: requiredSchemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     schemasLoading
   );
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
@@ -126,8 +133,9 @@ const ListFactory = props => {
     isAZ,
     router,
     entitySchema,
-    sort,
-    sortby,
+    sort: null,
+    sortby: null,
+    sortProperties: updatedSortProperties,
     azFilter,
     searchValues,
     filterEntitySchema,
@@ -156,7 +164,8 @@ ListFactory.propTypes = {
   name: PropTypes.string,
   sortby: PropTypes.array,
   sort: PropTypes.string,
-  searchFilter: PropTypes.object
+  searchFilter: PropTypes.object,
+  sortProperties: PropTypes.array
 };
 
 ListFactory.defaultProps = {
@@ -165,6 +174,7 @@ ListFactory.defaultProps = {
   omitWrappers: false,
   name: '',
   sortby: [],
+  sortProperties: [],
   sort: '',
   operator: AND,
   searchFilter: {}

package/src/components/List/helpers/get-sort-props.js

@@ -0,0 +1,17 @@
+const getSortProps = ({ querySort, sortProperties, defaultSort, querySortBy, defaultSortBy }) => {
+  const sort = querySort || (sortProperties.length ? null : defaultSort);
+  let sortby = null;
+  if (querySortBy) sortby = [querySortBy];
+  else if (!sortProperties.length) sortby = defaultSortBy;
+
+  const updatedSortProperties = [...sortProperties];
+  if (sort) updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay: filterProps }) => filterProps)
+    .filter(Boolean)
+    .flat();
+  return { sortbyFilters, updatedSortProperties };
+};
+
+export default getSortProps;

package/src/components/List/helpers/index.js

@@ -4,3 +4,4 @@ export { default as buildAzAggregations } from './build-az-aggregations';
 export { default as buildAzUrl } from './build-az-url';
 export { default as sortAggs } from './sort-aggs';
 export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
+export { default as getSortProps } from './get-sort-props';

package/src/components/SearchFilter/helpers/build-query.js

@@ -8,12 +8,11 @@ const buildQuery = (filterValues, filters) => {
 
   filters.forEach(({ propsToDisplay, type }) => {
     if (type === TEXT_SEARCH) return;
-    propsToDisplay.map(prop => {
+
+    propsToDisplay.forEach(prop => {
       const value = filterValues[prop];
       const parsedValue = parseFilterValue(prop, type, value);
-      if (!parsedValue) return null;
       if (parsedValue) newQuery.push(parsedValue);
-      return parsedValue;
     });
   });
 

package/src/helpers/get-generic-render-variables.js

@@ -1,31 +1,41 @@
-import checkSortby from './check-sort-by';
 import getSortbyFieldName from './get-sort-by-field-name';
 import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
+const buildSortValues = (sortFilters, relations, stringProps) => {
+  if (!sortFilters || !sortFilters.length) return { sort: [] };
+  const sortValues = sortFilters
+    .map(
+      ({ sort, propsToDisplay }) =>
+        !!sort &&
+        !!propsToDisplay[0] &&
+        `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`
+    )
+    .filter(Boolean)
+    .join(',');
+
+  return { sort: sortValues };
+};
 const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {
   if (isTextSearchApplied) {
     return {};
   }
-  const { sort, sortby } = filterProps;
-
-  const isSortbyArray = Array.isArray(sortby);
-
-  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);
-
-  const sortValue = hasSortFields
-    ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}`
-    : '';
+  const { sort, sortby, sortProperties = [] } = filterProps;
 
-  return sortValue ? { sort: sortValue } : {};
+  return buildSortValues(
+    [{ sort, propsToDisplay: [sortby] }, ...sortProperties],
+    relations,
+    stringProps
+  );
 };
 
 const getGenericRenderVariables = (
   relations,
-  { limit = DEFAULT_LIMIT, offset, ...filterProps } = {},
+  filterProps = {},
   stringProps = [],
   rawQueryStringified = '',
   isTextSearchFilterApplied = false
 ) => {
+  const { limit = DEFAULT_LIMIT, offset } = filterProps;
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
   const raw = rawQueryStringified ? { rawQueryStringified } : {};
 

package/tests/unit/src/components/List/helpers/get-sort-props.test.js

@@ -0,0 +1,58 @@
+import getSortProps from '../../../../../../src/components/List/helpers/get-sort-props';
+
+const property = 'updated';
+const defaultProperty = 'name';
+const asc = 'asc';
+const desc = 'desc';
+const sortProperties = [
+  {
+    propsToDisplay: [property],
+    sort: asc
+  }
+];
+const querySortBy = 'date';
+const props = {
+  querySort: '',
+  sortProperties,
+  defaultSort: desc,
+  querySortBy: '',
+  defaultSortBy: [defaultProperty]
+};
+
+describe('getSortProps helper function', () => {
+  it('should ignore old sortby/sort and use sortProperties', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps(props);
+    expect(sortbyFilters).toEqual([property]);
+    expect(updatedSortProperties).toEqual(sortProperties);
+  });
+
+  it('should add query sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      querySortBy,
+      querySort: desc
+    });
+    expect(sortbyFilters).toEqual([querySortBy, property]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [querySortBy],
+        sort: desc
+      },
+      ...sortProperties
+    ]);
+  });
+
+  it('should use old style sort', () => {
+    const { sortbyFilters, updatedSortProperties } = getSortProps({
+      ...props,
+      sortProperties: []
+    });
+    expect(sortbyFilters).toEqual([defaultProperty]);
+    expect(updatedSortProperties).toEqual([
+      {
+        propsToDisplay: [defaultProperty],
+        sort: desc
+      }
+    ]);
+  });
+});

package/tests/unit/src/helpers/build-raw-query.test.js

@@ -304,6 +304,7 @@ describe('build raw query', () => {
       id,
       itemsToDisplay
     );
+
     expect(rawQueryOneCheckboxFilterMoreItemsToDisplayValues).toEqual(
       RAW_QUERY_OR_OPERATOR_ITEMS_TO_DISPLAY
     );
@@ -347,7 +348,7 @@ describe('build raw query', () => {
       filterData,
       id,
       [],
-      false,
+      true,
       { shouldReturnAggs: true, isAZ: true }
     );
     expect(queryWithAggs).toEqual(RAW_QUERY_WITH_AGGS);

package/tests/unit/src/helpers/get-generic-render-variables.test.js

@@ -17,11 +17,7 @@ const mockedProps = overrides => ({
 });
 
 describe('get card/list render variables', () => {
-  it('should be a function', () => {
-    expect(typeof getGenericRenderVariables).toEqual('function');
-  });
-
-  it('should return always an object', () => {
+  it('should always return an object', () => {
     const variables = getGenericRenderVariables();
     const variablesWithProps = getGenericRenderVariables([], mockedProps(), STRING_PROPS_EMPTY);
 
@@ -78,20 +74,18 @@ describe('get card/list render variables', () => {
       mockedProps({ sortby: ['length'] }),
       STRING_PROPS_EMPTY
     );
-
     expect(sort).toEqual('length:desc');
   });
 
   it('should return correct sort data when when there is a prop that is of type string', () => {
-    const { sort } = getGenericRenderVariables([], mockedProps({ sortby: ['name'] }), STRING_PROPS);
-
+    const { sort } = getGenericRenderVariables([], mockedProps({ sortby: 'name' }), STRING_PROPS);
     expect(sort).toEqual('name.keyword:desc');
   });
 
   it("should return correct sort data when when there is a prop that is of type string and it's also a relation prop", () => {
     const { sort } = getGenericRenderVariables(
       [{ localField: 'entity', entityIdentifier: 'entity' }],
-      mockedProps({ sortby: ['entity.name'], sort: 'ASC' }),
+      mockedProps({ sortby: 'entity.name', sort: 'ASC' }),
       ['entity.name']
     );
 
@@ -103,7 +97,7 @@ describe('get card/list render variables', () => {
     const sortby = `${localField}.length`;
     const { sort } = getGenericRenderVariables(
       [{ localField, entityIdentifier: 'entity' }],
-      mockedProps({ sortby: [sortby], sort: 'ASC' }),
+      mockedProps({ sortby, sort: 'ASC' }),
       []
     );
 
@@ -113,7 +107,7 @@ describe('get card/list render variables', () => {
   it('should return correct sort data when when there is a relation prop that is of type string but with updated value', () => {
     const { sort } = getGenericRenderVariables(
       [{ localField: 'tag', entityIdentifier: 'tags' }],
-      mockedProps({ sortby: ['tag.name'], sort: 'ASC' }),
+      mockedProps({ sortby: 'tag.name', sort: 'ASC' }),
       ['tags.name']
     );
 

package/lib/helpers/check-sort-by.js

@@ -1,16 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.define-property.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var checkSortby = function checkSortby(sortby, isSortbyArray) {
-  return isSortbyArray && sortby.length || !isSortbyArray && sortby;
-};
-
-var _default = checkSortby;
-exports["default"] = _default;
-//# sourceMappingURL=check-sort-by.js.map

package/lib/helpers/check-sort-by.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/helpers/check-sort-by.js"],"names":["checkSortby","sortby","isSortbyArray","length"],"mappings":";;;;;;;;;AAAA,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,MAAD,EAASC,aAAT;AAAA,SACjBA,aAAa,IAAID,MAAM,CAACE,MAAzB,IAAqC,CAACD,aAAD,IAAkBD,MADrC;AAAA,CAApB;;eAGeD,W","sourcesContent":["const checkSortby = (sortby, isSortbyArray) =>\n  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);\n\nexport default checkSortby;\n"],"file":"check-sort-by.js"}

package/lib-es/helpers/check-sort-by.js

@@ -1,4 +0,0 @@
-const checkSortby = (sortby, isSortbyArray) => isSortbyArray && sortby.length || !isSortbyArray && sortby;
-
-export default checkSortby;
-//# sourceMappingURL=check-sort-by.js.map

package/lib-es/helpers/check-sort-by.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/helpers/check-sort-by.js"],"names":["checkSortby","sortby","isSortbyArray","length"],"mappings":"AAAA,MAAMA,WAAW,GAAG,CAACC,MAAD,EAASC,aAAT,KACjBA,aAAa,IAAID,MAAM,CAACE,MAAzB,IAAqC,CAACD,aAAD,IAAkBD,MADzD;;AAGA,eAAeD,WAAf","sourcesContent":["const checkSortby = (sortby, isSortbyArray) =>\n  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);\n\nexport default checkSortby;\n"],"file":"check-sort-by.js"}

package/src/helpers/check-sort-by.js

@@ -1,4 +0,0 @@
-const checkSortby = (sortby, isSortbyArray) =>
-  (isSortbyArray && sortby.length) || (!isSortbyArray && sortby);
-
-export default checkSortby;