dspace-angular/src/app/community-list-page/community-list/community-list.component.html at 494d0eb41132caa0b703764d539de854d56567b8 · 4Science/dspace-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-loading>
<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
  <!-- This is the tree node template for show more node -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                 class="example-tree-node show-more-node">
    <div class="btn-group">
      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
        <span class="fa fa-chevron-right"></span>
      </span>
      <div class="align-middle my-auto">
        <button *ngIf="(dataSource.loading$ | async) !== true" (click)="getNextPage(node)"
           class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
           <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
        </button>
        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-loading>
      </div>
    </div>
    <div class="text-muted" cdkTreeNodePadding>
      <div class="d-flex">
      </div>
    </div>
  </cdk-tree-node>
  <!-- This is the tree node template for expandable nodes (coms and subcoms with children) -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding
                 class="example-tree-node expandable-node">
    <div class="btn-group">
      <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
              [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
              (click)="toggleExpanded(node)"
              (keyup.enter)="toggleExpanded(node)"
              (keyup.space)="toggleExpanded(node)"
              data-test="expand-button"
              role="button"
              tabindex="0">
        <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
              aria-hidden="true"></span>
        <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
      </button>
      <!--Don't render the button when non-expandable otherwise it's still accessible, instead render this placeholder-->
      <span *ngIf="(hasChild(null, node) | async) !== true" aria-hidden="true" class="btn btn-default invisible">
        <span class="fa fa-chevron-right"></span>
      </span>
      <div class="d-flex flex-row">
        <span class="d-flex align-middle my-auto">
          <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
          <span class="pr-2">&nbsp;</span>
          <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead my-auto">{{node.payload.archivedItemsCount}}</span>
        </span>
      </div>
    </div>
    <ds-truncatable [id]="node.id">
      <div class="text-muted" cdkTreeNodePadding>
        <div class="d-flex" *ngIf="node.payload.shortDescription">
          <span aria-hidden="true" class="btn btn-default invisible">
            <span class="fa fa-chevron-right"></span>
          </span>
          <ds-truncatable-part [id]="node.id" [minLines]="3">
            <span>{{node.payload.shortDescription}}</span>
          </ds-truncatable-part>
        </div>
      </div>
    </ds-truncatable>
    <div class="d-flex" *ngIf="node===loadingNode && dataSource.loading$ | async"
         cdkTreeNodePadding>
      <span aria-hidden="true" class="btn btn-default invisible">
        <span class="fa fa-chevron-right"></span>
      </span>
      <ds-loading class="ds-themed-loading"></ds-loading>
    </div>
  </cdk-tree-node>
  <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->
  <cdk-tree-node *cdkTreeNodeDef="let node; when: !(hasChild && isShowMore)" cdkTreeNodePadding
                 class="example-tree-node childless-node">
    <div class="btn-group">
      <span aria-hidden="true" class="btn btn-default invisible" cdkTreeNodeToggle>
        <span class="fa fa-chevron-right"></span>
      </span>
      <h6 class="align-middle my-auto">
        <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
      </h6>
    </div>
    <ds-truncatable [id]="node.id">
      <div class="text-muted" cdkTreeNodePadding>
        <div class="d-flex" *ngIf="node.payload.shortDescription">
          <span aria-hidden="true" class="btn btn-default invisible">
            <span class="fa fa-chevron-right"></span>
          </span>
          <ds-truncatable-part [id]="node.id" [minLines]="3">
            <span>{{node.payload.shortDescription}}</span>
          </ds-truncatable-part>
        </div>
      </div>
    </ds-truncatable>
  </cdk-tree-node>
</cdk-tree>