Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

collapsible will open on retrieve now #191

Merged
merged 1 commit into from
May 3, 2024
Merged

collapsible will open on retrieve now #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions frontend/src/app/components/common/Collapsible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,45 @@
import React, { useState, FC } from 'react';
import React, { FC, useState, useEffect } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faPlus, faMinus } from '@fortawesome/fontawesome-free-solid';
import '../../content/pages/documentpreview/DocumentPreview.scss';

interface CollapsibleProps {
title: string;
children: React.ReactNode;
isOpen: boolean;
}

const Collapsible: FC<CollapsibleProps> = ({ title, children }) => {
const [isOpen, setIsOpen] = useState(false);
const Collapsible: FC<CollapsibleProps> = ({ title, children, isOpen }) => {
const [isOpenonClick, setIsOpenOnClick] = useState(isOpen);
const icon = isOpenonClick ? faMinus : (faPlus as IconProp);

const toggleCollapsible = () => {
setIsOpen(!isOpen);
const contentStyle = {
display: isOpenonClick ? 'block' : 'none',
};

const icon = isOpen ? faMinus : (faPlus as IconProp);

const contentStyle = {
display: isOpen ? 'block' : 'none',
const toggleCollapsibleOnClick = () => {
setIsOpenOnClick(!isOpenonClick);
};

useEffect(() => {
setIsOpenOnClick(isOpen);
}, [isOpen]);

return (
<div className="form-group">
<div className="mb-2 d-flex align-items-center" onClick={toggleCollapsible}>
<FontAwesomeIcon icon={icon as IconProp} className="inlineDiv" />
<div className="ml-2 inlineDiv collapsibleTitle">{title}</div>
<div className="mb-2 d-flex align-items-center">
<FontAwesomeIcon
icon={icon as IconProp}
className="inlineDiv collapsibleTitle"
onClick={toggleCollapsibleOnClick}
/>
<div className="ml-2 inlineDiv collapsibleTitle boldText" onClick={toggleCollapsibleOnClick}>
{title}
</div>
</div>

<hr />
<div style={contentStyle}>{children}</div>
</div>
);
Expand Down
82 changes: 40 additions & 42 deletions frontend/src/app/content/pages/IndexPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,46 @@ export interface IndexPageProps {
}

const IndexPage: FC<IndexPageProps> = ({ data }) => {
const { dtid } = useParams<{ dtid: string }>();
const dtidNumber = dtid ? parseInt(dtid, 10) : null;
const generateReportHandler = () => {
if (dtidNumber) {
// generateReportNew(dtidNumber, data!.fileNum, 'Land Use Report');
}
};

return (
<>
<div className="h1">Preview - Land Use Report (Draft)</div>
<hr />

<div className="mb-3 mt-3">
<div className="font-weight-bold inlineDiv mr-1">DTID:</div>
<div className="inlineDiv" id="dtid">
{data.dtid}
</div>
</div>
<div className="mb-3">
<div className="font-weight-bold inlineDiv mr-1">Tenure File Number:</div>
<div className="inlineDiv" id="tfn">
{data.fileNum}
</div>
</div>
<div className="mb-3">
<div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
<div className="inlineDiv">{data.primaryContactName}</div>
</div>

<Collapsible title="Disposition Transaction ID Details">
<DtidDetails data={data} />
</Collapsible>
<Collapsible title="Tenure Details">
<TenureDetails data={data} />
</Collapsible>
<Collapsible title="Area">
<AreaDetails data={data} />
</Collapsible>
<Button onClick={generateReportHandler}>Create</Button>
</>
);
// const { dtid } = useParams<{ dtid: string }>();
// const dtidNumber = dtid ? parseInt(dtid, 10) : null;
// const generateReportHandler = () => {
// if (dtidNumber) {
// // generateReportNew(dtidNumber, data!.fileNum, 'Land Use Report');
// }
// };
// return (
// <>
// <div className="h1">Preview - Land Use Report (Draft)</div>
// <hr />
// <div className="mb-3 mt-3">
// <div className="font-weight-bold inlineDiv mr-1">DTID:</div>
// <div className="inlineDiv" id="dtid">
// {data.dtid}
// </div>
// </div>
// <div className="mb-3">
// <div className="font-weight-bold inlineDiv mr-1">Tenure File Number:</div>
// <div className="inlineDiv" id="tfn">
// {data.fileNum}
// </div>
// </div>
// <div className="mb-3">
// <div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
// <div className="inlineDiv">{data.primaryContactName}</div>
// </div>
// <Collapsible title="Disposition Transaction ID Details">
// <DtidDetails data={data} />
// </Collapsible>
// <Collapsible title="Tenure Details">
// <TenureDetails data={data} />
// </Collapsible>
// <Collapsible title="Area">
// <AreaDetails data={data} />
// </Collapsible>
// <Button onClick={generateReportHandler}>Create</Button>
// </>
// );
return <></>;
};

export default IndexPage;
42 changes: 14 additions & 28 deletions frontend/src/app/content/pages/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,14 @@ import { ProvisionJson, SaveProvisionData } from '../../components/table/reports
import VariablesTable, { SaveVariableData, VariableJson } from '../../components/table/reports/VariablesTable';
import { Alert, Button, Row } from 'react-bootstrap';
import { getDocumentTypes } from '../../common/manage-doc-types';
import { getVariables, getVariablesByDocType } from '../../common/manage-provisions';
import { getVariablesByDocType } from '../../common/manage-provisions';
import { useDispatch, useSelector } from 'react-redux';
import { setProvisionDataObjects, setSelectedProvisionIds } from '../../store/reducers/provisionSlice';
import { setSelectedVariableIds, setVariables } from '../../store/reducers/variableSlice';
import { RootState } from '../../store/store';
import { setSearchState } from '../../store/reducers/searchSlice';
import { useParams } from 'react-router-dom';
import CustomCollapsible from './documentpreview/CustomCollapsible';
// import Collapsible from './documentpreview/Collapsible';

const LandingPage: FC = () => {
const { dtidNumber, docTypeFromUrl } = useParams();
Expand Down Expand Up @@ -190,8 +190,10 @@ const LandingPage: FC = () => {
setDtid(dtidValue);
// Fetch any existing documentData
const displayData: { dtr: DTRDisplayObject | null; error: string | null } = await getDisplayData(dtidValue);
if (!displayData.error) setData(displayData.dtr);
else {
if (!displayData.error) {
setData(displayData.dtr);
setIsOpen(true);
} else {
setError(displayData.error);
setShowError(true);
}
Expand Down Expand Up @@ -275,7 +277,6 @@ const LandingPage: FC = () => {
setIsOpen(false);
setSelectedDocTypeId(null);
};
const toggleCollapsible = () => setIsOpen(!isOpen);

const getReportData = () => {
const selectedProvisions = provisions.filter((provision) => selectedProvisionIds.includes(provision.provision_id));
Expand Down Expand Up @@ -381,30 +382,15 @@ const LandingPage: FC = () => {
<div className="font-weight-bold inlineDiv mr-1">Primary Contact Name:</div>
<div className="inlineDiv">{data?.primaryContactName}</div>
</div>
<CustomCollapsible
title="Disposition Transaction ID Details"
isOpen={isOpen}
toggleCollapsible={toggleCollapsible}
isSpanRequired={false}
>
<Collapsible title="Disposition Transaction ID Details" isOpen={isOpen}>
{data ? <DtidDetails data={data!} /> : <Skeleton />}
</CustomCollapsible>
<CustomCollapsible
title="Tenure Details"
isOpen={isOpen}
toggleCollapsible={toggleCollapsible}
isSpanRequired={false}
>
</Collapsible>
<Collapsible title="Tenure Details" isOpen={isOpen}>
{data ? <TenureDetails data={data!} /> : <Skeleton />}
</CustomCollapsible>
<CustomCollapsible
title="Interested Parties"
isOpen={isOpen}
toggleCollapsible={toggleCollapsible}
isSpanRequired={false}
>
</Collapsible>
<Collapsible title="Interested Parties" isOpen={isOpen}>
{data ? <InterestedParties data={data!} /> : <Skeleton />}
</CustomCollapsible>
</Collapsible>

<hr />
<h3>Create Document</h3>
Expand All @@ -430,11 +416,11 @@ const LandingPage: FC = () => {
</Row>
{provisionGroups && dtid && documentType ? (
<>
<Collapsible title="Provisions">
<Collapsible title="Provisions" isOpen={false}>
<Provisions dtid={dtid} documentType={documentType} provisionGroups={provisionGroups} />
</Collapsible>

<Collapsible title="Variables">
<Collapsible title="Variables" isOpen={false}>
<VariablesTable onVariableEdit={handleVariableEdit} />
</Collapsible>
</>
Expand Down
Loading