community.component.html

<div class="space-container">
  <div class="view-container view-full-height community-view">
    <div class="community-news">
      <mat-tab-group class="tabs-padding" (selectedTabChange)="tabChanged($event)">
        <mat-tab i18n-label label="Our Voices">
          <h3 style="text-align: right; margin-right: 0.5rem;">
            <ng-container *planetAuthorizedRoles="'learner'">
              <button mat-stroked-button (click)="openAddMessageDialog()" *ngIf="showNewsButton" i18n>New Voice</button>
            </ng-container>
          </h3>
          <planet-news-list [items]="news" [shareTarget]="shareTarget" (viewChange)="toggleShowButton($event)" [viewableId]="teamId"></planet-news-list>
        </mat-tab>
        <mat-tab i18n-label label="Community Advisor">
          <planet-chat [showToolbar]="showChatToolbar"></planet-chat>
        </mat-tab>
        <mat-tab i18n-label label="Community Leaders">
          <div class="card-grid">
            <mat-card *ngFor="let councillor of councillors">
              <planet-teams-member
                [leadershipTitle]="councillor.doc.leadershipTitle"
                [member]="councillor"
                [actionMenu]="!planetCode && (user.roles.indexOf('_admin') > -1 || user.roles.indexOf('manager') > -1) ? [ 'title' ] : []"
                (actionClick)="openChangeTitleDialog($event)">
              </planet-teams-member>
            </mat-card>
          </div>
        </mat-tab>
        <mat-tab i18n-label label="Services">
          <planet-markdown *ngIf="team.description" [content]="team.description || ''"></planet-markdown>
          <ng-container *ngIf="!planetCode">
            <button *planetAuthorizedRoles="''" (click)="openDescriptionDialog()" mat-stroked-button i18n>
              { servicesDescriptionLabel, select, Edit {Edit} Add {Add}} { configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description
            </button>
          </ng-container>
          <mat-nav-list>
            <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
              <span matLine>{{link.title}}</span>
              <button *ngIf="deleteMode" mat-icon-button color="warn" (click)="openDeleteLinkDialog(link); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
            </mat-list-item>
          </mat-nav-list>
          <ng-container *ngIf="!planetCode">
            <div *planetAuthorizedRoles="''" class="action-buttons">
              <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>
              <button (click)="toggleDeleteMode()" [disabled]="links.length===0" mat-stroked-button>
                <span *ngIf="!deleteMode" i18n>Remove Links</span>
                <span *ngIf="deleteMode" i18n>Done Removing Links</span>
              </button>
            </div>
          </ng-container>
        </mat-tab>
        <mat-tab *ngIf="configuration.planetType==='nation'" i18n-label label="Communities">
          <planet-community-list></planet-community-list>
        </mat-tab>
        <mat-tab i18n-label label="Finances">
          <planet-teams-view-finances [finances]="finances" [team]="team" (financesChanged)="dataChanged()" [editable]="isCommunityLeader && !planetCode"></planet-teams-view-finances>
        </mat-tab>
        <mat-tab i18n-label label="Reports">
          <planet-teams-reports [reports]="reports" [editable]="isCommunityLeader && !planetCode" [team]="team" (reportsChanged)="dataChanged()"></planet-teams-reports>
        </mat-tab>
        <mat-tab i18n-label label="Calendar" *ngIf="deviceType === deviceTypes.MOBILE">
          <planet-calendar [resizeCalendar]="resizeCalendar" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
        </mat-tab>
      </mat-tab-group>
    </div>
    <planet-calendar *ngIf="deviceType != deviceTypes.MOBILE" [link]="{ teams: teamId }" [sync]="{ type: 'sync', planetCode: planetCode || configuration.code }"></planet-calendar>
  </div>
</div>