make ordered notes

Author: maxchistt

client/src/NoteComponents/ModalNoteEdit.js

@@ -151,7 +151,7 @@ function ModalNoteEdit() {
                     </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>

client/src/NoteComponents/NoteItem.js

@@ -20,7 +20,7 @@ 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
@@ -41,14 +41,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)}
+                        onClick={() => editNoteOrder(index, Number(note.order) - 1)}
                     >
-                        &#10007;
+                        &#10097;
+                    </button>
+                    <button
+                        className={`btn btn-light p-0`}
+                        style={{ width: "1.8em", height: "1.8em", float: "right", borderColor: "transparent", backgroundColor: "transparent" }}
+                        onClick={() => editNoteOrder(index, Number(note.order) + 1)}
+                    >
+                        &#10096;
                     </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.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 {*} index 
+     * @param {*} order 
+     */
+    function editNoteOrder(index, order) {
+        if (notesArr[index]) {
+            notesArr[index].order = order
+            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)
     }
 }
 

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")
     )
 }