refactor(component): Add Related tickets

ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319

src/components/IconLoader.jsx

@@ -30,6 +30,9 @@ import StatusAcceptedIcon from "./icons/ticket/StatusAcceptedIcon";
 import StatusEvaluationIcon from "./icons/ticket/StatusEvaluationIcon";
 import StatusApprovalsIcon from "./icons/ticket/StatusApprovalsIcon";
 import StatusTestingIcon from "./icons/ticket/StatusTestingIcon";
+import RelatedTicketRelated from "./icons/ticket/RelatedTicketRelated";
+import RelatedTicketBlocks from "./icons/ticket/RelatedTicketBlocks";
+import RelatedTicketBlocked from "./icons/ticket/RelatedTicketBlocked";
 
 
 const icon_components = {
@@ -54,6 +57,9 @@ const icon_components = {
     organization: OrganizationIcon,
     software: SoftwareIcon,
     task: TaskIcon,
+    ticket_related_blocks: RelatedTicketBlocks,
+    ticket_related_blocked_by: RelatedTicketBlocked,
+    ticket_related_related: RelatedTicketRelated,
     ticket_status_accepted: StatusAcceptedIcon,
     ticket_status_approvals: StatusApprovalsIcon,
     ticket_status_assigned: StatusAssignedIcon,
@@ -66,6 +72,7 @@ const icon_components = {
     ticket_status_pending: StatusPendingIcon,
     ticket_status_solved: StatusSolvedIcon,
     ticket_status_testing: StatusTestingIcon
+
 };
 
 const IconLoader = ({

src/components/page/ticket/RelatedTickets.jsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { apiFetch } from "../../../hooks/apiFetch";
+import IconLoader from "../../IconLoader";
+import RenderMarkdown from "../../../functions/RenderMarkdown";
+
+const RelatedTickets = ({
+    data_url = null,
+    ticket_id = null
+}) => {
+
+    const [ page_data, setPageData ] = useState(null)
+    const [ metadata, setMetaData ] = useState(null)
+
+    useEffect(() => {
+
+        apiFetch(
+            data_url,
+            (data) => {
+
+                setPageData(data)
+            }
+        )
+    },[ data_url ])
+
+    useEffect(() => {
+
+        apiFetch(
+            data_url,
+            (data) => {
+
+                setMetaData(data)
+            },
+            'OPTIONS'
+        )
+    },[ data_url ])
+
+
+    return (
+        <section className="related-tickets">
+            <h3 className="related-tickets">Related Tickets</h3>
+            {(metadata && page_data) &&
+
+            page_data.results.map((related_ticket) => {
+
+                let from = true
+
+                let this_id = related_ticket['to_ticket_id']
+
+                let related_name = ''
+
+                for( let choice of metadata.actions['POST']['how_related']['choices']) {
+
+                    if( Number(related_ticket.how_related) === Number(choice.value) ) {
+                        related_name = String(choice.display_name).toLowerCase()
+                    }
+
+                }
+
+                if( Number(related_ticket['to_ticket_id']['id']) === Number(ticket_id) ) {
+
+                    from = false
+                    this_id = related_ticket['from_ticket_id']
+
+                    if( related_name === 'blocked by' ) {
+
+                        related_name = 'blocks'
+
+                    }else if( related_name === 'blocks' ) {
+
+                        related_name = 'blocked by'
+
+                    }
+
+                }
+
+                console.log(`ticket_related_${String(related_name).replace(' ', '_')}`)
+
+                return (
+                <div id="linked-tickets" className="related-ticket">
+                    <div className={"icon icon-related-ticket ticket-related-" + String(related_name).replace(' ', '_')}>
+                        <IconLoader
+                            name={'ticket_related_' + String(related_name).replace(' ', '_')}
+                        />
+                         &nbsp;</div>
+                    {/* <div id="markdown" className="text text-related-ticket"> */}
+                    <div className="markdown">
+
+                        {related_name}&nbsp;
+
+                        <span style={{
+                            display: 'inline-block'
+                            }}>
+                                <RenderMarkdown>
+                                    {'#'+this_id['id']}
+                                </RenderMarkdown>
+                            </span>
+                    </div>
+                </div>
+                );
+            })}
+        </section>
+    );
+}
+
+export default RelatedTickets;

src/functions/RenderMarkdown.js

@@ -42,11 +42,18 @@ export default function RenderMarkdown(markdown, full_width=false) {
 
     let rendered_markdown = md.render( String(markdown.children) )
 
+    let class_name = null
+
+    if( markdown.class ) {
+
+        class_name = markdown.class
+    }
+
     if( full_width ) {
-        return <div className='full-width' dangerouslySetInnerHTML={createHTML(rendered_markdown)} />;
+        return <div className={'full-width ' + class_name} dangerouslySetInnerHTML={createHTML(rendered_markdown)} />;
     }
 
-    return <div dangerouslySetInnerHTML={createHTML(rendered_markdown)} />;
+    return <div className={class_name} dangerouslySetInnerHTML={createHTML(rendered_markdown)} />;
 }
 
 function createHTML(html_string) {

src/layout/Ticket.jsx

@@ -6,6 +6,7 @@ import TicketComments from "../components/page/ticket/Comments";
 import { apiFetch } from "../hooks/apiFetch";
 import TicketCommentForm from "../components/page/ticket/Comment";
 import LinkedItems from "../components/page/ticket/LinkedItems";
+import RelatedTickets from "../components/page/ticket/RelatedTickets";
 
 
 const Ticket = ({
@@ -128,12 +129,10 @@ const Ticket = ({
                     </div>
                 </section>
 
-                <section className="related-tickets">
-                    <h3 className="related-tickets">Related Tickets</h3>
-                    <div>
-                        gfh
-                    </div>
-                </section>
+                <RelatedTickets
+                    data_url={String(page_data['_urls']['related_tickets']).split('api/v2')[1]}
+                    ticket_id={page_data['id']}
+                />
 
                 <LinkedItems
                     data_url={String(page_data['_urls']['linked_items']).split('api/v2')[1]}