Dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "be5-react",
-  "version": "0.2.29",
+  "version": "0.2.40",
   "description": "React client UI for be5 server api",
   "main": "dist/lib/be5-react.js",
   "scripts": {
@@ -86,6 +86,7 @@
     "url": "https://github.com/DevelopmentOnTheEdge/be5-react.git"
   },
   "jest": {
+    "testURL": "http://localhost/",
     "verbose": true,
     "globals": {
       "NODE_ENV": "test"

src/scripts/be5/be5.js

@@ -25,7 +25,7 @@ const be5 = {
   DOCUMENT_REFRESH_SUFFIX: "_refresh",
 
   appInfo: {},
-  serverUrlWithContext: window.serverUrlWithContext || "/",
+  be5ServerUrl: window.be5ServerUrl || "",
 
   locale: {
     set(loc, addMessages) {
@@ -123,8 +123,8 @@ const be5 = {
     //   return encodeURIComponent(hashUriComponent);
     // },
 
-    create(action, positional = [], named = {}) {
-      return be5.url.form([action].concat(positional), named);
+    create(positional = [], named = {}) {
+      return be5.url.form(positional, named);
     },
 
     form(positional, named = {}) {
@@ -231,7 +231,7 @@ const be5 = {
       };
 
       $.ajax({
-        url : be5.serverUrlWithContext + url,
+        url : be5.be5ServerUrl + url,
         dataType : type,
         type : 'POST',
         data : params,

src/scripts/be5/be5init.js

@@ -81,8 +81,6 @@ export default {
 
   initGetUser(store){
     this.initOnLoad(store, undefined, getDefaultRoute, () => {
-      //be5.url.set(getDefaultRoute(be5.store))
-      //be5.url.process(be5.MAIN_DOCUMENT, "");
       be5.url.process(be5.MAIN_DOCUMENT, be5.url.get());
     });
   },

src/scripts/be5/components/RoleSelector.js

@@ -66,9 +66,9 @@ const RoleSelector = (props) => {
         <DropdownItem divider />
 
         <div className="roleBox_add-actions">
-          Выбрать:{' '}
-          <Button onClick={handleSelectAll} color="primary" className="enable-all" size="sm">Всё</Button>{' '}
-          <Button onClick={handleClear} color="secondary" className="disable-all" size="sm">Ничего</Button>
+          {be5.locale.msg('selectRoles') + ' '}
+          <Button onClick={handleSelectAll} color="primary" className="enable-all" size="sm">{be5.locale.msg('allRoles')}</Button>{' '}
+          <Button onClick={handleClear} color="secondary" className="disable-all" size="sm">{be5.locale.msg('clearRoles')}</Button>
         </div>
       </DropdownMenu>
     </UncontrolledDropdown>

src/scripts/be5/components/forms/Form.js

@@ -108,22 +108,23 @@ class Form extends React.Component
   }
 
   _createOkAction(addCssClasses) {
+    const {bsSize, submitText} = this.state.data.attributes.layout;
     return (
       <Transition in={this.state.submitted} timeout={200}>
         {(state) => (
           <button
             type="submit"
             className={classNames(
               "btn btn-primary",
-              {'btn-sm' : this.state.data.attributes.layout.bsSize === 'sm'},
-              {'btn-lg' : this.state.data.attributes.layout.bsSize === 'lg'},
+              {'btn-sm' : bsSize === 'sm'},
+              {'btn-lg' : bsSize === 'lg'},
               addCssClasses
             )}
             onClick={() => this.setState({wasValidated: true})}
             title={this.state.submitted ? be5.messages.submitted: ""}
             disabled={state === 'entered'}
           >
-          {be5.messages.Submit}
+          {submitText || be5.messages.Submit}
           </button>
         )}
       </Transition>

src/scripts/be5/components/tables/CategoryNavigation.js

@@ -3,23 +3,27 @@ import PropTypes  from 'prop-types';
 import be5 from "../../be5";
 
 
-const propTypes =  {
-  categories: PropTypes.array,
+const propTypes = {
+  data: PropTypes.shape({
+    attributes: PropTypes.array,
+    type: PropTypes.string
+  }),
   url: PropTypes.string
 };
 
-const CategoryNavigation = ({categories, url}) =>
+const CategoryNavigation = ({data, url}) =>
 {
-  if(!categories || categories.length === 0)return null;
+  if(!data || !data.attributes || data.attributes.length === 0)return null;
+  const categories = data.attributes;
 
   const pUrl = be5.url.parse(url);
   const currentCat = pUrl.named['_cat_'];
 
   if(currentCat === undefined){
     return (
       <div className="category-navigation category-navigation__not-select">
-        <a href={be5.url.create("", pUrl.positional, Object.assign({}, pUrl.named, {_cat_: categories[0].id}))}>
-          {be5.messages['Switch to categorized view']}
+        <a href={be5.url.create(pUrl.positional, Object.assign({}, pUrl.named, {_cat_: categories[0].id}))}>
+          {be5.locale.msg('Switch to categorized view')}
         </a>
       </div>
     )
@@ -32,7 +36,7 @@ const CategoryNavigation = ({categories, url}) =>
       if (parseInt(currentCat) !== cat.id) {
         return (
           <a className="d-block"
-             href={be5.url.create("", pUrl.positional, Object.assign({}, pUrl.named, {_cat_: cat.id}))} key={cat.id}>
+             href={be5.url.create(pUrl.positional, Object.assign({}, pUrl.named, {_cat_: cat.id}))} key={cat.id}>
             {cat.name}
           </a>
         )

src/scripts/be5/components/tables/OperationBox.js

@@ -11,7 +11,7 @@ class OperationBox extends React.Component
 
   onClick(name, e) {
     if (!$(ReactDOM.findDOMNode(this.refs[name])).hasClass('disabled')) {
-      const operation = this.props.operations.find(operation => operation.name === name);
+      const operation = this.props.operations.attributes.find(operation => operation.name === name);
       if (!operation.requiresConfirmation || confirm(operation.title + "?")) {
         this.props.onOperationClick(operation);
       }
@@ -20,7 +20,8 @@ class OperationBox extends React.Component
   }
 
   refreshEnablement() {
-    this.props.operations.forEach(operation => {
+    if(!this.props.operations) return;
+    this.props.operations.attributes.forEach(operation => {
       let visible = false;
       switch (operation.visibleWhen) {
         case 'always':
@@ -47,6 +48,7 @@ class OperationBox extends React.Component
   }
 
   render() {
+    if(!this.props.operations) return null;
     const splitWithSpaces = (elements) => {
       const out = [];
       _(elements).each(e => {
@@ -57,7 +59,7 @@ class OperationBox extends React.Component
       });
       return out;
     };
-    const operations = this.props.operations.map(operation => {
+    const operations = this.props.operations.attributes.map(operation => {
 //      if (operation.isClientSide) {
 //        const action = Action.parse(operation.action);
 //        const attrs = {
@@ -81,7 +83,7 @@ class OperationBox extends React.Component
       );
     });
 
-    if(this.props.operations.length === 0){
+    if(this.props.operations.attributes.length === 0){
       return (
         <div/>
       );
@@ -94,4 +96,4 @@ class OperationBox extends React.Component
   }
 }
 
-export default OperationBox;
+export default OperationBox;

src/scripts/be5/components/tables/Table.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import PropTypes          from 'prop-types';
 import ReactDOM           from 'react-dom';
 import be5                from '../../be5';
-import {getModelByID, getSelfUrl} from '../../utils/documentUtils';
+import {getModelByID, getResourceByType, getSelfUrl} from '../../utils/documentUtils';
 import forms              from '../../services/forms';
 import numberFormatter    from 'number-format.js';
 import OperationBox       from './OperationBox';
@@ -117,7 +117,7 @@ class TableBox extends React.Component {
     const tfoot = $('<tfoot>');
     const tfootrow = $('<tr>').appendTo(tfoot);
     const hasCheckBoxes = attributes.selectable;
-    const editable = attributes.operations.filter((op) => op.name === 'Edit').length === 1;
+    //const editable = attributes.operations.filter((op) => op.name === 'Edit').length === 1;
     let columnIndexShift = 0;
 
     if (hasCheckBoxes) {
@@ -153,23 +153,32 @@ class TableBox extends React.Component {
     let lengths = [5,10,20,50,100,500,1000];
     const pageLength = attributes.length;
 
+    let tableDom = 'r <"table-responsive-md"t> <"dataTables-nav clearfix"pli>';
+
     if (lengths.indexOf(pageLength) === -1) {
-      lengths.push(pageLength);
-      lengths.sort(function(a,b) {return a-b;});
+      if(pageLength < 5)
+      {
+        tableDom = tableDom.replace("pli", "pi");
+      }
+      else
+      {
+        lengths.push(pageLength);
+        lengths.sort(function(a,b) {return a-b;});
+      }
     }
 
-    const lengthsTitles = lengths.map(x => x + ' записей');
+    const lengthsTitles = lengths.map(x => x + ' ' + be5.locale.msg('entries'));
 
     lengths = [lengths, lengthsTitles];
 
-    let language = null;
+    let language = {};
     if(be5.locale.value !== 'en'){
       language = be5.messages.dataTables || {};
-      language.lengthMenu = "_MENU_";
     }
+    language.lengthMenu = "_MENU_";
 
     const tableConfiguration = {
-      dom: 'r <"table-responsive-md"t> <"dataTables-nav clearfix"pli>',
+      dom: tableDom,
       processing: true,
       serverSide: true,
       language: language,
@@ -179,7 +188,6 @@ class TableBox extends React.Component {
       displayStart: attributes.offset,
       order: attributes.orderColumn >= 0 ? [[ attributes.orderColumn, attributes.orderDir ]] : undefined,
       ajax: function (data, callback, settings) {
-        console.log(data, settings);
         const params = {
           entity: attributes.category,
           query: attributes.page,
@@ -192,8 +200,8 @@ class TableBox extends React.Component {
           params.params._orderColumn_ = data.order[0].column;
           params.params._orderDir_    = data.order[0].dir;
         }
-        updateTable(params, function(json){
-          console.log(json);
+        updateTable(params, function(jsonApiModel){
+          const json = jsonApiModel.data.attributes;
           if(json.type === "error"){
             be5.log.error(json.value.code + "\n" + json.value.message);
           }else{
@@ -229,9 +237,10 @@ class TableBox extends React.Component {
             const val = row[0];
             const id = "row-" + val + "-checkbox";
             let display = meta.row+1;
-            if(editable) {
-              display = '<a href="#!'+be5.url.create('form', [attributes.category, attributes.page, 'Edit'], {selectedRows: val})+'">'+display+'</a>';
-            }
+
+            // if(editable) {
+            //   display = '<a href="#!'+be5.url.create(['form', attributes.category, attributes.page, 'Edit'], {selectedRows: val})+'">'+display+'</a>';
+            // }
             // Pure HTML! Have no idea how to convert some react.js to string.
             return '\
                 <input id="{id}" type="checkbox" class="rowCheckbox"></input>\
@@ -353,22 +362,46 @@ class TableBox extends React.Component {
   }
 
   render() {
-    const attributes = this.props.value.data.attributes;
-    if (attributes.columns.length === 0) {
+    const {data, included} = this.props.value;
+    const hasRows = data.attributes.rows.length;
+
+    if (!hasRows) {
       return (
         <div>
-          <CategoryNavigation categories={attributes.categoryNavigation} url={getSelfUrl(this.props.value)}/>
-          <OperationBox ref="operations" operations={attributes.operations} onOperationClick={this.onOperationClick} hasRows={attributes.rows.length !== 0}/>
+          <CategoryNavigation
+            data={getResourceByType(included, "documentCategories")}
+            url={getSelfUrl(this.props.value)}
+          />
+          <OperationBox
+            ref="operations"
+            operations={getResourceByType(included, "documentOperations")}
+            onOperationClick={this.onOperationClick}
+            hasRows={hasRows}
+          />
           {be5.messages.emptyTable}
         </div>
       );
     }
 
     return (
       <div>
-        <CategoryNavigation categories={attributes.categoryNavigation} url={getSelfUrl(this.props.value)}/>
-        <OperationBox ref="operations" operations={attributes.operations} onOperationClick={this.onOperationClick} hasRows={attributes.rows.length !== 0}/>
-        <QuickColumns ref="quickColumns" columns={attributes.columns} firstRow={attributes.rows[0].cells} table={this.refs.table} selectable={attributes.selectable}/>
+        <CategoryNavigation
+          data={getResourceByType(included, "documentCategories")}
+          url={getSelfUrl(this.props.value)}
+        />
+        <OperationBox
+          ref="operations"
+          operations={getResourceByType(included, "documentOperations")}
+          onOperationClick={this.onOperationClick}
+          hasRows={hasRows}
+        />
+        <QuickColumns
+          ref="quickColumns"
+          columns={data.attributes.columns}
+          firstRow={data.attributes.rows[0].cells}
+          table={this.refs.table}
+          selectable={data.attributes.selectable}
+        />
         <div className="">
           <div ref="table" className="row"/>
         </div>

src/scripts/be5/constants.js

@@ -1,4 +1,4 @@
-export const API_URL_PREFIX = 'api/';
+export const API_URL_PREFIX = '/api/';
 
 export const DEFAULT_VIEW = 'All records';
 

src/scripts/be5/core/messages.js

@@ -22,6 +22,11 @@ export default {
     successfullyCompleted: 'Successfully completed.',
 
     filter: 'Filter...',
+    entries: 'entries',
+
+    selectRoles: 'Select',
+    allRoles: 'all',
+    clearRoles: 'clear',
 
     Submit: 'Submit',
     submitted: 'In progress...',
@@ -59,6 +64,11 @@ export default {
     successfullyCompleted: 'Успешно выполнено.',
 
     filter: 'Фильтр...',
+    entries: 'записей',
+
+    selectRoles: 'Выбрать',
+    allRoles: 'Всё',
+    clearRoles: 'Ничего',
 
     Submit: 'Выполнить',
     submitted: 'Выполняется...',

src/scripts/be5/services/frontendActions.js

@@ -58,7 +58,6 @@ export const executeFrontendActions = (actionsArrayOrOneObject, frontendParams)
     }
   }
 
-  //window.open blocked by browser usually
   if(actions[OPEN_NEW_WINDOW] !== undefined)
   {
     window.open(actions[OPEN_NEW_WINDOW]);
@@ -76,7 +75,7 @@ export const executeFrontendActions = (actionsArrayOrOneObject, frontendParams)
 
   if(actions[UPDATE_PARENT_DOCUMENT] !== undefined)
   {
-    const tableJson = Object.assign({}, actions[UPDATE_PARENT_DOCUMENT], {meta: json.meta});
+    const tableJson = Object.assign({}, actions[UPDATE_PARENT_DOCUMENT], {meta: {_ts_: new Date().getTime()}});
     changeDocument(frontendParams.parentDocumentName, {value: tableJson});
 
     //usually used in filters
@@ -88,7 +87,7 @@ export const executeFrontendActions = (actionsArrayOrOneObject, frontendParams)
 
   if(actions[UPDATE_DOCUMENT] !== undefined)
   {
-    const tableJson = Object.assign({}, actions[UPDATE_DOCUMENT], {meta: json.meta});
+    const tableJson = Object.assign({}, actions[UPDATE_DOCUMENT], {meta: {_ts_: new Date().getTime()}});
     changeDocument(documentName, {value: tableJson});
   }