חיפוש
  • יניב אור

מערכת ניהול - React - חלק 9

עודכן ב: מרץ 28

בחלק זה נמשיך עם הרכיב החדש שיצרתי, שמיועד לעריכת פוסטים ונקרא gridEditor. אגב, את ההשראה לקחתי מהעורך פוסטים של וויקס, איתו אני משתמש כרגע. הרעיון הוא שהדף מחולק מראש לשורות וכשמקליקים על שורה נפתח toolbar עם אפשרויות עריכה שונות. אפשרות לכתוב טקסט, להוסיף תמונה, לשתף סרטון, קישורים וכן הלאה. ברגע שבוחרים בכתיבת טקטס, יפתח חלון לעריכת טקסט ובסיום העריכה הוא יופיע בשורה. אם בחרנו תמונה, היא תופיע בשורה עליה הקלקנו וכן הלאה.


בינתיים יש לנו כותרת, שורות אותן ניתן לבחור ו-toolbar. כמו כן, חיברתי את הקוד ל-Redux. נעבור על הקוד.


src/components/Common/GridEditor/index.js


src/components/Common/GridEditor/toolbar.js


src/components/Layout/Entity.js (החלק הרלוונטי)


עדכון 28/3/2020

להזכירכם, את הבלוג ומערכת הניהול שמפורטטת כאן אני כותב בזמני הפנוי לכן לא נגעתי בקוד תקופה מסויימת. בכל אופן נמשיך.


הוספתי רכיב, חלון עריכה - EditForm - כרגע עם textarea פשוט וכתבתי את הפונקציונליות שקשורה בכך. עדיין אין שמירה של הנתונים.


src/components/Common/GridEditor/editForm.js


את הרכיב הוספתי ל-GridEditor.

src/components/Common/GridEditor/index.js


והחלק הרלוונטי ברכיב Entity. המאפיינים: editFormChanged, editFormSubmitted ו-editFormCanceled.

src/components/Layout/Entity.js


ה-actions שקשורים ל-gridEditor נראים כך:

src/store/actions/entities/gridEditor/index.js


src/store/actions/entities/gridEditor/creators.js


מבחינת reducers, הקוד נראה כך. פירוט בהמשך.

src/store/reducers/entities/index.js


src/store/reducers/entities/initialState/common.js


src/store/reducers/entities/main/gridEditor.js


המשך יבוא...

© 2023 by DO IT YOURSELF. Proudly created with Wix.com