goobs-frontend 0.9.23 → 0.9.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.23",
+  "version": "0.9.24",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/Field/Dropdown/MultiSelect/index.tsx

@@ -10,12 +10,42 @@ import FormControl, { FormControlProps } from '@mui/material/FormControl'
 import Select, { SelectChangeEvent } from '@mui/material/Select'
 import Chip from '@mui/material/Chip'
 
+/**
+ * Interface for dropdown options with attributes, matching SearchableDropdown format
+ */
+export interface DropdownOption {
+  value: string
+  attribute1?: string
+  attribute2?: string
+  attribute3?: string
+  attribute4?: string
+  attribute5?: string
+  attribute6?: string
+  uniqueKey?: string
+}
+
 export interface MultiSelectChipProps
   extends Omit<FormControlProps, 'onChange'> {
   label?: React.ReactNode
-  options?: string[]
+  /**
+   * Can be either:
+   * - string[] for simple options
+   * - DropdownOption[] for complex options with attributes
+   */
+  options?: string[] | DropdownOption[]
+  /**
+   * The values of the selected items
+   */
   defaultSelected?: string[]
+  /**
+   * Callback when selection changes - returns array of selected values
+   */
   onChange?: (values: string[]) => void
+  /**
+   * Whether options are complex DropdownOption objects or simple strings
+   * Defaults to auto-detect
+   */
+  complexOptions?: boolean
 
   backgroundcolor?: string
   outlinecolor?: string
@@ -27,6 +57,10 @@ export interface MultiSelectChipProps
 
   shrunklabelposition?: 'onNotch' | 'aboveNotch'
   sx?: SxProps
+  /**
+   * Whether to show option details in the dropdown - only applies to complex options
+   */
+  showOptionDetails?: boolean
 }
 
 const ITEM_HEIGHT = 40
