settings for the scripthub path and scripthub cards for the script arguments

package.json

@@ -1,7 +1,7 @@
 {
   "name": "insomnia-script-hub",
   "private": true,
-  "version": "0.0.240",
+  "version": "0.0.763",
   "main": "dist/index.js",
   "insomnia": {
     "name": "script-hub",
@@ -31,11 +31,14 @@
     }
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^7.1.1",
     "prop-types": "^15.5.7",
-    "react-json-tree": "^0.19.0",
-    "react-json-view-lite": "^1.4.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-json-tree": "^0.19.0",
+    "react-json-view-lite": "^1.4.0"
   },
   "devDependencies": {
     "@seald-io/nedb": "^4.0.4",
@@ -50,10 +53,10 @@
     "eslint": "^8.44.0",
     "eslint-plugin-react": "^7.32.2",
     "npm-watch": "^0.11.0",
+    "react-resizable-panels": "^2.0.20",
     "request": "^2.88.0",
     "rimraf": "^5.0.1",
     "sass": "^1.63.6",
-    "semver": "^7.3.8",
-    "react-resizable-panels": "^2.0.20"
+    "semver": "^7.3.8"
   }
 }

src/app/fragments/checkbox/checkbox.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+const CheckboxComponent = (props: { title: string; updateData: any; }) => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (event: { target: { name: string; checked: boolean | ((prevState: boolean) => boolean); }; }) => {
+    setIsChecked(event.target.checked);
+    props.updateData({name: event.target.name, value: event.target.checked});
+  };
+
+  return (
+    <div>
+      <label>
+        <input
+          type="checkbox"
+          checked={isChecked}
+          name={props.title}
+          onChange={handleCheckboxChange}
+        />
+        {props.title}
+      </label>
+    </div>
+  );
+}
+
+export default CheckboxComponent;

src/app/fragments/input/input.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { InputClass } from "../../model/input-class";
+
+const InputImpl = (props: { id: React.Key, title: string, name: string, value: string }) => {
+    return (
+        <div className="label-and-input">
+            <label htmlFor={props.name} >{props.title}</label>
+            <input
+                key={props.id}
+                name={props.name}
+                value={props.value}
+            />
+        </div>
+    )
+}
+
+export const Input = InputImpl;
+
+const InputUpdateImpl = (props: { id: React.Key, title: string, name: string, updateInput: (arg: any) => React.MouseEventHandler<HTMLInputElement> }) => {
+    return (
+        <>
+            <label htmlFor={props.name}> {props.title} </label>
+            <input
+                key={props.id}
+                id={props.name}
+                name={props.name}
+                onChange={props.updateInput}
+            />
+        </>
+    )
+}
+
+export const InputUpdate = (props: { inputClass: InputClass, updateInput: any }) => {
+    return (
+        <>
+            <InputUpdateImpl updateInput={props.updateInput} {...props.inputClass} />
+        </>
+    )
+}

src/app/model/argument-model.ts

@@ -0,0 +1,4 @@
+interface ArgumentModel {
+    title: string;
+    value: string;
+}

src/app/model/card-data-model.ts

@@ -0,0 +1,7 @@
+interface CardData {
+    id: number;
+    title: string;
+    selectedOption: string;
+    options: Data[];
+    filePath: string;
+}

src/app/model/data-list.ts

@@ -1,8 +1,11 @@
 interface DataList {
     types: Data[];
+    type: string;
 }
 
 interface Data {
     type: string;
     name: string;
+    cmdList?: any[];
+    types?: string[];
 }

src/app/model/envs-data.ts

@@ -0,0 +1,20 @@
+interface EnvsData {
+    envs: Env[];
+    additionalCmd: AdditionalCmd[];
+}
+
+interface Env {
+    type: string;
+    envVars: EnvVar[];
+}
+
+interface EnvVar {
+    key: string;
+    value: string;
+}
+
+interface AdditionalCmd {
+    type: string;
+    value: string;
+    cmd: string;
+}

src/app/model/input-class.ts

@@ -0,0 +1,6 @@
+export class InputClass {
+    id!: number;
+    title!: string;
+    name!: string;
+    value!: string;
+}

src/app/model/input-model.ts

@@ -0,0 +1,10 @@
+interface InputList {
+    inputList: Input[];
+}
+
+interface Input {
+    id: React.Key;
+    title: string;
+    name: string;
+    value: string;
+}

src/app/model/settings-model.ts

@@ -0,0 +1,3 @@
+interface SettingsModel {
+    scriptHubPath: string;
+}

