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="category"
        *ngFor="let collection of collectionTree.children; index as i"
        cdkDrag
        [cdkDragData]="collection"
    >
        <div class="category-detail" [ngClass]="'depth-' + depth">
            <div class="name">
                <clr-icon shape="folder"></clr-icon>
                {{ collection.name }}
            </div>
            <div class="flex-spacer">
                <vdr-facet-value-chip
                    *ngFor="let facetValue of collection.facetValues"
                    [facetValue]="facetValue"
                    [displayFacetName]="false"
                    [removable]="false"
                ></vdr-facet-value-chip>
            </div>
            <a class="btn btn-link btn-sm" [routerLink]="['./', 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"></vdr-collection-tree-node>
    </div>
</div>