Merge pull request #40 from FRC2713/inlineEdit

Multi Select and Auto Increment
FRC2713 · Apr 2, 2024 · df5731c · df5731c
2 parents 703fc62 + 47c0ef6
commit df5731c
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 33 deletions.
diff --git a/config/2024/config.json b/config/2024/config.json
@@ -16,7 +16,9 @@
           "title": "Match Number",
           "type": "number",
           "required": true,
-          "code": "matchNumber"
+          "code": "matchNumber",
+          "preserveDataOnReset": true,
+          "autoIncrementOnReset": true
         },
         {
           "title": "Robot",
@@ -59,29 +61,6 @@
     {
       "name": "Autonomous",
       "fields": [
-        {
-          "title": "Mobility?",
-          "type": "boolean",
-          "defaultValue": false,
-          "required": false,
-          "code": "Mved"
-        },
-        {
-          "code": "auamp",
-          "title": "Amp Scored",
-          "type": "counter",
-          "defaultValue": 0,
-          "min": 0,
-          "required": false
-        },
-        {
-          "code": "auampm",
-          "title": "Amp Missed",
-          "type": "counter",
-          "defaultValue": 0,
-          "min": 0,
-          "required": false
-        },
         {
           "code": "ausc",
           "title": "Speaker Scored",
@@ -99,12 +78,20 @@
           "required": false
         },
         {
-          "code": "auf",
-          "title": "Auto Foul",
-          "type": "counter",
-          "defaultValue": 0,
-          "min": 0,
-          "required": false
+          "code": "a_gp_collect",
+          "title": "Game Pieces Collected",
+          "type": "select",
+          "multiSelect": true,
+          "choices": {
+            "1": "Preload",
+            "2": "Floor 1",
+            "3": "Floor 2",
+            "4": "Floor 3",
+            "5": "Floor 4",
+            "6": "Floor 5",
+            "7": "Floor 6",
+            "8": "Floor 7"
+          }
         }
       ]
     },

diff --git a/config/schema.json b/config/schema.json
@@ -79,6 +79,12 @@
         },
         "max": {
           "type": "number"
+        },
+        "multiSelect": {
+          "type": "boolean"
+        },
+        "autoIncrementOnReset": {
+          "type": "boolean"
         }
       },
       "required": ["title", "type", "required", "code"],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
     "@monaco-editor/react": "^4.6.0",
+    "clsx": "^2.1.0",
     "immer": "^10.0.3",
     "lodash": "^4.17.21",
     "next-themes": "^0.2.1",

diff --git a/src/components/inputs/BaseInputProps.ts b/src/components/inputs/BaseInputProps.ts
@@ -27,6 +27,7 @@ export interface InputProps {
   defaultValue?: any;
   min?: number;
   max?: number;
+  autoIncrementOnReset?: boolean;
 }
 
 export type InputTypes =

diff --git a/src/components/inputs/NumberInput.tsx b/src/components/inputs/NumberInput.tsx
@@ -11,7 +11,7 @@ export interface NumberInputProps extends BaseInputProps {
 export default function NumberInput(data: NumberInputProps) {
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
     e.preventDefault();
-    data.onChange(e.currentTarget.value);
+    data.onChange(Number(e.currentTarget.value));
   }
 
   return (

diff --git a/src/components/inputs/SelectInput.tsx b/src/components/inputs/SelectInput.tsx
@@ -1,23 +1,37 @@
+import clsx from 'clsx';
 import React from 'react';
 import BaseInputProps from './BaseInputProps';
 
 export interface SelectInputProps extends BaseInputProps {
   options: Record<string, string>;
+  multiSelect?: boolean;
   defaultValue: string;
 }
 
 export default function SelectInput(data: SelectInputProps) {
   function handleSelect(evt: React.ChangeEvent<HTMLSelectElement>) {
-    data.onChange(evt.currentTarget.value);
     evt.preventDefault();
+    if (!data.multiSelect) {
+      data.onChange(evt.currentTarget.value);
+    } else {
+      const selectedOptions = Array.from(evt.currentTarget.selectedOptions).map(
+        o => o.value,
+      );
+      data.onChange(selectedOptions);
+    }
   }
   return (
     <select
-      className="w-full rounded bg-white px-4 py-2 dark:bg-gray-700 dark:text-white"
+      className={clsx(
+        'w-full rounded bg-white px-4 py-2 dark:bg-gray-700 dark:text-white ',
+        data.multiSelect && 'overflow-hidden',
+      )}
+      size={data.multiSelect ? Object.keys(data.options).length : 1}
       name={data.title}
       id={data.title}
       onChange={handleSelect}
       value={data.value}
+      multiple={data.multiSelect}
     >
       {Object.keys(data.options).map(o => {
         return (

diff --git a/src/store/store.ts b/src/store/store.ts
@@ -75,6 +75,11 @@ export function resetSections() {
         .forEach(f => {
           if (!f.preserveDataOnReset) {
             f.value = f.defaultValue;
+          } else if (
+            (f.type === 'number' || f.type === 'counter') &&
+            f.autoIncrementOnReset
+          ) {
+            f.value = f.value + 1;
           }
         }),
     ),