@paro.io/expert-shared-components 1.5.0 → 1.5.2
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 +65 -60
- package/lib/components/DocumentCenter/DocumentCenter.js +9 -9
- package/lib/components/DocumentCenter/DocumentUploadRow.d.ts +3 -3
- package/lib/components/DocumentCenter/DocumentUploadRow.js +37 -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");
|
|
@@ -176,7 +177,8 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
|
|
|
176
177
|
projectStatus: file === null || file === void 0 ? void 0 : file.projectStatus,
|
|
177
178
|
uploadedDate: (0, utils_1.formatDate)(file === null || file === void 0 ? void 0 : file.uploadedDate),
|
|
178
179
|
uploadedBy: (file === null || file === void 0 ? void 0 : file.uploadedBy) || "-",
|
|
179
|
-
lastViewed: (file === null || file === void 0 ? void 0 : file.lastViewed) ? (0, utils_1.formatDate)(file === null || file === void 0 ? void 0 : file.lastViewed) : '
|
|
180
|
+
lastViewed: (file === null || file === void 0 ? void 0 : file.lastViewed) ? (0, utils_1.formatDate)(file === null || file === void 0 ? void 0 : file.lastViewed) : '',
|
|
181
|
+
lastViewedBy: file === null || file === void 0 ? void 0 : file.lastViewedBy,
|
|
180
182
|
projectId: file === null || file === void 0 ? void 0 : file.projectId,
|
|
181
183
|
};
|
|
182
184
|
}) : [];
|
|
@@ -232,6 +234,7 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
|
|
|
232
234
|
input: {
|
|
233
235
|
fileId: fileId,
|
|
234
236
|
lastViewed: new Date().toISOString(),
|
|
237
|
+
lastViewedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
|
|
235
238
|
},
|
|
236
239
|
}
|
|
237
240
|
}).then(() => {
|
|
@@ -315,64 +318,66 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
|
|
|
315
318
|
}
|
|
316
319
|
fileId && setFileId(fileId);
|
|
317
320
|
};
|
|
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
|
-
|
|
321
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
322
|
+
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 }),
|
|
323
|
+
react_1.default.createElement(utils_1.CustomPaper, { style: { height: `${(files === null || files === void 0 ? void 0 : files.length) === 0 ? '30vh' : 'auto'}` } },
|
|
324
|
+
(files === null || files === void 0 ? void 0 : files.length) > 0 && react_1.default.createElement("div", { className: 'w-1/3' },
|
|
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 ? react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
|
|
327
|
+
react_1.default.createElement(core_1.TableHead, null,
|
|
328
|
+
react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
|
|
329
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
|
|
330
|
+
headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
|
|
331
|
+
react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
|
|
332
|
+
react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
|
|
333
|
+
react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
|
|
334
|
+
react_1.default.createElement("b", null, headCell.label)),
|
|
335
|
+
orderBy === headCell.id && null))))),
|
|
336
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
|
|
337
|
+
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) => {
|
|
338
|
+
const { fileId, fileName, docType, docSize, clientName, expertName, projectName, projectStatus, uploadedDate, uploadedBy, lastViewed, lastViewedBy, projectId } = row;
|
|
339
|
+
return (react_1.default.createElement(core_1.TableRow, { key: fileId },
|
|
340
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
|
|
341
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
|
|
342
|
+
react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName, fileId, projectId), style: {
|
|
343
|
+
color: 'blue',
|
|
344
|
+
textDecoration: 'underline',
|
|
345
|
+
cursor: 'pointer',
|
|
346
|
+
} }, fileName)),
|
|
347
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
|
|
348
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
|
|
349
|
+
docSize.toFixed(1),
|
|
350
|
+
" MB"),
|
|
351
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, isClientPortal ? expertName : clientName),
|
|
352
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectName),
|
|
353
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, projectStatus),
|
|
354
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
|
|
355
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, `${uploadedBy.charAt(0)}${uploadedBy.slice(1).toLowerCase()}`),
|
|
356
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, `${lastViewedBy ? `Viewed by ${lastViewedBy === 'CLIENT' ? 'Client on ' : 'Expert on '}` : ''}${lastViewed ? lastViewed : 'Not opened'}`),
|
|
357
|
+
react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
|
|
358
|
+
react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
|
|
359
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
|
|
360
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => __awaiter(void 0, void 0, void 0, function* () { return handleDownloadFile(fileName, fileId, projectId); }) },
|
|
361
|
+
" ",
|
|
362
|
+
react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
|
|
363
|
+
" ")),
|
|
364
|
+
(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'}` },
|
|
365
|
+
react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName, fileId) },
|
|
366
|
+
" ",
|
|
367
|
+
react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
|
|
368
|
+
" "))))));
|
|
369
|
+
})))
|
|
370
|
+
:
|
|
371
|
+
react_1.default.createElement(core_1.Box, { style: { marginTop: '5rem' } },
|
|
372
|
+
react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
|
|
373
|
+
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."))),
|
|
374
|
+
(expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
|
|
375
|
+
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" })),
|
|
376
|
+
react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: (react_1.default.createElement(react_1.default.Fragment, null,
|
|
377
|
+
"Are you sure you want to delete document ",
|
|
378
|
+
react_1.default.createElement("strong", null, deleteFileName),
|
|
379
|
+
" ?",
|
|
380
|
+
react_1.default.createElement("br", null),
|
|
381
|
+
"If you continue, this document will no longer be available.")) }))));
|
|
377
382
|
};
|
|
378
383
|
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 {};
|
|
@@ -76,7 +76,7 @@ const generateOptions = (array, clientOptions, isClientPortal) => {
|
|
|
76
76
|
}
|
|
77
77
|
});
|
|
78
78
|
};
|
|
79
|
-
const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType,
|
|
79
|
+
const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, }) => {
|
|
80
80
|
const [isUploading, setIsUploading] = (0, react_1.useState)(false);
|
|
81
81
|
const [documentName, setDocumentName] = (0, react_1.useState)('');
|
|
82
82
|
const fileInputRef = (0, react_1.useRef)(null);
|
|
@@ -141,33 +141,41 @@ const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, set
|
|
|
141
141
|
reader.readAsDataURL(selectedFile);
|
|
142
142
|
}
|
|
143
143
|
};
|
|
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
|
-
|
|
144
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
145
|
+
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"),
|
|
146
|
+
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' } },
|
|
147
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center w-64' },
|
|
148
|
+
react_1.default.createElement("span", { className: "flex w-6 h-6 m-2 p-2 justify-center items-center rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }, "1"),
|
|
149
|
+
react_1.default.createElement(base_ui_1.Input, { label: "Enter document name", type: "text", placeholder: "Document Name", value: documentName, onChange: (e) => { e.preventDefault(); setDocumentName(e.target.value); }, labelClassName: 'w-52' })),
|
|
150
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
|
|
151
|
+
react_1.default.createElement("span", { className: "flex w-6 h-6 m-2 p-2 justify-center items-center rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }, "2"),
|
|
152
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
153
|
+
react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
|
|
154
|
+
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 })))),
|
|
155
|
+
paroDocuments && docType && (docType === 'EO Insurance') &&
|
|
156
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center' },
|
|
157
|
+
react_1.default.createElement("span", { className: "flex w-6 h-6 m-2 p-2 justify-center items-center rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }, "3"),
|
|
158
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
159
|
+
react_1.default.createElement(core_1.FormControl, { error: !!error, variant: "outlined", fullWidth: true },
|
|
160
|
+
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] : '' }) }),
|
|
161
|
+
error && react_1.default.createElement(core_1.FormHelperText, null, error)))),
|
|
162
|
+
!paroDocuments &&
|
|
163
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
|
|
164
|
+
react_1.default.createElement("span", { className: "flex w-6 h-6 m-2 p-2 justify-center items-center rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }, "3"),
|
|
165
|
+
react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
|
|
166
|
+
react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
|
|
167
|
+
react_1.default.createElement(base_ui_1.Select, { label: isClientPortal ? "Select Expert - Project" : "Select Client - Project", required: true, onChange: (e) => {
|
|
168
|
+
const selectedItem = clientOptions.find(option => option.value === e.target.value);
|
|
169
|
+
if (selectedItem) {
|
|
170
|
+
setClientAndProject(selectedItem);
|
|
171
|
+
}
|
|
172
|
+
}, value: (clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.value) || '', defaultValue: defaultValue.value, options: clientOptions })))),
|
|
173
|
+
react_1.default.createElement("div", { className: 'flex flex-row items-center flex-none' },
|
|
174
|
+
react_1.default.createElement("span", { className: "flex w-6 h-6 m-2 p-2 justify-center items-center rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }, paroDocuments && docType !== 'EO Insurance' ? 3 : 4),
|
|
175
|
+
react_1.default.createElement("input", { id: "upload-file", type: "file", accept: ".pdf,.doc,.docx,.ppt,.xls,.xlsx", style: { display: 'none' }, ref: fileInputRef, onChange: handleUpload }),
|
|
176
|
+
react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: disableButton ? "Please fill out the required info" : "" },
|
|
177
|
+
react_1.default.createElement(base_ui_1.Button, { label: "Upload", onClick: () => {
|
|
178
|
+
fileInputRef.current && fileInputRef.current.click();
|
|
179
|
+
}, color: "primary", disabled: disableButton, isLoading: isUploading }))))));
|
|
172
180
|
};
|
|
173
181
|
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
|