From a741e26ccbceb8c5c87c1c300d200637af3d4db9 Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Mon, 9 Jan 2023 12:17:06 +0100
Subject: [PATCH] feat: Labels reordering

Closes #289
---
 .../components/BoardActions/BoardActions.jsx  |  3 +
 .../src/components/BoardActions/Filters.jsx   |  3 +
 client/src/components/Card/ActionsPopup.jsx   |  3 +
 client/src/components/Card/Card.jsx           |  3 +
 client/src/components/CardModal/CardModal.jsx |  5 ++
 client/src/components/LabelsStep/Item.jsx     | 76 +++++++++++--------
 .../components/LabelsStep/Item.module.scss    |  9 +--
 .../src/components/LabelsStep/LabelsStep.jsx  | 69 +++++++++++++----
 .../LabelsStep/LabelsStep.module.scss         |  5 ++
 client/src/constants/DroppableTypes.js        |  2 +
 client/src/constants/EntryActionTypes.js      |  1 +
 .../src/containers/BoardActionsContainer.js   |  1 +
 client/src/containers/CardContainer.js        |  1 +
 client/src/containers/CardModalContainer.js   |  1 +
 client/src/entry-actions/labels.js            |  9 +++
 client/src/models/Board.js                    |  4 +
 client/src/models/Label.js                    |  1 +
 client/src/sagas/core/services/labels.js      | 19 ++++-
 client/src/sagas/core/watchers/labels.js      |  3 +
 client/src/selectors/boards.js                | 11 ++-
 client/src/selectors/core.js                  | 17 +++++
 client/src/selectors/index.js                 |  2 +
 client/src/selectors/labels.js                | 25 ++++++
 server/api/controllers/labels/create.js       |  6 +-
 server/api/controllers/labels/update.js       |  6 +-
 server/api/helpers/boards/get-labels.js       | 16 +++-
 server/api/helpers/labels/create-one.js       | 28 +++++++
 server/api/helpers/labels/get-many.js         |  2 +-
 server/api/helpers/labels/update-one.js       | 40 ++++++++++
 server/api/models/Label.js                    |  4 +
 ...220713145452_add_position_to_task_table.js | 45 +----------
 .../20230108213138_labels_reordering.js       |  5 ++
 server/utils/migrations.js                    | 49 ++++++++++++
 33 files changed, 370 insertions(+), 104 deletions(-)
 create mode 100644 client/src/selectors/labels.js
 create mode 100644 server/db/migrations/20230108213138_labels_reordering.js
 create mode 100644 server/utils/migrations.js

