Merge pull request #177 from SingularityNET-Archive:development

feat: Enhance SelectTags component with debounced input handling and new option creation; update meeting summary state with username

Author: Andre-Diamond

components/SelectTags.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { useMyVariable } from '../context/MyVariableContext';
 import { debounce } from 'lodash';
 import CreatableSelect from 'react-select/creatable';
-import { saveNewTags } from '../utils/saveNewTags'
+import { saveNewTags } from '../utils/saveNewTags';
 
 interface SelectTagsProps {
   onSelect: (names: string) => void;
@@ -11,39 +11,63 @@ interface SelectTagsProps {
 }
 
 const SelectTags: React.FC<SelectTagsProps> = ({ onSelect, initialValue, type }) => {
-  let initialOptions = initialValue ? initialValue.split(", ").map((val) => ({ label: val, value: val })) : [];
+  const initialOptions = initialValue 
+    ? initialValue.split(", ").map(val => ({ label: val, value: val })) 
+    : [];
   const [selectedLabels, setSelectedLabels] = React.useState(initialOptions);
   const { myVariable } = useMyVariable();
-  const options = myVariable.tags[`${type}`] ||  [
-    { value: 'chocolate', label: 'Chocolate' },
-    { value: 'strawberry', label: 'Strawberry' },
-    { value: 'vanilla', label: 'Vanilla' }
-  ];
-  
+  const options =
+    myVariable.tags[type] ||
+    [
+      { value: 'chocolate', label: 'Chocolate' },
+      { value: 'strawberry', label: 'Strawberry' },
+      { value: 'vanilla', label: 'Vanilla' }
+    ];
+
   React.useEffect(() => {
-    let initialOptions = initialValue ? initialValue.split(", ").map((val) => ({ label: val, value: val })) : [];
-    setSelectedLabels(initialOptions);
+    const initialOpts = initialValue 
+      ? initialValue.split(", ").map(val => ({ label: val, value: val })) 
+      : [];
+    setSelectedLabels(initialOpts);
   }, [initialValue]);
 
+  // Debounced update that saves tags
   const debouncedHandleInputChange = useMemo(
-    () => debounce(async (selected: any) => {
-      setSelectedLabels(selected);  // Update local state
-      const labs: string[] = selected.map((item: any) => item.label);
-      const status = await saveNewTags(labs, type);
-      onSelect(labs.join(", ")); // Update parent component's state
-    }, 1000),
+    () =>
+      debounce(async (selected: any) => {
+        setSelectedLabels(selected); // Update local state
+        const labs: string[] = selected.map((item: any) => item.label);
+        await saveNewTags(labs, type);
+        onSelect(labs.join(", ")); // Update parent component's state
+      }, 1000),
     [onSelect, type]
   );
-  
+
+  // Handle creation of new option (e.g., when user types comma separated tags)
+  const handleCreateOption = (inputValue: string) => {
+    // Split the input on commas, trim whitespace and remove empty strings
+    const newTags = inputValue
+      .split(',')
+      .map(tag => tag.trim())
+      .filter(tag => tag);
+    // Map each tag to the option format
+    const newOptions = newTags.map(tag => ({ label: tag, value: tag }));
+    // Merge with the existing selected labels
+    const updatedSelected = [...selectedLabels, ...newOptions];
+    setSelectedLabels(updatedSelected);
+    debouncedHandleInputChange(updatedSelected);
+  };
+
   return (
     <div title="When you type, hit enter to add item and start typing again to add another or select from the dropdown">
-       <CreatableSelect
+      <CreatableSelect
         isMulti
         options={options}
         value={selectedLabels}
         onChange={(selected) => {
           debouncedHandleInputChange(selected || []);
         }}
+        onCreateOption={handleCreateOption}
         styles={{
           control: (baseStyles, state) => ({
             ...baseStyles,

pages/submit-meeting-summary/index.tsx

@@ -217,15 +217,18 @@ const SubmitMeetingSummary: NextPage = () => {
   async function handleSelectChange2(e: any) {
     const newSelectedMeetingId = e.target.value;
     setSelectedMeetingId(newSelectedMeetingId);
-
+  
     const selectedSummary = meetings.find((m: any) => m.meeting_id === newSelectedMeetingId);
     if (selectedSummary) {
       setMyVariable((prev) => ({
         ...prev,
-        summary: selectedSummary
+        summary: {
+          ...selectedSummary,
+          username: prev.currentUser, 
+        }
       }));
     }
-  }
+  }  
 
   // -----------------------------------------
   // Add New Workgroup logic
@@ -715,6 +718,27 @@ const SubmitMeetingSummary: NextPage = () => {
                 </select>
               </div>
             )}
+            {false && workgroups.length > 0 && meetings?.length > 0 && myVariable.roles?.isAdmin && (
+              <>
+                <div className={styles['column-flex']}>
+                  <label className={styles['form-label']} htmlFor="">Select previous meeting data</label>
+                  <select
+                    name="" id=""
+                    className={styles.select}
+                    value={selectedMeetingId} onChange={handleSelectChange2}
+                    title="Defaults to latest meeting, only change this when you want to use a previous meeting as template">
+                    {meetings.map((meeting: any) => (
+                      <option
+                        style={{ color: meeting.confirmed ? 'lightgreen' : 'black' }}
+                        key={`${meeting.meeting_id}-${meeting.updated_at}`}
+                        value={meeting.meeting_id}>
+                        {formatDate(meeting.date)} {meeting.username} {meeting.confirmed ? 'Archived' : ''}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </>
+            )}
 
             {showNewWorkgroupInput && (
               <>