webapp/src/app/projects/projectsListAccordion.component.ts

   1 import { Component, Input } from "@angular/core";
   2
   3 import { IProject } from "../services/project.service";
   4
   5 @Component({
   6     selector: 'projects-list-accordion',
   7     template: `
   8         <style>
   9             .fa.fa-exclamation-triangle {
  10                 margin-right: 2em;
  11                 color: red;
  12             }
  13             .fa.fa-refresh {
  14                 margin-right: 10px;
  15                 color: darkviolet;
  16             }
  17         </style>
  18         <accordion>
  19             <accordion-group #group *ngFor="let prj of projects">
  20                 <div accordion-heading>
  21                     {{ prj.label }}
  22                     <div class="pull-right">
  23                         <i *ngIf="prj.status == 'Syncing'" class="fa fa-refresh faa-spin animated"></i>
  24                         <i *ngIf="!prj.isInSync && prj.status != 'Syncing'" class="fa fa-exclamation-triangle"></i>
  25                         <i class="fa" [ngClass]="{'fa-chevron-down': group.isOpen, 'fa-chevron-right': !group.isOpen}"></i>
  26                     </div>
  27                 </div>
  28                 <project-card [project]="prj"></project-card>
  29             </accordion-group>
  30         </accordion>
  31     `
  32 })
  33 export class ProjectsListAccordionComponent {
  34
  35     @Input() projects: IProject[];
  36
  37 }
  38
  39