feat(admin-ui): Display breadcrumbs in Collection detail view

packages/admin-ui/.gitignore

@@ -6,6 +6,7 @@
 /out-tsc
 /package
 /src/lib/package.json
+/.angular
 
 # dependencies
 /node_modules

packages/admin-ui/i18n-coverage.json

@@ -1,69 +1,69 @@
 {
-  "generatedOn": "2022-09-28T08:45:00.955Z",
-  "lastCommit": "87fb318908aa2fbdf8fc0d142924ef37b9ecc687",
+  "generatedOn": "2022-09-28T09:24:11.676Z",
+  "lastCommit": "76d1ca6a70122047781465079dc09c2ed66f5246",
   "translationStatus": {
     "cs": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 593,
       "percentage": 88
     },
     "de": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 572,
       "percentage": 85
     },
     "en": {
-      "tokenCount": 672,
-      "translatedCount": 671,
+      "tokenCount": 673,
+      "translatedCount": 672,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 624,
       "percentage": 93
     },
     "fr": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 614,
       "percentage": 91
     },
     "it": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 622,
-      "percentage": 93
+      "percentage": 92
     },
     "pl": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 407,
-      "percentage": 61
+      "percentage": 60
     },
     "pt_BR": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 591,
       "percentage": 88
     },
     "pt_PT": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 635,
       "percentage": 94
     },
     "ru": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 621,
       "percentage": 92
     },
     "uk": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 621,
       "percentage": 92
     },
     "zh_Hans": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 559,
       "percentage": 83
     },
     "zh_Hant": {
-      "tokenCount": 672,
+      "tokenCount": 673,
       "translatedCount": 387,
       "percentage": 58
     }

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.html

@@ -31,8 +31,17 @@
         </ng-template>
     </vdr-ab-right>
 </vdr-action-bar>
+<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as collection">
 
-<form class="form" [formGroup]="detailForm" *ngIf="entity$ | async as category">
+    <nav role="navigation">
+        <ul class="collection-breadcrumbs">
+            <li *ngFor="let breadcrumb of collection.breadcrumbs; let isFirst = first; let isLast = last">
+                <a [routerLink]="['/catalog/collections']" *ngIf="isFirst">{{ 'catalog.root-collection' | translate }}</a>
+                <a [routerLink]="['/catalog/collections', breadcrumb.id]" *ngIf="!isFirst && !isLast">{{ breadcrumb.name | translate }}</a>
+                <ng-container *ngIf="isLast">{{ breadcrumb.name | translate }}</ng-container>
+            </li>
+        </ul>
+    </nav>
     <div class="clr-row">
         <div class="clr-col">
             <vdr-form-field [label]="'catalog.visibility' | translate" for="visibility">
@@ -47,7 +56,7 @@
                     <label class="visible-toggle">
                         <ng-container *ngIf="detailForm.value.visible; else private">{{
                             'catalog.public' | translate
-                        }}</ng-container>
+                            }}</ng-container>
                         <ng-template #private>{{ 'catalog.private' | translate }}</ng-template>
                     </label>
                 </clr-toggle-wrapper>
@@ -96,8 +105,8 @@
         </div>
         <div class="clr-col-md-auto">
             <vdr-assets
-                [assets]="category.assets"
-                [featuredAsset]="category.featuredAsset"
+                [assets]="collection.assets"
+                [featuredAsset]="collection.featuredAsset"
                 [updatePermissions]="updatePermission"
                 (change)="assetChanges = $event"
             ></vdr-assets>
@@ -147,7 +156,7 @@
                 <ng-template let-count>
                     <div class="contents-title">
                         {{ 'catalog.collection-contents' | translate }} ({{
-                            'common.results-count' | translate: { count: count }
+                        'common.results-count' | translate: {count: count}
                         }})
                     </div>
                     <clr-checkbox-wrapper [class.disabled]="detailForm.get('filters')?.pristine">

packages/admin-ui/src/lib/catalog/src/components/collection-detail/collection-detail.component.scss

