dspace-angular/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html at 58b24d4b88706b13f9bad9b9453b9ab8f94752c3 · aseyedia/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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<ds-alert *ngIf="description" [content]="description" [type]="AlertType.Info"></ds-alert>
<div class="treeview-header row mb-1">
  <div class="col-12">
    <div class="input-group">
      <input #searchInput type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
             [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
      <div class="input-group-append" id="button-addon4">
        <button class="btn btn-outline-primary" type="button" (click)="search()" [dsBtnDisabled]="!isSearchEnabled()"
                [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
          {{'vocabulary-treeview.search.form.search' | translate}}
        </button>
        <button class="btn btn-outline-secondary" type="button" (click)="reset()"
                [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
          {{'vocabulary-treeview.search.form.reset' | translate}}
        </button>
        <button *ngIf="showAdd" class="btn btn-outline-primary" type="button" (click)="add()"
          [dsBtnDisabled]="this.vocabularyOptions.closed">
          {{'vocabulary-treeview.search.form.add' | translate}}
        </button>
      </div>
    </div>
  </div>
</div>
<div class="treeview-container">
  <ds-loading *ngIf="loading | async" [showMessage]="false"></ds-loading>
  <div aria-live="polite">
    <h2 *ngIf="(loading | async) !== true && dataSource.data.length === 0" class="h4 text-center text-muted mt-4" >
      <span>{{'vocabulary-treeview.search.no-result' | translate}}</span>
    </h2>
  </div>
  <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <!-- Leaf node -->
    <cdk-tree-node *cdkTreeNodeDef="let node" cdkTreeNodePadding class="d-flex">
      <span aria-hidden="true" type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle>
        <i class="fas fa-fw fa-angle-right invisible"></i>
      </span>
          <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
                 [class.text-success]="node.isSelected"
                 [ngbTooltip]="node.item?.otherInformation?.note"
                 [openDelay]="500"
                 container="body"
          >
            <input class="mr-2" type="checkbox"
                   [disabled]="!node.item?.selectable"
                   [(ngModel)]="node.isSelected"
                   [checked]="node.isSelected"
                   (change)="onSelect(node.item)"
            >
            <span>{{node.item.display}}</span>
          </label>
          <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                  [class.text-success]="node.isSelected"
                  [dsBtnDisabled]="!node.item?.selectable"
                  [ngbTooltip]="node.item?.otherInformation?.note"
                  [openDelay]="500"
                  container="body"
                  (click)="onSelect(node.item)">
          <span>{{node.item.display}}</span>
        </button>
    </cdk-tree-node>

    <!-- expandable node -->
    <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
        <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name"
                (click)="loadChildren(node)">
          <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
        </button>

          <label *ngIf="multiSelect" class="d-flex align-items-center m-0 p-0 form-check"
                [class.text-success]="node.isSelected"
                [ngbTooltip]="node.item?.otherInformation?.note"
                [openDelay]="500"
                container="body">
            <input class="mr-2" type="checkbox"
                   [disabled]="!node.item?.selectable"
                   [(ngModel)]="node.isSelected"
                   [checked]="node.isSelected"
                   (change)="onSelect(node.item)"
            >
            <span>{{node.item.display}}</span>
          </label>
          <button *ngIf="!multiSelect" class="btn btn-outline-link btn-sm text-left"
                  [class.text-success]="node.isSelected"
                  [dsBtnDisabled]="!node.item?.selectable"
                  [ngbTooltip]="node.item?.otherInformation?.note"
                  [openDelay]="500"
                  container="body"
                  (click)="onSelect(node.item)">
            <span>{{node.item.display}}</span>
          </button>
    </cdk-tree-node>

    <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
      <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)"
              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
        {{'vocabulary-treeview.load-more' | translate}}...
      </button>
    </cdk-tree-node>

    <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
      <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)"
              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
        {{'vocabulary-treeview.load-more' | translate}}...
      </button>
    </cdk-tree-node>
  </cdk-tree>
</div>