added group by for repos

Commandos-app · Aug 4, 2021 · 743f6da · 743f6da
1 parent b9f53c5
commit 743f6da
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 19 deletions.
diff --git a/src/app/core/services/store/store.types.ts b/src/app/core/services/store/store.types.ts
@@ -7,7 +7,12 @@ export type RepositorySetting = {
 };
 
 export type RepositoriesSettings = Array<RepositorySetting>;
+export type RepositoriesSettingsGrouped = Array<RepositoriesSettingsGroup>;
 
+export type RepositoriesSettingsGroup = {
+    title?: string;
+    repositories?: RepositoriesSettings;
+}
 export type DiffFormate = 'side-by-side' | 'line-by-line';
 
 export type Tag = {

diff --git a/src/app/routes/home/home.component.html b/src/app/routes/home/home.component.html
@@ -1,24 +1,31 @@
-<div class="parent" cds-layout="vertical align:stretch p:lg" *ngIf="repositories?.length > 0;else noRepos">
+<div class="parent" cds-layout="vertical align:stretch p:lg" *ngIf="repositoriesGrouped?.length > 0;else noRepos">
     <p cds-text="heading" cds-layout="m-t:none m-b:lg">{{ 'PAGES.HOME.TITLE' | translate }}</p>
-
+    <p cds-text="secondary" cds-layout="m-b:sm">Group by:
+        <a (click)="groupNone()" cds-text="link">None</a> |
+        <a (click)="groupFolder()" cds-text="link">Folder</a> |
+        <a (click)="groupTags()" cds-text="link">Tags</a>
+    </p>
     <ng-scrollbar class="virtual-scroll">
-        <div class="commander-grid commander-overview-grid ">
-            <div class="commander-row-title commander-overview-row-title sticky" cds-text="body bold">
-                <div>Name</div>
-                <div>Order</div>
-                <div>Tags</div>
-            </div>
-            <div class="commander-row commander-overview-row" *ngFor="let repo of repositories" cds-text="body"
-                (click)="openRepository(repo.id)" (contextmenu)="openContext($event, repo)">
-                <div class="lh">{{repo.name}}</div>
-                <div class="lh">{{repo.path}}</div>
-                <div>
-                    <div cds-layout="horizontal gap:sm">
-                        <cds-tag readonly *ngFor="let tag of repo.tags" color="gray">{{tag}}</cds-tag>
+        <ng-container *ngFor="let group of repositoriesGrouped">
+            <p cds-text="subsection" cds-layout="m-t:lg m-b:md" *ngIf="group.title">{{group.title}}</p>
+            <div class="commander-grid commander-overview-grid ">
+                <div class="commander-row-title commander-overview-row-title sticky" cds-text="body bold">
+                    <div>Name</div>
+                    <div>Folder</div>
+                    <div>Tags</div>
+                </div>
+                <div class="commander-row commander-overview-row" *ngFor="let repo of group.repositories"
+                    cds-text="body" (click)="openRepository(repo.id)" (contextmenu)="openContext($event, repo)">
+                    <div class="lh">{{repo.name}}</div>
+                    <div class="lh">{{repo.path}}</div>
+                    <div>
+                        <div cds-layout="horizontal gap:sm">
+                            <cds-tag readonly *ngFor="let tag of repo.tags" color="gray">{{tag}}</cds-tag>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </ng-container>
     </ng-scrollbar>
 
 </div>

diff --git a/src/app/routes/home/home.component.ts b/src/app/routes/home/home.component.ts
@@ -1,15 +1,16 @@
 import { filter, take } from 'rxjs/operators';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { RepositorySetting } from '@core/services';
+import { RepositoriesSettingsGroup, RepositoriesSettingsGrouped, RepositorySetting } from '@core/services';
 import { RepositoryService } from './../repository/repository.service';
 import { Component, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { RepositoriesSettings, RepositoriesSettingsService } from '@core/services';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { fromEvent, merge, Subscription } from 'rxjs';
-import { Command, open } from '@tauri-apps/api/shell';
+import { open } from '@tauri-apps/api/shell';
 import { Clipboard } from '@angular/cdk/clipboard';
 import { invoke } from '@tauri-apps/api/tauri';
+import { groupBy } from '@shared/functions';
 
 @Component({
     selector: 'app-home',
@@ -18,7 +19,9 @@ import { invoke } from '@tauri-apps/api/tauri';
 })
 export class HomeComponent implements OnInit {
 
-    repositories: RepositoriesSettings = [];
+    private repositories: RepositoriesSettings = [];
+    repositoriesGrouped: RepositoriesSettingsGrouped = [];
+
     @ViewChild('userMenu') userMenu: TemplateRef<any>;
     overlayRef: OverlayRef | null;
     sub: Subscription;
@@ -37,6 +40,7 @@ export class HomeComponent implements OnInit {
         this.repositoryService.unload();
         this.loadRepos();
         this.repositoryService.clearUIBranches();
+        this.groupNone();
     }
 
     loadRepos(): void {
@@ -121,11 +125,27 @@ export class HomeComponent implements OnInit {
 
     }
 
+    groupFolder() {
+        this.repositoriesGrouped = groupBy(this.repositories, (t: any) => t.path.substring(0, t.path.lastIndexOf('/')));
+    }
+
+    groupTags() {
+        this.repositoriesGrouped = groupBy(this.repositories, (t: any) => t.tags[0]);
+    }
+
+    groupNone() {
+        const group: RepositoriesSettingsGroup = {
+            repositories: this.repositories
+        }
+        this.repositoriesGrouped = [group];
+    }
+
     close() {
         this.sub && this.sub.unsubscribe();
         if (this.overlayRef) {
             this.overlayRef.dispose();
             this.overlayRef = null;
         }
     }
+
 }
diff --git a/src/app/shared/functions/group.ts b/src/app/shared/functions/group.ts
@@ -0,0 +1,10 @@
+export function groupBy(x: any, f: Function) {
+    const groupedObj = x.reduce((a: any, b: any) => {
+        const key = f(b);
+        a[key] ||= [];
+        a[key].push(b);
+        return a;
+    }, {});
+
+    return Object.keys(groupedObj).map(key => ({ title: key, repositories: groupedObj[key] }));
+}
diff --git a/src/app/shared/functions/index.ts b/src/app/shared/functions/index.ts
@@ -3,3 +3,4 @@ export * from './harmonize-path';
 export * from './select-folder';
 export * from './diff';
 export * from './sleep';
+export * from './group';
diff --git a/src/theme/typo.scss b/src/theme/typo.scss
@@ -6,3 +6,11 @@
 .no-break {
     white-space: nowrap;
 }
+
+a[cds-text="link"] {
+    cursor: pointer;
+}
+
+// [cds-text="subsection"] {
+//     margin: 10px 0 10px;
+// }