farmcontrol-ui/src/components/Dashboard/Management/Users/UserInfo.jsx

import { useRef, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Card, Flex, Space, Spin } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import useCollapseState from '../../hooks/useCollapseState'
import NotesPanel from '../../common/NotesPanel'
import InfoCollapse from '../../common/InfoCollapse'
import ObjectInfo from '../../common/ObjectInfo'
import ViewButton from '../../common/ViewButton'
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
import NoteIcon from '../../../Icons/NoteIcon.jsx'
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
import AppPasswordIcon from '../../../Icons/AppPasswordIcon.jsx'
import ObjectForm from '../../common/ObjectForm'
import EditButtons from '../../common/EditButtons'
import ObjectTableNavigationButtons from '../../common/ObjectTableNavigationButtons.jsx'
import ActivityIndicator from '../../common/ActivityIndicator.jsx'
import ActionHandler from '../../common/ActionHandler'
import ObjectActions from '../../common/ObjectActions.jsx'
import ObjectTable from '../../common/ObjectTable.jsx'
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
import UserNotifierToggle from '../../common/UserNotifierToggle.jsx'
import ScrollBox from '../../common/ScrollBox.jsx'
import ObjectProperty from '../../common/ObjectProperty.jsx'
import {
  getModelProperty,
  getModelByName
} from '../../../../database/ObjectModels.js'
import { useMediaQuery } from 'react-responsive'
import PersonIcon from '../../../Icons/PersonIcon.jsx'

