Add column functionality to EditDashboard component

front/src/config/i18n/de.json

@@ -247,6 +247,8 @@
       "private": "privat",
       "public": "öffentlich"
     },
+    "editDashboardAddColumnButton": "Eine Spalte zum Dashboard hinzufügen",
+    "editDashboardBoxNotEmpty": "Sie können diese Spalte nicht löschen, da sie Widgets enthält.",
     "editDashboardMyDashboards": "Meine Dashboards",
     "editDashboardExplanation": "Jedes Dashboard hat 3 Spalten, die du nach Belieben füllen kannst. Klicke auf \"+\", um ein neues Widget hinzuzufügen. Du kannst dieses Widget bewegen, indem du es greifst und verschiebst.",
     "reorderDashboardButton": "Dashboards neu anordnen",

front/src/config/i18n/en.json

@@ -247,6 +247,8 @@
       "private": "private",
       "public": "public"
     },
+    "editDashboardAddColumnButton": "Add a column on dashboard",
+    "editDashboardBoxNotEmpty": "You cannot delete this column as it contains widgets.",
     "editDashboardMyDashboards": "My dashboards",
     "editDashboardExplanation": "Each dashboard has 3 columns, which you can fill in according to your preferences. Click on the + button to add a new widget. You can move this widget by grabbing it and moving it around.",
     "reorderDashboardButton": "Re-order dashboards",

front/src/config/i18n/fr.json

@@ -247,6 +247,8 @@
       "private": "privé",
       "public": "public"
     },
+    "editDashboardAddColumnButton": "Ajouter une colonne au tableau de bord",
+    "editDashboardBoxNotEmpty": "Vous ne pouvez pas supprimer cette colonne car elle contient des widgets.",
     "editDashboardMyDashboards": "Mes tableaux de bords",
     "editDashboardExplanation": "Chaque tableau de bord comporte 3 colonnes, que vous pouvez remplir selon vos préférences. Cliquez sur le bouton + pour ajouter un nouveau widget. Vous pouvez déplacer ce widget en l'attrapant et en le déplaçant.",
     "reorderDashboardButton": "Re-ordonner",

front/src/routes/dashboard/BoxColumns.jsx

@@ -2,23 +2,28 @@ import Box from './Box';
 import cx from 'classnames';
 import style from './style.css';
 
-const BoxColumns = ({ children, ...props }) => (
-  <div class="d-flex flex-row flex-wrap justify-content-center">
-    {props.homeDashboard &&
-      props.homeDashboard.boxes.map((column, x) => (
-        <div
-          class={cx('d-flex flex-column col-lg-4', {
-            [style.removePaddingFirstCol]: x === 0,
-            [style.removePaddingLastCol]: x === 2,
-            [style.removePadding]: true // it will remove padding when in mobile view
-          })}
-        >
-          {column.map((box, y) => (
-            <Box key={`${props.homeDashboard.id}-${x}-${y}`} box={box} x={x} y={y} />
-          ))}
-        </div>
-      ))}
-  </div>
-);
+const BoxColumns = ({ children, ...props }) => {
+  const boxesLength = props.homeDashboard.boxes.length;
+  const columnClass = `col-lg-${12 / boxesLength}`;
+
+  return (
+    <div class="d-flex flex-row flex-wrap justify-content-center">
+      {props.homeDashboard &&
+        props.homeDashboard.boxes.map((column, x) => (
+          <div
+            class={cx('d-flex flex-column', columnClass, style.removePadding, {
+              [style.removePaddingFirstCol]: x === 0,
+              [style.removePaddingLastCol]: x === boxesLength - 1,
+              [style.removePadding]: true // it will remove padding when in mobile view
+            })}
+          >
+            {column.map((box, y) => (
+              <Box key={`${props.homeDashboard.id}-${x}-${y}`} box={box} x={x} y={y} />
+            ))}
+          </div>
+        ))}
+    </div>
+  );
+};
 
 export default BoxColumns;

front/src/routes/dashboard/edit-dashboard/EditBoxColumns.jsx

@@ -8,10 +8,15 @@ import EditBox from './EditBox';
 import EmptyColumnDropZone from './EmptyColumnDropZone';
 import BottomDropZone from './BottomDropZone';
 import AutoScrollMobile from '../../../components/drag-and-drop/AutoScrollMobile';
