Styled columns and refresh config on save

changelog.json

@@ -1,5 +1,9 @@
 {
     "1.11.1": [
+        {
+            "description": "Add option to show/hide columns in the all tests table.",
+            "link": ""
+        },
         {
             "description": "Add option to delete failed tests.",
             "link": ""

database/migrations/2021_04_10_082758_add_visible_columns_setting.php

@@ -19,7 +19,7 @@ class AddVisibleColumnsSetting extends Migration
             Setting::create([
                 'name' => 'visible_columns',
                 'value' => 'id,created_at,download,upload,ping',
-                'description' => 'Columns visible in the "All Tests" table.'
+                'description' => 'Choose and order the columns shown in the "All Tests" table.'
             ]);
         }
     }

public/js/app.js

@@ -148426,7 +148426,8 @@ var SettingsIndex = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Navbar__WEBPACK_IMPORTED_MODULE_5__["default"], null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", {
         className: "container my-5"
       }, loading ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Loader__WEBPACK_IMPORTED_MODULE_4__["default"], null) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_SettingsTabs__WEBPACK_IMPORTED_MODULE_6__["default"], {
-        data: data
+        data: data,
+        refreshConfig: this.props.refreshConfig
       })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Home_Footer__WEBPACK_IMPORTED_MODULE_3__["default"], null));
     }
   }]);
@@ -148850,6 +148851,7 @@ var SettingsTabs = /*#__PURE__*/function (_Component) {
         case 'Tables':
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_tabs_TableSettings__WEBPACK_IMPORTED_MODULE_13__["default"], {
             data: data.Tables,
+            refreshConfig: _this.props.refreshConfig,
             save: _this.save
           });
 
@@ -149578,6 +149580,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -149621,26 +149635,39 @@ var TableSettings = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleOnDragEnd", function (result) {
       if (!result.destination) return;
-      var data = _this.state.visible;
+      var visible = _this.state.visible;
-      var array = data.obj.value;
+      var hidden = _this.state.hidden;
-      var reorderedItem = array.splice(result.source.index, 1);
+      var from = result.source.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
-      array.splice(result.destination.index, 0, reorderedItem[0]);
+      var to = result.destination.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
-      data.obj.value = array;
+
-      console.log(array);
+      var _from$splice = from.splice(result.source.index, 1),
+          _from$splice2 = _slicedToArray(_from$splice, 1),
+          reorderedItem = _from$splice2[0];
+
+      to.splice(result.destination.index, 0, reorderedItem);
 
       _this.setState({
-        visible: data
+        visible: visible,
+        hidden: hidden
       });
     });
 
     _defineProperty(_assertThisInitialized(_this), "save", function () {
-      var url = 'api/settings?token=' + window.token;
+      var url = 'api/settings/bulk?token=' + window.token;
       axios__WEBPACK_IMPORTED_MODULE_3___default.a.post(url, {
-        name: 'visible_columns',
+        data: [{
-        value: _this.state.data.obj.value
+          name: 'visible_columns',
+          value: _this.state.visible.obj.value
+        }, {
+          name: 'hidden_columns',
+          value: _this.state.hidden.obj.value
+        }]
       }).then(function (resp) {
-        console.log(resp);
+        react_toastify__WEBPACK_IMPORTED_MODULE_4__["toast"].success('Table settings updated');
+
+        _this.props.refreshConfig();
       })["catch"](function (err) {
+        react_toastify__WEBPACK_IMPORTED_MODULE_4__["toast"].error('Something went wrong');
         console.log(err);
       });
     });
@@ -149661,11 +149688,13 @@ var TableSettings = /*#__PURE__*/function (_Component) {
       var hidden = this.state.hidden;
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Tab"].Content, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, visible.obj.description), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_5__["DragDropContext"], {
         onDragEnd: this.handleOnDragEnd
-      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_5__["Droppable"], {
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+        className: "card pt-4 pb-2 px-4 mb-4"
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h4", null, "Visible Columns"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_5__["Droppable"], {
         droppableId: "visibleColumns"
       }, function (provided) {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", _extends({
-          className: "visibleColumns"
+          className: "visibleColumns pl-0"
         }, provided.droppableProps, {
           ref: provided.innerRef
         }), visible.obj.value.map(function (e, i) {
@@ -149675,16 +149704,19 @@ var TableSettings = /*#__PURE__*/function (_Component) {
             key: e
           }, function (provided) {
             return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", _extends({
+              className: "card bg-secondary py-2 px-3 my-2",
               key: e,
               ref: provided.innerRef
             }, provided.draggableProps, provided.dragHandleProps), e);
           });
         }), provided.placeholder);
