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

Refactor/qol cleanup #1208

Merged
merged 2 commits into from
Apr 19, 2024
Merged

Refactor/qol cleanup #1208

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d424a2
feat: improved project list table styling
wwills2 Apr 18, 2024
8b2f4f3
feat: increased static modal size
wwills2 Apr 18, 2024
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: 18 additions & 19 deletions src/renderer/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { IntlProvider } from 'react-intl';
import { loadLocaleData } from '@/translations';
import "@/App.css";
import { AppNavigator } from "@/routes";
import { setLocale } from '@/store/slices/app';
import { IndeterminateProgressOverlay } from '@/components';
import {useEffect, useState} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {IntlProvider} from 'react-intl';
import {loadLocaleData} from '@/translations';
import '@/App.css';
import {AppNavigator} from '@/routes';
import {setLocale} from '@/store/slices/app';
import {IndeterminateProgressOverlay} from '@/components';

/**
* @returns app react component to be rendered by electron as the UI
*/
function App() {

const dispatch = useDispatch();
const appStore = useSelector((state: any) => state.app);
const [translationTokens, setTranslationTokens] = useState<object>();
Expand All @@ -33,16 +32,16 @@ function App() {
}

return (
<div style={{height: 'calc(100% - 67px)'}} className="dark:bg-gray-800 dark:text-white">
<IntlProvider
locale={appStore.locale}
defaultLocale="en"
//@ts-ignore
messages={translationTokens.default}
>
<AppNavigator/>
</IntlProvider>
</div>
<div style={{ height: 'calc(100% - 67px)' }} className="dark:bg-gray-800 dark:text-white">
<IntlProvider
locale={appStore.locale}
defaultLocale="en"
//@ts-ignore
messages={translationTokens.default}
>
<AppNavigator />
</IntlProvider>
</div>
);
}

Expand Down
152 changes: 77 additions & 75 deletions src/renderer/components/blocks/modals/ProjectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import React from 'react';
import {
CoBenefitForm,
EstimationForm,
IssuanceForm,
Modal,
Tabs,
ProjectForm,
IssuanceForm,
ProjectLocationForm,
EstimationForm,
CoBenefitForm,
RelatedProjectForm,
RatingForm,
RelatedProjectForm,
Spinner,
Tabs,
} from '@/components';
import { FormattedMessage } from 'react-intl';
import { useGetProjectQuery, useGetPickListsQuery } from '@/api';
import { useGetPickListsQuery, useGetProjectQuery } from '@/api';

