feat(admin-ui): Make CollectionList items expandable

packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.html

@@ -1,4 +1,10 @@
 <vdr-action-bar>
+    <vdr-ab-left>
+        <clr-checkbox-wrapper class="expand-all-toggle">
+            <input type="checkbox" clrCheckbox [(ngModel)]="expandAll" />
+            <label>{{ 'catalog.expand-all-collections' | translate }}</label>
+        </clr-checkbox-wrapper>
+    </vdr-ab-left>
     <vdr-ab-right>
         <vdr-action-bar-items locationId="collection-list"></vdr-action-bar-items>
         <a class="btn btn-primary" *vdrIfPermissions="'CreateCatalog'" [routerLink]="['./create']">
@@ -11,6 +17,7 @@
     <vdr-collection-tree
         [collections]="items$ | async"
         [activeCollectionId]="activeCollectionId$ | async"
+        [expandAll]="expandAll"
         (rearrange)="onRearrange($event)"
         (deleteCollection)="deleteCollection($event)"
     ></vdr-collection-tree>

packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.scss

@@ -6,6 +6,11 @@
     flex-direction: column;
 }
 
+.expand-all-toggle {
+    display: block;
+    margin-top: 14px;
+}
+
 .collection-wrapper {
     display: flex;
     height: 100%;

packages/admin-ui/src/app/catalog/components/collection-list/collection-list.component.ts

@@ -21,6 +21,7 @@ export class CollectionListComponent implements OnInit {
     activeCollectionId$: Observable<string | null>;
     activeCollectionTitle$: Observable<string>;
     items$: Observable<GetCollectionList.Items[]>;
+    expandAll = false;
     private queryResult: QueryResult<any>;
 
     constructor(

packages/admin-ui/src/app/catalog/components/collection-tree/array-to-tree.spec.ts

@@ -26,20 +26,23 @@ describe('arrayToTree()', () => {
                 {
                     id: '12',
                     parent: { id: '1' },
+                    expanded: false,
                     children: [
                         {
                             id: '121',
                             parent: { id: '12' },
-                            children: [{ id: '1211', parent: { id: '121' }, children: [] }],
+                            expanded: false,
+                            children: [{ id: '1211', expanded: false, parent: { id: '121' }, children: [] }],
                         },
                     ],
                 },
                 {
                     id: '13',
                     parent: { id: '1' },
+                    expanded: false,
                     children: [
-                        { id: '132', parent: { id: '13' }, children: [] },
-                        { id: '131', parent: { id: '13' }, children: [] },
+                        { id: '132', expanded: false, parent: { id: '13' }, children: [] },
+                        { id: '131', expanded: false, parent: { id: '13' }, children: [] },
                     ],
                 },
             ],

packages/admin-ui/src/app/catalog/components/collection-tree/array-to-tree.ts

@@ -1,5 +1,5 @@
 export type HasParent = { id: string; parent?: { id: string } | null };
-export type TreeNode<T extends HasParent> = T & { children: Array<TreeNode<T>> };
+export type TreeNode<T extends HasParent> = T & { children: Array<TreeNode<T>>; expanded: boolean };
 export type RootNode<T extends HasParent> = { id?: string; children: Array<TreeNode<T>> };
 
 /**
@@ -18,6 +18,7 @@ export function arrayToTree<T extends HasParent>(nodes: T[]): RootNode<T> {
     for (const id of nodes.map(n => n.id)) {
         if (mappedArr.hasOwnProperty(id)) {
             const mappedElem = mappedArr[id];
+            mappedElem.expanded = false;
             const parent = mappedElem.parent;
             if (!parent) {
                 continue;

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

@@ -19,7 +19,18 @@
             [class.active]="collection.id === activeCollectionId"
         >
             <div class="name">
-                <clr-icon shape="folder"></clr-icon>
+                <button
+                    class="icon-button folder-button"
+                    [disabled]="expandAll"
+                    *ngIf="collection.children?.length; else folderSpacer"
+                    (click)="collection.expanded = !collection.expanded"
+                >
+                    <clr-icon shape="folder" *ngIf="!collection.expanded && !expandAll"></clr-icon>
+                    <clr-icon shape="folder-open" *ngIf="collection.expanded || expandAll"></clr-icon>
+                </button>
+                <ng-template #folderSpacer>
+                    <div class="folder-button-spacer"></div>
+                </ng-template>
                 {{ collection.name }}
             </div>
             <div class="flex-spacer"></div>
@@ -98,6 +109,8 @@
             </vdr-dropdown>
         </div>
         <vdr-collection-tree-node
+            *ngIf="collection.expanded || expandAll"
+            [expandAll]="expandAll"
             [collectionTree]="collection"
             [activeCollectionId]="activeCollectionId"
         ></vdr-collection-tree-node>

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss

@@ -30,6 +30,11 @@
         &.depth-2 { padding-left: 12px + 48px; }
         &.depth-3 { padding-left: 12px + 72px; }
         &.depth-4 { padding-left: 12px + 96px; }
+
+        .folder-button-spacer {
+            display: inline-block;
+            width: 28px;
+        }
     }
 }
 

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts

@@ -18,6 +18,7 @@ export class CollectionTreeNodeComponent implements OnInit {
     parentName: string;
     @Input() collectionTree: TreeNode<CollectionPartial>;
     @Input() activeCollectionId: string;
+    @Input() expandAll = false;
     hasUpdatePermission$: Observable<boolean>;
     hasDeletePermission$: Observable<boolean>;
 

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

@@ -1,6 +1,7 @@
 <vdr-collection-tree-node
     *ngIf="collectionTree"
     cdkDropListGroup
+    [expandAll]="expandAll"
     [collectionTree]="collectionTree"
     [activeCollectionId]="activeCollectionId"
 ></vdr-collection-tree-node>

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree.component.ts

@@ -25,6 +25,7 @@ export type CollectionPartial = Pick<Collection.Fragment, 'id' | 'parent' | 'nam
 export class CollectionTreeComponent implements OnChanges {
     @Input() collections: CollectionPartial[];
     @Input() activeCollectionId: string;
+    @Input() expandAll = false;
     @Output() rearrange = new EventEmitter<RearrangeEvent>();
     @Output() deleteCollection = new EventEmitter<string>();
     collectionTree: RootNode<CollectionPartial>;

packages/admin-ui/src/i18n-messages/en.json

@@ -50,6 +50,7 @@
     "display-variant-cards": "View details",
     "display-variant-table": "View as table",
     "drop-files-to-upload": "Drop files to upload",
+    "expand-all-collections": "Expand all collections",
     "facet-values": "Facet values",
     "filter-by-name": "Filter by name",
     "filters": "Filters",