-      }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_5__["Droppable"], {
+      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-        droppableId: "hiddenColumns"
+        className: "card pt-4 pb-2 px-4"
+      }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h4", null, "Hidden Columns"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_beautiful_dnd__WEBPACK_IMPORTED_MODULE_5__["Droppable"], {
+        droppableId: "hiddenColumns pl-0"
       }, function (provided) {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", _extends({
-          className: "hiddenColumns"
+          className: "hiddenColumns pl-0"
         }, provided.droppableProps, {
           ref: provided.innerRef
         }), hidden.obj.value.map(function (e, i) {
@@ -149694,12 +149726,13 @@ var TableSettings = /*#__PURE__*/function (_Component) {
             key: e
           }, function (provided) {
             return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", _extends({
+              className: "card bg-secondary py-2 px-3 my-2",
               key: e,
               ref: provided.innerRef
             }, provided.draggableProps, provided.dragHandleProps), e);
           });
         }), provided.placeholder);
-      })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+      }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
         className: "mt-3"
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("button", {
         className: "btn btn-primary",
@@ -149931,6 +149964,8 @@ var Index = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this3 = this;
+
       var loading = this.state.loading;
       var redirect = this.state.redirect;
       var baseSet = this.isset(window.config);
@@ -149959,7 +149994,9 @@ var Index = /*#__PURE__*/function (_Component) {
             exact: true,
             path: window.config.base + 'settings',
             render: function render(props) {
-              return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Settings_SettingsIndex__WEBPACK_IMPORTED_MODULE_10__["default"], null));
+              return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_components_Settings_SettingsIndex__WEBPACK_IMPORTED_MODULE_10__["default"], {
+                refreshConfig: _this3.getConfig
+              }));
             }
           }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Route"], {
             exact: true,

resources/js/components/Settings/SettingsIndex.js

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

resources/js/components/Settings/SettingsTabs.js

@@ -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

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

@@ -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">
+                        <div className="card pt-4 pb-2 px-4 mb-4">
-                            {(provided) => (
+                            <h4>Visible Columns</h4>
-                                <ul className="visibleColumns" {...provided.droppableProps} ref={provided.innerRef}>
+                            <Droppable droppableId="visibleColumns">
-                                    {visible.obj.value.map((e, i) => {
+                                {(provided) => (
-                                        return (
+                                    <ul className="visibleColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
-                                            <Draggable draggableId={e} index={i} key={e}>
+                                        {visible.obj.value.map((e, i) => {
-                                                {(provided) => (
+                                            return (
-                                                    <li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
+                                                <Draggable draggableId={e} index={i} key={e}>
-                                                )}
+                                                    {(provided) => (
-                                            </Draggable>
+                                                        <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>
+                                        })}
-                            )}
+                                        {provided.placeholder}
-                        </Droppable>
+                                    </ul>
-                        <Droppable droppableId="hiddenColumns">
+                                )}
-                            {(provided) => (
+                            </Droppable>
-                                <ul className="hiddenColumns" {...provided.droppableProps} ref={provided.innerRef}>
+                        </div>
-                                    {hidden.obj.value.map((e, i) => {
+
-                                        return (
+                        <div className="card pt-4 pb-2 px-4">
-                                            <Draggable draggableId={e} index={i} key={e}>
+                            <h4>Hidden Columns</h4>
-                                                {(provided) => (
+                            <Droppable droppableId="hiddenColumns pl-0">
-                                                    <li key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
+                                {(provided) => (
-                                                )}
+                                    <ul className="hiddenColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
-                                            </Draggable>
+                                        {hidden.obj.value.map((e, i) => {
-                                        );
+                                            return (
-                                    })}
+                                                <Draggable draggableId={e} index={i} key={e}>
-                                    {provided.placeholder}
+                                                    {(provided) => (
-                                </ul>
+                                                        <li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
-                            )}
+                                                    )}
-                        </Droppable>
+                                                </Draggable>
+                                            );
+                                        })}
+                                        {provided.placeholder}
+                                    </ul>
+                                )}
+                            </Droppable>
+                        </div>
                     </DragDropContext>
 
                     <div className="mt-3">

resources/js/index.js

@@ -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>
                                 )} />