Add permissions support

ssarkisy · ssarkisy · commit 81e8cd0d8b66 · 2017-11-01T11:49:36.000+03:00
diff --git a/src/components/catalog/CatalogForm.js b/src/components/catalog/CatalogForm.js
@@ -5,7 +5,7 @@ import GenericInput from '../common/GenericInput';
 import CatalogFormActions from './CatalogFormActions';
 
 const CatalogForm = ({ inputList, formObject, collections,
-                       onSave, onClose, onChange, saving, errors }) => {
+                       onSave, onClose, onChange, saving, errors, permissions }) => {
   inputList = inputList || [];
   return (
     <Form>
@@ -19,11 +19,12 @@ const CatalogForm = ({ inputList, formObject, collections,
                       name={input.name}
                       value={formObject[input.name]}
                       label={input.displayName}
+                      permissions={permissions}
                       onChange={onChange}/>
         );
       })}
       <CatalogFormActions
-          permissions={formObject.objpermissions}
+          permissions={permissions}
           onSave={onSave}
           onClose={onClose}
       />
@@ -39,7 +40,8 @@ CatalogForm.propTypes = {
   onClose: PropTypes.func.isRequired,
   saving: PropTypes.bool,
   errors: PropTypes.object,
-  collections: PropTypes.object
+  collections: PropTypes.object,
+  permissions: PropTypes.string
 };
 
 export default CatalogForm;
diff --git a/src/components/catalog/CatalogFormActions.js b/src/components/catalog/CatalogFormActions.js
@@ -5,8 +5,8 @@ import { Button } from 'antd';
 const CatalogFormActions = ({ permissions, onClose, onSave }) => {
   return (
     <div style={{textAlign: 'right'}}>
-      <Button style={{background: '#000', color: '#fff', marginRight: '7px'}} onClick={onClose}>Закрыть</Button>
-      <Button type="primary" onClick={onSave}>Сохранить</Button>
+      <Button style={{background: '#000', color: '#fff', marginRight: '7px'}} onClick={onClose}>Close</Button>
+      {permissions.includes('U') && <Button type="primary" onClick={onSave}>Save</Button>}
     </div>
   );
 };