-import style from '../style.css';
+import style from './style.css';
+import stylePrimary from '../style.css';
 import { DASHBOARD_VISIBILITY_LIST } from '../../../../../server/utils/constants';
 
 const DASHBOARD_EDIT_BOX_TYPE = 'DASHBOARD_EDIT_BOX';
+const maxBoxes = 3;
+const getBoxesLength = props => {
+  return props.homeDashboard.boxes.length;
+};
 
 const EditBoxColumns = ({ children, ...props }) => (
   <div class="pb-6">
@@ -89,7 +94,7 @@ const EditBoxColumns = ({ children, ...props }) => (
         <Text id="dashboard.editDashboardExplanation" />
       </div>
     </div>
-    <div class="row mb-6">
+    <div class="row mb-4">
       <div class="col-md-4 d-lg-none d-xl-none">
         <button
           class={cx('btn', {
@@ -106,44 +111,77 @@ const EditBoxColumns = ({ children, ...props }) => (
     </div>
     <DndProvider backend={props.isTouchDevice ? TouchBackend : HTML5Backend}>
       {props.isMobileReordering && <AutoScrollMobile position="top" box_type={DASHBOARD_EDIT_BOX_TYPE} />}
-      <div class="d-flex flex-row flex-wrap justify-content-center">
+      <div class={cx('d-flex align-items-start', style.columnsCard)}>
         {props.homeDashboard &&
           props.homeDashboard.boxes &&
           props.homeDashboard.boxes.map((column, x) => (
             <div
-              class={cx('d-flex flex-column col-lg-4', style.removePadding, {
-                [style.removePaddingFirstCol]: x === 0,
-                [style.removePaddingLastCol]: x === 2
+              class={cx('d-flex flex-column', style.column, stylePrimary.removePadding, {
+                [stylePrimary.removePaddingFirstCol]: x === 0,
+                [stylePrimary.removePaddingLastCol]: x === maxBoxes - 1
               })}
             >
-              <h3 class="text-center">
-                <Text id="dashboard.boxes.column" fields={{ index: x + 1 }} />
-              </h3>
-
-              {column.length > 0 && (
-                <div>
-                  {column.map((box, y) => (
-                    <EditBox {...props} box={box} x={x} y={y} isMobileReordering={props.isMobileReordering} />
-                  ))}
-                  <BottomDropZone
-                    moveCard={props.moveCard}
-                    x={x}
-                    y={column.length}
-                    isMobileReordering={props.isMobileReordering}
-                  />
+              <div class={cx('d-flex', 'justify-content-center', style.columnBoxHeader)}>
+                <h3 class="d-flex justify-content-center text-center">
+                  <Text id="dashboard.boxes.column" fields={{ index: x + 1 }} />
+                  {getBoxesLength(props) > 1 && (
+                    <button
+                      class={cx('btn p-0 ml-2', style.btnLinkDelete)}
+                      onClick={() => props.deleteCurrentColumn(x)}
+                    >
+                      <i class="fe fe-trash" />
+                    </button>
+                  )}
+                </h3>
+              </div>
+              {props.boxNotEmptyError && props.columnBoxNotEmptyError === x && (
+                <div class="alert alert-danger d-flex justify-content-center mb-4">
+                  <Text id="dashboard.editDashboardBoxNotEmpty" />
                 </div>
               )}
+              <div>
+                {column.length > 0 && (
+                  <div>
+                    {column.map((box, y) => (
+                      <EditBox {...props} box={box} x={x} y={y} isMobileReordering={props.isMobileReordering} />
+                    ))}
+                    <BottomDropZone
+                      moveCard={props.moveCard}
+                      x={x}
+                      y={column.length}
+                      isMobileReordering={props.isMobileReordering}
+                    />
+                  </div>
+                )}
 
-              {column.length === 0 && <EmptyColumnDropZone moveCard={props.moveCard} x={x} />}
+                {column.length === 0 && <EmptyColumnDropZone moveCard={props.moveCard} x={x} />}
 
-              {props.isMobileReordering && <AutoScrollMobile position="bottom" box_type={DASHBOARD_EDIT_BOX_TYPE} />}
-              <div class="d-flex justify-content-center mb-4">
-                <button class="btn btn-primary" onClick={() => props.addBox(x)}>
-                  <Text id="dashboard.addBoxButton" /> <i class="fe fe-plus" />
-                </button>
+                {props.isMobileReordering && <AutoScrollMobile position="bottom" box_type={DASHBOARD_EDIT_BOX_TYPE} />}
+                <div class="d-flex justify-content-center mb-4">
+                  <button class="btn btn-primary" onClick={() => props.addBox(x)}>
+                    <Text id="dashboard.addBoxButton" /> <i class="fe fe-plus" />
+                  </button>
+                </div>
               </div>
             </div>
           ))}
+        {getBoxesLength(props) < maxBoxes && (
+          <div class={cx('d-flex flex-column', style.columnAddButton)}>
+            <div class={cx(style.columnBoxHeader)} />
+            <Localizer>
+              <button
+                class={cx('btn btn-outline-primary', style.btnAddColumn)}
+                onClick={() => props.addColumn(getBoxesLength(props))}
+                data-title={<Text id="dashboard.editDashboardAddColumnButton" />}
+              >
+                <i class="fe fe-plus" />
+                <div class={cx('d-none', style.displayTextMobile)}>
+                  <Text id="dashboard.editDashboardAddColumnButton" />
+                </div>
+              </button>
+            </Localizer>
+          </div>
+        )}
       </div>
     </DndProvider>
   </div>

front/src/routes/dashboard/edit-dashboard/EditDashboard.jsx

@@ -66,6 +66,10 @@ const EditDashboard = ({ children, ...props }) => (
                           savingNewDashboardList={props.savingNewDashboardList}
                           isMobileReordering={props.isMobileReordering}
                           toggleMobileReorder={props.toggleMobileReorder}
+                          deleteCurrentColumn={props.deleteCurrentColumn}
+                          addColumn={props.addColumn}
+                          boxNotEmptyError={props.boxNotEmptyError}
+                          columnBoxNotEmptyError={props.columnBoxNotEmptyError}
                         />
                       )}
                     </div>

front/src/routes/dashboard/edit-dashboard/index.js

@@ -101,7 +101,7 @@ class EditDashboard extends Component {
         }
       }
     });
-    await this.setState(newState);
+    await this.setState({ ...newState, boxNotEmptyError: false });
   };
 
   addBox = x => {
@@ -127,7 +127,7 @@ class EditDashboard extends Component {
         }
       }
     });
-    await this.setState(newState);
+    await this.setState({ ...newState, boxNotEmptyError: false });
   };
 
   updateCurrentDashboardName = e => {
@@ -164,7 +164,7 @@ class EditDashboard extends Component {
         }
       }
     });
-    this.setState(newState);
+    this.setState({ ...newState, boxNotEmptyError: false });
   };
 
   updateNewSelectedBox = (x, y, type) => {
@@ -252,6 +252,36 @@ class EditDashboard extends Component {
     }
   };
 
