{props.homeDashboard &&
+ props.homeDashboard.boxes &&
props.homeDashboard.boxes.map((column, x) => (
(
+
+
+
+
+
+
+
+
+
+
+
+ {props.currentDashboard && (
+
+ )}
+
+
+
+
+
+ {props.currentDashboard && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default EditDashboard;
diff --git a/front/src/routes/dashboard/edit-dashboard/ReorderDashbordList.jsx b/front/src/routes/dashboard/edit-dashboard/ReorderDashbordList.jsx
new file mode 100644
index 0000000000..5dc5d97780
--- /dev/null
+++ b/front/src/routes/dashboard/edit-dashboard/ReorderDashbordList.jsx
@@ -0,0 +1,95 @@
+import { useRef } from 'preact/hooks';
+import { Component } from 'preact';
+import cx from 'classnames';
+import update from 'immutability-helper';
+import { route } from 'preact-router';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { TouchBackend } from 'react-dnd-touch-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+
+const DASHBOARD_LIST_ITEM_TYPE = 'DASHBOARD_LIST_ITEM';
+
+const DashboardListItem = ({ children, ...props }) => {
+ const { index } = props;
+ const ref = useRef(null);
+ const [{ isDragging }, drag, preview] = useDrag(() => ({
+ type: DASHBOARD_LIST_ITEM_TYPE,
+ item: () => {
+ return { index };
+ },
+ collect: monitor => ({
+ isDragging: !!monitor.isDragging()
+ })
+ }));
+ const [{ isActive }, drop] = useDrop({
+ accept: DASHBOARD_LIST_ITEM_TYPE,
+ collect: monitor => ({
+ isActive: monitor.canDrop() && monitor.isOver()
+ }),
+ drop(item) {
+ if (!ref.current) {
+ return;
+ }
+ props.insertAtPosition(item.index, index);
+ }
+ });
+ const openEditPage = () => {
+ route(`/dashboard/${props.selector}/edit`);
+ };
+ preview(drop(ref));
+
+ return (
+
+ {props.name}
+
+ );
+};
+
+class RedorderDashboardList extends Component {
+ isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+
+ insertAtPosition = (sourceIndex, destinationIndex) => {
+ const { dashboards } = this.props;
+ const element = dashboards[sourceIndex];
+ const newDashboards = update(dashboards, {
+ $splice: [
+ [sourceIndex, 1],
+ [destinationIndex, 0, element]
+ ]
+ });
+ this.props.updateDashboardList(newDashboards);
+ };
+
+ render({ dashboards, currentDashboard }, {}) {
+ return (
+
+
+ {dashboards &&
+ dashboards.map((dashboard, index) => (
+
+ ))}
+
+
+ );
+ }
+}
+
+export default RedorderDashboardList;
diff --git a/front/src/routes/dashboard/edit-dashboard/index.js b/front/src/routes/dashboard/edit-dashboard/index.js
new file mode 100644
index 0000000000..c3fa49adc3
--- /dev/null
+++ b/front/src/routes/dashboard/edit-dashboard/index.js
@@ -0,0 +1,349 @@
+import { Component } from 'preact';
+import { connect } from 'unistore/preact';
+import { route } from 'preact-router';
+import update from 'immutability-helper';
+import EditDashboardPage from './EditDashboard';
+import get from 'get-value';
+
+class EditDashboard extends Component {
+ getDashboards = async () => {
+ try {
+ await this.setState({
+ getDashboardsError: false,
+ loading: true
+ });
+ const dashboards = await this.props.httpClient.get('/api/v1/dashboard');
+ let currentDashboardSelector;
+ if (this.props.dashboardSelector) {
+ currentDashboardSelector = this.props.dashboardSelector;
+ } else if (dashboards.length > 0) {
+ currentDashboardSelector = dashboards[0].selector;
+ }
+ await this.setState({
+ dashboards,
+ currentDashboardSelector,
+ getDashboardsError: false,
+ loading: false
+ });
+ } catch (e) {
+ console.error(e);
+ this.setState({ loading: false });
+ const status = get(e, 'response.status');
+ const errorMessage = get(e, 'response.error_message');
+ // in case we are on the gateway (Gladys Plus)
+ if (status === 404 && errorMessage === 'NO_INSTANCE_FOUND') {
+ this.setState({
+ gatewayInstanceNotFound: true
+ });
+ } else {
+ this.setState({
+ getDashboardsError: true
+ });
+ }
+ }
+ };
+
+ getCurrentDashboard = async () => {
+ try {
+ await this.setState({ loading: true });
+ const currentDashboard = await this.props.httpClient.get(
+ `/api/v1/dashboard/${this.state.currentDashboardSelector}`
+ );
+ this.setState({
+ currentDashboard,
+ loading: false
+ });
+ } catch (e) {
+ this.setState({
+ loading: false
+ });
+ console.error(e);
+ }
+ };
+
+ init = async () => {
+ await this.getDashboards();
+ if (this.state.currentDashboardSelector) {
+ await this.getCurrentDashboard();
+ }
+ };
+
+ cancelDashboardEdit = async () => {
+ route(`/dashboard/${this.state.currentDashboardSelector}`);
+ };
+
+ moveCard = async (originalX, originalY, destX, destY) => {
+ // incorrect coordinates
+ if (destX < 0 || destY < 0) {
+ return null;
+ }
+ if (destX >= this.state.currentDashboard.boxes.length || destY >= this.state.currentDashboard.boxes[destX].length) {
+ return null;
+ }
+ const element = this.state.currentDashboard.boxes[originalX][originalY];
+ const newStateWithoutElement = update(this.state, {
+ currentDashboard: {
+ boxes: {
+ [originalX]: {
+ $splice: [[originalY, 1]]
+ }
+ }
+ }
+ });
+ const newState = update(newStateWithoutElement, {
+ currentDashboard: {
+ boxes: {
+ [destX]: {
+ $splice: [[destY, 0, element]]
+ }
+ }
+ }
+ });
+ await this.setState(newState);
+ };
+
+ moveBoxDown = (x, y) => {
+ this.moveCard(x, y, x, y + 1);
+ };
+
+ moveBoxUp = (x, y) => {
+ this.moveCard(x, y, x, y - 1);
+ };
+
+ addBox = x => {
+ if (this.state.newSelectedBoxType && this.state.newSelectedBoxType[x]) {
+ const newState = update(this.state, {
+ currentDashboard: {
+ boxes: {
+ [x]: {
+ $push: [
+ {
+ type: this.state.newSelectedBoxType[x]
+ }
+ ]
+ }
+ }
+ }
+ });
+ this.setState(newState);
+ }
+ };
+
+ removeBox = (x, y) => {
+ const newState = update(this.state, {
+ currentDashboard: {
+ boxes: {
+ [x]: {
+ $splice: [[y, 1]]
+ }
+ }
+ }
+ });
+ this.setState(newState);
+ };
+
+ updateCurrentDashboardName = e => {
+ const newState = update(this.state, {
+ currentDashboard: {
+ name: {
+ $set: e.target.value
+ }
+ }
+ });
+ this.setState(newState);
+ };
+
+ updateBoxConfig = (x, y, data) => {
+ const newState = update(this.state, {
+ currentDashboard: {
+ boxes: {
+ [x]: {
+ [y]: {
+ $merge: data
+ }
+ }
+ }
+ }
+ });
+ this.setState(newState);
+ };
+
+ updateNewSelectedBox = (x, type) => {
+ const newSelectedBoxType = Object.assign({}, this.state.newSelectedBoxType, {
+ [x]: type
+ });
+ this.setState({
+ newSelectedBoxType
+ });
+ };
+
+ saveDashboard = async () => {
+ this.setState({
+ loading: true,
+ dashboardValidationError: false,
+ dashboardAlreadyExistError: false,
+ unknownError: false
+ });
+ try {
+ const { currentDashboard: selectedDashboard, dashboards } = this.state;
+ const { selector } = selectedDashboard;
+
+ const currentDashboard = await this.props.httpClient.patch(
+ `/api/v1/dashboard/${selector}`,
+ this.state.currentDashboard
+ );
+
+ const currentDashboardIndex = dashboards.findIndex(d => d.selector === selector);
+ const updatedDashboards = update(dashboards, {
+ [currentDashboardIndex]: {
+ $set: currentDashboard
+ }
+ });
+
+ await this.setState({
+ currentDashboard,
+ loading: false,
+ dashboards: updatedDashboards
+ });
+ route(`/dashboard/${currentDashboard.selector}`);
+ } catch (e) {
+ if (e.response && e.response.status === 422) {
+ this.setState({
+ dashboardValidationError: true
+ });
+ } else if (e.response && e.response.status === 409) {
+ this.setState({
+ dashboardAlreadyExistError: true
+ });
+ } else {
+ this.setState({
+ unknownError: true
+ });
+ }
+ }
+ };
+
+ askDeleteCurrentDashboard = async () => {
+ await this.setState({
+ askDeleteDashboard: true
+ });
+ };
+
+ cancelDeleteCurrentDashboard = async () => {
+ await this.setState({
+ askDeleteDashboard: false
+ });
+ };
+
+ deleteCurrentDashboard = async () => {
+ try {
+ await this.props.httpClient.delete(`/api/v1/dashboard/${this.state.currentDashboard.selector}`);
+ const dashboardIndex = this.state.dashboards.findIndex(d => d.id === this.state.currentDashboard.id);
+ const dashboards = update(this.state.dashboards, {
+ $splice: [[dashboardIndex, 1]]
+ });
+ const currentDashboard = dashboards.length > 0 ? dashboards[0] : null;
+ await this.setState({
+ askDeleteDashboard: false
+ });
+ if (currentDashboard === null) {
+ route('/dashboard');
+ } else {
+ route(`/dashboard/${currentDashboard.selector}/edit`);
+ }
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ updateDashboardList = async newDashboards => {
+ await this.setState({
+ savingNewDashboardList: true,
+ dashboards: newDashboards
+ });
+ try {
+ const dashboardSelectors = this.state.dashboards.map(d => d.selector);
+ await this.props.httpClient.post('/api/v1/dashboard/order', dashboardSelectors);
+ } catch (e) {
+ console.error(e);
+ }
+ this.setState({
+ savingNewDashboardList: false
+ });
+ };
+
+ constructor(props) {
+ super(props);
+ this.props = props;
+ this.state = {
+ dashboards: [],
+ newSelectedBoxType: {},
+ askDeleteDashboard: false
+ };
+ }
+
+ componentDidMount() {
+ this.init();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.currentUrl !== this.props.currentUrl) {
+ this.init();
+ }
+ }
+
+ render(
+ props,
+ {
+ dashboards,
+ currentDashboard,
+ loading,
+ dashboardValidationError,
+ dashboardAlreadyExistError,
+ unknownError,
+ askDeleteDashboard,
+ savingNewDashboardList
+ }
+ ) {
+ const dashboardConfigured =
+ currentDashboard &&
+ currentDashboard.boxes &&
+ ((currentDashboard.boxes[0] && currentDashboard.boxes[0].length > 0) ||
+ (currentDashboard.boxes[1] && currentDashboard.boxes[1].length > 0) ||
+ (currentDashboard.boxes[2] && currentDashboard.boxes[2].length > 0));
+ const dashboardListEmpty = !(dashboards && dashboards.length > 0);
+ const dashboardNotConfigured = !dashboardConfigured;
+ return (
+
+ );
+ }
+}
+
+export default connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', {})(EditDashboard);
diff --git a/front/src/routes/dashboard/index.js b/front/src/routes/dashboard/index.js
index 86ac5e7bd3..9b8bba19ba 100644
--- a/front/src/routes/dashboard/index.js
+++ b/front/src/routes/dashboard/index.js
@@ -11,7 +11,6 @@ extend('$auto', (value, object) => {
return object ? update(object, value) : update({}, value);
});
-@connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', actions)
class Dashboard extends Component {
toggleDashboardDropdown = () => {
this.setState(prevState => {
@@ -88,7 +87,7 @@ class Dashboard extends Component {
};
editDashboard = () => {
- this.setState(prevState => ({ ...prevState, dashboardEditMode: !prevState.dashboardEditMode }));
+ route(`/dashboard/${this.state.currentDashboard.selector}/edit`);
};
cancelDashboardEdit = async () => {
@@ -319,12 +318,45 @@ class Dashboard extends Component {
this.props.setFullScreen(isFullScreen);
};
+ toggleReorderDashboard = () => {
+ if (this.state.showReorderDashboard) {
+ this.saveNewDashboardList();
+ } else {
+ this.setState({ showReorderDashboard: !this.state.showReorderDashboard });
+ }
+ };
+
+ updateDashboardList = newDashboards => {
+ this.setState({
+ dashboards: newDashboards
+ });
+ };
+
+ saveNewDashboardList = async () => {
+ await this.setState({
+ savingNewDashboardList: true
+ });
+ try {
+ const dashboardSelectors = this.state.dashboards.map(d => d.selector);
+ await this.props.httpClient.post('/api/v1/dashboard/order', dashboardSelectors);
+ this.setState({
+ showReorderDashboard: false
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ this.setState({
+ savingNewDashboardList: false
+ });
+ };
+
constructor(props) {
super(props);
this.props = props;
this.state = {
dashboardDropdownOpened: false,
dashboardEditMode: false,
+ showReorderDashboard: false,
browserFullScreenCompatible: this.isBrowserFullScreenCompatible(),
dashboards: [],
newSelectedBoxType: {},
@@ -364,7 +396,9 @@ class Dashboard extends Component {
dashboardValidationError,
dashboardAlreadyExistError,
unknownError,
- askDeleteDashboard
+ askDeleteDashboard,
+ showReorderDashboard,
+ savingNewDashboardList
}
) {
const dashboardConfigured =
@@ -411,9 +445,13 @@ class Dashboard extends Component {
deleteCurrentDashboard={this.deleteCurrentDashboard}
askDeleteDashboard={askDeleteDashboard}
fullScreen={props.fullScreen}
+ showReorderDashboard={showReorderDashboard}
+ toggleReorderDashboard={this.toggleReorderDashboard}
+ updateDashboardList={this.updateDashboardList}
+ savingNewDashboardList={savingNewDashboardList}
/>
);
}
}
-export default Dashboard;
+export default connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', actions)(Dashboard);
diff --git a/front/src/routes/dashboard/new-dashboard/index.js b/front/src/routes/dashboard/new-dashboard/index.js
index 5f2da5ca87..03e0a19ca7 100644
--- a/front/src/routes/dashboard/new-dashboard/index.js
+++ b/front/src/routes/dashboard/new-dashboard/index.js
@@ -1,17 +1,28 @@
import { Component } from 'preact';
import { Text, Localizer } from 'preact-i18n';
import { connect } from 'unistore/preact';
-import { Link } from 'preact-router/match';
import { route } from 'preact-router';
+import { Link } from 'preact-router/match';
import cx from 'classnames';
import { DASHBOARD_TYPE } from '../../../../../server/utils/constants';
import style from './style.css';
const NewDashboardPage = ({ children, ...props }) => (
-
-
-
+
+
+ {props.prev && (
+
+
+
+ )}
+ {!props.prev && (
+
+
+
+ )}
+
+
);
-@connect('user,httpClient', {})
class Dashboard extends Component {
updateName = e => {
this.setState({ name: e.target.value });
};
+ goBack = () => {
+ this.props.history.go(-1);
+ };
createDashboard = async e => {
e.preventDefault();
await this.setState({
@@ -88,7 +101,7 @@ class Dashboard extends Component {
};
const createDashboard = await this.props.httpClient.post('/api/v1/dashboard', newDashboard);
this.setState({ loading: false, dashboardAlreadyExistError: false, unknownError: false });
- route(`/dashboard/${createDashboard.selector}`);
+ route(`/dashboard/${createDashboard.selector}/edit`);
} catch (e) {
if (e.response && e.response.status === 409) {
this.setState({ dashboardAlreadyExistError: true });
@@ -116,9 +129,11 @@ class Dashboard extends Component {
unknownError={unknownError}
updateName={this.updateName}
createDashboard={this.createDashboard}
+ goBack={this.goBack}
+ prev={props.prev}
/>
);
}
}
-export default Dashboard;
+export default connect('user,httpClient', {})(Dashboard);
diff --git a/front/src/routes/dashboard/new-dashboard/style.css b/front/src/routes/dashboard/new-dashboard/style.css
index f5d0c084cf..67d7c9bea1 100644
--- a/front/src/routes/dashboard/new-dashboard/style.css
+++ b/front/src/routes/dashboard/new-dashboard/style.css
@@ -1,3 +1,10 @@
.containerWithMargin {
margin-top: 3rem;
}
+
+@media (max-width: 768px) {
+ .backButtonDiv {
+ margin-bottom: 1rem;
+ max-width: 24rem;
+ }
+}
diff --git a/front/src/routes/dashboard/style.css b/front/src/routes/dashboard/style.css
index 61fe47589b..a85d039109 100644
--- a/front/src/routes/dashboard/style.css
+++ b/front/src/routes/dashboard/style.css
@@ -1,6 +1,5 @@
.emptyStateDivBox {
- width: 60%;
- max-width: 400px;
+ max-width: 450px;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
@@ -19,6 +18,10 @@
margin-top: 20px;
}
+.largeContainer {
+ max-width: 1600px;
+}
+
@media (min-width: 992px) {
.removePaddingFirstCol {
padding-left: 0;
@@ -45,3 +48,25 @@
border-radius: 3px;
}
}
+
+.collapse {
+ max-height: 0;
+ transition: max-height 0.25s ease-out;
+ overflow: hidden;
+}
+
+.showCollapse {
+ max-height: 500px;
+ overflow: auto;
+ transition: max-height 0.5s ease-in;
+}
+
+.editDashboardText {
+ display: inline;
+}
+
+@media (max-width: 992px) {
+ .editDashboardText {
+ display: none;
+ }
+}
diff --git a/server/api/controllers/dashboard.controller.js b/server/api/controllers/dashboard.controller.js
index 14fc3d66dc..fcf2b343cf 100644
--- a/server/api/controllers/dashboard.controller.js
+++ b/server/api/controllers/dashboard.controller.js
@@ -16,7 +16,7 @@ const asyncMiddleware = require('../middlewares/asyncMiddleware');
* @apiSuccess {Array} [boxes] Array of boxes in the dashboard.
*/
-module.exports = function HouseController(gladys) {
+module.exports = function DashboardController(gladys) {
/**
* @api {post} /api/v1/dashboard create
* @apiName createDashoard
@@ -52,6 +52,17 @@ module.exports = function HouseController(gladys) {
res.json(dashboard);
}
+ /**
+ * @api {post} /api/v1/dashboard/order updateOrder
+ * @apiName updateOrder
+ * @apiGroup Dashboard
+ * @apiParam {Array} [selectors] Array of selectors in new order.
+ */
+ async function updateOrder(req, res) {
+ await gladys.dashboard.updateOrder(req.user.id, req.body);
+ res.json({ success: true });
+ }
+
/**
* @api {get} /api/v1/dashboard/:dashboard_selector getBySelector
* @apiName getBySelector
@@ -82,5 +93,6 @@ module.exports = function HouseController(gladys) {
get: asyncMiddleware(get),
getBySelector: asyncMiddleware(getBySelector),
update: asyncMiddleware(update),
+ updateOrder: asyncMiddleware(updateOrder),
});
};
diff --git a/server/api/routes.js b/server/api/routes.js
index 6e2f162e4b..cb8edcc46a 100644
--- a/server/api/routes.js
+++ b/server/api/routes.js
@@ -174,6 +174,10 @@ function getRoutes(gladys) {
authenticated: true,
controller: dashboardController.create,
},
+ 'post /api/v1/dashboard/order': {
+ authenticated: true,
+ controller: dashboardController.updateOrder,
+ },
'get /api/v1/dashboard/:dashboard_selector': {
authenticated: true,
controller: dashboardController.getBySelector,
diff --git a/server/lib/dashboard/dashboard.create.js b/server/lib/dashboard/dashboard.create.js
index 639972d63b..b8ed6b7732 100644
--- a/server/lib/dashboard/dashboard.create.js
+++ b/server/lib/dashboard/dashboard.create.js
@@ -13,6 +13,19 @@ const db = require('../../models');
* });
*/
async function create(userId, dashboard) {
+ // We try to find if one dashboard already exist, if yes we use the position of this dashboard + 1
+ const dashboardWithTheHighestPosition = await db.Dashboard.findAll({
+ attributes: ['position'],
+ where: {
+ user_id: userId,
+ },
+ order: [['position', 'desc']],
+ limit: 1,
+ raw: true,
+ });
+ if (dashboardWithTheHighestPosition.length > 0) {
+ dashboard.position = dashboardWithTheHighestPosition[0].position + 1;
+ }
return db.Dashboard.create({ ...dashboard, user_id: userId });
}
diff --git a/server/lib/dashboard/dashboard.get.js b/server/lib/dashboard/dashboard.get.js
index 00b84509d1..cdb5ed50df 100644
--- a/server/lib/dashboard/dashboard.get.js
+++ b/server/lib/dashboard/dashboard.get.js
@@ -15,6 +15,7 @@ async function get(userId) {
where: {
user_id: userId,
},
+ order: [['position', 'ASC']],
raw: true,
});
return dashboards;
diff --git a/server/lib/dashboard/dashboard.getBySelector.js b/server/lib/dashboard/dashboard.getBySelector.js
index 1cdfae66ca..1f0ee7648c 100644
--- a/server/lib/dashboard/dashboard.getBySelector.js
+++ b/server/lib/dashboard/dashboard.getBySelector.js
@@ -11,6 +11,7 @@ const { NotFoundError } = require('../../utils/coreErrors');
*/
async function getBySelector(userId, selector) {
const dashboard = await db.Dashboard.findOne({
+ attributes: ['id', 'name', 'selector', 'type', 'created_at', 'updated_at', 'boxes'],
where: {
user_id: userId,
selector,
diff --git a/server/lib/dashboard/dashboard.updateOrder.js b/server/lib/dashboard/dashboard.updateOrder.js
new file mode 100644
index 0000000000..f3861c0146
--- /dev/null
+++ b/server/lib/dashboard/dashboard.updateOrder.js
@@ -0,0 +1,28 @@
+const Promise = require('bluebird');
+const db = require('../../models');
+
+/**
+ * @description Update a dashboard.
+ * @param {string} userId - The userId querying.
+ * @param {Array
} dashboards - Dashboard selectors new order.
+ * @example
+ * gladys.dashboard.updateOrder('483b68cb-15ef-4ea3-80df-1e1bed5b402d', ['my-dashboard', 'other-dashboard']);
+ */
+async function updateOrder(userId, dashboards) {
+ // Foreach dashboard, update its position
+ await Promise.each(dashboards, async (dashboard, index) => {
+ await db.Dashboard.update(
+ { position: index },
+ {
+ where: {
+ user_id: userId,
+ selector: dashboard,
+ },
+ },
+ );
+ });
+}
+
+module.exports = {
+ updateOrder,
+};
diff --git a/server/lib/dashboard/index.js b/server/lib/dashboard/index.js
index 144c0a0390..37ac3ca9b8 100644
--- a/server/lib/dashboard/index.js
+++ b/server/lib/dashboard/index.js
@@ -3,6 +3,7 @@ const { get } = require('./dashboard.get');
const { destroy } = require('./dashboard.destroy');
const { getBySelector } = require('./dashboard.getBySelector');
const { update } = require('./dashboard.update');
+const { updateOrder } = require('./dashboard.updateOrder');
const Dashboard = function Dashboard() {};
@@ -11,5 +12,6 @@ Dashboard.prototype.destroy = destroy;
Dashboard.prototype.get = get;
Dashboard.prototype.getBySelector = getBySelector;
Dashboard.prototype.update = update;
+Dashboard.prototype.updateOrder = updateOrder;
module.exports = Dashboard;
diff --git a/server/migrations/20230130044921-add-position-dashboard.js b/server/migrations/20230130044921-add-position-dashboard.js
new file mode 100644
index 0000000000..c5a866e53f
--- /dev/null
+++ b/server/migrations/20230130044921-add-position-dashboard.js
@@ -0,0 +1,10 @@
+module.exports = {
+ up: async (queryInterface, Sequelize) => {
+ await queryInterface.addColumn('t_dashboard', 'position', {
+ type: Sequelize.INTEGER,
+ allowNull: false,
+ defaultValue: 0,
+ });
+ },
+ down: async (queryInterface, Sequelize) => {},
+};
diff --git a/server/models/dashboard.js b/server/models/dashboard.js
index a32a4d648a..7f72ec4de2 100644
--- a/server/models/dashboard.js
+++ b/server/models/dashboard.js
@@ -55,6 +55,11 @@ module.exports = (sequelize, DataTypes) => {
allowNull: false,
type: DataTypes.ENUM(DASHBOARD_TYPE_LIST),
},
+ position: {
+ allowNull: false,
+ type: DataTypes.INTEGER,
+ defaultValue: 0,
+ },
selector: {
allowNull: false,
unique: true,
diff --git a/server/test/controllers/dashboard/dashboard.controller.test.js b/server/test/controllers/dashboard/dashboard.controller.test.js
index 36fc7696fb..baf739500a 100644
--- a/server/test/controllers/dashboard/dashboard.controller.test.js
+++ b/server/test/controllers/dashboard/dashboard.controller.test.js
@@ -8,6 +8,7 @@ describe('POST /api/v1/dashboard', () => {
.send({
name: 'my dashboard',
type: 'main',
+ position: 0,
boxes: [
[
{
@@ -56,7 +57,6 @@ describe('GET /api/v1/dashboard/:dashboard_selector', () => {
id: '854dda11-80c0-4476-843b-65cbc95c6a85',
name: 'Test dashboard',
selector: 'test-dashboard',
- user_id: '0cd30aef-9c4e-4a23-88e3-3547971296e5',
type: 'main',
boxes: [
[
@@ -86,6 +86,7 @@ describe('PATCH /api/v1/dashboard/:dashboard_selector', () => {
id: '854dda11-80c0-4476-843b-65cbc95c6a85',
name: 'new name',
selector: 'test-dashboard',
+ position: 0,
user_id: '0cd30aef-9c4e-4a23-88e3-3547971296e5',
type: 'main',
boxes: [
@@ -102,6 +103,16 @@ describe('PATCH /api/v1/dashboard/:dashboard_selector', () => {
});
});
+describe('POST /api/v1/dashboard/order', () => {
+ it('should update order of dashboards', async () => {
+ await authenticatedRequest
+ .post('/api/v1/dashboard/order')
+ .send(['test-dashboard'])
+ .expect('Content-Type', /json/)
+ .expect(200);
+ });
+});
+
describe('DELETE /api/v1/dashboard/:dashboard_selector', () => {
it('should patch dashboard', async () => {
await authenticatedRequest
diff --git a/server/test/lib/dashboard/dashboard.test.js b/server/test/lib/dashboard/dashboard.test.js
index c4b0624b53..b7ef928167 100644
--- a/server/test/lib/dashboard/dashboard.test.js
+++ b/server/test/lib/dashboard/dashboard.test.js
@@ -2,6 +2,7 @@ const { expect, assert } = require('chai');
const { DASHBOARD_BOX_TYPE, DASHBOARD_TYPE } = require('../../../utils/constants');
const Dashboard = require('../../../lib/dashboard');
+const db = require('../../../models');
describe('dashboard.create', () => {
const dashboard = new Dashboard();
@@ -9,6 +10,7 @@ describe('dashboard.create', () => {
const newDashboard = await dashboard.create('0cd30aef-9c4e-4a23-88e3-3547971296e5', {
name: 'My new dashboard',
type: DASHBOARD_TYPE.MAIN,
+ position: 0,
boxes: [
[
{
@@ -76,6 +78,34 @@ describe('dashboard.update', () => {
});
});
+describe('dashboard.updateOrder', () => {
+ const dashboard = new Dashboard();
+ it('should update the order of dashboards', async () => {
+ const newDashboard = await dashboard.create('0cd30aef-9c4e-4a23-88e3-3547971296e5', {
+ name: 'My new dashboard',
+ type: DASHBOARD_TYPE.MAIN,
+ position: 0,
+ boxes: [
+ [
+ {
+ type: DASHBOARD_BOX_TYPE.USER_PRESENCE,
+ },
+ ],
+ ],
+ });
+ await dashboard.updateOrder('0cd30aef-9c4e-4a23-88e3-3547971296e5', [newDashboard.selector, 'test-dashboard']);
+ const dashboardsInNewOrder = await db.Dashboard.findAll({
+ attributes: ['selector', 'position'],
+ order: [['position', 'asc']],
+ raw: true,
+ });
+ expect(dashboardsInNewOrder).to.deep.equal([
+ { selector: 'my-new-dashboard', position: 0 },
+ { selector: 'test-dashboard', position: 1 },
+ ]);
+ });
+});
+
describe('dashboard.destroy', () => {
const dashboard = new Dashboard();
it('should destroy a dashoard', async () => {