const UserInfo = () => {
  const location = useLocation()
  const objectFormRef = useRef(null)
  const appPasswordsTableRef = useRef(null)
  const actionHandlerRef = useRef(null)
  const userId = new URLSearchParams(location.search).get('userId')
  const [collapseState, updateCollapseState] = useCollapseState('UserInfo', {
    info: true,
    appPasswords: true,
    notes: true,
    auditLogs: false
  })
  const [objectFormState, setEditFormState] = useState({
    isEditing: false,
    editLoading: false,
    formValid: false,
    lock: null,
    loading: false,
    editDisabled: false,
    objectData: {}
  })
  const isMobile = useMediaQuery({ maxWidth: 768 })

  const actions = {
    edit: () => {
      objectFormRef?.current?.startEditing?.()
      return false
    },
    cancelEdit: () => {
      objectFormRef?.current?.cancelEditing?.()
      return true
    },
    finishEdit: () => {
      objectFormRef?.current?.handleUpdate?.()
      return true
    }
  }

  return (
    <Flex
      gap='large'
      vertical='true'
      style={{ maxHeight: '100%', minHeight: 0 }}
    >
      <Flex justify={'space-between'}>
        <Space size='small'>
          <Space size='small'>
            <ObjectActions
              type='user'
              pageName='info'
              id={userId}
              disabled={objectFormState.loading}
              objectData={objectFormState.objectData}
            />
            <ViewButton
              disabled={objectFormState.loading}
              items={[
                { key: 'info', label: 'User Information' },
                { key: 'appPasswords', label: 'App Passwords' },
                { key: 'notes', label: 'Notes' },
                { key: 'auditLogs', label: 'Audit Logs' }
              ]}
              visibleState={collapseState}
              updateVisibleState={updateCollapseState}
            />
            <UserNotifierToggle
              type='user'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
            <DocumentPrintButton
              type='user'
              objectData={objectFormState.objectData}
              disabled={objectFormState.loading}
            />
          </Space>
          <ActivityIndicator
            activities={objectFormState.activities}
            showStartingDivider={true}
          />
        </Space>
        <Space>
          <EditButtons
            isEditing={objectFormState.isEditing}
            handleUpdate={() => {
              actionHandlerRef.current.callAction('finishEdit')
            }}
            cancelEditing={() => {
              actionHandlerRef.current.callAction('cancelEdit')
            }}
            startEditing={() => {
              actionHandlerRef.current.callAction('edit')
            }}
            editLoading={objectFormState.editLoading}
            formValid={objectFormState.formValid}
            disabled={
              objectFormState.beingEditedByOther ||
              objectFormState.loading ||
              objectFormState.editDisabled
            }
            loading={objectFormState.editLoading}
          />
          <ObjectTableNavigationButtons
            disabled={objectFormState.loading || objectFormState.isEditing}
            _id={userId}
            objectType='user'
            showEndingDivider={true}
          />
        </Space>
      </Flex>
      <ScrollBox>
        <Flex vertical gap={'large'}>
          <ActionHandler
            actions={actions}
            loading={objectFormState.loading}
            ref={actionHandlerRef}
          >
            <InfoCollapse
              title='User Information'
              icon={<InfoCircleIcon />}
              active={collapseState.info}
              onToggle={(expanded) => updateCollapseState('info', expanded)}
              collapseKey='info'
            >
              <ObjectForm
                id={userId}
                type='user'
                style={{ height: '100%' }}
                ref={objectFormRef}
                setCurrentObject={true}
                onStateChange={(state) => {
                  setEditFormState((prev) => ({ ...prev, ...state }))
                }}
              >
                {({ loading, isEditing, objectData }) => (
                  <Flex gap='large' vertical={isMobile}>
                    <div
                      style={
                        isMobile
                          ? { width: '100%' }
                          : { width: '20%', maxWidth: '238px' }
                      }
                    >
                      <Card styles={{ body: { padding: 18 } }}>
                        <ObjectProperty
                          {...getModelProperty('user', 'profileImage')}
                          isEditing={isEditing}
                          objectData={objectData}
                          loading={loading}
                        />
                      </Card>
                    </div>
                    <ObjectInfo
                      loading={loading}
                      indicator={<LoadingOutlined />}
                      isEditing={isEditing}
                      type='user'
                      objectData={objectData}
                      labelWidth='190px'
                      visibleProperties={{
                        profileImage: false,
                        permissions: false
                      }}
                    />
                  </Flex>
                )}
              </ObjectForm>
            </InfoCollapse>
          </ActionHandler>
          <InfoCollapse
            title='Permissions Matrix'
            icon={<PersonIcon />}
            active={collapseState.permissions}
            onToggle={(expanded) =>
              updateCollapseState('permissions', expanded)
            }
            collapseKey='permissions'
          >
            <Spin
              spinning={objectFormState.loading}
              indicator={<LoadingOutlined />}
            >
              <Card>
                <ObjectProperty
                  {...getModelProperty('user', 'permissions')}
                  isEditing={objectFormState.isEditing}
                  objectData={objectFormState.objectData}
                  loading={objectFormState.loading}
                />
              </Card>
            </Spin>
          </InfoCollapse>
          <InfoCollapse
            title='App Passwords'
            icon={<AppPasswordIcon />}
            active={collapseState.appPasswords}
            onToggle={(expanded) =>
              updateCollapseState('appPasswords', expanded)
            }
            collapseKey='appPasswords'
          >
            {!userId ? (
              <InfoCollapsePlaceholder />
            ) : (
              <ObjectTable
                type='appPassword'
                masterFilter={{
                  user: getModelByName('user').prefix + ':' + userId
                }}
                visibleColumns={{ user: false }}
                ref={appPasswordsTableRef}
              />
            )}
          </InfoCollapse>
          <InfoCollapse
            title='Notes'
            icon={<NoteIcon />}
            active={collapseState.notes}
            onToggle={(expanded) => updateCollapseState('notes', expanded)}
            collapseKey='notes'
          >
            <Card>
              <NotesPanel _id={userId} type='user' />
            </Card>
          </InfoCollapse>
          <InfoCollapse
            title='Audit Logs'
            icon={<AuditLogIcon />}
            active={collapseState.auditLogs}
            onToggle={(expanded) => updateCollapseState('auditLogs', expanded)}
            collapseKey='auditLogs'
          >
            {objectFormState.loading ? (
              <InfoCollapsePlaceholder />
            ) : (
              <ObjectTable
                type='auditLog'
                masterFilter={{
                  parent: getModelByName('user').prefix + ':' + userId
                }}
                visibleColumns={{ _id: false, parent: false }}
              />
            )}
          </InfoCollapse>
        </Flex>
      </ScrollBox>
    </Flex>
  )
}

export default UserInfo