דרוש עזרה בארכיטקטורה נכונה באנגולר

cd123

משתמש פעיל
D I G I T A L
שלום,

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

בקיצור אני אובדת עצות,
אשמח לכל עזרה בנושא.
תודה מראש.
 

אפרת19

משתמש צעיר
אישית אני פחות באנגולר אבל הרעיון של הקומפוננטות זהה ברוב הפריימוורקים של js
וגם בפריימוורקים מודרנים של שפות שרת.
והרעיון הוא באמת כמה שיותר פיצול של קוד לחלקים קטנים, שכל אחד מהם עושה רק דבר אחד, וכמה שפחות התפצלויות (if-else) בקוד.
כלומר במקרה שלך - קומפוננטת אב נפרדת עבור כל case, שכל אחת תכיל רק את הקונטרולרים שהיא צריכה, שגם הם יהיו קומפוננטות קטנות וריוזביליות שתוכלי לבנות מהן כמו לגו - כי הם ידעו להתאים את עצמן למצב שהן נמצאות.
(עי שימוש ב@input-ים למשל)
 

cd123

משתמש פעיל
D I G I T A L
אישית אני פחות באנגולר אבל הרעיון של הקומפוננטות זהה ברוב הפריימוורקים של js
וגם בפריימוורקים מודרנים של שפות שרת.
והרעיון הוא באמת כמה שיותר פיצול של קוד לחלקים קטנים, שכל אחד מהם עושה רק דבר אחד, וכמה שפחות התפצלויות (if-else) בקוד.
כלומר במקרה שלך - קומפוננטת אב נפרדת עבור כל case, שכל אחת תכיל רק את הקונטרולרים שהיא צריכה, שגם הם יהיו קומפוננטות קטנות וריוזביליות שתוכלי לבנות מהן כמו לגו - כי הם ידעו להתאים את עצמן למצב שהן נמצאות.
(עי שימוש ב@input-ים למשל)
רק מנסה להבין יותר טוב,
את מתכוונת למעשה שלכל דיאלוג יהיה בעם קומפוננטת תוכן וקומפוננטה של אבא דיאלוג,
שלמעשה יהיו לי הרבה דיאלוגים נפרדים כדי שאוכל בעתיד להשתמש נניח בדיאלוג אחד וכדו'.
הבנתי נכון?
 

Aharono

משתמש פעיל
D I G I T A L
אם הבנתי נכון את הבעיה, הבעיה היא כזו:

ברמת הUI: באפליקציה ישנם שני אלמנטים שמעניינים אותנו:
א. ישנה component אב (כלומר, ראשית?) שמוצגת באופן קבוע באפליקציה
ב. ישנו תפריט עליון שמוצגים בו כפתורים.

כאשר בוחרים פריט מידע מסוים מתוך componentת ;))) האב, הכפתורים צריכים להשתנות בהתאם לפריט המידע שנבחר. כאשר לוחצים על אחד הכפתורים, נפתח דיאלוג שקשור לפריט המידע.

בנוסף לתפריט העליון, ישנם כפתורים "מפוזרים" (כפתורים אלו, במקום מוגדר?) שמתנהגים בדומה לכפתורים בתפריט העליון (כלומר, משתנים בהתאם לפריט המידע שנבחר).

עד כאן, הבנתי נכון?
 

cd123

משתמש פעיל
D I G I T A L
אם הבנתי נכון את הבעיה, הבעיה היא כזו:

ברמת הUI: באפליקציה ישנם שני אלמנטים שמעניינים אותנו:
א. ישנה component אב (כלומר, ראשית?) שמוצגת באופן קבוע באפליקציה
ב. ישנו תפריט עליון שמוצגים בו כפתורים.

כאשר בוחרים פריט מידע מסוים מתוך componentת ;))) האב, הכפתורים צריכים להשתנות בהתאם לפריט המידע שנבחר. כאשר לוחצים על אחד הכפתורים, נפתח דיאלוג שקשור לפריט המידע.

בנוסף לתפריט העליון, ישנם כפתורים "מפוזרים" (כפתורים אלו, במקום מוגדר?) שמתנהגים בדומה לכפתורים בתפריט העליון (כלומר, משתנים בהתאם לפריט המידע שנבחר).

עד כאן, הבנתי נכון?
נכון מאד,
הכפתורים כרגע לא במקום מאוחד או קבוע
 

Aharono

משתמש פעיל
D I G I T A L
אני חושב שפתרון ג'נרי כאן זה רעיון טוב ונכון. זו תשובה ארוכה קצת ולכן אני אסביר את עצמי בקצרה, במידה ולא הבנתם משהו, תשאלו חופשי (אם מרגיש לכם יותר בנח, אפשרי בפרטי).


אני מניח שלכל פריט מידע יש type (ואם אין, כדאי להוסיף). אני חושב שהכי פשוט יהיה ליצור enum של types (לכל סוג של פריט מידע יש ערך שונה). לדוגמה:

PHP:
export enum DataItemType {
  Animal = 1,
  Human = 2,
  Machine = 3
}

בנוסף, הייתי יוצר class שמגדיר כפתור:

PHP:
export class ButtonMetaData<TDataItem> {
  constructor (public title: string, public cssClass: string,
               private _onClickHandler: (dataItem: TDataItem) => void,
               private _selectionDataKeeper: ISelectionDataItemKeeper) {

  }

  public onClick(): void {
    this._onClickHandler(this._selectionDataKeeper.getSelectedDataItem());
  }
}


אחרי זה הייתי יוצר שני קלאסים:

1. הוא מנהל סוג של מידע (MenuItemsDataTypeButtonsHandler) שעושה:
1.א. מקבל את הDataItemType של עצמו.
1.ב. מממש את ה interface:

