diff --git a/client/src/NoteComponents/ModalNoteEdit.js b/client/src/NoteComponents/ModalNoteEdit.js index e5a0730..f810759 100644 --- a/client/src/NoteComponents/ModalNoteEdit.js +++ b/client/src/NoteComponents/ModalNoteEdit.js @@ -140,23 +140,26 @@ function ModalNoteEdit() {
{/**Индикатор номера заметки */}
- Id {editNoteId} + {note && note.order}
{/**Зактрытие окна */}
diff --git a/client/src/NoteComponents/NoteItem.js b/client/src/NoteComponents/NoteItem.js index af47159..ec836dd 100644 --- a/client/src/NoteComponents/NoteItem.js +++ b/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 (
@@ -41,14 +51,21 @@ function NoteItem({ note = new Note(), index }) {
- {/**Кнопка удаления */} + {/**Кнопки изменения порядка */}
+
diff --git a/client/src/NoteComponents/NoteList.js b/client/src/NoteComponents/NoteList.js index 397113c..9bd644e 100644 --- a/client/src/NoteComponents/NoteList.js +++ b/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) { {/**Отзывчивая сетка карточек */} {/**Рендер каждой карточки из массива */} - {props.notes.map ? (props.notes.map((note, index) => { + {props.notes.map ? (props.notes.sort(sortByOrder).map((note, index) => { return ( ) diff --git a/client/src/Pages/NotesPage.css b/client/src/Pages/NotesPage.css index aa5bd8d..6d061ae 100644 --- a/client/src/Pages/NotesPage.css +++ b/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; +} diff --git a/client/src/Pages/NotesPage.js b/client/src/Pages/NotesPage.js index 70b54f1..42fc86c 100644 --- a/client/src/Pages/NotesPage.js +++ b/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 ( /**Здесь отрисовываются меню добавления и редактирования заметок и сам перечнь заметок в виде динамичной отзывчивой сетки */ - +
{/**Компонент добавления карточки и модальное окно редактирования */} diff --git a/client/src/Shared/noteType/Note.js b/client/src/Shared/noteType/Note.js index 1eb6fe3..2f09ea4 100644 --- a/client/src/Shared/noteType/Note.js +++ b/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) } } diff --git a/client/src/Shared/order.js b/client/src/Shared/order.js new file mode 100644 index 0000000..d83d8b5 --- /dev/null +++ b/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} notesArr + */ +export function calcOrder(notesArr = []) { + let order = 0 + notesArr.forEach((note) => { + if (note.order >= order) order = note.order + 1 + }) + return order +} + +/** + * Исправление параметров order в массиве заметок + * @param {Array} 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 +} diff --git a/server/models/Note.js b/server/models/Note.js index fc19219..8fd1921 100644 --- a/server/models/Note.js +++ b/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 } }) diff --git a/server/validation/NoteCheck.js b/server/validation/NoteCheck.js index 03cd17a..754f03d 100644 --- a/server/validation/NoteCheck.js +++ b/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") ) }