comments

[prasanthsanna]

..

[ficstorpublishers]

    <mat-accordion displayMode="flat">
        <mat-expansion-panel class="tab_pannel" *ngFor="let menuItem of filteredGeneralMenu; let i = index">

            <mat-expansion-panel-header class="menuList">
                <mat-panel-title role="listbox" routerLinkActive="active" routerLink={{menuItem.itemURL}}>
                    <img class="menuIcon" src={{menuItem.iconUrl}} alt="user">
                    {{menuItem.itemName}}
                </mat-panel-title>
            </mat-expansion-panel-header>

            <div class="card-body">
                <div *ngFor="let subItem of menuItem.subItem; let i = index">
                    <div class="subMenu" routerLinkActive="active" routerLink={{subItem.subItemURL}}>
                        {{subItem.subItemName}}</div>
                </div>
            </div>

        </mat-expansion-panel>
    </mat-accordion>

[ficstorpublishers]

:host ::ng-deep .mat-expansion-panel-body { padding-left: 0; padding-right: 0; }

.subMenu { cursor: pointer; padding: 10px 0; padding-left: 70px; }

.subMenu:hover, .subMenu.active { background-color: #dcecf5; }

[arul-132]

<div class="row menuBg">
    <div class="col-md-12 p-0">

        <mat-accordion displayMode="flat">
            <mat-expansion-panel class="tab_pannel" hideToggle>
                <mat-expansion-panel-header class="menuList">
                    <mat-panel-title routerLinkActive="active" routerLink="/dashboard">
                        Dashboard
                    </mat-panel-title>
                </mat-expansion-panel-header>
            </mat-expansion-panel>

            <mat-expansion-panel class="tab_pannel">
                <mat-expansion-panel-header class="menuList">
                    <mat-panel-title routerLinkActive="active">
                        Platforms
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <div class="card-body">
                    <div class="subMenu" routerLinkActive="active" routerLink="/platform-details">
                        Sub Dashboard
                    </div>
                </div>
            </mat-expansion-panel>
        </mat-accordion>
      </div>
    </div>

[prasanth-reddy-s]

In request we will send user, response should be similar to below -

[ { itemName: 'API Attestation', enabled: true, subMenu: [] }, { itemName: 'Bulk Promote', enabled: true, subMenu: [{ itemName: 'API Attestation', enabled: true, },{ itemName: 'API Attestation', enabled: true, }] },{ itemName: 'Bulk Deployment', enabled: false, subMenu: [] }, ]

if we send usernames who have access to in the response, then there is a chance, ppl will know who have access and there might be a chance for misuse.. instead, take useername as param for the API and return the menu in response with the access details

[prasanth-reddy-s]

  data: { callback: this.callBack.bind(this), defaultValue: this.name }

[prasanth-reddy-s]

callBack(name: string) { this.name = name; }

[prasanth-reddy-s]

public data: { callback: DialogDataSubmitCallback; defaultValue: any },

[prasanth-reddy-s]

(click)="data.callback(input.value)"

[prasanth-reddy-s]

<mat-form-field>
    <mat-date-range-input [formGroup]="datePicker" [rangePicker]="dateRangePicker">
        <input matStartDate placeholder="Start date" formControlName="start">
        <input matEndDate placeholder="End date" formControlName="end">
    </mat-date-range-input>
    <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matIconSuffix [for]="dateRangePicker"></mat-datepicker-toggle>
    <mat-date-range-picker #dateRangePicker></mat-date-range-picker>
</mat-form-field>