+  addColumn = () => {
+    const newState = update(this.state, {
+      currentDashboard: {
+        boxes: {
+          $push: [[]]
+        }
+      }
+    });
+    this.setState({ ...newState, boxNotEmptyError: false });
+  };
+
+  deleteCurrentColumn = async x => {
+    const { boxes } = this.state.currentDashboard;
+    if (boxes[x].length === 0) {
+      const newState = update(this.state, {
+        currentDashboard: {
+          boxes: {
+            $splice: [[x, 1]]
+          }
+        }
+      });
+      await this.setState({ ...newState, boxNotEmptyError: false });
+    } else {
+      this.setState({
+        boxNotEmptyError: true,
+        columnBoxNotEmptyError: x
+      });
+    }
+  };
+
   askDeleteCurrentDashboard = async () => {
     await this.setState({
       askDeleteDashboard: true
@@ -313,6 +343,8 @@ class EditDashboard extends Component {
       dashboards: [],
       newSelectedBoxType: {},
       askDeleteDashboard: false,
+      boxNotEmptyError: false,
+      columnBoxNotEmptyError: null,
       isMobileReordering: false
     };
   }
@@ -337,6 +369,8 @@ class EditDashboard extends Component {
       dashboardAlreadyExistError,
       unknownError,
       askDeleteDashboard,
+      boxNotEmptyError,
+      columnBoxNotEmptyError,
       savingNewDashboardList,
       isMobileReordering
     }
@@ -373,6 +407,10 @@ class EditDashboard extends Component {
         savingNewDashboardList={savingNewDashboardList}
         toggleMobileReorder={this.toggleMobileReorder}
         isMobileReordering={isMobileReordering}
+        addColumn={this.addColumn}
+        deleteCurrentColumn={this.deleteCurrentColumn}
+        boxNotEmptyError={boxNotEmptyError}
+        columnBoxNotEmptyError={columnBoxNotEmptyError}
       />
     );
   }