Skip to content

Commit

Permalink
feat(component): Add automagic collabsible row if detected
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 28e7b16 commit 3d11972
Show file tree
Hide file tree
Showing 3 changed files with 167 additions and 30 deletions.
18 changes: 17 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { ResponseException } from "./classes/Exceptions";
import RootLayout from "./layout/Root";
import Ticket from "./layout/Ticket";
import ModelForm from "./layout/ModelForm";
import History from "./layout/history";



Expand All @@ -38,6 +39,15 @@ function App() {
errorElement={<ErrorPage /> }
>

<Route path="/core/:model/:pk/:action"
element={<History
setContentHeading={setContentHeading}
SetContentHeaderIcon={SetContentHeaderIcon}
/>}
errorElement={<ErrorPage /> }
loader = {detailsLoader}
/>

<Route path="/:module/ticket/:model"
element={<List
setContentHeading={setContentHeading}
Expand Down Expand Up @@ -154,9 +164,15 @@ const detailsLoader = async ({request, params}) => {

}

if( params.model && params.pk && params.action ) {

url = '/core/' + params.model + '/' + params.pk + '/' + params.action

}

url = 'http://127.0.0.1:8002/api/v2' + url

if( params.pk ) {
if( ! (params.model && params.pk && params.action) && params.pk ) {

url = url + '/' + params.pk

Expand Down
150 changes: 121 additions & 29 deletions src/components/Table.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,15 @@ import { apiFetch } from "../hooks/apiFetch";
import FieldData from "../functions/FieldData";
import TextField from "./form/Textfield";
import { Link, useParams } from "react-router-dom";
import IconLoader from "./IconLoader";


/**
* Create a Table with pagination
*
* if a table field is not a string but an array of strings, they will be rendered
* as a collapsible row directly underneath each row.
*
* @param {{String, Function}} param0 Object for table
* @param data_url_path url where the data will be fetched
* @param callback function that will be passed value `data.name`
Expand All @@ -29,6 +33,10 @@ const Table = ({

const [table_data, setTableData] = useState(null);

let collapsable_fields = []

let table_columns_count = 0;

const pagefieldId = useId();

const params = useParams();
Expand Down Expand Up @@ -135,60 +143,144 @@ const Table = ({
<table>
<thead>
<tr>
{metadata.table_fields.map(key => {
{metadata.table_fields.map((key, index) => {

collapsable_fields = []

if (key in metadata.actions.POST) {
if( table_columns_count === 0 ) {

if (metadata.table_fields[key] === 'nbsp') {
for( let field of metadata.table_fields ) {

return (
<th>&nbsp</th>
)
} else {
if( typeof(field) === 'string' ) {

return (
<th key={key}>{metadata.actions.POST[key].label}</th>
)
table_columns_count += 1

}
}

}

if (key in metadata.actions[metadata_action]) {

if( typeof(key) === 'string' ) {


if (metadata.table_fields[key] === 'nbsp') {

return (
<th>&nbsp;</th>
)

} else {

return (
<th key={key}>{metadata.actions[metadata_action][key].label}</th>
)
}
}
} else if( typeof(key) === 'object' ) {

for( let sub_key of key ) {

collapsable_fields.push(sub_key)

}

console.log(`collapsable fields ${JSON.stringify(key)}`)

}

})}
{ table_columns_count > 0 &&
<td>&nbsp;</td>
}
</tr>
</thead>
<tbody>
{table_data.results.map((data) => {

return (
<tr id={table_data.id} key={table_data.id}>
{
metadata.table_fields.map(key => {
<>
<tr id={data.id} key={data.id}>
{
metadata.table_fields.map(key => {

if (key in metadata.actions.POST) {
if (key in metadata.actions[metadata_action]) {

if (metadata.table_fields[key] === 'nbsp') {
if( typeof(key) === 'string' ) {

return (
<td>&nbsp;</td>
)
if (metadata.table_fields[key] === 'nbsp') {

return (
<td>&nbsp;</td>
)

} else {

} else {
return (
<td>
<FieldData
metadata={metadata}
field_name={key}
data={data}
/>
</td>
)

}
}
}

})
}
{ table_columns_count > 0 &&
<td
onClick={(e) => {
let a = e
document.getElementById('expandable-' + e.currentTarget.parentElement.id).classList.toggle("hide-expandable-row")
}}
>
<IconLoader
name='navdown'
fill='#ccc'
/>
</td>
}

</tr>
{collapsable_fields.length > 0 &&
<tr
className='collapsible-row'
>
<td colspan={(metadata.table_fields.length)}>
<div
className="hide-expandable-row"
id={'expandable-' + data.id}
key={'expandable-' + data.id}
>
{collapsable_fields.map((collapsable_field,) => {
return (
<td>
<div className="dual-column"
>
<span style={{
display: 'block',
fontWeight: 'bold',
textAlign: 'center',
width: '100%'
}}>{collapsable_field}</span>
<FieldData
metadata={metadata}
field_name={key}
field_name={collapsable_field}
data={data}
/>
</td>
</div>
)

}
}

})}

</tr>
})}
</div>
</td>
</tr>
}
</>
);
})}
</tbody>
Expand Down
29 changes: 29 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1273,6 +1273,35 @@ section .content table {
width: 100%;
}

section .content table tr.collapsible-row {
height: fit-content;
text-align: left;
}

section .content table tr.collapsible-row td {
height: fit-content;
padding: 0px;
}

section .content table tr td svg {
fill: var(--background-colour-navbar-active);
width: 30px;
height: 30px;
}
section .content table tr td div {
display: flex;
}
section .content table tr td .hide-expandable-row {
display: none;
}

section .content table tr div.dual-column {
display: inline-block;
height: fit-content;
margin: auto;
width: fit-content;
}

section .content thead,
section .content tr {
text-align: center;
Expand Down

0 comments on commit 3d11972

Please sign in to comment.