@@ -7,3 +7,21 @@ clr-checkbox-wrapper {
         opacity: 0.5;
     }
 }
+.collection-breadcrumbs {
+    list-style-type: none;
+    background-color: var(--color-component-bg-200);
+    padding: 2px 6px;
+    margin-bottom: 6px;
+    border-radius: var(--clr-global-borderradius);
+    li {
+        font-size: 0.65rem;
+        display: inline-block;
+        margin-right: 10px;
+    }
+    li:not(:last-child)::after {
+        content: '›';
+        top: 0;
+        color: var(--color-grey-400);
+        margin-left: 10px;
+    }
+}

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

@@ -10,7 +10,7 @@
     padding-left: 14px;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid var(--color-component-border-100);
+    border-bottom: 1px solid var(--color-component-border-200);
 }
 
 .expand-all-toggle {

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

@@ -3,7 +3,8 @@
     display: block;
 }
 .collection {
-    background-color: var(--color-component-bg-100);
+    background-color: var(--clr-table-bgcolor);
+    border-radius: var(--clr-global-borderradius);
     font-size: 0.65rem;
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
     margin-bottom: 2px;
@@ -39,7 +40,8 @@
 
 .tree-node {
     display: block;
-    background: var(--color-component-bg-100);
+    background-color: var(--clr-table-bgcolor);
+    border-radius: var(--clr-global-borderradius);
     overflow: hidden;
     &.cdk-drop-list-dragging {
         > .collection {

packages/admin-ui/src/lib/catalog/src/providers/routing/collection-resolver.ts

@@ -18,6 +18,7 @@ export class CollectionResolver extends BaseEntityResolver<Collection.Fragment>
                 name: '',
                 slug: '',
                 isPrivate: false,
+                breadcrumbs: [],
                 description: '',
                 featuredAsset: null,
                 assets: [],

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -5929,7 +5929,10 @@ export type GetCollectionFiltersQuery = { collectionFilters: Array<(
 export type CollectionFragment = (
   { __typename?: 'Collection' }
   & Pick<Collection, 'id' | 'createdAt' | 'updatedAt' | 'name' | 'slug' | 'description' | 'isPrivate' | 'languageCode'>
-  & { featuredAsset?: Maybe<(
+  & { breadcrumbs: Array<(
+    { __typename?: 'CollectionBreadcrumb' }
+    & Pick<CollectionBreadcrumb, 'id' | 'name' | 'slug'>
+  )>, featuredAsset?: Maybe<(
     { __typename?: 'Asset' }
     & AssetFragment
   )>, assets: Array<(
@@ -9721,6 +9724,7 @@ export namespace GetCollectionFilters {
 
 export namespace Collection {
   export type Fragment = CollectionFragment;
+  export type Breadcrumbs = NonNullable<(NonNullable<CollectionFragment['breadcrumbs']>)[number]>;
   export type FeaturedAsset = (NonNullable<CollectionFragment['featuredAsset']>);
   export type Assets = NonNullable<(NonNullable<CollectionFragment['assets']>)[number]>;
   export type Filters = NonNullable<(NonNullable<CollectionFragment['filters']>)[number]>;

packages/admin-ui/src/lib/core/src/data/definitions/collection-definitions.ts

@@ -22,6 +22,11 @@ export const COLLECTION_FRAGMENT = gql`
         description
         isPrivate
         languageCode
+        breadcrumbs {
+            id
+            name
+            slug
+        }
         featuredAsset {
             ...Asset
         }

packages/admin-ui/src/lib/static/i18n-messages/cs.json

@@ -149,6 +149,7 @@
     "remove-option": "Odebrat volbu",
     "remove-product-from-channel": "Odebrat produkt z kanálu",
     "remove-product-variant-from-channel": "Odebrat variantu z kanálu",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "",

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -149,6 +149,7 @@
     "remove-option": "Option entfernen",
     "remove-product-from-channel": "Produkt aus dem Kanal entfernen",
     "remove-product-variant-from-channel": "",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "",

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

@@ -149,6 +149,7 @@
     "remove-option": "Remove option",
     "remove-product-from-channel": "Remove product from channel",
     "remove-product-variant-from-channel": "Remove product variant from channel",
+    "root-collection": "Root collection",
     "run-pending-search-index-updates": "Run {count, plural, one {1 pending update} other {{count} pending updates}}",
     "running-search-index-updates": "Running {count, plural, one {1 update} other {{count} updates}} to search index",
     "search-asset-name-or-tag": "Search by asset name or tags",

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -149,6 +149,7 @@
     "remove-option": "Eliminar opción",
     "remove-product-from-channel": "Eliminar producto del canal de ventas",
     "remove-product-variant-from-channel": "Eliminar variante de producto del canal de ventas ",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "Buscar por nombre de recurso o faceta",

packages/admin-ui/src/lib/static/i18n-messages/fr.json

@@ -149,6 +149,7 @@
     "remove-option": "Retirer l'option",
     "remove-product-from-channel": "Retirer le produit du canal",
     "remove-product-variant-from-channel": "Retirer la variante du produit du canal",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "Rechercher par nom de fichier ou mot-clé",

packages/admin-ui/src/lib/static/i18n-messages/it.json

@@ -149,6 +149,7 @@
     "remove-option": "Rimuovi opzione",
     "remove-product-from-channel": "Rimuovi prodotto dal canale",
     "remove-product-variant-from-channel": "Rimuovi variante dal canale",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "Cerca per nome o tag del media",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -149,6 +149,7 @@
     "remove-option": "Usuń opcje",
     "remove-product-from-channel": "Usuń produkt z kanału",
     "remove-product-variant-from-channel": "",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "",

packages/admin-ui/src/lib/static/i18n-messages/pt_BR.json

@@ -149,6 +149,7 @@
     "remove-option": "Excluir opção",
     "remove-product-from-channel": "Excluir produto do canal",
     "remove-product-variant-from-channel": "",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "",

packages/admin-ui/src/lib/static/i18n-messages/pt_PT.json

@@ -149,6 +149,7 @@
     "remove-option": "Eliminar opção",
     "remove-product-from-channel": "Eliminar produto do canal",
     "remove-product-variant-from-channel": "Remover variante do canal?",
+    "root-collection": "",
     "run-pending-search-index-updates": "Executar {count, plural, one {1 actualização pendente} other {{count} actualizações pendentes}}",
     "running-search-index-updates": "A executar {count, plural, one {1 actualização} other {{count} actualizações}}",
     "search-asset-name-or-tag": "Pesquisar pelo nome ou tag",

packages/admin-ui/src/lib/static/i18n-messages/ru.json

@@ -149,6 +149,7 @@
     "remove-option": "Удалить опции",
     "remove-product-from-channel": "Удалить товар из канала",
     "remove-product-variant-from-channel": "Удалить вариант товара из канала",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "Поиск по названию медиа-объект или тегам",

packages/admin-ui/src/lib/static/i18n-messages/uk.json

@@ -149,6 +149,7 @@
     "remove-option": "Видалити опції",
     "remove-product-from-channel": "Видалити товар з каналу",
     "remove-product-variant-from-channel": "Видалити варіант товару з каналу",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "Пошук за назвою медіа-об'єкта або тегами",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -149,6 +149,7 @@
     "remove-option": "移除选项",
     "remove-product-from-channel": "从销售渠道移除商品",
     "remove-product-variant-from-channel": "从销售渠道移除商品变体",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "输入要搜索的资源名称或标签",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -149,6 +149,7 @@
     "remove-option": "移除選項",
     "remove-product-from-channel": "從渠道移除商品",
     "remove-product-variant-from-channel": "",
+    "root-collection": "",
     "run-pending-search-index-updates": "",
     "running-search-index-updates": "",
     "search-asset-name-or-tag": "",