Add in option to validate form on opening.

src/main/confighandler.ts

@@ -19,7 +19,8 @@ interface ConfigOptions {
   dolphinVersion: string,
   savedDialogPathnames: SavedDialogPathnames,
   loadFormInputsType: LoadFormInputsType,
-  expandUnselectedChoiceInputs: boolean
+  expandUnselectedChoiceInputs: boolean,
+  validateFormOnOpen: boolean
 }
 
 export class Config {
@@ -74,7 +75,8 @@ export class Config {
         "template": "",
       },
       loadFormInputsType: "load-form-inputs-select-last-recorded",
-      expandUnselectedChoiceInputs: false
+      expandUnselectedChoiceInputs: false,
+      validateFormOnOpen: false
     };
   }
 
@@ -185,3 +187,12 @@ export async function setAndSaveExpandUnselectedChoiceInputs(event: IpcMainInvok
   globalConfig.options.expandUnselectedChoiceInputs = expandUnselectedChoiceInputs;
   await globalConfig.writeConfig();
 }
+
+export async function getValidateFormOnOpen(event: IpcMainInvokeEvent) {
+  return globalConfig.options.validateFormOnOpen;
+}
+
+export async function setAndSaveValidateFormOnOpen(event: IpcMainInvokeEvent, validateFormOnOpen: boolean) {
+  globalConfig.options.validateFormOnOpen = validateFormOnOpen;
+  await globalConfig.writeConfig();
+}

src/main/electron.ts

