Add column functionality to EditDashboard component

front/src/config/i18n/de.json

@@ -244,6 +244,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

@@ -244,6 +244,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

@@ -244,6 +244,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,27 @@ 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 columnClass = `col-lg-${12 / props.homeDashboard.boxes.length}`;
+
+  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 === 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>
+  );
+};
 
 export default BoxColumns;

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

@@ -8,145 +8,186 @@ 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 EditBoxColumns = ({ children, ...props }) => (
-  <div class="pb-6">
-    <h3>
-      <Text id="dashboard.editDashboardTitle" />
-    </h3>
-    {props.dashboardAlreadyExistError && (
-      <div class="alert alert-danger">
-        <Text id="newDashboard.dashboardAlreadyExist" />
-      </div>
-    )}{' '}
-    {props.dashboardValidationError && (
-      <div class="alert alert-danger">
-        <Text id="newDashboard.validationError" />
-      </div>
-    )}
-    {props.unknownError && (
-      <div class="alert alert-danger">
-        <Text id="newDashboard.unknownError" />
-      </div>
-    )}
-    <div class="row align-items-end">
-      <div class="col-md-4">
-        <div class="form-group">
-          <label class="form-label">
-            <Text id="dashboard.editDashboardNameLabel" />
-          </label>
-          <Localizer>
-            <input
-              type="text"
-              class="form-control"
-              placeholder={<Text id="dashboard.editDashboardNameLabel" />}
-              value={props.homeDashboard.name}
-              onInput={props.updateCurrentDashboardName}
-            />
-          </Localizer>
+const EditBoxColumns = ({ children, ...props }) => {
+  const lengthBoxes = props.homeDashboard.boxes.length;
+  const columnClass = `col-lg-${lengthBoxes <= 2 ? 10 / lengthBoxes : 4}`;
+
+  return (
+    <div class="pb-6">
+      <h3>
+        <Text id="dashboard.editDashboardTitle" />
+      </h3>
+      {props.dashboardAlreadyExistError && (
+        <div class="alert alert-danger">
+          <Text id="newDashboard.dashboardAlreadyExist" />
+        </div>
+      )}{' '}
+      {props.dashboardValidationError && (
+        <div class="alert alert-danger">
+          <Text id="newDashboard.validationError" />
+        </div>
+      )}
+      {props.unknownError && (
+        <div class="alert alert-danger">
+          <Text id="newDashboard.unknownError" />
+        </div>
+      )}
+      <div class="row align-items-end">
+        <div class="col-md-4">
+          <div class="form-group">
+            <label class="form-label">
+              <Text id="dashboard.editDashboardNameLabel" />
+            </label>
+            <Localizer>
+              <input
+                type="text"
+                class="form-control"
+                placeholder={<Text id="dashboard.editDashboardNameLabel" />}
+                value={props.homeDashboard.name}
+                onInput={props.updateCurrentDashboardName}
+              />
+            </Localizer>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col-md-8">
-        <div class="form-group">
-          <label class="form-label">
-            <Text id="dashboard.editDashboardVisibility" />
-          </label>
-          <small>
-            <Text id="dashboard.editDashboardVisibilityDescription" />
-          </small>
-          {props.user.id !== props.homeDashboard.user_id && (
-            <div>
-              <small>
-                <Text id="dashboard.editDashboardVisibilityNotEditableNotCreator" />
-              </small>
-            </div>
-          )}
-          <Localizer>
-            <select
-              value={props.homeDashboard.visibility}
-              onChange={props.updateCurrentDashboardVisibility}
-              disabled={props.user.id !== props.homeDashboard.user_id}
-              class="form-control"
-            >
-              {DASHBOARD_VISIBILITY_LIST.map(dashboardVisibility => (
-                <option value={dashboardVisibility}>
-                  <Text id={`dashboard.visibilities.${dashboardVisibility}`} />
-                </option>
-              ))}
-            </select>
-          </Localizer>
+      <div class="row">
+        <div class="col-md-8">
+          <div class="form-group">
+            <label class="form-label">
+              <Text id="dashboard.editDashboardVisibility" />
+            </label>
+            <small>
+              <Text id="dashboard.editDashboardVisibilityDescription" />
+            </small>
+            {props.user.id !== props.homeDashboard.user_id && (
+              <div>
+                <small>
+                  <Text id="dashboard.editDashboardVisibilityNotEditableNotCreator" />
+                </small>
+              </div>
+            )}
+            <Localizer>
+              <select
+                value={props.homeDashboard.visibility}
+                onChange={props.updateCurrentDashboardVisibility}
+                disabled={props.user.id !== props.homeDashboard.user_id}
+                class="form-control"
+              >
+                {DASHBOARD_VISIBILITY_LIST.map(dashboardVisibility => (
+                  <option value={dashboardVisibility}>
+                    <Text id={`dashboard.visibilities.${dashboardVisibility}`} />
+                  </option>
+                ))}
+              </select>
+            </Localizer>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="row mb-4">
-      <div class="col-md-12">
-        <Text id="dashboard.editDashboardExplanation" />
+      <div class="row mb-4">
+        <div class="col-md-12">
+          <Text id="dashboard.editDashboardExplanation" />
+        </div>
       </div>
-    </div>
-    <div class="row mb-6">
-      <div class="col-md-4 d-lg-none d-xl-none">
-        <button
-          class={cx('btn', {
-            'btn-secondary': !props.isMobileReordering,
-            'btn-warning': props.isMobileReordering
-          })}
-          onClick={props.toggleMobileReorder}
-        >
-          <i class="fe fe-list mr-2" />
-          {!props.isMobileReordering && <Text id="dashboard.reorderDashboardButton" />}
-          {props.isMobileReordering && <Text id="dashboard.stopReorderingDashboardButton" />}
-        </button>
+      <div class="row mb-4">
+        <div class="col-md-4 d-lg-none d-xl-none">
+          <button
+            class={cx('btn', {
+              'btn-secondary': !props.isMobileReordering,
+              'btn-warning': props.isMobileReordering
+            })}
+            onClick={props.toggleMobileReorder}
+          >
+            <i class="fe fe-list mr-2" />
+            {!props.isMobileReordering && <Text id="dashboard.reorderDashboardButton" />}
+            {props.isMobileReordering && <Text id="dashboard.stopReorderingDashboardButton" />}
+          </button>
+        </div>
       </div>
-    </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">
-        {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
-              })}
-            >
-              <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}
-                  />
+      <DndProvider backend={props.isTouchDevice ? TouchBackend : HTML5Backend}>
+        {props.isMobileReordering && <AutoScrollMobile position="top" box_type={DASHBOARD_EDIT_BOX_TYPE} />}
+        <div class={cx('d-flex flex-row align-items-start', style.columnCard)}>
+          {props.homeDashboard &&
+            props.homeDashboard.boxes &&
+            props.homeDashboard.boxes.map((column, x) => (
+              <div
+                class={cx('d-flex flex-column', columnClass, stylePrimary.removePadding, {
+                  [stylePrimary.removePaddingFirstCol]: x === 0,
+                  [stylePrimary.removePaddingLastCol]: x === 2
+                })}
+              >
+                <div class={cx('d-flex', 'justify-content-center', style.columnBoxesHeader)}>
+                  <h3 class="d-flex justify-content-center text-center">
+                    <Text id="dashboard.boxes.column" fields={{ index: x + 1 }} />
+                    {lengthBoxes > 1 && (
+                      <button
+                        class={cx('btn p-0 ml-2', style.btnLink, 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 class="d-flex flex-column m-0">
+                  {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>
+            ))}
+          {lengthBoxes < 3 && (
+            <div class={cx('d-flex flex-column col-lg-2 justify-content-center pr-0')}>
+              <div class={cx(style.columnBoxesHeader, 'd-flex', 'justify-content-center', 'align-items-center')} />
+              <Localizer>
+                <button
+                  class={cx('btn btn-outline-primary', style.btnAddColumn)}
+                  onClick={() => props.addColumn(lengthBoxes)}
+                  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>
-);
+          )}
+        </div>
+      </DndProvider>
+    </div>
+  );
+};
 
 export default EditBoxColumns;

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>