diff --git a/client/src/components/BoardActions/BoardActions.jsx b/client/src/components/BoardActions/BoardActions.jsx
index d0cf2ee4..0f1d552f 100644
--- a/client/src/components/BoardActions/BoardActions.jsx
+++ b/client/src/components/BoardActions/BoardActions.jsx
@@ -25,6 +25,7 @@ const BoardActions = React.memo(
     onLabelFromFilterRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     return (
@@ -54,6 +55,7 @@ const BoardActions = React.memo(
               onLabelRemove={onLabelFromFilterRemove}
               onLabelCreate={onLabelCreate}
               onLabelUpdate={onLabelUpdate}
+              onLabelMove={onLabelMove}
               onLabelDelete={onLabelDelete}
             />
           </div>
@@ -82,6 +84,7 @@ BoardActions.propTypes = {
   onLabelFromFilterRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 
diff --git a/client/src/components/BoardActions/Filters.jsx b/client/src/components/BoardActions/Filters.jsx
index 6e30946d..c1bd7cc0 100644
--- a/client/src/components/BoardActions/Filters.jsx
+++ b/client/src/components/BoardActions/Filters.jsx
@@ -22,6 +22,7 @@ const Filters = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     const [t] = useTranslation();
@@ -80,6 +81,7 @@ const Filters = React.memo(
             onDeselect={onLabelRemove}
             onCreate={onLabelCreate}
             onUpdate={onLabelUpdate}
+            onMove={onLabelMove}
             onDelete={onLabelDelete}
           >
             <button type="button" className={styles.filterButton}>
@@ -117,6 +119,7 @@ Filters.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 
diff --git a/client/src/components/Card/ActionsPopup.jsx b/client/src/components/Card/ActionsPopup.jsx
index 3b2a7e07..6140b36d 100644
--- a/client/src/components/Card/ActionsPopup.jsx
+++ b/client/src/components/Card/ActionsPopup.jsx
@@ -45,6 +45,7 @@ const ActionsStep = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
     onClose,
   }) => {
@@ -119,6 +120,7 @@ const ActionsStep = React.memo(
               onDeselect={onLabelRemove}
               onCreate={onLabelCreate}
               onUpdate={onLabelUpdate}
+              onMove={onLabelMove}
               onDelete={onLabelDelete}
               onBack={handleBack}
             />
@@ -241,6 +243,7 @@ ActionsStep.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx
index 4efb17ad..f689dcda 100755
--- a/client/src/components/Card/Card.jsx
+++ b/client/src/components/Card/Card.jsx
@@ -48,6 +48,7 @@ const Card = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     const nameEdit = useRef(null);
@@ -189,6 +190,7 @@ const Card = React.memo(
                         onLabelRemove={onLabelRemove}
                         onLabelCreate={onLabelCreate}
                         onLabelUpdate={onLabelUpdate}
+                        onLabelMove={onLabelMove}
                         onLabelDelete={onLabelDelete}
                       >
                         <Button className={classNames(styles.actionsButton, styles.target)}>
@@ -241,6 +243,7 @@ Card.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index b2bd8848..011f2452 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -62,6 +62,7 @@ const CardModal = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
     onTaskCreate,
     onTaskUpdate,
@@ -235,6 +236,7 @@ const CardModal = React.memo(
                             onDeselect={onLabelRemove}
                             onCreate={onLabelCreate}
                             onUpdate={onLabelUpdate}
+                            onMove={onLabelMove}
                             onDelete={onLabelDelete}
                           >
                             <Label name={label.name} color={label.color} />
@@ -252,6 +254,7 @@ const CardModal = React.memo(
                         onDeselect={onLabelRemove}
                         onCreate={onLabelCreate}
                         onUpdate={onLabelUpdate}
+                        onMove={onLabelMove}
                         onDelete={onLabelDelete}
                       >
                         <button
@@ -419,6 +422,7 @@ const CardModal = React.memo(
                   onDeselect={onLabelRemove}
                   onCreate={onLabelCreate}
                   onUpdate={onLabelUpdate}
+                  onMove={onLabelMove}
                   onDelete={onLabelDelete}
                 >
                   <Button fluid className={styles.actionButton}>
@@ -546,6 +550,7 @@ CardModal.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onTaskCreate: PropTypes.func.isRequired,
   onTaskUpdate: PropTypes.func.isRequired,
diff --git a/client/src/components/LabelsStep/Item.jsx b/client/src/components/LabelsStep/Item.jsx
index a462b428..6d7fe34d 100755
--- a/client/src/components/LabelsStep/Item.jsx
+++ b/client/src/components/LabelsStep/Item.jsx
@@ -1,53 +1,69 @@
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
 import React, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Draggable } from 'react-beautiful-dnd';
 import { Button } from 'semantic-ui-react';
 
 import styles from './Item.module.scss';
 import globalStyles from '../../styles.module.scss';
 
 const Item = React.memo(
-  ({ name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
+  ({ id, index, name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
     const handleToggleClick = useCallback(() => {
-      if (isActive) {
-        onDeselect();
-      } else {
-        onSelect();
+      if (isPersisted) {
+        if (isActive) {
+          onDeselect();
+        } else {
+          onSelect();
+        }
       }
-    }, [isActive, onSelect, onDeselect]);
+    }, [isPersisted, isActive, onSelect, onDeselect]);
 
     return (
-      <div className={styles.wrapper}>
-        <Button
-          fluid
-          content={name}
-          active={isActive}
-          disabled={!isPersisted}
-          className={classNames(
-            styles.labelButton,
-            isActive && styles.labelButtonActive,
-            globalStyles[`background${upperFirst(camelCase(color))}`],
-          )}
-          onClick={handleToggleClick}
-        />
-        {canEdit && (
-          <Button
-            icon="pencil"
-            size="small"
-            floated="right"
-            disabled={!isPersisted}
-            className={styles.editButton}
-            onClick={onEdit}
-          />
-        )}
-      </div>
+      <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
+        {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+          const contentNode = (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <div {...draggableProps} ref={innerRef} className={styles.wrapper}>
+              {/* eslint-disable jsx-a11y/click-events-have-key-events,
+                           jsx-a11y/no-static-element-interactions */}
+              <span
+                {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                className={classNames(
+                  styles.name,
+                  isActive && styles.nameActive,
+                  globalStyles[`background${upperFirst(camelCase(color))}`],
+                )}
+                onClick={handleToggleClick}
+              >
+                {name}
+              </span>
+              {canEdit && (
+                <Button
+                  icon="pencil"
+                  size="small"
+                  floated="right"
+                  disabled={!isPersisted}
+                  className={styles.editButton}
+                  onClick={onEdit}
+                />
+              )}
+            </div>
+          );
+
+          return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+        }}
+      </Draggable>
     );
   },
 );
 
 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   name: PropTypes.string,
   color: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
diff --git a/client/src/components/LabelsStep/Item.module.scss b/client/src/components/LabelsStep/Item.module.scss
index a5ee71d5..e850e2d9 100644
--- a/client/src/components/LabelsStep/Item.module.scss
+++ b/client/src/components/LabelsStep/Item.module.scss
@@ -12,16 +12,15 @@
     }
   }
 
-  .labelButton {
+  .name {
+    border-radius: 3px;
     color: #fff;
+    cursor: pointer;
     flex: 1 1 auto;
-    font-size: 14px;
     font-weight: bold;
-    margin-right: 0;
     overflow: hidden;
     padding: 8px 32px 8px 10px;
     position: relative;
-    text-align: left;
     text-overflow: ellipsis;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
 
@@ -30,7 +29,7 @@
     }
   }
 
-  .labelButtonActive:before {
+  .nameActive:before {
     bottom: 1px;
     content: "Г";
     font-size: 18px;
diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx
index 5b1ab463..aeabc4d6 100755
--- a/client/src/components/LabelsStep/LabelsStep.jsx
+++ b/client/src/components/LabelsStep/LabelsStep.jsx
@@ -2,10 +2,12 @@ import pick from 'lodash/pick';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Button } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useField, useSteps } from '../../hooks';
+import DroppableTypes from '../../constants/DroppableTypes';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -27,6 +29,7 @@ const LabelsStep = React.memo(
     onDeselect,
     onCreate,
     onUpdate,
+    onMove,
     onDelete,
     onBack,
   }) => {
@@ -74,6 +77,17 @@ const LabelsStep = React.memo(
       [onDeselect],
     );
 
+    const handleDragEnd = useCallback(
+      ({ draggableId, source, destination }) => {
+        if (!destination || source.index === destination.index) {
+          return;
+        }
+
+        onMove(draggableId, destination.index);
+      },
+      [onMove],
+    );
+
     const handleUpdate = useCallback(
       (id, data) => {
         onUpdate(id, data);
@@ -145,21 +159,45 @@ const LabelsStep = React.memo(
             onChange={handleSearchChange}
           />
           {filteredItems.length > 0 && (
-            <div className={styles.items}>
-              {filteredItems.map((item) => (
-                <Item
-                  key={item.id}
-                  name={item.name}
-                  color={item.color}
-                  isPersisted={item.isPersisted}
-                  isActive={currentIds.includes(item.id)}
-                  canEdit={canEdit}
-                  onSelect={() => handleSelect(item.id)}
-                  onDeselect={() => handleDeselect(item.id)}
-                  onEdit={() => handleEdit(item.id)}
-                />
-              ))}
-            </div>
+            <DragDropContext onDragEnd={handleDragEnd}>
+              <Droppable droppableId="labels" type={DroppableTypes.LABEL}>
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    ref={innerRef}
+                    className={styles.items}
+                  >
+                    {filteredItems.map((item, index) => (
+                      <Item
+                        key={item.id}
+                        id={item.id}
+                        index={index}
+                        name={item.name}
+                        color={item.color}
+                        isPersisted={item.isPersisted}
+                        isActive={currentIds.includes(item.id)}
+                        canEdit={canEdit}
+                        onSelect={() => handleSelect(item.id)}
+                        onDeselect={() => handleDeselect(item.id)}
+                        onEdit={() => handleEdit(item.id)}
+                      />
+                    ))}
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+              <Droppable droppableId="labels:hack" type={DroppableTypes.LABEL}>
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    ref={innerRef}
+                    className={styles.droppableHack}
+                  >
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
           )}
           {canEdit && (
             <Button
@@ -186,6 +224,7 @@ LabelsStep.propTypes = {
   onDeselect: PropTypes.func.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func,
 };
diff --git a/client/src/components/LabelsStep/LabelsStep.module.scss b/client/src/components/LabelsStep/LabelsStep.module.scss
index 3f3f01e2..c5ec0236 100644
--- a/client/src/components/LabelsStep/LabelsStep.module.scss
+++ b/client/src/components/LabelsStep/LabelsStep.module.scss
@@ -15,6 +15,11 @@
     }
   }
 
+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
   .items {
     margin-top: 8px;
     max-height: 60vh;
diff --git a/client/src/constants/DroppableTypes.js b/client/src/constants/DroppableTypes.js
index 33cf0bd9..eda55048 100755
--- a/client/src/constants/DroppableTypes.js
+++ b/client/src/constants/DroppableTypes.js
@@ -1,10 +1,12 @@
 const BOARD = 'BOARD';
+const LABEL = 'LABEL';
 const LIST = 'LIST';
 const CARD = 'CARD';
 const TASK = 'TASK';
 
 export default {
   BOARD,
+  LABEL,
   LIST,
   CARD,
   TASK,
diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
index 5844a96a..1a7f241e 100755
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@@ -99,6 +99,7 @@ export default {
   LABEL_CREATE_HANDLE: `${PREFIX}/LABEL_CREATE_HANDLE`,
   LABEL_UPDATE: `${PREFIX}/LABEL_UPDATE`,
   LABEL_UPDATE_HANDLE: `${PREFIX}/LABEL_UPDATE_HANDLE`,
+  LABEL_MOVE: `${PREFIX}/LABEL_MOVE`,
   LABEL_DELETE: `${PREFIX}/LABEL_DELETE`,
   LABEL_DELETE_HANDLE: `${PREFIX}/LABEL_DELETE_HANDLE`,
   LABEL_TO_CARD_ADD: `${PREFIX}/LABEL_TO_CARD_ADD`,
diff --git a/client/src/containers/BoardActionsContainer.js b/client/src/containers/BoardActionsContainer.js
index b88b3491..40170cb2 100644
--- a/client/src/containers/BoardActionsContainer.js
+++ b/client/src/containers/BoardActionsContainer.js
@@ -41,6 +41,7 @@ const mapDispatchToProps = (dispatch) =>
       onLabelFromFilterRemove: entryActions.removeLabelFromFilterInCurrentBoard,
       onLabelCreate: entryActions.createLabelInCurrentBoard,
       onLabelUpdate: entryActions.updateLabel,
+      onLabelMove: entryActions.moveLabel,
       onLabelDelete: entryActions.deleteLabel,
     },
     dispatch,
diff --git a/client/src/containers/CardContainer.js b/client/src/containers/CardContainer.js
index 63ab6917..7e0aa0a3 100755
--- a/client/src/containers/CardContainer.js
+++ b/client/src/containers/CardContainer.js
@@ -70,6 +70,7 @@ const mapDispatchToProps = (dispatch, { id }) =>
       onLabelRemove: (labelId) => entryActions.removeLabelFromCard(labelId, id),
       onLabelCreate: (data) => entryActions.createLabelInCurrentBoard(data),
       onLabelUpdate: (labelId, data) => entryActions.updateLabel(labelId, data),
+      onLabelMove: (labelId, index) => entryActions.moveLabel(labelId, index),
       onLabelDelete: (labelId) => entryActions.deleteLabel(labelId),
     },
     dispatch,
diff --git a/client/src/containers/CardModalContainer.js b/client/src/containers/CardModalContainer.js
index 5a44dcc9..7cc55472 100755
--- a/client/src/containers/CardModalContainer.js
+++ b/client/src/containers/CardModalContainer.js
@@ -86,6 +86,7 @@ const mapDispatchToProps = (dispatch) =>
       onLabelRemove: entryActions.removeLabelFromCurrentCard,
       onLabelCreate: entryActions.createLabelInCurrentBoard,
       onLabelUpdate: entryActions.updateLabel,
+      onLabelMove: entryActions.moveLabel,
       onLabelDelete: entryActions.deleteLabel,
       onTaskCreate: entryActions.createTaskInCurrentCard,
       onTaskUpdate: entryActions.updateTask,
diff --git a/client/src/entry-actions/labels.js b/client/src/entry-actions/labels.js
index bd88b777..edd2024c 100755
--- a/client/src/entry-actions/labels.js
+++ b/client/src/entry-actions/labels.js
@@ -29,6 +29,14 @@ const handleLabelUpdate = (label) => ({
   },
 });
 
+const moveLabel = (id, index) => ({
+  type: EntryActionTypes.LABEL_MOVE,
+  payload: {
+    id,
+    index,
+  },
+});
+
 const deleteLabel = (id) => ({
   type: EntryActionTypes.LABEL_DELETE,
   payload: {
@@ -106,6 +114,7 @@ export default {
   handleLabelCreate,
   updateLabel,
   handleLabelUpdate,
+  moveLabel,
   deleteLabel,
   handleLabelDelete,
   addLabelToCard,
diff --git a/client/src/models/Board.js b/client/src/models/Board.js
index d048d606..5652a7f5 100755
--- a/client/src/models/Board.js
+++ b/client/src/models/Board.js
@@ -175,6 +175,10 @@ export default class extends BaseModel {
     return this.memberships.orderBy('id');
   }
 
+  getOrderedLabelsQuerySet() {
+    return this.labels.orderBy('position');
+  }
+
   getOrderedListsQuerySet() {
     return this.lists.orderBy('position');
   }
diff --git a/client/src/models/Label.js b/client/src/models/Label.js
index 793e6734..2399ce35 100755
--- a/client/src/models/Label.js
+++ b/client/src/models/Label.js
@@ -8,6 +8,7 @@ export default class extends BaseModel {
 
   static fields = {
     id: attr(),
+    position: attr(),
     name: attr(),
     color: attr(),
     boardId: fk({
diff --git a/client/src/sagas/core/services/labels.js b/client/src/sagas/core/services/labels.js
index 94323934..6d2d43b8 100644
--- a/client/src/sagas/core/services/labels.js
+++ b/client/src/sagas/core/services/labels.js
@@ -7,11 +7,16 @@ import api from '../../../api';
 import { createLocalId } from '../../../utils/local-id';
 
 export function* createLabel(boardId, data) {
+  const nextData = {
+    ...data,
+    position: yield select(selectors.selectNextLabelPosition, boardId),
+  };
+
   const localId = yield call(createLocalId);
 
   yield put(
     actions.createLabel({
-      ...data,
+      ...nextData,
       boardId,
       id: localId,
     }),
@@ -19,7 +24,7 @@ export function* createLabel(boardId, data) {
 
   let label;
   try {
-    ({ item: label } = yield call(request, api.createLabel, boardId, data));
+    ({ item: label } = yield call(request, api.createLabel, boardId, nextData));
   } catch (error) {
     yield put(actions.createLabel.failure(localId, error));
     return;
@@ -56,6 +61,15 @@ export function* handleLabelUpdate(label) {
   yield put(actions.handleLabelUpdate(label));
 }
 
+export function* moveLabel(id, index) {
+  const { boardId } = yield select(selectors.selectLabelById, id);
+  const position = yield select(selectors.selectNextLabelPosition, boardId, index, id);
+
+  yield call(updateLabel, id, {
+    position,
+  });
+}
+
 export function* deleteLabel(id) {
   yield put(actions.deleteLabel(id));
 
@@ -150,6 +164,7 @@ export default {
   handleLabelCreate,
   updateLabel,
   handleLabelUpdate,
+  moveLabel,
   deleteLabel,
   handleLabelDelete,
   addLabelToCard,
diff --git a/client/src/sagas/core/watchers/labels.js b/client/src/sagas/core/watchers/labels.js
index f8e52e01..12be87a4 100644
--- a/client/src/sagas/core/watchers/labels.js
+++ b/client/src/sagas/core/watchers/labels.js
@@ -17,6 +17,9 @@ export default function* labelsWatchers() {
     takeEvery(EntryActionTypes.LABEL_UPDATE_HANDLE, ({ payload: { label } }) =>
       services.handleLabelUpdate(label),
     ),
+    takeEvery(EntryActionTypes.LABEL_MOVE, ({ payload: { id, index } }) =>
+      services.moveLabel(id, index),
+    ),
     takeEvery(EntryActionTypes.LABEL_DELETE, ({ payload: { id } }) => services.deleteLabel(id)),
     takeEvery(EntryActionTypes.LABEL_DELETE_HANDLE, ({ payload: { label } }) =>
       services.handleLabelDelete(label),
diff --git a/client/src/selectors/boards.js b/client/src/selectors/boards.js
index 7edf34ff..c649787d 100644
--- a/client/src/selectors/boards.js
+++ b/client/src/selectors/boards.js
@@ -108,10 +108,13 @@ export const selectLabelsForCurrentBoard = createSelector(
       return boardModel;
     }
 
-    return boardModel.labels.toRefArray().map((label) => ({
-      ...label,
-      isPersisted: !isLocalId(label.id),
-    }));
+    return boardModel
+      .getOrderedLabelsQuerySet()
+      .toRefArray()
+      .map((label) => ({
+        ...label,
+        isPersisted: !isLocalId(label.id),
+      }));
   },
 );
 
diff --git a/client/src/selectors/core.js b/client/src/selectors/core.js
index 6133ac77..0ae4663b 100755
--- a/client/src/selectors/core.js
+++ b/client/src/selectors/core.js
@@ -49,6 +49,22 @@ export const selectNextBoardPosition = createSelector(
   },
 );
 
+export const selectNextLabelPosition = createSelector(
+  orm,
+  (_, boardId) => boardId,
+  (_, __, index) => index,
+  (_, __, ___, excludedId) => excludedId,
+  ({ Board }, boardId, index, excludedId) => {
+    const boardModel = Board.withId(boardId);
+
+    if (!boardModel) {
+      return boardModel;
+    }
+
+    return nextPosition(boardModel.getOrderedLabelsQuerySet().toRefArray(), index, excludedId);
+  },
+);
+
 export const selectNextListPosition = createSelector(
   orm,
   (_, boardId) => boardId,
@@ -102,6 +118,7 @@ export default {
   selectIsCoreInitializing,
   selectIsLogouting,
   selectNextBoardPosition,
+  selectNextLabelPosition,
   selectNextListPosition,
   selectNextCardPosition,
   selectNextTaskPosition,
diff --git a/client/src/selectors/index.js b/client/src/selectors/index.js
index 9b636666..7cfb1891 100755
--- a/client/src/selectors/index.js
+++ b/client/src/selectors/index.js
@@ -7,6 +7,7 @@ import projects from './projects';
 import projectManagers from './project-managers';
 import boards from './boards';
 import boardMemberships from './board-memberships';
+import labels from './labels';
 import lists from './lists';
 import cards from './cards';
 import tasks from './tasks';
@@ -22,6 +23,7 @@ export default {
   ...projectManagers,
   ...boards,
   ...boardMemberships,
+  ...labels,
   ...lists,
   ...cards,
   ...tasks,
diff --git a/client/src/selectors/labels.js b/client/src/selectors/labels.js
new file mode 100644
index 00000000..50e7421d
--- /dev/null
+++ b/client/src/selectors/labels.js
@@ -0,0 +1,25 @@
+import { createSelector } from 'redux-orm';
+
+import orm from '../orm';
+
+export const makeSelectLabelById = () =>
+  createSelector(
+    orm,
+    (_, id) => id,
+    ({ Label }, id) => {
+      const labelModel = Label.withId(id);
+
+      if (!labelModel) {
+        return labelModel;
+      }
+
+      return labelModel.ref;
+    },
+  );
+
+export const selectLabelById = makeSelectLabelById();
+
+export default {
+  makeSelectLabelById,
+  selectLabelById,
+};
diff --git a/server/api/controllers/labels/create.js b/server/api/controllers/labels/create.js
index 086626e4..d3b8743c 100755
--- a/server/api/controllers/labels/create.js
+++ b/server/api/controllers/labels/create.js
@@ -14,6 +14,10 @@ module.exports = {
       regex: /^[0-9]+$/,
       required: true,
     },
+    position: {
+      type: 'number',
+      required: true,
+    },
     name: {
       type: 'string',
       isNotEmptyString: true,
@@ -55,7 +59,7 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    const values = _.pick(inputs, ['name', 'color']);
+    const values = _.pick(inputs, ['position', 'name', 'color']);
 
     const label = await sails.helpers.labels.createOne.with({
       values: {
diff --git a/server/api/controllers/labels/update.js b/server/api/controllers/labels/update.js
index ee3646d7..e289bdf9 100755
--- a/server/api/controllers/labels/update.js
+++ b/server/api/controllers/labels/update.js
@@ -14,6 +14,9 @@ module.exports = {
       regex: /^[0-9]+$/,
       required: true,
     },
+    position: {
+      type: 'number',
+    },
     name: {
       type: 'string',
       isNotEmptyString: true,
@@ -22,7 +25,6 @@ module.exports = {
     color: {
       type: 'string',
       isIn: Label.COLORS,
-      required: true,
     },
   },
 
@@ -55,7 +57,7 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    const values = _.pick(inputs, ['name', 'color']);
+    const values = _.pick(inputs, ['position', 'name', 'color']);
 
     label = await sails.helpers.labels.updateOne.with({
       values,
diff --git a/server/api/helpers/boards/get-labels.js b/server/api/helpers/boards/get-labels.js
index c11b75e8..9fdc6e9b 100644
--- a/server/api/helpers/boards/get-labels.js
+++ b/server/api/helpers/boards/get-labels.js
@@ -7,11 +7,23 @@ module.exports = {
       custom: idOrIdsValidator,
       required: true,
     },
+    exceptLabelIdOrIds: {
+      type: 'json',
+      custom: idOrIdsValidator,
+    },
   },
 
   async fn(inputs) {
-    return sails.helpers.labels.getMany({
+    const criteria = {
       boardId: inputs.idOrIds,
-    });
+    };
+
+    if (!_.isUndefined(inputs.exceptLabelIdOrIds)) {
+      criteria.id = {
+        '!=': inputs.exceptLabelIdOrIds,
+      };
+    }
+
+    return sails.helpers.labels.getMany(criteria);
   },
 };
diff --git a/server/api/helpers/labels/create-one.js b/server/api/helpers/labels/create-one.js
index 564d31af..04f58c36 100644
--- a/server/api/helpers/labels/create-one.js
+++ b/server/api/helpers/labels/create-one.js
@@ -3,6 +3,10 @@ const valuesValidator = (value) => {
     return false;
   }
 
+  if (!_.isFinite(value.position)) {
+    return false;
+  }
+
   if (!_.isPlainObject(value.board)) {
     return false;
   }
@@ -25,8 +29,32 @@ module.exports = {
   async fn(inputs) {
     const { values } = inputs;
 
+    const labels = await sails.helpers.boards.getLabels(values.board.id);
+
+    const { position, repositions } = sails.helpers.utils.insertToPositionables(
+      values.position,
+      labels,
+    );
+
+    repositions.forEach(async ({ id, position: nextPosition }) => {
+      await Label.update({
+        id,
+        boardId: values.board.id,
+      }).set({
+        position: nextPosition,
+      });
+
+      sails.sockets.broadcast(`board:${values.board.id}`, 'labelUpdate', {
+        item: {
+          id,
+          position: nextPosition,
+        },
+      });
+    });
+
     const label = await Label.create({
       ...values,
+      position,
       boardId: values.board.id,
     }).fetch();
 
diff --git a/server/api/helpers/labels/get-many.js b/server/api/helpers/labels/get-many.js
index 35442998..b992689a 100644
--- a/server/api/helpers/labels/get-many.js
+++ b/server/api/helpers/labels/get-many.js
@@ -9,6 +9,6 @@ module.exports = {
   },
 
   async fn(inputs) {
-    return Label.find(inputs.criteria).sort('id');
+    return Label.find(inputs.criteria).sort('position');
   },
 };
diff --git a/server/api/helpers/labels/update-one.js b/server/api/helpers/labels/update-one.js
index b4a823a3..3237ce8c 100644
--- a/server/api/helpers/labels/update-one.js
+++ b/server/api/helpers/labels/update-one.js
@@ -1,3 +1,15 @@
+const valuesValidator = (value) => {
+  if (!_.isPlainObject(value)) {
+    return false;
+  }
+
+  if (!_.isUndefined(value.position) && !_.isFinite(value.position)) {
+    return false;
+  }
+
+  return true;
+};
+
 module.exports = {
   inputs: {
     record: {
@@ -6,6 +18,7 @@ module.exports = {
     },
     values: {
       type: 'json',
+      custom: valuesValidator,
       required: true,
     },
     request: {
@@ -16,6 +29,33 @@ module.exports = {
   async fn(inputs) {
     const { values } = inputs;
 
+    if (!_.isUndefined(values.position)) {
+      const labels = await sails.helpers.boards.getLabels(inputs.record.boardId, inputs.record.id);
+
+      const { position, repositions } = sails.helpers.utils.insertToPositionables(
+        values.position,
+        labels,
+      );
+
+      values.position = position;
+
+      repositions.forEach(async ({ id, position: nextPosition }) => {
+        await Label.update({
+          id,
+          boardId: inputs.record.boardId,
+        }).set({
+          position: nextPosition,
+        });
+
+        sails.sockets.broadcast(`board:${inputs.record.boardId}`, 'labelUpdate', {
+          item: {
+            id,
+            position: nextPosition,
+          },
+        });
+      });
+    }
+
     const label = await Label.updateOne(inputs.record.id).set({ ...values });
 
     if (label) {
diff --git a/server/api/models/Label.js b/server/api/models/Label.js
index 3e09e234..af72ec26 100755
--- a/server/api/models/Label.js
+++ b/server/api/models/Label.js
@@ -41,6 +41,10 @@ module.exports = {
     //  ╠═╝╠╦╝║║║║║ ║ ║╚╗╔╝║╣ ╚═╗
     //  ╩  ╩╚═╩╩ ╩╩ ╩ ╩ ╚╝ ╚═╝╚═╝
 
+    position: {
+      type: 'number',
+      required: true,
+    },
     name: {
       type: 'string',
       isNotEmptyString: true,
diff --git a/server/db/migrations/20220713145452_add_position_to_task_table.js b/server/db/migrations/20220713145452_add_position_to_task_table.js
index fd875fdd..13026150 100644
--- a/server/db/migrations/20220713145452_add_position_to_task_table.js
+++ b/server/db/migrations/20220713145452_add_position_to_task_table.js
@@ -1,44 +1,5 @@
-const POSITION_GAP = 65535;
+const { addPosition, removePosition } = require('../../utils/migrations');
 
-module.exports.up = async (knex) => {
-  await knex.schema.table('task', (table) => {
-    /* Columns */
+module.exports.up = (knex) => addPosition(knex, 'task', 'card_id');
 
-    table.specificType('position', 'double precision');
-
-    /* Indexes */
-
-    table.index('position');
-  });
-
-  const tasks = await knex('task').orderBy(['card_id', 'id']);
-
-  let prevCardId;
-  let position;
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (task of tasks) {
-    if (task.card_id === prevCardId) {
-      position += POSITION_GAP;
-    } else {
-      prevCardId = task.card_id;
-      position = POSITION_GAP;
-    }
-
-    // eslint-disable-next-line no-await-in-loop
-    await knex('task')
-      .update({
-        position,
-      })
-      .where('id', task.id);
-  }
-
-  return knex.schema.table('task', (table) => {
-    table.dropNullable('position');
-  });
-};
-
-module.exports.down = async (knex) =>
-  knex.schema.table('task', (table) => {
-    table.dropColumn('position');
-  });
+module.exports.down = (knex) => removePosition(knex, 'task');
diff --git a/server/db/migrations/20230108213138_labels_reordering.js b/server/db/migrations/20230108213138_labels_reordering.js
new file mode 100644
index 00000000..f140e567
--- /dev/null
+++ b/server/db/migrations/20230108213138_labels_reordering.js
@@ -0,0 +1,5 @@
+const { addPosition, removePosition } = require('../../utils/migrations');
+
+module.exports.up = (knex) => addPosition(knex, 'label', 'board_id');
+
+module.exports.down = (knex) => removePosition(knex, 'label');
diff --git a/server/utils/migrations.js b/server/utils/migrations.js
new file mode 100644
index 00000000..ad60da37
--- /dev/null
+++ b/server/utils/migrations.js
@@ -0,0 +1,49 @@
+const POSITION_GAP = 65535;
+
+const addPosition = async (knex, tableName, parentFieldName) => {
+  await knex.schema.table(tableName, (table) => {
+    /* Columns */
+
+    table.specificType('position', 'double precision');
+
+    /* Indexes */
+
+    table.index('position');
+  });
+
+  const records = await knex(tableName).orderBy([parentFieldName, 'id']);
+
+  let prevParentId;
+  let position;
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (record of records) {
+    if (record[parentFieldName] === prevParentId) {
+      position += POSITION_GAP;
+    } else {
+      prevParentId = record[parentFieldName];
+      position = POSITION_GAP;
+    }
+
+    // eslint-disable-next-line no-await-in-loop
+    await knex(tableName)
+      .update({
+        position,
+      })
+      .where('id', record.id);
+  }
+
+  return knex.schema.table(tableName, (table) => {
+    table.dropNullable('position');
+  });
+};
+
+const removePosition = (knex, tableName) =>
+  knex.schema.table(tableName, (table) => {
+    table.dropColumn('position');
+  });
+
+module.exports = {
+  addPosition,
+  removePosition,
+};