src/app/scripthub/additional-cmd-component.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { firstElement, getSettings, isEmpty, isListEmpty, readFileEnvs } from '../utils/Utils';
+import CheckboxComponent from '../fragments/checkbox/checkbox';
+
+const emptyCardData: CardData = { id: -1, title: '', selectedOption: '', options: [], filePath: '' };
+const emptyListCardData: CardData[] = [emptyCardData];
+const settingsFilename: string = 'settings.json';
+const scriptHubPath = getSettings(settingsFilename).scriptHubPath;
+
+const AdditionalCmdComponent = (props: { operation: CardData; selectedProject: string; updateData: any; }) => {
+  const [cards, setCards] = useState<CardData[]>(emptyListCardData);
+  const isFirstRender = useRef(true);
+
+  useEffect(() => {
+    setCards(prev => prev.filter(operation => operation.id !== -1));
+  }, [])
+
+  useEffect(() => {
+    props.updateData([]);
+  }, [props.operation])
+
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (cards.length >= 5) {
+      return;
+    }
+
+    let newElem: CardData;
+    if (isListEmpty(props.operation.options) || validateCards()) {
+      return;
+    }
+
+    const operationOptionElem = firstElement(props.operation.options);
+    console.log("0--------------->");
+    console.log(operationOptionElem.cmdList);
+    if (!isListEmpty(operationOptionElem.cmdList)) {
+      newElem = buildCardOfEnvType(operationOptionElem.cmdList);
+    } else {
+      newElem = emptyCardData;
+    }
+
+    console.log("1--------------->");
+    console.log(newElem);
+    newElem.options.push(...buildBooleanlist(operationOptionElem.cmdList));
+    /*if (!isListEmpty(operationOptionElem.cmdList) && operationOptionElem.cmdList.filter((cmd: { name: any; type: any; }) => cmd.name === "boolean")) {
+      const id = cards.length;
+      const title = "booleanList";
+      const selectedOption = "booleanList";
+      const options: Data[] = [];
+      const filePath = "";
+      newElem = { id: id, title: title, selectedOption: selectedOption, options: options, filePath: filePath };
+    }*/
+
+    if (newElem.id === -1 && newElem.options.length > 0) {
+      const id = cards.length;
+      const title = "booleanList";
+      const selectedOption = "booleanList";
+      const filePath = "";
+      newElem = { id: id, title: title, selectedOption: selectedOption, options: newElem.options, filePath: filePath };
+    }
+
+    if (newElem.id === -1) {
+      return;
+    }
+
+    console.log("2--------------->");
+    console.log(newElem);
+
+    setCards(prev => [
+      ...prev,
+      newElem
+    ]);
+  }, [cards, props.selectedProject]);
+
+  const validateCards = (): boolean => {
+    return cards.filter(card => card.title === "additionalCmd").length === 1 ||
+      cards.filter(card => card.title === "booleanList").length === 1;
+  }
+
+  const buildCardOfEnvType = (cmdList: any): CardData => {
+    const cmd: { name: any; type: any; } = firstElement(cmdList.filter((cmd: { name: any; type: any; }) => cmd.name === "additionalCmd"));
+
+    if (cmd === null) {
+      return emptyCardData;
+    }
+
+    const id = cards.length;
+    const title = cmd.name;
+    const selectedOption = cmd.type;
+    const options: Data[] = listOfAllAdditionalCmd();
+    const filePath = "";
+
+    if (isListEmpty(options)) {
+      return emptyCardData;
+    }
+
+    return { id: id, title: title, selectedOption: selectedOption, options: options, filePath: filePath };
+  };
+
+  const handleSelectChange = (data: any) => {
+    props.updateData({ id: 0, title: data.name, selectedOption: data.value, options: [], filePath: "" });
+  };
+
+  const listOfAllAdditionalCmd = (): Data[] => {
+    if (isEmpty(props.selectedProject)) {
+      return [];
+    }
+
+    const settings = readFileEnvs(`${scriptHubPath}/projects/${props.selectedProject}`);
+    const envList: Data[] = [];
+
+    settings.additionalCmd?.filter(arg => arg.type === "arg").forEach(env => {
+      envList.push({
+        type: env.value,
+        name: env.value
+      });
+    });
+    return envList;
+  }
+
+  const buildBooleanlist = (cmdList: any) => {
+    const cmdBoolean = cmdList.filter((cmd: { name: any; type: any; }) => cmd.type === "boolean");
+    if (isListEmpty(cmdBoolean)) {
+      return [];
+    }
+
+    const envList: Data[] = [];
+    cmdBoolean.forEach((env: { type: any; name: any; }) => {
+      envList.push({
+        type: env.type,
+        name: env.name
+      });
+    });
+
+    return envList;
+  }
+
+  return (
+    <div style={{ display: 'flex', gap: '1rem' }}>
+      {!isListEmpty(cards) && firstElement(cards) !== null && !isListEmpty(firstElement(cards).options) && firstElement(cards).options.map((cmd: { name: string; }) => (
+        <CheckboxComponent key={cmd.name} title={cmd.name} updateData={handleSelectChange} />
+      ))}
+    </div>
+  );
+};
+
+export default AdditionalCmdComponent;