#2 Add input validation and subtitles in modal dialogs

tscz · Jan 15, 2020 · c6584c9 · c6584c9
1 parent 7eb0be3
commit c6584c9
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 21 deletions.
diff --git a/src/components/dialogManagement/dialogManagement.tsx b/src/components/dialogManagement/dialogManagement.tsx
@@ -14,7 +14,7 @@ import {
 } from "../../states/projectSlice";
 import store, { ApplicationState } from "../../states/store";
 import FileInput, { FileType } from "../fileInput/fileInput";
-import ModalDialog from "../modalDialog/modalDialog";
+import ModalDialog, { DialogAction } from "../modalDialog/modalDialog";
 
 interface PropsFromState {
   type: DialogType;
@@ -71,8 +71,13 @@ class DialogManagement extends Component<AllProps> {
         return (
           <ModalDialog
             title="Save Transcription"
+            subTitle="Please click on 'save' to generate a transcription.zip file. It contains the transcription and the source audio file."
             onCancel={this.props.closedDialog}
             actions={[
+              {
+                label: "Cancel",
+                onClick: () => this.props.closedDialog()
+              },
               {
                 label: "Save",
                 onClick: () => {
@@ -84,9 +89,7 @@ class DialogManagement extends Component<AllProps> {
                 }
               }
             ]}
-          >
-            <p>Save Transcription</p>
-          </ModalDialog>
+          ></ModalDialog>
         );
       default:
         return null;
@@ -100,18 +103,27 @@ const NewDialog: FunctionComponent<{
 }> = props => {
   const [fileUrl, setFileUrl] = useState("");
   const [title, setTitle] = useState("");
+  const actions: () => DialogAction[] = () => {
+    return [
+      {
+        label: "Cancel",
+        onClick: () => props.onCancel()
+      },
+      {
+        label: "Create",
+        onClick: () => props.onSubmit(title, fileUrl),
+        disabled: fileUrl === "" || title === ""
+      }
+    ];
+  };
 
   const handleTitleChange = (event: any) => setTitle(event.target.value);
 
   return (
     <ModalDialog
       title="Create new Transcription"
-      actions={[
-        {
-          label: "Create",
-          onClick: () => props.onSubmit(title, fileUrl)
-        }
-      ]}
+      subTitle="Please add a project title and select an audio file from your hard disk below."
+      actions={actions()}
       onCancel={props.onCancel}
     >
       <FormControl fullWidth>
@@ -143,19 +155,28 @@ const OpenDialog: FunctionComponent<{
 }> = props => {
   const [fileUrl, setFileUrl] = useState("");
   const [file, setFile] = useState<File>();
+  const actions: () => DialogAction[] = () => {
+    return [
+      {
+        label: "Cancel",
+        onClick: () => props.onCancel()
+      },
+      {
+        label: "Open",
+        onClick: () => props.onSubmit(file!, fileUrl),
+        disabled: fileUrl === ""
+      }
+    ];
+  };
 
   return (
     <ModalDialog
       title="Open Transcription"
+      subTitle="Please select a project zip file from your hard disk below."
       onCancel={props.onCancel}
-      actions={[
-        {
-          label: "Open",
-          onClick: () => props.onSubmit(file!, fileUrl)
-        }
-      ]}
+      actions={actions()}
     >
-      <FormControl>
+      <FormControl fullWidth>
         <FileInput
           fileType={FileType.ZIP}
           id="zip_file"

diff --git a/src/components/modalDialog/modalDialog.tsx b/src/components/modalDialog/modalDialog.tsx
@@ -1,17 +1,23 @@
-import { DialogActions, DialogContent } from "@material-ui/core";
+import {
+  DialogActions,
+  DialogContent,
+  DialogContentText
+} from "@material-ui/core";
 import Button from "@material-ui/core/Button";
 import Dialog from "@material-ui/core/Dialog";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { Component } from "react";
 import React from "react";
 
-interface DialogAction {
+export interface DialogAction {
   label: string;
   onClick: () => void;
+  disabled?: boolean;
 }
 
 interface ModalDialogProps {
   title: string;
+  subTitle?: string;
   onCancel: () => void;
   actions?: DialogAction[];
 }
@@ -26,10 +32,18 @@ class ModalDialog extends Component<ModalDialogProps> {
         maxWidth={"sm"}
       >
         <DialogTitle>{this.props.title}</DialogTitle>
-        <DialogContent>{this.props.children}</DialogContent>
+        <DialogContent>
+          <DialogContentText>{this.props.subTitle}</DialogContentText>
+          {this.props.children}
+        </DialogContent>
         <DialogActions>
           {this.props.actions?.map((value, index) => (
-            <Button key={value.label} onClick={value.onClick} color="primary">
+            <Button
+              key={value.label}
+              onClick={value.onClick}
+              color="primary"
+              disabled={value.disabled ?? false}
+            >
               {value.label}
             </Button>
           ))}