@@ -146,6 +180,8 @@ export default function MultipleSelectChip(props: MultiSelectChipProps) {
     options = [],
     defaultSelected = [],
     onChange,
+    complexOptions: userSpecifiedComplexOptions,
+    showOptionDetails = false,
 
     backgroundcolor,
     outlinecolor,
@@ -163,6 +199,48 @@ export default function MultipleSelectChip(props: MultiSelectChipProps) {
   const [selectedValues, setSelectedValues] =
     React.useState<string[]>(defaultSelected)
 
+  // Auto-detect if options are complex (DropdownOption[]) or simple (string[])
+  const isComplexOptions = React.useMemo(() => {
+    if (userSpecifiedComplexOptions !== undefined) {
+      return userSpecifiedComplexOptions
+    }
+    // Check if options is an array and the first item is an object with a value property
+    return (
+      options.length > 0 &&
+      typeof options[0] !== 'string' &&
+      'value' in options[0]
+    )
+  }, [options, userSpecifiedComplexOptions])
+
+  // Parse options to get display values and lookup
+  const optionsData = React.useMemo(() => {
+    if (!isComplexOptions) {
+      // Simple string options
+      return {
+        displayOptions: options as string[],
+        optionsMap: new Map<string, string>(),
+      }
+    }
+
+    // Complex options with attributes
+    const complexOptions = options as DropdownOption[]
+    // Use DropdownOption type explicitly for the map
+    const optionsMap = new Map<string, DropdownOption>()
+
+    // Create a map of value to original option object for quick lookups
+    complexOptions.forEach(option => {
+      optionsMap.set(option.value, option)
+    })
+
+    // Extract just the values for the dropdown
+    const displayOptions = complexOptions.map(option => option.value)
+
+    return {
+      displayOptions,
+      optionsMap,
+    }
+  }, [options, isComplexOptions])
+
   const hasValue = React.useMemo(
     () => (selectedValues.length > 0).toString(),
     [selectedValues]
@@ -179,6 +257,35 @@ export default function MultipleSelectChip(props: MultiSelectChipProps) {
     }
   }
 
+  // Render menu item text appropriately based on option type
+  const renderMenuItemText = (value: string) => {
+    if (!isComplexOptions) {
+      return value
+    }
+
+    // Cast optionsMap to the correct type with DropdownOption
+    const optionsMap = optionsData.optionsMap as Map<string, DropdownOption>
+    const option = optionsMap.get(value)
+
+    // If no option found in the map, just return the value
+    if (!option) return value
+
+    // Check if we should show details and if attribute1 exists
+    if (!showOptionDetails || typeof option.attribute1 === 'undefined') {
+      return value
+    }
+
+    // If showing details, include attribute1 (typically description/department)
+    return (
+      <Box>
+        <Box>{value}</Box>
+        <Box sx={{ fontSize: '0.8em', color: 'text.secondary' }}>
+          {option.attribute1}
+        </Box>
+      </Box>
+    )
+  }
+
   return (
     <Box
       sx={{
@@ -251,13 +358,13 @@ export default function MultipleSelectChip(props: MultiSelectChipProps) {
           )}
           MenuProps={MenuProps}
         >
-          {options.map(name => (
+          {optionsData.displayOptions.map(value => (
             <MenuItem
-              key={name}
-              value={name}
-              style={getStyles(name, selectedValues, theme)}
+              key={value}
+              value={value}
+              style={getStyles(value, selectedValues, theme)}
             >
-              {name}
+              {renderMenuItemText(value)}
             </MenuItem>
           ))}
         </Select>

package/src/components/ProjectBoard/forms/AddTask/administrator/companyDropdown/index.tsx

@@ -55,10 +55,15 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
 
   // ------------------ FORM STATE ------------------
   const [selectedCompany, setSelectedCompany] = useState('')
+  const [selectedCompanyId, setSelectedCompanyId] = useState('')
   const [selectedSeverity, setSelectedSeverity] = useState('')
+  const [selectedSeverityId, setSelectedSeverityId] = useState('')
   const [selectedQueue, setSelectedQueue] = useState('')
+  const [selectedQueueId, setSelectedQueueId] = useState('')
   const [selectedStatus, setSelectedStatus] = useState('')
+  const [selectedStatusId, setSelectedStatusId] = useState('')
   const [selectedSubStatus, setSelectedSubStatus] = useState('')
+  const [selectedSubStatusId, setSelectedSubStatusId] = useState('')
   const [selectedTopicIds, setSelectedTopicIds] = useState<string[]>([])
   const [selectedArticleIds, setSelectedArticleIds] = useState<string[]>([])
   const [taskTitle, setTaskTitle] = useState('')
@@ -75,15 +80,18 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
   // ------------------ DROPDOWN OPTIONS ------------------
   const companyOptions = rawCompanies.map(c => ({
     value: c.companyName,
+    attribute1: c._id,
   }))
 
   const severityOptions = severityLevels.map(sl => ({
     value: String(sl.severityLevel),
     attribute1: sl.description || '',
+    attribute2: sl._id,
   }))
 
   const statusOptions = statuses.map(s => ({
     value: s.status,
+    attribute1: s._id,
   }))
 
   // Filter substatuses based on the selected status
@@ -114,6 +122,7 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
       return {
         value: s.subStatus,
         attribute1: associatedStatus,
+        attribute2: s._id,
       }
     })
 
@@ -126,6 +135,7 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
             {
               value: 'No substatuses available for this status',
               attribute1: '',
+              attribute2: '',
             },
           ]
         : []
@@ -134,27 +144,19 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
 
   const queueOptions = schedulingQueues.map(q => ({
     value: q.queueName,
+    attribute1: q._id,
   }))
 
   // Effect to reset substatus when status changes
   React.useEffect(() => {
     // Clear the selected substatus when the status changes
     setSelectedSubStatus('')
+    setSelectedSubStatusId('')
   }, [selectedStatus])
 
   // ------------------ SUBMIT HANDLER ------------------
   const handleSubmit = useCallback(() => {
-    // Find the IDs from the selected values
-    const selectedStatusId =
-      statuses.find(s => s.status === selectedStatus)?._id || ''
-    const selectedSubStatusId =
-      subStatuses.find(s => s.subStatus === selectedSubStatus)?._id || ''
-    const selectedQueueId =
-      schedulingQueues.find(q => q.queueName === selectedQueue)?._id || ''
-    const selectedCompanyId =
-      rawCompanies.find(c => c.companyName === selectedCompany)?._id || ''
-
-    console.log('Submitting task with mapped IDs:', {
+    console.log('Submitting task with stored IDs:', {
       statusValue: selectedStatus,
       statusId: selectedStatusId,
       subStatusValue: selectedSubStatus,
@@ -163,14 +165,35 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
       queueId: selectedQueueId,
       companyValue: selectedCompany,
       companyId: selectedCompanyId,
+      severityValue: selectedSeverity,
+      severityId: selectedSeverityId,
     })
 
+    // Validate required fields before submission
+    if (!selectedSeverityId) {
+      console.error('Error: Severity Level is required')
+      alert('Please select a Severity Level')
+      return
+    }
+
+    if (!selectedStatusId) {
+      console.error('Error: Status is required')
+      alert('Please select a Status')
+      return
+    }
+
+    if (!selectedSubStatusId) {
+      console.error('Error: Substatus is required')
+      alert('Please select a Substatus')
+      return
+    }
+
     const newTaskData: Omit<Task, '_id'> = {
       title: taskTitle,
       description: taskDescription,
       topicIds: selectedTopicIds,
       articleIds: selectedArticleIds,
-      severityId: selectedSeverity || '',
+      severityId: selectedSeverityId,
       schedulingQueueId: selectedQueueId,
       statusId: selectedStatusId,
       substatusId: selectedSubStatusId,
@@ -200,17 +223,18 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
     taskDescription,
     selectedTopicIds,
     selectedArticleIds,
-    selectedSeverity,
-    selectedQueue,
+    selectedSeverityId,
+    selectedQueueId,
+    selectedStatusId,
+    selectedSubStatusId,
+    selectedCompanyId,
     selectedStatus,
     selectedSubStatus,
+    selectedQueue,
     selectedCompany,
+    selectedSeverity,
     createdUserId,
     onAdd,
-    statuses,
-    subStatuses,
-    schedulingQueues,
-    rawCompanies,
   ])
 
   // ------------------ RENDER ------------------
@@ -275,6 +299,7 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
             }
             onChange={option => {
               setSelectedCompany(option?.value || '')
+              setSelectedCompanyId(option?.attribute1 || '')
             }}
             placeholder="Select a company"
           />
@@ -301,11 +326,14 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 options={severityOptions}
                 defaultValue={
                   severityOptions.find(
-                    opt => opt.attribute1 === selectedSeverity
+                    opt => opt.attribute2 === selectedSeverityId
                   )?.value
                 }
                 onChange={option => {
-                  setSelectedSeverity(option?.attribute1 || '')
+                  // Store the severity level as display value and the ID properly
+                  setSelectedSeverity(option?.value || '')
+                  setSelectedSeverityId(option?.attribute2 || '')
+                  console.log('Selected severity ID:', option?.attribute2)
                 }}
                 placeholder="Select severity level"
               />
@@ -313,17 +341,19 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 label="Status"
                 options={statusOptions}
                 defaultValue={
-                  statusOptions.find(opt => opt.value === selectedStatus)?.value
+                  statusOptions.find(opt => opt.attribute1 === selectedStatusId)
+                    ?.value
                 }
                 onChange={option => {
                   const newStatus = option?.value || ''
                   console.log('Status selected:', newStatus)
 
-                  // Find the status ID for the selected status
-                  const statusObj = statuses.find(s => s.status === newStatus)
-                  console.log('Selected status object:', statusObj)
-
                   setSelectedStatus(newStatus)
+                  setSelectedStatusId(option?.attribute1 || '')
+                  console.log(
+                    'Selected status ID from attribute1:',
+                    option?.attribute1
+                  )
                 }}
                 placeholder="Select status"
               />
@@ -342,10 +372,13 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 label="Associated Product (Queue)"
                 options={queueOptions}
                 defaultValue={
-                  queueOptions.find(opt => opt.value === selectedQueue)?.value
+                  queueOptions.find(opt => opt.attribute1 === selectedQueueId)
+                    ?.value
                 }
                 onChange={option => {
                   setSelectedQueue(option?.value || '')
+                  setSelectedQueueId(option?.attribute1 || '')
+                  console.log('Selected queue ID:', option?.attribute1)
                 }}
                 placeholder="Select product queue"
               />
@@ -354,11 +387,13 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
                 options={finalSubStatusOptions}
                 defaultValue={
                   finalSubStatusOptions.find(
-                    opt => opt.value === selectedSubStatus
+                    opt => opt.attribute2 === selectedSubStatusId
                   )?.value
                 }
                 onChange={option => {
                   setSelectedSubStatus(option?.value || '')
+                  setSelectedSubStatusId(option?.attribute2 || '')
+                  console.log('Selected substatus ID:', option?.attribute2)
                 }}
                 placeholder={
                   selectedStatus
@@ -375,87 +410,80 @@ const AdministratorAddTaskCompanyDropdown: React.FC<
           {React.useMemo(() => {
             console.log('Topics being mapped for dropdown:', topics)
 
-            // Create mappings for topic names to IDs and back
-            const topicNameToId: Record<string, string> = {}
-            const topicIdToName: Record<string, string> = {}
+            // Create complex options for topics with _id as attribute1
+            const topicOptions = topics.map(t => ({
+              value: t.topic || `Topic ${t._id}`,
+              attribute1: t._id, // Store ID in attribute1
+            }))
 
-            topics.forEach(t => {
-              const displayName = t.topic || `Topic ${t._id}`
-              topicNameToId[displayName] = t._id
-              topicIdToName[t._id] = displayName
-            })
-
-            console.log('Topic mappings created:', {
-              topicNameToId,
-              topicIdToName,
-            })
-
-            // Create user-friendly display options for topics
-            const topicOptions = topics.map(t => t.topic || `Topic ${t._id}`)
+            console.log('Topic options created:', topicOptions)
 
             // Translate selected IDs to names for display
-            const selectedTopicNames = selectedTopicIds.map(
-              id => topicIdToName[id] || id
-            )
+            const selectedTopicValues = selectedTopicIds.map(id => {
+              const topic = topics.find(t => t._id === id)
+              return topic ? topic.topic || `Topic ${topic._id}` : id
+            })
 
             return (
               <>
-                {/* Topics multi-select – using topic names with ID mapping */}
+                {/* Topics multi-select – using complex options with IDs in attribute1 */}
                 <MultiSelect
                   label="Topics"
                   options={topicOptions}
-                  defaultSelected={selectedTopicNames}
-                  onChange={selectedNames => {
-                    console.log('Selected topic names:', selectedNames)
+                  defaultSelected={selectedTopicValues}
+                  onChange={selectedValues => {
+                    console.log('Selected topic values:', selectedValues)
+
+                    // Find the selected topics and get their IDs
+                    const newSelectedIds = selectedValues.map(value => {
+                      const matchingTopic = topicOptions.find(
+                        opt => opt.value === value
+                      )
+                      return matchingTopic?.attribute1 || value // Fall back to value if no match
+                    })
 
-                    // Map the selected names back to IDs
-                    const newSelectedIds = selectedNames.map(
-                      name => topicNameToId[name] || name // Fallback to name if mapping not found
-                    )
                     console.log('Mapped to topic IDs:', newSelectedIds)
-
                     setSelectedTopicIds(newSelectedIds)
                   }}
+                  complexOptions={true} // Explicitly set to use complex options
                 />
               </>
             )
           }, [topics, selectedTopicIds])}
 
-          {/* Knowledgebase Articles multi-select – using article titles now instead of IDs */}
+          {/* Knowledgebase Articles multi-select – using article titles with IDs in attribute1 */}
           {React.useMemo(() => {
-            // Create mappings for article titles to IDs and back
-            const articleTitleToId: Record<string, string> = {}
-            const articleIdToTitle: Record<string, string> = {}
-
-            knowledgebaseArticles.forEach(a => {
-              const title = a.articleTitle || `Article ${a._id}`
-              articleTitleToId[title] = a._id
-              articleIdToTitle[a._id] = title
-            })
-
-            // Create user-friendly display options for articles
-            const articleOptions = knowledgebaseArticles.map(
-              a => a.articleTitle || `Article ${a._id}`
-            )
+            // Create complex options with article IDs
+            const articleOptions = knowledgebaseArticles.map(a => ({
+              value: a.articleTitle || `Article ${a._id}`,
+              attribute1: a._id, // Store ID in attribute1
+            }))
 
             // Translate selected IDs to titles for display
-            const selectedArticleTitles = selectedArticleIds.map(
-              id => articleIdToTitle[id] || id
-            )
+            const selectedArticleValues = selectedArticleIds.map(id => {
+              const article = knowledgebaseArticles.find(a => a._id === id)
+              return article
+                ? article.articleTitle || `Article ${article._id}`
+                : id
+            })
 
             return (
               <MultiSelect
                 label="Knowledgebase Articles"
                 options={articleOptions}
-                defaultSelected={selectedArticleTitles}
-                onChange={selectedTitles => {
-                  // Map the selected titles back to IDs
-                  const newSelectedIds = selectedTitles.map(
-                    title => articleTitleToId[title] || title // Fallback to title if mapping not found
-                  )
+                defaultSelected={selectedArticleValues}
+                onChange={selectedValues => {
+                  // Map the selected values to IDs using attribute1
+                  const newSelectedIds = selectedValues.map(value => {
+                    const matchingArticle = articleOptions.find(
+                      opt => opt.value === value
+                    )
+                    return matchingArticle?.attribute1 || value // Fall back to value if no match
+                  })
 
                   setSelectedArticleIds(newSelectedIds)
                 }}
+                complexOptions={true} // Explicitly set to use complex options
               />
             )
           }, [knowledgebaseArticles, selectedArticleIds])}