interface ProjectModalProps {
warehouseProjectId: string;
Expand All @@ -33,76 +33,78 @@ const ProjectModal: React.FC<ProjectModalProps> = ({ warehouseProjectId, onClose
<FormattedMessage id={'detailed-project-view'} />
</Modal.Header>
<Modal.Body>
<Tabs>
{/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
<Tabs.Item title={<FormattedMessage id="project" />}>
{!isProjectLoading && !isPickListLoading && projectData ? (
<ProjectForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData}
picklistOptions={pickListData}
/>
) : (
<Spinner size="xl" />
)}
</Tabs.Item>
{projectData?.issuances?.length && (
<Tabs.Item title={<FormattedMessage id="issuance" />}>
<IssuanceForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.issuances}
showUnits={true}
picklistOptions={pickListData}
/>
<div className="h-screen">
<Tabs>
{/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
<Tabs.Item title={<FormattedMessage id="project" />}>
{!isProjectLoading && !isPickListLoading && projectData ? (
<ProjectForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData}
picklistOptions={pickListData}
/>
) : (
<Spinner size="xl" />
)}
</Tabs.Item>
)}
{projectData?.projectLocations?.length && (
<Tabs.Item title={<FormattedMessage id="project-locations" />}>
<ProjectLocationForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.projectLocations}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{projectData?.estimations?.length && (
<Tabs.Item title={<FormattedMessage id="estimations" />}>
<EstimationForm onSubmit={handleProjectFormSubmit} readonly={true} data={projectData?.estimations} />
</Tabs.Item>
)}
{projectData?.coBenefits?.length && (
<Tabs.Item title={<FormattedMessage id="co-benefits" />}>
<CoBenefitForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.coBenefits}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{projectData?.relatedProjects?.length && (
<Tabs.Item title={<FormattedMessage id="related-projects" />}>
<RelatedProjectForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.relatedProjects}
/>
</Tabs.Item>
)}
{(projectData?.projectRatings?.length || projectData?.labels?.length) && (
<Tabs.Item title={<FormattedMessage id="ratings" />}>
<RatingForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.projectRatings}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
</Tabs>
{projectData?.issuances?.length && (
<Tabs.Item title={<FormattedMessage id="issuance" />}>
<IssuanceForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.issuances}
showUnits={true}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{projectData?.projectLocations?.length && (
<Tabs.Item title={<FormattedMessage id="project-locations" />}>
<ProjectLocationForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.projectLocations}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{projectData?.estimations?.length && (
<Tabs.Item title={<FormattedMessage id="estimations" />}>
<EstimationForm onSubmit={handleProjectFormSubmit} readonly={true} data={projectData?.estimations} />
</Tabs.Item>
)}
{projectData?.coBenefits?.length && (
<Tabs.Item title={<FormattedMessage id="co-benefits" />}>
<CoBenefitForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.coBenefits}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{projectData?.relatedProjects?.length && (
<Tabs.Item title={<FormattedMessage id="related-projects" />}>
<RelatedProjectForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.relatedProjects}
/>
</Tabs.Item>
)}
{(projectData?.projectRatings?.length || projectData?.labels?.length) && (
<Tabs.Item title={<FormattedMessage id="ratings" />}>
<RatingForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={projectData?.projectRatings}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
</Tabs>
</div>
</Modal.Body>
</Modal>
);
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/components/blocks/modals/StagingDiffModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const StagingDiffModal: React.FC<ProjectModalProps> = ({ stagingUuid, onClose }:
<Modal.Header>
<FormattedMessage id={'staging-diff'} />
</Modal.Header>
<Modal.Body>{isLoading ? <p>loading...</p> : <DiffViewer data={changeRecord} />}</Modal.Body>
<Modal.Body>
<div className="h-screen">{isLoading ? <p>loading...</p> : <DiffViewer data={changeRecord} />}</div>
</Modal.Body>
</Modal>
);
};
Expand Down
74 changes: 38 additions & 36 deletions src/renderer/components/blocks/modals/UnitModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Modal, Tabs, UnitForm, IssuanceForm, LabelForm, Spinner } from '@/components';
import { IssuanceForm, LabelForm, Modal, Spinner, Tabs, UnitForm } from '@/components';
import { FormattedMessage } from 'react-intl';
import { useGetUnitQuery, useGetPickListsQuery } from '@/api';
import { useGetPickListsQuery, useGetUnitQuery } from '@/api';

interface UnitModalProps {
warehouseUnitId: string;
Expand All @@ -22,41 +22,43 @@ const UnitModal: React.FC<UnitModalProps> = ({ warehouseUnitId, onClose }: UnitM
<FormattedMessage id={'detailed-unit-view'} />
</Modal.Header>
<Modal.Body>
<Tabs>
{/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
<Tabs.Item title={<FormattedMessage id="unit" />}>
{!unitLoading && !isPickListLoading && unitData ? (
<UnitForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={unitData}
picklistOptions={pickListData}
/>
) : (
<Spinner size="xl" />
)}
</Tabs.Item>
{unitData?.issuance && (
<Tabs.Item title={<FormattedMessage id="issuance" />}>
<IssuanceForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={[unitData?.issuance]}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{unitData?.labels?.length && (
<Tabs.Item title={<FormattedMessage id="labels" />}>
<LabelForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={unitData?.labels}
picklistOptions={pickListData}
/>
<div className="h-screen">
<Tabs>
{/* There is no per-tab deeplinking so we only need to put a spinned on the first */}
<Tabs.Item title={<FormattedMessage id="unit" />}>
{!unitLoading && !isPickListLoading && unitData ? (
<UnitForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={unitData}
picklistOptions={pickListData}
/>
) : (
<Spinner size="xl" />
)}
</Tabs.Item>
)}
</Tabs>
{unitData?.issuance && (
<Tabs.Item title={<FormattedMessage id="issuance" />}>
<IssuanceForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={[unitData?.issuance]}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
{unitData?.labels?.length && (
<Tabs.Item title={<FormattedMessage id="labels" />}>
<LabelForm
onSubmit={handleProjectFormSubmit}
readonly={true}
data={unitData?.labels}
picklistOptions={pickListData}
/>
</Tabs.Item>
)}
</Tabs>
</div>
</Modal.Body>
</Modal>
);
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/components/blocks/modals/UpsertProjectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ const UpsertProjectModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModal
<Modal show={true} onClose={onClose}>
<ModalHeader />
<Modal.Body>
<p>the project form goes here {projectData?.warehouseProjectId}</p>
<div className="h-screen">
<p>the project form goes here {projectData?.warehouseProjectId}</p>
</div>
</Modal.Body>
</Modal>
);
Expand Down
4 changes: 3 additions & 1 deletion src/renderer/components/blocks/modals/UpsertUnitModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,9 @@ const UpsertUnitModal: React.FC<UpsertModalProps> = ({ onClose }: UpsertModalPro
<Modal show={true} onClose={onClose}>
<ModalHeader />
<Modal.Body>
<p>the unit form goes here {unitData?.warehouseUnitId}</p>
<div className="h-screen">
<p>the unit form goes here {unitData?.warehouseUnitId}</p>
</div>
</Modal.Body>
</Modal>
);
Expand Down
8 changes: 5 additions & 3 deletions src/renderer/components/blocks/tables/ProjectsListTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { DebouncedFunc } from 'lodash';
import { DataTable, PageCounter, Pagination } from '@/components';
import { DataTable, PageCounter, Pagination, Tooltip } from '@/components';
import { Project } from '@/schemas/Project.schema';
import { Badge } from 'flowbite-react';

Expand Down Expand Up @@ -39,8 +39,10 @@ const ProjectsListTable: React.FC<TableProps> = ({
title: <FormattedMessage id={'project-id'} />,
key: 'projectId',
render: (row: Project) => (
<div className="p-4 bg-white rounded-lg border shadow-md">
<h5 className="text-sm font-bold tracking-tight text-gray-900">{row.projectId}</h5>
<div className="m-1 p-3 bg-white rounded-lg border shadow-sm dark:border-gray-500 dark:bg-transparent text-center overflow-hidden">
<Tooltip content={row.projectId}>
<h5 className="text-sm font-bold tracking-tight text-gray-900 dark:text-gray-50">{row.projectId}</h5>
</Tooltip>
</div>
),
},
Expand Down