-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #30 from CambioML/jojo-branch
add projects cont'd; addFile functionality
- Loading branch information
Showing
5 changed files
with
225 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React from 'react'; | ||
| import { Typography } from '@material-tailwind/react'; | ||
| import { Report } from '@/app/types/SustainabilityReportTypes'; | ||
|
|
||
| function truncateMiddle(text: string, maxLength = 25) { | ||
| if (text.length <= maxLength) return text; | ||
| const start = text.substring(0, Math.ceil(maxLength / 2)); | ||
| const end = text.substring(text.length - Math.floor(maxLength / 2)); | ||
| return `${start}...${end}`; | ||
| } | ||
|
|
||
| interface FileTagProps { | ||
| report: Report; | ||
| } | ||
|
|
||
| const FileTag = ({ report }: FileTagProps) => { | ||
| return ( | ||
| <div className="bg-blue-gray-50 px-2 py-1 rounded-full w-full overflow-hidden flex items-center justify-center"> | ||
| <Typography variant="paragraph" color="blue-gray" className="font-normal whitespace-nowrap overflow-hidden"> | ||
| {truncateMiddle(report.name, 25)} | ||
| </Typography> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FileTag; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { Report } from '@/app/types/SustainabilityReportTypes'; | ||
| import FileTag from './FileTag'; | ||
| import useSustainabilityReportAddFileModal from '@/app/hooks/sustainabilityReport/useSustainabilityReportAddFileModal'; | ||
| import { Plus } from '@phosphor-icons/react'; | ||
|
|
||
| interface FilesContainerProps { | ||
| reports: Report[]; | ||
| projectId: string; | ||
| } | ||
|
|
||
| const FilesContainer = ({ reports, projectId }: FilesContainerProps) => { | ||
| const sustainabilityReportAddFileModal = useSustainabilityReportAddFileModal(); | ||
|
|
||
| const handleAddFile = () => { | ||
| sustainabilityReportAddFileModal.setProjectId(projectId); | ||
| sustainabilityReportAddFileModal.onOpen(); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="relative flex flex-wrap gap-2 max-w-[250px] h-full overflow-y-auto p-2 rounded group"> | ||
| <div | ||
| className="absolute hidden top-0 right-2 p-1 cursor-pointer bg-blue-gray-50 hover:bg-gray-300 rounded-lg group-hover:block" | ||
| onClick={handleAddFile} | ||
| > | ||
| <Plus size={16} /> | ||
| </div> | ||
| <div className="flex flex-col gap-2 py-6"> | ||
| {reports.map((report, i) => ( | ||
| <FileTag key={i} report={report} /> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default FilesContainer; |
116 changes: 116 additions & 0 deletions
116
app/components/modals/sustainabilityReport/SustainabilityReportAddFileModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| 'use client'; | ||
|
|
||
| import { useState } from 'react'; | ||
| import useSustainabilityReportAddFileModal, { | ||
| AddFileModalState, | ||
| } from '@/app/hooks/sustainabilityReport/useSustainabilityReportAddFileModal'; | ||
| import FormModal from '../FormModal'; | ||
| import Heading from '../../Heading'; | ||
| import { toast } from 'react-hot-toast'; | ||
| import Dropzone from '../../SustainabilityReport/Dropzone'; | ||
| import useSustainabilityStore from '@/app/hooks/sustainabilityReport/sustainabilityReportStore'; | ||
| import { CloudArrowUp } from '@phosphor-icons/react'; | ||
| import { uploadFile } from '@/app/actions/sustainabilityReport/uploadFile'; | ||
| import { AxiosError } from 'axios'; | ||
| import useFetchSustainabilityData from '@/app/hooks/sustainabilityReport/useFetchSustainabilityData'; | ||
| import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'; | ||
|
|
||
| const SustainabilityReportAddFileModal = () => { | ||
| const SustainabilityReportAddFileModal = useSustainabilityReportAddFileModal(); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const { reportsToAdd, setReportsToAdd, userId } = useSustainabilityStore(); | ||
| const { fetchAttributesThenProjects } = useFetchSustainabilityData(); | ||
|
|
||
| const { handleSubmit, reset } = useForm<FieldValues>({}); | ||
|
|
||
| const onSubmit: SubmitHandler<FieldValues> = async () => { | ||
| try { | ||
| setIsLoading(true); | ||
| SustainabilityReportAddFileModal.setAddFileModalState(AddFileModalState.UPLOADING); | ||
| console.log('Uploading reports:', reportsToAdd); | ||
|
|
||
| const uploadResponses = await Promise.all( | ||
| reportsToAdd.map((report) => | ||
| uploadFile({ | ||
| file: report, | ||
| projectId: SustainabilityReportAddFileModal.projectId, | ||
| userId: userId, | ||
| }) | ||
| ) | ||
| ); | ||
|
|
||
| console.log('Uploads complete', uploadResponses); | ||
| await fetchAttributesThenProjects(); | ||
| } catch (error) { | ||
| if (error instanceof AxiosError) { | ||
| console.error('AxiosError occurred:', { | ||
| message: error.message, | ||
| code: error.code, | ||
| response: error.response | ||
| ? { | ||
| status: error.response.status, | ||
| data: error.response.data, | ||
| } | ||
| : null, | ||
| }); | ||
|
|
||
| toast.error('A network or server error occurred. Please try again.'); | ||
| } else { | ||
| console.error('An error occurred:', error); | ||
| toast.error('Add company failed. Please try again.'); | ||
| } | ||
| } finally { | ||
| SustainabilityReportAddFileModal.setAddFileModalState(AddFileModalState.ADD_FILES); | ||
| SustainabilityReportAddFileModal.onClose(); | ||
| setReportsToAdd([]); | ||
| setIsLoading(false); | ||
| reset(); | ||
| } | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setReportsToAdd([]); | ||
| SustainabilityReportAddFileModal.onClose(); | ||
| }; | ||
|
|
||
| const bodyContent = ( | ||
| <div className="flex flex-col gap-4"> | ||
| <Heading title="Add Files" subtitle="" center /> | ||
| {SustainabilityReportAddFileModal.addFileModalState === AddFileModalState.ADD_FILES && ( | ||
| <> | ||
| <Dropzone /> | ||
| {reportsToAdd.length > 0 && ( | ||
| <div className="flex flex-wrap gap-2 max-h-[100px] overflow-y-auto"> | ||
| {reportsToAdd.map((report, index) => ( | ||
| <div key={index} className="text-gray-800 whitespace-nowrap bg-gray-200 rounded-full px-2 py-1"> | ||
| {report.name} | ||
| </div> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </> | ||
| )} | ||
| {SustainabilityReportAddFileModal.addFileModalState === AddFileModalState.UPLOADING && ( | ||
| <div className="flex flex-col justify-center items-center gap-4 text-xl"> | ||
| Uploading Files | ||
| <CloudArrowUp size={40} className="animate-pulse" /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
|
|
||
| return ( | ||
| <FormModal | ||
| disabled={isLoading} | ||
| isOpen={SustainabilityReportAddFileModal.isOpen} | ||
| title="" | ||
| actionLabel={`Add File ${reportsToAdd.length > 0 ? `(${reportsToAdd.length})` : ''}`} | ||
| onClose={handleClose} | ||
| onSubmit={handleSubmit(onSubmit)} | ||
| body={bodyContent} | ||
| actionDisabled={reportsToAdd.length === 0} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export default SustainabilityReportAddFileModal; |
33 changes: 33 additions & 0 deletions
33
app/hooks/sustainabilityReport/useSustainabilityReportAddFileModal.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { create } from 'zustand'; | ||
|
|
||
| export enum AddFileModalState { | ||
| ADD_FILES, | ||
| UPLOADING, | ||
| SUCCESS, | ||
| } | ||
|
|
||
| interface SustainabilityReportAddFileModalStore { | ||
| isOpen: boolean; | ||
| content: React.ReactElement | null; | ||
| addFileModalState: AddFileModalState; | ||
| projectId: string; | ||
| onOpen: () => void; | ||
| onClose: () => void; | ||
| setContent: (content: React.ReactElement) => void; | ||
| setProjectId: (projectId: string) => void; | ||
| setAddFileModalState: (addFileModalState: AddFileModalState) => void; | ||
| } | ||
|
|
||
| const useSustainabilityReportAddFileModal = create<SustainabilityReportAddFileModalStore>((set) => ({ | ||
| isOpen: false, | ||
| content: null, | ||
| addFileModalState: AddFileModalState.ADD_FILES, | ||
| projectId: '', | ||
| onOpen: () => set({ isOpen: true }), | ||
| onClose: () => set({ isOpen: false }), | ||
| setContent: (content) => set({ content }), | ||
| setProjectId: (projectId) => set({ projectId }), | ||
| setAddFileModalState: (addFileModalState) => set({ addFileModalState }), | ||
| })); | ||
|
|
||
| export default useSustainabilityReportAddFileModal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters