nofusscomputing · jon-nfc · Nov 20, 2024 · Nov 16, 2024 · Nov 16, 2024 · Nov 20, 2024
diff --git a/src/components/IconLoader.jsx b/src/components/IconLoader.jsx
@@ -45,6 +45,11 @@ import ServiceIcon from "./icons/ServiceIcon";
 import SettingsIcon from "./icons/SettingsIcon";
 import ProjectIcon from "./icons/ProjectIcon";
 import OrganizationIcon from "./icons/OrganizationIcon";
+import OperatingSystem from "./icons/OperatingSystem";
+import TicketRequest from "./icons/TicketRequest";
+import TicketIncident from "./icons/TicketIncident";
+import TicketProblem from "./icons/TicketProblem";
+import TicketChange from "./icons/TicketChange";
 
 
 const icon_components = {
@@ -75,15 +80,20 @@ const icon_components = {
     navdoubleleft: NavDoubleLeftIcon,
     navright: NavRightIcon,
     notification: NotificationIcon,
+    operating_system: OperatingSystem,
     organization: OrganizationIcon,
     project: ProjectIcon,
     service: ServiceIcon,
     software: SoftwareIcon,
     settings: SettingsIcon,
     task: TaskIcon,
+    ticket_change: TicketChange,
+    ticket_incident: TicketIncident,
+    ticket_problem: TicketProblem,
     ticket_related_blocks: RelatedTicketBlocks,
     ticket_related_blocked_by: RelatedTicketBlocked,
     ticket_related_related: RelatedTicketRelated,
+    ticket_request: TicketRequest,
     ticket_status_accepted: StatusAcceptedIcon,
     ticket_status_approvals: StatusApprovalsIcon,
     ticket_status_assigned: StatusAssignedIcon,

diff --git a/src/components/form/Select.jsx b/src/components/form/Select.jsx
@@ -8,11 +8,14 @@ const Select = ({
 }) => {
 
 
-    if( value === null ) {
+    if( value === null) {
         value = ''
     }
 
-    if( typeof(value) == 'object') {
+    if(
+        typeof(value) == 'object'
+        && ! Array.isArray(value)
+    ) {
         value = value.id
     }
 
@@ -33,11 +36,40 @@ const Select = ({
 
                     if( value !== null ) {
 
-                        if( choice.value == value ) {
+                        if( Array.isArray(value) ) {
 
-                            selected = ( choice.value === value )
+                            for(let item of value ) {
+
+                                if( typeof(item) == 'object' ) {
+
+                                    if( choice.value == item.id ) {
+
+                                        selected = ( choice.value == item.id )
+
+                                    }
+
+                                } else {
+
+                                    if( choice.value == Number(item) ) {
+
+                                        selected = ( choice.value == Number(item) )
+
+                                    }
+
+                                }
+
+                            }
+
+                        } else {
+
+                            if( choice.value == value ) {
+
+                                selected = ( choice.value === value )
+
+                            }
 
                         }
+
                     }
 
                     return (

diff --git a/src/components/icons/OperatingSystem.jsx b/src/components/icons/OperatingSystem.jsx
@@ -0,0 +1,14 @@
+const OperatingSystem = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M787.33-60 736-110.67l122.67-122.66-122-122L787.33-406l173.34 172.67L787.33-60Zm-460.66-60v-80h-180q-27 0-46.84-19.83Q80-239.67 80-266.67v-506.66q0-27 19.83-46.84Q119.67-840 146.67-840h666.66q27 0 46.84 19.83Q880-800.33 880-773.33V-482h-66.67v-291.33H146.67v506.66H684V-200h-64v80H326.67ZM446-366h66.67v-126.67h126.66v-66.66H512.67V-686H446v126.67H319.33v66.66H446V-366Zm-299.33 99.33v-506.66 506.66Z"/>
+        </svg>
+    );
+}
+
+export default OperatingSystem
diff --git a/src/components/icons/TicketChange.jsx b/src/components/icons/TicketChange.jsx
@@ -0,0 +1,14 @@
+const TicketChange = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M580.06-366.67q30.27 0 51.77-21.56 21.5-21.55 21.5-51.83 0-30.27-21.54-51.77-21.54-21.5-51.79-21.5-14.76 0-28.05 5.5-13.28 5.5-23.62 15.83l-115.66-58q.66-2.67.66-5v-10q0-2.33-.66-5l115.66-58q10.34 10.33 23.62 15.83 13.29 5.5 28.05 5.5 30.25 0 51.79-21.56 21.54-21.55 21.54-51.83 0-30.27-21.56-51.77-21.55-21.5-51.83-21.5-30.27 0-51.77 21.54-21.5 21.54-21.5 51.79v5q0 2.33.66 5l-115.66 58q-10.34-10.33-23.62-15.83-13.29-5.5-28.05-5.5-30.25 0-51.79 21.56-21.54 21.55-21.54 51.83 0 30.27 21.54 51.77 21.54 21.5 51.79 21.5 14.76 0 28.05-5.5 13.28-5.5 23.62-15.83l115.66 58q-.66 2.67-.66 5v5q0 30.25 21.56 51.79 21.55 21.54 51.83 21.54ZM80-80v-733.33q0-27 19.83-46.84Q119.67-880 146.67-880h666.66q27 0 46.84 19.83Q880-840.33 880-813.33v506.66q0 27-19.83 46.84Q840.33-240 813.33-240H240L80-80Zm131.33-226.67h602v-506.66H146.67v575l64.66-68.34Zm-64.66 0v-506.66 506.66Z"/>
+        </svg>
+    );
+}
+
+export default TicketChange
diff --git a/src/components/icons/TicketIncident.jsx b/src/components/icons/TicketIncident.jsx
@@ -0,0 +1,14 @@
+const TicketIncident = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M479.99-364.67q15.01 0 25.18-10.15 10.16-10.16 10.16-25.17 0-15.01-10.15-25.18-10.16-10.16-25.17-10.16-15.01 0-25.18 10.15-10.16 10.16-10.16 25.17 0 15.01 10.15 25.18 10.16 10.16 25.17 10.16Zm-33.32-148h66.66V-760h-66.66v247.33ZM80-80v-733.33q0-27 19.83-46.84Q119.67-880 146.67-880h666.66q27 0 46.84 19.83Q880-840.33 880-813.33v506.66q0 27-19.83 46.84Q840.33-240 813.33-240H240L80-80Zm131.33-226.67h602v-506.66H146.67v575l64.66-68.34Zm-64.66 0v-506.66 506.66Z"/>
+        </svg>
+    );
+}
+
+export default TicketIncident
diff --git a/src/components/icons/TicketProblem.jsx b/src/components/icons/TicketProblem.jsx
@@ -0,0 +1,14 @@
+const TicketProblem = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="m376-409.33 104-104 104 104L630.67-456l-104-104 104-104L584-710.67l-104 104-104-104L329.33-664l104 104-104 104L376-409.33ZM80-80v-733.33q0-27 19.83-46.84Q119.67-880 146.67-880h666.66q27 0 46.84 19.83Q880-840.33 880-813.33v506.66q0 27-19.83 46.84Q840.33-240 813.33-240H240L80-80Zm131.33-226.67h602v-506.66H146.67v575l64.66-68.34Zm-64.66 0v-506.66 506.66Z"/>
+        </svg>
+    );
+}
+
+export default TicketProblem
diff --git a/src/components/icons/TicketRequest.jsx b/src/components/icons/TicketRequest.jsx
@@ -0,0 +1,14 @@
+const TicketRequest = ({
+    width = '20px',
+    height = '20px',
+    fill = '#FFF'
+}) => {
+
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" width={ width } height={ height } fill={ fill }>
+            <path d="M446.67-400h66.66v-126.67H640v-66.66H513.33V-720h-66.66v126.67H320v66.66h126.67V-400ZM80-80v-733.33q0-27 19.83-46.84Q119.67-880 146.67-880h666.66q27 0 46.84 19.83Q880-840.33 880-813.33v506.66q0 27-19.83 46.84Q840.33-240 813.33-240H240L80-80Zm131.33-226.67h602v-506.66H146.67v575l64.66-68.34Zm-64.66 0v-506.66 506.66Z"/>
+        </svg>
+    );
+}
+
+export default TicketRequest
diff --git a/src/components/page/ticket/TicketComment.jsx b/src/components/page/ticket/TicketComment.jsx
@@ -115,13 +115,20 @@ const TicketComment = ({
                         field_name='user'
                         data={comment_data}
                     />
-                </span>
+                </span>&nbsp;
                 <span className="markdown" style={{display: 'inline-block'}}>
                     <FieldData
                         metadata={metadata}
                         field_name='body'
                         data={comment_data}
                     />
+                </span>&nbsp;
+                <span className="sub-script" style={{color: '#777', display: 'inline-block'}}>
+                    <FieldData
+                        metadata={metadata}
+                        field_name='created'
+                        data={comment_data}
+                    />
                 </span>
             </div>
         )

diff --git a/src/components/page/ticket/TicketCommentForm.jsx b/src/components/page/ticket/TicketCommentForm.jsx
@@ -213,14 +213,10 @@ const TicketCommentForm = ({
                             <span>
                                 <Select
                                     id = 'category'
-                                    field_data={metadata.fields['responsible_user']}
+                                    field_data={metadata.fields['category']}
+                                    value={form_data['category']}
                                     onChange={handleChange}
                                 />
-                                <FieldData
-                                    metadata={metadata}
-                                    field_name='category'
-                                    data={comment_data}
-                                />
                             </span>
                         </fieldset>}
                     </div>

diff --git a/src/functions/FieldData.js b/src/functions/FieldData.js
@@ -184,13 +184,17 @@ export default function FieldData({
 
                                 if( 'url' in field ) {
 
-                                    return ('');
+                                    return (
+                                        <>
+                                        <Link to={field.url}>{field.display_name}</Link>&nbsp;,
+                                        </>
+                                    );
 
                                 } else {
 
                                     return (
                                         <>
-                                        {field.display_name}&nbsp;
+                                        {field.display_name}&nbsp;,
                                         </>
                                     );
                                 }

diff --git a/src/index.css b/src/index.css
@@ -735,8 +735,9 @@ div.ticket .contents {
   width: 100%;
 }
 
-.ticket h3.description span.sub-script,
-.ticket .comment h4.comment #text span.sub-script {
+/* .ticket h3.description span.sub-script,
+.ticket .comment h4.comment #text span.sub-script */
+span.sub-script {
   font-size: smaller;
 }
 
@@ -1251,7 +1252,10 @@ section .content .section fieldset.inline .text {
   border-bottom: 1px solid var(--border-colour-form-field);
   display: inline-block;
   height: 25px;
-  min-width: 350px;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  width: 350px;
+  word-wrap: break-word;
 }
 
 section .content .section fieldset.textarea div.markdown {

diff --git a/src/layout/Detail.jsx b/src/layout/Detail.jsx
@@ -36,6 +36,16 @@ const Detail = ({
         params
     )
 
+
+    useEffect(() => {
+
+        setActiveTab(null)
+
+    },[
+        url_builder.api.path
+    ])
+
+
     useEffect(() => {
 
         apiFetch(

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
@@ -61,10 +61,22 @@ const ModelForm = ({
                         if( data.fields[field_key].required ) {
                             if( page_data ) {
 
-                                if( typeof(page_data[field_key]) == 'object' ) {
+                                if(
+                                    typeof(page_data[field_key]) == 'object'
+                                    && ! Array.isArray(page_data[field_key])
+                                ) {
 
                                     initial_form_data[field_key] = Number(page_data[field_key].id)
 
+                                }else if( Array.isArray(page_data[field_key]) ) {
+
+                                    initial_form_data[field_key] = []
+
+                                    for(let item of page_data[field_key]) {
+
+                                        initial_form_data[field_key] += [ item.id ]
+
+                                    }
                                 } else {
 
                                     initial_form_data[field_key] = page_data[field_key]
@@ -166,7 +178,7 @@ const ModelForm = ({
         setFormData((prevState) => ({ ...prevState, [e.target.id]: field_value }))
     }
 
-    return((page_data || ! edit ) &&
+    return((page_data || ! edit ) && metadata &&
         <section>
             {form_error && form_error['non_field_errors'] &&
                 <div>
@@ -195,7 +207,7 @@ const ModelForm = ({
 
                     if ( response.ok ) {
 
-                        navigate(url_builder.return_url)
+                        navigate(String(metadata.return_url).split('api/v2')[1])
 
                     } else {
 
@@ -350,7 +362,7 @@ const ModelForm = ({
                                 width: 'fit-content'
                             }}>
                             <button className="form common-field" type="submit">Save</button>
-                            <Link to={url_builder.return_url}><button className="form common-field inverse">Cancel</button></Link>
+                            <Link to={String(metadata.return_url).split('api/v2')[1]}><button type="button" className="form common-field inverse">Cancel</button></Link>
                         </div>
                     </div>