authscape-usermanagement 1.0.24 → 1.0.26

package/index.js

@@ -239,8 +239,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function UserEditor(_ref) {
   var _ref$userId = _ref.userId,
     userId = _ref$userId === void 0 ? null : _ref$userId,
-    _ref$customFields = _ref.customFields,
-    customFields = _ref$customFields === void 0 ? null : _ref$customFields,
     _ref$onSaved = _ref.onSaved,
     onSaved = _ref$onSaved === void 0 ? null : _ref$onSaved,
     _ref$onPasswordChange = _ref.onPasswordChanged,
@@ -292,10 +290,14 @@ function UserEditor(_ref) {
     _useState20 = _slicedToArray(_useState19, 2),
     permissions = _useState20[0],
     setPermissions = _useState20[1];
-  var _useState21 = (0, _react.useState)(null),
+  var _useState21 = (0, _react.useState)([]),
     _useState22 = _slicedToArray(_useState21, 2),
-    user = _useState22[0],
-    setUser = _useState22[1];
+    customFields = _useState22[0],
+    setCustomFields = _useState22[1];
+  var _useState23 = (0, _react.useState)(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    user = _useState24[0],
+    setUser = _useState24[1];
   var ITEM_HEIGHT = 48;
   var ITEM_PADDING_TOP = 8;
   var MenuProps = {
@@ -306,18 +308,18 @@ function UserEditor(_ref) {
       }
     }
   };
-  var _useState23 = (0, _react.useState)(""),
-    _useState24 = _slicedToArray(_useState23, 2),
-    newPassword = _useState24[0],
-    setNewPassword = _useState24[1];
   var _useState25 = (0, _react.useState)(""),
     _useState26 = _slicedToArray(_useState25, 2),
-    confirmPassword = _useState26[0],
-    setConfirmPassword = _useState26[1];
-  var _useState27 = (0, _react.useState)(0),
+    newPassword = _useState26[0],
+    setNewPassword = _useState26[1];
+  var _useState27 = (0, _react.useState)(""),
     _useState28 = _slicedToArray(_useState27, 2),
-    tabValue = _useState28[0],
-    setTabValue = _useState28[1];
+    confirmPassword = _useState28[0],
+    setConfirmPassword = _useState28[1];
+  var _useState29 = (0, _react.useState)(0),
+    _useState30 = _slicedToArray(_useState29, 2),
+    tabValue = _useState30[0],
+    setTabValue = _useState30[1];
   var handleTabChange = function handleTabChange(event, newValue) {
     setTabValue(newValue);
   };
@@ -374,6 +376,9 @@ function UserEditor(_ref) {
                   if (response.data.location != null) {
                     setLocation(response.data.location);
                   }
+                  if (response.data.userCustomFields != null) {
+                    setCustomFields(response.data.userCustomFields);
+                  }
 
                   // assign all selected roles
                   if (response.data.roles != null) {
@@ -440,7 +445,7 @@ function UserEditor(_ref) {
         item: true,
         xs: 6
       }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
-        name: field.name,
+        name: field.customFieldId,
         control: control,
         rules: {
           required: field.isRequired
@@ -453,7 +458,7 @@ function UserEditor(_ref) {
             defaultValue: result,
             margin: "normal",
             fullWidth: true
-          }, register(field.name, {
+          }, register(field.customFieldId, {
             required: field.isRequired
           }), renderField));
         }
@@ -620,8 +625,11 @@ function UserEditor(_ref) {
               userCustomFields = [];
               customFields && customFields.forEach(function (customField) {
                 userCustomFields.push({
+                  customFieldId: customField.customFieldId,
                   name: customField.name,
-                  value: data[customField.name]
+                  isRequired: customField.isRequired,
+                  customFieldType: customField.customFieldType,
+                  value: data[customField.customFieldId]
                 });
               });
               _context5.next = 4;
@@ -1012,9 +1020,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // import { UserEditor } from './UserEditor'; // remove when done
 // import { CSVUsersUpload } from './CSVUsersUpload'; // remove when done
 function UserManagement(_ref) {
-  var _ref$customFields = _ref.customFields,
-    customFields = _ref$customFields === void 0 ? null : _ref$customFields,
-    _ref$height = _ref.height,
+  var _ref$height = _ref.height,
     height = _ref$height === void 0 ? "50vh" : _ref$height,
     _ref$onUploadComplete = _ref.onUploadCompleted,
     onUploadCompleted = _ref$onUploadComplete === void 0 ? null : _ref$onUploadComplete,
@@ -1202,14 +1208,12 @@ function UserManagement(_ref) {
     }
   }, /*#__PURE__*/_react["default"].createElement(UserEditor, {
     userId: showUserDetails,
-    customFields: customFields,
     onPasswordChanged: onPasswordChanged,
     onSaved: function onSaved() {
       setDataGridRefreshKey(dataGridRefreshKey + 1);
       setShowUserDetails(null);
     }
   }))))), /*#__PURE__*/_react["default"].createElement(CSVUsersUpload, {
-    customFields: customFields,
     showDialog: uploadUsersShowDialog,
     onClose: function onClose() {
       setUploadUsersShowDialog(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape-usermanagement",
-  "version": "1.0.24",
+  "version": "1.0.26",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/UserEditor.js

@@ -17,7 +17,7 @@ import { Tab, Tabs } from '@mui/material';
 import BusinessRoundedIcon from '@mui/icons-material/BusinessRounded';
 import { apiService } from 'authscape';
 
-export function UserEditor({userId = null, customFields = null, onSaved = null, onPasswordChanged = null}) {
+export function UserEditor({userId = null, onSaved = null, onPasswordChanged = null}) {
 
   const {control, register, handleSubmit, formState: { errors }, watch, setValue } = useForm();
 
@@ -35,6 +35,8 @@ export function UserEditor({userId = null, customFields = null, onSaved = null,
   const [roles, setRole] = useState([]);
   const [permissions, setPermissions] = useState([]);
 
+  const [customFields, setCustomFields] = useState([]);
+
   const [user, setUser] = useState(null);
 
   const ITEM_HEIGHT = 48;
@@ -100,6 +102,11 @@ export function UserEditor({userId = null, customFields = null, onSaved = null,
             setLocation(response.data.location);
           }
 
+          if (response.data.userCustomFields != null)
+          {
+            setCustomFields(response.data.userCustomFields);
+          }
+
           // assign all selected roles
           if (response.data.roles != null)
           {
@@ -189,7 +196,7 @@ export function UserEditor({userId = null, customFields = null, onSaved = null,
 
             return (
             <Grid item xs={6}>
-                <Controller name={field.name} 
+                <Controller name={field.customFieldId} 
                     control={control}
                     rules={{
                         required: field.isRequired,
@@ -201,7 +208,7 @@ export function UserEditor({userId = null, customFields = null, onSaved = null,
                         defaultValue={result}
                         margin="normal"
                         fullWidth
-                        {...register(field.name, { required: field.isRequired })}
+                        {...register(field.customFieldId, { required: field.isRequired })}
                         {...renderField}
                     />
                     }
@@ -353,8 +360,11 @@ export function UserEditor({userId = null, customFields = null, onSaved = null,
             customFields && customFields.forEach(customField => {
 
                 userCustomFields.push({
+                    customFieldId: customField.customFieldId,
                     name: customField.name,
-                    value: data[customField.name] 
+                    isRequired: customField.isRequired,
+                    customFieldType: customField.customFieldType,
+                    value: data[customField.customFieldId] 
                 });
             });
 

package/src/UserManagement.js

@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState, useRef} from 'react';
 import { Box } from '@mui/system';
-import { Avatar, Button, Drawer, Grid } from '@mui/material';
+import { Avatar, Button, Drawer, Grid, Stack, TextField, Typography } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import UploadRoundedIcon from '@mui/icons-material/UploadRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
@@ -8,7 +8,7 @@ import { EditableDatagrid, FileUploader, AutoSaveTextField, apiService } from 'a
 // import { UserEditor } from './UserEditor'; // remove when done
 // import { CSVUsersUpload } from './CSVUsersUpload'; // remove when done
 
-export default function UserManagement({customFields = null, height = "50vh", onUploadCompleted = null, onPasswordChanged = null}) {
+export default function UserManagement({height = "50vh", onUploadCompleted = null, onPasswordChanged = null}) {
 
     const [showUserDetails, setShowUserDetails] = useState(null);
 
@@ -151,7 +151,6 @@ export default function UserManagement({customFields = null, height = "50vh", on
 
                             <UserEditor 
                                 userId={showUserDetails}
-                                customFields={customFields}
                                 onPasswordChanged={onPasswordChanged}
                                 onSaved={() => {
 
@@ -168,7 +167,7 @@ export default function UserManagement({customFields = null, height = "50vh", on
                 </Drawer>
             </Box>
 
-            <CSVUsersUpload customFields={customFields} showDialog={uploadUsersShowDialog} onClose={() => {
+            <CSVUsersUpload showDialog={uploadUsersShowDialog} onClose={() => {
                 setUploadUsersShowDialog(false);
             }} />