Skip to content

Commit

Permalink
refactor(layout): Add model note form and tab
Browse files Browse the repository at this point in the history 
ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319
  • Loading branch information
@jon-nfc
jon-nfc committed Oct 10, 2024
1 parent b6854d9 commit 92877c9
Show file tree
Hide file tree
Showing 3 changed files with 226 additions and 26 deletions.
66 changes: 66 additions & 0 deletions src/components/page/detail/ModelNote.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import FieldData from "../../../functions/FieldData";
import RenderMarkdown from "../../../functions/RenderMarkdown";

const ModelNote = ({
metadata = null,
note_data = null
}) => {
return (
<div className="model-note">

<div className="single-note">

<div className="comment-header">
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px">
<path
d="M480-400q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z" />
</svg>
<span>
<FieldData
metadata={metadata}
field_name='created'
data={note_data}
/>
</span>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px">
<path
d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Z" />
</svg>
<span>
<FieldData
metadata={metadata}
field_name='usercreated'
data={note_data}
/>
</span>
<span style={{display: 'inline', marginRight: 'auto'}}>&nbsp;</span>
</div>

<div className="comment-body">
<RenderMarkdown>
{note_data['note']}
</RenderMarkdown>
</div>

<div className="comment-footer">
<span>edited by: </span>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px">
<path
d="M480-400q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240ZM200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Z" />
</svg>
<span>date </span>
<svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px">
<path
d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Z" />
</svg>
<span>username</span>
<span style={{display: 'inline', marginRight: 'auto'}}>&nbsp;</span>
</div>

</div>

</div>
);
}

export default ModelNote;
67 changes: 67 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1122,6 +1122,7 @@ section.error pre {
}

section .nav-tabs {
background-color: var(--background-colour-active);
border-bottom: 1px solid var(--border-colour);
display: flex;
height: 50px;
Expand Down Expand Up @@ -1264,6 +1265,72 @@ section .content td {
border-bottom: 1px solid var(--border-colour);
}




section .model-notes {
background-color: var(--background-colour-inactive);
}

section .model-notes div.notes {
background-color: var(--background-colour-inactive);
padding: 10px;
}

section .model-notes .model-notes-comment {
background-color: var(--background-colour-active);
padding: 10px;
}

section .model-notes .model-note {
margin: 10px 0px;
}

section .model-notes fieldset {
display: flex;
width: 90%;

}

textarea#model-note {
width: 40%;
height: 100px;
margin: 0px auto;
}

section .model-note div.single-note {
background-color: var(--background-colour-active);
border: 1px solid var(--border-colour);
padding: 0px;
display: block;
}

.model-note div.comment-header {
background-color: #aaa;
color: var(--text-colour-button);
margin: 0px;
padding: 2px 10px;
}

.model-note div.comment-body {
margin: 0px;
padding: 0px 10px;
}

.model-note div.comment-footer {
color: var(--text-colour);
margin: 0px;
padding: 2px 10px;
}









p.table-pagination {
/* background-color: chartreuse; */
display: inline-block;
Expand Down
119 changes: 93 additions & 26 deletions src/layout/Detail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import { useLoaderData, useParams } from "react-router-dom";
import { apiFetch } from "../hooks/apiFetch";
import NavTabs from "../components/page/detail/Navtabs";
import Section from "../components/page/detail/Section";
import ModelNote from "../components/page/detail/ModelNote";
import TextArea from "../components/form/Textarea";
import Button from "../components/form/Button";



Expand All @@ -19,6 +22,9 @@ const Detail = ({

const [metadata, setMetaData] = useState(null);

const[ notes, setNotes ] = useState(null)
const[ note_metadata, setNoteMetadata ] = useState(null)


useEffect(() => {

Expand All @@ -45,10 +51,31 @@ const Detail = ({
)
},[page_data])

useEffect(() => {

apiFetch(
String(page_data['_urls']['notes']).split('api/v2')[1],
(data) => {

setNotes(data)
}
)

apiFetch(
String(page_data['_urls']['notes']).split('api/v2')[1],
(data) => {

setNoteMetadata(data)
},
'OPTIONS'
)

}, [page_data])


return (
<section>

{ metadata && <NavTabs
active_tab={active_tab}
setActiveTab={setActiveTab}
Expand All @@ -63,35 +90,75 @@ const Detail = ({
)
) {

return( tab.sections.map(( section, section_index ) => {
if( tab.name.toLowerCase() === 'notes' ) {

if( section_index !== 0 ) {

return(
<div>
<hr />
<Section
index = { section_index }
layout = {section}
data = { page_data }
metadata = { metadata }
tab = {tab}
/>
return(
<div className="model-notes">
<div className="model-notes-comment">
<form onSubmit={(e) => {
e.preventDefault()

apiFetch(
String(page_data['_urls']['notes']).split('api/v2')[1],
(data) => {

setNotes(data)
}
)
}}>
<TextArea
id = 'model-note'
required = {true}
/>
<Button
button_align = 'right'
button_text = 'Create Note'
/>
</form>
</div>
)
<div className="notes">
{(notes && note_metadata) &&
notes.results.map((note) => {
return (<ModelNote
note_data={note}
metadata = {note_metadata}
/>)
})}
</div>
</div>
)

}
} else {

return( tab.sections.map(( section, section_index ) => {

if( section_index !== 0 ) {

return(
<div>
<hr />
<Section
index = { section_index }
layout = {section}
data = { page_data }
metadata = { metadata }
tab = {tab}
/>
</div>
)
}

return(
<Section
index = { section_index }
layout = {section}
data = { page_data }
metadata = { metadata }
tab = {tab}
/>
)
}))
return(
<Section
index = { section_index }
layout = {section}
data = { page_data }
metadata = { metadata }
tab = {tab}
/>
)
}))
}
}
})}
</section>
Expand Down

0 comments on commit 92877c9

Please sign in to comment.