diff --git a/src/components/catalog/CatalogPage.js b/src/components/catalog/CatalogPage.js
@@ -26,76 +26,95 @@ class CatalogPage extends React.Component {
       {
         key: 'action',
         width: "100px",
+        className: 'text-right',
         onCellClick: (record, event) => {
           if (
-            event.target.matches('.anticon-edit') ||
-            (event.target.firstElementChild &&
-             event.target.firstElementChild.matches('.anticon-edit'))
+            (event.target.matches('#view') ||
+            (event.target.firstElementChild && event.target.firstElementChild.matches('#view'))) ||
+            (event.target.matches('#edit') ||
+            (event.target.firstElementChild && event.target.firstElementChild.matches('#edit')))
           ) {
-            this.edit(record);
-
-          } else if (
-            event.target.matches('.anticon-delete') ||
-            (event.target.firstElementChild &&
-             event.target.firstElementChild.matches('.anticon-delete'))
+            this.open(record);
+          }
+          else if (
+            event.target.matches('#delete') ||
+            (event.target.firstElementChild && event.target.firstElementChild.matches('#delete'))
           ) {
             this.remove(record);
           }
         },
         render: (text, record) => (
           <span>
-            <Button type="primary" icon="edit" style={{margin: "0 5px"}}/>
-            <Button type="danger" icon="delete" style={{margin: "0 5px"}}/>
+            {this.state.catalog.objpermissions.includes('U') &&
+              <Button type="primary" id="edit" icon="edit" style={{margin: "0 5px"}}/>
+            }
+
+            {!this.state.catalog.objpermissions.includes('U') &&
+              this.state.catalog.objpermissions.includes('R') &&
+              <Button type="primary" id="view" icon="search" style={{margin: "0 5px"}}/>
+            }
+
+            {this.state.catalog.objpermissions.includes('D') &&
+              <Button type="danger" icon="delete" style={{margin: "0 5px"}}/>
+            }
           </span>
         )
       }
     ];
 
     this.state = {
-      catalog: {},
+      catalog: {
+        name: '',
+        objpermissions: ''
+      },
       extent: []
     };
   }
 
   componentDidMount() {
     const name = this.props.match.params.name;
 
-    let promise = CatalogApi.getCatalogInfo(name);
-    promise = promise.then((response) => {
-      this.setState({catalog: response.data});
-      return this.loadCatalogExtent(name, promise);
-    });
+    CatalogApi.getCatalogInfo(name)
+    .then((response) => {
+      this.setState((state) => ({catalog: response.data}));
+
+      // Load catalog data only if we have permission for that
+      if (response.data.objpermissions.includes('R')) {
+        return this.loadCatalogExtent(name);
+      }
+    })
+    .catch((error) => {
+      const summary = (error && error.response && error.response.data && error.response.data.summary);
 
-    promise.catch((error) => {
       notification.error({
-        message: 'An error has occurred: ' + error.summary
+        message: 'An error has occurred: ' + summary
       });
     });
   }
 
-  loadCatalogExtent = (name, promise) => {
-    if (promise) {
-      promise = promise.then(() => {
-        return CatalogApi.getCatalogExtent(name);
+  loadCatalogExtent = (name) => {
+    return CatalogApi.getCatalogExtent(name)
+      .then((response) => {
+        this.setState({extent: response.data.children});
+      })
+      .catch((error) => {
+        const summary = (error && error.response && error.response.data && error.response.data.summary);
+
+        notification.error({
+          message: 'An error has occurred: ' + summary
+        });
       });
-    }
-    else {
-      promise = CatalogApi.getCatalogExtent(name);
-    }
 
-    promise = promise.then((response) => {
-      this.setState({extent: response.data.children});
-    });
   };
 
   add = () => {
     const path = this.props.location.pathname;
-    this.props.history.replace(`${path}/object`);
+    this.props.history.push(`${path}/object`);
   };
 
-  edit = (record) => {
+  open = (record) => {
     const path = this.props.location.pathname;
-    this.props.history.replace(`${path}/object/${record._id}`);
+    this.props.history.push(`${path}/object/${record._id}`);
   };
 
   remove = (record) => {
@@ -128,29 +147,40 @@ class CatalogPage extends React.Component {
 
         <div style={{background: '#fff', padding: 24, minHeight: 280}}>
 
-          <div className="clearfix" style={{width: "100%"}}>
+          <div className="clearfix" style={{width: "100%", marginBottom: '20px'}}>
             <h2 style={{display: "inline"}}>
               {this.state.catalog.name || '...'}
             </h2>
-            <Button type="primary"
-                    style={{float: 'right', marginBottom: 8}}
-                    size="small"
-                    onClick={this.add}
-                    className="clearfix"
-            >
-              Add
-            </Button>
+
+            {(this.state.catalog.objpermissions.includes('C')) &&
+                <Button type="primary"
+                        style={{float: 'right', marginBottom: 8}}
+                        size="small"
+                        onClick={this.add}
+                        className="clearfix"
+                >
+                  Add
+                </Button>
+            }
+
           </div>
 
-          <Table
-            rowKey="_id"
-            dataSource={this.state.extent}
-            columns={this.columns}
-            showHeader={false}
-            bordered
-            size="middle"
-            pagination={{showSizeChanger: true}}
-          />
+          {this.state.catalog.objpermissions.includes('R') &&
+            <Table
+              rowKey="_id"
+              dataSource={this.state.extent}
+              columns={this.columns}
+              showHeader={false}
+              size="middle"
+              pagination={{showSizeChanger: true}}
+            />
+          }
+
+          {this.state.catalog.name && !this.state.catalog.objpermissions.includes('R') &&
+            <div style={{textAlign: 'center', padding: '20px'}}>
+              <h3>You have no permissions to view this catalog.</h3>
+            </div>
+          }
         </div>
       </div>
     );
diff --git a/src/components/catalog/ManageCatalogPage.js b/src/components/catalog/ManageCatalogPage.js
@@ -192,6 +192,7 @@ export class ManageCatalogPage extends React.Component {
               collections={this.state.collections}
               errors={this.state.errors}
               saving={this.state.saving}
+              permissions={this.state.catalog.objpermissions || ''}
             />
           </div>
           }
diff --git a/src/components/common/GenericInput.js b/src/components/common/GenericInput.js
@@ -6,7 +6,7 @@ import moment from 'moment';
 
 const GenericInput = ({ category, collection = [], collectionType,
                         type, name, label, onChange, placeholder,
-                        value, error }) => {
+                        value, error, permissions }) => {
 
   function onChangeDate(name) {
     return function(date, dateString) {
@@ -64,27 +64,53 @@ const GenericInput = ({ category, collection = [], collectionType,
 
   switch (type) {
     case '%Library.String':
-      input = <Input value={value} onChange={onChangeString(name)} name={name}/>;
+      if (permissions.includes('U')) {
+        input = <Input value={value} onChange={onChangeString(name)} name={name}/>;
+      }
+      else {
+        input = <Input value={value} readOnly name={name}/>;
+      }
       break;
     case '%Library.Boolean':
-      input = <Checkbox checked={value} onChange={onChangeBoolean(name)} name={name}>{label}</Checkbox>;
+      if (permissions.includes('U')) {
+        input = <Checkbox checked={value} onChange={onChangeBoolean(name)} name={name}>{label}</Checkbox>;
+      }
+      else {
+        input = <Checkbox checked={value} readOnly name={name}>{label}</Checkbox>;
+      }
       break;
     case '%Library.Date':
-      input = (<DatePicker format={dateFormat} value={getMomentValue(value, dateFormat)}
-                          name={name} onChange={onChangeDate(name)}/>);
+      if (permissions.includes('U')) {
+        input = (<DatePicker format={dateFormat} value={getMomentValue(value, dateFormat)}
+                             name={name} onChange={onChangeDate(name)}/>);
+      }
+      else {
+        input = <Input value={value} name={name} readOnly style={{ width: '200px' }}/>;
+      }
       break;
     case '%Library.TimeStamp':
-      input = (<DatePicker format={datetimeFormat} value={getMomentValue(value, moment.ISO_8601)}
-                           showTime name={name} onChange={onChangeTimestamp(name)}/>);
+      if (permissions.includes('U')) {
+        input = (<DatePicker format={datetimeFormat} value={getMomentValue(value, moment.ISO_8601)}
+                             showTime name={name} onChange={onChangeTimestamp(name)}/>);
+      }
+      else {
+        input = <Input value={getMomentValue(value, moment.ISO_8601)} name={name} readOnly style={{ width: '200px' }}/>;
+      }
       break;
     case '%Library.Integer':
     case '%Library.Numeric':
-      input = <InputNumber name={name} value={value} onChange={onChangeNumber(name)}/>;
+      if (permissions.includes('U')) {
+        input = <InputNumber name={name} value={value} onChange={onChangeNumber(name)}/>;
+      }
+      else {
+        input = <Input value={value} name={name} readOnly style={{ width: '200px' }}/>;
+      }
       break;
     default:
       if (category === 'form') {
 
         if (!collectionType) {
+          if (permissions.includes('U')) {
             let options = collection.map(item => {
               return <Select.Option key={item._id} value={item._id}>{item.displayName}</Select.Option>;
             });
@@ -95,7 +121,7 @@ const GenericInput = ({ category, collection = [], collectionType,
             }
 
             input = (
-              <Select showSearch style={{ width: 200 }}
+              <Select showSearch style={{width: 200}}
                       value={value}
                       name={name}
                       optionFilterProp="children"
@@ -104,6 +130,10 @@ const GenericInput = ({ category, collection = [], collectionType,
                 {options}
               </Select>
             );
+          }
+          else {
+            input = <Input name={name} value={value.name} readOnly style={{ width: '200px' }}/>;
+          }
         }
 
       }
@@ -135,6 +165,7 @@ GenericInput.propTypes = {
   label: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
+  permissions: PropTypes.string,
   value: PropTypes.any,
   error: PropTypes.string
 };
diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -9,6 +9,14 @@
   margin-bottom: 12px;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
 td.clickable-cell {
   cursor: pointer;
 }

Original file line number	Diff line number	Diff line change
`@@ -192,6 +192,7 @@ export class ManageCatalogPage extends React.Component {`
`192`	`192`	`collections={this.state.collections}`
`193`	`193`	`errors={this.state.errors}`
`194`	`194`	`saving={this.state.saving}`
	`195`	`+ permissions={this.state.catalog.objpermissions \|\| ''}`
`195`	`196`	`/>`
`196`	`197`	`</div>`
`197`	`198`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,14 @@`
`9`	`9`	`margin-bottom: 12px;`
`10`	`10`	`}`
`11`	`11`
	`12`	`+.text-center {`
	`13`	`+ text-align: center;`
	`14`	`+}`
	`15`	`+`
	`16`	`+.text-right {`
	`17`	`+ text-align: right;`
	`18`	`+}`
	`19`	`+`
`12`	`20`	`td.clickable-cell {`
`13`	`21`	`cursor: pointer;`
`14`	`22`	`}`