diff --git a/app/packs/src/apps/admin/AdminNavigation.js b/app/packs/src/apps/admin/AdminNavigation.js
index e55df02d8c..099bdc1ce9 100644
--- a/app/packs/src/apps/admin/AdminNavigation.js
+++ b/app/packs/src/apps/admin/AdminNavigation.js
@@ -7,18 +7,7 @@ import UserActions from 'src/stores/alt/actions/UserActions';
import NavNewSession from 'src/components/navigation/NavNewSession';
import DocumentHelper from 'src/utilities/DocumentHelper';
-
-const NavHead = () => (
-
-
-
-
-
-
-
-
-
-);
+import NavHead from 'src/components/navigation/NavHead';
export default class AdminNavigation extends React.Component {
constructor(props) {
diff --git a/app/packs/src/apps/admin/ChemSpectraLayouts.js b/app/packs/src/apps/admin/ChemSpectraLayouts.js
new file mode 100644
index 0000000000..b0db3276cd
--- /dev/null
+++ b/app/packs/src/apps/admin/ChemSpectraLayouts.js
@@ -0,0 +1,311 @@
+/* eslint-disable no-param-reassign */
+import React, { Component } from 'react';
+import ChemSpectraFetcher from 'src/fetchers/ChemSpectraFetcher';
+import {
+ Table, Button, Form, FormControl, Modal, Panel, FormGroup, ControlLabel, Popover, OverlayTrigger, ButtonGroup, Alert
+} from 'react-bootstrap';
+import Select from 'react-select';
+
+export default class ChemSpectraLayouts extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ layouts: [],
+ newDataType: {
+ layout: '',
+ dataType: '',
+ },
+ defaultLayouts: [],
+ showNewTypeLayoutModal: false,
+ alertMessage: null
+ };
+
+ this.fetchSpectraLayouts = this.fetchSpectraLayouts.bind(this);
+ this.handleInputChange = this.handleInputChange.bind(this);
+ this.handleAddDataType = this.handleAddDataType.bind(this);
+ this.handleDeleteDataType = this.handleDeleteDataType.bind(this);
+ this.handleShowNewTypeLayoutModal = this.handleShowNewTypeLayoutModal.bind(this);
+ this.handleCloseNewTypeLayoutModal = this.handleCloseNewTypeLayoutModal.bind(this);
+ this.getLayoutOptionsAndMapping = this.getLayoutOptionsAndMapping.bind(this);
+ }
+
+ componentDidMount() {
+ this.fetchSpectraLayouts();
+ }
+
+ handleInputChange(event) {
+ const { name, value } = event.target;
+ this.setState((prevState) => ({
+ newDataType: {
+ ...prevState.newDataType,
+ [name]: value,
+ },
+ }));
+ }
+
+ handleSelectLayout(selectedOption) {
+ if (selectedOption) {
+ this.setState((prevState) => ({
+ newDataType: {
+ ...prevState.newDataType,
+ layout: selectedOption.value,
+ },
+ }));
+ }
+ }
+
+ handleShowNewTypeLayoutModal() {
+ this.setState({ showNewTypeLayoutModal: true });
+ }
+
+ handleCloseNewTypeLayoutModal() {
+ this.setState({
+ showNewTypeLayoutModal: false,
+ alertMessage: null,
+ newDataType: {
+ layout: '',
+ dataType: '',
+ }
+ });
+ }
+
+ handleAddDataType() {
+ const { newDataType, layouts } = this.state;
+ if (newDataType.dataType.length === 0) {
+ this.setState({ alertMessage: 'Please enter a data type' });
+ } else if (newDataType.layout.length === 0) {
+ this.setState({ alertMessage: 'Please select a layout' });
+ } else {
+ const existingLayout = layouts.find(([layout]) => layout === newDataType.layout);
+
+ if (existingLayout) {
+ const [, dataTypeArray] = existingLayout;
+
+ if (dataTypeArray.includes(newDataType.dataType.trimEnd())) {
+ this.setState({ alertMessage: 'Data type already exists' });
+ } else {
+ const updatedLayouts = layouts.map(([layout, dataType]) => {
+ if (layout === newDataType.layout) {
+ return [layout, [...dataType, newDataType.dataType]];
+ }
+ return [layout, dataType];
+ });
+ const transformedData = updatedLayouts.reduce((acc, [key, value]) => {
+ acc[key] = value;
+ return acc;
+ }, {});
+
+ ChemSpectraFetcher.updateDataTypes(transformedData)
+ .then((message) => {
+ console.log(message);
+ this.handleCloseNewTypeLayoutModal();
+ this.fetchUpdatedSpectraLayouts();
+ })
+ .catch((error) => console.error(error));
+ }
+ }
+ }
+ }
+
+ handleDeleteDataType(dataTypeToDelete) {
+ const { layouts } = this.state;
+
+ const updatedLayouts = layouts.map((entry) => {
+ if (entry[0] === dataTypeToDelete.layout) {
+ entry[1] = entry[1].filter((dataType) => dataType !== dataTypeToDelete.dataType);
+ }
+ return entry;
+ });
+
+ const transformedData = updatedLayouts.reduce((acc, [key, value]) => {
+ acc[key] = value;
+ return acc;
+ }, {});
+
+ ChemSpectraFetcher.updateDataTypes(transformedData)
+ .then((message) => {
+ console.log(message);
+ this.fetchUpdatedSpectraLayouts();
+ })
+ .catch((error) => console.error(error));
+ }
+
+ fetchSpectraLayouts() {
+ ChemSpectraFetcher.fetchSpectraLayouts()
+ .then((layouts) => {
+ if (layouts) {
+ this.setState({ layouts: Object.entries(layouts.current_data_types),
+ defaultLayouts: Object.entries(layouts.default_data_types)
+ });
+ }
+ })
+ .catch((error) => console.error(error));
+ }
+
+ fetchUpdatedSpectraLayouts() {
+ ChemSpectraFetcher.fetchUpdatedSpectraLayouts()
+ .then((layouts) => {
+ if (layouts) {
+ this.setState({ layouts });
+ }
+ })
+ .catch((error) => console.error(error));
+ }
+
+ getLayoutOptionsAndMapping() {
+ const { layouts } = this.state;
+ const layoutsMapping = layouts.reduce((acc, [layout, dataTypes]) => {
+ dataTypes.forEach((dataType) => {
+ acc.push({ layout, dataType });
+ });
+ return acc;
+ }, []);
+
+ const allLayouts = Array.from(new Set(layoutsMapping.map(({ layout }) => layout))).sort();
+
+ const layoutsOptions = allLayouts.map((layout) => ({
+ value: layout,
+ label: layout
+ }));
+
+ return { layoutsOptions, layoutsMapping };
+ }
+
+ render() {
+ const {
+ newDataType, showNewTypeLayoutModal, alertMessage, defaultLayouts
+ } = this.state;
+
+ const { layoutsOptions, layoutsMapping } = this.getLayoutOptionsAndMapping();
+
+ return (
+
+
+
+
+
+
+ {alertMessage && (
+
+ {alertMessage}
+
+ )}
+
+
+
+ New Data Type
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Data Types
+
+
+
+
+
+ | # |
+ Data Type |
+ Layout |
+
+
+
+ {layoutsMapping.map((entry, index) => (
+
+ | {index + 1} |
+ {entry.dataType} |
+ {entry.layout} |
+
+ {' '}
+ {defaultLayouts.some(([layout, dataTypes]) => layout === entry.layout
+ && !dataTypes.includes(entry.dataType)) ? (
+
+
+ Delete this data type?
+
+
+
+
+
+
+
+ )}
+ >
+
+
+
+ ) : (
+
+ )}
+ |
+
+ ))}
+
+
+
+
+ );
+ }
+}
diff --git a/app/packs/src/apps/admin/DatasetElementAdmin.js b/app/packs/src/apps/admin/DatasetElementAdmin.js
deleted file mode 100644
index 7a2ebb17c3..0000000000
--- a/app/packs/src/apps/admin/DatasetElementAdmin.js
+++ /dev/null
@@ -1,824 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy } from 'lodash';
-import LoadingModal from 'src/components/common/LoadingModal';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-import { ElementField } from 'src/components/generic/ElementField';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import TemplateJsonModal from 'src/apps/admin/generic/TemplateJsonModal';
-import LayerAttrEditModal from 'src/apps/admin/generic/LayerAttrEditModal';
-import LayerAttrNewModal from 'src/apps/admin/generic/LayerAttrNewModal';
-import FieldCondEditModal from 'src/apps/admin/generic/FieldCondEditModal';
-import SelectAttrNewModal from 'src/apps/admin/generic/SelectAttrNewModal';
-import Preview from 'src/apps/admin/generic/Preview';
-import UploadModal from 'src/apps/admin/generic/UploadModal';
-import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from 'src/apps/admin/generic/Utils';
-
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-export default class DatasetElementAdmin extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- elements: [],
- element: {},
- newFieldKey: '',
- newOptionKey: '',
- layerKey: '',
- selectOptions: [],
- unitsSystem: {},
- showPropModal: false,
- showNewLayer: false,
- showEditLayer: false,
- showAddSelect: false,
- showUpload: false,
- showJson: false,
- propTabKey: 1,
- revisions: [],
- };
-
- this.clipboard = new Clipboard('.clipboardBtn');
- this.handlePropShow = this.handlePropShow.bind(this);
- this.handlePropClose = this.handlePropClose.bind(this);
- this.onInputNewField = this.onInputNewField.bind(this);
- this.onInputNewOption = this.onInputNewOption.bind(this);
- this.addLayer = this.addLayer.bind(this);
- this.addSelection = this.addSelection.bind(this);
- this.editLayer = this.editLayer.bind(this);
- this.newField = this.newField.bind(this);
- this.newOption = this.newOption.bind(this);
- this.handleSelectClose = this.handleSelectClose.bind(this);
- this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
- this.handleLayerClose = this.handleLayerClose.bind(this);
- this.handleCreateLayer = this.handleCreateLayer.bind(this);
- this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
- this.handleAddSelect = this.handleAddSelect.bind(this);
- this.onDummyAdd = this.onDummyAdd.bind(this);
- this.onFieldDrop = this.onFieldDrop.bind(this);
- this.onFieldMove = this.onFieldMove.bind(this);
- this.onFieldInputChange = this.onFieldInputChange.bind(this);
- this.onOptionInputChange = this.onOptionInputChange.bind(this);
- this.showJsonModal = this.showJsonModal.bind(this);
- this.hideJsonModal = this.hideJsonModal.bind(this);
- this.handleUpdateJson = this.handleUpdateJson.bind(this);
- this.onShowFieldCond = this.onShowFieldCond.bind(this);
- this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
- this.handleCond = this.handleCond.bind(this);
- this.fetchConfigs = this.fetchConfigs.bind(this);
- this.handleDeActive = this.handleDeActive.bind(this);
- this.propTabSelect = this.propTabSelect.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- this.retriveRevision = this.retriveRevision.bind(this);
- this.delRevision = this.delRevision.bind(this);
- this.fetchRevisions = this.fetchRevisions.bind(this);
- this.handleUploadShow = this.handleUploadShow.bind(this);
- this.handleUploadClose = this.handleUploadClose.bind(this);
- this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
- }
-
- componentDidMount() {
- this.fetchElements();
- this.fetchConfigs();
- }
-
- componentWillUnmount() {
- this.clipboard.destroy();
- }
-
- onOptionInputChange(event, selectKey, optionKey) {
- const { element } = this.state;
- const options = (element &&
- element.properties_template && element.properties_template.select_options[selectKey]
- && element.properties_template.select_options[selectKey].options) || [];
- const idx = findIndex(options, o => o.key === optionKey);
- const op = {};
- op.key = optionKey;
- op.label = event.target.value;
- options.splice(idx, 1, op);
- this.setState({ element });
- }
-
- onDummyAdd(e) {
- const { element } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[e.l]);
- let { fields } = layer || {};
- fields = fields || [];
- let idx = fields.findIndex(o => o.field === e.f);
- if (idx === -1 && fields.length > 0) idx = fields.length - 1;
- fields.splice(idx + 1, 0, new GenericDummy());
- element.properties_template.layers[e.l].fields = fields;
- this.setState({ element });
- }
-
- onShowFieldCond(field, lk) {
- this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
- }
-
- onFieldDrop(e) {
- const { element } = this.state;
- const sourceKey = e.sourceTag.layerKey;
- const targetKey = e.targetTag.layerKey;
- const sourceLayer = element.properties_template.layers[sourceKey];
- const targetLayer = element.properties_template.layers[targetKey];
-
- if (sourceLayer && targetLayer) {
- e.sourceTag.field.position = e.targetTag.field.position - 1;
- const { fields } = element.properties_template.layers[sourceKey];
- const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
- fields.splice(idx, 1, e.sourceTag.field);
- element.properties_template.layers[sourceKey].fields = fields;
- this.setState({ element });
- }
- }
-
- onFieldMove(l, f, isUp) {
- const { element } = this.state;
- const layer = (element && element.properties_template && element.properties_template.layers[l]);
- const { fields } = layer;
- const idx = findIndex(fields, o => o.field === f);
- if (idx >= 0 && isUp) {
- const curObj = fields[idx];
- curObj.position -= 1;
- const preObj = fields[idx - 1];
- preObj.position += 1;
- fields[idx] = preObj;
- fields[idx - 1] = curObj;
- } else if (idx < (fields.length - 1) && !isUp) {
- const curObj = fields[idx];
- curObj.position += 1;
- const nexObj = fields[idx + 1];
- nexObj.position -= 1;
- fields[idx] = nexObj;
- fields[idx + 1] = curObj;
- }
- element.properties_template.layers[l].fields = fields;
- this.setState({ element });
- }
-
- onFieldInputChange(event, orig, fe, lk, fc, tp) {
- const { element } = this.state;
-
- let value = '';
- if (tp === 'select' || tp === 'system-defined') {
- ({ value } = event);
- } else if (tp && tp.startsWith('drag')) {
- value = event;
- } else {
- ({ value } = event.target);
- }
- let fobj = null;
- const layer = (element && element.properties_template
- && element.properties_template.layers[lk]);
- const { fields } = layer;
- if (layer != null) {
- const fobjs = filter(fields, o => o.field === fe);
- if (fobjs && fobjs.length > 0) {
- fobj = fobjs[0];
- }
- }
-
- if (layer != null && fobj != null) {
- switch (fc) {
- case 'label':
- fobj.label = value;
- break;
- case 'description':
- fobj.description = value;
- break;
- case 'type':
- fobj.type = value;
- break;
- case 'required':
- fobj.required = !orig;
- break;
- case 'formula':
- fobj.formula = value;
- break;
- case 'position':
- fobj.position = value;
- break;
- case 'field':
- fobj.field = value;
- break;
- case 'placeholder':
- fobj.placeholder = value;
- break;
- case 'option_layers':
- fobj.option_layers = value;
- break;
- default:
- break;
- }
- const idx = findIndex(fields, o => o.field === fe);
- fields.splice(idx, 1, fobj);
- element.properties_template.layers[lk].fields = fields;
- this.setState({ element });
- }
- }
-
- onInputNewField(e) {
- this.setState({ newFieldKey: e.target.value });
- }
-
- onInputNewOption(e) {
- this.setState({ newOptionKey: e.target.value });
- }
-
- fetchConfigs() {
- AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
- }
-
- fetchElements() {
- AdminFetcher.listDatasetKlass()
- .then((result) => { this.setState({ elements: result.klass }); });
- }
-
- handleDeActive(e) {
- const act = e.is_active ? 'De-active' : 'Active';
- AdminFetcher.deActiveDatasetKlass({ id: e.id, is_active: !e.is_active })
- .then((result) => {
- if (result.error) {
- notification({ title: `${act} Dataset fail`, lvl: 'error', msg: result.error });
- } else {
- notification({ title: `${act} Dataset successfully`, lvl: 'info', msg: `${e.label} is ${act.toLowerCase()} now` });
- this.fetchElements();
- }
- }).catch((errorMessage) => { console.log(errorMessage); });
- }
-
- handlePropClose() {
- this.setState({ showPropModal: false });
- }
-
- handleFieldCondClose() {
- this.setState({ showFieldCond: false });
- }
-
- handleCond(lk) {
- this.onShowFieldCond(null, lk);
- }
-
- addLayer() {
- this.setState({ showNewLayer: true });
- }
-
- addSelection() {
- this.setState({ showAddSelect: true });
- }
-
- showJsonModal(element) {
- this.setState({ element, showJson: true });
- }
-
- hideJsonModal() {
- this.setState({ showJson: false });
- }
-
- editLayer(e) {
- this.setState({ showEditLayer: true, layerKey: e.layerKey });
- }
-
- handleUploadShow() {
- this.setState({ showUpload: true });
- }
-
- handleUploadClose() {
- this.setState({ showUpload: false });
- }
-
- newField(e) {
- const { element, newFieldKey } = this.state;
- if (newFieldKey === null || newFieldKey.trim().length === 0) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
- return;
- }
- if (!validateField(newFieldKey)) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
- return;
- }
- const { layerKey } = e;
- const layer = element && element.properties_template
- && element.properties_template.layers[layerKey];
- const fields = layer.fields || [];
- const dupfields = filter(fields, o => o.field === newFieldKey);
- if (dupfields && dupfields.length > 0) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name!' });
- return;
- }
- const newField = {
- type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
- };
- fields.push(newField);
- element.properties_template.layers[layerKey].fields = fields;
- this.setState({ layerKey, element });
- }
-
- newOption(key) {
- const { element, newOptionKey } = this.state;
-
- if (newOptionKey == null || newOptionKey.trim().length === 0) {
- notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
- return;
- }
- const selectObj = (element && element.properties_template
- && element.properties_template.select_options[key]
- && element.properties_template.select_options[key].options) || [];
- const dupops = filter(selectObj, o => o.key === newOptionKey);
- if (dupops && dupops.length > 0) {
- notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
- return;
- }
- const newOption = { key: newOptionKey, label: newOptionKey };
- selectObj.push(newOption);
- element.properties_template.select_options[key].options = selectObj;
- this.setState({ element });
- }
-
- handleNewLayerClose() {
- this.setState({ showNewLayer: false });
- }
-
- handleLayerClose() {
- this.setState({ showEditLayer: false });
- }
-
- handleSelectClose() {
- this.setState({ showAddSelect: false });
- }
-
- fetchRevisions() {
- const { element } = this.state;
- if (element && element.id) {
- AdminFetcher.fetchKlassRevisions(element.id, 'DatasetKlass')
- .then((result) => {
- let curr = Object.assign({}, { ...element.properties_template });
- curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
- const revisions = [].concat(curr, result.revisions);
- this.setState({ revisions });
- });
- }
- }
-
- delRevision(params) {
- const { element } = this.state;
- AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'DatasetKlass' })
- .then((response) => {
- if (response.error) {
- notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
- } else {
- this.fetchRevisions();
- }
- });
- }
-
- propTabSelect(key) {
- if (key !== 1) {
- this.fetchRevisions();
- }
- this.setState({ propTabKey: key });
- }
-
- handleAddSelect(selectName) {
- const { element } = this.state;
- if (validateSelectList(selectName, element)) {
- const sos = element.properties_template.select_options;
- sos[selectName] = {};
- const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
- this.setState({ element, showAddSelect: false, selectOptions });
- }
- return false;
- }
-
- handleCreateLayer(layer) {
- if (!validateLayerInput(layer)) return;
- const { element } = this.state;
- if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
- notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
- return;
- }
- element.properties_template.layers[`${layer.key}`] = layer;
- notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
- this.setState({ showNewLayer: false, element, layerKey: layer.key });
- }
-
- handleUpdateLayer(layerKey, updates) {
- if (!validateLayerInput(updates)) return;
- const { element } = this.state;
- let layer = element && element.properties_template
- && element.properties_template.layers[layerKey];
- layer = { ...layer, ...updates };
- element.properties_template.layers[`${layer.key}`] = layer;
- notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
- this.setState({ showEditLayer: false, element });
- }
-
- handleUpdateJson(propertiesTemplate) {
- const { element } = this.state;
- element.properties_template = propertiesTemplate;
- this.setState({ element, showJson: false }, this.handleSubmit(false));
- }
-
- handlePropShow(element) {
- if (element) {
- const selectOptions = Object.keys(element.properties_template.select_options)
- .map(key => ({ value: key, name: key, label: key }));
- this.setState({ element, selectOptions, showPropModal: true });
- }
- }
-
- handleUploadTemplate(properties, message, valid) {
- const { element } = this.state;
- if (valid === false) {
- this.setState({ showUpload: false });
- notification({ title: `Upload Template for Dataset [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
- } else {
- element.properties_template = properties;
- this.setState({ element, showUpload: false });
- notification({ title: `Upload template to Dataset [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
- }
- }
-
- retriveRevision(revision, cb) {
- const { element } = this.state;
- element.properties_template = revision;
- this.setState({ element, propTabKey: 1 }, cb);
- }
-
- handleSubmit(isRelease = false) {
- LoadingActions.start();
- const { element, unitsSystem } = this.state;
- Object.keys(element.properties_template.layers).forEach((key) => {
- const layer = element.properties_template.layers[key];
- let sortedFields = (layer && layer.fields) || [];
- (sortedFields || []).forEach((f, idx) => {
- const fd = f;
- fd.position = (idx + 1);
- if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
- fd.required = false;
- return fd;
- });
- sortedFields = sortBy(sortedFields, l => l.position);
- element.properties_template.layers[key].fields = sortedFields;
- });
-
- element.is_release = isRelease;
- AdminFetcher.updateDatasetTemplate(element)
- .then((result) => {
- if (result.error) {
- notification({ title: `Update Dataset: [${element.label}] template fail`, lvl: 'error', msg: result.error });
- } else {
- if (isRelease === true) {
- notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved and Released successfully' });
- } else {
- notification({ title: `Update Dataset: [${element.label}] template`, lvl: 'info', msg: 'Saved successfully' });
- }
- this.fetchElements();
- this.setState({ element: result }, () => LoadingActions.stop());
- }
- }).catch((errorMessage) => { console.log(errorMessage); });
- }
-
- confirmDelete(delStr, delKey, delRoot) {
- const { element } = this.state;
- if (delStr === 'Select') {
- delete element.properties_template.select_options[delKey];
- const sos = element.properties_template.select_options;
- const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
- this.setState({ selectOptions });
- } else if (delStr === 'Option') {
- const options = element.properties_template.select_options[delRoot];
- const idx = findIndex(options, o => o.key === delKey);
- options.splice(idx, 1);
- } else if (delStr === 'Layer') {
- delete element.properties_template.layers[delKey];
- } else if (delStr === 'Field') {
- const { fields } = element.properties_template.layers[delRoot];
- const idx = findIndex(fields, o => o.field === delKey);
- fields.splice(idx, 1);
- }
- this.setState({ element });
- }
-
- renderDeleteButton(delStr, delKey, delRoot) {
- let msg = 'remove?';
- if (delStr === 'Select') {
- msg = `remove this select option: [${delKey}] ?`;
- } else if (delStr === 'Option') {
- msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
- } else if (delStr === 'Layer') {
- msg = `remove this layer: [${delKey}] ?`;
- } else if (delStr === 'Field') {
- msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
- } else {
- msg = `remove ???: ${delStr}`;
- }
-
- const popover = (
-
- {msg}
-
-
-
-
-
- );
-
- return (
-
-
-
- );
- }
-
- renderSelectOptions() {
- const { element } = this.state;
- const selects = [];
- Object.keys(element.properties_template.select_options).forEach((key) => {
- const soptions = (element.properties_template.select_options[key]
- && element.properties_template.select_options[key].options) || [];
- const options = soptions.map(f => (
-
-
-
- {f.key}
- this.onOptionInputChange(event, key, f.key)}
- />
-
- {this.renderDeleteButton('Option', f.key, key)}
-
-
-
-
- ));
-
- const snode = (
-
-
- {key}
-
-
-
-
- {this.renderDeleteButton('Select', key, null)}
-
- this.onInputNewOption(e)}
- placeholder="Input new option"
- bsSize="sm"
- />
-
- Add new option}>
-
-
-
-
-
-
-
- {options}
-
- );
- selects.push(snode);
- });
-
- return (
-
-
-
-
- Select Lists
- Add new select list}>
-
-
-
-
- {selects}
-
-
- );
- }
-
- renderProperties() {
- const { element, selectOptions, unitsSystem } = this.state;
- const layers = [];
- const sortedLayers = sortBy(element.properties_template.layers, l => l.position);
- (sortedLayers || []).forEach((layer) => {
- const layerKey = `${layer.key}`;
- const fields = ((layer && layer.fields) || []).map((f, idx) => (
-
{}}
- onMove={(l, fe, isUp) => this.onFieldMove(l, fe, isUp)}
- onDelete={(delStr, delKey, delRoot) => this.confirmDelete(delStr, delKey, delRoot)}
- onChange={(e, orig, fe, lk, fc, tp) => this.onFieldInputChange(e, orig, fe, lk, fc, tp)}
- unitsSystem={unitsSystem}
- onDummyAdd={this.onDummyAdd}
- onShowFieldCond={(field, lk) => this.onShowFieldCond(field, lk)}
- allLayers={sortedLayers}
- />
- )) || [];
- const hasCond = (layer && layer.cond_fields && layer.cond_fields.length > 0) || false;
- const btnCond = hasCond ?
- ( this.handleCond(layerKey)} bs="warning" element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />) :
- ( this.handleCond(layerKey)} element={{ l: layerKey, f: null }} fa="fa fa-cogs" place="top" size="sm" />);
-
- const node = (
-
-
-
- {layer.label} {layer.key} {`Columns per Row: ${layer.cols}`} {`Fields: ${(layer.fields && layer.fields.length) || 0}`}
-
-
-
-
-
- {btnCond}
-
- {this.renderDeleteButton('Layer', layerKey, null)}
-
- this.onInputNewField(e)}
- placeholder="Input new field name"
- bsSize="sm"
- />
-
-
-
-
-
-
-
-
- {fields}
-
- );
- layers.push(node);
- });
-
- return (
-
-
-
-
- Layers
- Add new layer}>
-
-
-
-
- {layers}
-
-
- | {idx + 1} |
- {e.label} |
-
- {
- e.is_active ?
- :
- }
- |
-
-
-
- |
- {e.released_at} (UTC) |
-
-
- ));
- return (
-
-
-
-
-
- | # |
- Chemical Methods Ontology |
- Active |
- Template |
- Released at |
-
-
- {tbody}
-
-
-
- );
- }
-
- renderPropPanel() {
- const { element, showPropModal, revisions, propTabKey } = this.state;
- if (showPropModal) {
- return (
-
-
-
-
- {`Properties Template of Dataset [${element.label}]`}
- {`ver.: ${element.uuid}`}
- {element.uuid === element.properties_template.uuid ? '' : `draft: ${element.properties_template.uuid}`}
-
- this.handleSubmit(true)} fa="fa-floppy-o" place="top" bs="primary" />
- this.handleSubmit(false)} fa="fa-floppy-o" place="top" bs="primary" />
-
-
-
-
-
- {this.renderProperties()}
- {this.renderSelectOptions()}
-
-
-
-
-
-
-
-
-
- );
- }
- return ();
- }
-
- render() {
- const { element, layerKey } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[layerKey]) || {};
- const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
- return (
-
-
- {this.renderList()}
- {this.renderPropPanel()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- return (
-
-
-
- );
- }
-
- renderSelectOptions() {
- const { element } = this.state;
- const selects = [];
-
- Object.keys(element.properties_template.select_options).forEach((key) => {
- const soptions = (element.properties_template.select_options[key] && element.properties_template.select_options[key].options) || [];
- const options = (soptions || []).map(f => (
-
-
-
- {f.key}
- this.onOptionInputChange(event, key, f.key)}
- />
-
- {this.renderDeleteButton('Option', f.key, key)}
-
-
-
-
- ));
-
- const snode = (
-
-
-
- {key}
-
-
-
-
-
- {this.renderDeleteButton('Select', key, null)}
-
- this.onInputNewOption(e)}
- placeholder="Input new option"
- bsSize="sm"
- />
-
- Add new option}>
-
-
-
-
-
-
-
-
-
- {options}
-
-
-
- );
- selects.push(snode);
- });
-
- return (
-
-
-
-
- Select Lists
- Add new select list}>
-
-
-
-
-
-
- {selects}
-
-
-
-
-
-
-
- {btnCond}
-
- {this.renderDeleteButton('Layer', layerKey, null)}
-
- this.onInputNewField(e)}
- placeholder="Input new field name"
- bsSize="sm"
- />
-
-
-
-
-
-
-
-
-
-
- {fields}
-
-
-
- );
- layers.push(node);
- });
-
- return (
-
-
-
-
- Layers
- Add new layer}>
-
-
-
-
- {layers}
-
-
- {this.renderProperties()}
- {this.renderSelectOptions()}
-
-
-
-
-
-
-
-
- );
- }
- return ();
- }
-
- renderList() {
- const { elements, element } = this.state;
- const els = orderBy(elements, ['is_active', 'name', 'klass_prefix'], ['desc', 'asc', 'asc']);
- const tbody = els && els.map((e, idx) => (
-
-
- | {idx + 1} |
-
-
-
-
-
- |
- {e.name} |
- {e.klass_prefix} |
-
- {
- e.is_active ? :
- }
- |
- {e.label} |
- |
- {e.desc} |
-
-
-
- |
- {e.released_at} (UTC) |
-
-
- ));
- return (
-
-
-
-
-
- | # |
- Actions |
- Element |
- Prefix |
- Active |
- Element Label |
- Icon |
- Description |
- Template |
- Released at |
-
-
- {tbody}
-
-
-
- );
- }
-
- render() {
- const { element, layerKey } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[layerKey]) || {};
-
- const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
- return (
-
-
-
-
-
- {this.renderList()}
- {this.renderPropPanel()}
-
-
-
-
-
-
-
-
-
-
-
-
DataCiteVersion: {deviceMetadata.data_cite_version}
- DataCiteUpdatedAt: {moment(deviceMetadata.data_cite_updated_at).format('YYYY-MM-DD HH:mm')}
+ DataCiteUpdatedAt: {formatDate(deviceMetadata.data_cite_updated_at)}
diff --git a/app/packs/src/apps/admin/MatrixManagement.js b/app/packs/src/apps/admin/MatrixManagement.js
index 1bceaac979..76ed54a167 100644
--- a/app/packs/src/apps/admin/MatrixManagement.js
+++ b/app/packs/src/apps/admin/MatrixManagement.js
@@ -5,6 +5,7 @@ import Select from 'react-select';
import JSONInput from 'react-json-editor-ajrm';
import AdminFetcher from 'src/fetchers/AdminFetcher';
import NotificationActions from 'src/stores/alt/actions/NotificationActions';
+import { selectUserOptionFormater } from 'src/utilities/selectHelper';
const editTooltip = Edit Permission;
const jsonTooltip = Edit JSON;
@@ -96,15 +97,9 @@ export default class MatrixManagement extends React.Component {
if (!input) {
return Promise.resolve({ options: [] });
}
- return AdminFetcher.fetchUserGroupByName(input)
- .then((res) => {
- const usersEntries = res.users.map(u => ({
- value: u.id,
- name: u.name,
- label: `${u.name} (${u.abb})`
- }));
- return { options: usersEntries };
- }).catch((errorMessage) => {
+ return AdminFetcher.fetchUsersByNameType(input, 'Person,Group')
+ .then((res) => selectUserOptionFormater({ data: res, withType: true }))
+ .catch((errorMessage) => {
console.log(errorMessage);
});
}
diff --git a/app/packs/src/apps/admin/SegmentElementAdmin.js b/app/packs/src/apps/admin/SegmentElementAdmin.js
deleted file mode 100644
index 73660da298..0000000000
--- a/app/packs/src/apps/admin/SegmentElementAdmin.js
+++ /dev/null
@@ -1,995 +0,0 @@
-import React from 'react';
-import { Panel, Table, FormGroup, Popover, FormControl, Button, Row, Col, Badge, Tooltip, OverlayTrigger, InputGroup, Tabs, Tab } from 'react-bootstrap';
-import uuid from 'uuid';
-import Clipboard from 'clipboard';
-import { findIndex, filter, sortBy, orderBy } from 'lodash';
-import LoadingModal from 'src/components/common/LoadingModal';
-import AdminFetcher from 'src/fetchers/AdminFetcher';
-import { ElementField } from 'src/components/generic/ElementField';
-import LoadingActions from 'src/stores/alt/actions/LoadingActions';
-import AttrNewModal from 'src/apps/admin/generic/AttrNewModal';
-import AttrEditModal from 'src/apps/admin/generic/AttrEditModal';
-import AttrCopyModal from 'src/apps/admin/generic/AttrCopyModal';
-import FieldCondEditModal from 'src/apps/admin/generic/FieldCondEditModal';
-import TemplateJsonModal from 'src/apps/admin/generic/TemplateJsonModal';
-import LayerAttrEditModal from 'src/apps/admin/generic/LayerAttrEditModal';
-import LayerAttrNewModal from 'src/apps/admin/generic/LayerAttrNewModal';
-import SelectAttrNewModal from 'src/apps/admin/generic/SelectAttrNewModal';
-import UploadModal from 'src/apps/admin/generic/UploadModal';
-import { ButtonTooltip, validateLayerInput, validateSelectList, notification, reUnit, GenericDummy } from 'src/apps/admin/generic/Utils';
-import Preview from 'src/apps/admin/generic/Preview';
-
-const validateField = field => (/^[a-zA-Z0-9_]*$/g.test(field));
-const validateInput = (element) => {
- if (element.klass_element === '') {
- notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please select Element.' });
- return false;
- }
- if (element.label === '') {
- notification({ title: 'Create Segment Error', lvl: 'error', msg: 'Please input Segment Label.' });
- return false;
- }
- return true;
-};
-
-export default class SegmentElementAdmin extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- elements: [],
- element: {},
- newFieldKey: '',
- newOptionKey: '',
- layerKey: '',
- selectOptions: [],
- unitsSystem: {},
- showPropModal: false,
- showNewLayer: false,
- showEditLayer: false,
- showAddSelect: false,
- showNewKlass: false,
- showEditKlass: false,
- showCopyKlass: false,
- showFieldCond: false,
- showUpload: false,
- showJson: false,
- propTabKey: 1
- };
-
- this.clipboard = new Clipboard('.clipboardBtn');
- this.fetchElements = this.fetchElements.bind(this);
- this.handlePropShow = this.handlePropShow.bind(this);
- this.handlePropClose = this.handlePropClose.bind(this);
- this.onInputNewField = this.onInputNewField.bind(this);
- this.onInputNewOption = this.onInputNewOption.bind(this);
- this.addLayer = this.addLayer.bind(this);
- this.addSelection = this.addSelection.bind(this);
- this.editLayer = this.editLayer.bind(this);
- this.newKlass = this.newKlass.bind(this);
- this.editKlass = this.editKlass.bind(this);
- this.copyKlass = this.copyKlass.bind(this);
- this.newField = this.newField.bind(this);
- this.newOption = this.newOption.bind(this);
- this.handleSelectClose = this.handleSelectClose.bind(this);
- this.handleNewLayerClose = this.handleNewLayerClose.bind(this);
- this.handleLayerClose = this.handleLayerClose.bind(this);
- this.handleNewKlassClose = this.handleNewKlassClose.bind(this);
- this.handleKlassClose = this.handleKlassClose.bind(this);
- this.handleCopyKlassClose = this.handleCopyKlassClose.bind(this);
- this.handleCreateLayer = this.handleCreateLayer.bind(this);
- this.handleUpdateLayer = this.handleUpdateLayer.bind(this);
- this.handleCreateKlass = this.handleCreateKlass.bind(this);
- this.handleUpdateKlass = this.handleUpdateKlass.bind(this);
- this.handleActivateKlass = this.handleActivateKlass.bind(this);
- this.handleDeleteKlass = this.handleDeleteKlass.bind(this);
- this.handleAddSelect = this.handleAddSelect.bind(this);
- this.onDummyAdd = this.onDummyAdd.bind(this);
- this.onFieldDrop = this.onFieldDrop.bind(this);
- this.onFieldMove = this.onFieldMove.bind(this);
- this.onShowFieldCond = this.onShowFieldCond.bind(this);
- this.handleFieldCondClose = this.handleFieldCondClose.bind(this);
- this.onFieldInputChange = this.onFieldInputChange.bind(this);
- this.onOptionInputChange = this.onOptionInputChange.bind(this);
- this.showJsonModal = this.showJsonModal.bind(this);
- this.hideJsonModal = this.hideJsonModal.bind(this);
- this.handleUpdateJson = this.handleUpdateJson.bind(this);
- this.fetchConfigs = this.fetchConfigs.bind(this);
- this.handleCond = this.handleCond.bind(this);
- this.onFieldSubFieldChange = this.onFieldSubFieldChange.bind(this);
- this.handleSubmit = this.handleSubmit.bind(this);
- this.propTabSelect = this.propTabSelect.bind(this);
- this.retriveRevision = this.retriveRevision.bind(this);
- this.delRevision = this.delRevision.bind(this);
- this.fetchRevisions = this.fetchRevisions.bind(this);
- this.handleUploadShow = this.handleUploadShow.bind(this);
- this.handleUploadClose = this.handleUploadClose.bind(this);
- this.handleUploadTemplate = this.handleUploadTemplate.bind(this);
- }
-
- componentDidMount() {
- this.fetchElements();
- this.fetchConfigs();
- }
-
- componentWillUnmount() {
- this.clipboard.destroy();
- }
-
- onOptionInputChange(event, selectKey, optionKey) {
- const { element } = this.state;
- const options = (element &&
- element.properties_template && element.properties_template.select_options[selectKey]
- && element.properties_template.select_options[selectKey].options) || [];
- const idx = findIndex(options, o => o.key === optionKey);
- const op = {};
- op.key = optionKey;
- op.label = event.target.value;
- options.splice(idx, 1, op);
- this.setState({ element });
- }
-
- onDummyAdd(e) {
- const { element } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[e.l]);
- let { fields } = layer || {};
- fields = fields || [];
- let idx = fields.findIndex(o => o.field === e.f);
- if (idx === -1 && fields.length > 0) idx = fields.length - 1;
- fields.splice(idx + 1, 0, new GenericDummy());
- element.properties_template.layers[e.l].fields = fields;
- this.setState({ element });
- }
-
- onShowFieldCond(field, lk) {
- this.setState({ showFieldCond: true, fieldObj: field, layerKey: lk });
- }
-
- onFieldDrop(e) {
- const { element } = this.state;
- const sourceKey = e.sourceTag.layerKey;
- const targetKey = e.targetTag.layerKey;
- const sourceLayer = element.properties_template.layers[sourceKey];
- const targetLayer = element.properties_template.layers[targetKey];
-
- if (sourceLayer && targetLayer) {
- e.sourceTag.field.position = e.targetTag.field.position - 1;
- const { fields } = element.properties_template.layers[sourceKey];
- const idx = findIndex(fields, o => o.field === e.sourceTag.field.field);
- fields.splice(idx, 1, e.sourceTag.field);
- element.properties_template.layers[sourceKey].fields = fields;
- this.setState({ element });
- }
- }
-
- onFieldMove(l, f, isUp) {
- const { element } = this.state;
- const layer = (element && element.properties_template && element.properties_template.layers[l]);
- const { fields } = layer;
- const idx = findIndex(fields, o => o.field === f);
- if (idx >= 0 && isUp) {
- const curObj = fields[idx];
- curObj.position -= 1;
- const preObj = fields[idx - 1];
- preObj.position += 1;
- fields[idx] = preObj;
- fields[idx - 1] = curObj;
- } else if (idx < (fields.length - 1) && !isUp) {
- const curObj = fields[idx];
- curObj.position += 1;
- const nexObj = fields[idx + 1];
- nexObj.position -= 1;
- fields[idx] = nexObj;
- fields[idx + 1] = curObj;
- }
- element.properties_template.layers[l].fields = fields;
- this.setState({ element });
- }
-
- onFieldSubFieldChange(lk, f, cb) {
- const { element } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[lk]);
- const { fields } = layer;
- if (layer != null) {
- const fobj = (fields || []).find(o => o.field === f.field);
- if (Object.keys(fobj).length > 0) {
- const idx = (fields || []).findIndex(o => o.field === f.field);
- fields.splice(idx, 1, f);
- element.properties_template.layers[lk].fields = fields;
- this.setState({ element }, cb);
- }
- }
- }
-
- onFieldInputChange(event, orig, fe, lk, fc, tp) {
- const { element } = this.state;
-
- let value = '';
- if (tp === 'select' || tp === 'system-defined') {
- ({ value } = event);
- } else if (tp && tp.startsWith('drag')) {
- value = event;
- } else {
- ({ value } = event.target);
- }
- const layer = (element && element.properties_template
- && element.properties_template.layers[lk]);
-
- if (typeof layer === 'undefined' || layer == null) return;
-
- const { fields } = layer;
-
- if (fields == null || fields.length === 0) return;
-
- const fobj = fields.find(e => e.field === fe);
- if (Object.keys(fobj).length === 0) return;
-
- switch (fc) {
- case 'required':
- fobj.required = !orig;
- break;
- default:
- fobj[`${fc}`] = value;
- break;
- }
-
- const idx = findIndex(fields, o => o.field === fe);
- fields.splice(idx, 1, fobj);
- element.properties_template.layers[lk].fields = fields;
- this.setState({ element });
- }
-
- onInputNewField(e) {
- this.setState({ newFieldKey: e.target.value });
- }
-
- onInputNewOption(e) {
- this.setState({ newOptionKey: e.target.value });
- }
-
- retriveRevision(revision, cb) {
- const { element } = this.state;
- element.properties_template = revision;
- this.setState({ element, propTabKey: 1 }, cb);
- }
-
- fetchRevisions() {
- const { element } = this.state;
- if (element && element.id) {
- AdminFetcher.fetchKlassRevisions(element.id, 'SegmentKlass')
- .then((result) => {
- let curr = Object.assign({}, { ...element.properties_template });
- curr = Object.assign({}, { properties_release: curr }, { uuid: 'current' });
- const revisions = [].concat(curr, result.revisions);
- this.setState({ revisions });
- });
- }
- }
-
- delRevision(params) {
- const { element } = this.state;
- AdminFetcher.deleteKlassRevision({ id: params.id, klass_id: element.id, klass: 'SegmentKlass' })
- .then((response) => {
- if (response.error) {
- notification({ title: 'Delete Revision', lvl: 'error', msg: response.error });
- } else {
- this.fetchRevisions();
- }
- });
- }
-
- propTabSelect(key) {
- if (key !== 1) {
- this.fetchRevisions();
- }
- this.setState({ propTabKey: key });
- }
-
- handlePropClose() {
- this.setState({ showPropModal: false });
- }
-
- handleFieldCondClose() {
- this.setState({ showFieldCond: false });
- }
-
- handleCond(lk) {
- this.onShowFieldCond(null, lk);
- }
-
-
- addLayer() {
- this.setState({ showNewLayer: true });
- }
-
- addSelection() {
- this.setState({ showAddSelect: true });
- }
-
- showJsonModal(element) {
- this.setState({ element, showJson: true });
- }
-
- hideJsonModal() {
- this.setState({ showJson: false });
- }
-
- editLayer(e) {
- this.setState({ showEditLayer: true, layerKey: e.layerKey });
- }
-
- newKlass() {
- this.setState({ showNewKlass: true });
- }
-
- editKlass(element) {
- this.setState({ showEditKlass: true, element });
- }
-
- copyKlass(element) {
- this.setState({ showCopyKlass: true, element });
- }
-
- handleUploadShow() {
- this.setState({ showUpload: true });
- }
-
- handleUploadClose() {
- this.setState({ showUpload: false });
- }
-
- newField(e) {
- const { element, newFieldKey } = this.state;
- if (newFieldKey === null || newFieldKey.trim().length === 0) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'please input field name first!' });
- return;
- }
- if (!validateField(newFieldKey)) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'only can be alphanumeric (a-z, A-Z, 0-9 and underscores).' });
- return;
- }
- const { layerKey } = e;
- const layer = element && element.properties_template
- && element.properties_template.layers[layerKey];
- const fields = layer.fields || [];
- const dupfields = filter(fields, o => o.field === newFieldKey);
- if (dupfields && dupfields.length > 0) {
- notification({ title: 'Add new field', lvl: 'error', msg: 'this field is used already, please change a field name' });
- return;
- }
- const newField = {
- type: 'text', field: newFieldKey, position: 100, label: newFieldKey, default: ''
- };
- fields.push(newField);
- element.properties_template.layers[layerKey].fields = fields;
- this.setState({ layerKey, element });
- }
-
- newOption(key) {
- const { element, newOptionKey } = this.state;
-
- if (newOptionKey == null || newOptionKey.trim().length === 0) {
- notification({ title: 'Add new option', lvl: 'error', msg: 'please input option name first!' });
- return;
- }
- const selectObj = (element && element.properties_template
- && element.properties_template.select_options[key]
- && element.properties_template.select_options[key].options) || [];
- const dupops = filter(selectObj, o => o.key === newOptionKey);
- if (dupops && dupops.length > 0) {
- notification({ title: 'Add new option', lvl: 'error', msg: 'this option key is used already, please change another option key' });
- return;
- }
- const newOption = { key: newOptionKey, label: newOptionKey };
- selectObj.push(newOption);
- element.properties_template.select_options[key].options = selectObj;
- this.setState({ element });
- }
-
- handleNewLayerClose() {
- this.setState({ showNewLayer: false });
- }
-
- handleLayerClose() {
- this.setState({ showEditLayer: false });
- }
-
- handleNewKlassClose() {
- this.setState({ showNewKlass: false });
- }
-
- handleKlassClose() {
- this.setState({ showEditKlass: false });
- }
-
- handleCopyKlassClose() {
- this.setState({ showCopyKlass: false });
- }
-
- handleSelectClose() {
- this.setState({ showAddSelect: false });
- }
-
- handleAddSelect(selectName) {
- const { element } = this.state;
- if (validateSelectList(selectName, element)) {
- const sos = element.properties_template.select_options;
- sos[selectName] = {};
- const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
- this.setState({ element, showAddSelect: false, selectOptions });
- }
- return false;
- }
-
- handleCreateLayer(layer) {
- if (!validateLayerInput(layer)) return;
- const { element } = this.state;
- if (element && element.properties_template && element.properties_template.layers[`${layer.key}`]) {
- notification({ title: `Layer [${layer.key}]`, lvl: 'error', msg: 'This Layer is already taken. Please choose another one.' });
- return;
- }
- element.properties_template.layers[`${layer.key}`] = layer;
- notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This new layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
- this.setState({ showNewLayer: false, element, layerKey: layer.key });
- }
-
- handleUpdateLayer(layerKey, updates) {
- if (!validateLayerInput(updates)) return;
- const { element } = this.state;
- let layer = element && element.properties_template
- && element.properties_template.layers[layerKey];
- layer = { ...layer, ...updates };
- element.properties_template.layers[`${layer.key}`] = layer;
- notification({ title: `Layer [${layer.key}]`, lvl: 'info', msg: 'This updates of this layer is kept in the Template workspace temporarily. Please remember to press Save when you finish the editing.' });
- this.setState({ showEditLayer: false, element });
- }
-
- handleCreateKlass(element) {
- if (!validateInput(element)) return;
- AdminFetcher.createSegmentKlass(element)
- .then((result) => {
- if (result.error) {
- notification({ title: 'Create Segment fail', lvl: 'error', msg: result.error });
- } else {
- notification({ title: 'Create Segment successfully', lvl: 'info', msg: 'Created successfully' });
- this.handleNewKlassClose();
- this.handleCopyKlassClose();
- this.fetchElements();
- }
- }).catch((errorMessage) => {
- console.log(errorMessage);
- });
- }
-
- handleUpdateKlass(element, updates) {
- const inputs = { ...element, ...updates };
- if (!validateInput(inputs)) return;
- AdminFetcher.updateSegmentKlass(inputs)
- .then((result) => {
- if (result.error) {
- notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
- } else {
- notification({ title: 'Update Segment successfully', lvl: 'info', msg: 'Updated successfully' });
- this.handleKlassClose();
- this.fetchElements();
- }
- }).catch((errorMessage) => {
- console.log(errorMessage);
- });
- }
-
- handleActivateKlass(id, isActive) {
- AdminFetcher.deActiveSegmentKlass({ id, is_active: !isActive })
- .then((result) => {
- if (result.error) {
- notification({ title: 'Update Segment fail', lvl: 'error', msg: result.error });
- } else {
- notification({ title: 'Update Segment successfully', lvl: 'info', msg: `Segment is ${result.is_active ? 'active' : 'deactive'} now` });
- this.handleKlassClose();
- this.fetchElements();
- }
- }).catch((errorMessage) => {
- console.log(errorMessage);
- });
- }
-
- handleDeleteKlass(element) {
- AdminFetcher.deleteSegmentKlass(element.id)
- .then((result) => {
- if (result.error) {
- notification({ title: 'Delete Segment fail', lvl: 'error', msg: result.error });
- } else {
- notification({ title: `Segment [${element.name}]`, lvl: 'info', msg: 'Deleted successfully' });
- this.handleKlassClose();
- this.fetchElements();
- }
- });
- }
-
- handleUpdateJson(propertiesTemplate) {
- const { element } = this.state;
- element.properties_template = propertiesTemplate;
- this.setState({
- element,
- showJson: false
- });
- this.handleSubmit(false);
- }
-
-
- handlePropShow(element) {
- if (element) {
- const selectOptions = Object.keys(element.properties_template.select_options)
- .map(key => ({ value: key, name: key, label: key }));
- this.setState({
- element, selectOptions, showPropModal: true, propTabKey: 1
- });
- }
- }
-
- handleUploadTemplate(properties, message, valid) {
- const { element } = this.state;
- if (valid === false) {
- this.setState({ showUpload: false });
- notification({ title: `Upload Template for Segment [${element.label}] Failed`, autoDismiss: 30, lvl: 'error', msg: message });
- } else {
- element.properties_template = properties;
- this.setState({ element, showUpload: false });
- notification({ title: `Upload template to Segment [${element.label}]`, lvl: 'info', msg: 'The templates has been uploaded, please save it.' });
- }
- }
-
- fetchConfigs() {
- AdminFetcher.fetchUnitsSystem().then((result) => { this.setState({ unitsSystem: result }); });
- }
-
- fetchElements() {
- AdminFetcher.listSegmentKlass().then((result) => {
- this.setState({ elements: result.klass });
- });
- }
-
- handleSubmit(isRelease = false) {
- LoadingActions.start();
- const { element, unitsSystem } = this.state;
- Object.keys(element.properties_template.layers).forEach((key) => {
- const layer = element.properties_template.layers[key];
- let sortedFields = (layer && layer.fields) || [];
- (sortedFields || []).forEach((f, idx) => {
- const fd = f;
- fd.position = (idx + 1);
- if (fd.type === 'system-defined') { fd.option_layers = reUnit(unitsSystem, fd.option_layers); }
- fd.required = false;
- fd.sub_fields = ['input-group', 'table'].includes(fd.type) ? fd.sub_fields : [];
- if (fd.type !== 'text-formula') { fd.text_sub_fields = []; }
- return fd;
- });
- sortedFields = sortBy(sortedFields, l => l.position);
- element.properties_template.layers[key].fields = sortedFields;
- });
-
- element.is_release = isRelease;
-
- AdminFetcher.updateSegmentTemplate(element)
- .then((result) => {
- if (result.error) {
- notification({ title: 'Update Segment template fail', lvl: 'error', msg: result.error });
- } else {
- if (isRelease === true) {
- notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved adn Released successfully' });
- } else {
- notification({ title: 'Update Segment template', lvl: 'info', msg: 'Saved successfully' });
- }
- this.fetchElements();
- this.setState({ element: result });
- }
- LoadingActions.stop();
- }).catch((errorMessage) => {
- console.log(errorMessage);
- });
- }
-
- confirmDelete(delStr, delKey, delRoot) {
- const { element } = this.state;
- if (delStr === 'Select') {
- delete element.properties_template.select_options[delKey];
- const sos = element.properties_template.select_options;
- const selectOptions = Object.keys(sos).map(key => ({ value: key, name: key, label: key }));
- this.setState({ selectOptions });
- } else if (delStr === 'Option') {
- const options = element.properties_template.select_options[delRoot];
- const idx = findIndex(options, o => o.key === delKey);
- options.splice(idx, 1);
- } else if (delStr === 'Layer') {
- delete element.properties_template.layers[delKey];
- } else if (delStr === 'Field') {
- const { fields } = element.properties_template.layers[delRoot];
- const idx = findIndex(fields, o => o.field === delKey);
- fields.splice(idx, 1);
- } else {
- //
- }
- this.setState({ element });
- }
-
- renderDeleteButton(delStr, delKey, delRoot) {
- let msg = 'remove?';
- if (delStr === 'Select') {
- msg = `remove this select option: [${delKey}] ?`;
- } else if (delStr === 'Option') {
- msg = `remove this option: [${delKey}] from select [${delRoot}] ?`;
- } else if (delStr === 'Layer') {
- msg = `remove this layer: [${delKey}] ?`;
- } else if (delStr === 'Field') {
- msg = `remove this field: [${delKey}] from layer [${delRoot}] ?`;
- } else {
- msg = `remove ???: ${delStr}`;
- }
-
- const popover = (
-
- {msg}
-
-
-
-
-
- );
-
- return (
-
-
-
- );
- }
-
- renderSelectOptions() {
- const { element } = this.state;
- const selects = [];
-
- Object.keys(element.properties_template.select_options).forEach((key) => {
- const soptions = (element.properties_template.select_options[key]
- && element.properties_template.select_options[key].options) || [];
- const options = (soptions || []).map(f => (
-
-
-
- {f.key}
- this.onOptionInputChange(event, key, f.key)}
- />
-
- {this.renderDeleteButton('Option', f.key, key)}
-
-
-
-
- ));
-
- const snode = (
-
-
- {key}
-
-
-
-
- {this.renderDeleteButton('Select', key, null)}
-
- this.onInputNewOption(e)}
- placeholder="Input new option"
- bsSize="sm"
- />
-
- Add new option}>
-
-
-
-
-
-
-
-
-
- {options}
-
-
-
- );
- selects.push(snode);
- });
-
- return (
-
-
-
-
- Select Lists
- Add new select list}>
-
-
-
-
-
-
- {selects}
-
-
-
-
-
-
-
- {btnCond}
-
- {this.renderDeleteButton('Layer', layerKey, null)}
-
- this.onInputNewField(e)}
- placeholder="Input new field name"
- bsSize="sm"
- />
-
-
-
-
-
-
-
-
-
-
- {fields}
-
-
-
- );
- layers.push(node);
- });
-
- return (
-
-
-
-
- Layers
- Add new layer}>
-
-
-
-
- {layers}
-
-
- {this.renderProperties()}
- {this.renderSelectOptions()}
-
-
-
-
-
-
-
-
- );
- }
- return ();
- }
-
- renderList() {
- const { elements, element } = this.state;
- const els = orderBy(elements, ['is_active', 'label'], ['desc', 'asc']);
- const tbody = els && els.map((e, idx) => (
-
-
- | {idx + 1} |
-
-
-
-
-
- |
- {e.label} |
- {e.desc} |
-
- {
- e.is_active ? :
- }
- |
-
-
-
- |
- {e.element_klass && e.element_klass.label} |
- {e.released_at} (UTC) |
-
-
- ));
- return (
-
-
-
-
-
- | # |
- Actions |
- Segment Label |
- Description |
- Active |
- Template |
- Belongs to |
- Released at |
-
-
- {tbody}
-
-
-
- );
- }
-
- render() {
- const { element, layerKey } = this.state;
- const layer = (element && element.properties_template
- && element.properties_template.layers[layerKey]) || {};
-
- const sortedLayers = (element && element.properties_template && element.properties_template.layers && sortBy(element.properties_template.layers, l => l.position)) || [];
-
- return (
-
-
-
-
-
- {this.renderList()}
- {this.renderPropPanel()}
-
-
-
-
-
-
-
-
-
-
-
-
{entry.name} |
- {entry.IPAddress} |
+ {entry.url} |
{entry.id} |
)
diff --git a/app/packs/src/apps/admin/UserManagement.js b/app/packs/src/apps/admin/UserManagement.js
index bcecfd4a1d..6b5199cc4b 100644
--- a/app/packs/src/apps/admin/UserManagement.js
+++ b/app/packs/src/apps/admin/UserManagement.js
@@ -1,26 +1,23 @@
+/* eslint-disable react/destructuring-assignment */
import React from 'react';
-import { Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, FormControl, Tooltip, OverlayTrigger, Tabs, Tab } from 'react-bootstrap';
+import {
+ Panel, Table, Button, Modal, FormGroup, ControlLabel, Form, Col, FormControl, Tooltip, OverlayTrigger, Tabs, Tab
+} from 'react-bootstrap';
import Select from 'react-select';
import { CSVReader } from 'react-papaparse';
-import UsersFetcher from 'src/fetchers/UsersFetcher';
import AdminFetcher from 'src/fetchers/AdminFetcher';
import MessagesFetcher from 'src/fetchers/MessagesFetcher';
+import { selectUserOptionFormater } from 'src/utilities/selectHelper';
+import GenericAdminModal from 'src/apps/admin/generic/GenericAdminModal';
const loadUserByName = (input) => {
if (!input) {
return Promise.resolve({ options: [] });
}
- return UsersFetcher.fetchUsersByName(input)
- .then((res) => {
- const usersEntries = res.users.filter(u => u.user_type === 'Person')
- .map(u => ({
- value: u.id,
- name: u.name,
- label: `${u.name}(${u.abb})`
- }));
- return { options: usersEntries };
- }).catch((errorMessage) => {
+ return AdminFetcher.fetchUsersByNameType(input, 'Person')
+ .then((res) => selectUserOptionFormater({ data: res }))
+ .catch((errorMessage) => {
console.log(errorMessage);
});
};
@@ -44,22 +41,60 @@ const handleResetPassword = (id, random) => {
});
};
-const validateEmail = mail => (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail));
-const editTooltip = edit User Info;
-const resetPasswordTooltip = reset password;
-const resetPasswordInstructionsTooltip = send password instructions;
-const confirmUserTooltip = confirm this account;
-const confirmEmailChangeTooltip = email => (confirm email:
{email});
-const disableTooltip = lock this account;
-const enableTooltip = unlock this account;
-const converterEnableTooltip = Enable Converter profiles editing for this user (currently disabled);
-const converterDisableTooltip = Disable Converter profiles editing for this user (currently enabled);
-const templateModeratorEnableTooltip = Enable Ketcher template editing for this user (currently disabled);
-const templateModeratorDisableTooltip = Disable Ketcher template editing for this user (currently enabled);
-const moleculeModeratorEnableTooltip = Enable editing the representation of the global molecules for this user (currently disabled);
-const moleculeModeratorDisableTooltip = Disable editing the representation of the global molecules for this user (currently enabled);
-const accountActiveTooltip = This user account is deactivated, press button to [activate];
-const accountInActiveTooltip = This user account is activated, press button to [deactivate];
+const validateEmail = (mail) => (/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(mail));
+const editTooltip = Edit user info;
+const resetPasswordTooltip = Reset password;
+const resetPasswordInstructionsTooltip = Send password instructions;
+const confirmUserTooltip = Confirm this account;
+const confirmEmailChangeTooltip = (email) => (
+
+ Confirm E-Mail:
+
+ {email}
+
+);
+const disableTooltip = Lock this account;
+const enableTooltip = Unlock this account;
+const converterEnableTooltip = (
+
+ Enable Converter profiles editing for this user (currently disabled)
+
+);
+const converterDisableTooltip = (
+
+ Disable Converter profiles editing for this user (currently enabled)
+
+);
+const templateModeratorEnableTooltip = (
+
+ Enable Ketcher template editing for this user (currently disabled)
+
+);
+const templateModeratorDisableTooltip = (
+
+ Disable Ketcher template editing for this user (currently enabled)
+
+);
+const moleculeModeratorEnableTooltip = (
+
+ Enable editing the representation of the global molecules for this user (currently disabled)
+
+);
+const moleculeModeratorDisableTooltip = (
+
+ Disable editing the representation of the global molecules for this user (currently enabled)
+
+);
+const accountActiveTooltip = (
+
+ This user account is deactivated, press button to [activate]
+
+);
+const accountInActiveTooltip = (
+
+ This user account is activated, press button to [deactivate]
+
+);
export default class UserManagement extends React.Component {
constructor(props) {
@@ -71,9 +106,11 @@ export default class UserManagement extends React.Component {
showMsgModal: false,
showNewUserModal: false,
showEditUserModal: false,
+ showGenericAdminModal: false,
messageNewUserModal: '',
messageEditUserModal: '',
processingSummaryUserFile: '',
+ filterCriteria: {}
};
this.handleFetchUsers = this.handleFetchUsers.bind(this);
this.handleMsgShow = this.handleMsgShow.bind(this);
@@ -86,6 +123,8 @@ export default class UserManagement extends React.Component {
this.handleEditUserShow = this.handleEditUserShow.bind(this);
this.handleEditUserClose = this.handleEditUserClose.bind(this);
this.handleUpdateUser = this.handleUpdateUser.bind(this);
+ this.handleGenericAdminModal = this.handleGenericAdminModal.bind(this);
+ this.handleGenericAdminModalCb = this.handleGenericAdminModalCb.bind(this);
}
componentDidMount() {
@@ -136,6 +175,21 @@ export default class UserManagement extends React.Component {
});
}
+ handleGenericAdminModalCb(user) {
+ AdminFetcher.fetchUsers()
+ .then((result) => {
+ let updated = result.users.find(u => u.id === user.id);
+ updated = updated || user;
+ this.setState({
+ users: result.users, user: updated
+ });
+ });
+ }
+
+ handleGenericAdminModal(show, user = {}) {
+ this.setState({ showGenericAdminModal: show, user });
+ }
+
handleFetchUsers() {
AdminFetcher.fetchUsers()
.then((result) => {
@@ -147,7 +201,7 @@ export default class UserManagement extends React.Component {
handleEnableDisableAccount(id, lockedAt) {
AdminFetcher.updateAccount({ user_id: id, enable: lockedAt !== null })
- .then((result) => {
+ .then(() => {
this.handleFetchUsers();
const message = lockedAt !== null ? 'Account unlocked!' : 'Account locked!'; //
alert(message);
@@ -156,34 +210,38 @@ export default class UserManagement extends React.Component {
handleConverterAdmin(id, isConverterAdmin) {
AdminFetcher.updateAccount({ user_id: id, converter_admin: !isConverterAdmin })
- .then((result) => {
+ .then(() => {
this.handleFetchUsers();
- const message = isConverterAdmin === true ? 'Disable Converter profiles editing for this user' : 'Enable Converter profiles editing for this user';
+ const message = isConverterAdmin === true
+ ? 'Disable Converter profiles editing for this user' : 'Enable Converter profiles editing for this user';
alert(message);
});
}
handleTemplatesModerator(id, isTemplatesModerator) {
AdminFetcher.updateAccount({ user_id: id, is_templates_moderator: !isTemplatesModerator })
- .then((result) => {
+ .then(() => {
this.handleFetchUsers();
- const message = isTemplatesModerator === true ? 'Disable Ketcher template editing for this user' : 'Enable Ketcher template editing for this user';
+ const message = isTemplatesModerator === true
+ ? 'Disable Ketcher template editing for this user' : 'Enable Ketcher template editing for this user';
alert(message);
});
}
handleMoleculesModerator(id, isMoleculesEditor) {
AdminFetcher.updateAccount({ user_id: id, molecule_editor: !isMoleculesEditor })
- .then((result) => {
+ .then(() => {
this.handleFetchUsers();
- const message = isMoleculesEditor === true ? 'Disable editing the representation of the global molecules for this user' : 'Enable editing the representation of the global molecules for this user';
+ const message = isMoleculesEditor === true
+ ? 'Disable editing the representation of the global molecules for this user'
+ : 'Enable editing the representation of the global molecules for this user';
alert(message);
});
}
handleActiveInActiveAccount(id, isActive) {
AdminFetcher.updateAccount({ user_id: id, account_active: !isActive })
- .then((result) => {
+ .then(() => {
this.handleFetchUsers();
const message = isActive === true ? 'User is In-Active!' : 'User is Active now!';
alert(message);
@@ -216,29 +274,6 @@ export default class UserManagement extends React.Component {
});
}
- validateUserInput() {
- if (this.email.value === '') { // also validated in backend
- this.setState({ messageNewUserModal: 'Please input email.' });
- return false;
- } else if (!validateEmail(this.email.value.trim())) { // also validated in backend
- this.setState({ messageNewUserModal: 'You have entered an invalid email address!' });
- return false;
- } else if (this.password.value.trim() === '' || this.passwordConfirm.value.trim() === '') {
- this.setState({ messageNewUserModal: 'Please input password with correct format.' });
- return false;
- } else if (this.password.value.trim() !== this.passwordConfirm.value.trim()) {
- this.setState({ messageNewUserModal: 'passwords do not mach!' });
- return false;
- } else if (this.password.value.trim().length < 8) { // also validated in backend
- this.setState({ messageNewUserModal: 'Password is too short (minimum is 8 characters)' });
- return false;
- } else if (this.firstname.value.trim() === '' || this.lastname.value.trim() === '' || this.nameAbbr.value.trim() === '') { // also validated in backend
- this.setState({ messageNewUserModal: 'Please input First name, Last name and Name abbreviation' });
- return false;
- }
- return true;
- }
-
handleCreateNewUser() {
if (!this.validateUserInput()) {
return false;
@@ -271,23 +306,26 @@ export default class UserManagement extends React.Component {
handleOnDropUserFile = (data, file) => {
const validFileTypes = ['text/csv', 'application/vnd.ms-excel'];
- if (!validFileTypes.includes(file.type)) { // Note that MIME type doesn't reliably indicate file type. It's only an initial guard and data is validated more thoroughly during processing.
- this.setState({ processingSummaryUserFile: `Invalid file type ${file.type}. Please make sure to upload a CSV file.` });
+ if (!validFileTypes.includes(file.type)) {
+ this.setState(
+ { processingSummaryUserFile: `Invalid file type ${file.type}. Please make sure to upload a CSV file.` }
+ );
this.newUsers = null;
return false;
}
this.newUsers = data;
- for (let i = 0; i < this.newUsers.length; i++) {
+ for (let i = 0; i < this.newUsers.length; i += 1) {
this.newUsers[i].data.row = i + 1;
}
+ return true;
};
- handleOnErrorUserFile = (err, file, inputElem, reason) => {
+ handleOnErrorUserFile = (err) => {
console.log(err);
this.newUsers = null;
};
- handleOnRemoveUserFile = (data) => {
+ handleOnRemoveUserFile = () => {
this.newUsers = null;
};
@@ -296,7 +334,7 @@ export default class UserManagement extends React.Component {
this.newUsers = null;
this.setState({ messageNewUserModal: 'Finished processing user file.' });
} else {
- const promisedNewUsers = this.newUsers.map(user => this.createNewUserFromFile(user));
+ const promisedNewUsers = this.newUsers.map((user) => this.createNewUserFromFile(user));
Promise.allSettled(promisedNewUsers)
.then((userResults) => {
this.showProcessingSummaryUserFile(userResults);
@@ -308,6 +346,57 @@ export default class UserManagement extends React.Component {
}
}
+ handleUpdateUser(user) {
+ if (!validateEmail(this.u_email.value.trim())) {
+ this.setState({ messageEditUserModal: 'You have entered an invalid email address!' });
+ return false;
+ } if (this.u_firstname.value.trim() === '' || this.u_lastname.value.trim()
+ === '' || this.u_abbr.value.trim() === '') {
+ this.setState({ messageEditUserModal: 'please input first name, last name and name abbreviation!' });
+ return false;
+ }
+ AdminFetcher.updateUser({
+ id: user.id,
+ email: this.u_email.value.trim(),
+ first_name: this.u_firstname.value.trim(),
+ last_name: this.u_lastname.value.trim(),
+ name_abbreviation: this.u_abbr.value.trim(),
+ type: this.u_type.value
+ })
+ .then((result) => {
+ if (result.error) {
+ this.setState({ messageEditUserModal: result.error });
+ return false;
+ }
+ this.setState({ showEditUserModal: false, messageEditUserModal: '' });
+ this.u_email.value = '';
+ this.u_firstname.value = '';
+ this.u_lastname.value = '';
+ this.u_abbr.value = '';
+ this.handleFetchUsers();
+ return true;
+ });
+ return true;
+ }
+
+ updateFilter = (key, value) => {
+ this.setState((prevState) => ({
+ filterCriteria: {
+ ...prevState.filterCriteria,
+ [key]: value
+ }
+ }));
+ };
+
+ updateDropdownFilter(field, value) {
+ this.setState((prevState) => ({
+ filterCriteria: {
+ ...prevState.filterCriteria,
+ [field]: value
+ }
+ }));
+ }
+
createNewUserFromFile(newUser) {
return AdminFetcher.createUserAccount({
email: newUser.data.email.trim(),
@@ -336,15 +425,21 @@ export default class UserManagement extends React.Component {
const nUsers = this.newUsers.length;
const nUsersMax = 100;
if (nUsers > nUsersMax) {
- this.setState({ processingSummaryUserFile: `The file contains too many users. Please make sure that the number of users you add from a single file doesn't exceed ${nUsersMax}.` });
+ this.setState({
+ processingSummaryUserFile: 'The file contains too many users. '
+ + `Please make sure that the number of users you add from a single file doesn't exceed ${nUsersMax}.`
+ });
return false;
}
const fileHeader = this.newUsers[0].meta.fields;
const validHeader = ['email', 'password', 'firstname', 'lastname', 'nameabbr', 'type'];
- if (!(fileHeader.length === validHeader.length &&
- fileHeader.every((val, index) => val === validHeader[index]))) {
- this.setState({ processingSummaryUserFile: `The file contains an invalid header ${fileHeader}. Please make sure that your file's header is organized as follows: ${validHeader}.` });
+ if (!(fileHeader.length === validHeader.length
+ && fileHeader.every((val, index) => val === validHeader[index]))) {
+ this.setState({
+ processingSummaryUserFile: `The file contains an invalid header ${fileHeader}. `
+ + `Please make sure that your file's header is organized as follows: ${validHeader}.`
+ });
return false;
}
@@ -372,7 +467,8 @@ export default class UserManagement extends React.Component {
this.newUsers.forEach((user) => {
const userType = user.data.type.trim();
if (!validTypes.includes(userType)) {
- invalidTypeMessage += `Row ${user.data.row}: The user's type "${userType}" is invalid. Please select a valid type from ${validTypes}.\n\n`;
+ invalidTypeMessage += `Row ${user.data.row}: The user's type "${userType}" is invalid. `
+ + `Please select a valid type from ${validTypes}.\n\n`;
}
});
if (!(invalidTypeMessage === '')) {
@@ -380,15 +476,18 @@ export default class UserManagement extends React.Component {
return false;
}
- const sortedUserEmails = this.newUsers.map(user => user.data.email).sort();
+ const sortedUserEmails = this.newUsers.map((user) => user.data.email).sort();
const duplicateUserEmails = new Set();
- for (let i = 0; i < sortedUserEmails.length - 1; i++) {
- if (sortedUserEmails[i + 1] == sortedUserEmails[i]) {
+ for (let i = 0; i < sortedUserEmails.length - 1; i += 1) {
+ if (sortedUserEmails[i + 1] === sortedUserEmails[i]) {
duplicateUserEmails.add(sortedUserEmails[i]);
}
}
if (duplicateUserEmails.size) {
- this.setState({ processingSummaryUserFile: `The file contains duplicate user emails: ${Array.from(duplicateUserEmails.values())}. Please make sure that each user has a unique email.` });
+ this.setState({
+ processingSummaryUserFile: 'The file contains duplicate user '
+ + `emails: ${Array.from(duplicateUserEmails.values())}. Please make sure that each user has a unique email.`
+ });
return false;
}
@@ -406,37 +505,30 @@ export default class UserManagement extends React.Component {
});
}
- handleUpdateUser(user) {
- if (!validateEmail(this.u_email.value.trim())) {
- this.setState({ messageEditUserModal: 'You have entered an invalid email address!' });
+ validateUserInput() {
+ if (this.email.value === '') { // also validated in backend
+ this.setState({ messageNewUserModal: 'Please input email.' });
return false;
- } else if (this.u_firstname.value.trim() === '' || this.u_lastname.value.trim() === '' || this.u_abbr.value.trim() === '') {
- this.setState({ messageEditUserModal: 'please input first name, last name and name abbreviation!' });
+ } if (!validateEmail(this.email.value.trim())) { // also validated in backend
+ this.setState({ messageNewUserModal: 'You have entered an invalid email address!' });
+ return false;
+ } if (this.password.value.trim() === '' || this.passwordConfirm.value.trim() === '') {
+ this.setState({ messageNewUserModal: 'Please input password with correct format.' });
+ return false;
+ } if (this.password.value.trim() !== this.passwordConfirm.value.trim()) {
+ this.setState({ messageNewUserModal: 'passwords do not mach!' });
+ return false;
+ } if (this.password.value.trim().length < 8) { // also validated in backend
+ this.setState({ messageNewUserModal: 'Password is too short (minimum is 8 characters)' });
+ return false;
+ } if (this.firstname.value.trim() === '' || this.lastname.value.trim() === ''
+ || this.nameAbbr.value.trim() === '') { // also validated in backend
+ this.setState({ messageNewUserModal: 'Please input First name, Last name and Name abbreviation' });
return false;
}
- AdminFetcher.updateUser({
- id: user.id,
- email: this.u_email.value.trim(),
- first_name: this.u_firstname.value.trim(),
- last_name: this.u_lastname.value.trim(),
- name_abbreviation: this.u_abbr.value.trim(),
- type: this.u_type.value
- })
- .then((result) => {
- if (result.error) {
- this.setState({ messageEditUserModal: result.error });
- return false;
- }
- this.setState({ showEditUserModal: false, messageEditUserModal: '' });
- this.u_email.value = '';
- this.u_firstname.value = '';
- this.u_lastname.value = '';
- this.u_abbr.value = '';
- this.handleFetchUsers();
- return true;
- });
return true;
}
+
messageSend() {
const { selectedUsers } = this.state;
if (this.myMessage.value === '') {
@@ -457,7 +549,7 @@ export default class UserManagement extends React.Component {
user_ids: userIds
};
MessagesFetcher.createMessage(params)
- .then((result) => {
+ .then(() => {
this.myMessage.value = '';
this.setState({
selectedUsers: null
@@ -586,7 +678,7 @@ export default class UserManagement extends React.Component {
Type:
- { this.type = ref; }} >
+ { this.type = ref; }}>
@@ -595,7 +687,7 @@ export default class UserManagement extends React.Component {
-
-
@@ -710,7 +807,12 @@ export default class UserManagement extends React.Component {
First name:
- { this.u_firstname = ref; }} />
+ { this.u_firstname = ref; }}
+ />
@@ -718,7 +820,12 @@ export default class UserManagement extends React.Component {
Last name:
- { this.u_lastname = ref; }} />
+ { this.u_lastname = ref; }}
+ />
@@ -726,7 +833,12 @@ export default class UserManagement extends React.Component {
Abbr (3):
- { this.u_abbr = ref; }} />
+ { this.u_abbr = ref; }}
+ />
@@ -734,7 +846,11 @@ export default class UserManagement extends React.Component {
Type:
- { this.u_type = ref; }} >
+ { this.u_type = ref; }}
+ >
@@ -744,17 +860,22 @@ export default class UserManagement extends React.Component {
-
+
-