vendure/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

<div
    cdkDropList
    class="tree-node"
    #dropList
    [cdkDropListData]="collectionTree"
    [cdkDropListDisabled]="true"
    (cdkDropListDropped)="drop($event)"
>
    <div
        class="collection"
        *ngFor="let collection of collectionTree.children; index as i"
        cdkDrag
        [cdkDragData]="collection"
    >
        <div
            class="collection-detail"
            [ngClass]="'depth-' + depth"
            [class.active]="collection.id === activeCollectionId"
        >
            <div class="name">
                <clr-icon shape="folder"></clr-icon>
                {{ collection.name }}
            </div>
            <div class="flex-spacer"></div>
            <vdr-chip *ngIf="collection.isPrivate">{{ 'catalog.private' | translate }}</vdr-chip>
            <a class="btn btn-link btn-sm" [routerLink]="['./', { contents: collection.id }]">
                <clr-icon shape="view-list"></clr-icon>
                {{ 'catalog.view-contents' | translate }}
            </a>
            <a class="btn btn-link btn-sm" [routerLink]="['/catalog/collections/', collection.id]">
                <clr-icon shape="edit"></clr-icon>
                {{ 'common.edit' | translate }}
            </a>
            <!--
                TODO: reenable once it is possible to drop into nested lists. See https://github.com/angular/material2/issues/14093
                <div class="drag-handle" cdkDragHandle>
                    <clr-icon shape="drag-handle" size="24"></clr-icon>
                </div>
            -->
            <clr-dropdown>
                <span class="trigger" clrDropdownTrigger>
                    <clr-icon shape="ellipsis-vertical"></clr-icon>
                </span>
                <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
                    <button
                        type="button"
                        class="dropdown-item"
                        [disabled]="i === 0"
                        (click)="moveUp(collection, i)"
                    >
                        <clr-icon shape="caret up"></clr-icon>
                        {{ 'catalog.move-up' | translate }}
                    </button>
                    <button
                        type="button"
                        class="dropdown-item"
                        [disabled]="i === collectionTree.children.length - 1"
                        (click)="moveDown(collection, i)"
                    >
                        <clr-icon shape="caret down"></clr-icon>
                        {{ 'catalog.move-down' | translate }}
                    </button>
                    <h4 class="dropdown-header">{{ 'catalog.move-to' | translate }}</h4>
                    <button
                        type="button"
                        class="dropdown-item"
                        *ngFor="let item of getMoveListItems(collection)"
                        (click)="move(collection, item.id)"
                    >
                        <clr-icon shape="child-arrow"></clr-icon>
                        {{ item.path }}
                    </button>
                </clr-dropdown-menu>
            </clr-dropdown>
        </div>
        <vdr-collection-tree-node
            [collectionTree]="collection"
            [activeCollectionId]="activeCollectionId"
        ></vdr-collection-tree-node>
    </div>
</div>