model-management.component.html

<div
  style="display: flex; flex-direction: column"
  *ngIf="solution$ | async as data"
>
  <div style="display: flex; flex-direction: column; padding: 20px">
    <div
      style="
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-items: center;
        gap: 8px;
      "
    >
      <span class="md-headline5">Manage {{ data.name }}</span
      >|

      <gp-version-dropdown
        [selectedDefaultRevision]="(selectedRevision$ | async)!"
        [revisionsList]="(revisions$ | async)!"
        (revisionChange)="onChangeVersion($event)"
      ></gp-version-dropdown>
      |
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-items: center;
        "
        *ngIf="sharedWith$ | async as sharedWithData"
      >
        <span>Author and Publisher - &nbsp; </span>
        <img
          style="width: 27px; height: 27px"
          src="../../../../assets/images/user-profile-black.png"
        />
        <div style="display: flex; flex-direction: row">
          <button
            mat-icon-button
            [matMenuTriggerFor]="menu"
            aria-label="Example icon-button with a menu"
          >
            <mat-icon>more_horiz</mat-icon>
          </button>
          <mat-menu #menu="matMenu" xPosition="after">
            <mat-list role="list" *ngFor="let item of sharedWithData">
              <mat-list-item role="listitem" style="font-size: 14px">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-items: center;
                    gap: 4px;
                  "
                >
                  <img
                    style="width: 27px; height: 27px; display: inline-block"
                    src="../../../../assets/images/user-profile-black.png"
                  />
                  <span [title]="[item.firstName, item.lastName].join('')"
                    >{{
                      [item.firstName, item.lastName].join(" ") | truncate: 13
                    }}
                  </span>
                </div>
              </mat-list-item>
            </mat-list>
          </mat-menu>
        </div>
      </div>
    </div>

    <div>
      <gp-breadcrumb-navigation
        [solution]="data"
        [firstNavigationLabel]="'Home'"
        [secondNavigationLabel]="'Manage my model'"
        (firstNavigationClicked)="onHomeClick()"
        (secondNavigationClicked)="onManageMyModelClick()"
      ></gp-breadcrumb-navigation>
    </div>
  </div>

  <mat-sidenav-container>
    <mat-sidenav mode="side" opened>
      <div class="workflow-left-header workflow-header">MANAGEMENT OPTIONS</div>
      <div
        *ngIf="selectedRevision$ | async as selectedRevision"
        style="
          display: flex;
          flex-direction: column !important;
          justify-content: center !important;
          margin-left: 16px;
        "
      >
        <div>
          <span class="tab-box" style="font-size: 14px">On - Boarding</span>
        </div>
        <div>
          <span class="version-on-boarded"
            >Completed on
            {{
              selectedRevision.onBoarded | date: "MM/dd/yyyy, h:mm:ss a"
            }}</span
          >
        </div>
      </div>
      <nav mat-tab-nav-bar class="margin: 20px 0 20px 0;" [tabPanel]="tabPanel">
        <a
          mat-tab-link
          routerLink="shareWithTeam"
          routerLinkActive="is-active"
          style="padding-top: 2px; padding-bottom: 8px"
        >
          <mat-icon fontIcon="share"></mat-icon>
          <div
            style="
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              gap: 2px;
              margin-left: 14px;
            "
          >
            <span class="tab-box" style="font-size: 14px">
              Share with team</span
            >
            <span
              *ngIf="sharedWith$ | async as sharedWithData"
              style="
                margin: 0;
                padding: 0;
                font-size: 12px;
                line-height: 16px;
                font-weight: 400;
                letter-spacing: 0;
              "
              >Shared with {{ sharedWithData.length }} co-workers</span
            >
          </div>
        </a>
        <a
          mat-tab-link
          routerLink="publisherAuthors"
          routerLinkActive="is-active"
          ><span
            class="managelefticon tabs-left authorsimg"
            [ngClass]="
              isActive(
                '/dashboard/manageMyModel/' +
                  solutionId +
                  revisionId +
                  '/publisherAuthors'
              )
                ? 'authorsimg-active'
                : 'authorsimg-inactive'
            "
          ></span
          ><span class="tab-box" style="font-size: 14px"
            >Manage Publisher/Authors</span
          ></a
        >
        <a mat-tab-link routerLink="publishModel" routerLinkActive="is-active"
          ><span
            class="managelefticon tabs-left companyimg"
            [ngClass]="
              isActive(
                '/dashboard/manageMyModel/' +
                  solutionId +
                  revisionId +
                  '/publishModel'
              )
                ? 'companyimg-active'
                : 'companyimg-inactive'
            "
          ></span
          ><span class="tab-box" style="font-size: 14px"
            >Publish to Marketplace</span
          ></a
        >
        <a mat-tab-link routerLink="deleteModel" routerLinkActive="is-active"
          ><mat-icon fontIcon="delete"></mat-icon
          ><span
            class="tab-box"
            style="font-size: 14px; margin-left: 15px !important"
            >Delete Model</span
          ></a
        >
      </nav>
      <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
    </mat-sidenav>
    <mat-sidenav-content> <router-outlet></router-outlet></mat-sidenav-content
  ></mat-sidenav-container>
</div>