Skip to content

Commit

Permalink
test in dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@KelvinTegelaar
KelvinTegelaar committed Apr 23, 2024
1 parent 66f17f5 commit 2910da6
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 57 deletions.
10 changes: 8 additions & 2 deletions src/components/forms/RFFComponents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,12 @@ export const RFFSelectSearch = ({
return (
<Field name={name} validate={validate}>
{({ meta, input }) => {
const handleChange = onChange
? (e) => {
input.onChange(e)
onChange(e)
}
: input.onChange
return (
<div>
<CFormLabel htmlFor={name}>
Expand Down Expand Up @@ -473,7 +479,7 @@ export const RFFSelectSearch = ({
options={selectSearchvalues}
placeholder={placeholder}
isMulti={multi}
onChange={onChange}
onChange={handleChange}
onInputChange={debounceOnInputChange}
inputValue={inputText}
isLoading={isLoading}
Expand Down Expand Up @@ -510,7 +516,7 @@ export const RFFSelectSearch = ({
options={selectSearchvalues}
placeholder={placeholder}
isMulti={multi}
onChange={onChange}
onChange={handleChange}
onInputChange={debounceOnInputChange}
inputValue={inputText}
isLoading={isLoading}
Expand Down
176 changes: 121 additions & 55 deletions src/views/cipp/app-settings/SettingsExtensionMappings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
CCardTitle,
CCol,
CForm,
CRow,
CSpinner,
} from '@coreui/react'
import { Form } from 'react-final-form'
Expand All @@ -17,6 +18,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
import React from 'react'
import { CippCallout } from 'src/components/layout/index.js'
import CippButtonCard from 'src/components/contentcards/CippButtonCard'

/**
* Retrieves and sets the extension mappings for HaloPSA and NinjaOne.
Expand Down Expand Up @@ -65,6 +67,59 @@ export function SettingsExtensionMappings() {
values: { mappings: values },
})
}

const [addedAttributes, setAddedAttribute] = React.useState(1)
const [mappingArray, setMappingArray] = React.useState({ HaloPSA: [], NinjaOrgs: [] })

const MappingRow = ({ integrationType, index, tenantData, clientData, addButton = true }) => (
<CRow>
<CCol xs="5">
<RFFSelectSearch
defaultValue={tenantData[0].customerId}
placeholder="Select a Tenant"
name={`tenant_${index}`}
values={tenantData?.map((tenant) => ({
name: tenant.displayName,
value: tenant.customerId,
}))}
//set the name of the other field, to the value of this field by using mappingArray, each time we add a new row, we add a new object to the array.
onChange={(e) => {
console.log(mappingArray[integrationType][index])
mappingArray[integrationType][index] = { tenant: e.value }
setMappingArray({ ...mappingArray })
//also complete the normal onChange event
}}
/>
</CCol>
<CCol xs="1" className="d-flex justify-content-center align-items-center">
<FontAwesomeIcon icon={'link'} size="xl" className="my-4" />
</CCol>
<CCol xs="5">
<RFFSelectSearch
name={
mappingArray[integrationType]?.[index]?.tenant
? mappingArray[integrationType]?.[index]?.tenant
: `client_${index}`
}
values={clientData?.map((client) => ({
name: client.name,
value: client.value,
}))}
placeholder="Select a HaloPSA Client"
/>
</CCol>
{addButton && (
<CButton
onClick={() => setAddedAttribute(addedAttributes + 1)}
className={`my-4 circular-button`}
title={'+'}
>
<FontAwesomeIcon icon={'plus'} />
</CButton>
)}
</CRow>
)

return (
<div>
{listBackendHaloResult.isUninitialized &&
Expand All @@ -74,61 +129,72 @@ export function SettingsExtensionMappings() {
{listBackendNinjaFieldsResult.isUninitialized &&
listNinjaFieldsBackend({ path: 'api/ExecExtensionMapping?List=NinjaFields' })}
<>
<CCard className="mb-3">
<CCardHeader>
<CCardTitle>HaloPSA Mapping Table</CCardTitle>
</CCardHeader>
<CCardBody>
{listBackendHaloResult.isFetching ? (
<CSpinner color="primary" />
) : (
<Form
onSubmit={onHaloSubmit}
initialValues={listBackendHaloResult.data?.Mappings}
render={({ handleSubmit, submitting, values }) => {
return (
<CForm onSubmit={handleSubmit}>
<CCardText>
Use the table below to map your client to the correct PSA client
{listBackendHaloResult.isSuccess &&
listBackendHaloResult.data.Tenants?.map((tenant) => (
<RFFSelectSearch
key={tenant.customerId}
name={tenant.customerId}
label={tenant.displayName}
values={listBackendHaloResult.data.HaloClients}
placeholder="Select a client"
/>
))}
</CCardText>
<CCol className="me-2">
<CButton className="me-2" type="submit">
{extensionHaloConfigResult.isFetching && (
<FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
)}
Set Mappings
</CButton>
{(extensionHaloConfigResult.isSuccess ||
extensionHaloConfigResult.isError) &&
!extensionHaloConfigResult.isFetching && (
<CippCallout
color={extensionHaloConfigResult.isSuccess ? 'success' : 'danger'}
dismissible
style={{ marginTop: '16px' }}
>
{extensionHaloConfigResult.isSuccess
? extensionHaloConfigResult.data.Results
: 'Error'}
</CippCallout>
)}
</CCol>
</CForm>
)
}}
/>
)}
</CCardBody>
</CCard>
<CippButtonCard
title={'HaloPSA Mapping'}
titleType="big"
isFetching={listHaloBackend.isFetching}
CardButton={
<CButton form="haloform" className="me-2" type="submit">
{extensionHaloConfigResult.isFetching && (
<FontAwesomeIcon icon={faCircleNotch} spin className="me-2" size="1x" />
)}
Set Mappings
</CButton>
}
>
{listBackendHaloResult.isFetching ? (
<CSpinner color="primary" />
) : (
<Form
onSubmit={onHaloSubmit}
initialValues={listBackendHaloResult.data?.Mappings}
render={({ handleSubmit, submitting, values }) => {
return (
<CForm id="haloform" onSubmit={handleSubmit}>
<CCardText>
Use the table below to map your client to the correct PSA client
{
//load all the existing mappings and show them first.
listBackendHaloResult.isSuccess &&
listBackendHaloResult.data.HaloClients.map((HaloClient, idx) =>
MappingRow({
integrationType: 'HaloPSA',
index: idx,
clientData: listBackendHaloResult.data.HaloClients,
tenantData: listBackendHaloResult.data.Tenants,
addButton: false,
}),
)
}
{[...Array(addedAttributes)].map((currentItem, idx) =>
MappingRow({
integrationType: 'HaloPSA',
index: 10000 + idx, //we add 10000 to the index to not conflict with the existing mappings
clientData: listBackendHaloResult.data.HaloClients,
tenantData: listBackendHaloResult.data.Tenants,
}),
)}
</CCardText>
<CCol className="me-2">
{(extensionHaloConfigResult.isSuccess || extensionHaloConfigResult.isError) &&
!extensionHaloConfigResult.isFetching && (
<CippCallout
color={extensionHaloConfigResult.isSuccess ? 'success' : 'danger'}
dismissible
style={{ marginTop: '16px' }}
>
{extensionHaloConfigResult.isSuccess
? extensionHaloConfigResult.data.Results
: 'Error'}
</CippCallout>
)}
</CCol>
</CForm>
)
}}
/>
)}
</CippButtonCard>
<CCard className="mb-3">
<CCardHeader>
<CCardTitle>NinjaOne Field Mapping Table</CCardTitle>
Expand Down

0 comments on commit 2910da6

Please sign in to comment.