Add comments field to MCC request (#109)

* Add comments field to MCC request

Author: bbimber

mcc/resources/schemas/dbscripts/postgresql/mcc-20.014-20.015.sql

@@ -0,0 +1 @@
+ALTER TABLE mcc.animalrequests add comments varchar(4000);

mcc/resources/schemas/dbscripts/sqlserver/mcc-20.014-20.015.sql

@@ -0,0 +1 @@
+ALTER TABLE mcc.animalrequests add comments varchar(4000);

mcc/resources/schemas/mcc.xml

@@ -373,6 +373,10 @@
                 <columnTitle>IACUC Protocol #</columnTitle>
                 <nullable>true</nullable>
             </column>
+            <column columnName="comments">
+                <columnTitle>Other Comments</columnTitle>
+                <nullable>true</nullable>
+            </column>
             <column columnName="status">
                 <defaultValue>Draft</defaultValue>
             </column>

mcc/resources/views/mccRequests.html

@@ -7,7 +7,8 @@
             return;
 
         Ext4.get(webpart.wrapperDivId).update(
-            'The MCC is now accepting animal requests! Investigators interested in requesting marmosets for their research can submit applications via the animal request portal. Please note, while you are encouraged to submit your requests now, the review process will not begin until June 2022, and the first animals will not be available until at least September 2022. Investigators can anticipate the estimated cost for getting marmosets to be about $5K USD per animal plus $8-10K USD for shipping. Please note that this is an estimate and the actual cost is determined by the breeding centers and shipping can vary based on distance.' +
+            'The MCC is now accepting animal requests! Investigators interested in requesting marmosets for their research can submit applications via the animal request portal.<br><br>' +
+            '<span style="font-weight: bold">Investigators can anticipate the estimated cost for getting marmosets to be about $5,500 USD per animal plus approximately $10,000 USD for shipping. Please note that this is an estimate and the actual cost is determined by the breeding centers and shipping can vary based on distance.</span>' +
             '<p></p>' +
             '<a class="labkey-text-link" href="<%=contextPath%>/mcc' + ctx['MCCRequestContainer'] + '/animalRequest.view">Submit New Animal Request</a><br>' +
             '<a class="labkey-text-link" href="/become-a-user.html#request-animals">Click Here to View Documentation on the Request Process and Scoring Criteria</a>' +

mcc/src/client/AnimalRequest/animal-request.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useState } from 'react';
+import React, { FormEvent, useRef, useState } from 'react';
 import { ActionURL, getServerContext, Query } from '@labkey/api';
 import {
     AnimalCohort,
@@ -21,32 +21,46 @@ import AnimalCohorts from './components/animal-cohort';
 import Button from './components/button';
 import SavingOverlay from './saving-overlay';
 import ErrorMessageHandler from './components/error-message-handler';
+import {
+    Box,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogContentText,
+    DialogTitle, TextareaAutosize,
+    TextField
+} from '@material-ui/core';
 
 import {
     animalWellfarePlaceholder,
+    censusToolTip,
     certificationLabel,
-    terminalProceduresLabel,
     collaborationsPlaceholder,
+    commentsPlaceholder,
     earlyInvestigatorTooltip,
     existingMarmosetColonyOptions,
     existingNHPFacilityOptions,
     experimentalRationalePlaceholder,
     institutionTypeOptions,
     methodsProposedPlaceholder,
-    signingOfficialTooltip, censusToolTip
+    signingOfficialTooltip,
+    terminalProceduresLabel
 } from './components/values';
 import AnimalCensus from './components/census';
 
 export function AnimalRequest() {
     const requestId = (new URLSearchParams(window.location.search)).get("requestId")
 
+    const [showWithdrawDialog, setShowWithdrawDialog] = useState(false)
+    const [withdrawReasonText, setWithdrawReasonText] = useState<string>(null)
     const [isSubmitting, setIsSubmitting] = useState(false)
     const [displayOverlay, setDisplayOverlay] = useState(false)
     const [requestData, setRequestData] = useState<AnimalRequestModel>(null)
     const [stateRollbackOnFailure, setStateRollbackOnFailure] = useState(requestData?.request?.status)
 
     const [ deletedCohortRecords, setDeletedCohortRecords ] = useState(new Set<number>())
     const [ deletedCoIRecords, setDeletedCoIRecords ] = useState(new Set<number>())
+    const formRef = useRef(null)
 
     function onAddCohort() {
         requestData.cohorts.push(new AnimalCohort())
@@ -114,7 +128,7 @@ export function AnimalRequest() {
     }
 
     function doEnforceRequiredFields() {
-        return isSubmitting || requestData.request.status !== "Draft"
+        return "Withdrawn" === requestData.request.status ? false : isSubmitting || requestData.request.status !== "Draft"
     }
 
     // The general idea is that users with MCCRequestAdminPermission can edit all states.
@@ -250,8 +264,8 @@ export function AnimalRequest() {
                 setRequestData({...requestData})
             }
         }
-    
-        const el = e.currentTarget as HTMLFormElement
+
+        const el = formRef.current as HTMLFormElement
         const data = new FormData(el)
         el.querySelectorAll<HTMLSelectElement>('select[multiple]').forEach(function(x){
             data.set(x.id, Array.from(x.selectedOptions, option => option.value).join(','))
@@ -313,6 +327,7 @@ export function AnimalRequest() {
                         "iacucprotocol": data.get("iacuc-protocol"),
                         "grantnumber" : data.get("funding-grant-number"),
                         "applicationduedate": data.get("funding-application-due-date"),
+                        "comments": data.get("comments"),
                         "status": requestData.request.status,
                     }]
                 },
@@ -333,8 +348,8 @@ export function AnimalRequest() {
                     requestData.request.rowid = rowId
                 }
 
-                if (response.result[0].rows[0].rowid.status) {
-                    requestData.request.status = response.result[0].rows[0].rowid.status
+                if (response.result[0].rows[0].status) {
+                    requestData.request.status = response.result[0].rows[0].status
                 }
                 else {
                     console.error('Status was null for the animalrequest row after save. This is not expected.')
@@ -444,7 +459,7 @@ export function AnimalRequest() {
 
     return (
         <>
-        <form className="tw-w-full tw-max-w-4xl" onSubmit={handleSubmit} autoComplete="off">
+        <form className="tw-w-full tw-max-w-4xl" onSubmit={handleSubmit} autoComplete="off" id={"animalRequestForm"} ref={formRef}>
             <h3>Overview</h3>
 
             <Title text="1. Project Title*"/>
@@ -689,6 +704,15 @@ export function AnimalRequest() {
                 <AnimalCensus id="census" isSubmitting={isSubmitting} required={doEnforceRequiredFields()} request={requestData.request}/>
             </div>
 
+            <Title text={"8. " + commentsPlaceholder}/>
+            <div className="tw-w-full tw-px-3 tw-mb-6">
+                <ErrorMessageHandler isSubmitting={isSubmitting}>
+                    <div className="tw-w-full tw-px-3 tw-mb-6">
+                        <TextArea id="comments" ariaLabel="Comments" isSubmitting={isSubmitting} placeholder={commentsPlaceholder} required={false} defaultValue={requestData.request.comments}/>
+                    </div>
+                </ErrorMessageHandler>
+            </div>
+
             <div className="tw-flex tw-flex-wrap tw-mx-2">
                 <Title text="Request Status: "/>{requestData.request.status}
             </div>
@@ -711,13 +735,54 @@ export function AnimalRequest() {
                  }} text={getSubmitButtonText()} display={hasEditPermission()}/>
 
                 <Button onClick={(e) => {
-                    requestData.request.status = "withdrawn"
-                    handleSubmitButton(e, false);
-                }} text={"Widthdraw"} display={shouldShowWithdraw()}/>
+                    e.preventDefault()
+                    setShowWithdrawDialog(true)
+                }} text={"Withdraw"} display={shouldShowWithdraw()}/>
             </div>
         </form>
 
         <SavingOverlay display={displayOverlay} />
+
+        <Dialog open={showWithdrawDialog}>
+            <DialogTitle>Withdraw Request</DialogTitle>
+            <DialogContent>
+                <DialogContentText>Please enter a reason for withdrawing this request</DialogContentText>
+                <TextareaAutosize
+                    minRows={4}
+                    id="withdrawReason"
+                    required={true}
+                    autoFocus={true}
+                    defaultValue={withdrawReasonText}
+                    form={"animalRequestForm"}
+                    onChange={(e) => setWithdrawReasonText(e.target.value)}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Box mr="5px">
+                    <Button onClick={(e) => {
+                        if (!withdrawReasonText) {
+                            alert("Must enter the reason")
+                            return
+                        }
+
+                        // The record was never saved, so just leave the page
+                        if (!requestData.request.rowid) {
+                            e.preventDefault()
+                            window.location.href = ActionURL.buildURL('mcc', 'mccRequests.view')
+                        }
+                        else {
+                            requestData.request.status = "Withdrawn"
+                            formRef.current.querySelectorAll('#comments')[0].value = (requestData.request.comments ? requestData.request.comments + '\n' : '') + withdrawReasonText
+
+                            setWithdrawReasonText(null)
+                            setShowWithdrawDialog(false)
+                            setIsSubmitting(true)
+                        }
+                    }} form={"animalRequestForm"} disabled={false} text={"Submit"}/>
+                    <Button onClick={(e) => setShowWithdrawDialog(false)} text={"Close"}/>
+                </Box>
+            </DialogActions>
+        </Dialog>
         </>
      )
 }

mcc/src/client/AnimalRequest/components/button.tsx

@@ -14,7 +14,7 @@ export default function Button(props) {
     } else {
         return (
             <button className="tw-ml-16 tw-bg-blue-500 hover:tw-bg-blue-400 tw-text-white tw-font-bold tw-py-4 tw-mt-2 tw-px-6 tw-border-none tw-rounded"
-             onClick={(e) => onClick(e)}>{props.text}</button>
+             onClick={(e) => onClick(e)} form={props.form}>{props.text}</button>
         )
     }
 }

mcc/src/client/AnimalRequest/components/values.ts

@@ -8,6 +8,8 @@ export const otherCharacteristicsPlaceholder = "Other characteristics (ie. age,
 export const methodsProposedPlaceholder = "Methods proposed and investigators' experience in the methods"
 export const animalBreedingPlaceholder = "Purpose of the animal breeding program"
 export const collaborationsPlaceholder = "Any collaborations, pilot studies, and/or publications"
+
+export const commentsPlaceholder = "Other comments"
 export const animalWellfarePlaceholder = "Animal welfare (proposed care and use)"
 export const censusReasonPlaceholder = "Reason for not participating"
 

mcc/src/client/RequestReview/components/ReadOnlyRequest.tsx

@@ -261,6 +261,12 @@ export default function ReadOnlyRequest(props: {requestData: AnimalRequestModel}
                 <Grid item xs={10}>
                     {requestData.request.censusreason || 'N/A'}
                 </Grid>
+                <Grid item xs={2} className={styles.fieldLabel}>
+                    Other Comments:
+                </Grid>
+                <Grid item xs={10}>
+                    {requestData.request.comments}
+                </Grid>
                 <Grid item xs={2} className={styles.fieldLabel}>
                     Status:
                 </Grid>

mcc/src/client/components/RequestUtils.tsx

@@ -46,6 +46,7 @@ export class AnimalRequestProps {
     vetemail: string;
     vetfirstname: string;
     objectid: string;
+    comments: string;
 }
 
 export class CoInvestigatorModel {
@@ -122,6 +123,7 @@ export async function queryRequestInformation(requestId, handleFailure) {
                 "iacucprotocol",
                 "grantnumber",
                 "applicationduedate",
+                "comments",
                 "status"
             ],
             filterArray: [

mcc/src/org/labkey/mcc/MccModule.java

@@ -59,7 +59,7 @@ public String getName()
     @Override
     public @Nullable Double getSchemaVersion()
     {
-        return 20.014;
+        return 20.015;
     }
 
     @Override