diff --git a/src/importsMap.jsx b/src/importsMap.jsx index e6a8a422c777..8325207e191e 100644 --- a/src/importsMap.jsx +++ b/src/importsMap.jsx @@ -118,7 +118,7 @@ import React from 'react' "/email/administration/add-contact": React.lazy(() => import('./views/email-exchange/administration/AddContact')), "/email/administration/edit-calendar-permissions": React.lazy(() => import('./views/email-exchange/administration/EditCalendarPermissions')), "/email/administration/view-mobile-devices": React.lazy(() => import('./views/email-exchange/administration/ViewMobileDevices')), - "/email/administration/edit-contact": React.lazy(() => import('./views/email-exchange/administration/EditContact')), + "/email/administration/edit-contact": React.lazy(() => import('./views/email-exchange/administration/EditContact.jsx')), "/email/administration/mailboxes": React.lazy(() => import('./views/email-exchange/administration/MailboxesList')), "/email/administration/deleted-mailboxes": React.lazy(() => import('./views/email-exchange/administration/DeletedMailboxes')), "/email/administration/mailbox-rules": React.lazy(() => import('./views/email-exchange/administration/MailboxRuleList')), diff --git a/src/store/api/users.js b/src/store/api/users.js index 8dc443ce1dc1..7ef16f12fdb3 100644 --- a/src/store/api/users.js +++ b/src/store/api/users.js @@ -18,10 +18,11 @@ export const usersApi = baseApi.injectEndpoints({ }), }), listContacts: builder.query({ - query: ({ tenantDomain }) => ({ + query: ({ tenantDomain, ContactID }) => ({ path: '/api/ListContacts', params: { TenantFilter: tenantDomain, + ContactID, }, }), }), diff --git a/src/views/email-exchange/administration/ContactsList.jsx b/src/views/email-exchange/administration/ContactsList.jsx index f0709de26be3..0ea00b6f74aa 100644 --- a/src/views/email-exchange/administration/ContactsList.jsx +++ b/src/views/email-exchange/administration/ContactsList.jsx @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux' import { CButton } from '@coreui/react' import { CippPageList } from 'src/components/layout' import { CellTip, cellBooleanFormatter } from 'src/components/tables' +import { Link, useSearchParams } from 'react-router-dom' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faEdit, faEllipsisV } from '@fortawesome/free-solid-svg-icons' import { TitleButton } from 'src/components/buttons' @@ -11,16 +12,16 @@ import { CippActionsOffcanvas } from 'src/components/utilities' const Actions = (row, rowIndex, formatExtraData) => { const tenant = useSelector((state) => state.app.currentTenant) const [ocVisible, setOCVisible] = useState(false) + const editLink = row?.tenant + ? `/email/administration/edit-contact?ContactID=${row.id}&tenantDomain=${row.Tenant}` + : `/email/administration/edit-contact?ContactID=${row.id}&tenantDomain=${tenant.defaultDomainName}` return ( <> - - - - + + + + + setOCVisible(true)}> diff --git a/src/views/email-exchange/administration/EditContact.jsx b/src/views/email-exchange/administration/EditContact.jsx index 00cd06b2f933..460d40d98fda 100644 --- a/src/views/email-exchange/administration/EditContact.jsx +++ b/src/views/email-exchange/administration/EditContact.jsx @@ -1,11 +1,294 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' +import { CButton, CCallout, CCol, CForm, CRow, CSpinner } from '@coreui/react' +import useQuery from 'src/hooks/useQuery' +import { useDispatch, useSelector } from 'react-redux' +import { Form } from 'react-final-form' +import { RFFCFormInput } from 'src/components/forms' +import { useListContactsQuery } from 'src/store/api/users' +import { CippCodeBlock, ModalService } from 'src/components/utilities' +import { useLazyGenericPostRequestQuery } from 'src/store/api/app' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faCircleNotch, faEdit, faEye } from '@fortawesome/free-solid-svg-icons' +import { CippContentCard, CippPage } from 'src/components/layout' -const EditContact = (props) => { +const EditContact = () => { + const dispatch = useDispatch() + let query = useQuery() + const ContactID = query.get('ContactID') + const tenantDomain = query.get('tenantDomain') + + const [queryError, setQueryError] = useState(false) + + const { + data: Contact = [], + isFetching: ContactIsFetching, + error: ContactError, + } = useListContactsQuery({ tenantDomain, ContactID }) + + useEffect(() => { + if (!ContactID || !tenantDomain) { + ModalService.open({ + body: 'Error invalid request, could not load requested contact.', + title: 'Invalid Request', + }) + setQueryError(true) + } else { + setQueryError(false) + } + }, [ContactID, tenantDomain, dispatch]) + const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery() + const onSubmit = (values) => { + if (values.defaultAttributes) { + //map default attributes to the addedAttributes array. If addedAttributes is not present, create it. + values.addedAttributes = values.addedAttributes ? values.addedAttributes : [] + Object.keys(values.defaultAttributes).forEach((key) => { + values.addedAttributes.push({ Key: key, Value: values.defaultAttributes[key].Value }) + }) + } + const shippedValues = { + BusinessPhone: values.businessPhones, + City: values.city, + CompanyName: values.companyName, + Country: values.country, + mail: values.mail, + DisplayName: values.displayName, + firstName: values.givenName, + Jobtitle: values.jobTitle, + LastName: values.surname, + MobilePhone: values.mobilePhone, + PostalCode: values.postalCode, + ContactID: ContactID, + streetAddress: values.streetAddress, + tenantID: tenantDomain, + } + // window.alert(JSON.stringify(shippedValues)) + genericPostRequest({ path: '/api/EditContact', values: shippedValues }) + } + const [addedAttributes, setAddedAttribute] = React.useState(0) + const currentSettings = useSelector((state) => state.app) + + // Extract the first contact from the array + const contactData = Contact.length > 0 ? Contact[0] : {} + + // Extract address and phone details + const address = + contactData.addresses && contactData.addresses.length > 0 ? contactData.addresses[0] : {} + const mobilePhone = contactData.phones + ? contactData.phones.find((phone) => phone.type === 'mobile') + : {} + const businessPhones = contactData.phones + ? contactData.phones + .filter((phone) => phone.type === 'business') + .map((phone) => phone.number) + .join(', ') + : '' + + const initialState = { + ...contactData, + streetAddress: address.street || '', + postalCode: address.postalCode || '', + city: address.city || '', + country: address.countryOrRegion || '', + mobilePhone: mobilePhone ? mobilePhone.number : '', + businessPhones: businessPhones || '', + } + + const formDisabled = + queryError === true || !!ContactError || !Contact || Object.keys(contactData).length === 0 + const RawUser = JSON.stringify(contactData, null, 2) return ( -
-

Edit Contact

- future release. -
+ + {!queryError && ( + <> + {postResults.isSuccess && ( + {postResults.data?.Results} + )} + {queryError && ( + + + + {/* @todo add more descriptive help message here */} + Failed to load contact + + + + )} + + + + {ContactIsFetching && } + {ContactError && Error loading user} + {!ContactIsFetching && ( +
{ + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Edit Contact + {postResults.isFetching && ( + + )} + + + + {postResults.isSuccess && ( + + {Array.isArray(postResults.data.Results) ? ( + postResults.data.Results.map((message, idx) => ( +
  • {message}
    • + )) + ) : ( + {postResults.data.Results} + )} +     + )} +     + ) + }} + /> + )} + + + + + {ContactIsFetching && } + {ContactError && Error loading user} + {!ContactIsFetching && ( + <> + This is the (raw) information for this contact. + + + )} + + + + + )} + ) }