@@ -151,6 +151,8 @@ async function createWindow() {
   ipcMain.handle("get-last-opened-template-filename", confighandler.getLastOpenedTemplateFilename);
   ipcMain.handle("get-expand-unselected-choice-inputs", confighandler.getExpandUnselectedChoiceInputs);
   ipcMain.handle("set-and-save-expand-unselected-choice-inputs", confighandler.setAndSaveExpandUnselectedChoiceInputs);
+  ipcMain.handle("get-validate-form-on-open", confighandler.getValidateFormOnOpen);
+  ipcMain.handle("set-and-save-validate-form-on-open", confighandler.setAndSaveValidateFormOnOpen);
 
   // and load the index.html of the app.
   // win.loadFile("index.html");

src/main/preload.js

@@ -30,5 +30,7 @@ contextBridge.exposeInMainWorld("api", {
   getLastRecordedTemplateFilename: () => ipcRenderer.invoke("get-last-recorded-template-filename"),
   getLastOpenedTemplateFilename: () => ipcRenderer.invoke("get-last-opened-template-filename"),
   getExpandUnselectedChoiceInputs: () => ipcRenderer.invoke("get-expand-unselected-choice-inputs"),
-  setAndSaveExpandUnselectedChoiceInputs: (expandUnselectedChoiceInputs) => ipcRenderer.invoke("set-and-save-expand-unselected-choice-inputs", expandUnselectedChoiceInputs)
+  setAndSaveExpandUnselectedChoiceInputs: (expandUnselectedChoiceInputs) => ipcRenderer.invoke("set-and-save-expand-unselected-choice-inputs", expandUnselectedChoiceInputs),
+  getValidateFormOnOpen: () => ipcRenderer.invoke("get-validate-form-on-open"),
+  setAndSaveValidateFormOnOpen: (validateFormOnOpen) => ipcRenderer.invoke("set-and-save-validate-form-on-open", validateFormOnOpen)
 });

src/renderer/App.tsx

@@ -10,35 +10,38 @@ import { getInitialFormData } from "./import-template-on-program-open";
 import { AutoTTRecConfigFormFields } from "./auto-tt-rec-form-field-types";
 import { LoadFormInputsType } from "../shared/shared-types";
 
-async function getInitialLoadFormInputsTypeFormDataAndExpandUnselectedChoiceInputs(): Promise<[LoadFormInputsType, AutoTTRecConfigFormFields, boolean]> {
+async function getInitialLoadConfigOptions(): Promise<[LoadFormInputsType, AutoTTRecConfigFormFields, boolean, boolean]> {
   const initialLoadFormInputsType = await window.api.getLoadFormInputsType();
   const INITIAL_FORM_DATA = await getInitialFormData(initialLoadFormInputsType);
   const expandUnselectedChoiceInputs = await window.api.getExpandUnselectedChoiceInputs();
-  return [initialLoadFormInputsType, INITIAL_FORM_DATA, expandUnselectedChoiceInputs];
+  const validateFormOnOpen = await window.api.getValidateFormOnOpen();
+  return [initialLoadFormInputsType, INITIAL_FORM_DATA, expandUnselectedChoiceInputs, validateFormOnOpen];
 }
 
 export function App() {
   const renderCounter = useRenderCounter(false, "App");
   const [initialLoadFormInputsType, setInitialLoadFormInputsType] = useState<LoadFormInputsType | null>(null);
   const [INITIAL_FORM_DATA, set_INITIAL_FORM_DATA] = useState<AutoTTRecConfigFormFields | null>(null);
+  const [validateFormOnOpen, setValidateFormOnOpen] = useState<boolean | null>(null);
 
   useEffect(() => {
-    getInitialLoadFormInputsTypeFormDataAndExpandUnselectedChoiceInputs().then(([fetchedInitialLoadFormInputsType, fetched_INITIAL_FORM_DATA, fetchedExpandUnselectedChoiceInputs]) => {
+    getInitialLoadConfigOptions().then(([fetchedInitialLoadFormInputsType, fetched_INITIAL_FORM_DATA, fetchedExpandUnselectedChoiceInputs, fetchedValidateFormOnOpen]) => {
       setInitialLoadFormInputsType(fetchedInitialLoadFormInputsType);
       fetched_INITIAL_FORM_DATA["expand-unselected-choice-inputs"] = fetchedExpandUnselectedChoiceInputs;
       set_INITIAL_FORM_DATA(fetched_INITIAL_FORM_DATA);
+      setValidateFormOnOpen(fetchedValidateFormOnOpen);
     });
   }, []);
 
-  if (initialLoadFormInputsType === null || INITIAL_FORM_DATA === null) {
+  if (initialLoadFormInputsType === null || INITIAL_FORM_DATA === null || validateFormOnOpen === null) {
     return (
       <div></div>
     )
   } else {
     return (
       <div>
         <GUIHeader/>
-        <AutoTTRecManager initialLoadFormInputsType={initialLoadFormInputsType} INITIAL_FORM_DATA={INITIAL_FORM_DATA}/>
+        <AutoTTRecManager initialLoadFormInputsType={initialLoadFormInputsType} INITIAL_FORM_DATA={INITIAL_FORM_DATA} validateFormOnOpen={validateFormOnOpen}/>
         {renderCounter}
       </div>
     );

src/renderer/components/AutoTTRecConfigForm.tsx

@@ -53,6 +53,7 @@ import { ClearAllFields } from "./ClearAllFields";
 import { ImportTemplate } from "./ImportTemplate";
 import { ExpandUnselectedChoiceInputs } from "./ExpandUnselectedChoiceInputs";
 import { LoadFormInputsTypeSelect } from "./LoadFormInputsTypeSelect";
+import { ValidateFormOnOpen } from "./ValidateFormOnOpen";
 
 import { shallowCopy } from "../../shared/util-shared";
 import { LoadFormInputsType } from "../../shared/shared-types";
@@ -95,7 +96,8 @@ type AutoTTRecConfigFormProps = {
   onAbortCallback: (event: React.MouseEvent<HTMLButtonElement>) => void,
   isAutoTTRecRunning: boolean,
   initialLoadFormInputsType: LoadFormInputsType,
-  INITIAL_FORM_DATA: AutoTTRecConfigFormFields
+  INITIAL_FORM_DATA: AutoTTRecConfigFormFields,
+  validateFormOnOpen: boolean
   //setFormDefaultValues: React.Dispatch<React.SetStateAction<AutoTTRecConfigFormFields>>
 }
 
@@ -116,7 +118,7 @@ export function AutoTTRecConfigForm(
     reValidateMode: "onSubmit",
     defaultValues: props.INITIAL_FORM_DATA
   });
-  console.log("AutoTTRecConfigForm formState:", formMethods.formState.errors);
+  //console.log("AutoTTRecConfigForm formState.isSubmitted:", formMethods.formState.isSubmitted);
   //console.trace();
   //console.log("props:", props);
 
@@ -129,10 +131,6 @@ export function AutoTTRecConfigForm(
     return formMethods.handleSubmit(onSubmit, onError);
   };
 
-  const getValidateFormArgsOnlyOnSubmitCallback = () => {
-    return formMethods.handleSubmit(onSubmitValidateOnly, onError);
-  };
-
   const formOnSubmitCallbackRef = useRef<() => React.FormEventHandler<HTMLFormElement>>(getRunAutoTTRecOnSubmitCallback);
 
   //
@@ -179,10 +177,6 @@ export function AutoTTRecConfigForm(
     await props.onSubmitCallback(autoTTRecArgs, setSubmittedToggle);
   }
 
-  function onSubmitValidateOnly(formData: AutoTTRecConfigFormFields) {
-
-  }
-
   function onError(errors: Object) {
     console.log("errors:", errors);
     console.log("formState.dirtyFields:", formState.dirtyFields);
@@ -196,13 +190,17 @@ export function AutoTTRecConfigForm(
     <div>
       <form onSubmit={formOnSubmitCallbackRef.current()}>
         <LoadFormInputsTypeSelect disabled={props.isAutoTTRecRunning} initialValue={props.initialLoadFormInputsType}/>
+        <br/>
+        <strong>Other program settings:</strong>
+        <ValidateFormOnOpen disabled={props.isAutoTTRecRunning} initialValue={props.validateFormOnOpen}/>
         <ExpandUnselectedChoiceInputs_Memo disabled={props.isAutoTTRecRunning} formMethods={formMethods}/>
+        <br/>
         <ImportTemplate_Memo disabled={props.isAutoTTRecRunning} formMethods={formMethods} setUnrenderFormToggle={setUnrenderFormToggle} onError={onError}/>
         <ClearAllFields_Memo disabled={props.isAutoTTRecRunning} formMethods={formMethods} setUnrenderFormToggle={setUnrenderFormToggle}/>
         {/*<label htmlFor="expand-unselected-choice-inputs">Expand unselected "choice" inputs (advanced)</label>
         <input id="expand-unselected-choice-inputs" type="checkbox" checked={expandUnselectedChoiceInputs} onChange={updateExpandUnselectedChoiceInputs}/>*/}
         <fieldset disabled={props.isAutoTTRecRunning}>
-          <AutoTTRecConfigFormComponents_Memo formMethods={formMethods} forceUpdate={submittedToggle} unrenderFormToggle={unrenderFormToggle} isAutoTTRecRunning={props.isAutoTTRecRunning} expandUnselectedChoiceInputs={expandUnselectedChoiceInputs}/>
+          <AutoTTRecConfigFormComponents_Memo formMethods={formMethods} forceUpdate={submittedToggle} unrenderFormToggle={unrenderFormToggle} isAutoTTRecRunning={props.isAutoTTRecRunning} expandUnselectedChoiceInputs={expandUnselectedChoiceInputs} initialValidateFormOnOpen={props.validateFormOnOpen} onError={onError}/>
         </fieldset>
         <AutoTTRecSubmitAbortButtons_Memo isAutoTTRecRunning={props.isAutoTTRecRunning} onAbortCallback={props.onAbortCallback} setRunAutoTTRecOnSubmitCallback={(() => {}) as any}/>
       </form>

src/renderer/components/AutoTTRecConfigFormComponents.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from "react";
+import React, { memo, useState, useEffect } from "react";
 
 
 
@@ -20,14 +20,24 @@ const ISOWBFSFileInput_Memo = memo(ISOWBFSFileInput);
 const FormComplexityLayout_Memo = memo(FormComplexityLayout);
 
 export function AutoTTRecConfigFormComponents(props: {
-    formMethods: UseFormReturn<AutoTTRecConfigFormFields, any, undefined>,
-    forceUpdate: boolean,
-    unrenderFormToggle: boolean,
-    isAutoTTRecRunning: boolean,
-    expandUnselectedChoiceInputs: boolean}) {  
+  formMethods: UseFormReturn<AutoTTRecConfigFormFields, any, undefined>,
+  forceUpdate: boolean,
+  unrenderFormToggle: boolean,
+  isAutoTTRecRunning: boolean,
+  expandUnselectedChoiceInputs: boolean,
+  initialValidateFormOnOpen: boolean,
+  onError: (errors: Object) => Promise<void> | void,
+}) {  
   const renderCounter = useRenderCounter(false, "AutoTTRecConfigFormComponents");
   console.log("Rendering AutoTTRecConfigFormComponents. forceUpdate: ", props.forceUpdate);
 
+  useEffect(() => {
+    if (props.initialValidateFormOnOpen) {
+      console.log("ValidateFormOnOpen formMethods.formState:", props.formMethods.formState);
+      props.formMethods.handleSubmit(() => {}, props.onError)();
+    }
+  }, [props.initialValidateFormOnOpen]);
+
   return (
     <div className="auto-tt-rec-config-form">
       <FormProvider {...props.formMethods}>

src/renderer/components/AutoTTRecManager.tsx

@@ -28,7 +28,8 @@ const AutoTTRecConfigForm_Memo = memo(AutoTTRecConfigForm);
 
 export function AutoTTRecManager(props: {
   initialLoadFormInputsType: LoadFormInputsType,
-  INITIAL_FORM_DATA: AutoTTRecConfigFormFields
+  INITIAL_FORM_DATA: AutoTTRecConfigFormFields,
+  validateFormOnOpen: boolean
 }) {
   const [programStatusHeader, setProgramStatusHeader] = useState<string | JSX.Element>("Ready");
   const [programStatusDetails, setProgramStatusDetails] = useState("");
@@ -102,7 +103,7 @@ export function AutoTTRecManager(props: {
   return (
     <div>
       <AutoTTRecConfigForm_Memo whichUI={true} onSubmitCallback={runAutoTTRec}
-        onAbortCallback={abortAutoTTRec} isAutoTTRecRunning={isAutoTTRecRunning} initialLoadFormInputsType={props.initialLoadFormInputsType} INITIAL_FORM_DATA={props.INITIAL_FORM_DATA}/>
+        onAbortCallback={abortAutoTTRec} isAutoTTRecRunning={isAutoTTRecRunning} initialLoadFormInputsType={props.initialLoadFormInputsType} INITIAL_FORM_DATA={props.INITIAL_FORM_DATA} validateFormOnOpen={props.validateFormOnOpen}/>
       {renderCounter}
       <AutoTTRecStatus programStatusHeader={programStatusHeader}
         programStatusDetails={programStatusDetails}/>

src/renderer/components/LoadFormInputsTypeSelect.tsx

@@ -20,7 +20,7 @@ export function LoadFormInputsTypeSelect(props: {
 
   return (
     <div>
-      <label htmlFor="load-form-inputs-select">When opening the program, pre-fill options from: </label>
+      <label htmlFor="load-form-inputs-select"><strong>When opening the program, pre-fill options from: </strong></label>
       <div id="load-form-inputs-select">
         <label htmlFor="load-form-inputs-select-last-recorded">Last recorded options: </label>
         <input type="radio" id="load-form-inputs-select-last-recorded" name="load-form-inputs-select" value="load-form-inputs-select-last-recorded" checked={loadFormInputsType === "load-form-inputs-select-last-recorded"} onChange={updateLoadFormInputsSelect} disabled={props.disabled}/>

src/renderer/components/ValidateFormOnOpen.tsx

@@ -0,0 +1,25 @@
+
+import React, { useState, useEffect } from "react";
+import { FormProvider, UseFormReturn, useWatch } from "react-hook-form";
+import { AutoTTRecConfigFormFields } from "../auto-tt-rec-form-field-types";
+import { ReadTemplateResult, ReadTemplateStatus, AutoTTRecConfig, LoadFormInputsType } from "../../shared/shared-types";
+
+export function ValidateFormOnOpen(props: {
+  disabled: boolean,
+  initialValue: boolean
+}) {
+  const [validateFormOnOpen, setValidateFormOnOpen] = useState<boolean>(props.initialValue);
+
+  async function updateValidateFormOnOpen(event: React.ChangeEvent<HTMLInputElement>) {
+    let newValue = event.target.checked;
+    setValidateFormOnOpen(newValue);
+    await window.api.setAndSaveValidateFormOnOpen(newValue);
+  }
+
+  return (
+    <div>
+      <label htmlFor="validate-form-on-open">Validate form on opening the program: </label>
+      <input type="checkbox" id="validate-form-on-open" disabled={props.disabled} checked={validateFormOnOpen} onChange={updateValidateFormOnOpen}/>
+    </div>
+  );
+}

src/renderer/window-api.ts

@@ -35,7 +35,8 @@ declare global {
       getLastOpenedTemplateFilename: () => Promise<string>;
       getExpandUnselectedChoiceInputs: () => Promise<boolean>;
       setAndSaveExpandUnselectedChoiceInputs: (expandUnselectedChoiceInputs: boolean) => Promise<void>;
-
+      getValidateFormOnOpen: () => Promise<boolean>;
+      setAndSaveValidateFormOnOpen: (validateFormOnOpen: boolean) => Promise<void>;
     }
   }
 }