Styled columns and refresh config on save

This commit is contained in:
Henry Whitaker
2021-04-10 11:57:01 +01:00
parent fe871a7d58
commit 9870aeb9ba
7 changed files with 106 additions and 56 deletions

View File

@@ -278,7 +278,7 @@ export default class SettingsIndex extends Component {
{loading ?
<Loader />
:
<SettingsTabs data={data} />
<SettingsTabs data={data} refreshConfig={this.props.refreshConfig} />
}
</div>
<Footer />

View File

@@ -126,6 +126,7 @@ export default class SettingsTabs extends Component {
case 'Tables':
return <TableSettings
data={data.Tables}
refreshConfig={this.props.refreshConfig}
save={this.save} />
case 'Notifications':
return <NotificationsSettings

View File

@@ -16,7 +16,6 @@ export default class TableSettings extends Component {
}
handleOnDragEnd = (result) => {
console.log(result);
if (!result.destination) return;
let visible = this.state.visible;
@@ -50,9 +49,11 @@ export default class TableSettings extends Component {
],
})
.then((resp) => {
console.log(resp);
toast.success('Table settings updated');
this.props.refreshConfig();
})
.catch((err) => {
toast.error('Something went wrong');
console.log(err);
})
}
@@ -67,38 +68,45 @@ export default class TableSettings extends Component {
<p>{visible.obj.description}</p>
<DragDropContext onDragEnd={this.handleOnDragEnd}>
<Droppable droppableId="visibleColumns">
{(provided) => (
<ul className="visibleColumns" {...provided.droppableProps} ref={provided.innerRef}>
{visible.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
<Droppable droppableId="hiddenColumns">
{(provided) => (
<ul className="hiddenColumns" {...provided.droppableProps} ref={provided.innerRef}>
{hidden.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
<div className="card pt-4 pb-2 px-4 mb-4">
<h4>Visible Columns</h4>
<Droppable droppableId="visibleColumns">
{(provided) => (
<ul className="visibleColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
{visible.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</div>
<div className="card pt-4 pb-2 px-4">
<h4>Hidden Columns</h4>
<Droppable droppableId="hiddenColumns pl-0">
{(provided) => (
<ul className="hiddenColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
{hidden.obj.value.map((e, i) => {
return (
<Draggable draggableId={e} index={i} key={e}>
{(provided) => (
<li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</div>
</DragDropContext>
<div className="mt-3">

View File

@@ -94,7 +94,7 @@ export default class Index extends Component {
)} />
<Route exact path={window.config.base + 'settings'} render={(props) => (
<div>
<SettingsIndex />
<SettingsIndex refreshConfig={this.getConfig} />
</div>
)} />