fix(admin-ui): fix pagination and users page

GluuFederation · Dec 23, 2022 · 0516f3b · 0516f3b
1 parent 4c36576
commit 0516f3b
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 62 deletions.
diff --git a/admin-ui/app/routes/Apps/Gluu/GluuInputRow.js b/admin-ui/app/routes/Apps/Gluu/GluuInputRow.js
@@ -14,6 +14,8 @@ function GluuInputRow({
   rsize,
   doc_category,
   disabled,
+  showError = false,
+  errorMessage = ''
 }) {
   const [customType, setCustomType] = useState(null)
 
@@ -47,6 +49,7 @@ function GluuInputRow({
               )}
             </div>
           )}
+          {showError ? <div style={{color:"red"}}>{errorMessage}</div> : null }
         </Col>
       </FormGroup>
     </GluuTooltip>

diff --git a/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js b/admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js
@@ -191,7 +191,7 @@ function ScriptListTable() {
   const onPageChangeClick = (page) => {
     makeOptions()
     let startCount = page * limit
-    options['startIndex'] = parseInt(startCount) + 1
+    options['startIndex'] = parseInt(startCount)
     options['limit'] = limit
     setPageNumber(page)
     dispatch(getCustomScriptByType(options))

diff --git a/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js b/admin-ui/plugins/auth-server/components/Clients/ClientListPage.js
@@ -325,7 +325,7 @@ function ClientListPage() {
   const onPageChangeClick = (page) => {
     makeOptions()
     let startCount = page * limit
-    options['startIndex'] = parseInt(startCount) + 1
+    options['startIndex'] = parseInt(startCount)
     options['limit'] = limit
     setPageNumber(page)
     console.log(options)

diff --git a/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js b/admin-ui/plugins/auth-server/components/Scopes/ScopeListPage.js
@@ -220,7 +220,7 @@ function ScopeListPage() {
   const onPageChangeClick = (page) => {
     makeOptions()
     let startCount = page * limit
-    options['startIndex'] = parseInt(startCount) + 1
+    options['startIndex'] = parseInt(startCount)
     options['limit'] = limit
     setPageNumber(page)
     dispatch(getScopes(options))

diff --git a/admin-ui/plugins/schema/components/Person/AttributeListPage.js b/admin-ui/plugins/schema/components/Person/AttributeListPage.js
@@ -74,7 +74,7 @@ function AttributeListPage() {
   const onPageChangeClick = (page) => {
     makeOptions()
     let startCount = page * limit
-    options['startIndex'] = parseInt(startCount) + 1
+    options['startIndex'] = parseInt(startCount)
     options['limit'] = limit
     setPageNumber(page)
     dispatch(getAttributes(options))

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserAddPage.js
@@ -81,15 +81,7 @@ function UserAddPage() {
       navigate('/user/usersmanagement')
     }
   }, [redirectToUserListPage])
-  const formik = useFormik({
-    initialValues: {},
-    onSubmit: (values) => {
-      submitData(values)
-    },
-    setFieldValue: (field) => {
-      delete values[field]
-    },
-  })
+
   return (
     <React.Fragment>
       <GluuAlert
@@ -100,7 +92,7 @@ function UserAddPage() {
       <Container>
         <Card className="mb-3">
           <CardBody>
-            <UserForm formik={formik} />
+            <UserForm onSubmitData={submitData} />
           </CardBody>
         </Card>
       </Container>

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserEditPage.js b/admin-ui/plugins/user-management/components/UserManagement/UserEditPage.js
@@ -9,6 +9,7 @@ import { updateUser } from '../../redux/actions/UserActions'
 import { useDispatch, useSelector } from 'react-redux'
 import moment from 'moment'
 import { getPersistenceType } from '../../../services/redux/actions/PersistenceActions'
+import * as Yup from 'yup'
 
 function UserEditPage() {
   const dispatch = useDispatch()
@@ -109,43 +110,8 @@ function UserEditPage() {
 
     dispatch(updateUser(submitableValues))
   }
-
-  const initialValues = {
-    displayName: userDetails.displayName,
-    givenName: userDetails.givenName,
-    mail: userDetails.mail,
-    userId: userDetails.userId,
-    jansStatus: userDetails.jansStatus || '',
-  }
-  for (let i in userDetails.customAttributes) {
-    if (userDetails.customAttributes[i].values) {
-      let customAttribute = personAttributes.filter(
-        (e) => e.name == userDetails.customAttributes[i].name,
-      )
-      if (userDetails.customAttributes[i].name == 'birthdate') {
-        initialValues[userDetails.customAttributes[i].name] = moment(
-          userDetails.customAttributes[i].values[0],
-        ).format('YYYY-MM-DD')
-      } else {
-        if (customAttribute[0]?.oxMultiValuedAttribute) {
-          initialValues[userDetails.customAttributes[i].name] =
-            userDetails.customAttributes[i].values
-        } else {
-          initialValues[userDetails.customAttributes[i].name] =
-            userDetails.customAttributes[i].values[0]
-        }
-      }
-    }
-  }
-  const formik = useFormik({
-    initialValues: initialValues,
-    onSubmit: (values) => {
-      submitData(values)
-    },
-    setFieldValue: (field) => {
-      delete values[field]
-    },
-  })
+
+
   return (
     <React.Fragment>
       <GluuAlert
@@ -156,7 +122,7 @@ function UserEditPage() {
       <Container>
         <Card className="mb-3">
           <CardBody>
-            <UserForm formik={formik} />
+            <UserForm onSubmitData={submitData} />
           </CardBody>
         </Card>
       </Container>

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserForm.js b/admin-ui/plugins/user-management/components/UserManagement/UserForm.js
@@ -11,8 +11,9 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import { changeUserPassword } from '../../redux/actions/UserActions'
 import { ThemeContext } from 'Context/theme/themeContext'
 import { getAttributesRoot } from '../../../../app/redux/actions'
-
-function UserForm({ formik }) {
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+function UserForm({onSubmitData}) {
   const dispatch = useDispatch()
   const { t } = useTranslation()
   const DOC_SECTION = 'user'
@@ -22,9 +23,65 @@ function UserForm({ formik }) {
   const [showButtons, setShowButtons] = useState(false)
   const [modal, setModal] = useState(false)
   const [changePasswordModal, setChangePasswordModal] = useState(false)
+  const userDetails = useSelector((state) => state.userReducer.selectedUserData)
+  const personAttributes = useSelector((state) => state.attributesReducerRoot.items)
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
   let options = {}
+
+  const initialValues = {
+    displayName: userDetails?.displayName || '',
+    givenName: userDetails?.givenName || '',
+    mail: userDetails?.mail || '',
+    userId: userDetails?.userId || '',
+    sn:'',
+    middleName:'',
+    jansStatus: userDetails?.jansStatus || '',
+  }
+
+  if(userDetails){
+    for (let i in userDetails.customAttributes) {
+      if (userDetails.customAttributes[i].values) {
+        let customAttribute = personAttributes.filter(
+          (e) => e.name == userDetails.customAttributes[i].name,
+        )
+        if (userDetails.customAttributes[i].name == 'birthdate') {
+          initialValues[userDetails.customAttributes[i].name] = moment(
+            userDetails.customAttributes[i].values[0],
+          ).format('YYYY-MM-DD')
+        } else {
+          if (customAttribute[0]?.oxMultiValuedAttribute) {
+            initialValues[userDetails.customAttributes[i].name] =
+              userDetails.customAttributes[i].values
+          } else {
+            initialValues[userDetails.customAttributes[i].name] =
+              userDetails.customAttributes[i].values[0]
+          }
+        }
+      }
+    }
+  }
+
+  const formik = useFormik({
+    initialValues: initialValues,
+    onSubmit: (values) => {
+      toggle()
+    },
+    validationSchema: Yup.object(
+      {
+        displayName:Yup.string().required('Display name is required.'),
+        givenName:Yup.string().required('First name is required.'),
+        middleName:Yup.string().required('Middle name is required.'),
+        sn:Yup.string().required('Last name is required.'),
+        userId:Yup.string().required('User name is required.'),
+        mail:Yup.string().required('Email is required.'),
+      }
+    ),
+    setFieldValue: (field) => {
+      delete values[field]
+    },
+  })
+
   const toggle = () => {
     setModal(!modal)
   }
@@ -56,11 +113,8 @@ function UserForm({ formik }) {
 
   const submitForm = () => {
     toggle()
-    formik.handleSubmit()
+    onSubmitData(formik.values)
   }
-
-  const userDetails = useSelector((state) => state.userReducer.selectedUserData)
-  const personAttributes = useSelector((state) => state.attributesReducerRoot.items)
   const loading = useSelector((state) => state.userReducer.loading)
   const setSelectedClaimsToState = (data) => {
     const tempList = [...selectedClaims]
@@ -151,6 +205,7 @@ function UserForm({ formik }) {
     formik.setFieldValue('userConfirmPassword')
     setShowButtons(true)
   }
+
 
   return (
     <GluuLoader blocking={loading}>
@@ -214,7 +269,7 @@ function UserForm({ formik }) {
       <Form
         onSubmit={(e) => {
           e.preventDefault()
-          toggle()
+          formik.handleSubmit()
         }}
       >
         <FormGroup row>
@@ -239,8 +294,9 @@ function UserForm({ formik }) {
               formik={formik}
               lsize={3}
               rsize={9}
+              showError={formik.errors.givenName && formik.touched.givenName}
+              errorMessage={formik.errors.givenName}
             />
-
             <GluuInputRow
               doc_category={DOC_SECTION}
               label="Middle Name"
@@ -249,6 +305,8 @@ function UserForm({ formik }) {
               formik={formik}
               lsize={3}
               rsize={9}
+              showError={formik.errors.middleName && formik.touched.middleName}
+              errorMessage={formik.errors.middleName}
             />
 
             <GluuInputRow
@@ -259,16 +317,19 @@ function UserForm({ formik }) {
               formik={formik}
               lsize={3}
               rsize={9}
+              showError={formik.errors.sn && formik.touched.sn}
+              errorMessage={formik.errors.sn}
             />
             <GluuInputRow
               doc_category={DOC_SECTION}
               label="User Name"
               name="userId"
               value={formik.values.userId || ''}
               formik={formik}
-              required
               lsize={3}
               rsize={9}
+              showError={formik.errors.userId && formik.touched.userId}
+              errorMessage={formik.errors.userId}
             />
             <GluuInputRow
               doc_category={DOC_SECTION}
@@ -278,6 +339,8 @@ function UserForm({ formik }) {
               formik={formik}
               lsize={3}
               rsize={9}
+              showError={formik.errors.displayName && formik.touched.displayName}
+              errorMessage={formik.errors.displayName}
             />
             <GluuInputRow
               doc_category={DOC_SECTION}
@@ -288,6 +351,8 @@ function UserForm({ formik }) {
               formik={formik}
               lsize={3}
               rsize={9}
+              showError={formik.errors.mail && formik.touched.mail}
+              errorMessage={formik.errors.mail}
             />
 
             <GluuSelectRow

diff --git a/admin-ui/plugins/user-management/components/UserManagement/UserList.js b/admin-ui/plugins/user-management/components/UserManagement/UserList.js
@@ -162,7 +162,7 @@ function UserList(props) {
 
   const onPageChangeClick = (page) => {
     let startCount = page * limit
-    options['startIndex'] = parseInt(startCount) + 1
+    options['startIndex'] = parseInt(startCount)
     options['limit'] = limit
     options['pattern'] = pattern
     setPageNumber(page)