PHP:
export interface ISelectionDataItemKeeper {
  getSelectedDataItem(): any;
}


1.ג. יודע ליצור כפתורים (אסביר מאוחר יותר למה דווקא ליצור ולא מקבל אותם כפרמטר בctor) המתאימים לסוג המידע שלו (וכדאי לחלק את הכפתורים לפי התפריטים השונים) ולשמור אותם.
1.ד. יודע לקבל onSelectionChanged ולשמור את ה dataItem החדש (אסביר מאוחר יותר).


2. הוא מנהל כללי שיודע לעשות מספר דברים:
2.א. למלא את התפריט עם כפתורים.
2.ב. מקבל רשימה ב constructor של MenuItemsDataTypeButtonsHandler ושומר אותה.
2.ג. שיודע לקבל dataItem שנבחר (onSelectionChanged) ולמצוא את הMenuItemsDataTypeButtonsHandler הנכון מהרשימה שהוא שמר ולעדכן אותו (אות ג) שהשתנה פריט המידע. במידה והשתנה ה הMenuItemsDataTypeButtonsHandler מהבחירה הקודמת, הוא צריך לבנות את הכפתורים (שהוא מקבל מה buttonHandler).



יוצא של design שלנו יש שלושה work flows:
א. טעינה (איך כל המידע נבנה בצורה נכונה שהכל יתחבר לאחר מכן בצורה טובה).
ב. המשתמש בחר פריט מידע אחר (onSelectionChanged) שבevent הזה אנחנו מצפים שיתעדכנו הכפתורים בהתאם לסוג של פריט המידע
ג. המשתמש לחץ על כפתור, אנחנו מצפים שכל כפתור יקבל את ה dataItem הרלוונטי ויוכל לטפל בו בעצמו, כך שמצד אחד יש לכל כפתור את כל המידע הרלוונטי לו אבל מצד שני הוא ה design מספיק גמיש בשביל לאפשר כל action שלא יהיה.


א. טעינה.
בתחילה, צריך לטעון buttonHandler (הקלאס הראשון בשמו המקוצר) עם הסוג שלו ולהוסיף את כל סוגי הכפתורים שצריכים להיות. כאשר הוא משמש כ factory (כלומר, הוא יוצר את הכפתורים על פי המיע שהוא מקבל כפרמטרים ולא מקבלים את הכפתורים כאובייקט מוגמר) בגלל שהכפתור יוכל לדעת מה פריט המידע שכרגע selected, הוא צריך לשמור את הbuttonHanlder שלו (שהוא למעשה שומר את האובייקט הבחור, למעלה ב1.ב אסביר בהמשך) ובשביל להמנע מבאגים, לא כדאי להעביר לכפתור את ה buttonHandler שלו ולאחר מכן להוסיף את הכפתור לרשימה של ה buttonHanlder (שהריי, יכול להיות שבטעות יקצו את הכפתור עם buttonHandler אחד ולאחר מכן יעבירו את הכפתור ל buttonHandler אחר).

לאחר שיש רשימה של buttonHandlers (שלכל אחד מהם יש את כל הכפתורים שלו), יוצרים מנהל כללי (קלאס 2) ושולחים לו את כל ה buttonHandlers.


ב. on selection changed
כאשר המשתמש בוחר פריט מידע, השרשרת הבאה של הevents קורה:
א. קופץ (מן הסתם) event בקומפוננטת האב שצריכה לקרוא למנהל הכללי (קלאס 2) עם פריט המידע החדש (2.ג.).
ב. המנהל הכללי מוצא את הbuttonHandler הנכון
ב.1. במידה והשתנה ה buttonHandler, בונה את הכפתורים בתפריט על פי הכפתורים של הbuttonHandler החדש.
ב.2. בכל אופן (כלומר, בין אם השתנה ה buttonHandler ובין אם לא), מעדכן את ה buttonHandler שהשתנה הdataItem.
ג. הbuttonHandler שומר את הפריט מידע הselected החדש.


ג. כאשר המשתמש לוחץ על כפתור (הפונקציה הזו כתובה כבר למעלה ב ButtonMetaData)
א. קופץ event בכפתור עצמו.
א.1. הכפתור מוצא את הdataItem שכרגע הוא selected (בעזרת קריאה ל buttonHandler שמממש את ה ISelectionDataItemKeeper).
א.2. הכפתור קורא לפונקציה handleOnClick שהוא קיבל ב ctor עם ה item שנבחר.


בהצלחה רבה, תשאלו חופשי
 

אולי מעניין אותך גם...

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק קיט ב'

ט בַּמֶּה יְזַכֶּה נַּעַר אֶת אָרְחוֹ לִשְׁמֹר כִּדְבָרֶךָ:י בְּכָל לִבִּי דְרַשְׁתִּיךָ אַל תַּשְׁגֵּנִי מִמִּצְוֹתֶיךָ:יא בְּלִבִּי צָפַנְתִּי אִמְרָתֶךָ לְמַעַן לֹא אֶחֱטָא לָךְ:יב בָּרוּךְ אַתָּה יְהוָה לַמְּדֵנִי חֻקֶּיךָ:יג בִּשְׂפָתַי סִפַּרְתִּי כֹּל מִשְׁפְּטֵי פִיךָ:יד בְּדֶרֶךְ עֵדְוֹתֶיךָ שַׂשְׂתִּי כְּעַל כָּל הוֹן:טו בְּפִקֻּדֶיךָ אָשִׂיחָה וְאַבִּיטָה אֹרְחֹתֶיךָ:טז בְּחֻקֹּתֶיךָ אֶשְׁתַּעֲשָׁע לֹא אֶשְׁכַּח דְּבָרֶךָ:
נקרא  14  פעמים

לוח מודעות

למעלה