Added sortable list for visible columns

Need to add handling for multiple lists on the page

package.json

@@ -10,8 +10,8 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
-        "axios": "^0.21",
         "@babel/preset-react": "^7.12.13",
+        "axios": "^0.21",
         "bootstrap": "^4.6.0",
         "cross-env": "^7.0",
         "jquery": "^3.5",
@@ -29,6 +29,7 @@
         "chart.js": "^2.9.4",
         "csv-file-validator": "^1.10.1",
         "js-cookie": "^2.2.1",
+        "react-beautiful-dnd": "^13.1.0",
         "react-bootstrap": "^1.5.1",
         "react-chartjs-2": "^2.11.1",
         "react-router": "^5.2.0",

resources/js/components/Settings/SettingsIndex.js

@@ -63,6 +63,16 @@ export default class SettingsIndex extends Component {
                     type: 'checkbox',
                 }
             ],
+            Tables: [
+                {
+                    obj: data.visible_columns,
+                    type: 'list'
+                },
+                {
+                    obj: data.hidden_columns,
+                    type: 'list'
+                }
+            ],
             Graphs: [
                 {
                     obj: data.download_upload_graph_enabled,

resources/js/components/Settings/SettingsTabs.js

@@ -11,13 +11,14 @@ import GraphsSettings from './tabs/GraphsSettings';
 import HealthchecksSettings from './tabs/HealthchecksSettings';
 import NotificationsSettings from './tabs/NotificationsSettings';
 import Authentication from '../Authentication/Authentication';
+import TableSettings from './tabs/TableSettings';
 
 export default class SettingsTabs extends Component {
     constructor(props) {
         super(props)
 
         this.state = {
-            tab: "General",
+            tab: "Tables",
             data: this.props.data
         }
     }
@@ -26,6 +27,7 @@ export default class SettingsTabs extends Component {
         var tabs = [
             'General',
             'Graphs',
+            'Tables',
             'Notifications',
             'healthchecks.io',
             'Reset',
@@ -121,6 +123,10 @@ export default class SettingsTabs extends Component {
                             data={data.Graphs}
                             generateInputs={this.generateInputs}
                             save={this.save} />
+            case 'Tables':
+                return <TableSettings
+                            data={data.Tables}
+                            save={this.save} />
             case 'Notifications':
                 return <NotificationsSettings
                             data={data.Notifications}

resources/js/components/Settings/tabs/TableSettings.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+
+export default class TableSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            visible: this.props.data[0],
+            hidden: this.props.data[1],
+        }
+    }
+
+    handleOnDragEnd = (result) => {
+        if (!result.destination) return;
+
+        let data = this.state.visible;
+        let array = data.obj.value;
+
+        let reorderedItem = array.splice(result.source.index, 1);
+        array.splice(result.destination.index, 0, reorderedItem[0]);
+        data.obj.value = array;
+
+        console.log(array);
+
+        this.setState({
+            visible: data
+        });
+    }
+
+    save = () => {
+        var url = 'api/settings?token=' + window.token;
+
+        Axios.post(url, {
+            name: 'visible_columns',
+            value: this.state.data.obj.value
+        })
+        .then((resp) => {
+            console.log(resp);
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        let visible = this.state.visible;
+        let hidden = this.state.hidden;
+
+        return (
+            <Tab.Content>
+                <div>
+                    <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>
+                    </DragDropContext>
+
+                    <div className="mt-3">
+                        <button className="btn btn-primary" onClick={() => { this.save() }}>Save</button>
+                    </div>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('TableSettings')) {
+    ReactDOM.render(<TableSettings />, document.getElementById('TableSettings'));
+}