\n {image ? : avatarIcon}\n
\n )}\n\n {labelElement}\n \n );\n };\n\n render() {\n const { user, disableUserCard } = this.props;\n\n if (disableUserCard || !user) {\n return this.displayAvatarOnly();\n }\n\n return (\n ${getSimpleLabel(\"Task\")}: ${taskTitle}
\n${getSimpleLabel(\"Task\")} ID: ${processIdForDisplay(taskId)}
`;\n }\n\n if (requestId) {\n requestDetails = `${getSimpleLabel(\"Request\")}: ${requestTitle}
\n${getSimpleLabel(\"Request\")} ID: ${processIdForDisplay(requestId)}
`;\n }\n\n if (taskRevisionName) {\n taskRevisionDetails = `${getSimpleLabel(\"Task\")} revision: ${taskRevisionName} (${taskRevisionDescription})
`;\n }\n\n if (quoteId) {\n quoteDetails = `${getSimpleLabel(\"Quote\")}: ${quoteTitle}
\n${getSimpleLabel(\"Quote\")} ID: ${processIdForDisplay(quoteId)}
`;\n }\n\n if (invoiceId) {\n invoiceDetails = `${getSimpleLabel(isCreditNotes ? \"Credit note\" : \"Invoice\")} ID: ${processIdForDisplay(\n invoiceId\n )}
`;\n }\n\n if (purchaseOrderId) {\n purchaseOrderDetails = `${getSimpleLabel(\"Purchase order\")}: ${purchaseOrderTitle}
\n${getSimpleLabel(\"Purchase order\")} ID: ${processIdForDisplay(purchaseOrderId)}
`;\n }\n\n if (supplierName) {\n supplierDetails = `${getSimpleLabel(\"Supplier\")}: ${supplierName}
`;\n }\n\n return `\n${getSimpleLabel(\"Client\")}: ${clientName}
\n${getSimpleLabel(\"Project\")}: ${projectTitle}
\n ${supplierDetails}\n ${taskDetails}\n ${requestDetails}\n ${taskRevisionDetails}\n ${quoteDetails}\n ${invoiceDetails}\n ${purchaseOrderDetails}\n`;\n}\n\nexport async function sendReviewRequestNotification({\n users,\n apiUser,\n reviewer,\n taskId,\n taskTitle,\n clientName,\n projectTitle,\n taskRevisionId,\n taskRevisionName,\n taskRevisionDescription,\n}) {\n const reviewerDetails = users.find((x) => x.id === reviewer);\n\n const type = \"REVIEW_REQUEST\";\n const link = `tasks/${taskId}/review/${taskRevisionId}`;\n\n const id = `${Date.now()}${Math.floor(Math.random() * 10000)}`;\n\n if (!reviewerDetails) {\n return;\n }\n\n let emailParams = {\n type,\n id,\n receiverDetails: {\n id: reviewerDetails.id,\n },\n subject: `${apiUser.firstName} ${apiUser.lastName} requested your review on ${getSimpleLabel(\n \"task\"\n )} ${projectTitle} ${taskTitle} (${processIdForDisplay(taskId)})`,\n title: `${apiUser.firstName} ${apiUser.lastName} is requesting your review`,\n message: displayDetailsInEmail({\n taskId,\n taskTitle,\n projectTitle,\n clientName,\n taskRevisionName,\n taskRevisionDescription,\n }),\n link: `${window.location.origin}/${link}?notificationId=${id}`,\n };\n\n if (!reviewerDetails.notificationSettings || reviewerDetails.notificationSettings.emailReviewsRequest !== false) {\n try {\n await callRest({\n route: \"/sendNotificationEmail\",\n method: \"POST\",\n body: emailParams,\n includeCredentials: false,\n });\n } catch (e) {\n notification.error({\n message: (\n\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {e.message}\n
\n {useLogo ? (\n <>\n 
\n \n ) : (\n {message} }\n {isTakingALongTime && (\n Please wait, we are loading the data... \n )}\n
\n );\n }\n\n if (error) {\n console.log(\"error = \", error);\n console.log(\"content = \", content);\n return (\n \n
\n )}\n\n {content()}\n \n );\n}\n","import React from \"react\";\nimport * as Sentry from \"@sentry/react\";\nimport { Result, Button } from \"antd\";\n\nimport \"./ErrorBoundary.scss\";\n\nexport default class ErrorBoundary extends React.Component {\n constructor(props) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error) {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n componentDidCatch(error, errorInfo) {\n console.log(\"There has been an error:\", error);\n Sentry.captureException(error);\n }\n\n render() {\n if (this.state.hasError) {\n return (\n \n Next time you load the app, it will be fast.\n \n ) : undefined\n }\n />\n
{builtBody}
,\n footer: null,\n className: \"modal-no-buttons scheduled-notification-modal\",\n });\n } else {\n const notification = new Notification(scheduledNotification.title, {});\n\n if (systemNotificationLink) {\n notification.onclick = function () {\n let url = `${window.location.origin}${systemNotificationLink}`;\n if (url.includes(\"?\")) {\n url += \"&\";\n } else {\n url += \"?\";\n }\n url += `scheduledNotificationId=${scheduledNotification.id}`;\n window.open(url, \"_blank\");\n };\n }\n }\n }\n\n return null;\n}\n\nexport default withRouter(\n withSubscriptions({\n Component: ScheduledNotificationsManager,\n subscriptions: [\"organisationDetails\"],\n })\n);\n","import { useEffect, useContext } from \"react\";\nimport { useLocation, useHistory } from \"react-router-dom\";\nimport { Context } from \"common/context\";\n\nimport { Route } from \"react-router-dom\";\n\nexport default function SecureRoute({ children, ...props }) {\n const location = useLocation();\n const history = useHistory();\n const { apiUser } = useContext(Context);\n\n useEffect(() => {\n const path = location.pathname;\n if (!apiUser && path !== \"/sign-in\") {\n console.log(\"redirecting to sign in page\");\n history.push(\"/sign-in\");\n }\n }, [location, apiUser, history]);\n\n return \n
\n );\n }\n}\n","import moment from \"moment\";\n\nimport { enhanceQuoteWithInvoicing } from \"common/invoiceHelpers/sharedInvoiceHelpers\";\nimport { isAuthorised } from \"common/permissions\";\n\nexport function getFilteredTasks(params) {\n const { tasks, clients, projects, filter, sortBy = \"order\" } = params;\n let targetText = null;\n\n if (!filter) {\n return tasks;\n }\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n let filteredTasks = tasks\n .filter((task) => {\n if (task.isHidden || task.isExternalReference) {\n return false;\n }\n\n task.client = clients.find((x) => x.id === task.clientId);\n task.project = projects.find((x) => x.id === task.projectId);\n\n if (!task.client || !task.project) {\n return false;\n }\n\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(task));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (\n filter.createdAt &&\n (moment(task.createdAt).isBefore(filter.createdAt.between[0]) ||\n moment(task.createdAt).isAfter(filter.createdAt.between[1]))\n ) {\n return false;\n }\n\n if (\n filter.finishedAt &&\n (!task.finishedAt ||\n moment(task.finishedAt).isBefore(filter.finishedAt.between[0]) ||\n moment(task.finishedAt).isAfter(filter.finishedAt.between[1]))\n ) {\n return false;\n }\n\n if (\n filter.dueDate &&\n (!task.dueDate || task.dueDate < filter.dueDate.between[0] || task.dueDate > filter.dueDate.between[1])\n ) {\n return false;\n }\n\n if (targetText) {\n let matchesText = false;\n\n if (task.client.name.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((task.project.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if (task.title.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((task.subtitle || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if (task.id.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((task.assignedTo || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n })\n .sort((a, b) => (a[sortBy] < b[sortBy] ? -1 : 1));\n\n return filteredTasks;\n}\n\nexport function getFilteredProjects({ projects, filter }) {\n let targetText = null;\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n let filteredProjects = projects.filter((project) => {\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(project));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (filter.assignedTo && project.assignedTo !== filter.assignedTo.eq) {\n return false;\n }\n\n if (targetText) {\n let matchesText = false;\n if (project.title.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if (project.id.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((project.assignedTo || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n });\n\n return filteredProjects;\n}\n\nexport function getFilteredQuotes({ quotes, filter, clients, projects }) {\n let targetText = null;\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n quotes = quotes.map(enhanceQuoteWithInvoicing);\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n // const canSeeOthersQuotes = isAuthorised([\"QUOTES.VIEW_OTHERS_QUOTES\"]);\n let filteredQuotes = quotes.filter((quote) => {\n // if (!canSeeOthersQuotes && quote.assignedTo !== apiUser.id) {\n // return false;\n // }\n\n quote.client = clients.find((x) => x.id === quote.clientId);\n quote.project = projects.find((x) => x.id === quote.projectId);\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(quote));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (targetText) {\n let matchesText = false;\n if (quote.title.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if (quote.id.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((quote.assignedTo || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((quote.project?.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n });\n\n return filteredQuotes;\n}\n\nexport function getFilteredInvoices({ invoices, filter, clients, projects, isCreditNotes }) {\n let targetText = null;\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n let filteredInvoices = invoices.filter((invoice) => {\n if (isCreditNotes && !invoice.isCreditNote) {\n return false;\n } else if (!isCreditNotes && invoice.isCreditNote) {\n return false;\n }\n\n invoice.client = clients.find((x) => x.id === invoice.clientId);\n invoice.project = projects.find((x) => x.id === invoice.projectId);\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(invoice));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (targetText) {\n let matchesText = false;\n // if (invoice.title.toLowerCase().includes(targetText)) {\n // matchesText = true;\n // } else\n if (invoice?.id?.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((invoice?.author || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((invoice?.project?.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((invoice?.client?.name || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n });\n\n return filteredInvoices;\n}\n\nexport function getFilteredPurchaseOrders({ purchaseOrders, filter, suppliers, projects }) {\n let targetText = null;\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n let filteredPurchaseOrders = purchaseOrders.filter((purchaseOrder) => {\n purchaseOrder.supplier = suppliers.find((x) => x.id === purchaseOrder.supplierId);\n purchaseOrder.project = projects.find((x) => x.id === purchaseOrder.projectId);\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(purchaseOrder));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (targetText) {\n let matchesText = false;\n if (purchaseOrder.title.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if (purchaseOrder.id.toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((purchaseOrder.author || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((purchaseOrder.project?.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((purchaseOrder.supplier?.name || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n });\n\n return filteredPurchaseOrders;\n}\n\nexport function getFilteredRequests({ requests, filter, clients, projects, apiUser }) {\n let targetText = null;\n\n if (Object.keys(filter).length === 0) {\n return [];\n }\n\n if (filter.containsText) {\n targetText = filter.containsText.contains.toLowerCase();\n }\n\n const canSeeOthersRequests = isAuthorised([\"REQUESTS.VIEW_OTHERS_REQUESTS\", \"REQUESTS.EXECUTE\"]);\n let filteredRequests = requests.filter((request) => {\n let projectDetails = clients.find((x) => x.id === request.clientId);\n let clientDetails = projects.find((x) => x.id === request.projectId);\n if (!canSeeOthersRequests && request.requestedBy !== apiUser.id) {\n if (clientDetails?.sharedWithUsers?.includes(apiUser.id)) {\n return true;\n }\n\n if (projectDetails?.sharedWithUsers?.includes(apiUser.id)) {\n return true;\n }\n\n return false;\n }\n\n request.client = clientDetails;\n request.project = projectDetails;\n\n if (filter.callbacks && filter.callbacks.length) {\n let callbacksPassed = filter.callbacks.every((callback) => callback(request));\n if (!callbacksPassed) {\n return false;\n }\n }\n\n if (targetText) {\n let matchesText = false;\n if ((request.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((request.id || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((request.assignedTo || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((request.project?.title || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n } else if ((request.latestFormName || \"\").toLowerCase().includes(targetText)) {\n matchesText = true;\n }\n\n if (!matchesText) {\n return false;\n }\n }\n\n return true;\n });\n\n return filteredRequests;\n}\n","import { notification } from \"antd\";\n\nimport { callGraphQLSimple } from \"common/apiHelpers\";\nimport { getSimpleLabel } from \"common/labels\";\nimport { getUppercaseStatus } from \"common/helpers\";\nimport changeTaskStatus from \"common/changeTaskStatus\";\nimport { HAS_SHEETS, FILE_TYPES_DETAILS } from \"common/shared\";\nimport { downloadPDF, downloadSheetPDF } from \"common/helpers\";\n\nexport async function recalculateTaskEstimatedHours(taskId) {\n const task = (\n await callGraphQLSimple({\n message: `Failed to load ${getSimpleLabel(\"task\")}`,\n queryName: \"getTaskSimple\",\n variables: {\n id: taskId,\n },\n })\n ).data.getTask;\n\n const taskEstimatedHours = task.revisions.items.reduce((total, revision) => {\n return total + revision.estimatedHours;\n }, 0);\n\n await callGraphQLSimple({\n message: `Failed to update ${getSimpleLabel(\"task\")}`,\n queryName: \"updateTask\",\n variables: {\n input: {\n id: taskId,\n estimatedHours: taskEstimatedHours,\n },\n },\n });\n}\n\nexport async function updateDeletedFiles(taskRevision, fileType) {\n const deletedFilesByType = JSON.parse(taskRevision.deletedFilesByType || \"{}\");\n if (!deletedFilesByType.hasOwnProperty(fileType)) {\n deletedFilesByType[fileType] = 0;\n }\n deletedFilesByType[fileType]++;\n\n await callGraphQLSimple({\n message: `Failed to update ${getSimpleLabel(\"task revision\")}`,\n queryName: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n deletedFilesByType: JSON.stringify(deletedFilesByType),\n },\n },\n });\n}\n\nexport async function checkTasksBasedOnStatus({ tasks, organisationDetails }) {\n const atLeastOneStatusMeansDone = (organisationDetails.taskStatuses || []).find((x) => x.type === \"DONE\");\n\n if (!atLeastOneStatusMeansDone) {\n return;\n }\n\n for (let task of tasks) {\n if (task.isHidden) {\n continue;\n }\n let statusDetails = (organisationDetails.taskStatuses || []).find(\n (statusDetails) => getUppercaseStatus(statusDetails.name) === getUppercaseStatus(task.status)\n );\n\n let statusMeansDone = false;\n if (statusDetails && statusDetails.type === \"DONE\") {\n statusMeansDone = true;\n }\n\n if (!!task.isFinished !== statusMeansDone) {\n console.log(\"Task status does not match isFinished\", task.id, task.status, task.isFinished, statusMeansDone);\n await changeTaskStatus({\n taskId: task.id,\n status: task.status,\n organisationDetails,\n authorIsUnknown: true,\n recordActivity: false,\n });\n }\n }\n}\n\nexport async function downloadLatestPDF({ file, task, users, organisationDetails }) {\n file = (\n await callGraphQLSimple({\n message: \"Could not retrieve file details\",\n queryName: \"getFile\",\n variables: {\n id: file.id,\n },\n })\n ).data.getFile;\n const latestFileVersion = file.versions.items.slice(-1)[0];\n\n let hasPDF = true;\n if (!latestFileVersion) {\n hasPDF = false;\n } else if (file.type !== \"REPORT\" && !latestFileVersion.savedAt && !latestFileVersion.publishEndAt) {\n hasPDF = false;\n }\n\n if (!hasPDF) {\n notification.info({\n message: {FILE_TYPES_DETAILS[file.type]?.label} file does not yet have a PDF export,\n });\n return;\n }\n\n if (!HAS_SHEETS[file.type]) {\n downloadSheetPDF({\n sheetRevision: file.sheets.items[0].revisions.items.slice(-1)[0],\n file,\n task,\n });\n } else {\n downloadPDF({\n fileKey: file.versions.items[file.versions.items.length - 1].exports[0].key,\n file,\n task,\n });\n }\n}\n","import { Progress, Typography } from \"antd\";\nimport cx from \"classnames\";\n\nimport \"./BudgetBar.scss\";\n\nexport default function BudgetBar({\n amountSpent,\n amountBudget,\n replacementLabel,\n size = \"normal\",\n hideFinancials,\n includeLabel = true,\n includePercentage = false,\n includeBudgetUsedLabel = true,\n}) {\n let totalPercentage = 0;\n if (amountBudget !== 0 && amountSpent !== 0) {\n totalPercentage = Math.round((amountSpent / amountBudget) * 100);\n } else if (amountBudget === 0 && amountSpent !== 0) {\n totalPercentage = Infinity;\n }\n\n if (isNaN(totalPercentage)) {\n totalPercentage = 0;\n }\n\n let percentageToDisplay = totalPercentage;\n let blue = \"#19aae8\";\n let red = \"#ff4d4f\";\n let gray = \"#e0eef4\";\n let trailColor = gray;\n let strokeColor = blue;\n let status = \"normal\";\n if (totalPercentage > 100) {\n percentageToDisplay = percentageToDisplay - 100;\n status = \"exception\";\n trailColor = blue;\n strokeColor = red;\n }\n\n let progressLabel = `${totalPercentage}`;\n if (isFinite(totalPercentage)) {\n progressLabel += \"%\";\n }\n\n if (includeLabel) {\n if (!hideFinancials) {\n progressLabel += ` (${window.formatCurrency(\"GBP\", amountSpent || \"0\")})`;\n } else {\n progressLabel += ` (${amountSpent || \"0\"} hour${amountSpent === 1 ? \"\" : \"s\"})`;\n }\n }\n\n return (\n \n
\n \n \n \n 
\n \n
\n \n {signInButtons}\n\n {!this.state.isOnPublicUploadPage && (\n
\n \n \n
\n )}\n \n {replacementLabel ? (\n {replacementLabel} \n ) : (\n <>\n {includePercentage && includeBudgetUsedLabel && (\n Budget used: \n )}\n \"\"}\n status={status}\n />\n {(includeLabel || includePercentage) && (\n {progressLabel} \n )}\n \n )}\n
\n );\n}\n","import moment from \"moment\";\nimport { Select } from \"antd\";\n\nimport { getUppercaseStatus, processIdForDisplay, getReadableStatus, getUserReadableCatLevel } from \"common/helpers\";\nimport { isAuthorised } from \"common/permissions\";\nimport { formatCurrency } from \"common/shared\";\nimport { getSimpleLabel } from \"common/labels\";\nimport changeTaskStatus from \"common/changeTaskStatus\";\n\nimport BudgetBar from \"BudgetBar/BudgetBar\";\nimport Avatar from \"Avatar/Avatar\";\n\nexport function getTableColumns({ users, organisationDetails }) {\n const atLeastOneStatusMeansDone = (organisationDetails.taskStatuses || []).find((x) => x.type === \"DONE\");\n\n return [\n {\n title: `${getSimpleLabel(\"Task\")} ID`,\n width: 140,\n fieldFunction: ({ task }) => processIdForDisplay(task.id),\n sorter: {\n compare: (a, b) => (a.id < b.id ? -1 : 1),\n },\n },\n {\n title: \"Status\",\n fieldFunction: ({ task }) => {\n const result = getReadableStatus(task.status);\n return result;\n },\n width: 140,\n sorter: {\n compare: (a, b) => ((a.status || \"\").toLowerCase() < (b.status || \"\").toLowerCase() ? -1 : 1),\n },\n render: (_, task) => {\n let disabled = task.isArchived === \"yes\" || (task.isFinished === \"yes\" && !atLeastOneStatusMeansDone);\n\n return (\n \n \n +\n {othersList.length}\n \n
\n \n {list}\n {othersElement}\n
\n );\n}\n","import { useState, useEffect } from \"react\";\n\nexport default function useWindowWidth() {\n const [width, setWidth] = useState(window.innerWidth);\n\n useEffect(() => {\n function handleResize() {\n setWidth(window.innerWidth);\n }\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }, []);\n\n return width;\n}\n","import { Tooltip } from \"antd\";\nimport { QuestionCircleFilled } from \"@ant-design/icons\";\nimport \"./Explanation.scss\";\n\ninterface ExplanationProps {\n title: String | JSX.Element;\n}\n\nexport default function Explanation({ title, ...propsForTooltip }: ExplanationProps) {\n let overlayInnerStyle = {\n width: Math.min(window.innerWidth - 50, 400),\n };\n\n return (\n \n
\n );\n}\n","import React from \"react\";\nimport cx from \"classnames\";\nimport _ from \"lodash\";\nimport { Mentions } from \"antd\";\nimport { CloseCircleFilled } from \"@ant-design/icons\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport \"./Input.scss\";\n\ntype Props = {\n placeholder?: string;\n defaultValue?: string;\n className?: string;\n onChange?: any;\n onKeyUp?: any;\n onEnterCreateSubtask?: any;\n onEnter?: any;\n fullWidth?: boolean;\n flexGrow?: boolean;\n disabled?: any;\n multiLine?: boolean;\n hidden?: boolean;\n allowEnter?: boolean;\n centered?: boolean;\n showBorder?: boolean;\n \"data-cy\"?: string;\n autoFocus?: boolean;\n prefix?: any;\n suffix?: any;\n numerical?: boolean;\n style?: object;\n fireOnChangeWithoutBlur?: boolean;\n fireOnChangeWithoutBlurWithDebounce?: boolean;\n debounceDelay?: number;\n allowDecimals?: boolean;\n allowClear?: boolean;\n useAutoComplete?: boolean;\n autoCompleteOptions?: any;\n id?: string;\n minRows?: number;\n memoize?: boolean;\n onClick?: (e) => void;\n ignoreChangesToDefaultValue?: boolean;\n};\n\nconst DEFAULT_DEBOUNCE_DELAY_MILLISECONDS = 1000;\n\nexport class Input extends React.Component\n
\n {prefix}
;\n }\n\n return multiLine ? (\n \n
\n ) : (\n \n {prefixElement}\n {useAutoComplete ? (\n \n {autoCompleteOptions.map((option) => (\n {option} \n ))}\n \n ) : (\n \n )}\n\n {(suffix || (allowClear && value)) && (\n
\n );\n }\n}\n\nexport default React.memo(Input, (prevProps, nextProps) => {\n if (!prevProps.memoize && !nextProps.memoize) {\n return false;\n }\n\n const PROPS_TO_MONITOR = [\"className\", \"disabled\"];\n for (let propName of PROPS_TO_MONITOR) {\n if (prevProps[propName] !== nextProps[propName]) {\n return false;\n }\n }\n return true;\n});\n","export const DashboardIcon = () => (\n \n);\n\nexport const BacklogIcon = () => (\n \n);\n\nexport const ProjectIcon = () => (\n \n);\n\nexport const PaperclipIcon = () => (\n \n);\n\nexport const ReplyIcon = () => (\n \n);\n\nexport const NotificationIcon = () => (\n \n);\n\nexport const FolderIcon = () => (\n \n);\n\nexport const BoardIcon = () => (\n \n);\n\nexport const ListIcon = () => (\n \n);\n\nexport const TimelineIcon = () => (\n \n);\n\nexport const TableIcon = () => (\n \n);\n\nexport const VersionsIcon = () => (\n \n {suffix}\n {allowClear && value && (\n {\n this.setState({ value: \"\" });\n if (onChange) {\n onChange(\"\");\n }\n }}\n >\n
\n )}\n \n
\n );\n\n return {\n label,\n value: user.id,\n disabled: isDisabled,\n };\n });\n }\n\n return optionsForMultipleAssignedUsers;\n}\n","import \"./FormTextButton.scss\";\n\ninterface FormTextButtonProps {\n children: any;\n onClick: (e) => void;\n}\n\nexport default function FormTextButton({ children, onClick }: FormTextButtonProps) {\n return (\n {extraMessages.join(\", \")}
\n \n \n {includeUnassigned ? (\n \n \n ) : null}\n {filteredUsers\n .filter((x) => x)\n .map((x) => (\n \n this.props.onChange(apiUser.id)}>\n Assign to me\n \n )}\n
\n );\n }\n}\n\nexport default withSubscriptions({\n Component: UsersFilter,\n subscriptions: [],\n});\n","import { Form, Input, InputNumber, Checkbox, Radio } from \"antd\";\n\nimport { getGroupNamesForUser } from \"common/permissions\";\nimport { CUSTOM_TASK_FIELD_MARKER } from \"common/constants\";\n\nimport DatePicker from \"DatePicker/DatePicker\";\nimport UsersFilter from \"UsersFilter/UsersFilter\";\n\nexport function displayCustomFieldsInCreationModal({ customFieldDefinitions, apiUser, groups }) {\n const groupNamesForUser = getGroupNamesForUser(apiUser.id, groups);\n\n return customFieldDefinitions\n .filter((field) => {\n if (field.isStatic) {\n return false;\n }\n\n if (!field.groupsThatCanSee || field.groupsThatCanSee.length === 0) {\n return true;\n }\n\n return field.groupsThatCanSee.some((group) => groupNamesForUser.includes(group));\n })\n .map((field) => {\n let formInputProps = {};\n let labelElement = field.label;\n let inputElement = null;\n\n switch (field.type) {\n case \"TEXT\":\n inputElement = ;\n break;\n case \"TEXTAREA\":\n inputElement = (\n \n
\n \n
\n \n ))}\n \n {showAssignToMe && (\n \n \n
\n \n \n \n );\n}\n","import React, { Component } from \"react\";\nimport cx from \"classnames\";\n\nimport { Typography } from \"antd\";\n\nimport { CloudUploadOutlined } from \"@ant-design/icons\";\n\nimport \"./DragAndDrop.scss\";\n\nconst DEFAULT_FILES_TO_IGNORE = [\n \".DS_Store\", // OSX indexing file\n \"Thumbs.db\", // Windows indexing file\n];\n\n// map of common (mostly media types) mime types to use when the browser does not supply the mime type\nconst EXTENSION_TO_MIME_TYPE_MAP = {\n avi: \"video/avi\",\n gif: \"image/gif\",\n ico: \"image/x-icon\",\n jpeg: \"image/jpeg\",\n jpg: \"image/jpeg\",\n mkv: \"video/x-matroska\",\n mov: \"video/quicktime\",\n mp4: \"video/mp4\",\n pdf: \"application/pdf\",\n png: \"image/png\",\n zip: \"application/zip\",\n};\n\nclass DragAndDrop extends Component {\n constructor(props) {\n super(props);\n\n this.state = {\n drag: false,\n dragCounter: 0,\n };\n\n this.dropRef = React.createRef();\n\n this.dragResetInterval = setInterval(this.resetDrag, 5000);\n }\n\n resetDrag = () => {\n this.setState({\n drag: false,\n dragCounter: 0,\n });\n };\n\n componentWillUnmount() {\n if (this.dragResetInterval) {\n clearInterval(this.dragResetInterval);\n }\n }\n\n ////////////////////////////////////////////////////////////\n\n shouldIgnoreFile = (file) => {\n // remove files whose names start with a dot\n if (file.name.indexOf(\".\") === 0) {\n return true;\n }\n\n return DEFAULT_FILES_TO_IGNORE.indexOf(file.name) >= 0;\n };\n\n copyString = (aString) => {\n return ` ${aString}`.slice(1);\n };\n\n traverseDirectory = (entry) => {\n const reader = entry.createReader();\n // Resolved when the entire directory is traversed\n return new Promise((resolveDirectory) => {\n const iterationAttempts = [];\n const errorHandler = () => {};\n const _this = this;\n function readEntries() {\n // According to the FileSystem API spec, readEntries() must be called until\n // it calls the callback with an empty array.\n reader.readEntries((batchEntries) => {\n if (!batchEntries.length) {\n // Done iterating this particular directory\n resolveDirectory(Promise.all(iterationAttempts));\n } else {\n // Add a list of promises for each directory entry. If the entry is itself\n // a directory, then that promise won't resolve until it is fully traversed.\n iterationAttempts.push(\n Promise.all(\n batchEntries.map((batchEntry) => {\n if (batchEntry.isDirectory) {\n return _this.traverseDirectory(batchEntry);\n }\n return Promise.resolve(batchEntry);\n })\n )\n );\n // Try calling readEntries() again for the same dir, according to spec\n readEntries();\n }\n }, errorHandler);\n }\n // initial call to recursive entry reader function\n readEntries();\n });\n };\n\n // package the file in an object that includes the fullPath from the file entry\n // that would otherwise be lost\n packageFile = (file, entry) => {\n let fileTypeOverride = \"\";\n // handle some browsers sometimes missing mime types for dropped files\n const hasExtension = file.name && file.name.lastIndexOf(\".\") !== -1;\n if (hasExtension && !file.type) {\n const fileExtension = (file.name || \"\").split(\".\").pop();\n fileTypeOverride = EXTENSION_TO_MIME_TYPE_MAP[fileExtension];\n }\n return {\n fileObject: file, // provide access to the raw File object (required for uploading)\n fullPath: entry ? this.copyString(entry.fullPath) : file.name,\n lastModified: file.lastModified,\n lastModifiedDate: file.lastModifiedDate,\n name: file.name,\n size: file.size,\n type: file.type ? file.type : fileTypeOverride,\n webkitRelativePath: file.webkitRelativePath,\n };\n };\n\n getFile = (entry) => {\n return new Promise((resolve) => {\n entry.file((file) => {\n resolve(this.packageFile(file, entry));\n });\n });\n };\n\n handleFilePromises = (promises, fileList) => {\n return Promise.all(promises).then((files) => {\n files.forEach((file) => {\n if (!this.shouldIgnoreFile(file)) {\n fileList.push(file);\n }\n });\n return fileList;\n });\n };\n\n getDataTransferFiles = (dataTransfer) => {\n const dataTransferFiles = [];\n const folderPromises = [];\n const filePromises = [];\n\n [].slice.call(dataTransfer.items).forEach((listItem) => {\n if (typeof listItem.webkitGetAsEntry === \"function\") {\n const entry = listItem.webkitGetAsEntry();\n\n if (entry) {\n if (entry.isDirectory) {\n folderPromises.push(this.traverseDirectory(entry));\n } else {\n filePromises.push(this.getFile(entry));\n }\n }\n } else {\n dataTransferFiles.push(listItem);\n }\n });\n\n if (folderPromises.length) {\n const flatten = (array) => array.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);\n\n return Promise.all(folderPromises).then((fileEntries) => {\n const flattenedEntries = flatten(fileEntries);\n // collect async promises to convert each fileEntry into a File object\n flattenedEntries.forEach((fileEntry) => {\n filePromises.push(this.getFile(fileEntry));\n });\n return this.handleFilePromises(filePromises, dataTransferFiles);\n });\n } else if (filePromises.length) {\n return this.handleFilePromises(filePromises, dataTransferFiles);\n }\n return Promise.resolve(dataTransferFiles);\n };\n\n /**\n * This function should be called from both the onDrop event from your drag/drop\n * dropzone as well as from the HTML5 file selector input field onChange event\n * handler. Pass the event object from the triggered event into this function.\n * Supports mix of files and folders dropped via drag/drop.\n *\n * Returns: an array of File objects, that includes all files within folders\n * and subfolders of the dropped/selected items.\n */\n getDroppedOrSelectedFiles = (event) => {\n const dataTransfer = event.dataTransfer;\n\n if (dataTransfer && dataTransfer.items) {\n return this.getDataTransferFiles(dataTransfer).then((fileList) => {\n return Promise.resolve(fileList);\n });\n }\n const files = [];\n const dragDropFileList = dataTransfer && dataTransfer.files;\n const inputFieldFileList = event.target && event.target.files;\n const fileList = dragDropFileList || inputFieldFileList || [];\n\n // convert the FileList to a simple array of File objects\n for (let i = 0; i < fileList.length; i++) {\n files.push(this.packageFile(fileList[i]));\n }\n return Promise.resolve(files);\n };\n\n onDrop = async (e) => {\n const files = await this.getDroppedOrSelectedFiles(e);\n this.setState({ files });\n\n this.props.onChange(e, files);\n };\n\n handleDrag = (e) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n handleDragIn = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n this.setState({ dragCounter: this.state.dragCounter + 1 });\n // if (e.dataTransfer.items && e.dataTransfer.items.length > 0) {\n this.setState({ drag: true });\n // }\n };\n\n handleDragOut = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n this.setState({ dragCounter: this.state.dragCounter - 1 });\n // if (this.state.dragCounter === 0) {\n this.setState({ drag: false });\n // }\n };\n\n handleDrop = (e) => {\n e.preventDefault();\n e.stopPropagation();\n\n this.setState({ drag: false });\n if (e.dataTransfer) {\n this.onDrop(e);\n e.dataTransfer.clearData();\n this.setState({ dragCounter: 0 });\n }\n };\n componentDidMount() {\n let div = this.dropRef.current;\n if (!this.props.disabled) {\n div.addEventListener(\"dragenter\", this.handleDragIn);\n div.addEventListener(\"dragleave\", this.handleDragOut);\n div.addEventListener(\"dragover\", this.handleDrag);\n div.addEventListener(\"drop\", this.handleDrop);\n }\n }\n componentWillUnmount() {\n let div = this.dropRef.current;\n div.removeEventListener(\"dragenter\", this.handleDragIn);\n div.removeEventListener(\"dragleave\", this.handleDragOut);\n div.removeEventListener(\"dragover\", this.handleDrag);\n div.removeEventListener(\"drop\", this.handleDrop);\n }\n render() {\n return (\n
\n \n \n
\n \n );\n }\n}\nexport default DragAndDrop;\n","import { useState, useEffect } from \"react\";\nimport cx from \"classnames\";\nimport { Typography, Modal } from \"antd\";\nimport {\n LoadingOutlined,\n FilePdfOutlined,\n VideoCameraOutlined,\n FileOutlined,\n FileTextOutlined,\n UploadOutlined,\n} from \"@ant-design/icons\";\n\nimport DragAndDrop from \"DragAndDrop/DragAndDrop\";\n\nimport \"./Upload.scss\";\n\nexport default function Upload({ onChange, className, size = \"normal\", fullWidth, placeholder }) {\n const [thumbnail, setThumbnail] = useState();\n const [fileType, setFileType] = useState();\n const [fileName, setFileName] = useState();\n // const [fileSize, setFileSize] = useState();\n const [wasFileAdded, setWasFileAdded] = useState(false);\n const [isLoadingThumbnail, setIsLoadingThumbnail] = useState(false);\n const [randomComponentId, setRandomComponentId] = useState();\n\n useEffect(() => {\n const newRandomId = `${Date.now()}-${Math.floor(Math.random() * 100000)}`;\n setRandomComponentId(newRandomId);\n }, []);\n\n function onFilesDropped(e, attachments) {\n if (attachments.length > 1) {\n Modal.error({\n closable: true,\n maskClosable: true,\n title: <>Too many files at once,\n content: <>You can only upload 1 file at a time, but you have tried to upload {attachments.length} files.,\n });\n return;\n }\n\n onFileChange({\n target: {\n files: attachments.map((attachment) => attachment.fileObject),\n },\n });\n }\n\n function onFileChange(e) {\n const file = e.target.files[0];\n setFileType(file?.type);\n setFileName(file?.name);\n // setFileSize(file?.size);\n\n var reader = new FileReader();\n\n reader.onloadend = function () {\n setIsLoadingThumbnail(false);\n setThumbnail(reader.result);\n };\n\n if (file) {\n reader.readAsDataURL(file);\n setIsLoadingThumbnail(true);\n setWasFileAdded(true);\n } else {\n setIsLoadingThumbnail(false);\n setThumbnail(null);\n setWasFileAdded(false);\n }\n\n onChange(e, file);\n }\n\n function displayThumbnail() {\n if (!thumbnail) {\n return null;\n }\n\n if (fileType.includes(\"image\")) {\n return \n {icon}\n {fileName} \n
\n );\n }\n\n if (randomComponentId === undefined) {\n return null;\n }\n\n return (\n \n \n
\n \n \n \n );\n}\n","import { useState } from \"react\";\nimport { Storage } from \"aws-amplify\";\nimport { withRouter } from \"react-router-dom\";\nimport { Form, Modal, Button, Input, Typography, Space, message, notification, Checkbox } from \"antd\";\nimport { PlusCircleOutlined, EditOutlined, DeleteOutlined } from \"@ant-design/icons\";\nimport { useHistory } from \"react-router-dom\";\nimport { readAndCompressImage } from \"browser-image-resizer\";\n\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { INVALID_CHARACTERS, MAX_INITIALS_LENGTH } from \"common/constants\";\nimport { createClientInApi, getLabel } from \"common/helpers\";\nimport { getExtensionFromKey } from \"common/shared\";\nimport { useForceUpdate } from \"common/helpers\";\n\nimport ClientContactModal from \"Modals/ClientContactModal/ClientContactModal\";\nimport Upload from \"Upload/Upload\";\n\nimport \"./CreateClientModal.scss\";\n\nexport function CreateClientModal({ onClose, onSave, organisationDetails }) {\n const history = useHistory();\n const [form] = Form.useForm();\n const [isLoading, setIsLoading] = useState(false);\n const [isClientContactModalVisible, setIsClientContactModalVisible] = useState(false);\n const [selectedContact, setSelectedContact] = useState();\n const forceUpdate = useForceUpdate();\n\n async function onClientContactModalSubmit(contactDetails) {\n if (selectedContact) {\n const contacts = form.getFieldsValue().contacts;\n const index = contacts.findIndex((contact) => contact.id === selectedContact.id);\n contacts[index] = contactDetails;\n form.setFieldsValue({ contacts });\n } else {\n const contacts = form.getFieldsValue().contacts || [];\n contacts.push(contactDetails);\n form.setFieldsValue({ contacts });\n }\n\n forceUpdate();\n setSelectedContact(undefined);\n setIsClientContactModalVisible(false);\n }\n\n async function onSubmit(params) {\n const { logo } = params;\n try {\n setIsLoading(true);\n if (!logo) {\n await triggerCreateClient(params);\n } else {\n // if we have a logo, then we need to upload it to S3 before\n // proceeding to create the client record in the database\n const extension = getExtensionFromKey(logo.name);\n\n if (![\"png\", \"jpg\", \"jpeg\"].includes(extension.toLowerCase())) {\n alert(\"Only .png, .jpg and .jpeg formats are allowed\");\n setIsLoading(false);\n return;\n }\n const resizedLogo = await readAndCompressImage(logo, {\n quality: 0.8,\n maxWidth: 500,\n maxHeight: 500,\n mimeType: logo.type,\n });\n\n const fileName = `${organisationDetails.id}/clients/${Date.now()}${Math.floor(Math.random() * 10000)}`;\n const { key } = await Storage.put(fileName, resizedLogo, {\n contentType: \"image/png\",\n });\n\n form.setFieldsValue({ key });\n await triggerCreateClient({ ...params, key });\n }\n form.resetFields();\n setIsLoading(false);\n onClose();\n } catch (e) {\n setIsLoading(false);\n console.log(e);\n notification.error({\n message: (\n {actions}
;\n }\n if (actionsPrefix) {\n actionsPrefixElement = {actionsPrefix}
;\n }\n if (titleElement || actionsElement) {\n headerElement = (\n \n \n {actionsPrefixElement}\n {titleElement || }\n {actionsElement || }\n \n
\n );\n }\n\n let dataTitle = props[\"data-analytics\"] || props[\"data-cy\"];\n if (!dataTitle) {\n if (typeof title === \"string\" || typeof title === \"number\") {\n dataTitle = title;\n } else if (typeof className === \"string\") {\n dataTitle = className;\n }\n }\n\n return (\n \n
\n );\n };\n\n displayViewer = () => {\n const { error, fileBuffer } = this.state;\n const { layout = \"default\", fileData } = this.props;\n\n if (error || (!fileBuffer && !fileData)) {\n return null;\n }\n\n if (layout === \"default\") {\n return this.displayDefaultViewer();\n } else {\n return this.displayScrollingViewer();\n }\n };\n\n render() {\n const { isLoading, error, pageCount } = this.state;\n const { layout = \"default\", includePagination = true, className, zoom, includePreloader = true } = this.props;\n\n const stateCurrentPageNumber = this.state.currentPageNumber;\n\n let style = {};\n if (zoom !== undefined) {\n style.transform = `scale(${zoom})`;\n }\n\n return (\n \n {layout === \"default\" && includePagination && (\n this.setState({ currentPageNumber })}\n total={pageCount}\n simple\n />\n )}\n\n {includePreloader && (\n
\n \n
\n )}\n \n Cannot generate PDF \n {error} \n
\n\n {this.displayViewer()}\n \n {\n setIsLoaded(true);\n }}\n />\n
\n );\n}\n\nfunction ScrollingPdfLowResPageViewer({ fileData, renderMode, pageDimensions, pageRefs, onError }) {\n if (!pageDimensions) {\n return null;\n }\n\n return (\n \n {\n if (onError && typeof onError === \"function\") {\n onError();\n }\n }}\n >\n {pageDimensions.map(({ width, height }, pageIndex) => {\n return (\n
\n );\n}\n\nconst MemoScrollingPdfLowResPageViewer = React.memo(ScrollingPdfLowResPageViewer);\n\nexport default React.memo(PdfRenderer);\n","import React from \"react\";\nimport cx from \"classnames\";\nimport { Spin } from \"antd\";\nimport { HomeOutlined, PlusOutlined, MinusOutlined } from \"@ant-design/icons\";\n\nimport \"./Zoomable.scss\";\n\nexport default class Zoomable extends React.Component {\n state = {\n optimalScale: 1,\n scale: 1,\n optimalX: 0,\n optimalY: 0,\n contentX: 0,\n contentY: 0,\n centerContentX: 0,\n centerContentY: 0,\n contentXOnStart: 0,\n contentYOnStart: 0,\n mouseXOnStart: null,\n mouseYOnStart: null,\n isMouseDown: false,\n contentWidth: 0,\n contentHeight: 0,\n isAnimating: false,\n };\n\n constructor(props) {\n super(props);\n\n this.contentRef = React.createRef();\n this.zoomableRef = React.createRef();\n this.canvasRef = React.createRef();\n }\n\n componentDidMount() {\n window.addEventListener(\"mouseup\", this.onMouseUp);\n window.addEventListener(\"mousemove\", this.onMouseMove);\n this.zoomableRef.current.addEventListener(\"wheel\", this.onWheel);\n this.computeScale();\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"mouseup\", this.onMouseUp);\n window.removeEventListener(\"mousemove\", this.onMouseMove);\n this.zoomableRef.current.removeEventListener(\"wheel\", this.onWheel);\n }\n\n componentDidUpdate(prevProps) {\n const oldOnChange = JSON.stringify(prevProps.refreshOnChange);\n const newOnChange = JSON.stringify(this.props.refreshOnChange);\n if (oldOnChange !== newOnChange) {\n this.computeScale();\n }\n }\n\n onHome = () => {\n this.computeScale(true);\n };\n\n onPlus = () => {\n const { scale } = this.state;\n const newScale = scale + 0.1;\n this.zoomAtCoordinates({ percentX: 50, percentY: 50, newScale, animated: true });\n };\n\n onMinus = () => {\n const { scale, optimalScale } = this.state;\n const newScale = Math.max(scale - 0.1, optimalScale);\n this.zoomAtCoordinates({ percentX: 50, percentY: 50, newScale, animated: true });\n };\n\n onWheel = (e) => {\n e.preventDefault();\n\n const { contentWidth, contentHeight, scale } = this.state;\n let delta = e.deltaY;\n let newScale = this.state.scale;\n\n const content = this.contentRef.current;\n newScale -= delta / 100;\n newScale = Math.max(this.state.optimalScale, newScale);\n\n let contentBounds = content.getBoundingClientRect();\n let mouseContentX = (e.clientX - contentBounds.left) / scale;\n let mouseContentY = (e.clientY - contentBounds.top) / scale;\n\n let mouseContentPercentX = mouseContentX / contentWidth;\n let mouseContentPercentY = mouseContentY / contentHeight;\n\n this.zoomAtCoordinates({\n percentX: mouseContentPercentX * 100,\n percentY: mouseContentPercentY * 100,\n newScale,\n animated: false,\n });\n };\n\n zoomAtCoordinates = ({ percentX, percentY, newScale, animated = false }) => {\n percentX /= 100;\n percentY /= 100;\n const { contentX, contentY, contentWidth, contentHeight, scale } = this.state;\n let newContentX = contentX;\n let newContentY = contentY;\n let addedWidth = contentWidth * newScale - contentWidth * scale;\n let addedHeight = contentHeight * newScale - contentHeight * scale;\n newContentX -= addedWidth * percentX;\n newContentY -= addedHeight * percentY;\n\n if (animated) {\n this.doAnimation();\n }\n this.setState({ scale: newScale, contentX: newContentX, contentY: newContentY });\n };\n\n onMouseUp = () => {\n this.setState({ isMouseDown: false });\n };\n\n onMouseMove = (e) => {\n const { isMouseDown, contentXOnStart, contentYOnStart, mouseXOnStart, mouseYOnStart } = this.state;\n const { active } = this.props;\n if (!isMouseDown || !active) {\n return;\n }\n\n const mouseX = e.pageX;\n const mouseY = e.pageY;\n\n this.setState({\n contentX: contentXOnStart + (mouseX - mouseXOnStart),\n contentY: contentYOnStart + (mouseY - mouseYOnStart),\n });\n };\n\n onMouseDown = (e) => {\n const { contentX, contentY } = this.state;\n this.setState({\n isMouseDown: true,\n mouseXOnStart: e.pageX,\n mouseYOnStart: e.pageY,\n contentXOnStart: contentX,\n contentYOnStart: contentY,\n });\n };\n\n /**\n * Computes the optimal scale and optimal x and y values.\n * @param {*} animated\n * @returns\n */\n computeScale = (animated = false) => {\n const content = this.contentRef?.current;\n const container = this.props.containerRef?.current;\n\n if (!content || !container) {\n setTimeout(this.computeScale, 100);\n return;\n }\n\n const containerBounds = container.getBoundingClientRect();\n const contentWidth = content.scrollWidth;\n const contentHeight = content.scrollHeight;\n const optimalScaleX = containerBounds.height / contentHeight;\n const optimalScaleY = containerBounds.width / contentWidth;\n const optimalScale = Math.min(optimalScaleX, optimalScaleY);\n\n const centerContentX = containerBounds.width / 2 - (contentWidth * optimalScale) / 2;\n const centerContentY = containerBounds.height / 2 - (contentHeight * optimalScale) / 2;\n\n if (animated) {\n this.doAnimation();\n }\n\n this.setState({\n optimalScale,\n scale: optimalScale,\n contentWidth,\n contentHeight,\n centerContentX,\n centerContentY,\n contentX: centerContentX,\n contentY: centerContentY,\n });\n };\n\n doAnimation = () => {\n this.setState({ isAnimating: true });\n setTimeout(() => {\n this.setState({ isAnimating: false });\n }, 400);\n };\n\n getContentStyle = () => {\n const { scale, contentX, contentY, contentWidth, contentHeight } = this.state;\n return {\n transform: `scale(${scale})`,\n top: `${contentY}px`,\n left: `${contentX}px`,\n width: contentWidth || \"auto\",\n height: contentHeight || \"auto\",\n };\n };\n\n render() {\n const { scale, optimalScale, isAnimating } = this.state;\n const { content, className, isLoaded, active } = this.props;\n\n return (\n \n
\n );\n })}\n \n \n
\n )}\n \n
\n \n \n
\n \n
\n \n optimalScale,\n })}\n onClick={this.onMinus}\n >\n
\n \n
\n \n {document && (\n
\n );\n };\n\n render() {\n const {\n onClose,\n apiUser,\n document,\n windowWidth,\n windowHeight,\n attachment,\n showPagination,\n size,\n open = true,\n versionId,\n displayInModal = true,\n allowDownload = true,\n } = this.props;\n const { pageCount, isDocumentLoaded, randomNumberForZoomableRefresh } = this.state;\n const stateCurrentPageNumber = this.state.currentPageNumber;\n\n let sizeReadable = attachment.size && calculateReadableSize(attachment);\n\n let content = (\n \n
\n );\n\n if (displayInModal) {\n return (\n \n
\n \n Name \n {attachment.name} \n
\n {allowDownload && (\n \n Download \n \n
\n )}\n \n Type \n {attachment.type} \n
\n \n Created \n \n {moment(\n attachment.versions\n ? attachment.versions[attachment.versions.length - 1].LastModified\n : attachment.lastModified\n ).format(\"MMM DD YYYY, HH:mm\")}\n \n
\n {attachment.size && (\n \n Size \n {sizeReadable} \n
\n )}\n \n {showPagination !== false && (\n
\n \n this.setState({ currentPageNumber })}\n total={pageCount || 1}\n simple\n />\n
\n )}\n \n
\n {content}
;\n }\n }\n}\n","import { useEffect } from \"react\";\nimport { Spin, Button, message } from \"antd\";\nimport { useGetSetState } from \"react-use\";\nimport { LeftCircleOutlined, RightCircleOutlined } from \"@ant-design/icons\";\nimport axios from \"axios\";\nimport cx from \"classnames\";\n\nimport getS3File from \"common/getS3File\";\nimport { CloseIcon } from \"common/icons\";\n\nimport DocumentDetailsModal from \"Modals/DocumentDetailsModal/DocumentDetailsModal\";\n\nimport \"./FilePreview.scss\";\n\ntype Props = {\n attachments: any[];\n initiallySelectedAttachment: any;\n onClose: () => void;\n organisationId: string;\n allowedTypes?: string[];\n};\n\ntype State = {\n selectedAttachment: any;\n publicFileUrl?: string;\n fileData: any;\n selectedItemIndex?: number;\n isPreloaderVisible: boolean;\n};\n\nexport default function FilePreview({\n attachments,\n initiallySelectedAttachment,\n onClose,\n organisationId,\n allowedTypes = [\"IMAGE\"],\n}: Props) {\n const validAttachments = attachments.filter((attachment) => allowedTypes.includes(attachment.type));\n\n const [getState, setState] = useGetSetState\n \n } type=\"clear\" onClick={onClose} />\n\n {isPreloaderVisible ? (\n
\n );\n}\n","import { useState } from \"react\";\nimport { Form, Modal, Button, Space, Input } from \"antd\";\nimport awsExports from \"aws-exports\";\n\nimport { callGraphQLSimple } from \"common/apiHelpers\";\nimport { getSimpleLabel } from \"common/labels\";\nimport { KEY_TYPES, encodeKey } from \"common/shared\";\n\nimport \"./CreateFolderModal.scss\";\n\nexport default function CreateFolderModal({\n onClose,\n task,\n project,\n request,\n stockItem,\n prefix,\n isDocumentLibrary,\n organisationDetails,\n}) {\n const [form] = Form.useForm();\n const [isLoading, setIsLoading] = useState(false);\n\n async function onSubmit({ name }) {\n setIsLoading(true);\n\n const fileKey = `${await getKey(name)}/`;\n\n const params = {\n Bucket: awsExports.aws_user_files_s3_bucket,\n Key: fileKey,\n Body: \"\",\n };\n\n // this command actually creates the folder, the rest of the calls are just to trigger a refresh\n await window.s3.putObject(params).promise();\n\n if (project) {\n await callGraphQLSimple({\n message: `Could not update ${getSimpleLabel(\"project\")}`,\n queryName: \"updateProject\",\n variables: {\n input: {\n id: project.id,\n itemSubscription: Math.floor(Math.random() * 1000000),\n },\n },\n });\n } else if (task) {\n await callGraphQLSimple({\n message: `Could not update ${getSimpleLabel(\"task\")}`,\n queryName: \"updateTask\",\n variables: {\n input: {\n id: task.id,\n itemSubscription: Math.floor(Math.random() * 1000000),\n },\n },\n });\n } else {\n await callGraphQLSimple({\n message: `Could not update organisation`,\n queryName: \"updateOrganisation\",\n variables: {\n input: {\n id: organisationDetails.id,\n itemSubscription: Math.floor(Math.random() * 1000000),\n },\n },\n });\n }\n\n onClose();\n }\n\n async function getKey(localKey) {\n let fileKey;\n if (isDocumentLibrary) {\n fileKey = `public/${organisationDetails.id}/${prefix}/${localKey}`;\n } else if (request) {\n fileKey = await encodeKey({\n type: KEY_TYPES.REQUEST_ATTACHMENT,\n data: {\n organisation: organisationDetails.id,\n requestId: request.id,\n attachmentFileName: `${prefix}${localKey}`,\n },\n });\n } else if (stockItem) {\n fileKey = await encodeKey({\n type: KEY_TYPES.STOCK_ITEM_ATTACHMENT,\n data: {\n organisation: organisationDetails.id,\n stockItemId: stockItem.id,\n attachmentFileName: `${prefix}${localKey}`,\n },\n });\n } else {\n fileKey = await encodeKey({\n type: KEY_TYPES.PROJECT_ATTACHMENT,\n data: {\n organisation: organisationDetails.id,\n projectId: task ? task.projectId : project.id,\n attachmentFileName: `${prefix}${localKey}`,\n },\n });\n }\n return fileKey.split(\"//\").join(\"/\");\n }\n\n const layout = {\n labelCol: {\n span: 8,\n },\n wrapperCol: {\n span: 16,\n },\n };\n\n return (\n \n
\n ) : (\n displayContent()\n )}\n \n \n {selectedItemIndex + 1} / {validAttachments.length}\n \n {selectedAttachment.key.replace(`public/${organisationId}/`, \"\")}\n
\n \n \n );\n}\n","import React from \"react\";\nimport { Modal, Typography } from \"antd\";\nimport { CloseIcon } from \"common/icons\";\nimport { FileOutlined } from \"@ant-design/icons\";\nimport { getAttachmentTypeFromKey } from \"common/shared\";\nimport { callRest } from \"common/apiHelpers\";\n\nimport \"./EmailDetailsModal.scss\";\n\ntype EmailDetails = {\n subject: string;\n body: string;\n attachmentsMetadata?: AttachmentMetadata[];\n};\n\ntype AttachmentMetadata = {\n key: string;\n contentId?: string;\n};\n\ntype Props = {\n attachment: any;\n emailData: any;\n onClose: () => void;\n openAttachment: any;\n};\n\ntype State = {\n emailDetails?: EmailDetails;\n};\n\nclass EmailDetailsModal extends React.Component
\n
\n \n \n );\n }\n}\n\nexport default EmailDetailsModal;\n","import React from \"react\";\nimport moment from \"moment\";\nimport { Checkbox, Result } from \"antd\";\nimport cx from \"classnames\";\n\nimport {\n FolderOutlined,\n MailOutlined,\n FileOutlined,\n FileImageOutlined,\n VideoCameraOutlined,\n FilePdfOutlined,\n CloseCircleOutlined,\n} from \"@ant-design/icons\";\nimport { calculateReadableSize } from \"common/helpers\";\n\nexport default class AttachmentListItem extends React.Component {\n dropRef = React.createRef();\n\n onDragEnter = (e) => {\n console.log(\"item drag enter\");\n e.preventDefault();\n e.stopPropagation();\n };\n\n onDragLeave = (e) => {\n console.log(\"item drag leave\");\n e.preventDefault();\n e.stopPropagation();\n };\n\n render() {\n const { item, checked, enabled, onClick, onCheck, index, isSearchResult, realPrefix } = this.props;\n\n let sizeReadable = calculateReadableSize(item);\n\n let name = item.name;\n\n if (isSearchResult) {\n // include in the file name the part after the realPrefix\n name = item.key.substring(realPrefix.length);\n }\n\n return (\n \n \n Subject: {emailDetails?.subject}\n \n
\n\n \n Body: \n {emailDetails ? (\n \n ) : null}\n
\n\n \n Attachments: \n {emailDetails?.attachmentsMetadata?.map((attachment) => (\n \n openAttachment({\n key: attachment.key,\n type: getAttachmentTypeFromKey(attachment.key),\n name: attachment.key.split(\"/\").pop(),\n })\n }\n >\n {attachment.key.split(\"/\").pop()} \n
\n ))}\n \n {item.type === \"ACCESS_DENIED\" ? (\n
\n \n );\n }\n}\n","import React from \"react\";\nimport { Button, Typography, Divider, Progress, message } from \"antd\";\nimport cx from \"classnames\";\n\nimport \"./UploadProgressView.scss\";\n\nexport default class UploadProgressView extends React.Component {\n render() {\n const { pendingFiles, parentState, includeOverallProgress = true, failedUploads = [] } = this.props;\n const overallTotal = pendingFiles.reduce((sum, file) => sum + file.size, 0);\n const overallLoaded = pendingFiles.reduce((sum, file, i) => {\n const progress = parentState[`progress-${file.fullPath}`];\n const loadedBytes = progress ? progress.loaded : 0;\n return sum + loadedBytes;\n }, 0);\n let overallProgress = Math.floor((overallLoaded / overallTotal) * 100);\n let warningProps = {};\n let uploadMessage = \"\";\n const failedUploadsFileNames = failedUploads?.map((file) => file?.name);\n\n let overallStatus = \"normal\";\n if (overallProgress === 100) {\n overallStatus = \"success\";\n }\n\n if (failedUploads?.length > 0 && pendingFiles.length > 0) {\n overallStatus = \"warning\";\n warningProps.strokeColor = \"#ffbc0d\";\n warningProps.style = {\n color: \"#ffbc0d\",\n };\n warningProps.status = \"exception\";\n warningProps.fill = \"#ffbc0d\";\n warningProps.color = \"#ffbc0d\";\n }\n\n // This means all the uploads have failed\n if (failedUploads?.length > 0 && pendingFiles.length === 0) {\n overallProgress = 100;\n overallStatus = \"exception\";\n }\n\n if (overallProgress === 100) {\n if (overallStatus === \"success\") {\n uploadMessage = \"Upload is finished\";\n } else if (overallStatus === \"warning\") {\n uploadMessage = \"Upload is finished, but some files have failed to upload\";\n } else if (overallStatus === \"exception\") {\n uploadMessage = \"All files have failed to upload\";\n }\n } else {\n uploadMessage = \"Uploading...\";\n }\n\n if (overallStatus === \"success\" && overallProgress === 100) {\n message.success(\"All files have been uploaded\");\n if (this.props.onDone && typeof this.props.onDone === \"function\") {\n this.props.onDone();\n return null;\n }\n }\n\n let filesWithProgress = [...pendingFiles]\n .map((item, i) => {\n const hasError = parentState[`error-${item.fullPath}`];\n const progress = parentState[`progress-${item.fullPath}`];\n const progressPercent = progress ? Math.floor((progress.loaded / progress.total) * 100) : 0;\n return {\n ...item,\n progressPercent,\n hasError: !!hasError,\n };\n })\n .sort((a, b) => {\n if (a.hasError && !b.hasError) {\n return -1;\n }\n if (!a.hasError && b.hasError) {\n return 1;\n }\n if (a.progressPercent === b.progressPercent) {\n return a.fullPath.toLowerCase() < b.fullPath.toLowerCase() ? -1 : 1;\n }\n return b.progressPercent - a.progressPercent;\n });\n\n return (\n e.stopPropagation()} className={cx(\"select\", { \"not-visible\": !enabled })}>\n
\n\n \n {item.type === \"FOLDER\" ? \n {includeOverallProgress && (\n
\n );\n }\n}\n","import { Modal, Button } from \"antd\";\nimport moment from \"moment\";\nimport prettyBytes from \"pretty-bytes\";\nimport { DownloadOutlined } from \"@ant-design/icons\";\n\nimport \"./VersionsModal.scss\";\n\ntype Props = {\n versions: any[];\n onClose: any;\n onVersionClick: any;\n};\n\nexport default function VersionsModal({ versions, onVersionClick, onClose }: Props) {\n return (\n \n \n {uploadMessage} \n {overallProgress === 100 && (\n \n )}\n
\n )}\n\n {[...filesWithProgress, ...failedUploads].map((file, i) => {\n let status;\n let strokeColor = {\n \"0%\": \"#69c5ec\",\n \"100%\": \"#1590c5\",\n };\n if (file.progressPercent === 100) {\n status = \"success\";\n strokeColor = {\n \"0%\": \"#94d475\",\n \"100%\": \"#52c41a\",\n };\n } else if (file.progressPercent === 0) {\n status = \"normal\";\n } else {\n status = \"active\";\n }\n if (file.hasError) {\n strokeColor = \"#ff0000\";\n status = \"exception\";\n }\n if (failedUploadsFileNames.includes(file.name)) {\n strokeColor = {\n \"0%\": \"#ff4d4f\",\n \"100%\": \"#ff4d4f\",\n };\n status = \"exception\";\n }\n\n return (\n \n {file.fullPath} \n
\n );\n })}\n \n {e.message}\n
\n
\n );\n }\n\n if (!items) {\n return null;\n }\n\n const visibleItems = this.getVisibleItems();\n\n let isSearchResult = !!this.state.searchValue && !!this.state.nonSearchItems;\n\n const attachmentElements = visibleItems.map((item, index) => {\n let itemIsEnabled = true;\n if (allowedFileTypes && !allowedFileTypes.includes(item.type)) {\n itemIsEnabled = false;\n }\n\n return (\n \n {attachmentElements.length > 0 && (\n \n {noAttachmentsMessage} \n
\n {this.displayUploadButton()}\n \n }\n />\n )}\n
\n );\n };\n\n displayTopLevelBreadcrumbAfterHome = () => {\n const { rootPrefix, isTrashOpen } = this.state;\n const { task, project, client, request, stockItem, defaultPath } = this.props;\n\n let homePrefix = this.getHomePrefix();\n\n if (rootPrefix?.includes(homePrefix) || defaultPath || this.isDocumentLibrary()) {\n return null;\n }\n\n if (client) {\n return (\n \n
\n )}\n {attachmentElements.length > 0 ? (\n attachmentElements\n ) : (\n \n \n {\n this.setState({ isSelectAllChecked: e.target.checked });\n if (e.target.checked) {\n this.selectAllItems();\n } else {\n this.deselectAllItems();\n }\n }}\n checked={this.state.isSelectAllChecked}\n />\n \n \n Name ({visibleItems.length} items\n {selectedItems?.length > 0 ? `, ${selectedItems?.length} selected` : \"\"})\n \n Size \n Last updated \n Created \n
\n \n {this.displayUploadButton()}\n \n }\n />\n )}\n
\n
\n );\n };\n\n displayBreadcrumbs = () => {\n let { rootPrefix, isTrashOpen, isHome } = this.state;\n const { isDocumentLibrary, defaultPath, includeHomeButton = true, includeCopyLinkButton = false } = this.props;\n\n // remove multiple slashes from rootPrefix and only leave one wherever they might be\n // do it recursively to ensure all slashes are removed\n if (rootPrefix) {\n let counter = 0;\n while (rootPrefix.includes(\"//\") && counter < 100) {\n rootPrefix = rootPrefix.split(\"//\").join(\"/\");\n\n // this is just to prevent an infinite loop\n counter++;\n }\n }\n\n let levels = [\"\"];\n if (rootPrefix === \"/\") {\n levels = [\"\"];\n } else if (rootPrefix) {\n levels = rootPrefix.split(\"/\");\n }\n\n return (\n \n {rootPrefix}\n \n }\n successMessageContent=\"Path copied\"\n />\n ) : null}\n {!isDocumentLibrary && includeHomeButton && (\n
\n {this.state.pdfPreviewData && (\n this.setState({ pdfPreviewData: null })}\n allowDownload={allowDownload}\n windowWidth={windowWidth}\n windowHeight={windowHeight}\n />\n )}\n {this.state.emailPreviewData && (\n this.setState({ emailPreviewData: null })}\n windowWidth={windowWidth}\n windowHeight={windowHeight}\n openAttachment={(attachment) => openAttachment.call(this, attachment)}\n />\n )}\n \n \n {\n this.setState({ isUploadViewVisible: false });\n this.setState({ failedUploads: [] });\n }}\n />\n ) : (\n // \n
\n {isVersionsModalVisible && (\n \n {!isUploadViewVisible && (\n <>\n {/* \n \n \n {isPreparingDownload ? \n )}\n\n {!this.props.readOnly && !this.state.isTrashOpen && !this.props.presentationOnly && (\n \n \n )}\n\n {this.displayUploadButton()}\n {this.displayUploadFromGoogleDriveButton()}\n \n \n )}\n
\n {this.displaySearchBar()}\n {this.displayBreadcrumbs()}\n \n }\n >\n {isUploadViewVisible ? (\n \n \n this.setState({ viewType: \"GRID\" })}\n />\n \n \n this.setState({ viewType: \"LIST\" })}\n />\n \n
*/}\n\n <>\n {this.displayTrashButton()}\n {viewType === \"GRID\" ? this.displayGrid() : this.displayList()}
\n this.displayList()\n )}\n \n \n \n {attachments.map((attachmentPath) => {\n return (\n
\n );\n })}\n {isAttachmentPickerModalOpen && (\n \n {\n let newAttachments = attachments.filter((a) => a !== attachmentPath);\n // let newDates = JSON.parse(JSON.stringify(value.dates));\n // let newSizes = JSON.parse(JSON.stringify(value.sizes));\n // delete newDates[attachmentPath];\n // delete newSizes[attachmentPath];\n\n // onChange(newAttachments, newDates, newSizes);\n onChange(newAttachments);\n }}\n >\n
\n {attachmentPath.split(\"/\").slice(-1)[0]}
\n \n \n );\n}\n","import React from \"react\";\nimport { Tooltip } from \"antd\";\nimport { CommentOutlined } from \"@ant-design/icons\";\nimport cx from \"classnames\";\n\nimport \"./ReviewTarget.scss\";\n\nexport default class ReviewTarget extends React.Component {\n constructor(props) {\n super(props);\n this.ref = React.createRef();\n }\n onClick = () => {\n const { name, lineItemIndex } = this.props;\n if (this.props.openCommentBox && typeof this.props.openCommentBox === \"function\") {\n this.props.openCommentBox(name, lineItemIndex);\n }\n };\n\n render() {\n const { children, name, visible, onClick } = this.props;\n return (\n
\n \n {new Array(columnCount).fill(null).map((_, col) => {\n let columnName = LETTERS[col];\n return (\n
\n );\n }\n\n function displayBody() {\n return new Array(rowCount).fill(null).map((_, row) => {\n return (\n \n {columnName}\n {(window.location.hostname === \"localhost\" || window.apiUser.isHidden) && col < columnCount - 1 && (\n {\n setState({\n resizeColumnOperation: {\n isActive: true,\n initialX: e.screenX,\n col,\n },\n });\n }}\n />\n )}\n
\n \n );\n })}\n \n \n
\n );\n })}\n \n );\n });\n }\n\n return (\n {row + 1}
\n {new Array(columnCount).fill(null).map((_, col) => {\n const cellisHighlighted = state.highlightedCellAddresses.find(\n (address) => address.col === col && address.row === row\n );\n const cellAddress = { sheet: 0, row, col };\n const cellType = hf.getCellType(cellAddress);\n const cellIsSelected =\n state.selectedCellAddress &&\n state.selectedCellAddress.row === row &&\n state.selectedCellAddress.col === col;\n return (\n \n {cellIsSelected ? (\n {\n onCellChange({ row, col, value });\n const { selectedCellAddress } = getState();\n\n if (\n selectedCellAddress &&\n (selectedCellAddress.row !== row || selectedCellAddress.col !== col)\n ) {\n setState({\n selectedCellAddress: undefined,\n });\n }\n }}\n showBorder\n autoFocus\n />\n ) : (\n hf.getCellValue(cellAddress)\n )}\n
\n \n {label && (\n
\n {extraContent && \n \n {label}\n {weNeedColon && \":\"}\n \n
\n )}\n \n {typeof value === \"string\" || typeof value === \"number\" ? (\n {value} \n ) : (\n value\n )}\n
\n {extraContent}
}\n \n );\n}\n","import React from \"react\";\nimport { Typography, Tag } from \"antd\";\n\nfunction FieldLabel({ fieldData, fieldName, isFormEditor, validationErrors }) {\n let validationErrorsForField = (validationErrors || []).filter(\n (validationError) => validationError.fieldKey === fieldName\n );\n\n let label = fieldData.label ? fieldData.label : fieldName;\n\n if (isFormEditor && fieldData.isForLineItems) {\n label = (\n <>\n - \n {validationErrorsForField.map((validationError) => {\n return (\n
- \n
{validationError.errorMessage} \n \n );\n })}\n
- \n {itemList.map((itemContainer, itemIndex) => {\n return (\n
- \n {itemIndex + 1}.\n{displayItemFields({ item: itemContainer.item })}\n\n {displayItemActionButtons({ item: itemContainer.item, itemIndex })}\n\n \n );\n })}\n
\n
\n );\n }\n\n function displayItemActionButtons({ item, itemIndex }) {\n return (\n <>\n {!readOnly && (\n {itemIndex + 1}.
\n {displayItemFields({ item })}
\n {displayItemActionButtons({ item, itemIndex })}
\n \n {item[itemKey].map((attachmentPath) => {\n return
\n );\n break;\n default:\n valueElement = null;\n }\n }\n\n return (\n {attachmentPath.split(\"/\").slice(-1)[0]}
;\n })}\n \n } onClick={() => addItem()}>\n {fieldData.buttonText || \"Add item\"}\n \n
\n );\n }\n\n function displayItems() {\n return null;\n }\n\n return (\n <>\n \n {isNew ? New : null}\n {isOverdue ? Overdue : null}\n {isDueToday ? Due Today : null}\n\n {isFullyPaid ? Fully paid : null}\n {isPartiallyPaid ? Partially paid : null}\n {item.isProForma ? Pro Forma : null}\n\n {item.isFinished ? Finished : null}\n {item.isArchived ? Archived : null}\n {item.reviewStatus && !item.reviewSecondaryStatus ? (\n \n {reviewStatusLabel}\n \n ) : null}\n {item.reviewSecondaryStatus ? (\n \n {REVIEW_SECONDARY_STATUS_READABLE[item.reviewSecondaryStatus]}\n \n ) : null}\n {customFieldTags}\n {isBlocked ? Blocked : null}\n {isPartiallyInvoiced ? Partially Invoiced : null}\n {isFullyInvoiced ? Fully Invoiced : null}\n {rejectedLineItems?.length > 0 ? (\n \n {rejectedLineItems.length} line item{rejectedLineItems.length === 1 ? \"\" : \"s\"} rejected\n \n ) : null}\n\n {organisationDetails.settings?.task?.displayTaskEstimatesAsTag &&\n organisationDetails.settings?.task?.usesTaskEstimates &&\n item.estimatedHours ? (\n \n \n ) : null}\n\n {displayNoCatLevelTag()}\n {organisationDetails.settings?.general?.usesTaskConfirmation && !skipInstructed && !item.isConfirmed ? (\n {getLabel({ organisationDetails, id: \"Unconfirmed\", defaultValue: \"Unconfirmed\" })} \n ) : null}\n {isSentToAccountancy ? Sent to {accountancySoftwareName} : null}\n
\n );\n}\n\nexport default withSubscriptions({\n Component: DashboardItemTags,\n subscriptions: [\"organisationDetails\"],\n});\n","import { Component } from \"react\";\nimport { Select, Typography } from \"antd\";\nimport cx from \"classnames\";\nimport _ from \"lodash\";\n\nimport { getSimpleLabel } from \"common/labels\";\nimport withSubscriptions from \"common/withSubscriptions\";\n\nimport TaskIdTag from \"TaskIdTag/TaskIdTag\";\nimport DashboardItemTags from \"DashboardItemTags/DashboardItemTags\";\n\nimport \"./TaskPicker.scss\";\n/**\n * excludeList: [String] - represents a list of user IDs (email addresses) which should not be shown in the list of options\n **/\n\nconst MAX_RESULTS_TO_SHOW = 25;\nexport class TaskPicker extends Component {\n constructor(props) {\n super(props);\n this.state = {\n tasksWithMetadata: [],\n filteredTasks: [],\n searchValue: \"\",\n };\n\n this.debouncedFilterTasks = _.debounce(this.filterTasks, 300);\n }\n\n componentDidMount() {\n this.computeTasksWithMetadata();\n }\n\n componentDidUpdate(prevProps) {\n if (\n prevProps.tasks !== this.props.tasks ||\n prevProps.projects !== this.props.projects ||\n prevProps.clients !== this.props.clients ||\n prevProps.excludeList !== this.props.excludeList ||\n prevProps.value !== this.props.value\n ) {\n this.computeTasksWithMetadata();\n }\n }\n\n computeTasksWithMetadata = () => {\n let tasksWithMetadata = this.props.tasks\n .filter((x) => !x.isHidden && !x.id.includes(\"-TEMPLATES\"))\n .map((task) => this.getTaskMetadata(task));\n\n if (this.props.excludeList) {\n tasksWithMetadata = tasksWithMetadata.filter((x) => !this.props.excludeList.includes(x.id));\n }\n\n this.setState(\n {\n tasksWithMetadata,\n },\n this.filterTasks\n );\n };\n\n filterTasks = (value) => {\n if (value === undefined) {\n value = this.state.searchValue;\n } else {\n this.setState({ searchValue: value });\n }\n\n value = value.trim().toLowerCase();\n\n const { tasksWithMetadata } = this.state;\n const filteredTasks = tasksWithMetadata.filter((task) => {\n return this.filterOption(value, task);\n });\n\n this.setState({ filteredTasks });\n };\n\n getTaskMetadata = (task) => {\n const project = this.props.projects.find((x) => x.id === task.projectId);\n const client = this.props.clients.find((x) => x.id === task.clientId);\n return { ...task, project, client };\n };\n\n compare = (expected, actual) => {\n return expected.toLowerCase().split(\" \").join(\"\").includes(actual.toLowerCase().split(\" \").join(\"\"));\n };\n\n filterOption = (targetText, { project, client, value, ...task }) => {\n if (!targetText) {\n return true;\n }\n try {\n // if (value === null) {\n // return true;\n // }\n\n if (client?.name.toLowerCase().includes(targetText)) {\n return true;\n } else if ((project?.title || \"\").toLowerCase().includes(targetText)) {\n return true;\n } else if (task.title.toLowerCase().includes(targetText)) {\n return true;\n } else if ((task.subtitle || \"\").toLowerCase().includes(targetText)) {\n return true;\n } else if (task.id.toLowerCase().includes(targetText)) {\n return true;\n } else if ((task.assignedTo || \"\").toLowerCase().includes(targetText)) {\n return true;\n }\n } catch (e) {\n console.error(e);\n }\n\n return false;\n };\n\n render() {\n const { value, placeholder, suffixIcon, disabled, allowClear = true, organisationDetails, listHeight } = this.props;\n\n const { filteredTasks } = this.state;\n\n const extraProps = {\n value,\n };\n\n if (this.props[\"data-cy\"]) {\n extraProps[\"data-cy\"] = this.props[\"data-cy\"];\n }\n\n if (placeholder) {\n extraProps.placeholder = placeholder;\n } else {\n extraProps.placeholder = `Select ${getSimpleLabel(\"task\")}`;\n }\n\n if (suffixIcon !== undefined) {\n extraProps.suffixIcon = suffixIcon;\n }\n\n let slicedTasks = filteredTasks.slice(0, MAX_RESULTS_TO_SHOW);\n\n if (this.props.value && !slicedTasks.find((x) => x.id === this.props.value)) {\n let selectedTask = this.props.tasks.find((x) => x.id === this.props.value);\n if (selectedTask) {\n slicedTasks = [this.getTaskMetadata(selectedTask), ...slicedTasks];\n }\n }\n\n let options = slicedTasks.map((taskWithMetadata) => {\n let label = null;\n\n label = (\n \n Estimated hours: {item.estimatedHours}\n
\n \n \n {taskWithMetadata.client?.name} / {taskWithMetadata.project?.title}\n \n {taskWithMetadata.title} \n
\n );\n\n return {\n label,\n selectedLabel: \n
\n \n true}\n onChange={this.props.onChange}\n disable={disabled}\n allowClear={allowClear}\n listHeight={listHeight ? listHeight : window.innerHeight > 800 ? 350 : 200}\n {...extraProps}\n virtual={false}\n onSearch={this.debouncedFilterTasks}\n onDropdownVisibleChange={(isOpen) => {\n if (this.props.onDropdownVisibleChange) {\n this.props.onDropdownVisibleChange(isOpen);\n }\n }}\n optionLabelProp=\"selectedLabel\"\n options={options}\n />\n
\n );\n }\n}\n\nexport default withSubscriptions({\n Component: TaskPicker,\n subscriptions: [\"tasks\", \"projects\", \"clients\", \"organisationDetails\"],\n});\n","import { withRouter } from \"react-router-dom\";\n\nimport { Select } from \"antd\";\nimport { Project, User, Client } from \"common/types\";\n\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { getSimpleLabel } from \"common/labels\";\n\ntype Props = {\n apiUser: User;\n clients: Client[];\n projects: Project[];\n onChange: (projectId: string) => void;\n predefinedFields: any;\n value: any;\n allowClear?: boolean;\n disabled?: boolean;\n};\n\nexport function ProjectPicker(props: Props) {\n const { apiUser, clients, projects, predefinedFields, onChange, allowClear = true, disabled } = props;\n const filteredProjects = projects.filter(\n (x) => x.organisation === apiUser.organisation && !x.isArchived && !x.isFinished && !x.id.includes(\"TEMPLATES\")\n );\n\n return (\n - \n {oversizedAttachments.map((attachment) => {\n return (\n
- \n {attachment.name}: {calculateReadableSize(attachment)}\n \n );\n })}\n
\n {this.state.isFormEditor && (\n
\n );\n })}\n \n );\n}\n\nexport function displayTextfield({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n return (\n \n
\n )}\n {field}\n \n {[\n \"nestedFieldListWithModal\",\n \"nestedFieldListNoModal\",\n \"modalWithFields\",\n \"section\",\n \"dynamicSectionList\",\n ].includes(fieldData.type) && (\n = sortedFieldNames.length - 1}\n icon={
\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n\n {\n updateFieldValue.call(this, {\n fieldName,\n value,\n nestedFieldParams,\n });\n }}\n />\n
\n );\n}\n\nexport function displayProjectPicker({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n return (\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n {\n updateFieldValue.call(this, params);\n }}\n windowWidth={this.props.windowWidth}\n />\n
\n );\n}\n\nexport function displayTaskPicker({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n return (\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n {\n updateFieldValue.call(this, {\n fieldName,\n value,\n nestedFieldParams,\n });\n }}\n />\n
\n );\n}\n\nexport function displayInputLabel({ fieldData, fieldName, extraContent = null, onlyDisplayExplanation = false }) {\n let inlineDescriptionElement = null;\n let tooltipDescriptionElement = null;\n\n if (fieldData.hasInlineDescription && fieldData.inlineDescription) {\n let parsedInlineDescription;\n try {\n parsedInlineDescription = JSON.parse(fieldData.inlineDescription);\n } catch (e) {\n // nothing;\n }\n if (parsedInlineDescription) {\n inlineDescriptionElement = (\n \n
\n );\n }\n }\n\n if (fieldData.hasTooltipDescription && fieldData.tooltipDescription) {\n let parsedTooltipDescription;\n try {\n parsedTooltipDescription = JSON.parse(fieldData.tooltipDescription);\n } catch (e) {\n // nothing;\n }\n if (parsedTooltipDescription) {\n tooltipDescriptionElement = (\n \n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n\n {\n await updateFieldValue.call(this, { fieldName, value, nestedFieldParams });\n if (fieldData.assignsTheRequestToUser) {\n if (this.props.request) {\n await callGraphQLSimple({\n message: `Failed to reassign ${getSimpleLabel(\"request\")}`,\n mutation: \"updateRequest\",\n variables: {\n input: {\n id: this.props.request.id,\n assignedTo: value || null,\n },\n },\n });\n }\n }\n }}\n allowClear={fieldData.allowClear}\n >\n {fieldData.options.map((option, index) => (\n \n {option.label}\n \n ))}\n \n
\n );\n}\n\nexport function displayCheckbox({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n\n return (\n \n {option.label} \n
\n ))}\n\n \n {displayInputLabel.call(this, { fieldData, fieldName, extraContent: editOptionsButton })}\n\n {fieldContent}\n
\n );\n}\n\nexport function removeCheckboxOption({ optionIndex }) {\n const { form, fieldUnderEditName } = this.state;\n\n const newFields = { ...form.fields };\n newFields[fieldUnderEditName].options.splice(optionIndex, 1);\n\n // to update\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n}\n\nexport function shouldFieldBeDisplayed({ form, fieldName }) {\n let fieldData = form.fields[fieldName];\n\n // this is for the old-style report forms, before the template editor\n if (fieldData.conditionTarget) {\n const targetField = form.fields[fieldData.conditionTarget];\n let targetFieldValue = targetField.value;\n if (typeof targetFieldValue === \"string\") {\n if (fieldData.conditionValuesIncluded && !fieldData.conditionValuesIncluded.includes(targetFieldValue)) {\n return false;\n }\n if (fieldData.conditionValuesExcluded && fieldData.conditionValuesExcluded.includes(targetFieldValue)) {\n return false;\n }\n } else if (Array.isArray(targetFieldValue)) {\n let isValidForIncludedValues =\n !fieldData.conditionValuesIncluded ||\n targetFieldValue.some((value) => fieldData.conditionValuesIncluded.includes(value));\n let isValidForExcludedValues =\n !fieldData.conditionValuesExcluded ||\n targetFieldValue.every((value) => !fieldData.conditionValuesExcluded.includes(value));\n if (!isValidForIncludedValues || !isValidForExcludedValues) {\n return false;\n }\n }\n\n // this for the new-style conditional display logic provided by the template editor\n } else if (fieldData.usesConditionalDisplay) {\n const expectedValue = fieldData.conditionalDisplayTarget;\n\n let targetFieldForComparisonData = form.fields[fieldData.conditionalDisplayDataSourceField];\n if (targetFieldForComparisonData) {\n let targetFieldForComparisonIsVisible = shouldFieldBeDisplayed({\n form,\n fieldName: fieldData.conditionalDisplayDataSourceField,\n });\n if (!targetFieldForComparisonIsVisible) {\n return false;\n }\n }\n\n if (!targetFieldForComparisonData) {\n message.error(\n `The field \"${fieldData.label}\" has conditional display active, but the configuration is incomplete`\n );\n return true;\n }\n\n const realValue = targetFieldForComparisonData.value;\n const elementShouldBeDisplayed = isConditionMet({\n expectedValue,\n realValue,\n condition: fieldData.conditionalDisplayCondition,\n });\n\n return elementShouldBeDisplayed;\n }\n return true;\n}\n\nexport function displayRadioList({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n let fieldContent = null;\n if (fieldData.useDynamicOptions && this.state.isFormEditor) {\n fieldContent = (\n \n {displayInputLabel.call(this, {\n fieldData,\n fieldName,\n extraContent: (\n <>\n {fieldData.value &&\n !taskRevision.isReadOnly &&\n !userIsCat2Checker &&\n fieldData.editable !== false &&\n !this.isReviewed && (\n <>\n {\" \"}\n {\n updateFieldValue.call(this, {\n fieldName,\n value: undefined,\n nestedFieldParams,\n });\n }}\n >\n Clear selected option\n \n \n )}\n \n ),\n })}\n\n {fieldContent}\n
\n );\n}\n\nfunction removeAttachmentItem({ fieldName, key }) {\n const { form } = this.state;\n\n const newFields = JSON.parse(JSON.stringify(form.fields));\n newFields[fieldName].value = newFields[fieldName].value.filter((x) => x !== key);\n\n // to update\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n}\n\nexport function displayAttachmentPickerField({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker, selectedAttachmentKeyForPreview } = this.state;\n\n let attachmentsForPreview = [];\n let selectedAttachmentForPreview = undefined;\n if (Array.isArray(fieldData.value)) {\n attachmentsForPreview = fieldData.value.map((key) => {\n return {\n key,\n name: key.replace(`public/${window.apiUser.organisation}/`, \"\"),\n type: getAttachmentTypeFromKey(key),\n };\n });\n }\n if (selectedAttachmentKeyForPreview) {\n selectedAttachmentForPreview = attachmentsForPreview.find(\n (attachment) => attachment.key === selectedAttachmentKeyForPreview\n );\n }\n\n return (\n <>\n {fieldData.allowPreview && selectedAttachmentKeyForPreview && (\n \n {displayInputLabel.call(this, {\n fieldData,\n fieldName,\n extraContent: (\n <>\n {\" \"}\n {!taskRevision.isReadOnly && !userIsCat2Checker && !this.isReviewed && !fieldData.readOnly && (\n
\n \n );\n}\n\nasync function downloadAttachment(key) {\n let messageKey = `downloading-attachment-${key}`;\n\n message.loading({ content: \"Downloading attachment...\", key: messageKey, duration: 0 });\n try {\n const publicUrl = await getS3File(key.replace(\"public/\", \"\"));\n\n const fileBlob = (\n await axios({\n url: publicUrl,\n method: \"GET\",\n responseType: \"blob\", // Important\n onDownloadProgress: (progressEvent) => {\n const { loaded, total } = progressEvent;\n const percentage = Math.floor((loaded / total) * 100);\n message.loading({ content: `Downloading attachment: ${percentage}%...`, key: messageKey, duration: 0 });\n },\n })\n ).data;\n\n let fileName = key.split(\"/\").pop();\n\n await downloadBlob({\n blob: fileBlob,\n fileName,\n });\n message.success({ content: \"Attachment downloaded\", key: messageKey });\n } catch (e) {\n message.error({ content: \"Failed to download attachment\", key: messageKey });\n }\n}\n\nfunction displayAttachmentUploaderField({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n // const { isAttachmentPickerOpen, subFieldUnderEditIndex, form, formPreview, fieldUnderEditName } = this.state;\n // const { apiUser, task, quote, invoice, request } = this.props;\n\n return (\n - \n {Array.isArray(fieldData.value) &&\n fieldData.value.map((key, i) => {\n let type = getAttachmentTypeFromKey(key);\n return (\n
- \n {!(taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed) && !fieldData.readOnly && (\n
\n {displayInputLabel.call(this, { fieldData, fieldName })}\n\n {\n const { form } = this.state;\n\n const newFields = JSON.parse(JSON.stringify(form.fields));\n\n let newFieldValue = [...(newFields[fieldName].value || [])];\n for (let resultItem of result) {\n if (resultItem.status === \"fulfilled\" && !newFieldValue.includes(resultItem.value)) {\n newFieldValue.push(resultItem.value);\n }\n }\n\n updateFieldValue.call(this, {\n fieldName,\n value: newFieldValue,\n nestedFieldParams,\n });\n }}\n />\n
\n );\n}\n\nfunction removeSectionAttachment({ key, attachmentSection, fieldName }) {\n const { form } = this.state;\n\n const newFields = JSON.parse(JSON.stringify(form.fields));\n const targetField = newFields[fieldName].value?.find((field) => field.id === attachmentSection.id);\n targetField.value = targetField.value.filter((attachmentKey) => attachmentKey !== key);\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n}\n\nexport function displayAttachmentPickerSectionsField({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n return (\n \n
\n );\n}\n\nexport function displayUserInputListField({ fieldData, fieldName, taskRevision }) {\n const { userIsCat2Checker } = this.state;\n return (\n \n {displayInputLabel.call(this, {\n fieldData,\n fieldName,\n extraContent: (\n <>\n {!taskRevision.isReadOnly && !userIsCat2Checker && !this.isReviewed && (\n
\n {fieldData.value.map((attachmentSection, sectionIndex) => {\n return (\n \n \n \n\n Attachments selected \n
\n );\n })}\n \n
\n\n {!taskRevision.isReadOnly && !userIsCat2Checker && !this.isReviewed && (\n \n Title \n {\n const { form } = this.state;\n\n const newFields = JSON.parse(JSON.stringify(form.fields));\n newFields[fieldName].value[sectionIndex].title = title;\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n }}\n />\n
\n \n Description \n {\n const { form } = this.state;\n\n const newFields = JSON.parse(JSON.stringify(form.fields));\n newFields[fieldName].value[sectionIndex].description = description;\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n }}\n />\n
\n - \n {Array.isArray(attachmentSection.value) &&\n attachmentSection.value.map((key, i) => (\n
- \n
{getFilenameFromKey(key, true)} {\" \"}\n \n ))}\n
\n {displayInputLabel.call(this, {\n fieldData,\n fieldName,\n extraContent: (\n <>\n {\" \"}\n {!taskRevision.isReadOnly && !userIsCat2Checker && !this.isReviewed && (\n
\n );\n}\n\nexport function displayNestedFieldListWithModal({ fieldData, fieldName, taskRevision }) {\n const { userIsCat2Checker, isFormEditor, templateDetails, form } = this.state;\n return (\n - \n {Array.isArray(fieldData.value) &&\n fieldData.value\n .filter((item) => item)\n .map((item, i) => (\n
- \n \n {Object.keys(item).map((itemKey, j) => {\n return (\n\n {!taskRevision.isReadOnly && !userIsCat2Checker && !this.isReviewed && (\n
\n {fieldData.fields[itemKey].shortLabel || fieldData.fields[itemKey].label} {item[itemKey]}\n \n );\n })}\n \n ))}\n
\n
\n );\n}\n\nexport function addCheckboxOption({ option }) {\n const { form, fieldUnderEditName } = this.state;\n\n const newFields = { ...form.fields };\n newFields[fieldUnderEditName].options.push(option);\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n}\n\nexport function removeUserListItem({ itemIndex, fieldName }) {\n const { form } = this.state;\n\n const newFields = { ...form.fields };\n newFields[fieldName].value.splice(itemIndex, 1);\n\n this.setState(\n {\n form: {\n ...form,\n fields: newFields,\n },\n },\n this.saveUserFields\n );\n}\n\nexport function openCheckboxOptionAddModal() {\n const modal = Modal.info({\n title: \"Option value:\",\n icon: null,\n className: \"add-report-field-option-modal\",\n maskClosable: true,\n content: (\n \n {displayFields.call(this, {\n showHiddenByModal: false,\n showNestedFieldsInModal: true,\n rootField: fieldData,\n rootFieldName: fieldName,\n childField: nestedField,\n childIndex: index,\n ...formEditorParams,\n })}\n
\n );\n })}\n />\n \n {fieldData.label && fieldData.label !== \"\" && displayInputLabel.call(this, { fieldData, fieldName })}\n\n {fieldData.value.map((section, i) => {\n const sectionFieldName = `${fieldName}_${section.id}`;\n return (\n {\n this.setState(\n {\n form: {\n ...this.state.form,\n fields: {\n ...this.state.form.fields,\n [fieldName]: {\n ...fieldData,\n value: [\n ...fieldData.value,\n {\n title: \"New section\",\n text: \"\",\n id: String(Date.now()),\n },\n ],\n },\n },\n },\n },\n this.saveUserFields\n );\n }}\n >\n
\n );\n}\n\nexport function displayTaskFilePicker({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker } = this.state;\n\n let selectedFile = getSelectedFileFromTask({ fieldData, taskRevision });\n\n return (\n \n \n {taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed ? null : (\n \n
\n );\n })}\n \n Section title \n {\n this.setState(\n {\n form: {\n ...this.state.form,\n fields: {\n ...this.state.form.fields,\n [fieldName]: {\n ...fieldData,\n value: fieldData.value.map((crtSection) => {\n if (crtSection.id === section.id) {\n return { ...section, title };\n } else {\n return crtSection;\n }\n }),\n },\n },\n },\n },\n this.debouncedSaveUserFields\n );\n }}\n />\n
\n\n \n Section body \n
\n \n \n onTextareaPaste.call(this, { e, fieldData, fieldName: sectionFieldName, isNewEditor: false })\n }\n autoSize={{ minRows: 3 }}\n disabled={taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed}\n value={section.text || \"\"}\n data-cy={`${fieldName}-textarea`}\n onClick={(e) => {\n this.setState({\n fieldUnderEditName: sectionFieldName,\n fieldUnderEditSelectionStart: e.target.selectionStart,\n });\n }}\n onKeyUp={(e) => {\n if (this.state.fieldUnderEditName !== sectionFieldName) {\n this.setState({\n fieldUnderEditName: sectionFieldName,\n });\n }\n this.setState({\n fieldUnderEditSelectionStart: e.target.selectionStart,\n });\n }}\n onChange={(e) => {\n this.setState(\n {\n form: {\n ...this.state.form,\n fields: {\n ...this.state.form.fields,\n [fieldName]: {\n ...fieldData,\n value: fieldData.value.map((crtSection) => {\n if (crtSection.id === section.id) {\n return {\n ...section,\n text: getProcessedTextareaContent(e, latestKeyPressed),\n };\n } else {\n return crtSection;\n }\n }),\n },\n },\n },\n },\n () => {\n e.target.selectionEnd = e.target.selectionStart;\n this.debouncedSaveUserFields();\n }\n );\n }}\n />\n {fieldData.textOnly\n ? null\n : displayTextAreaToolbox.call(this, {\n taskRevision,\n fieldData,\n fieldName,\n sectionFieldName,\n isUnderReview,\n userIsCat2Checker,\n basicFormattingOnly: fieldData.basicFormattingOnly,\n })}\n
\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n {\n await updateFieldValue.call(this, {\n fieldName,\n value: e.target.value,\n nestedFieldParams,\n });\n\n setTimeout(window.reloadData, 500);\n }}\n value={selectedFile}\n disabled={taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed}\n >\n \n {taskRevision.files.items\n .filter((x) => !x.isArchived && x.type === fieldData.fileType)\n .map((crtFile) => {\n return (\n \n {crtFile.name}\n \n );\n })}\n \n \n
\n );\n}\n\nexport function displayModalWithFieldsInput({ fieldData, fieldName, taskRevision }) {\n return (\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n {\n this.setState({\n isModalWithFieldsVisible: true,\n modalWithFieldsName: fieldName,\n });\n }}\n >\n {fieldData.buttonText || \"Edit\"}\n \n
\n );\n}\n\nfunction displaySectionHeading({ fieldData }) {\n return (\n \n {fieldData.label} \n
\n );\n}\n\nexport function displaySection({\n fieldData,\n fieldName,\n forParentDynamicSectionListId,\n parentDynamicSectionListField,\n itemIndex,\n itemCountInDynamicSectionList,\n childSectionsInParent,\n}) {\n const stateKey = `section-isOpen-${fieldName}`;\n const { form, isFormEditor } = this.state;\n\n if (fieldData.isPlaceholderForDynamicSectionList) {\n // we don't display this field, it's just meant to be kept in the data structure, so we can reference it\n return null;\n }\n\n let parentDynamicSectionListId = fieldData.parentDynamicSectionList;\n\n if (parentDynamicSectionListId && !forParentDynamicSectionListId) {\n return;\n }\n\n let isAlwaysExpanded =\n !isFormEditor && (fieldData.isAlwaysExpanded || parentDynamicSectionListField?.sectionItemsAreAlwaysExpanded);\n\n let sectionIsOpen = isAlwaysExpanded || this.state[stateKey];\n\n const validationErrors = this.props.validationErrors || [];\n const fieldNamesWithValidationErrors = validationErrors.map((x) => x.fieldKey);\n\n let fieldsNamesInThisSection = [];\n for (let currentFieldName in this.state.form.fields) {\n let currentFieldDetails = this.state.form.fields[currentFieldName];\n if (currentFieldDetails.parentSection === fieldName) {\n fieldsNamesInThisSection.push(currentFieldName);\n }\n }\n\n let anyFieldsInThisSectionAreInvalid = false;\n for (let currentFieldName of fieldsNamesInThisSection) {\n if (fieldNamesWithValidationErrors.includes(currentFieldName)) {\n anyFieldsInThisSectionAreInvalid = true;\n break;\n }\n }\n\n if (anyFieldsInThisSectionAreInvalid) {\n sectionIsOpen = true;\n }\n\n let fieldLabel = fieldData.label;\n if (fieldData.isPlaceholderForDynamicSectionList) {\n let dynamicSectionListField = form.fields[fieldData.isPlaceholderForDynamicSectionList];\n if (dynamicSectionListField) {\n fieldLabel = `Fields for \"${dynamicSectionListField.label}\"`;\n }\n }\n\n let content = null;\n if (sectionIsOpen) {\n content = displayFields.call(this, {\n showHiddenByModal: false,\n sectionNameToDisplayFieldsFor: fieldName,\n });\n }\n\n return (\n \n {itemIndex > 0 && (\n \n \n
\n )}\n {content}
\n \n );\n}\n\nexport function displayButton({ fieldData, fieldName, nestedFieldParams, taskRevision }) {\n return (\n \n {\n if (!this.props.quote) {\n return;\n }\n let fileKey = this.props.quote.fileKey.replace(\".json\", \".pdf\");\n\n const buildDocumentResponse = await callRest({\n route: \"/build-document\",\n method: \"POST\",\n body: {\n organisationId: this.props.quote.organisation,\n quoteId: this.props.quote.id,\n projectId: this.props.quote.projectId,\n clientId: this.props.quote.clientId,\n targetFormButtonId: fieldData.id,\n },\n includeCredentials: false,\n });\n\n if (buildDocumentResponse.errorMessage) {\n throw new Error(`This error originated on the server: ${buildDocumentResponse.errorMessage}`);\n }\n\n const publicUrl = buildDocumentResponse.signedUrl;\n\n const fileBlob = (\n await axios({\n url: publicUrl,\n method: \"GET\",\n responseType: \"blob\", // Important\n })\n ).data;\n\n let fileName = fileKey.split(\"/\").slice(-1)[0];\n\n if (this.props.quote.currentRevisionName) {\n fileName = fileName.replace(\".pdf\", ` ${this.props.quote.currentRevisionName}.pdf`);\n }\n\n if (fieldData.resultingFileNameSuffix) {\n fileName = fileName.replace(\".pdf\", `${fieldData.resultingFileNameSuffix}.pdf`);\n }\n\n await downloadBlob({\n blob: fileBlob,\n fileName,\n });\n }}\n >\n {fieldData.label}\n \n
\n );\n}\n\nexport function displaySpreadsheet({ fieldData, fieldName, nestedFieldParams, taskRevision }) {\n const { userIsCat2Checker, isUnderReview } = this.state;\n\n const isReadOnly = taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed;\n\n let spreadsheetData;\n if (fieldData.value) {\n spreadsheetData = JSON.parse(fieldData.value);\n } else {\n spreadsheetData = {\n columnCount: DOCUMENT_FORM_SPREADSHEET_DEFAULT_COLUMNS,\n rowCount: DOCUMENT_FORM_SPREADSHEET_DEFAULT_ROWS,\n rows: [],\n };\n }\n\n return (\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n\n \n \n \n \n
\n );\n}\n\nexport function displayTextarea({ fieldData, fieldName, taskRevision, nestedFieldParams }) {\n const { userIsCat2Checker, isUnderReview, isHardcodedTemplate } = this.state;\n let parsedFieldValue;\n const isEmailText = fieldName === \"emailText\";\n let useNewEditor = true;\n\n if (isHardcodedTemplate || isEmailText) {\n useNewEditor = false;\n } else {\n try {\n if (fieldData.value && fieldData.value !== \"\") {\n parsedFieldValue = JSON.parse(fieldData.value);\n }\n } catch (e) {\n useNewEditor = false;\n }\n }\n\n if (useNewEditor && parsedFieldValue && !Array.isArray(parsedFieldValue)) {\n parsedFieldValue = [];\n }\n\n return (\n \n
\n \n {\n updateFieldValue.call(this, {\n fieldName,\n value,\n nestedFieldParams,\n });\n }}\n isReadOnly={isReadOnly}\n />\n {/* {\n console.log(\"onChange()\");\n const stringifiedSpreadsheet = getSerialisedSpreadsheet(newSpreadsheetData);\n if (fieldData.value !== stringifiedSpreadsheet) {\n updateFieldValue.call(this, {\n fieldName,\n value: stringifiedSpreadsheet,\n nestedFieldParams,\n });\n }\n }}\n mode={mode}\n /> */}\n
\n \n
\n \n {displayInputLabel.call(this, { fieldData, fieldName })}\n\n \n {useNewEditor ? (\n {\n updateFieldValue.call(this, {\n fieldName,\n value: newValue,\n nestedFieldParams,\n });\n }}\n documentProps={{\n ...this.props,\n ...this.state,\n }}\n extraToolbarButtons={fieldData.textOnly ? undefined : [\"page-break\", \"attachment\"]}\n basicFormattingOnly={fieldData.basicFormattingOnly}\n disabled={taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed}\n defaultImageWidth={fieldData.defaultImageWidth}\n onlyDisplayAttachmentName={fieldData.onlyDisplayAttachmentName}\n />\n ) : (\n onTextareaPaste.call(this, { e, fieldData, fieldName, isNewEditor: true })}\n autoSize={{ minRows: 3 }}\n disabled={taskRevision.isReadOnly || userIsCat2Checker || this.isReviewed}\n value={fieldData.value || \"\"}\n onClick={(e) => {\n this.setState({\n fieldUnderEditName: fieldName,\n fieldUnderEditSelectionStart: e.target.selectionStart,\n });\n }}\n onKeyDown={(e) => {\n latestKeyPressed = e.key;\n }}\n onKeyUp={(e) => {\n if (this.state.fieldUnderEditName !== fieldName) {\n this.setState({\n fieldUnderEditName: fieldName,\n });\n }\n this.setState({\n fieldUnderEditSelectionStart: e.target.selectionStart,\n });\n }}\n onChange={(e) => {\n updateFieldValue.call(this, {\n fieldName,\n value: getProcessedTextareaContent(e, latestKeyPressed),\n nestedFieldParams,\n });\n }}\n />\n )}\n \n {!useNewEditor &&\n !fieldData.textOnly &&\n displayTextAreaToolbox.call(this, {\n taskRevision,\n fieldData,\n fieldName,\n isUnderReview,\n userIsCat2Checker,\n })}\n
\n );\n}\n\nexport async function deleteSection({ fieldData, fieldName, section }) {\n try {\n await new Promise((resolve, reject) => {\n Modal.confirm({\n title: \"Confirm delete section\",\n maskClosable: true,\n content: <>Are you sure you want to delete the selected section?,\n onOk: () => {\n resolve();\n },\n onCancel: () => {\n reject();\n },\n });\n });\n } catch (e) {\n // nothing, it means the user said \"no\"\n return;\n }\n\n this.setState(\n {\n form: {\n ...this.state.form,\n fields: {\n ...this.state.form.fields,\n [fieldName]: {\n ...fieldData,\n value: fieldData.value.filter((crtSection) => crtSection.id !== section.id),\n },\n },\n },\n },\n this.saveUserFields\n );\n}\n\nasync function updateFieldValue({ fieldName, value, keyName = \"value\", nestedFieldParams }) {\n const { form } = this.state;\n if (!this.debouncedSaveUserFields) {\n return;\n }\n\n let { rootFieldName, childIndex } = nestedFieldParams || {};\n\n let newForm = JSON.parse(JSON.stringify(form));\n let targetField = newForm.fields[rootFieldName];\n if (childIndex !== undefined) {\n if (!Array.isArray(targetField.value)) {\n targetField.value = [{}];\n }\n targetField = targetField.value[childIndex];\n keyName = fieldName;\n } else {\n rootFieldName = fieldName;\n }\n\n if (!targetField) {\n targetField = newForm.fields[rootFieldName];\n }\n\n targetField[keyName] = value;\n\n // console.log({\n // fieldName,\n // value,\n // keyName,\n // nestedFieldParams,\n // newForm,\n // oldform,\n // });\n // console.log(\"\");\n // console.log(\"\");\n // console.log(\"\");\n\n return new Promise((resolve) => {\n this.setState(\n {\n form: newForm,\n },\n async () => {\n await this.debouncedSaveUserFields();\n\n if (targetField?.triggersFormUpdate && this.recalculateDynamicFormFields) {\n await this.recalculateDynamicFormFields();\n }\n\n resolve();\n }\n );\n });\n}\n\nexport async function buildReport({ fileId, taskId, requestId, users, organisationDetails, includeFileName = true }) {\n const [fileResponse, taskResponse] = await Promise.all([\n callGraphQLSimple({\n message: \"Failed to retrieve file details\",\n queryCustom: \"getFile\",\n variables: {\n id: fileId,\n },\n }),\n taskId\n ? callGraphQLSimple({\n message: `Failed to retrieve ${getSimpleLabel(\"task\")} details`,\n queryCustom: \"getTaskSimple\",\n variables: {\n id: taskId,\n },\n })\n : undefined,\n ]);\n\n let file = fileResponse.data.getFile;\n const task = taskResponse?.data.getTask;\n\n const formFileKey = file.versions.items.slice(-1)[0].key.replace(\"public/\", \"\");\n const formFilePublicUrl = await getS3File(formFileKey);\n let form = (await axios.get(formFilePublicUrl)).data;\n\n let formBeforeReplacingDynamicFields = JSON.parse(JSON.stringify(form));\n\n await replaceDynamicFormFields({\n form,\n params: {\n file,\n task,\n taskRevision: task?.revisions.items.find((x) => x.id === file.taskRevisionId),\n project: task?.project,\n users,\n organisationDetails,\n },\n });\n\n let weNeedToReUploadTheForm = false;\n\n for (let field in form.fields) {\n let fieldDetails = form.fields[field];\n if (\n fieldDetails.type === \"radio-list\" &&\n fieldDetails.autoSelectFirstOption &&\n fieldDetails.options &&\n fieldDetails.options.length > 0\n ) {\n if (!fieldDetails.value) {\n fieldDetails.value = fieldDetails.options[0].value;\n weNeedToReUploadTheForm = true;\n } else {\n let valueIsAmongOptions = fieldDetails.options.some((option) => option.value === fieldDetails.value);\n if (!valueIsAmongOptions) {\n fieldDetails.value = fieldDetails.options[0].value;\n weNeedToReUploadTheForm = true;\n }\n }\n }\n }\n\n if (JSON.stringify(form) !== JSON.stringify(formBeforeReplacingDynamicFields)) {\n weNeedToReUploadTheForm = true;\n }\n\n if (weNeedToReUploadTheForm) {\n await Storage.put(formFileKey, JSON.stringify(form));\n }\n\n // TODO: re-implement checking for deleted attachments;\n // const attachments = file.reportMetadata?.inserts;\n // const hasAttachments = attachments && attachments.length > 0;\n\n try {\n // if (hasAttachments) {\n // const status = await this.checkAttachmentsStatus(attachments);\n\n // if (status !== \"VALID\") {\n // this.setState({ isDownloading: false });\n // return;\n // }\n // }\n\n let formFieldFileToTakeNameFrom;\n\n for (let fieldName in form.fields) {\n let fieldData = form.fields[fieldName];\n if (fieldData.takeFileNameFromSelectedOption) {\n if (fieldData.value) {\n formFieldFileToTakeNameFrom = fieldData;\n }\n }\n }\n let buildDocumentResponse;\n\n try {\n buildDocumentResponse = await callRest({\n displayError: false,\n route: \"/build-document\",\n method: \"POST\",\n body: {\n organisationId: file.organisation,\n fileId: file.id,\n taskId: task?.id,\n projectId: task?.projectId,\n clientId: task?.clientId,\n requestId,\n },\n includeCredentials: false,\n });\n } catch (e) {\n let problems = e.response?.data;\n\n if (problems.code === \"ENCRYPTED_ATTACHMENTS\") {\n notification.error({\n message: (\n \n Failed to generate document because it contains encrypted attachments.\n
\n
\n Please decrypt the following attachments before retrying:\n\n
\n ),\n duration: 0,\n });\n return;\n } else if (problems.code === \"DELETED_ATTACHMENTS\") {\n notification.error({\n message: (\n \n
\n Please decrypt the following attachments before retrying:\n\n
- \n {problems.keys.map((key) => (\n
- {key.split(`public/${window.organisationDetails.id}/projects/`)} \n ))}\n
\n Failed to generate document because it contains deleted attachments.\n
\n Please remove the following attachments before retrying:\n
\n ),\n duration: 0,\n });\n return;\n } else {\n notification.error({\n message: (\n \n Please remove the following attachments before retrying:\n
- \n {problems.keys.map((key) => (\n
- {key.split(`public/${window.organisationDetails.id}/projects/`)} \n ))}\n
\n Failed to generate document \n
\n{e.message} \n
\n ),\n duration: 0,\n });\n }\n }\n\n if (buildDocumentResponse.errorMessage) {\n throw new Error(`This error originated on the server: ${buildDocumentResponse.errorMessage}`);\n }\n\n let firstExport;\n\n let sheet = file.sheets.items[0];\n let sheetRevision = sheet.revisions.items.slice(-1)[0];\n\n let fileNameOverride;\n let sheetRevisionNameOverride = sheetRevision.name;\n\n let fileNameIncludingAnyOverrides;\n\n if (includeFileName) {\n if (formFieldFileToTakeNameFrom) {\n // console.log(\"formFieldFileToTakeNameFrom = \", formFieldFileToTakeNameFrom);\n if (formFieldFileToTakeNameFrom.value.length === 0) {\n notification.error({\n message: `No file selected: ${formFieldFileToTakeNameFrom.label}`,\n });\n return;\n }\n\n let targetFileDetails = (\n await window.callGraphQLSimple({\n message: `Failed to retrieve details for ${formFieldFileToTakeNameFrom.label}`,\n queryCustom: \"getFile\",\n variables: {\n id: formFieldFileToTakeNameFrom.value,\n },\n })\n ).data.getFile;\n fileNameOverride = targetFileDetails.versions.items\n .slice(-1)[0]\n .exports[0].key.split(\"/\")\n .slice(-1)[0]\n .split(\".pdf\")[0];\n sheetRevisionNameOverride = targetFileDetails.sheets.items[0].revisions.items.slice(-1)[0].name;\n sheet = targetFileDetails.sheets.items[0];\n sheetRevision = sheet.revisions.items.slice(-1)[0];\n file = targetFileDetails;\n }\n\n if (!HAS_SHEETS[file.type]) {\n let fileVersion =\n file.versions.items.find((x) => x.id === sheetRevision.fileVersionId) || file.versions.items.slice(-1)[-0];\n firstExport = fileVersion.exports[0];\n } else {\n firstExport = sheetRevision.exports[0];\n }\n\n let latestFileVersion = file.versions.items.slice(-1)[0];\n\n let customReference = form?.fields?.customTaskId?.value || latestFileVersion?.customId;\n\n let changedFileName = customReference;\n if (!changedFileName) {\n let originalFileName = fileNameOverride || firstExport.fileName || getFilenameFromKey(firstExport.key);\n changedFileName = await changeFileNameAtDownloadTime({\n organisation: file.organisation,\n fileName: originalFileName,\n sheetRevisionName: sheetRevisionNameOverride,\n sheetRevision,\n file,\n type: KEY_TYPES.FILE_SHEET_EXPORT,\n task,\n form,\n });\n }\n fileNameIncludingAnyOverrides = changedFileName;\n }\n\n return {\n signedUrl: buildDocumentResponse.signedUrl,\n fileName: fileNameIncludingAnyOverrides,\n file,\n task,\n key: firstExport?.key,\n };\n } catch (err) {\n console.log(err);\n notification.error({\n message: (\n \n
\n {err.message}\n
\n {\n updateFieldValue.call(this, {\n fieldName,\n value,\n nestedFieldParams,\n });\n }}\n />\n setState({ isCreateProjectModalOpen: true })}\n disabled={disabled}\n >\n setState({ isCreateProjectModalOpen: false })}\n predefinedFields={{\n clientId: fieldData.predefinedClientId,\n }}\n onSave={(project) => {\n updateFieldValue.call(this, {\n fieldName,\n value: project.id,\n nestedFieldParams,\n });\n }}\n />\n )}\n
\n );\n}\n","import { useCallback, useEffect, useState, useRef, useContext, memo } from \"react\";\nimport { Button, Tooltip, Popover, Select } from \"antd\";\nimport isHotkey from \"is-hotkey\";\nimport cx from \"classnames\";\nimport { Editable, withReact, Slate, useSelected, ReactEditor } from \"slate-react\";\nimport { Editor, Transforms, createEditor, Element as SlateElement } from \"slate\";\nimport { readAndCompressImage } from \"browser-image-resizer\";\nimport { useGetSetState } from \"react-use\";\nimport { Modal } from \"antd\";\nimport moment from \"moment\";\nimport _ from \"lodash\";\nimport {\n LoadingOutlined,\n DeleteOutlined,\n EyeOutlined,\n BoldOutlined,\n ExclamationCircleOutlined,\n // ItalicOutlined,\n UnderlineOutlined,\n OrderedListOutlined,\n UnorderedListOutlined,\n AlignLeftOutlined,\n AlignCenterOutlined,\n AlignRightOutlined,\n FilePdfOutlined,\n FileImageOutlined,\n CaretDownOutlined,\n // ClearOutlined,\n} from \"@ant-design/icons\";\n\nimport { TextareaContext } from \"common/context\";\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { getElementFontSize, getElementColor } from \"common/documentRenderHelpers\";\nimport {\n THRESHOLD_FOR_FULL_SIZE_VERSION,\n ATTACHMENTS_MAX_IMAGE_WIDTH,\n ATTACHMENTS_MAX_IMAGE_HEIGHT,\n} from \"common/constants\";\nimport { getPastedFiles, checkForLargeAttachments } from \"ReportPage/Report/reportHelpers\";\nimport { KEY_TYPES, encodeKey, getAttachmentTypeFromKey } from \"common/shared\";\nimport getS3File from \"common/getS3File\";\n// import { displayHighlightedMatchInString } from \"common/helpers\";\n\nimport { PaperclipIcon, PageBreakIcon /*, SubscriptIcon, SuperscriptIcon*/ } from \"common/icons\";\nimport InsertAttachmentModal from \"Modals/InsertAttachmentModal/InsertAttachmentModal\";\nimport InfoItem from \"InfoItem/InfoItem\";\nimport Input from \"Input/Input\";\nimport ErrorBoundary from \"ErrorBoundary/ErrorBoundary\";\nimport FilePreview from \"FilePreview/FilePreview\";\nimport Avatar from \"Avatar/Avatar\";\n\nimport \"./Textarea.scss\";\n\n// import { Button, Icon, Toolbar } from '../components'\n\nconst HOTKEYS = {\n \"mod+b\": { format: \"bold\" },\n \"mod+i\": { format: \"italic\" },\n \"mod+u\": { format: \"underline\" },\n \"mod+`\": { format: \"code\" },\n \"mod+s\": { format: \"subscript\" },\n \"mod+p\": { format: \"superscript\" },\n};\n\nconst LIST_TYPES = [\"numbered-list\", \"bulleted-list\"];\nconst TEXT_ALIGN_TYPES = [\"left\", \"center\", \"right\", \"justify\"];\n\nconst VOID_NODE_TYPES = [\"page-break\", \"attachment\"];\n\nconst EMPTY_VALUE = [\n {\n type: \"paragraph\",\n children: [{ text: \"\" }],\n },\n];\n\nconst INLINE_NOTE_TYPES = [\"mention\"];\n\nexport function Textarea({\n onChange = undefined,\n debouncedOnChange = undefined,\n placeholder = undefined,\n renderPlaceholder = null,\n defaultValue = undefined,\n extraToolbarButtons = [],\n documentProps = {},\n disabled = false,\n basicFormattingOnly = false,\n includeAlignmentButtons = true,\n hideToolbar = false,\n noBorder = false,\n noPadding = false,\n minHeight,\n suggestions = [],\n autocompleteStartChars = [],\n users = [],\n includeImageFormatting = true,\n includeWarningAboutLargeAttachments = true,\n defaultImageWidth = \"50%\",\n onlyDisplayAttachmentName,\n}) {\n const textareaContext = useContext(TextareaContext) || {};\n const editorRef = useRef(null); // Reference to the editor div\n\n useEffect(() => {\n // Add click event listener\n document.addEventListener(\"click\", handleClickOutside);\n\n return () => {\n // Cleanup event listener on component unmount\n document.removeEventListener(\"click\", handleClickOutside);\n };\n }, []);\n\n useEffect(() => {\n computeRootFolder(textareaContext);\n }, [textareaContext]);\n\n async function computeRootFolder(textareaContext) {\n // debugger;\n if (!textareaContext) {\n return;\n }\n\n if (textareaContext.projectId) {\n let projectFolder = await encodeKey({\n type: KEY_TYPES.PROJECT_FOLDER,\n data: {\n organisation: window.apiUser?.organisation,\n projectId: textareaContext.projectId,\n },\n });\n\n setState({\n rootFolder: projectFolder,\n });\n }\n }\n\n const organisationDetails = window.organisationDetails;\n const numberVariables = organisationDetails.variables?.items?.filter((x) => x.type === \"NUMBER\");\n const colorVariables = organisationDetails.variables?.items?.filter((x) => x.type === \"COLOR\");\n\n let initialValue = defaultValue;\n\n if (!initialValue || (Array.isArray(initialValue) && initialValue.length === 0)) {\n initialValue = EMPTY_VALUE;\n }\n\n const [getState, setState] = useGetSetState({\n selectedElement: undefined,\n cursorTop: 0,\n cursorLeft: 0,\n isAutocompleteOpen: false,\n autocompleteOptions: [],\n inputForAutocomplete: \"\",\n rootFolder: undefined,\n });\n\n const { rootFolder } = getState();\n\n let defaultDebouncedOnChange = () => {};\n let actualDebouncedOnChange = useCallback(_.debounce(debouncedOnChange || defaultDebouncedOnChange, 500), []);\n\n const [isFocused, setIsFocused] = useState(true);\n let { fieldName, projectFolder } = documentProps;\n if (!projectFolder && rootFolder) {\n projectFolder = rootFolder;\n }\n let { apiUser, task, quote, invoice, purchaseOrder, request } = documentProps;\n\n if (!apiUser && window.apiUser) {\n apiUser = window.apiUser;\n }\n\n if (!task && textareaContext.task) {\n task = textareaContext.task;\n }\n\n if (!quote && textareaContext.quote) {\n quote = textareaContext.quote;\n }\n\n if (!invoice && textareaContext.invoice) {\n invoice = textareaContext.invoice;\n }\n\n if (!purchaseOrder && textareaContext.purchaseOrder) {\n purchaseOrder = textareaContext.purchaseOrder;\n }\n\n if (!request && textareaContext.request) {\n request = textareaContext.request;\n }\n\n const [currentEditorValue, setCurrentEditorValue] = useState(initialValue);\n\n const [publicImageUrls, setPublicImageUrls] = useState({});\n const renderElement = useCallback(\n (props) => (\n onAutocompleteOptionClick(option)}>\n {option.label}\n {/* {displayHighlightedMatchInString({ text: option, highlight: inputForAutocomplete })} */}\n
\n ))}\n \n );\n }\n\n function onAutocompleteOptionClick(option) {\n const { selection } = editor;\n\n if (!selection) {\n return;\n }\n\n const [node] = Editor.node(editor, selection);\n const nodeText = node.text;\n const cursorOffset = selection.anchor.offset;\n\n // Start checking from the cursor, moving backwards\n let matchLength = 0;\n\n // Loop backwards from the cursor, find how much matches the option\n for (let i = cursorOffset - 1; i >= 0; i--) {\n const typedText = nodeText.slice(i, cursorOffset); // Text from current position to cursor\n if (option.matchText?.toLowerCase().includes(typedText.toLowerCase())) {\n matchLength = cursorOffset - i; // Calculate length of match\n } else {\n break; // Stop once no more match is found\n }\n }\n\n // if at the end of the range, we have one of the autocomplete start chars, add one to the match length\n if (autocompleteStartChars.includes(nodeText[cursorOffset - matchLength - 1])) {\n matchLength++;\n }\n\n // Replace the matched text with the full option\n Transforms.select(editor, {\n anchor: {\n path: selection.anchor.path,\n offset: cursorOffset - matchLength, // Start from where the match begins\n },\n focus: {\n path: selection.anchor.path,\n offset: cursorOffset, // End at the cursor position\n },\n });\n\n // Insert the entire option to replace the matched part\n\n if (option.type) {\n switch (option.type) {\n case \"mention\":\n const userTag = {\n type: \"mention\",\n data: option.value,\n children: [{ text: \"\" }], // Inline elements must have children with text\n };\n\n // Insert the mention inline element\n Transforms.insertNodes(editor, userTag);\n\n break;\n default:\n Transforms.insertText(editor, option.value);\n break;\n }\n } else {\n Transforms.insertText(editor, option.value);\n }\n\n Transforms.move(editor, { distance: 1, unit: \"offset\" });\n ReactEditor.focus(editor);\n\n // Hide the autocomplete\n setState({\n isAutocompleteOpen: false,\n });\n }\n\n const extraToolbarButtonsToDisplay = extraPossibleToolbarBlockElementButtons.filter((x) =>\n extraToolbarButtons?.includes(x.name)\n );\n\n const { cursorTop, cursorLeft, isAutocompleteOpen, autocompleteOptions, inputForAutocomplete } = getState();\n\n return (\n \n {\n setCurrentEditorValue(newValue);\n if (\n (onChange && typeof onChange === \"function\") ||\n (debouncedOnChange && typeof debouncedOnChange === \"function\")\n ) {\n const newValueString = JSON.stringify(newValue || {}, null, 2);\n const oldValueString = JSON.stringify(defaultValue || {}, null, 2);\n\n if (newValueString !== oldValueString) {\n if (debouncedOnChange) {\n actualDebouncedOnChange(newValueString);\n } else if (onChange) {\n onChange(newValueString);\n }\n // console.log(\"oldValueString = \", oldValueString);\n // console.log(\"newValueString = \", newValueString);\n }\n }\n }}\n >\n \n {!disabled && (\n {\n setState({ selectedElement: undefined });\n }}\n decorate={urlDecorator}\n />\n\n {isAutocompleteOpen &&\n autocompleteOptions.length > 0 &&\n displayAutocompleteOptions({\n autocompleteOptions,\n })}\n
\n \n \n {displayAttachmentModal()}\n \n
\n )}\n \n {!basicFormattingOnly && (\n
\n \n
\n )}\n\n \n
\n \n
\n \n
\n \n
\n \n
\n {includeAlignmentButtons && (\n \n
\n )}\n {/* \n
*/}\n {extraToolbarButtonsToDisplay.length > 0 && (\n \n {extraToolbarButtonsToDisplay.map(({ name, icon, tooltip }) => {\n return
\n )}\n \n
\n );\n }\n\n function PreviewButton({ element }) {\n const [attachmentForPreview, setAttachmentForPreview] = useState(null);\n return (\n \n setAttachmentForPreview(null)}\n organisationId={window.organisationDetails.id}\n allowedTypes={[\"IMAGE\", \"PDF\"]}\n />\n )}\n
\n );\n }\n\n switch (element.type) {\n case \"mention\":\n return (\n \n \n {children}\n
\n );\n case \"block-quote\":\n return (\n \n {children}\n\n );\n case \"bulleted-list\":\n return (\n
- \n {children}\n
\n {children}\n
\n );\n case \"heading-two\":\n return (\n\n {children}\n
\n );\n case \"list-item\":\n return (\n- \n {children}\n
\n {children}\n
\n );\n }\n}\n\nfunction Leaf({ attributes, numberVariables, colorVariables, children, leaf }) {\n let style = {\n ...(attributes?.style || {}),\n };\n const fontSize = getElementFontSize({ element: leaf, numberVariables });\n const color = getElementColor({ element: leaf, colorVariables });\n if (fontSize !== undefined) {\n style.fontSize = `${fontSize}px`;\n }\n\n if (color !== undefined) {\n style.color = color;\n }\n\n if (leaf.bold) {\n children = {children};\n }\n\n if (leaf.code) {\n children ={children};\n }\n\n if (leaf.italic) {\n children = {children};\n }\n\n if (leaf.underline) {\n children = {children};\n }\n\n if (leaf.subscript) {\n children = {children};\n }\n\n if (leaf.superscript) {\n children = {children};\n }\n\n if (leaf.decoration === \"link\") {\n children = (\n \n
\n
\n
\n \n {organisationDetails.settings?.general?.usesTeams &&\n organisationDetails.settings?.task?.automaticallyCreateProject && (\n \n \n \n )}\n {!organisationDetails.settings?.task?.hideCopyTaskAtCreationTime && (\n \n {\n form.setFieldsValue({ useCopyFrom: e.target.checked });\n forceUpdate();\n }}\n />\n \n )}\n \n {\n form.setFieldsValue({ copyFrom: \"\" });\n forceUpdate();\n }}\n onChange={(copyFrom) => {\n form.setFieldsValue({ copyFrom });\n forceUpdate();\n }}\n onDropdownVisibleChange={(isOpen) => {\n setIsTaskPickerSelected(isOpen);\n }}\n />\n \n {\n if (\n organisationDetails.settings?.task?.automaticallyCreateProject ||\n !title ||\n !form.getFieldValue(\"projectId\")\n ) {\n return;\n }\n\n const cleanTitle = getCleanValue(title);\n\n const titleIsUsedInProject = tasks\n .filter((x) => !x.isArchived)\n .find(\n (task) =>\n task.projectId === form.getFieldValue(\"projectId\") && getCleanValue(task.title) === cleanTitle\n );\n\n if (titleIsUsedInProject) {\n throw new Error(\n `${getSimpleLabel(\"Task\")} title already used for the chosen ${getSimpleLabel(\"project\")}`\n );\n }\n },\n },\n ]}\n >\n {\n form.setFieldsValue({ title });\n forceUpdate();\n form.validateFields([\"title\", \"taskNumber\"]);\n }}\n />\n \n {organisationDetails.usesTaskInitials && (\n {\n if (!initials) {\n return;\n }\n if (initials.length > MAX_INITIALS_LENGTH) {\n throw new Error(`Initials cannot contain more than ${MAX_INITIALS_LENGTH} characters`);\n }\n for (let i = 0; i < INVALID_CHARACTERS.length; i++) {\n if (initials.includes(INVALID_CHARACTERS[i])) {\n throw new Error(\n `Value contains at least one of the following invalid characters: ${INVALID_CHARACTERS.join(\n \" \"\n )}`\n );\n }\n }\n },\n },\n ]}\n >\n \n \n )}\n\n {organisationDetails.settings?.task?.automaticallyCreateProject ? (\n \n \n {\n return option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;\n }}\n onChange={(clientId) => {\n form.setFieldsValue({ clientId });\n forceUpdate();\n if (form.getFieldValue(\"title\")) {\n form.validateFields([\"title\"]);\n }\n }}\n value={form.getFieldValue(\"clientId\")}\n data-cy=\"project-client-dropdown\"\n >\n {clients.map((client, i) => (\n \n {client.name}\n \n ))}\n \n \n setIsCreateClientModalVisible(true)}\n >\n
\n \n ) : (\n \n \n {\n form.setFieldsValue({ projectId });\n forceUpdate();\n if (form.getFieldValue(\"title\")) {\n form.validateFields([\"title\"]);\n }\n }}\n value={form.getFieldValue(\"projectId\")}\n predefinedFields={predefinedFields}\n />\n \n setIsCreateProjectModalVisible(true)}\n disabled={predefinedFields.projectId}\n >\n
\n \n )}\n\n {!organisationDetails.settings?.automaticallyCreateProject &&\n !organisationDetails.settings?.task?.hideCustomTaskNumberAtCreationTime && (\n {\n if (!taskNumber) {\n return;\n }\n\n if (taskNumber.includes(\"-\")) {\n throw new Error(`${getSimpleLabel(\"Task\")} number cannot include hyphens`);\n }\n\n if (!predefinedFields.projectId && !form.getFieldValue(\"projectId\")) {\n return;\n }\n\n const projectId = predefinedFields.projectId || form.getFieldValue(\"projectId\");\n\n const taskId = `${projectId}-${taskNumber.trim()}`;\n\n const taskNumberIsAlreadyUsed = tasks.some((x) => x.id === taskId);\n if (taskNumberIsAlreadyUsed) {\n throw new Error(`${getSimpleLabel(\"Task\")} number is already used in the selected project`);\n }\n },\n },\n ]}\n >\n \n \n \n\n {organisationDetails?.settings?.task?.usesPriority && (\n \n \n \n )}\n\n {organisationDetails?.settings?.task?.usesRequestedDate && (\n \n \n \n {\n form.setFieldsValue({\n startDate,\n });\n forceUpdate();\n }}\n />\n \n )}\n {organisationDetails.settings?.task?.usesStartAndEndDates && (\n \n {\n form.setFieldsValue({\n endDate,\n });\n forceUpdate();\n }}\n />\n \n )}\n\n {organisationDetails?.settings?.task?.usesTaskEstimates && (\n \n \n )}\n\n {organisationDetails.usesDesignAuthority && (\n \n \n \n {getUserReadableCatLevel(organisationDetails, 0)}\n \n \n {getUserReadableCatLevel(organisationDetails, 1)}\n \n \n {getUserReadableCatLevel(organisationDetails, 2)}\n \n \n {getUserReadableCatLevel(organisationDetails, 3)}\n \n \n \n )}\n\n {organisationDetails.usesSprints && !predefinedSprintId && (\n \n \n \n )}\n\n \n \n \n \n \n\n {organisationDetails.settings?.general?.usesTaskConfirmation && (\n \n \n \n \n
\n \n {isCreateProjectModalVisible && (\n \n \n {isLoading ? \"Creating\" : \"Submit\"}\n \n
\n \n \n setIsCreateAnother(e.target.checked)}\n name=\"create-another\"\n >\n Create another {windowWidth > 800 && `${getSimpleLabel(\"task\")} after this with the same choices`}\n \n \n
\n \n this.setState({ isCreateTaskModalVisible: true })}\n icon={ this.setState({ isCreateTaskModalVisible: false })} apiUser={apiUser} />\n )}\n {isLoadingTasks &&
\n );\n }\n}\n\nexport default withRouter(\n withSubscriptions({\n Component: TaskFilters,\n subscriptions: [\"organisationDetails\", \"sprints\", \"tasks\", \"users\", \"clients\", \"projects\", \"groups\"],\n })\n);\n","import { Dropdown, Menu, Checkbox, Button } from \"antd\";\nimport { DownOutlined } from \"@ant-design/icons\";\n\nimport { COOKIE_NAME_DASHBOARD_EXCLUDED_COLUMNS } from \"common/constants\";\n\nexport function ColumnPickerDropdown({\n isColumnDropdownVisible,\n columns,\n excludedColumns,\n visibleColumns,\n onToggle,\n onChange,\n organisationDetails,\n}) {\n const hiddenColumnCount = columns.length - visibleColumns.length;\n\n function onCheckboxChange(e, column) {\n e.stopPropagation();\n\n let newExcludedColumns = {\n ...excludedColumns,\n [column.key]: !excludedColumns[column.key],\n };\n\n onChange(newExcludedColumns, () => {\n window.localDatabase.setItem(\n `${COOKIE_NAME_DASHBOARD_EXCLUDED_COLUMNS}-${organisationDetails.id}`,\n JSON.stringify(excludedColumns)\n );\n });\n }\n\n return (\n \n
\n {this.props.includeCreateTask === false ? null : (\n \n this.setState({ isDropdownVisible })}\n >\n } data-cy=\"task-filters-button\">\n {this.props.label ? this.props.label : \"Filters\"}{\" \"}\n \n \n
\n\n {this.props.includeExportButton && isAuthorised([\"EXPORT_TASKS\"]) && (\n \n )}\n \n task.id}\n bordered={true}\n onChange={(pagination) => {\n this.setState({ currentPageNumber: pagination.current });\n }}\n onRow={(task) => {\n return {\n onClick: () => {\n onSelectTask(task.id);\n },\n };\n }}\n />\n
\n \n );\n }\n}\n\nexport default withSubscriptions({\n Component: withRouter(TableView),\n subscriptions: [\"tasks\", \"apiUser\", \"users\", \"organisationDetails\", \"projects\", \"clients\", \"groups\"],\n});\n","import cx from \"classnames\";\nimport { Droppable } from \"react-beautiful-dnd\";\nimport { Typography } from \"antd\";\n\nimport \"./Lane.scss\";\n\nexport default function Lane({ lane, viewType, showTitle = true, children }) {\n let itemCountLabel;\n if (lane.allItemCount === undefined || lane.allItemCount === null || lane.allItemCount === lane.itemCount) {\n itemCountLabel = (\n <>\n ({lane.itemCount} item{lane.itemCount !== 1 ? \"s\" : \"\"})\n \n );\n } else {\n itemCountLabel = `(${lane.itemCount} visible item${lane.itemCount !== 1 ? \"s\" : \"\"}, ${\n lane.allItemCount - lane.itemCount\n } more\n hidden by filters)`;\n\n if (!showTitle) {\n itemCountLabel = itemCountLabel.substring(1, itemCountLabel.length - 1);\n }\n }\n\n return (\n \n
\n )}\n \n {children}\n {provided.placeholder}\n
\n \n \n {children}\n
\n \n );\n}\n","import React from \"react\";\nimport cx from \"classnames\";\nimport { Link } from \"react-router-dom\";\n\nimport { PUBLIC_S3_BUCKET_URL } from \"common/publicS3BucketUrl\";\n\nimport \"./ClientLogo.scss\";\nimport { Typography } from \"antd\";\n\nexport default class ClientLogo extends React.Component {\n render() {\n const { client, className, size = \"medium\", includeLink = false, displayNameIfLogoIsMissing = true } = this.props;\n if (!client) {\n return null;\n }\n\n let image = client && client.key && `${PUBLIC_S3_BUCKET_URL}/public/${client.key}`;\n let content = null;\n\n if (!image && !displayNameIfLogoIsMissing) {\n return null;\n }\n\n if (!image) {\n content = (\n \n {client?.name} \n
\n );\n } else {\n content = \n {revisionsToDisplay.map((taskRevision) => {\n return (\n {\n e.dataTransfer.setData(\"task-id\", task.id);\n e.dataTransfer.setData(\"task-revision-id\", taskRevision.id);\n e.dataTransfer.setData(\"draggable-type\", \"task-revision\");\n }}\n >\n {taskRevision.name} \n
\n );\n })}\n \n );\n } else if (\n isTimelinePage &&\n organisationDetails.settings?.timeline?.planTaskStatusesInsteadOfTasks &&\n organisationDetails.taskStatuses?.length\n ) {\n isTaskCardDraggable = false;\n let statusesToDisplay = organisationDetails.taskStatuses;\n\n if (isUnplannedTaskList) {\n statusesToDisplay = statusesToDisplay.filter((taskStatus) => {\n let taskStatusIsPlanned = timelineBlocks.some((block) => {\n return (\n block.taskStatus === taskStatus.name &&\n moment(block.startDate).isSameOrAfter(planningStartDate) &&\n moment(block.startDate).isBefore(planningEndDate)\n );\n });\n\n return !taskStatusIsPlanned;\n });\n }\n\n taskStatusElements = (\n \n {statusesToDisplay.map((taskStatus) => {\n return (\n {\n e.dataTransfer.setData(\"task-id\", task.id);\n e.dataTransfer.setData(\"task-status\", taskStatus.name);\n e.dataTransfer.setData(\"draggable-type\", \"task-status\");\n }}\n >\n {taskStatus.name} \n
\n );\n })}\n \n );\n }\n\n let taskItemElement = (\n \n Subtasks done: \n
\n ) : null}\n {!isAuthorised([\"TASK.VIEW_BUDGET_BAR\"]) || !spent ? null : (\n \n {!organisationDetails.settings?.task?.automaticallyCreateProject && (\n {project.title} \n )}\n
\n {includeDueDate && (\n \n {initials ? `${initials} - ` : \"\"} \n \n {title}\n \n
\n \n \n \n
\n \n \n );\n\n if (!isTaskCardDraggable) {\n return taskItemElement;\n }\n\n return (\n \n {taskItemElement}\n
\n );\n }}\n \n \n
\n \n \n \n );\n}\n","import React from \"react\";\nimport _ from \"lodash\";\nimport RichTextEditor from \"react-rte\";\nimport { callGraphQLSimple } from \"common/apiHelpers\";\n\nconst toolbarConfig = {\n // Optionally specify the groups to display (displayed in the order listed).\n display: [\"INLINE_STYLE_BUTTONS\", \"BLOCK_TYPE_BUTTONS\", \"LINK_BUTTONS\", \"BLOCK_TYPE_DROPDOWN\", \"HISTORY_BUTTONS\"],\n INLINE_STYLE_BUTTONS: [\n { label: \"Bold\", style: \"BOLD\", className: \"bold\" },\n { label: \"Italic\", style: \"ITALIC\" },\n { label: \"Underline\", style: \"UNDERLINE\" },\n ],\n BLOCK_TYPE_DROPDOWN: [\n { label: \"Normal\", style: \"unstyled\" },\n { label: \"Heading Large\", style: \"header-one\" },\n { label: \"Heading Medium\", style: \"header-two\" },\n { label: \"Heading Small\", style: \"header-three\" },\n ],\n BLOCK_TYPE_BUTTONS: [\n { label: \"UL\", style: \"unordered-list-item\" },\n { label: \"OL\", style: \"ordered-list-item\" },\n ],\n};\n\nexport default class TaskDescription extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n description: RichTextEditor.createValueFromString(this.props.task.subtitle || \"\", \"html\"),\n isDescriptionOpen: false,\n };\n\n this.descriptionRef = React.createRef();\n this.debouncedSendToApi = _.debounce(() => this.sendToApi(), 500);\n }\n\n componentDidMount() {\n window.addEventListener(\"click\", this.onWindowClick);\n }\n\n componentWillUnmount() {\n window.removeEventListener(\"click\", this.onWindowClick);\n }\n\n componentDidUpdate() {\n this.descriptionRef.current = this.state.description;\n }\n\n onWindowClick = () => {\n this.setState({\n isDescriptionOpen: false,\n });\n this.sendToApi();\n };\n\n sendToApi = () => {\n const { task } = this.props;\n let newDescription = this.descriptionRef.current.toString(\"html\");\n if (task.subtitle === newDescription || (task.subtitle === null && newDescription === \"
\n {organisationDetails.usesTaskInitials && (\n
\n\n \n Progress \n
\n ) : null}\n \n }\n />\n\n {status}
;\n}\n\nexport function Marker(options) {\n const [marker, setMarker] = useState();\n\n useEffect(() => {\n if (!marker) {\n setMarker(new window.google.maps.Marker());\n }\n\n return () => {\n if (marker) {\n marker.setMap(null);\n }\n };\n }, [marker]);\n\n useEffect(() => {\n if (marker) {\n marker.setOptions(options);\n }\n }, [marker, options]);\n\n return null;\n}\n\nfunction useDeepCompareEffectForMaps(callback, dependencies) {\n useEffect(callback, dependencies.map(useDeepCompareMemoize)); // eslint-disable-line\n}\n\nfunction useDeepCompareMemoize(value) {\n const ref = useRef();\n\n if (!deepCompareEqualsForMaps(value, ref.current)) {\n ref.current = value;\n }\n return ref.current;\n}\n\nconst deepCompareEqualsForMaps = createCustomEqual((deepEqual) => (a, b) => {\n if (\n isLatLngLiteral(a) ||\n a instanceof window.google.maps.LatLng ||\n isLatLngLiteral(b) ||\n b instanceof window.google.maps.LatLng\n ) {\n return new window.google.maps.LatLng(a).equals(new window.google.maps.LatLng(b));\n }\n // TODO extend to other types\n // use fast-equals for other objects\n return deepEqual(a, b);\n});\n\nexport function Map({ onClick, onIdle, children, style, ...options }) {\n const ref = React.useRef(null);\n const [map, setMap] = React.useState();\n\n React.useEffect(() => {\n if (ref.current && !map) {\n setMap(new window.google.maps.Map(ref.current, {}));\n }\n }, [ref, map]);\n\n useDeepCompareEffectForMaps(() => {\n if (map) {\n map.setOptions(options);\n }\n }, [map, options]);\n\n React.useEffect(() => {\n if (map) {\n [\"click\", \"idle\"].forEach((eventName) => window.google.maps.event.clearListeners(map, eventName));\n if (onClick) {\n map.addListener(\"click\", onClick);\n }\n\n if (onIdle) {\n map.addListener(\"idle\", () => onIdle(map));\n }\n }\n }, [map, onClick, onIdle]);\n\n return React.createElement(\n React.Fragment,\n null,\n React.createElement(\"div\", { ref: ref, style: style }),\n React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, { map });\n }\n })\n );\n}\n","import { useState } from \"react\";\n\nimport { Form, Modal, Button, Select, Row, Col } from \"antd\";\nimport { PlusCircleOutlined } from \"@ant-design/icons\";\n\nimport { TASK_RELATIONSHIPS } from \"common/constants\";\n\nimport { useForceUpdate, linkTasksTogether, getLabel } from \"common/helpers\";\n\nimport CreateTaskModal from \"CreateTaskModal/CreateTaskModal\";\nimport TaskPicker from \"TaskPicker/TaskPicker\";\n\nimport \"./LinkTaskModal.scss\";\n\nexport default function LinkTaskModal({ onClose, task, apiUser, visible, tasks, organisationDetails }) {\n const [form] = Form.useForm();\n const [isLoading, setIsLoading] = useState(false);\n const [isCreateTaskModalVisible, setIsCreateTaskModalVisible] = useState(false);\n const forceUpdate = useForceUpdate();\n\n async function onSubmit({ linkedTask, relationship }) {\n setIsLoading(true);\n\n linkTasksTogether({ mainTask: task, linkedTask, relationship });\n\n form.resetFields();\n setIsLoading(false);\n onClose();\n }\n\n function checkLinkedTask(_, selectedLinkedTaskId) {\n return new Promise((resolve, reject) => {\n if (!selectedLinkedTaskId) {\n return reject(\"\");\n }\n\n return resolve();\n });\n }\n\n const layout = {\n labelCol: {\n span: 4,\n },\n wrapperCol: {\n span: 20,\n },\n };\n\n let tasksToSelectFrom = tasks.filter((x) => x.id !== task.id && !x.isFinished && !x.isArchived);\n let predefinedProjectId;\n\n if (\n form.getFieldValue(\"relationship\") &&\n (form.getFieldValue(\"relationship\").includes(\"CAT_2\") || form.getFieldValue(\"relationship\").includes(\"CAT_3\"))\n ) {\n if (task.linkedTasks && task.linkedTasks?.length > 0) {\n for (const linkedTask of task.linkedTasks) {\n if (linkedTask.relationship.includes(\"CAT\")) {\n tasksToSelectFrom = [];\n }\n }\n }\n\n tasksToSelectFrom = tasksToSelectFrom.filter((x) => {\n if (x.linkedTasks && x.linkedTasks?.length > 0) {\n for (const linkedTask of x.linkedTasks) {\n if (linkedTask.relationship.includes(\"CAT\")) {\n return false;\n }\n }\n }\n\n return x.projectId === task.projectId;\n });\n predefinedProjectId = task.projectId;\n }\n\n return (\n\n {isCreateTaskModalVisible && (\n
\n \n \n {click ? \n
\n \n ) : null}\n\n \n \n
\n \n \n \n );\n}\n","import { useState } from \"react\";\nimport { Checkbox, Modal, Form, Button } from \"antd\";\n\nimport { getUserOptions } from \"Modals/MultipleAssignedUsersModal/multipleAssignedUsersHelpers\";\n\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { callGraphQLSimple } from \"common/apiHelpers\";\nimport { withRouter } from \"react-router-dom\";\nimport { getSimpleLabel } from \"common/labels\";\n\nimport \"./MultipleAssignedUsersModal.scss\";\n\nexport function MultipleAssignedUsersModal({\n taskId,\n tasks,\n organisationDetails,\n users,\n holidays,\n onClose,\n apiUser,\n startDate,\n endDate,\n assignedToUsers,\n}) {\n const [isLoading, setIsLoading] = useState(false);\n const [form] = Form.useForm();\n const [error, setError] = useState();\n\n const initialValues = {\n assignedToUsers,\n };\n\n const optionsForMultipleAssignedUsers = getUserOptions({\n organisationDetails,\n users,\n holidays,\n tasks,\n startDate,\n endDate,\n apiUser,\n taskId,\n });\n\n async function onSubmit({ assignedToUsers }) {\n setIsLoading(true);\n setError(undefined);\n\n try {\n await callGraphQLSimple({\n message: \"Failed to add allowance\",\n queryCustom: \"updateTask\",\n variables: {\n input: {\n id: taskId,\n assignedToUsers,\n },\n },\n });\n\n setIsLoading(false);\n onClose();\n } catch (e) {\n setError(e.message);\n setIsLoading(false);\n }\n }\n\n const layout = {\n labelCol: {\n span: 10,\n },\n wrapperCol: {\n span: 16,\n },\n };\n const tailLayout = {\n wrapperCol: {\n offset: 10,\n span: 16,\n },\n };\n\n return (\n
\n \n {center && (\n \n )}\n \n
\n );\n}\n","import { message } from \"antd\";\nimport uniqid from \"uniqid\";\nimport { notification } from \"antd\";\nimport * as Sentry from \"@sentry/react\";\n\nimport { getLatestRevision, getLatestFileVersion, FILE_TYPES_WITHOUT_ANNOTATION } from \"common/shared\";\nimport { callGraphQLSimple, callRest } from \"common/apiHelpers\";\nimport { REVIEW_STATUS_READABLE, REVIEW_SECONDARY_STATUS_READABLE } from \"common/constants\";\nimport {\n sendReviewResultNotification,\n sendReviewRequestNotification,\n sendExternalReviewResultNotification,\n sendNotificationToReviewer,\n} from \"common/notificationHelpers\";\n\nimport { getSimpleLabel } from \"common/labels\";\n\nexport function findCommentRecursive({ currentNode, activityId }) {\n if (currentNode.id === activityId) {\n return currentNode;\n }\n if (currentNode.reviewThread) {\n for (let i = 0; i < currentNode.reviewThread.length; i++) {\n let currentElement = currentNode.reviewThread[i];\n const result = findCommentRecursive({\n currentNode: currentElement,\n activityId,\n });\n if (result) {\n return result;\n }\n }\n }\n}\n\nexport function markCommentAsResolved({ currentNode, activityId, apiUser }) {\n // console.log(\"markCommentAsResolved() currentNode = \", currentNode);\n if (currentNode.id === activityId) {\n currentNode.resolved = true;\n currentNode.resolvedBy = apiUser.id;\n currentNode.resolvedAt = new Date().toISOString();\n\n if (currentNode.type.startsWith(\"ANNOTATION\")) {\n let parsedContent = JSON.parse(currentNode.content);\n parsedContent.resolved = true;\n currentNode.content = JSON.stringify(parsedContent);\n }\n return;\n }\n if (currentNode.reviewThread) {\n for (let i = 0; i < currentNode.reviewThread.length; i++) {\n let currentElement = currentNode.reviewThread[i];\n const result = markCommentAsResolved({\n currentNode: currentElement,\n activityId,\n apiUser,\n });\n if (result) {\n return result;\n }\n }\n }\n}\n\nexport async function notifyReviewer(notificationType) {\n let { apiUser, users, task, review } = this.props;\n\n const taskRevision = getLatestRevision(task);\n const reviewer = taskRevision.checkedBy;\n const reviewId = taskRevision.reviewId;\n\n callGraphQLSimple({\n message: \"Failed to record audit item for notification\",\n mutation: \"createAuditItem\",\n variables: {\n input: {\n taskId: task.id,\n projectId: task.projectId,\n fileId: \"nothing\",\n clientId: task.clientId,\n page: \"REVIEW\",\n type: \"NOTIFY_REVIEWER\",\n content: notificationType,\n userId: window.apiUser.id,\n organisation: window.apiUser.organisation,\n },\n },\n });\n\n const upToDateReview = (\n await callGraphQLSimple({\n message: \"Failed to retrieve review details\",\n queryName: \"getReview\",\n variables: {\n id: reviewId,\n },\n })\n ).data.getReview;\n\n await callGraphQLSimple({\n message: \"Failed to add activity item\",\n queryName: \"updateReview\",\n variables: {\n input: {\n id: reviewId,\n reviewThread: [\n ...upToDateReview.reviewThread,\n {\n id: uniqid(),\n type: \"COMMENT\",\n createdAt: new Date().toISOString(),\n content: REVIEW_SECONDARY_STATUS_READABLE[notificationType],\n author: apiUser.id,\n },\n ],\n },\n },\n });\n\n if (this.props.request) {\n await callGraphQLSimple({\n message: `Failed to notify reviewer`,\n queryName: \"updateRequest\",\n variables: {\n input: {\n id: this.props.request.id,\n itemSubscription: Math.floor(Math.random() * 100000),\n },\n },\n });\n } else {\n await callGraphQLSimple({\n message: `Failed to notify reviewer`,\n queryName: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n randomNumber: Math.floor(Math.random() * 100000),\n reviewSecondaryStatus: notificationType,\n },\n },\n });\n\n await callGraphQLSimple({\n message: `Failed to notify reviewer`,\n queryName: \"updateTask\",\n variables: {\n input: {\n id: task.id,\n randomNumber: Math.floor(Math.random() * 100000),\n reviewSecondaryStatus: notificationType,\n },\n },\n });\n }\n\n sendNotificationToReviewer({\n users,\n apiUser,\n reviewer,\n taskId: task.id,\n taskTitle: task.title,\n clientName: task.client?.name,\n projectTitle: task.project?.title,\n taskRevisionId: taskRevision.id,\n taskRevisionName: taskRevision.name,\n taskRevisionDescription: taskRevision.description,\n reviewSecondaryStatusReadable: REVIEW_SECONDARY_STATUS_READABLE[notificationType],\n });\n}\n\nexport async function submitReview(reviewStatus, props) {\n if (!props) {\n props = this.props;\n }\n\n let { apiUser, review, task, users, taskRevision } = props;\n try {\n const now = new Date().toISOString();\n\n callGraphQLSimple({\n message: \"Failed to record audit item for review submission\",\n mutation: \"createAuditItem\",\n variables: {\n input: {\n taskId: task.id,\n projectId: task.projectId,\n fileId: \"nothing\",\n clientId: task.clientId,\n page: \"REVIEW\",\n type: \"REVIEW_SUBMIT\",\n content: reviewStatus,\n userId: window.apiUser.id,\n organisation: window.apiUser.organisation,\n },\n },\n });\n\n // this is because this function gets called both on the task details page, and the review page\n if (!task && review && review.task) {\n task = review.task;\n }\n\n const reviewId = taskRevision.reviewId;\n\n const upToDateReview = (\n await callGraphQLSimple({\n message: \"Failed to retrieve review details\",\n queryName: \"getReview\",\n variables: {\n id: reviewId,\n },\n })\n ).data.getReview;\n\n if (!props.isExternalReview) {\n await callGraphQLSimple({\n message: `Failed to update ${getSimpleLabel(\"task revision\")}`,\n queryName: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n reviewSecondaryStatus: null,\n reviewStatus,\n isReadOnly: reviewStatus === \"SUCCESS\",\n reviewAcceptDate: reviewStatus === \"SUCCESS\" ? now : null,\n },\n },\n });\n await callGraphQLSimple({\n message: \"Failed to update task review status\",\n queryName: \"updateTask\",\n variables: {\n input: {\n id: task.id,\n reviewSecondaryStatus: null,\n reviewStatus,\n isReadOnly: reviewStatus === \"SUCCESS\",\n isUnderReview: reviewStatus !== \"SUCCESS\" && reviewStatus !== \"CLOSED\",\n },\n },\n });\n\n if (reviewStatus === \"SUCCESS\") {\n for (let i = 0; i < taskRevision.files.items.length; i++) {\n const fileInTask = taskRevision.files.items[i];\n const file = (\n await callGraphQLSimple({\n message: \"Failed to retrieve sheet revision\",\n queryName: \"getFile\",\n variables: {\n id: fileInTask.id,\n },\n })\n ).data.getFile;\n for (let j = 0; j < file.sheets.items.length; j++) {\n const sheet = file.sheets.items[j];\n const latestSheetRevision = sheet.revisions.items[sheet.revisions.items.length - 1];\n\n // we only want to update who checked the latest sheet revision\n // if it hasn't already been checked by someone else\n if (latestSheetRevision.checkedBy && latestSheetRevision.reviewAcceptDate) {\n continue;\n }\n\n callGraphQLSimple({\n message: \"Failed to update sheet revision\",\n queryName: \"updateSheetRevision\",\n variables: {\n input: {\n id: latestSheetRevision.id,\n checkedBy: taskRevision.checkedBy,\n reviewAcceptDate: now,\n },\n },\n });\n }\n }\n } else if (taskRevision.reviewStatus === \"SUCCESS\" && reviewStatus === \"IN_PROGRESS\") {\n // if we're cancelling the approval of the review, we want to remove the checker's name and review approved date\n // from the latest sheet revisions if they were approved as part of the review we're un-approving\n for (let i = 0; i < taskRevision.files.items.length; i++) {\n const fileInTask = taskRevision.files.items[i];\n const file = (\n await callGraphQLSimple({\n message: \"Failed to update sheet revision\",\n queryName: \"getFile\",\n variables: {\n id: fileInTask.id,\n },\n })\n ).data.getFile;\n for (let j = 0; j < file.sheets.items.length; j++) {\n const sheet = file.sheets.items[j];\n const latestSheetRevision = sheet.revisions.items[sheet.revisions.items.length - 1];\n\n if (latestSheetRevision.reviewAcceptDate !== taskRevision.reviewAcceptDate) {\n continue;\n }\n\n callGraphQLSimple({\n message: \"Failed to update sheet revision\",\n queryName: \"updateSheetRevision\",\n variables: {\n input: {\n id: latestSheetRevision.id,\n checkedBy: null,\n reviewAcceptDate: null,\n },\n },\n });\n }\n }\n }\n } else {\n // the task revision ID is actually the ID of the activity item\n let activityItem = (\n await callGraphQLSimple({\n message: \"Failed to retrieve review activity item details\",\n query: \"getActivityItem\",\n variables: {\n id: taskRevision.id,\n },\n })\n ).data.getActivityItem;\n\n let updatedContent;\n try {\n updatedContent = JSON.parse(activityItem.content);\n } catch (e) {\n message.error(\"Failed to update review status\");\n return;\n }\n\n updatedContent = {\n ...updatedContent,\n reviewSecondaryStatus: null,\n reviewStatus,\n isReadOnly: reviewStatus === \"SUCCESS\",\n isUnderReview: reviewStatus !== \"SUCCESS\" && reviewStatus !== \"CLOSED\",\n };\n\n await callGraphQLSimple({\n message: \"Failed to update review status\",\n mutation: \"updateActivityItem\",\n variables: {\n input: {\n id: taskRevision.id,\n content: JSON.stringify(updatedContent),\n },\n },\n });\n\n await callGraphQLSimple({\n message: \"Failed to update review status\",\n mutation: \"createActivityItem\",\n variables: {\n input: {\n parentId: task.id,\n author: apiUser.id,\n content: JSON.stringify({\n type: \"REVIEW_STATUS_CHANGE\",\n reviewStatus,\n reviewId: review?.id,\n taskRevisionId: taskRevision.id,\n taskFilesSentActivityItemId: taskRevision.id,\n }),\n organisation: apiUser.organisation,\n },\n },\n });\n }\n\n await callGraphQLSimple({\n message: \"Failed to submit review\",\n queryName: \"updateReview\",\n variables: {\n input: {\n id: reviewId,\n reviewThread: [\n ...upToDateReview.reviewThread,\n {\n id: uniqid(),\n type: \"STATUS_CHANGE\",\n createdAt: now,\n content: reviewStatus,\n author: apiUser.id,\n },\n ],\n },\n },\n });\n\n if (!props.isExternalReview) {\n if (reviewStatus === \"IN_PROGRESS\") {\n sendReviewRequestNotification({\n users,\n reviewer: taskRevision.checkedBy,\n apiUser,\n taskId: task.id,\n taskTitle: task.title,\n clientName: task.client?.name,\n projectTitle: task.project?.title,\n taskRevisionName: taskRevision.name,\n taskRevisionDescription: taskRevision.description,\n taskRevisionId: taskRevision.id,\n });\n } else {\n sendReviewResultNotification({\n users,\n apiUser,\n taskId: task.id,\n taskTitle: task.title,\n clientName: task.client?.name,\n projectTitle: task.project?.title,\n taskRevisionId: taskRevision.id,\n taskRevisionName: taskRevision.name,\n taskRevisionDescription: taskRevision.description,\n reviewStatusReadable: REVIEW_STATUS_READABLE[reviewStatus].label,\n taskAssignedTo: task.assignedTo,\n });\n }\n await annotateAllFilesInTaskRevision({\n task,\n taskRevision,\n apiUser,\n });\n } else {\n let updateRequestInput = {\n id: task.id,\n itemSubscription: Math.floor(Math.random() * 100000),\n reviewStatus,\n status: \"INFORMATION_SUBMITTED\",\n };\n\n await callGraphQLSimple({\n message: \"Failed to update review status\",\n mutation: \"updateRequest\",\n variables: {\n input: updateRequestInput,\n },\n });\n sendExternalReviewResultNotification({\n users,\n apiUser,\n requestId: task.id,\n requestTitle: task.title,\n requestAssignedTo: task.assignedTo,\n clientName: task.client?.name,\n projectTitle: task.project?.title,\n requestAssignedTo: task.assignedTo,\n reviewStatusReadable: REVIEW_STATUS_READABLE[reviewStatus].label,\n fakeTaskRevisionId: taskRevision.id,\n });\n }\n } catch (e) {\n notification.error({\n message: (\n <>\n Failed to submit review, either just in part or fully. \n \n Please try again. If the error persists, please contact our support team.\n \n ),\n description: e.message,\n });\n // send to Sentry with a custom message\n let sentryMessage = `Review submission failed. Task ID: ${task?.id}, review status: ${reviewStatus}`;\n Sentry.captureException(e, {\n extra: {\n message: sentryMessage,\n isExternalReview: props.isExternalReview,\n organisation: window.apiUser?.organisation,\n },\n });\n }\n}\n\nexport async function annotateAllFilesInTaskRevision({ task, taskRevision, apiUser }) {\n let promises = [];\n for (let i = 0; i < taskRevision.files.items.length; i++) {\n const fileInTaskRevision = taskRevision.files.items[i];\n\n if (fileInTaskRevision.isArchived || FILE_TYPES_WITHOUT_ANNOTATION.includes(fileInTaskRevision.type)) {\n continue;\n }\n promises.push(\n new Promise(async (resolve) => {\n const fileId = fileInTaskRevision.id;\n try {\n // we retrieve this data rather than using it from the task revision because we don't have enough depth in the\n // task revision schema to reach the exports for each sheet, which is required for the annotation process\n const file = (\n await callGraphQLSimple({\n message: \"Could not retrieve file data\",\n queryName: \"getFile\",\n variables: {\n id: fileId,\n },\n })\n ).data.getFile;\n\n const latestFileVersion = getLatestFileVersion(file);\n\n await annotate({\n task,\n fileId,\n taskRevisionId: taskRevision.id,\n fileVersion: latestFileVersion,\n apiUser,\n customId: latestFileVersion.customId,\n sheetNames: file.sheets.items.filter((sheet) => sheet.includeInPublish).map((sheet) => sheet.name),\n fileType: file.type,\n });\n } catch (e) {\n console.error(e);\n // if annotate call fails, there's nothing we can do\n }\n\n resolve();\n })\n );\n }\n\n try {\n await Promise.all(promises);\n } catch (e) {\n console.error(e);\n // if any of the promises fail, there's nothing we can do\n }\n}\n\nexport async function annotate({ task, fileId, taskRevisionId, fileVersion, apiUser, customId, sheetNames, fileType }) {\n await callRest({\n route: \"/annotate\",\n method: \"POST\",\n message:\n \"Failed to annotate file PDF. This is probably because the file version has just been created and there is no PDF for it yet.\",\n body: {\n eventId: task.id,\n sourceKey: fileVersion.exports[0].rawKey,\n publishedKey: fileVersion.exports[0].key,\n organisation: apiUser.organisation,\n clientLogo: task.client.key,\n taskTitle: task.title,\n projectTitle: task.project.title,\n taskRevisionId,\n fileType,\n fileId,\n fileVersionId: fileVersion.id,\n customId,\n taskId: task.id,\n sheetNames,\n },\n });\n}\n","import { useState } from \"react\";\nimport { Form, Modal, Button } from \"antd\";\n\nimport { getExcludedReviewerList } from \"common/helpers\";\nimport { annotateAllFilesInTaskRevision, submitReview } from \"ReviewPage/reviewHelpers\";\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { getLatestRevision } from \"common/shared\";\nimport { sendReviewRequestNotification } from \"common/notificationHelpers\";\nimport { callGraphQLSimple } from \"common/apiHelpers\";\n\nimport UsersFilter from \"UsersFilter/UsersFilter\";\n\nimport \"./RequestReviewModal.scss\";\n\nexport function RequestReviewModal({ onClose, task, users, apiUser, visible, organisationDetails }) {\n const [isLoading, setIsLoading] = useState(false);\n const [form] = Form.useForm();\n\n const taskRevision = getLatestRevision(task);\n\n function closeModal() {\n form.resetFields();\n setIsLoading(false);\n onClose();\n }\n\n async function onSubmit({ reviewer }) {\n setIsLoading(true);\n\n if (reviewer === apiUser.id) {\n try {\n await new Promise((resolve, reject) => {\n let confirmationModal = Modal.confirm({\n title: \"Confirm reviewer\",\n className: \"review-yourself-modal\",\n content: <>Are you sure you want to assign yourself as the reviewer?,\n onOk: () => {\n confirmationModal.destroy();\n resolve();\n },\n onCancel: () => {\n confirmationModal.destroy();\n reject();\n },\n });\n });\n } catch (e) {\n // it means the user has said no, so the promise got rejected\n setIsLoading(false);\n return;\n }\n }\n\n if (taskRevision.reviewStatus === \"CLOSED\") {\n // if the review is currently closed, it means we need to re-open it\n const review = (\n await callGraphQLSimple({\n message: \"Failed to fetch existing review\",\n queryName: \"getReview\",\n variables: {\n id: taskRevision.reviewId,\n },\n })\n ).data.getReview;\n\n await submitReview.call(this, \"IN_PROGRESS\", {\n apiUser,\n review,\n task,\n taskRevision,\n users,\n });\n\n // set reviewer on task revision\n await callGraphQLSimple({\n message: \"Failed to set reviewer\",\n queryName: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n checkedBy: reviewer,\n },\n },\n });\n // record activity item in review about the change of reviewer\n const upToDateReview = (\n await callGraphQLSimple({\n message: \"Failed to fetch existing review\",\n queryName: \"getReview\",\n variables: {\n id: taskRevision.reviewId,\n },\n })\n ).data.getReview;\n\n await callGraphQLSimple({\n message: \"Failed to update review\",\n queryName: \"updateReview\",\n variables: {\n input: {\n id: review.id,\n reviewThread: [\n ...upToDateReview.reviewThread,\n { type: \"REVIEWER_SET\", createdAt: new Date().toISOString(), content: reviewer },\n ],\n },\n },\n });\n } else {\n // if we're here, this is the first time we're requesting a review for this task revision\n await callGraphQLSimple({\n message: \"Failed to start review\",\n queryName: \"updateReview\",\n variables: {\n input: {\n id: taskRevision.reviewId,\n reviewThread: [\n { type: \"START\", createdAt: new Date().toISOString() },\n { type: \"REVIEWER_SET\", createdAt: new Date().toISOString(), content: reviewer },\n ],\n },\n },\n });\n\n await callGraphQLSimple({\n message: \"Failed to request review\",\n queryName: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n checkedBy: reviewer,\n reviewStatus: \"IN_PROGRESS\",\n },\n },\n });\n\n callGraphQLSimple({\n message: \"Failed to request review\",\n queryName: \"updateTask\",\n variables: {\n input: {\n id: task.id,\n isUnderReview: true,\n checkedBy: reviewer,\n reviewStatus: \"IN_PROGRESS\",\n reviewSecondaryStatus: null,\n },\n },\n });\n\n sendReviewRequestNotification({\n users,\n reviewer,\n apiUser,\n taskId: task.id,\n taskTitle: task.title,\n clientName: task.client?.name,\n projectTitle: task.project?.title,\n taskRevisionName: taskRevision.name,\n taskRevisionDescription: taskRevision.description,\n taskRevisionId: taskRevision.id,\n });\n\n annotateAllFilesInTaskRevision({\n task,\n taskRevision,\n apiUser,\n });\n }\n\n closeModal();\n }\n\n const layout = {\n labelCol: {\n span: 8,\n },\n wrapperCol: {\n span: 16,\n },\n };\n\n const tailLayout = {\n wrapperCol: {\n offset: 8,\n span: 16,\n },\n };\n\n return (\n
\n \n Linked {getSimpleLabel(\"tasks\")} {\" \"}\n {task.isArchived || task.isFinished ? null : (\n \n {!task.linkedTasks || task.linkedTasks.length === 0 ? (\n No linked {getSimpleLabel(\"tasks\")} \n ) : (\n
\n )}\n \n );\n };\n\n openSingleAttachment = async (_, key) => {\n const fileName = key.split(\"/\").slice(-1)[0];\n const attachmentType = getAttachmentTypeFromKey(key);\n const attachment = { key, type: attachmentType, name: fileName };\n\n openAttachment.call(this, attachment);\n };\n\n changeCustomFieldValue = async (field, value) => {\n const { task } = this.props;\n if (Array.isArray(value)) {\n value = JSON.stringify(value);\n }\n\n let customFields = [...(task.customFields || [])];\n let fieldWasAlreadySet = customFields.find((x) => x.id === field.id);\n if (fieldWasAlreadySet) {\n customFields.forEach((crtField) => {\n if (crtField.id === field.id) {\n crtField.value = value;\n }\n });\n } else {\n customFields.push({ id: field.id, value });\n }\n\n await callGraphQLSimple({\n message: \"Failed to update field value\",\n queryName: \"updateTask\",\n variables: {\n input: {\n id: task.id,\n customFields,\n },\n },\n });\n };\n\n getKey = async (localKey, fieldName) => {\n const { project, task } = this.props;\n\n let fileKey = await encodeKey({\n type: KEY_TYPES.TASK_ATTACHMENT_CUSTOM_FIELD,\n data: {\n organisation: task ? task.organisation : project.organisation,\n projectId: task ? task.project.id : project.id,\n taskId: task.id,\n attachmentFileName: `${localKey}`,\n fieldName,\n },\n });\n\n return fileKey.split(\"//\").join(\"/\");\n };\n\n onFileInputChange = async (e, field) => {\n let augmentedFiles = [];\n for (let i = 0; i < e.target.files.length; i++) {\n const rawFile = e.target.files[i];\n augmentedFiles.push({\n size: rawFile.size,\n fullPath: `/${rawFile.name}`,\n name: rawFile.name,\n fileObject: rawFile,\n type: rawFile.type,\n });\n }\n\n await this.onCustomFieldFilesDropped(augmentedFiles, field);\n this.props.refreshAttachments();\n };\n\n fetchCoordinates = async (formattedAddress) => {\n const apiKey = window.secrets?.GOOGLE_MAPS;\n\n let coordinates = { lat: 0, lng: 0 };\n\n const config = {\n method: \"GET\",\n url: `https://maps.googleapis.com/maps/api/geocode/json?address=${formattedAddress}&key=${apiKey}`,\n };\n await axios(config).then(async (response) => {\n if (!response.data || !response.data.results || response.data.results.length === 0) {\n console.log(\"No response data\");\n return;\n }\n\n if (response.data.status === \"OK\") {\n const results = response.data.results;\n\n coordinates = results[0].geometry.location;\n }\n });\n\n return coordinates;\n };\n\n onCustomFieldFilesDropped = async (attachments, field) => {\n const { task } = this.props;\n\n let uploadPromises = [];\n\n let loadingModal = Modal.info({\n title: \"Uploading files...\",\n className: \"modal-no-buttons\",\n icon: \n {task.linkedTasks.map((link, i) => {\n const currentTaskDetails = tasks.filter((x) => x.id === link.taskId)[0];\n const project = projects.find((x) => x.id === currentTaskDetails?.projectId);\n const client = clients.find((x) => x.id === currentTaskDetails?.clientId);\n\n return (\n \n
\n );\n })}\n \n
\n {currentTaskDetails && (\n \n {TASK_RELATIONSHIPS.find((x) => x.value === link.relationship).label}\n
\n \n {link.label}\n \n
\n {!task.isFinished && !task.isArchived && (\n \n \n {link.label}\n \n
\n {labelElement} \n {fieldElement && {fieldElement} }\n
\n );\n });\n };\n\n displayAddressModal = () => {\n const { task, organisationDetails } = this.props;\n const { selectedField } = this.state;\n\n let address;\n let formattedAddress;\n\n const apiKey = window.secrets?.GOOGLE_MAPS;\n\n const targetField = organisationDetails.customFields?.find((customField) => customField.id === selectedField.id);\n const targetFieldValue = task.customFields?.find((customField) => customField?.id === targetField?.id)?.value;\n\n if (targetFieldValue) {\n address = JSON.parse(targetFieldValue);\n formattedAddress = formatAddress(address);\n }\n\n return (\n \n
\n \n {organisationDetails.settings?.general?.usesTaskConfirmation && (\n !task.isArchived && this.setState({ isCatLevelModalVisible: true })\n }\n >\n {getSimpleLabel(\"Authority\")} \n \n {getUserReadableCatLevel(organisationDetails, task.catLevel)}\n \n
\n )}\n\n \n Is {getSimpleLabel(\"confirmed\")} \n \n {\n this.changeAttribute({\n fieldName: \"isConfirmed\",\n value: checked,\n });\n }}\n />\n \n
\n )}\n\n {this.displayCustomFields()}\n\n {organisationDetails.usesSprints && (\n \n {getSimpleLabel(\"Sprint\")} \n \n {task.isArchived || task.isFinished ? (\n \n {sprints.find((x) => x.id === task.sprintId)?.name}{\" \"}\n {sprints.find((x) => x.id === task.sprintId)?.isActive && (\n \n {getSimpleLabel(\"Sprint-Active\")}\n \n )}\n \n ) : (\n \n {[...sprints]\n .filter((x) => !x.isFinished)\n .reverse()\n .map((sprint, i) => (\n \n {sprint.name}{\" \"}\n {sprint.isActive && (\n \n {getSimpleLabel(\"Sprint-Active\")}\n \n )}\n \n ))}\n \n )}\n \n
\n )}\n\n {(organisationDetails.usesDesignAuthority || organisationDetails.usesDesignAuthority) && (\n \n {getSimpleLabel(\"task-assigned-to-single\")} \n \n {task.isArchived || task.isFinished ? (\n x.id === task.assignedTo)} showLabel={true} />\n ) : (\n {\n const newAssigneeDetails = users.find((x) => x.id === assignedTo);\n\n await assignTaskToUser({\n task,\n user: newAssigneeDetails,\n organisationDetails,\n });\n }}\n excludeList={this.getExcludedAssigneeList()}\n suffixIcon={null}\n maxLabelLength={22}\n data-cy=\"assigned-to-picker\"\n />\n )}\n \n
\n\n {organisationDetails?.settings?.task?.allowMultipleUsersToBeAssignedToATask && (\n \n \n {getSimpleLabel(\"task-assigned-to-multiple-users\")}\n \n \n {!task.isArchived && !task.isFinished && (\n \n
\n )}\n\n {organisationDetails?.settings?.task?.usesTaskEstimates && (\n \n {task.assignedToUsers?.map((userId) => {\n return x.id === userId)} showLabel={true} />;\n })}\n
\n \n Estimated hours \n {organisationDetails.settings?.task?.useTaskRevisionEstimates ? (\n {task.estimatedHours || 0} \n ) : (\n \n this.changeAttribute({ fieldName: \"estimatedHours\", value: parseInt(value || 0) })\n }\n />\n )}\n
\n )}\n\n \n Status \n \n \n {organisationDetails.taskStatuses?.map((status) => (\n \n {getReadableStatus(status.name)}\n \n ))}\n \n \n
\n\n {!organisationDetails.settings?.task?.hideTaskDueDates && (\n \n Due date \n \n {task.isArchived || task.isFinished || !isAuthorised([\"TASK_DETAILS.EDIT_DUE_DATE\"]) ? (\n \n {task.dueDate ? moment(task.dueDate).format(\"DD MMM YYYY\") : \"Not set\"}\n \n ) : (\n \n
\n )}\n {organisationDetails.settings?.task?.usesStartAndEndDates && (\n \n Start date \n \n {task.isArchived || task.isFinished || !isAuthorised([\"TASK_DETAILS.EDIT_DUE_DATE\"]) ? (\n \n {task.startDate ? moment(task.startDate).format(\"DD MMM YYYY\") : \"Not set\"}\n \n ) : (\n \n
\n )}\n {organisationDetails.settings?.task?.usesStartAndEndDates && (\n \n End date \n \n {task.isArchived || task.isFinished || !isAuthorised([\"TASK_DETAILS.EDIT_DUE_DATE\"]) ? (\n \n {task.endDate ? moment(task.endDate).format(\"DD MMM YYYY\") : \"Not set\"}\n \n ) : (\n \n
\n )}\n\n \n \n {getSimpleLabel(\"Client\")} \n \n \n
\n \n \n \n {getSimpleLabel(\"Project\")} \n {task.project?.title} \n
\n \n {organisationDetails.settings?.request?.usesRequests && task.requestIds?.length > 0 && (\n \n {getSimpleLabel(\"Requests\")} \n \n {task.requestIds.map((requestId) => (\n \n \n {processIdForDisplay(requestId)}\n \n \n ))}\n \n
\n )}\n\n \n Created by \n \n \n
\n {this.displayCustomFields()}\n\n \n \n Senior engineer
responsible for {getSimpleLabel(\"project\")}\n \n \n {task.project.isArchived ? (\n x.id === task.project.assignedTo)} showLabel={true} />\n ) : (\n \n this.assignProjectToUser({\n project: task.project,\n user: users.find((x) => x.id === assignedTo),\n })\n }\n excludeList={this.getExcludedAssigneeList()}\n suffixIcon={null}\n maxLabelLength={22}\n />\n )}\n \n
\n responsible for {getSimpleLabel(\"project\")}\n
\n Created \n {moment(task.createdAt).fromNow()} \n
\n \n Last updated \n {moment(task.updatedAt).fromNow()} \n
\n\n {this.displayLinkedTasks()}\n \n {FILE_TYPES_DETAILS[templateDetails.type].label} template {templateDetails.name}:{\" \"}\n {startingFiles.length} item\n {startingFiles.length === 1 ? \"\" : \"s\"}\n \n );\n }}\n pagination={{ hideOnSinglePage: true, pageSize: 50 }}\n expandRowByClick={true}\n dataSource={startingFiles}\n columns={[\n {\n title: \"Name\",\n key: \"name\",\n align: \"left\",\n render: (_, file) => file.startingFileName || file.name,\n },\n {\n title: \"Last modified\",\n key: \"lastModified\",\n align: \"center\",\n width: 180,\n render: (_, file) => {\n const latestFileVersion = file.versions.items.slice(-1)[0];\n return moment(latestFileVersion.savedAt || latestFileVersion.createdAt).format(\"DD-MM-YYYY HH:mm:ss\");\n },\n },\n sheetsColumn,\n {\n title: \"\",\n key: \"actions\",\n width: 100,\n align: \"right\",\n render: (_, file) => {\n return (\n
\n
\n );\n },\n },\n ].filter((x) => x)}\n />\n )}\n \n \n You need to define at least one file status before you can add files to tasks\n \n
\n
\n \n \n \n
\n \n );\n }\n\n async function fetchStartingFilesForTemplate(templateId) {\n if (!templateId) {\n return;\n }\n setStartingFilesForTemplate([]);\n let startingFiles: any[] = [];\n let nextToken;\n\n setIsLoading(true);\n\n while (true) {\n let response = (\n await callGraphQLSimple({\n message: \"Failed to fetch starting files\",\n query: \"listFilesByOrganisation\",\n variables: {\n limit: 1000,\n nextToken,\n organisation: organisationDetails.id,\n filter: {\n templateId: {\n eq: templateId,\n },\n isStartingFile: {\n eq: true,\n },\n },\n },\n })\n ).data.listFilesByOrganisation;\n startingFiles = [...startingFiles, ...response.items];\n nextToken = response.nextToken;\n\n if (!nextToken) {\n break;\n }\n }\n setStartingFilesForTemplate(startingFiles);\n setIsLoading(false);\n }\n\n async function onSubmit({ name, sheetCount, status, templateId, startingFileId }) {\n const templateDetails = templatesForFileType.find((template) => template.id === templateId);\n if (templateDetails.key && !templateDetails.isLive) {\n try {\n await new Promise\n
\n \n \n \n
\n
\n Templates define the structure of a file, such as report types (calculations report, check\n certificate) or drawing settings (paper size, title block).\n
\n
Starting files, however, store predefined content while keeping the same structure. For\n example, different starting files for calculations reports can cater to specific types of\n calculations. This helps engineers avoid repetitive setup work.\n \n }\n />\n \n }\n name=\"startingFileId\"\n >\n
\n \n Submit\n \n
\n \n \n {isStartingFilesModalOpenForTemplateId && (\n
\n \n
\n \n \n \n );\n}\n\nexport default withRouter(\n withSubscriptions({\n Component: RenameFileModal,\n subscriptions: [\"organisationDetails\"],\n })\n);\n","import moment from \"moment\";\nimport { Typography } from \"antd\";\nimport DatePicker from \"DatePicker/DatePicker\";\nimport { callGraphQLSimple } from \"common/apiHelpers\";\nimport { TaskRevision } from \"common/types\";\nimport { isAuthorised } from \"common/permissions\";\n\ntype Props = {\n taskRevision: TaskRevision;\n};\n\nexport default function TaskRevisionDueDate({ taskRevision }: Props) {\n async function onChange(momentDate, stringDate) {\n let formattedDate;\n\n if (stringDate.length === 0) {\n formattedDate = null;\n } else {\n formattedDate = momentDate.format(\"YYYY-MM-DD\");\n }\n\n await callGraphQLSimple({\n message: \"Failed to update due date\",\n queryCustom: \"updateTaskRevision\",\n variables: {\n input: {\n id: taskRevision.id,\n dueDate: formattedDate,\n },\n },\n });\n\n await callGraphQLSimple({\n message: \"Failed to update due date\",\n queryCustom: \"updateTask\",\n variables: {\n input: {\n id: taskRevision.taskId,\n dueDate: formattedDate,\n },\n },\n });\n }\n\n let shouldDisplayPicker = isAuthorised([\"TASK_DETAILS.EDIT_DUE_DATE\"]);\n\n return (\n <>\n {!shouldDisplayPicker ? (\n taskRevision.dueDate ? (\n moment(taskRevision.dueDate).format(\"DD MMM YYYY\")\n ) : (\n \"Not Set\"\n )\n ) : (\n
\n \n Submit\n \n
\n \n \n \n );\n}\n\nexport default withSubscriptions({\n Component: ControlTaskRevisionAccessModal,\n subscriptions: [\"groups\"],\n});\n","import React, { RefObject } from \"react\";\nimport { Tag, message, Select, Modal, Tooltip, Button, Typography, Dropdown, Menu, notification } from \"antd\";\nimport { Link } from \"react-router-dom\";\nimport { withRouter, RouteComponentProps } from \"react-router-dom\";\nimport { Storage } from \"aws-amplify\";\nimport {\n EyeOutlined,\n FilePdfOutlined,\n CaretDownOutlined,\n LoadingOutlined,\n DeleteOutlined,\n EditOutlined,\n CheckCircleFilled,\n} from \"@ant-design/icons\";\nimport cx from \"classnames\";\n\nimport { HAS_SHEETS, FILE_TYPES_DETAILS } from \"common/shared\";\nimport { DEFAULT_FILE_NAMES } from \"common/constants\";\nimport { OpenIcon } from \"common/icons\";\nimport { callRest, callGraphQLSimple } from \"common/apiHelpers\";\nimport { submitReview } from \"ReviewPage/reviewHelpers\";\nimport {\n getSortedFiles,\n getCat2Check,\n downloadPDF,\n downloadSheetPDF,\n openFileWithLink,\n processIdForDisplay,\n} from \"common/helpers\";\nimport { updateDeletedFiles } from \"common/taskHelpers\";\nimport { downloadReport, buildReport } from \"ReportPage/Report/reportHelpers\";\nimport { isAuthorised } from \"common/permissions\";\nimport { getSimpleLabel } from \"common/labels\";\nimport { recalculateTaskEstimatedHours } from \"common/taskHelpers\";\n\nimport DocumentDetailsModal from \"Modals/DocumentDetailsModal/DocumentDetailsModal\";\nimport AddFileToTaskRevisionModal from \"Modals/AddFileToTaskRevisionModal/AddFileToTaskRevisionModal\";\nimport RenameFileModal from \"Modals/RenameFileModal/RenameFileModal\";\nimport TaskRevisionDueDate from \"./TaskRevisionDueDate/TaskRevisionDueDate\";\nimport TaskRevisionRequestedDate from \"./TaskRevisionRequestedDate/TaskRevisionRequestedDate\";\nimport TaskRevisionPriority from \"./TaskRevisionPriority/TaskRevisionPriority\";\nimport TaskRevisionEstimate from \"./TaskRevisionEstimate/TaskRevisionEstimate\";\nimport TaskRevisionFinishedAt from \"./TaskRevisionFinishedAt/TaskRevisionFinishedAt\";\nimport InfoItem from \"InfoItem/InfoItem\";\nimport Input from \"Input/Input\";\nimport ControlTaskRevisionAccessModal from \"Modals/ControlTaskRevisionAccessModal/ControlTaskRevisionAccessModal\";\n\nimport \"./TaskRevisionItem.scss\";\n\ntype Props = {\n apiUser: any;\n task: any;\n revision: any;\n history: any;\n linkedTasksDetails: any;\n organisationDetails: any;\n windowWidth: number;\n index: number;\n visualIndex: number;\n users: any[];\n groups: any[];\n requestFormActivityItem: any;\n isHighlighted?: boolean;\n};\nexport class TaskRevisionItem extends React.Component
\n Reason: {(e as any).response?.data?.error || (e as any).data?.error || (e as any).message}\n
\n {revision.nameWithReviewStatus} \n {!organisationDetails?.settings?.task?.allowMultipleLiveTaskRevisions &&\n revision.base &&\n revision.base !== \"-\" ? (\n
\n );\n };\n\n displayApproveButton = () => {\n const { revision, organisationDetails } = this.props;\n\n if (revision.isReadOnly || revision.reviewAcceptDate) {\n return null;\n }\n\n let latestRevisionForAllSheetsAllowSkippingReview = true;\n\n if (!revision.files || !revision.files.items || !revision.files.items.length) {\n return null;\n }\n\n for (let file of revision.files.items) {\n for (let sheet of file.sheets.items) {\n let latestSheetRevision = sheet.revisions.items.slice(-1)[0];\n if (!latestSheetRevision) {\n latestRevisionForAllSheetsAllowSkippingReview = false;\n break;\n }\n let latestSheetRevisionStatus = latestSheetRevision.status;\n let statusDetails = organisationDetails.fileStatuses.find(\n (fileStatus) =>\n fileStatus.name.toUpperCase().split(\" \").join(\"_\") ===\n latestSheetRevisionStatus.toUpperCase().split(\" \").join(\"_\")\n );\n\n if (!statusDetails?.canSkipReview) {\n latestRevisionForAllSheetsAllowSkippingReview = false;\n break;\n }\n }\n }\n\n if (!latestRevisionForAllSheetsAllowSkippingReview) {\n return null;\n }\n\n return (\n \n {this.displayRevisionDetails()}\n\n
\n {isAddFileToTaskRevisionModalVisible && (\n \n {this.displayAccessList()}\n {this.displayApproveButton()}\n {this.displayControlAccessButton()}\n {this.displayAddFileButton()}\n
\n {this.displayFiles()}
\n \n {reviewStatus ? (\n \n {reviewStatus}\n {reviewSecondaryStatus}\n \n ) : null}\n changeRevisionName(revision, name)}\n disabled={\n revision.isReadOnly &&\n !isAuthorised([\"FULL.READ_WRITE\", \"TASK_DETAILS.EDIT_READ_ONLY_TASK_REVISION_DETAILS\"])\n }\n />\n }\n />\n
\n ),\n };\n });\n }\n\n function onAddTaskRevisionButtonClick() {\n if (!task.assignedTo && !organisationDetails?.settings?.task?.allowMultipleLiveTaskRevisions) {\n Modal.error({\n title: \"Assignee required\",\n content: (\n <>\n In order to create a {getSimpleLabel(\"task revision\")}, the {getSimpleLabel(\"task\")} must first be assigned\n to someone\n \n ),\n });\n } else if (!isAuthorised([\"TASK_DETAILS.ADD_TASK_REVISION\"])) {\n Modal.error({\n title: \"Not authorised\",\n content: <>Not authorised to create a {getSimpleLabel(\"task revision\")}.,\n });\n } else {\n openCreateTaskRevisionModal();\n }\n }\n\n function displayRevisions() {\n const timelineEntries = getTimelineEntries();\n\n const urlParams = new URLSearchParams(window.location.search);\n const taskRevisionIdInUrl = urlParams.get(\"taskRevisionId\");\n\n return (\n \n {node.children.map((child, index) => (\n
\n {node.children.map((child, index) => (\n
\n );\n case \"bulleted-list\":\n return (\n - \n {node.children.map((child, index) => (\n
- \n {node.children.map((child, index) => (\n
\n From:
\n To:\n
\n From: {parsedContent.oldClientName}\n
\n To: {parsedContent.clientName}\n \n );\n break;\n case \"PO_NUMBER_CHANGED\":\n title = (\n <>\n PO number changed
\n From: {parsedContent.oldPoNumber}\n
\n To: {parsedContent.poNumber}\n \n );\n break;\n case \"TASK_COUNT_CHANGED\":\n title = (\n <>\n {getSimpleLabel(\"Task\")} count changed
\n From: {parsedContent.oldTaskCount}\n
\n To: {parsedContent.taskCount}\n \n );\n break;\n case \"INVOICE_COUNT_CHANGED\":\n title = (\n <>\n Invoice count changed
\n From: {parsedContent.oldInvoiceCount}\n
\n To: {parsedContent.invoiceCount}\n \n );\n break;\n case \"QUOTE_COUNT_CHANGED\":\n title = (\n <>\n {getSimpleLabel(\"Quote\")} count changed
\n From: {parsedContent.oldQuoteCount}\n
\n To: {parsedContent.quoteCount}\n \n );\n break;\n case \"PURCHASE_ORDER_COUNT_CHANGED\":\n title = (\n <>\n {getSimpleLabel(\"Purchase order\")} count changed
\n From: {parsedContent.oldPurchaseOrderCount}\n
\n To: {parsedContent.purchaseOrderCount}\n \n );\n break;\n case \"PUBLIC_UPLOAD_LINK_COPIED\":\n title = <>Public upload link copied;\n break;\n case \"PUBLIC_UPLOAD_EMAIL_SENT\":\n title = <>Public upload email sent to {parsedContent.clientContactDetails?.email};\n break;\n case \"PUBLIC_UPLOAD_URL_VIEWED\":\n title = <>Design package viewed;\n break;\n case \"TASK_FILES_DOWNLOADED_INDIVIDUAL\":\n title = <>Design package file downloaded: {parsedContent.fileName};\n break;\n case \"TASK_FILES_DOWNLOADED_ALL\":\n title = <>Design package downloaded;\n break;\n case \"TASK_REVISION_STATUS_CHANGED\":\n title = (\n <>\n Status changed from {parsedContent.oldStatus} to {parsedContent.newStatus} on{\" \"}\n {parsedContent.taskRevisionName}\n \n );\n break;\n\n case \"FILE_DELETED\":\n title = (\n <>\n File deleted: {parsedContent.fileType} {parsedContent.fileName}\n \n );\n break;\n\n case \"START_DATE_CHANGED\":\n let oldStartDate = parsedContent.oldDate\n ? moment(parsedContent.oldDate).format(\"DD-MM-YYYY\")\n : \"not being set\";\n title = (\n <>\n Start date changed from {oldStartDate} to {moment(parsedContent.newDate).format(\"DD-MM-YYYY\")}\n \n );\n break;\n case \"END_DATE_CHANGED\":\n let oldEndDate = parsedContent.oldDate\n ? moment(parsedContent.oldDate).format(\"DD-MM-YYYY\")\n : \"not being set\";\n title = (\n <>\n End date changed from {oldEndDate} to {moment(parsedContent.newDate).format(\"DD-MM-YYYY\")}\n \n );\n\n break;\n case \"REQUEST_FORM_ADDED_TO_TASK_REVISION\":\n title = (\n <>\n {getSimpleLabel(\"Request\")} form \"{parsedContent.requestFormName}\" from {getSimpleLabel(\"request\")}{\" \"}\n {processIdForDisplay(parsedContent.requestId)} ({parsedContent.requestTitle}) linked to{\" \"}\n {getSimpleLabel(\"task revision\")} {parsedContent.taskRevisionName}\n \n );\n break;\n case \"REQUEST_FORM_REMOVED_FROM_TASK_REVISION\":\n title = (\n <>\n {getSimpleLabel(\"Request\")} form \"{parsedContent.requestFormName}\" from {getSimpleLabel(\"request\")}{\" \"}\n {processIdForDisplay(parsedContent.requestId)} ({parsedContent.requestTitle}) removed from{\" \"}\n {getSimpleLabel(\"task revision\")} {parsedContent.taskRevisionName}\n \n );\n break;\n case \"TASK_FILES_SENT\":\n title = (\n <>\n Design package issued{\" \"}\n
\n {activityItem.author === apiUser.id && (\n
\n );\n break;\n case \"REVIEW_ACCEPTED\":\n break;\n case \"CREATED\":\n title = \"Created\";\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields) {\n break;\n }\n\n if (parsedFields.copiedFromTaskId) {\n title += ` (copied from ${getSimpleLabel(\"task\")} ${parsedFields.copiedFromTaskId} - ${\n parsedFields.copiedFromTaskTitle\n })`;\n }\n break;\n case \"FINISHED\": {\n title = <>Marked as finished;\n break;\n }\n case \"ARCHIVED\":\n title = <>Archived;\n\n break;\n case \"REVISION_CREATED\": {\n title = <>Revision created;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.revisionName) {\n break;\n }\n\n content = `${parsedFields.revisionName}`;\n\n if (parsedFields.revisionDescription) {\n content += ` - ${parsedFields.revisionDescription}`;\n }\n\n break;\n }\n case \"ASSIGNEE_CHANGED\": {\n title = <>Assignee changed;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newAssigneeId) {\n content = \"Unassigned\";\n break;\n }\n\n const newAssigneeDetails = users.find((x) => x.id === parsedFields.newAssigneeId);\n content = `${newAssigneeDetails.firstName} ${newAssigneeDetails.lastName}`;\n break;\n }\n case \"ASSIGNEE_INITIALLY_SET\": {\n title = <>Assignee initially set;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newAssigneeId) {\n content = \"Unassigned\";\n break;\n }\n\n const newAssigneeDetails = users.find((x) => x.id === parsedFields.newAssigneeId);\n content = `${newAssigneeDetails.firstName} ${newAssigneeDetails.lastName}`;\n break;\n }\n case \"STATUS_CHANGED\": {\n title = <>Status changed;\n const parsedFields = JSON.parse(activityItem.content);\n const newStatus = parsedFields.newStatus;\n\n content = `${newStatus}`;\n\n break;\n }\n case \"DUE_DATE_CHANGED\": {\n title = <>Due date changed;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newDate) {\n break;\n }\n\n content = `${parsedFields.newDate}`;\n\n break;\n }\n case \"REVISION_DELETED\": {\n title = <>Revision deleted;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.revisionName) {\n break;\n }\n\n content = `${parsedFields.revisionName}`;\n\n break;\n }\n case \"TITLE_EDITED\": {\n title = <>Title edited;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newTitle) {\n break;\n }\n\n content = `${parsedFields.newTitle}`;\n\n break;\n }\n case \"INITIALS_EDITED\": {\n title = <>Initials edited;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newValue) {\n break;\n }\n\n content = `${parsedFields.newValue}`;\n\n break;\n }\n\n case \"DESCRIPTION_EDITED\": {\n title = <>Description edited;\n const parsedFields = JSON.parse(activityItem.content);\n\n if (!parsedFields || !parsedFields.newDescription) {\n break;\n }\n\n content = (\n \n {isEditing ? (\n <>\n {\n updateComment();\n }}\n type=\"link\"\n icon={
\n )}\n {isEditing ? (\n \n {\n setCommentValue(value);\n }}\n defaultValue={initialCommentValue}\n basicFormattingOnly\n />\n
\n ) : (\n {parsedFields.newValue},\n });\n }}\n >\n View notes\n \n ) : null}\n \n );\n break;\n }\n case \"NAME_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n Name changed: \n {parsedFields?.newValue && typeof parsedFields?.newValue === \"string\" ? (\n {parsedFields.newValue}\n ) : null}\n \n );\n break;\n }\n case \"INITIALS_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n Initials changed:
\n {parsedFields?.newValue && typeof parsedFields?.newValue === \"string\" ? (\n {parsedFields.newValue}\n ) : null}\n \n );\n break;\n }\n case \"COMPANY_NUMBER_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n Company number changed:
\n {parsedFields?.newValue && typeof parsedFields?.newValue === \"string\" ? (\n {parsedFields.newValue}\n ) : null}\n \n );\n break;\n }\n case \"VAT_NUMBER_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n VAT number changed:
\n {parsedFields?.newValue && typeof parsedFields?.newValue === \"string\" ? (\n {parsedFields.newValue}\n ) : null}\n \n );\n break;\n }\n case \"PAYMENT_TERMS_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n Payment terms changed:
\n {parsedFields?.newValue && typeof parsedFields?.newValue === \"string\" ? (\n \n {parsedFields.newValue} day{parsedFields.newValue == \"1\" ? \"\" : \"s\"}\n \n ) : null}\n \n );\n break;\n }\n case \"NOTES_HTML_CHANGED\": {\n let parsedFields;\n try {\n parsedFields = JSON.parse(activityItem.content);\n } catch (e) {\n // do nothing\n }\n title = (\n <>\n Notes changed{\" \"}\n {parsedFields?.newValue ? (\n
{content}
;\n }\n }\n\n return (\n \n
\n );\n}\n","import { RouteComponentProps, withRouter } from \"react-router-dom\";\nimport { useState, useEffect } from \"react\";\nimport { Spin, Button, message } from \"antd\";\nimport { PlusCircleOutlined } from \"@ant-design/icons\";\n\nimport { callGraphQLSimple } from \"common/apiHelpers\";\nimport withSubscriptions from \"common/withSubscriptions\";\nimport { getSimpleLabel } from \"common/labels\";\nimport { ActivityItem, User } from \"common/types\";\n\nimport Card from \"Card/Card\";\nimport Textarea from \"Form/Textarea/Textarea\";\nimport ActivityItemComponent from \"./ActivityItem/ActivityItem\";\n\nimport \"./Activity.scss\";\n\ninterface ActivityProps extends RouteComponentProps {\n parentLabel: \"Task\" | \"Project\";\n users: User[];\n parentId: string;\n parentRecord: any;\n apiUser: any;\n clients: any;\n}\n\nexport function Activity({ parentLabel, parentRecord, parentId, users, apiUser, clients }: ActivityProps) {\n const [activityItems, setActivityItems] = useState{avatar}
\n\n \n
\n \n {authorName}\n {moment(activityItem.createdAt).format(\"DD MMM YYYY - HH:mm:ss\")}\n {activityItem.type === \"COMMENT\" &&\n activityItem.updatedAt &&\n activityItem.updatedAt !== activityItem.createdAt && (\n <>\n {\" \"}\n
(edited {moment(activityItem.updatedAt).format(\"DD MMM YYYY - HH:mm:ss\")})\n \n )}\n
\n {title}\n {contentElement}\n (edited {moment(activityItem.updatedAt).format(\"DD MMM YYYY - HH:mm:ss\")})\n \n )}\n