@paro.io/expert-shared-components 1.5.0 → 1.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/DocumentCenter/ClientDocumentsTable.js +62 -59
- package/lib/components/DocumentCenter/DocumentCenter.js +9 -9
- package/lib/components/DocumentCenter/DocumentUploadRow.d.ts +3 -3
- package/lib/components/DocumentCenter/DocumentUploadRow.js +39 -29
- package/lib/components/DocumentCenter/ParoDocumentsTable.js +62 -58
- package/package.json +1 -1
- package/readme.md +0 -87
|
@@ -39,6 +39,7 @@ exports.ClientDocumentsTable = exports.useStyles = void 0;
|
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
40
|
const core_1 = require("@material-ui/core");
|
|
41
41
|
const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
|
|
42
|
+
const base_ui_1 = require("@paro.io/base-ui");
|
|
42
43
|
const DocumentUploadRow_1 = require("./DocumentUploadRow");
|
|
43
44
|
const base_icons_1 = require("@paro.io/base-icons");
|
|
44
45
|
const DeleteDocumentModal_1 = require("./DeleteDocumentModal");
|
|
@@ -315,64 +316,66 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
|
|
|
315
316
|
}
|
|
316
317
|
fileId && setFileId(fileId);
|
|
317
318
|
};
|
|
318
|
-
return (react_1.default.createElement(
|
|
319
|
-
react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType,
|
|
320
|
-
react_1.default.createElement(
|
|
321
|
-
react_1.default.createElement(
|
|
322
|
-
react_1.default.createElement(
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
"
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
react_1.default.createElement(core_1.
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
react_1.default.createElement(core_1.
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
319
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
320
|
+
react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType, paroDocuments: paroDocuments, uploadExpertClientFiles: uploadExpertClientFiles, refetchFiles: refetchFiles, legacyFreelancerId: legacyFreelancerId, freelancerName: freelancerName, freelancerEmail: freelancerEmail, isClientPortal: isClientPortal }),
|
|
321
|
+
react_1.default.createElement(utils_1.CustomPaper, { style: { height: `${(files === null || files === void 0 ? void 0 : files.length) === 0 ? '30vh' : 'auto'}` } },
|
|
322
|
+
(files === null || files === void 0 ? void 0 : files.length) > 0 && react_1.default.createElement("div", { className: 'w-1/4' },
|
|
323
|
+
react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),
|
|
324
|
+
react_1.default.createElement(core_1.Box, { mt: 2 }, (files === null || files === void 0 ? void 0 : files.length) > 0 ? react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
|
|
325
|
+
react_1.default.createElement(core_1.TableHead, null,
|
|
326
|
+
react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
|
|
327
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
|
|
328
|
+
headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
|
|
329
|
+
react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
|
|
330
|
+
react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
|
|
331
|
+
react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
|
|
332
|
+
react_1.default.createElement("b", null, headCell.label)),
|
|
333
|
+
orderBy === headCell.id && null))))),
|
|
334
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
|
|
335
|
+
react_1.default.createElement(core_1.TableBody, null, (0, utils_1.stableSort)(tableData, (0, utils_1.getComparator)(order, orderBy, descendingComparator)).slice(firstItem, lastItem).map((row, index) => {
|
|
336
|
+
const { fileId, fileName, docType, docSize, clientName, expertName, projectName, projectStatus, uploadedDate, uploadedBy, lastViewed, projectId } = row;
|
|
337
|
+
return (react_1.default.createElement(core_1.TableRow, { key: fileId },
|
|
338
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
|
|
339
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
|
|
340
|
+
react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName, fileId, projectId), style: {
|
|
341
|
+
color: 'blue',
|
|
342
|
+
textDecoration: 'underline',
|
|
343
|
+
cursor: 'pointer',
|
|
344
|
+
} }, fileName)),
|
|
345
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
|
|
346
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
|
|
347
|
+
docSize.toFixed(1),
|
|
348
|
+
" MB"),
|
|
349
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, isClientPortal ? expertName : clientName),
|
|
350
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectName),
|
|
351
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectStatus),
|
|
352
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
|
|
353
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, `${uploadedBy.charAt(0)}${uploadedBy.slice(1).toLowerCase()}`),
|
|
354
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, lastViewed),
|
|
355
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
|
|
356
|
+
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
|
|
357
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
|
|
358
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => __awaiter(void 0, void 0, void 0, function* () { return handleDownloadFile(fileName, fileId, projectId); }) },
|
|
359
|
+
" ",
|
|
360
|
+
react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
|
|
361
|
+
" ")),
|
|
362
|
+
(isClientPortal ? uploadedBy === 'CLIENT' : uploadedBy === 'FREELANCER') && react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: `This will delete the document for you and the ${isClientPortal ? 'Expert' : 'Client'}` },
|
|
363
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName, fileId) },
|
|
364
|
+
" ",
|
|
365
|
+
react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
|
|
366
|
+
" "))))));
|
|
367
|
+
})))
|
|
368
|
+
:
|
|
369
|
+
react_1.default.createElement(core_1.Box, { style: { marginTop: '5rem' } },
|
|
370
|
+
react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
|
|
371
|
+
react_1.default.createElement(core_1.Typography, { variant: "body1", align: 'center' }, "You haven\u2019t uploaded any documents yet. Click above and upload any .pdf , .doc, .docx, .ppt, .xls, .xlsx file."))),
|
|
372
|
+
(expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
|
|
373
|
+
react_1.default.createElement(Pagination_1.default, { total: expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })),
|
|
374
|
+
react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: (react_1.default.createElement(react_1.default.Fragment, null,
|
|
375
|
+
"Are you sure you want to delete document ",
|
|
376
|
+
react_1.default.createElement("strong", null, deleteFileName),
|
|
377
|
+
" ?",
|
|
378
|
+
react_1.default.createElement("br", null),
|
|
379
|
+
"If you continue, this document will no longer be available.")) }))));
|
|
377
380
|
};
|
|
378
381
|
exports.ClientDocumentsTable = ClientDocumentsTable;
|
|
@@ -143,11 +143,11 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
|
|
|
143
143
|
return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
|
|
144
144
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
145
145
|
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
|
|
146
|
-
react_1.default.createElement(core_1.Box, { p: 2 },
|
|
146
|
+
react_1.default.createElement(core_1.Box, { p: 2, style: { paddingBottom: '0px' } },
|
|
147
147
|
react_1.default.createElement(core_1.Typography, { variant: "h6" },
|
|
148
148
|
react_1.default.createElement(core_1.Box, { style: { color: 'white', fontWeight: 'bold' } }, "Document Center")),
|
|
149
149
|
react_1.default.createElement(core_1.Typography, { variant: "caption" },
|
|
150
|
-
react_1.default.createElement(core_1.Box, { style: { color: 'white' }, dangerouslySetInnerHTML: { __html: headerText } }))),
|
|
150
|
+
react_1.default.createElement(core_1.Box, { style: { color: 'white', fontSize: '15px' }, dangerouslySetInnerHTML: { __html: headerText } }))),
|
|
151
151
|
react_1.default.createElement(core_1.Box, { style: { position: 'absolute', top: 0, right: 0 } },
|
|
152
152
|
react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
|
|
153
153
|
react_1.default.createElement(core_1.Box, { style: { backgroundColor: 'white', width: 40, height: 40, borderRadius: '4px' } },
|
|
@@ -157,21 +157,21 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
|
|
|
157
157
|
react_1.default.createElement(core_1.CircularProgress, { size: 24 })
|
|
158
158
|
:
|
|
159
159
|
react_1.default.createElement(lab_1.TabContext, { value: value + '' },
|
|
160
|
-
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "
|
|
161
|
-
react_1.default.createElement(core_1.Box,
|
|
160
|
+
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "baseline" },
|
|
161
|
+
react_1.default.createElement(core_1.Box, null,
|
|
162
162
|
react_1.default.createElement(core_1.AppBar, { position: 'static', color: 'inherit', style: { backgroundColor: 'transparent' } },
|
|
163
163
|
react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: value, onChange: handleChange, variant: "scrollable", scrollButtons: "on" },
|
|
164
|
-
react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, isClientPortal ? 'Documents
|
|
164
|
+
react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, isClientPortal ? 'Expert Documents' : 'Client Documents') }),
|
|
165
165
|
!isClientPortal && react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, "Paro Documents") })))),
|
|
166
|
-
react_1.default.createElement(core_1.Box, { p:
|
|
166
|
+
react_1.default.createElement(core_1.Box, { p: 1 },
|
|
167
167
|
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row-reverse", justify: "space-evenly", alignItems: "center", style: { display: 'flex', flexDirection: 'column' } },
|
|
168
|
-
react_1.default.createElement(core_1.Typography, {
|
|
168
|
+
react_1.default.createElement(core_1.Typography, { style: { color: 'white', marginLeft: '12px', fontSize: '14px' } },
|
|
169
169
|
react_1.default.createElement("b", null, value === 0 ? expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
|
|
170
170
|
" Documents Total"),
|
|
171
|
-
value === 0 && react_1.default.createElement(core_1.Typography, {
|
|
171
|
+
value === 0 && react_1.default.createElement(core_1.Typography, { style: { color: 'white', fontSize: '14px' } },
|
|
172
172
|
react_1.default.createElement("b", null, value === 0 ? ((expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length) ? (_a = expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.filter((file) => !(file === null || file === void 0 ? void 0 : file.lastViewed))) === null || _a === void 0 ? void 0 : _a.length : 0) : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
|
|
173
173
|
" Documents Unread")))),
|
|
174
|
-
react_1.default.createElement(lab_1.TabPanel, { value: '0' },
|
|
174
|
+
react_1.default.createElement(lab_1.TabPanel, { value: '0', style: { paddingTop: '0px' } },
|
|
175
175
|
react_1.default.createElement(ClientDocumentsTable_1.ClientDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expertFiles: expertClientFiles, setExpertClientFiles: setExpertClientFiles, clientAndProjectsList: clientAndProjects, uploadExpertClientFiles: uploadExpertClientFiles, updateFileLastViewed: updateFileLastViewed, deleteExpertClientFile: deleteExpertClientFile, paroDocuments: false, freelancerName: freelancerName !== null && freelancerName !== void 0 ? freelancerName : '', freelancerEmail: freelancerEmail !== null && freelancerEmail !== void 0 ? freelancerEmail : '', getFileLazyQuery: getFileLazyQuery, expertClientFilesLazyQuery: expertClientFilesLazyQuery, isClientPortal: isClientPortal })),
|
|
176
176
|
react_1.default.createElement(lab_1.TabPanel, { value: '1' },
|
|
177
177
|
react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
|
|
@@ -8,8 +8,8 @@ interface DocumentUploadProps {
|
|
|
8
8
|
setClientAndProject: (clientAndProject: any) => void;
|
|
9
9
|
docType: string;
|
|
10
10
|
setDocType: (docType: string) => void;
|
|
11
|
-
searchText
|
|
12
|
-
setSearchText
|
|
11
|
+
searchText?: string;
|
|
12
|
+
setSearchText?: (searchText: string) => void;
|
|
13
13
|
paroDocuments: boolean;
|
|
14
14
|
expiryDate?: any;
|
|
15
15
|
handleDateChange?: any;
|
|
@@ -22,5 +22,5 @@ interface DocumentUploadProps {
|
|
|
22
22
|
freelancerEmail?: string;
|
|
23
23
|
isClientPortal?: boolean;
|
|
24
24
|
}
|
|
25
|
-
export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType,
|
|
25
|
+
export declare const DocumentUploadRow: ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal, }: DocumentUploadProps) => JSX.Element;
|
|
26
26
|
export {};
|
|
@@ -32,6 +32,8 @@ const core_1 = require("@material-ui/core");
|
|
|
32
32
|
const base_ui_1 = require("@paro.io/base-ui");
|
|
33
33
|
const react_datepicker_1 = __importDefault(require("react-datepicker"));
|
|
34
34
|
const utils_1 = require("../shared/utils");
|
|
35
|
+
const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
|
|
36
|
+
const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
|
|
35
37
|
const ClientDocumentTypes = [
|
|
36
38
|
"Financial Documents",
|
|
37
39
|
"Contractual and Legal Documents",
|
|
@@ -76,7 +78,7 @@ const generateOptions = (array, clientOptions, isClientPortal) => {
|
|
|
76
78
|
}
|
|
77
79
|
});
|
|
78
80
|
};
|
|
79
|
-
const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType,
|
|
81
|
+
const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, }) => {
|
|
80
82
|
const [isUploading, setIsUploading] = (0, react_1.useState)(false);
|
|
81
83
|
const [documentName, setDocumentName] = (0, react_1.useState)('');
|
|
82
84
|
const fileInputRef = (0, react_1.useRef)(null);
|
|
@@ -141,33 +143,41 @@ const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, set
|
|
|
141
143
|
reader.readAsDataURL(selectedFile);
|
|
142
144
|
}
|
|
143
145
|
};
|
|
144
|
-
return (react_1.default.createElement(
|
|
145
|
-
react_1.default.createElement(
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
react_1.default.createElement(base_ui_1.
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
react_1.default.createElement(core_1.
|
|
153
|
-
react_1.default.createElement(
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
react_1.default.createElement(
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
146
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
147
|
+
react_1.default.createElement("span", { className: "text-sm italic text-white pb-2 pl-8 -mt-5" }, "Follow the steps below to upload your document"),
|
|
148
|
+
react_1.default.createElement(core_1.Grid, { container: true, direction: "row", alignItems: "flex-end", wrap: "nowrap", justifyContent: "flex-start", spacing: 2, xs: 12, style: { padding: '10px 0px 25px 30px' } },
|
|
149
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center' },
|
|
150
|
+
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa1, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
|
|
151
|
+
react_1.default.createElement(base_ui_1.Input, { label: "Enter document name", type: "text", placeholder: "Enter document name", value: documentName, onChange: (e) => { e.preventDefault(); setDocumentName(e.target.value); } })),
|
|
152
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
|
|
153
|
+
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa2, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
|
|
154
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
155
|
+
react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
|
|
156
|
+
react_1.default.createElement(base_ui_1.Select, { label: "Select Document Type", required: true, onChange: (e) => setDocType(e.target.value), value: docType, defaultValue: documentTypeOptions[0].value, options: documentTypeOptions })))),
|
|
157
|
+
paroDocuments && docType && (docType === 'EO Insurance') &&
|
|
158
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center' },
|
|
159
|
+
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa3, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
|
|
160
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
161
|
+
react_1.default.createElement(core_1.FormControl, { error: !!error, variant: "outlined", fullWidth: true },
|
|
162
|
+
react_1.default.createElement(react_datepicker_1.default, { onChange: (date) => handleDateChange(date), className: "input", placeholderText: "Select date", customInput: react_1.default.createElement(base_ui_1.Input, { label: 'Expiration Date', type: "date", value: expiryDate ? expiryDate.toISOString().split('T')[0] : '' }) }),
|
|
163
|
+
error && react_1.default.createElement(core_1.FormHelperText, null, error)))),
|
|
164
|
+
!paroDocuments &&
|
|
165
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
|
|
166
|
+
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa3, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
|
|
167
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
168
|
+
react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
|
|
169
|
+
react_1.default.createElement(base_ui_1.Select, { label: isClientPortal ? "Select Expert - Project" : "Select Client - Project", required: true, onChange: (e) => {
|
|
170
|
+
const selectedItem = clientOptions.find(option => option.value === e.target.value);
|
|
171
|
+
if (selectedItem) {
|
|
172
|
+
setClientAndProject(selectedItem);
|
|
173
|
+
}
|
|
174
|
+
}, value: (clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.value) || '', defaultValue: defaultValue.value, options: clientOptions })))),
|
|
175
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center flex-none' },
|
|
176
|
+
react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: paroDocuments && docType !== 'EO Insurance' ? free_solid_svg_icons_1.fa3 : free_solid_svg_icons_1.fa4, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
|
|
177
|
+
react_1.default.createElement("input", { id: "upload-file", type: "file", accept: ".pdf,.doc,.docx,.ppt,.xls,.xlsx", style: { display: 'none' }, ref: fileInputRef, onChange: handleUpload }),
|
|
178
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: disableButton ? "Please fill out the required info" : "" },
|
|
179
|
+
react_1.default.createElement(base_ui_1.Button, { label: "Upload Document", onClick: () => {
|
|
180
|
+
fileInputRef.current && fileInputRef.current.click();
|
|
181
|
+
}, color: "primary", disabled: disableButton, isLoading: isUploading }))))));
|
|
172
182
|
};
|
|
173
183
|
exports.DocumentUploadRow = DocumentUploadRow;
|
|
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
38
38
|
exports.ParoDocumentsTable = void 0;
|
|
39
39
|
const react_1 = __importStar(require("react"));
|
|
40
40
|
const core_1 = require("@material-ui/core");
|
|
41
|
+
const base_ui_1 = require("@paro.io/base-ui");
|
|
41
42
|
const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
|
|
42
43
|
const DocumentUploadRow_1 = require("./DocumentUploadRow");
|
|
43
44
|
const base_icons_1 = require("@paro.io/base-icons");
|
|
@@ -317,64 +318,67 @@ const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, exp
|
|
|
317
318
|
}
|
|
318
319
|
}
|
|
319
320
|
};
|
|
320
|
-
return (react_1.default.createElement(
|
|
321
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
321
322
|
react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
|
|
322
|
-
react_1.default.createElement(
|
|
323
|
-
react_1.default.createElement(
|
|
324
|
-
react_1.default.createElement(
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
react_1.default.createElement(core_1.
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
react_1.default.createElement(core_1.
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
react_1.default.createElement(
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
323
|
+
react_1.default.createElement(utils_1.CustomPaper, null,
|
|
324
|
+
(files === null || files === void 0 ? void 0 : files.length) > 0 && react_1.default.createElement("div", { className: 'w-1/4' },
|
|
325
|
+
react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),
|
|
326
|
+
react_1.default.createElement(core_1.Box, { mt: 2 }, (files === null || files === void 0 ? void 0 : files.length) > 0 ?
|
|
327
|
+
react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
|
|
328
|
+
react_1.default.createElement(core_1.TableHead, null,
|
|
329
|
+
react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
|
|
330
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
|
|
331
|
+
headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
|
|
332
|
+
react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
|
|
333
|
+
react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
|
|
334
|
+
react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
|
|
335
|
+
react_1.default.createElement("b", null, headCell.label)),
|
|
336
|
+
orderBy === headCell.id && null))))),
|
|
337
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
|
|
338
|
+
react_1.default.createElement(core_1.TableBody, null, (0, utils_1.stableSort)(tableData, (0, utils_1.getComparator)(order, orderBy, descendingComparator)).slice(firstItem, lastItem).map((row, index) => {
|
|
339
|
+
const { fileName, docType, uploadedDate, expiryDate, } = row;
|
|
340
|
+
return (react_1.default.createElement(core_1.TableRow, { key: index },
|
|
341
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
|
|
342
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
|
|
343
|
+
react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName), style: {
|
|
344
|
+
color: 'blue',
|
|
345
|
+
textDecoration: 'underline',
|
|
346
|
+
cursor: 'pointer',
|
|
347
|
+
} }, fileName)),
|
|
348
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
|
|
349
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
|
|
350
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, expiryDate),
|
|
351
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
|
|
352
|
+
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
|
|
353
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
|
|
354
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => handleDownloadFile(fileName) },
|
|
355
|
+
" ",
|
|
356
|
+
react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
|
|
357
|
+
" ")),
|
|
358
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "This will delete the document for you and the Client" },
|
|
359
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName) },
|
|
360
|
+
" ",
|
|
361
|
+
react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
|
|
362
|
+
" "))))));
|
|
363
|
+
})))
|
|
364
|
+
:
|
|
365
|
+
react_1.default.createElement(core_1.Box, null,
|
|
366
|
+
react_1.default.createElement(core_1.Divider, null),
|
|
367
|
+
react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
|
|
368
|
+
react_1.default.createElement(core_1.Typography, { variant: "body1", align: 'center' }, "You haven\u2019t uploaded any documents yet. Click above and upload any .pdf , .doc, .docx, .ppt, .xls, .xlsx file. Your resume is a great way to start."))),
|
|
369
|
+
(expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
|
|
370
|
+
react_1.default.createElement(Pagination_1.default, { total: expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })),
|
|
371
|
+
react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: apiFoldername.split('/')[1] !== "EO Insurance" ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
372
|
+
"Are you sure you want to delete document ",
|
|
373
|
+
react_1.default.createElement("strong", null, deleteFileName),
|
|
374
|
+
" ?",
|
|
375
|
+
react_1.default.createElement("br", null),
|
|
376
|
+
"If you continue, this document will no longer be available.")) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
377
|
+
"Are you sure you want to delete Insurance document ",
|
|
378
|
+
react_1.default.createElement("strong", null, deleteFileName),
|
|
379
|
+
" ?",
|
|
380
|
+
react_1.default.createElement("br", null),
|
|
381
|
+
react_1.default.createElement("strong", null, "Note:"),
|
|
382
|
+
" You hold only one insurance document. Deleting it might effect your 'Matching'.")) }))));
|
|
379
383
|
};
|
|
380
384
|
exports.ParoDocumentsTable = ParoDocumentsTable;
|
package/package.json
CHANGED
package/readme.md
DELETED
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
# Expert Shared Components
|
|
2
|
-
|
|
3
|
-
This repository contains shared React components that are developed in the Expert Portal but can be utilized across the Internal and Client Portals. The primary components included are `Reviews` and `ReviewsTab`, which are used to display and manage reviews for experts.
|
|
4
|
-
|
|
5
|
-
## Table of Contents
|
|
6
|
-
|
|
7
|
-
- [Installation](#installation)
|
|
8
|
-
- [Usage](#usage)
|
|
9
|
-
- [Components](#components)
|
|
10
|
-
- [Reviews](#reviews)
|
|
11
|
-
- [ReviewsTab](#reviewstab)
|
|
12
|
-
- [Contributing](#contributing)
|
|
13
|
-
- [License](#license)
|
|
14
|
-
|
|
15
|
-
## Installation
|
|
16
|
-
|
|
17
|
-
To install the package, use npm or yarn:
|
|
18
|
-
|
|
19
|
-
```sh
|
|
20
|
-
npm install expert-shared-components
|
|
21
|
-
|
|
22
|
-
or
|
|
23
|
-
|
|
24
|
-
yarn add expert-shared-components
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Usage
|
|
28
|
-
|
|
29
|
-
To use the components in your project, import them as follows:
|
|
30
|
-
|
|
31
|
-
`import { Reviews, ReviewsTab } from 'expert-shared-components';`
|
|
32
|
-
|
|
33
|
-
## Components
|
|
34
|
-
|
|
35
|
-
### Reviews
|
|
36
|
-
|
|
37
|
-
The Reviews component is used to display a list of reviews for an expert.
|
|
38
|
-
|
|
39
|
-
Props
|
|
40
|
-
|
|
41
|
-
- paroProjectsData (array): An array of project data.
|
|
42
|
-
- legacyFreelancerId (number): The ID of the freelancer.
|
|
43
|
-
- expertName (string): The name of the expert.
|
|
44
|
-
- refetchParoProjects (function): A function to refetch project data.
|
|
45
|
-
- createOrUpdateRating (any): A function or object to create or update a rating.
|
|
46
|
-
|
|
47
|
-
### Example
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
<Reviews
|
|
51
|
-
paroProjectsData={paroProjectsData}
|
|
52
|
-
legacyFreelancerId={123}
|
|
53
|
-
expertName="John Doe"
|
|
54
|
-
refetchParoProjects={refetchParoProjects}
|
|
55
|
-
createOrUpdateRating={createOrUpdateRating}
|
|
56
|
-
/>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### ReviewsTab
|
|
60
|
-
|
|
61
|
-
The ReviewsTab component is used to display a tabbed interface for managing reviews.
|
|
62
|
-
|
|
63
|
-
Props
|
|
64
|
-
|
|
65
|
-
- paroProjectsData (array): An array of project data.
|
|
66
|
-
- legacyFreelancerId (number): The ID of the freelancer.
|
|
67
|
-
- expertName (string): The name of the expert.
|
|
68
|
-
- refetchParoProjects (function): A function to refetch project data.
|
|
69
|
-
- createOrUpdateRating (any): A function or object to create or update a rating.
|
|
70
|
-
- createOrUpdateRatingRequestMutation (any): A function or object to create or update a rating request.
|
|
71
|
-
|
|
72
|
-
### Example
|
|
73
|
-
|
|
74
|
-
```
|
|
75
|
-
<ReviewsTab
|
|
76
|
-
paroProjectsData={paroProjectsData}
|
|
77
|
-
legacyFreelancerId={123}
|
|
78
|
-
expertName="John Doe"
|
|
79
|
-
refetchParoProjects={refetchParoProjects}
|
|
80
|
-
createOrUpdateRating={createOrUpdateRating}
|
|
81
|
-
createOrUpdateRatingRequestMutation={createOrUpdateRatingRequestMutation}
|
|
82
|
-
/>
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
### Publishing the Components
|
|
86
|
-
- Update the version of the component in the package.json file, either the major or the minor version based on how big the change is
|
|
87
|
-
- Run `npm publish` to publish the component to the @paro.io/expert-shared-components npm package
|