From 84812ede9df9755ca24ba8b1b055dda0ec1d09f5 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Sat, 16 Nov 2024 15:57:05 +0930
Subject: [PATCH 1/9] feat(component): Seperate action comment user and message

ref: #29 #32
---
 src/components/page/ticket/TicketComment.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/page/ticket/TicketComment.jsx b/src/components/page/ticket/TicketComment.jsx
index dd259e04..8af9d48c 100644
--- a/src/components/page/ticket/TicketComment.jsx
+++ b/src/components/page/ticket/TicketComment.jsx
@@ -115,7 +115,7 @@ const TicketComment = ({
                         field_name='user'
                         data={comment_data}
                     />
-                </span>
+                </span>&nbsp;
                 <span className="markdown" style={{display: 'inline-block'}}>
                     <FieldData
                         metadata={metadata}

From e7955692b2466fc90b17e1f6093b345da90d9b2c Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Sat, 16 Nov 2024 16:06:26 +0930
Subject: [PATCH 2/9] feat(component): Add creation date to ticket action
 comments

ref: #29 #32
---
 src/components/page/ticket/TicketComment.jsx | 7 +++++++
 src/index.css                                | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/page/ticket/TicketComment.jsx b/src/components/page/ticket/TicketComment.jsx
index 8af9d48c..4aa8b866 100644
--- a/src/components/page/ticket/TicketComment.jsx
+++ b/src/components/page/ticket/TicketComment.jsx
@@ -122,6 +122,13 @@ const TicketComment = ({
                         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/index.css b/src/index.css
index 5821ac04..38f85d2d 100644
--- 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;
 }
 

From 4581f55059f202d5e1383c2505913f091986c82d Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 16:23:11 +0930
Subject: [PATCH 3/9] fix(component): Ticket comment category now uses correct
 key

ref: #32
---
 src/components/page/ticket/TicketCommentForm.jsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/page/ticket/TicketCommentForm.jsx b/src/components/page/ticket/TicketCommentForm.jsx
index 093bdf8d..82aab1f5 100644
--- 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>

From 23aae9d72aba5e58a1da1394fb0b612c3da21d93 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 17:33:19 +0930
Subject: [PATCH 4/9] feat(layout): modelform to use metadata.return_url

ref: #32
---
 src/layout/ModelForm.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 17574b2f..71a8fb64 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -166,7 +166,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>
@@ -350,7 +350,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>
 

From e798a0532ca2137b2a085bfc8f6f90fe37b90d7a Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 18:27:30 +0930
Subject: [PATCH 5/9] feat(layout): if detail view url changes, ensure active
 tab is reset

ref: #32
---
 src/layout/Detail.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/layout/Detail.jsx b/src/layout/Detail.jsx
index 56417e80..03c46553 100644
--- 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(

From 39ce72edb1b91de274a81654227aacb40171ab41 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 18:44:56 +0930
Subject: [PATCH 6/9] feat(layout): ticket created successfuly navigatae to
 list view

ref: #32
---
 src/layout/ModelForm.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index 71a8fb64..f14ece37 100644
--- a/src/layout/ModelForm.jsx
+++ b/src/layout/ModelForm.jsx
@@ -195,7 +195,7 @@ const ModelForm = ({
 
                     if ( response.ok ) {
 
-                        navigate(url_builder.return_url)
+                        navigate(String(metadata.return_url).split('api/v2')[1])
 
                     } else {
 

From 8d817ffd49b9d9d57cacfb4b2c4e933abf6104c3 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 20:01:13 +0930
Subject: [PATCH 7/9] feat(function): Support multi-select fields

ref: #32
---
 src/components/form/Select.jsx | 40 ++++++++++++++++++++++++++++++----
 src/functions/FieldData.js     |  6 ++++-
 src/layout/ModelForm.jsx       | 14 +++++++++++-
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/components/form/Select.jsx b/src/components/form/Select.jsx
index 2a80d75e..f7a59b8f 100644
--- 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/functions/FieldData.js b/src/functions/FieldData.js
index ed87ae38..061cff19 100644
--- a/src/functions/FieldData.js
+++ b/src/functions/FieldData.js
@@ -184,7 +184,11 @@ export default function FieldData({
 
                                 if( 'url' in field ) {
 
-                                    return ('');
+                                    return (
+                                        <>
+                                        <Link to={field.url}>{field.display_name}</Link>&nbsp;
+                                        </>
+                                    );
 
                                 } else {
 
diff --git a/src/layout/ModelForm.jsx b/src/layout/ModelForm.jsx
index f14ece37..2aa0e69d 100644
--- 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]

From 8ca5d184b5f98fdc8e324bc142d93f69d1f9438e Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 21:42:58 +0930
Subject: [PATCH 8/9] feat(component): Add ticket type icons

ref: #32
---
 src/components/IconLoader.jsx            | 10 ++++++++++
 src/components/icons/OperatingSystem.jsx | 14 ++++++++++++++
 src/components/icons/TicketChange.jsx    | 14 ++++++++++++++
 src/components/icons/TicketIncident.jsx  | 14 ++++++++++++++
 src/components/icons/TicketProblem.jsx   | 14 ++++++++++++++
 src/components/icons/TicketRequest.jsx   | 14 ++++++++++++++
 6 files changed, 80 insertions(+)
 create mode 100644 src/components/icons/OperatingSystem.jsx
 create mode 100644 src/components/icons/TicketChange.jsx
 create mode 100644 src/components/icons/TicketIncident.jsx
 create mode 100644 src/components/icons/TicketProblem.jsx
 create mode 100644 src/components/icons/TicketRequest.jsx

diff --git a/src/components/IconLoader.jsx b/src/components/IconLoader.jsx
index 979c81ec..3cb891d7 100644
--- 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/icons/OperatingSystem.jsx b/src/components/icons/OperatingSystem.jsx
new file mode 100644
index 00000000..c55b3cd0
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/icons/TicketChange.jsx b/src/components/icons/TicketChange.jsx
new file mode 100644
index 00000000..38654bee
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/icons/TicketIncident.jsx b/src/components/icons/TicketIncident.jsx
new file mode 100644
index 00000000..0b333f18
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/icons/TicketProblem.jsx b/src/components/icons/TicketProblem.jsx
new file mode 100644
index 00000000..b189429c
--- /dev/null
+++ 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
\ No newline at end of file
diff --git a/src/components/icons/TicketRequest.jsx b/src/components/icons/TicketRequest.jsx
new file mode 100644
index 00000000..f416d49a
--- /dev/null
+++ 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
\ No newline at end of file

From 51c57dc40627886461232e71ccc67323e63d54b2 Mon Sep 17 00:00:00 2001
From: Jon <jonathon.lockwood@networkedweb.com>
Date: Wed, 20 Nov 2024 22:15:45 +0930
Subject: [PATCH 9/9] fix: Dont allow field overflow, wrap text

ref: #32
---
 src/functions/FieldData.js | 4 ++--
 src/index.css              | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/functions/FieldData.js b/src/functions/FieldData.js
index 061cff19..b261130f 100644
--- a/src/functions/FieldData.js
+++ b/src/functions/FieldData.js
@@ -186,7 +186,7 @@ export default function FieldData({
 
                                     return (
                                         <>
-                                        <Link to={field.url}>{field.display_name}</Link>&nbsp;
+                                        <Link to={field.url}>{field.display_name}</Link>&nbsp;,
                                         </>
                                     );
 
@@ -194,7 +194,7 @@ export default function FieldData({
 
                                     return (
                                         <>
-                                        {field.display_name}&nbsp;
+                                        {field.display_name}&nbsp;,
                                         </>
                                     );
                                 }
diff --git a/src/index.css b/src/index.css
index 38f85d2d..72e4a296 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1252,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 {