Order

client/src/NoteComponents/ModalNoteEdit.js

@@ -140,23 +140,26 @@ function ModalNoteEdit() {
                     <div>
                         <Palette
                             className="btn btn-light mx-1"
+                            style={{ boxShadow: "none" }}
                             disabled={!note}
                             setColor={tryChangeColor}
                         ></Palette>
                         <button
                             className="btn btn-light"
+                            style={{ boxShadow: "none" }}
                             disabled={!note}
                             onClick={tryRemove}
                         ><i className="bi bi-trash text-dark"></i></button>
                     </div>
                     {/**Индикатор номера заметки */}
                     <div className="mx-auto">
-                        <span style={{ color: "lightgray", fontWeight: "400" }}>Id {editNoteId}</span>
+                        <span style={{ color: "lightgray", fontWeight: "400" }}>{note && note.order}</span>
                     </div>
                     {/**Зактрытие окна */}
                     <div>
                         <button
                             className="btn btn-light"
+                            style={{ boxShadow: "none" }}
                             onClick={tryClose}
                         >Close</button>
                     </div>

client/src/NoteComponents/NoteItem.js

@@ -20,11 +20,21 @@ function fixLineBreaks(mdStr) {
  */
 function NoteItem({ note = new Note(), index }) {
     /**Подключение контекста */
-    const { removeNote, setEditNoteId } = useContext(NotesContext)
+    const { setEditNoteId, editNoteOrder } = useContext(NotesContext)
 
     const lineClip = 12
     const bgColor = note.color
 
+    const footerBtn = {
+        className: `btn btn-light p-0 text-secondary item-footer-btn`,
+        style: {
+            width: "1.8em", height: "1.8em", float: "right",
+            borderColor: "transparent",
+            backgroundColor: "transparent",
+            boxShadow: "none"
+        }
+    }
+
     return (
         <div className="p-1" >
             <div className="card" style={{ backgroundColor: bgColor }} >
@@ -41,14 +51,21 @@ function NoteItem({ note = new Note(), index }) {
                         <ReactMarkdown remarkPlugins={[gfm]} children={fixLineBreaks(note.text)} />
                     </div>
                 </div>
-                {/**Кнопка удаления */}
+                {/**Кнопки изменения порядка */}
                 <div className="card-body pt-0">
                     <button
-                        className={`btn btn-light p-0`}
-                        style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
-                        onClick={() => removeNote(index)}
+                        className={footerBtn.className}
+                        style={footerBtn.style}
+                        onClick={() => editNoteOrder(index, false)}
+                    >
+                        <i className="bi bi-chevron-compact-right"></i>
+                    </button>
+                    <button
+                        className={footerBtn.className}
+                        style={footerBtn.style}
+                        onClick={() => editNoteOrder(index, true)}
                     >
-                        &#10007;
+                        <i className="bi bi-chevron-compact-left"></i>
                     </button>
                 </div>
             </div>

client/src/NoteComponents/NoteList.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types'
 import NoteItem from './NoteItem'
 import StackGrid, { transitions } from "react-stack-grid"
 import sizeMe from 'react-sizeme'
+import { sortByOrder } from '../Shared/order'
 const { scaleDown } = transitions
 
 /**расчет ширины столбцов */
@@ -53,7 +54,7 @@ function NoteList(props) {
             {/**Отзывчивая сетка карточек */}
             <StackGrid className="container p-0" {...gridSettings}>
                 {/**Рендер каждой карточки из массива */}
-                {props.notes.map ? (props.notes.map((note, index) => {
+                {props.notes.map ? (props.notes.sort(sortByOrder).map((note, index) => {
                     return (
                         <NoteItem note={note} key={note.id} index={index} />
                     )

client/src/Pages/NotesPage.css

@@ -26,3 +26,11 @@
   display: inline-block;
   transform: rotate(90deg);
 }
+
+.item-footer-btn {
+  transition: opacity 0.15s !important;
+  opacity: 0.3 !important;
+}
+.item-footer-btn:hover {
+  opacity: 1 !important;
+}

client/src/Pages/NotesPage.js

@@ -16,6 +16,7 @@ import useDataLoadingController from '../Hooks/useDataLoadingController.hook'
 import useFetchNotes from '../Hooks/useFetchNotes.hook'
 import useEditNoteId from '../Hooks/useEditNoteId.hook'
 import useNotesArr from '../Hooks/useNotesArr.hook'
+import { calcOrder, fixOrders } from '../Shared/order'
 
 /**
  * Страница с заметками 
@@ -95,7 +96,13 @@ function NotesPage() {
      */
     function addNote(noteData = {}) {
         const newId = String(auth.email) + String(Date.now()) + String(Math.random())
-        const newNote = new Note({ id: newId, name: noteData.name, color: noteData.color, text: noteData.text })
+        const newNote = new Note({
+            id: newId,
+            name: noteData.name,
+            color: noteData.color,
+            text: noteData.text,
+            order: calcOrder(notesArr)
+        })
         //console.log(newId, newNote.id);
         const newIndex = (notesArr != null) ? notesArr.length : 0
         setNotesArr(
@@ -133,6 +140,22 @@ function NotesPage() {
         loadDataToServer(notesArr[index], "set")
     }
 
+    /**
+     * Изменение порядка заметки
+     * @param {number} index 
+     * @param {boolean} orderOperationFlag 
+     */
+    function editNoteOrder(index, orderOperationFlag) {
+        if (notesArr[index]) {
+            notesArr[index].order += orderOperationFlag ? 2 : -2
+            let fixedArr = fixOrders(notesArr)
+            setNotesArr(fixedArr)
+            fixedArr.forEach((note) => {
+                loadDataToServer(note, "set")
+            })
+        }
+    }
+
     /**функция получения карточки по id */
     function getNoteByIndex(index) {
         return index !== null ? notesArr[index] : null
@@ -159,7 +182,7 @@ function NotesPage() {
     /**рендер */
     return (
         /**Здесь отрисовываются меню добавления и редактирования заметок и сам перечнь заметок в виде динамичной отзывчивой сетки */
-        <NotesContext.Provider value={{ addNote, removeNote, changeNoteColor, editNoteContent, setEditNoteId, unsetEditNoteId, editNoteId, getNoteByIndex }}>
+        <NotesContext.Provider value={{ addNote, removeNote, changeNoteColor, editNoteContent, editNoteOrder, setEditNoteId, unsetEditNoteId, editNoteId, getNoteByIndex }}>
             <div className="NotesPage">
                 <main className="p-1 pb-3 mb-3">
                     {/**Компонент добавления карточки и модальное окно редактирования */}

client/src/Shared/noteType/Note.js

@@ -9,6 +9,7 @@ export const PropTypeNote = PropTypes.shape({
     name: PropTypes.string,
     color: PropTypes.string,
     text: PropTypes.string,
+    order: PropTypes.number,
 })
 
 /**валидация заметки */
@@ -17,7 +18,8 @@ export function checkNote(note) {
         (typeof note.id === "string") &&
         typeof note.name === "string" &&
         typeof note.color === "string" &&
-        typeof note.text === "string"
+        typeof note.text === "string" &&
+        (typeof note.order === "number" || typeof note.order === "undefined")
     )
 }
 
@@ -37,11 +39,12 @@ export function checkNotesArr(notesArr) {
 
 /**класс заметки */
 export class Note {
-    constructor({ id, name, color, text }) {
+    constructor({ id, name, color, text, order }) {
         this.id = String(id)
         this.name = String(name)
         this.color = String(color)
         this.text = String(text)
+        this.order = Number(order)
     }
 }
 

client/src/Shared/order.js

@@ -0,0 +1,40 @@
+/**@file order.js */
+
+/**
+ * Callback for Array.Sort
+ * сортировка карточек по параметру order
+ * @param {object} a 
+ * @param {object} b 
+ */
+export function sortByOrder(a, b) {
+    if (a.order > b.order) return -1
+    if (a.order < b.order) return 1
+    return 0
+}
+
+/**
+ * Вычисление порядка новой заметки
+ * @param {Array<object>} notesArr 
+ */
+export function calcOrder(notesArr = []) {
+    let order = 0
+    notesArr.forEach((note) => {
+        if (note.order >= order) order = note.order + 1
+    })
+    return order
+}
+
+/**
+ * Исправление параметров order в массиве заметок
+ * @param {Array<object>} notesArr 
+ */
+export function fixOrders(notesArr = []) {
+    let fixedArr = notesArr
+    const sortedArr = Array.isArray(notesArr) ? notesArr.sort(sortByOrder).reverse() : []
+    sortedArr.forEach((sortedNote, sortedNoteIndex) => {
+        fixedArr.forEach((note) => {
+            if (note.id === sortedNote.id) note.order = sortedNoteIndex
+        })
+    })
+    return fixedArr
+}

server/models/Note.js

@@ -12,6 +12,7 @@ const schema = new Schema({
   text: { type: String },
   color: { type: String },
   image: { type: String },
+  order: { type: Number },
   owner: { type: Types.ObjectId, ref: 'User', required: true }
 })
 

server/validation/NoteCheck.js

@@ -5,14 +5,14 @@
 /**
  * Проверка рбьекта заметки
  * @param {*} note 
- *  
  */
 function checkNote(note) {
     return (
         typeof note.id === "string" &&
         typeof note.name === "string" &&
         typeof note.color === "string" &&
-        typeof note.text === "string"
+        typeof note.text === "string" &&
+        (typeof note.order === "number" || typeof note.order === "undefined")
     )
 }