open-learning-exchange/planet

<mat-toolbar>
  <button mat-icon-button (click)="goBack()">
    <mat-icon>arrow_back</mat-icon>
  </button>
  <span i18n>Meetups</span>
  <span class="toolbar-fill"></span>
  <mat-icon class="input-icon">search</mat-icon>
  <mat-form-field class="font-size-1">
    <input matInput (keyup)="applyFilter($event.target.value)" i18n-placeholder placeholder="Type title to search...">
  </mat-form-field>
</mat-toolbar>

<div class="space-container primary-link-hover">
  <mat-toolbar class="primary-color font-size-1">
    <ng-container *ngIf="!parent && isAuthorized">
      <button mat-mini-fab routerLink="add">
        <mat-icon>add</mat-icon>
      </button>
      <span class="toolbar-fill"></span>
      <button mat-button [disabled]="selectedNotJoined === 0" (click)="meetupsToggle(selection.selected, 'add')">
        <mat-icon aria-hidden="true" class="margin-lr-3">library_add</mat-icon><span i18n>Join Selected</span>
        <span *ngIf="selectedNotJoined > 0"> ({{selectedNotJoined}})</span>
      </button>
      <button mat-button [disabled]="selectedJoined === 0" (click)="meetupsToggle(selection.selected, 'remove')">
        <mat-icon aria-hidden="true" class="margin-lr-3">clear</mat-icon><span i18n>Leave Selected</span>
        <span *ngIf="selectedJoined > 0"> ({{selectedJoined}})</span>
      </button>
      <button *ngIf="currentUser.isUserAdmin" mat-button (click)="deleteSelected()" [disabled]="!selection.selected.length">
        <mat-icon aria-hidden="true" class="margin-lr-3">delete_forever</mat-icon>
        <span i18n>Delete</span>
        <span *ngIf="selection?.selected?.length"> ({{selection?.selected?.length}})</span>
      </button>
    </ng-container>
  </mat-toolbar>

  <div class="view-container view-full-height view-table" *ngIf="!emptyData; else notFoundMessage">
    <mat-table #table [dataSource]="meetups" matSort [matSortDisableClear]="true">
      <ng-container matColumnDef="select">
        <mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
          </mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let row" class="table-selection-top">
          <mat-checkbox (change)="$event ? selection.toggle(row._id) : null" [checked]="selection.isSelected(row._id)">
          </mat-checkbox>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="title">
        <mat-header-cell *matHeaderCellDef mat-sort-header="title" i18n> Title </mat-header-cell>
        <mat-cell *matCellDef="let element" class="list-content-menu">
          <h3 class="header">
            <a [routerLink]="['view', element._id]">{{element.title}}</a>
            <mat-icon class="margin-lr-3" i18n-title title="Joined Meetup" [inline]="true" *ngIf="element.participate">check</mat-icon>
          </h3>
          <div class="content">
            <td-markdown [content]="element.description"></td-markdown>
          </div>
          <button *ngIf="!parent" class="menu" mat-icon-button [matMenuTriggerFor]="meetupMenu">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-cell>
            <mat-menu #meetupMenu="matMenu">
              <a mat-menu-item *ngIf="element.participate || ((element.endDate || element.startDate) > dateNow && !element.participate)" (click)="attendMeetup(element)">
                <span *ngIf="element.participate; else joinMeetup"><mat-icon>clear</mat-icon><span i18n>Leave</span></span>
                <ng-template #joinMeetup><mat-icon>done</mat-icon><span i18n>Join</span></ng-template>
              </a>
              <a mat-menu-item planetFeedback [feedbackOf]="{'state': 'meetups', 'item': element._id}" i18n-title title="Feedback">
                <mat-icon>feedback</mat-icon>
                <span i18n>Feedback</span>
              </a>
              <a mat-menu-item [routerLink]="['/meetups/update', element._id]" *ngIf="currentUser.name === element.createdBy">
                <mat-icon>folder</mat-icon>
                <span i18n>Manage</span>
              </a>
              <ng-container *ngIf="currentUser.name === element.createdBy || currentUser.isUserAdmin">
                <button mat-menu-item (click)="deleteClick(element)">
                  <mat-icon>delete_forever</mat-icon>
                  <span i18n>Delete</span>
                </button>
              </ng-container>
            </mat-menu>
          </mat-cell>
        </mat-cell>
      </ng-container>
      <ng-container matColumnDef="info">
        <mat-header-cell *matHeaderCellDef i18n>Information</mat-header-cell>
        <mat-cell *matCellDef="let element">
          <div>
            <p>
              <span i18n>Date:</span>
              <span>{{ ' ' + (element.startDate | date: 'fullDate') + ' ' }}</span>
              <span *ngIf="element.endDate && element.endDate !== element.startDate">{{ '- ' + (element.endDate | date: 'fullDate') + ' ' }}</span>
              <span *ngIf="element.startTime || element.endTime" i18n>at</span>
              <span>{{ ' ' + element.startTime }}</span>
              <span *ngIf="element.endTime">{{ ' - ' + element.endTime }}</span>
            </p>
            <p *ngIf="element.recurring"><span i18n>Recurring:</span>{{ ' ' + element.recurring | titlecase }}</p>
            <p *ngIf="element.recurring === 'weekly'"><span i18n>Recurring Days: </span><span *ngFor="let day of element.day; let isLast= last">{{day}}{{isLast ? '' : ', '}}</span></p>
            <p *ngIf="element.meetupLocation"><span i18n>Location:</span>{{ ' ' + element.meetupLocation }}</p>
          </div>
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="displayedColumns" class="hide"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{highlight:selection.isSelected(row._id)}"></mat-row>
    </mat-table>
    <mat-paginator #paginator
      [pageSize]="50"
      [pageSizeOptions]="[5, 10, 20, 50, 100, 200]"
      (page)="onPaginateChange($event)">
    </mat-paginator>
  </div>
  <ng-template #notFoundMessage>
    <div class="view-container" i18n>No Meetups Found</div>
  </ng-template>
</div>