List of APIs & operations collapsible by tags (#2003)

Azure · Nov 18, 2022 · 986767f · 986767f
1 parent 7dc7404
commit 986767f
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 7 deletions.
diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html b/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.html
@@ -25,10 +25,15 @@
     <div class="cards-body animation-fade-in">
         <!-- ko if: groupByTag -->
         <!-- ko foreach: { data: apiGroups, as: 'group' } -->
-        <div class="tag-group">
+        <button
+          class="tag-group tag-group-collapsible no-border"
+          data-bind="class: $component.groupTagsExpanded().has(group.tag) ? '' : 'active', click: () => $component.groupTagCollapseToggle(group.tag)"
+        >
             <span class="tag-item" role="group" data-bind="text: group.tag"></span>
-        </div>
+            <i class="icon-emb icon-emb-chevron-down"></i>
+        </button>
 
+        <!-- ko if: $component.groupTagsExpanded().has(group.tag) -->
         <!-- ko foreach: { data: group.items, as: 'item' } -->
         <a href="#" data-bind="attr: { href: $component.getReferenceUrl(item) }">
             <div class="card item-tile">
@@ -42,6 +47,7 @@ <h3>
             </div>
         </a>
         <!-- /ko -->
+        <!-- /ko -->
 
         <!-- /ko -->
 

diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.ts b/src/components/apis/list-of-apis/ko/runtime/api-list-tiles.ts
@@ -24,6 +24,7 @@ export class ApiListTiles {
     public readonly pattern: ko.Observable<string>;
     public readonly tags: ko.Observable<Tag[]>;
     public readonly groupByTag: ko.Observable<boolean>;
+    public readonly groupTagsExpanded: ko.Observable<Set<string>>;
     public readonly pageNumber: ko.Observable<number>;
     public readonly totalPages: ko.Observable<number>;
 
@@ -43,6 +44,7 @@ export class ApiListTiles {
         this.apiGroups = ko.observableArray();
         this.groupByTag = ko.observable(false);
         this.defaultGroupByTagToEnabled = ko.observable(false);
+        this.groupTagsExpanded = ko.observable(new Set<string>());
     }
 
     @Param()
@@ -125,6 +127,12 @@ export class ApiListTiles {
         this.loadPageOfApis();
     }
 
+    public groupTagCollapseToggle(tag: string): void {
+        const newSet = this.groupTagsExpanded();
+        newSet.has(tag) ? newSet.delete(tag) : newSet.add(tag);
+        this.groupTagsExpanded(newSet);
+    }
+
     public async onTagsChange(tags: Tag[]): Promise<void> {
         this.tags(tags);
     }

diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list.html b/src/components/apis/list-of-apis/ko/runtime/api-list.html
@@ -39,9 +39,14 @@
     <div class="table-body animation-fade-in" role="presentation">
         <!-- ko if: groupByTag -->
         <!-- ko foreach: { data: apiGroups, as: 'group' } -->
-        <div tabindex="0" class="tag-group" role="presentation">
+        <button
+          class="tag-group tag-group-collapsible no-border"
+          data-bind="class: $component.groupTagsExpanded().has(group.tag) ? '' : 'active', click: () => $component.groupTagCollapseToggle(group.tag)"
+        >
             <span class="tag-item" role="rowgroup" data-bind="text: group.tag"></span>
-        </div>
+            <i class="icon-emb icon-emb-chevron-down"></i>
+        </button>
+        <!-- ko if: $component.groupTagsExpanded().has(group.tag) -->
         <!-- ko foreach: { data: group.items, as: 'item' } -->
         <div class="table-row" role="row">
             <div class="col-5 text-truncate" role="cell">
@@ -69,6 +74,7 @@
         </div>
         <!-- /ko -->
         <!-- /ko -->
+        <!-- /ko -->
 
         <!-- ko if: apiGroups().length === 0 -->
         <div class="table-row" role="row">

diff --git a/src/components/apis/list-of-apis/ko/runtime/api-list.ts b/src/components/apis/list-of-apis/ko/runtime/api-list.ts
@@ -24,6 +24,7 @@ export class ApiList {
     public readonly pattern: ko.Observable<string>;
     public readonly tags: ko.Observable<Tag[]>;
     public readonly groupByTag: ko.Observable<boolean>;
+    public readonly groupTagsExpanded: ko.Observable<Set<string>>;
     public readonly pageNumber: ko.Observable<number>;
     public readonly totalPages: ko.Observable<number>;
 
@@ -43,6 +44,7 @@ export class ApiList {
         this.apiGroups = ko.observableArray();
         this.groupByTag = ko.observable(false);
         this.defaultGroupByTagToEnabled = ko.observable(false);
+        this.groupTagsExpanded = ko.observable(new Set<string>());
     }
 
     @Param()
@@ -125,6 +127,12 @@ export class ApiList {
         this.loadPageOfApis();
     }
 
+    public groupTagCollapseToggle(tag: string): void {
+        const newSet = this.groupTagsExpanded();
+        newSet.has(tag) ? newSet.delete(tag) : newSet.add(tag);
+        this.groupTagsExpanded(newSet);
+    }
+
     public async onTagsChange(tags: Tag[]): Promise<void> {
         this.tags(tags);
     }

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.html b/src/components/operations/operation-list/ko/runtime/operation-list.html
@@ -56,9 +56,14 @@
         <!-- ko if: groupByTag -->
 
         <!-- ko foreach: { data: operationGroups, as: 'group' } -->
-        <div class="tag-group">
+        <button
+          class="tag-group tag-group-collapsible no-border"
+          data-bind="class: $component.groupTagsExpanded().has(group.tag) ? '' : 'active', click: () => $component.groupTagCollapseToggle(group.tag)"
+        >
             <span class="tag-item" role="group" data-bind="text: group.tag"></span>
-        </div>
+            <i class="icon-emb icon-emb-chevron-down"></i>
+        </button>
+        <!-- ko if: $component.groupTagsExpanded().has(group.tag) -->
         <div class="list">
             <!-- ko foreach: { data: group.items, as: 'item' } -->
             <div role="option" class="list-item table-preset-operations"
@@ -71,6 +76,7 @@
             <!-- /ko -->
         </div>
         <!-- /ko -->
+        <!-- /ko -->
 
         <!-- ko if: operationGroups().length === 0 -->
         <p>No operations found</p>

diff --git a/src/components/operations/operation-list/ko/runtime/operation-list.ts b/src/components/operations/operation-list/ko/runtime/operation-list.ts
@@ -27,6 +27,7 @@ export class OperationList {
     public readonly operations: ko.ObservableArray<Operation>;
     public readonly working: ko.Observable<boolean>;
     public readonly groupByTag: ko.Observable<boolean>;
+    public readonly groupTagsExpanded: ko.Observable<Set<string>>;
     public readonly operationGroups: ko.ObservableArray<TagGroup<Operation>>;
     public readonly pattern: ko.Observable<string>;
     public readonly tags: ko.Observable<Tag[]>;
@@ -56,6 +57,7 @@ export class OperationList {
         this.working = ko.observable(false);
         this.groupByTag = ko.observable(false);
         this.defaultGroupByTagToEnabled = ko.observable(false);
+        this.groupTagsExpanded = ko.observable(new Set<string>());
         this.pattern = ko.observable();
         this.tags = ko.observable([]);
         this.pageNumber = ko.observable(1);
@@ -251,6 +253,12 @@ export class OperationList {
         this.tags(tags);
     }
 
+    public groupTagCollapseToggle(tag: string): void {
+        const newSet = this.groupTagsExpanded();
+        newSet.has(tag) ? newSet.delete(tag) : newSet.add(tag);
+        this.groupTagsExpanded(newSet);
+    }
+
     @OnDestroyed()
     public dispose(): void {
         this.router.removeRouteChangeListener(this.onRouteChange);

diff --git a/src/themes/website/styles/tags.scss b/src/themes/website/styles/tags.scss
@@ -1,7 +1,33 @@
-.tag-group {
+.tag-group,
+.tag-group.no-border {
     padding-top: 20px;
     padding-bottom: 10px;
     flex-basis: 100%;
+
+    &.tag-group-collapsible {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        outline: none !important;
+        overflow: hidden;
+
+        .tag-item {
+            cursor: inherit;
+        }
+
+        .icon-emb-chevron-down {
+            transform: rotate(0);
+            transform-origin: 48% 45%;
+            transition: transform .3s ease;
+        }
+
+        &.active {
+            .icon-emb-chevron-down {
+                transform: rotate(-90deg);
+            }
+        }
+    }
 }
 
 .tag-item,