Skip to content

Commit

Permalink
UPDATE: to use aksel components
Browse files Browse the repository at this point in the history
  • Loading branch information
@JeremiahUy
JeremiahUy committed Nov 22, 2024
1 parent 945b7c0 commit b171268
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 122 deletions.
186 changes: 86 additions & 100 deletions apps/frontend/src/components/Process/Accordion/AccordionProcess.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { faExclamationCircle, faGavel, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Panel, StatelessAccordion } from 'baseui/accordion'
import { Accordion } from '@navikt/ds-react'
import { Plus } from 'baseui/icon'
import { Modal, ModalBody, SIZE } from 'baseui/modal'
import { Spinner } from 'baseui/spinner'
Expand Down Expand Up @@ -176,12 +176,7 @@ const AccordionProcess = (props: TAccordionProcessProps) => {

return (
<div>
<StatelessAccordion
onChange={({ expanded }) =>
onChangeProcess(expanded.length ? (expanded[0] as string) : undefined)
}
expanded={params.processId ? [params.processId] : []}
>
<Accordion>
{processList &&
processList
.sort((a, b) => {
Expand All @@ -197,114 +192,105 @@ const AccordionProcess = (props: TAccordionProcessProps) => {
const expanded = params.processId === process.id

return (
<Panel
title={
<Accordion.Item
key={process.id}
open={expanded}
onOpenChange={(open) => {
onChangeProcess(open ? process.id : undefined)
}}
>
<Accordion.Header>
<AccordionTitle
codelistUtils={codelistUtils}
process={process}
expanded={expanded}
forwardRef={expanded ? purposeRef : undefined}
noChevron
/>
}
key={process.id}
overrides={{
ToggleIcon: {
component: () => null,
},
Content: {
style: {
backgroundColor: theme.colors.white,
// Outline width
paddingTop: '4px',
paddingBottom: '4px',
paddingLeft: '4px',
paddingRight: '4px',
},
},
}}
>
{isLoading && (
<div className="p-2.5">
<Spinner $size={theme.sizing.scale1200} />
</div>
)}
</Accordion.Header>
<Accordion.Content>
{expanded && isLoading && (
<div className="p-2.5">
<Spinner $size={theme.sizing.scale1200} />
</div>
)}

{!isLoading && currentProcess && (
<div className="outline outline-4 outline-[#E2E2E2]">
<div className="px-6 pt-6">
<ProcessButtonGroup
process={process}
hasAccess={hasAccess()}
editProcess={() => setShowEditProcessModal(true)}
deleteProcess={() => setShowDeleteModal(true)}
/>
<ProcessData
process={currentProcess}
disclosures={disclosures}
codelistUtils={codelistUtils}
/>
<div>
<div className="flex justify-end">
<span>
<i>{`Sist endret av ${currentProcess.changeStamp.lastModifiedBy}, ${lastModifiedDate(currentProcess.changeStamp?.lastModifiedDate)}`}</i>
</span>
{expanded && !isLoading && currentProcess && (
<div className="outline outline-4 outline-[#E2E2E2]">
<div className="px-6 pt-6">
<ProcessButtonGroup
process={process}
hasAccess={hasAccess()}
editProcess={() => setShowEditProcessModal(true)}
deleteProcess={() => setShowDeleteModal(true)}
/>
<ProcessData
process={currentProcess}
disclosures={disclosures}
codelistUtils={codelistUtils}
/>
<div>
<div className="flex justify-end">
<span>
<i>{`Sist endret av ${currentProcess.changeStamp.lastModifiedBy}, ${lastModifiedDate(currentProcess.changeStamp?.lastModifiedDate)}`}</i>
</span>
</div>
</div>
</div>
<div className="flex pt-6 w-full justify-between">
<div className="flex">
{canViewAlerts() && (
<div className="mr-auto">
<Button
type="button"
kind="tertiary"
size="xsmall"
icon={faExclamationCircle}
onClick={() => history(`/alert/events/process/${process.id}`)}
>
Varsler
</Button>
</div>
)}
{(user.isAdmin() || user.isSuper()) && (
<div className="mr-auto">
<Button
type="button"
kind="tertiary"
size="xsmall"
icon={faGavel}
onClick={() => setShowRevisionModal(true)}
>
Ny revidering
</Button>
<div className="flex pt-6 w-full justify-between">
<div className="flex">
{canViewAlerts() && (
<div className="mr-auto">
<Button
type="button"
kind="tertiary"
size="xsmall"
icon={faExclamationCircle}
onClick={() => history(`/alert/events/process/${process.id}`)}
>
Varsler
</Button>
</div>
)}
{(user.isAdmin() || user.isSuper()) && (
<div className="mr-auto">
<Button
type="button"
kind="tertiary"
size="xsmall"
icon={faGavel}
onClick={() => setShowRevisionModal(true)}
>
Ny revidering
</Button>
</div>
)}
</div>
{hasAccess() && (
<div className="flex justify-center">
<div ref={InformationTypeRef} />
{renderAddDocumentButton()}
{renderCreatePolicyButton()}
{renderDeleteAllPolicyButton()}
</div>
)}
</div>
{hasAccess() && (
<div className="flex justify-center">
<div ref={InformationTypeRef} />
{renderAddDocumentButton()}
{renderCreatePolicyButton()}
{renderDeleteAllPolicyButton()}
</div>
)}
</div>
<TablePolicy
codelistUtils={codelistUtils}
process={currentProcess}
hasAccess={hasAccess()}
errorPolicyModal={errorPolicyModal}
errorDeleteModal={errorPolicyModal}
submitEditPolicy={submitEditPolicy}
submitDeletePolicy={submitDeletePolicy}
/>
</div>

<TablePolicy
codelistUtils={codelistUtils}
process={currentProcess}
hasAccess={hasAccess()}
errorPolicyModal={errorPolicyModal}
errorDeleteModal={errorPolicyModal}
submitEditPolicy={submitEditPolicy}
submitDeletePolicy={submitDeletePolicy}
/>
</div>
)}
</Panel>
)}
</Accordion.Content>
</Accordion.Item>
)
})}
</StatelessAccordion>
</Accordion>
{!processList.length && <LabelMedium margin="1rem">Ingen behandlinger</LabelMedium>}

{!!currentProcess && (
Expand Down
40 changes: 18 additions & 22 deletions apps/frontend/src/components/Process/Accordion/AccordionTitle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,34 @@ type TAccordionTitleProps = {
process: IProcessShort
expanded: boolean
forwardRef?: Ref<any>
noChevron?: boolean
}

export const InformationTypeRef: RefObject<HTMLDivElement> = createRef<HTMLDivElement>()

const AccordionTitle = (props: TAccordionTitleProps) => {
const { process, expanded, forwardRef, codelistUtils } = props
const { process, expanded, forwardRef, codelistUtils, noChevron } = props
const today: string = new Date().toISOString().split('T')[0]

const isActive: boolean = today < process.end

return (
<>
<div ref={forwardRef}>
<LabelLarge color={theme.colors.primary}>
{expanded ? (
<FontAwesomeIcon icon={faChevronDown} />
) : (
<FontAwesomeIcon icon={faChevronRight} />
)}
<span> </span>
<Tag variant={isActive ? 'success' : 'warning'}>{isActive ? 'Aktiv' : 'Utgått'}</Tag>
<span> </span>
<span>
{process.purposes
.map((purpose: ICode) => codelistUtils.getShortname(EListName.PURPOSE, purpose.code))
.join(', ')}
:{' '}
</span>
<span>{process.name}</span>
</LabelLarge>
</div>
</>
<div ref={forwardRef}>
<LabelLarge color={theme.colors.primary}>
{!noChevron && expanded && <FontAwesomeIcon icon={faChevronDown} />}
{!noChevron && !expanded && <FontAwesomeIcon icon={faChevronRight} />}
<span> </span>
<Tag variant={isActive ? 'success' : 'warning'}>{isActive ? 'Aktiv' : 'Utgått'}</Tag>
<span> </span>
<span>
{process.purposes
.map((purpose: ICode) => codelistUtils.getShortname(EListName.PURPOSE, purpose.code))
.join(', ')}
:{' '}
</span>
<span>{process.name}</span>
</LabelLarge>
</div>
)
}

Expand Down

0 comments on commit b171268

Please sign in to comment.