zeppelin-web-angular/src/app/share/node-list/node-list.component.html

<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="content" [class.header-mode]="headerMode">
  <h4>
    <a (click)="importNote()">
      <i nz-icon nzType="upload" nzTheme="outline"></i>
      Import Note
    </a>
  </h4>
  <h4>
    <a (click)="createNote()">
      <i nz-icon nzType="file-add" nzTheme="outline"></i>
      Create new Note
    </a>
  </h4>
  <nz-input-group [nzPrefixIcon]="'search'" nzSize="small">
    <input type="text" nz-input placeholder="Filter" nzSize="small" [(ngModel)]="searchValue"/>
  </nz-input-group>
  <nz-tree [nzData]="nodes" [nzSearchValue]="searchValue" [nzTreeTemplate]="treeTpl"></nz-tree>
  <ng-template #treeTpl let-node>
      <span class="node"
            [ngSwitch]="node.origin.nodeType"
            [class.not-matched]="searchValue && !node.isMatched"
            [class.active]="activatedId === node.origin.id"
            (click)="activeNote(node.origin.id)">
        <span class="folder" *ngSwitchCase="'folder'">
          <a class="name" (click)="toggleFolder(node)">
            <i nz-icon
               [nzType]="node.isExpanded ? 'folder-open':'folder'"
               nzTheme="fill"></i>
            {{ node.title }}
          </a>
          <span class="operation">
            <ng-container *ngIf="!node.origin.isTrash;else trashFolderTpl">
              <a nz-tooltip nzTitle="Create new note">
                <i nz-icon nzType="file-add" (click)="createNote(node.origin.id)"></i>
              </a>
              <a nz-tooltip nzTitle="Rename folder">
                <i nz-icon nzType="edit" (click)="renameFolder(node.origin.id)"></i>
              </a>
              <a nz-tooltip nzTitle="Move folder to Trash">
                <i nz-icon
                   nzType="delete"
                   nz-popconfirm
                   nzTitle="This folder will be moved to trash."
                   (nzOnConfirm)="moveFolderToTrash(node.origin.id)"></i>
              </a>
            </ng-container>
            <ng-template #trashFolderTpl>
              <a nz-tooltip nzTitle="Restore folder">
                <i nz-icon nzType="undo" (click)="restoreFolder(node.origin.id)"></i>
              </a>
              <a nz-tooltip nzTitle="Remove folder permanently">
                <i nz-icon
                   nzType="delete"
                   nz-popconfirm
                   nzTitle="This cannot be undone. Are you sure?"
                   (nzOnConfirm)="removeFolder(node.origin.id)"></i>
              </a>
            </ng-template>
          </span>
        </span>
        <span class="file" *ngSwitchCase="'note'">
          <a class="name">
            <i nz-icon nzType="file" nzTheme="outline"></i>
            <a [routerLink]="['/notebook',node.origin.id]">
              {{ node.title }}
            </a>
          </a>
            <span class="operation">
              <ng-container *ngIf="!node.origin.isTrash;else trashFileTpl">
                <a nz-tooltip nzTitle="Rename note">
                  <i nz-icon nzType="edit" (click)="renameNote(node.origin.id,node.origin.path,node.origin.name)"></i>
                </a>
                <a nz-tooltip nzTitle="Clear output">
                  <i nz-icon
                     nzType="fire"
                     nz-popconfirm
                     nzTitle="Do you want to clear all output?"
                     (nzOnConfirm)="paragraphClearAllOutput(node.origin.id)"></i>
                </a>
                <a nz-tooltip nzTitle="Move note to Trash">
                  <i nz-icon
                     nzType="delete"
                     nz-popconfirm
                     nzTitle="This note will be moved to trash."
                     (nzOnConfirm)="moveNoteToTrash(node.origin.id)"></i>
                </a>
              </ng-container>
              <ng-template #trashFileTpl>
                <a nz-tooltip nzTitle="Restore note">
                  <i nz-icon nzType="undo" (click)="restoreNote(node.origin.id)"></i>
                </a>
                <a nz-tooltip nzTitle="Remove note permanently">
                  <i nz-icon
                     nzType="delete"
                     nz-popconfirm
                     nzTitle="This cannot be undone. Are you sure?"
                     (nzOnConfirm)="deleteNote(node.origin.id)"></i>
                </a>
              </ng-template>
            </span>
        </span>
        <span class="folder" *ngSwitchCase="'trash'">
          <a class="name" (click)="toggleFolder(node)">
            <i nz-icon nzType="delete" nzTheme="fill"></i>
            {{ node.title }}
          </a>
          <span class="operation">
            <a nz-tooltip nzTitle="Restore all">
              <i nz-icon
                 nzType="undo"
                 nz-popconfirm
                 nzTitle="Folders and notes in the trash will be merged into their original position."
                 (nzOnConfirm)="restoreAll()"></i>
            </a>
            <a nz-tooltip nzTitle="Empty all">
              <i nz-icon
                 nzType="delete"
                 nz-popconfirm
                 nzTitle="This cannot be undone. Are you sure?"
                 (nzOnConfirm)="emptyTrash()"></i>
            </a>
          </span>
        </span>
      </span>
  </ng-template>

</div>