wip

pkgs/clan-app/ui/src/components/Form/MachineTags.tsx

@@ -32,7 +32,7 @@ const uniqueOptions = (options: MachineTag[]) => {
   const record: Record<string, MachineTag> = {};
   options.forEach((option) => {
     // we want to preserve the first one we encounter
-    // this allows us to prefix the default All tag and set a disabled status later on
+    // this allows us to prefix the default 'all' tag
     record[option.value] = record[option.value] || option;
   });
   return Object.values(record);
@@ -48,6 +48,7 @@ const sortedOptions = (options: MachineTag[]) => {
 const sortedAndUniqueOptions = (options: MachineTag[]) =>
   sortedOptions(uniqueOptions(options));
 
+// customises how each option is displayed in the dropdown
 const ItemComponent = (props: { item: CollectionNode<MachineTag> }) => {
   return (
     <Combobox.Item item={props.item} class="item">
@@ -64,29 +65,22 @@ const ItemComponent = (props: { item: CollectionNode<MachineTag> }) => {
 };
 
 export const MachineTags = (props: MachineTagsProps) => {
-  // convert default value into objects
+  // convert default value string[] into MachineTag[]
   const defaultValue = (props.defaultValue || []).map((value) => ({ value }));
 
+  // controlled values for selected and available options
   const [selectedOptions, setSelectedOptions] = createSignal<MachineTag[]>(
     sortedAndUniqueOptions([...staticOptions, ...defaultValue]),
   );
 
+  // todo this should be the superset of tags used across the entire clan and be passed in via a prop
   const [availableOptions, setAvailableOptions] = createSignal<MachineTag[]>(
     sortedAndUniqueOptions([...staticOptions, ...defaultValue]),
   );
 
-  const _setSelectedOptions = (options: MachineTag[] | null) => {
-    console.log("onChange called", options)
-    if (options === null) setSelectedOptions([...staticOptions]);
 
-    setSelectedOptions(
-      sortedAndUniqueOptions([...staticOptions, ...(options || [])])
-    );
-  };
-
-  const addSelectedOption = (option: MachineTag) => {
-    console.log("Adding option", option)
-    // ensure the new selected option exists in the list of available options
+  const addOptionAndSelect = (option: MachineTag) => {
+    // add to the list of available options first
     setAvailableOptions(sortedAndUniqueOptions([...availableOptions(), option]));
 
     // update the selected options
@@ -99,14 +93,6 @@ export const MachineTags = (props: MachineTagsProps) => {
     );
   };
 
-  const align = () => {
-    if (props.readOnly) {
-      return "center";
-    } else {
-      return props.orientation === "horizontal" ? "start" : "center";
-    }
-  };
-
   const onKeyDown = (event: KeyboardEvent) => {
     // react when enter is pressed inside of the text input
     if (event.key === "Enter") {
@@ -118,13 +104,21 @@ export const MachineTags = (props: MachineTagsProps) => {
       if (input.value === "") return;
 
       // add the input value to the selected options
-      addSelectedOption({ value: input.value });
+      addOptionAndSelect({ value: input.value });
 
       // reset the input value
       input.value = "";
     }
   };
 
+  const align = () => {
+    if (props.readOnly) {
+      return "center";
+    } else {
+      return props.orientation === "horizontal" ? "start" : "center";
+    }
+  };
+
   return (
     <Combobox<MachineTag>
       multiple
@@ -140,7 +134,6 @@ export const MachineTags = (props: MachineTagsProps) => {
       optionLabel="value"
       optionDisabled="disabled"
       itemComponent={ItemComponent}
-      onChange={_setSelectedOptions}
       placeholder="Enter a tag name"
     >
       <Orienter orientation={props.orientation} align={align()}>