adding in descriptor setting functions

Author: Mletter1

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -32,6 +32,8 @@ export interface CCAWizardState {
   attributes: Attribute[];
   scaleInputs: boolean;
   marking: string | undefined;
+  description: string | undefined;
+  name: string | undefined;
 }
 const initialState: CCAWizardState = {
   tab: TabNames.CCA_DATA_WIZARD_SELECTION_TAB,
@@ -42,6 +44,8 @@ const initialState: CCAWizardState = {
   attributes: [],
   scaleInputs: false,
   marking: undefined,
+  description: undefined,
+  name: undefined,
 };
 export const cCAWizardSlice = createSlice({
   name: "cCAWizard",
@@ -71,6 +75,12 @@ export const cCAWizardSlice = createSlice({
     setMarking: (state, action: PayloadAction<string>) => {
       state.marking = action.payload;
     },
+    setDescription: (state, action: PayloadAction<string>) => {
+      state.description = action.payload;
+    },
+    setName: (state, action: PayloadAction<string>) => {
+      state.name = action.payload;
+    },
     resetCCAWizard: () => initialState,
   },
 });
@@ -85,7 +95,9 @@ export const {
   setFileUploaded,
   setAttributes,
   setScaleInputs,
-  setMarking
+  setMarking,
+  setDescription,
+  setName,
 } = cCAWizardSlice.actions;
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
@@ -96,5 +108,7 @@ export const selectMid = (state: RootState) => state.cCAWizard.mid;
 export const selectAttributes = (state: RootState) => state.cCAWizard.attributes;
 export const selectScaleInputs = (state: RootState) => state.cCAWizard.scaleInputs;
 export const selectMarking = (state: RootState) => state.cCAWizard.marking;
+export const selectDescription = (state: RootState) => state.cCAWizard.marking;
+export const selectName = (state: RootState) => state.cCAWizard.marking;
 
 export default cCAWizardSlice.reducer;

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCALocalBrowserTab.tsx

@@ -4,8 +4,6 @@
 import * as React from "react";
 import { SlycatLocalBrowser } from "../slycat-local-browser/SlycatLocalBrowser";
 import { useSetUploadStatus } from "../CCAWizardUtils";
-import { useAppSelector } from "../wizard-store/hooks";
-import { selectFileUploaded } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCALocalBrowserTab = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;

web-server/plugins/slycat-cca/js/components/wizard-tabs/CCAModelCreation.tsx

@@ -4,7 +4,7 @@
 import * as React from "react";
 import selectable_markings from "js/slycat-selectable-markings";
 import { useAppDispatch, useAppSelector } from "../wizard-store/hooks";
-import { selectMarking, setMarking } from "../wizard-store/reducers/cCAWizardSlice";
+import { selectMarking, setDescription, setMarking, setName } from "../wizard-store/reducers/cCAWizardSlice";
 
 export const CCAModelCreation = (props: { hidden?: boolean }) => {
   const { hidden = false } = props;
@@ -23,20 +23,35 @@ export const CCAModelCreation = (props: { hidden?: boolean }) => {
       dispatch(setMarking(event.target?.value));
     }
   };
+  const onDescriptionChangeHandler = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (event.target?.value) {
+      dispatch(setDescription(event.target?.value));
+    }
+  };
+  const onNameChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target?.value) {
+      dispatch(setName(event.target?.value));
+    }
+  };
   return (
     <div hidden={hidden}>
       <form data-bind="submit: name_model" id="new-cca-name-model-form" noValidate>
         <div className="mb-3 row required">
           <label className="col-sm-2 col-form-label">Name</label>
           <div className="col-sm-10">
-            <input id="slycat-model-name" className="form-control" type="text" required />
+            <input id="slycat-model-name" onChange={onNameChangeHandler} className="form-control" type="text" required />
             <div className="invalid-feedback">Please enter a model name.</div>
           </div>
         </div>
         <div className="mb-3 row">
           <label className="col-sm-2 col-form-label">Description</label>
           <div className="col-sm-10">
-            <textarea id="slycat-model-description" className="form-control" rows={5}></textarea>
+            <textarea
+              id="slycat-model-description"
+              onChange={onDescriptionChangeHandler}
+              className="form-control"
+              rows={5}
+            ></textarea>
           </div>
         </div>
         <div className="mb-3 row">