Implement fetching of sizes via different api

Signed-off-by: Trivernis <trivernis@protonmail.com>

mediarepo-ui/src-tauri/Cargo.lock

@@ -1489,8 +1489,8 @@ checksum = "a3e378b66a060d48947b590737b30a1be76706c8dd7b8ba0f2fe3989c68a853f"
 
 [[package]]
 name = "mediarepo-api"
-version = "0.18.0"
+version = "0.19.0"
-source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=c5f2bfa48e822e9a761191c9a7ef42e2dbf811b5#c5f2bfa48e822e9a761191c9a7ef42e2dbf811b5"
+source = "git+https://github.com/Trivernis/mediarepo-api.git?rev=6dd3fc2001177ab8222daad3e0b2d78cd37f4b19#6dd3fc2001177ab8222daad3e0b2d78cd37f4b19"
 dependencies = [
  "async-trait",
  "bromine",

mediarepo-ui/src-tauri/Cargo.toml

@@ -25,7 +25,7 @@ features = [ "env-filter" ]
 
 [dependencies.mediarepo-api]
 git = "https://github.com/Trivernis/mediarepo-api.git"
-rev = "c5f2bfa48e822e9a761191c9a7ef42e2dbf811b5"
+rev = "6dd3fc2001177ab8222daad3e0b2d78cd37f4b19"
 features = [ "tauri-plugin" ]
 
 [features]

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html

@@ -1,21 +1,44 @@
 <mat-toolbar>
     <span class="repository-name">{{repository.name}}</span>
-    <button class="button-close-repository" mat-flat-button color="primary" (click)="this.closeRepository()">Close</button>
+    <button class="button-close-repository" mat-flat-button color="primary" (click)="this.closeRepository()">Close
+    </button>
 </mat-toolbar>
 <div class="details-content" fxLayout="row">
     <div class="repository-metadata" fxFlex="50%">
         <h1>Stats</h1>
-        <app-metadata-entry *ngIf="repository.path" attributeName="Path" [value]="repository.path"></app-metadata-entry>
+        <app-metadata-entry *ngIf="repository.path" attributeName="Path">{{repository.path}}</app-metadata-entry>
-        <app-metadata-entry *ngIf="repository.address" attributeName="Address" [value]="repository.address"></app-metadata-entry>
+        <app-metadata-entry *ngIf="repository.address" attributeName="Address">{{repository.address}}</app-metadata-entry>
-        <ng-container *ngIf="metadata">
+        <app-metadata-entry attributeName="File Count">
-            <app-metadata-entry attributeName="File Count" [value]="metadata.file_count.toString()"></app-metadata-entry>
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            <app-metadata-entry attributeName="Tag Count" [value]="metadata.tag_count.toString()"></app-metadata-entry>
+            {{metadata? metadata!.file_count.toString() : ''}}
-            <app-metadata-entry attributeName="Namespace Count" [value]="metadata.namespace_count.toString()"></app-metadata-entry>
+        </app-metadata-entry>
-            <app-metadata-entry attributeName="Mapping Count" [value]="metadata.mapping_count.toString()"></app-metadata-entry>
+        <app-metadata-entry attributeName="Tag Count">
-            <app-metadata-entry attributeName="Total Size" [value]="formatByteSize(metadata.total_size)"></app-metadata-entry>
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
-            <app-metadata-entry attributeName="File Folder Size" [value]="formatByteSize(metadata.file_size)"></app-metadata-entry>
+            {{metadata? metadata!.tag_count.toString() : ''}}
-            <app-metadata-entry attributeName="Thumbnail Folder Size" [value]="formatByteSize(metadata.thumbnail_size)"></app-metadata-entry>
+        </app-metadata-entry>
-            <app-metadata-entry attributeName="Database File Size" [value]="formatByteSize(metadata.database_size)"></app-metadata-entry>
+        <app-metadata-entry attributeName="Namespace Count">
-        </ng-container>
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.namespace_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Mapping Count">
+            <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+            {{metadata? metadata!.mapping_count.toString() : ''}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Total Size">
+            <mat-progress-bar *ngIf="(this.totalSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.totalSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="File Folder Size">
+            <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.fileFolderSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Thumbnail Folder Size">
+            <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.thumbFolderSize | async}}
+        </app-metadata-entry>
+        <app-metadata-entry attributeName="Database File Size">
+            <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
+            {{this.databaseFileSize | async}}
+        </app-metadata-entry>
     </div>
 </div>

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts

@@ -1,7 +1,8 @@
 import {
     Component,
     Input,
-    OnChanges, OnDestroy,
+    OnChanges,
+    OnDestroy,
     OnInit,
     SimpleChanges
 } from "@angular/core";
@@ -10,6 +11,8 @@ import {
     RepositoryService
 } from "../../../../services/repository/repository.service";
 import {RepositoryMetadata} from "../../../../models/RepositoryMetadata";
+import {BehaviorSubject} from "rxjs";
+import {SizeType} from "../../../../models/SizeMetadata";
 
 @Component({
     selector: "app-repository-details-view",
@@ -22,6 +25,11 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
     public metadata?: RepositoryMetadata;
     private refreshMetadataInterval?: number;
 
+    public totalSize = new BehaviorSubject<string | undefined>(undefined);
+    public fileFolderSize = new BehaviorSubject<string | undefined>(undefined);
+    public thumbFolderSize = new BehaviorSubject<string | undefined>(undefined);
+    public databaseFileSize = new BehaviorSubject<string | undefined>(undefined);
+
     constructor(private repoService: RepositoryService) {
     }
 
@@ -48,6 +56,17 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
         }
     }
 
+    public async getSizes() {
+        const totalSize = await this.repoService.getSize(SizeType.Total)
+        this.totalSize.next(this.formatByteSize(totalSize.size));
+        const fileSize = await this.repoService.getSize(SizeType.FileFolder);
+        this.fileFolderSize.next(this.formatByteSize(fileSize.size));
+        const thumbSize = await this.repoService.getSize(SizeType.ThumbFolder);
+        this.thumbFolderSize.next(this.formatByteSize(thumbSize.size));
+        const databaseSize = await this.repoService.getSize(SizeType.DatabaseFile);
+        this.databaseFileSize.next(this.formatByteSize(databaseSize.size));
+    }
+
     public formatByteSize(size: number): string {
         const kib = 1024;
         const mib = kib ** 2;
@@ -69,5 +88,6 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
 
     public async loadMetadata() {
         this.metadata = await this.repoService.getRepositoryMetadata();
+        await this.getSizes();
     }
 }

mediarepo-ui/src/app/components/shared/app-common/metadata-entry/metadata-entry.component.html

@@ -1,4 +1,6 @@
 <div class="metadata-entry-inner">
     <span class="metadata-attribute">{{attributeName}}:</span>
-    <span class="metadata-value">{{value}}</span>
+    <span class="metadata-value">
+        <ng-content></ng-content>
+    </span>
 </div>

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.html

@@ -1,5 +1,5 @@
 <div class="metadata-inner">
-    <app-metadata-entry *ngIf="mode === 'read'" [value]="value" [attributeName]="attributeName"></app-metadata-entry>
+    <app-metadata-entry *ngIf="mode === 'read'" [attributeName]="attributeName">{{value}}</app-metadata-entry>
     <mat-form-field *ngIf="mode === 'write'">
         <mat-label>{{attributeName}}</mat-label>
         <input [formControl]="formControl" type="text" matInput [value]="value">
@@ -11,3 +11,4 @@
         <ng-icon name="mat-edit"></ng-icon>
     </button>
 </div>
+

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/editable-metadata-entry/editable-metadata-entry.component.ts

@@ -9,7 +9,7 @@ import {FormControl} from "@angular/forms";
 export class EditableMetadataEntryComponent implements OnInit{
 
     @Input() attributeName!: string;
-    @Input() value!: string;
+    @Input() value!: string | number;
     @Input() mode: "read" | "write" = "read";
     @Output() valueChangeEvent = new EventEmitter<string>();
 

mediarepo-ui/src/app/components/shared/sidebar/file-metadata/file-metadata.component.html

@@ -7,11 +7,11 @@
         <div class="file-metadata-entries">
 
             <app-editable-metadata-entry attributeName="Name" [value]="file.name ?? ''" (valueChangeEvent)="this.saveFileName($event)"></app-editable-metadata-entry>
-            <app-metadata-entry attributeName="Hash" [value]="file.hash"></app-metadata-entry>
+            <app-metadata-entry attributeName="Hash">{{file.hash}}</app-metadata-entry>
-            <app-metadata-entry attributeName="Mime Type" [value]="file.mime_type ?? 'unknown'"></app-metadata-entry>
+            <app-metadata-entry attributeName="Mime Type">{{file.mime_type ?? 'unknown'}}</app-metadata-entry>
-            <app-metadata-entry attributeName="Imported at" [value]="file.import_time.toLocaleString()"></app-metadata-entry>
+            <app-metadata-entry attributeName="Imported at">{{file.import_time.toLocaleString()}}</app-metadata-entry>
-            <app-metadata-entry attributeName="Created at" [value]="file.creation_time.toLocaleString()"></app-metadata-entry>
+            <app-metadata-entry attributeName="Created at">{{file.creation_time.toLocaleString()}}</app-metadata-entry>
-            <app-metadata-entry attributeName="Changed at" [value]="file.change_time.toLocaleString()"></app-metadata-entry>
+            <app-metadata-entry attributeName="Changed at">{{file.change_time.toLocaleString()}}</app-metadata-entry>
 
         </div>
     </div>

mediarepo-ui/src/app/models/RepositoryMetadata.ts

@@ -5,8 +5,4 @@ export type RepositoryMetadata = {
     namespace_count: number,
     mapping_count: number,
     hash_count: number,
-    total_size: number,
-    file_size: number,
-    database_size: number,
-    thumbnail_size: number,
 };

mediarepo-ui/src/app/models/SizeMetadata.ts

@@ -0,0 +1,11 @@
+export enum SizeType {
+    Total = "Total",
+    FileFolder = "FileFolder",
+    ThumbFolder = "ThumbFolder",
+    DatabaseFile = "DatabaseFile",
+}
+
+export type SizeMetadata = {
+    size_type: SizeType,
+    size: number,
+}

mediarepo-ui/src/app/services/repository/repository.service.ts

@@ -7,6 +7,7 @@ import {Info} from "../../models/Info";
 import {ErrorBrokerService} from "../error-broker/error-broker.service";
 import {FileService} from "../file/file.service";
 import {RepositoryMetadata} from "../../models/RepositoryMetadata";
+import {SizeMetadata, SizeType} from "../../models/SizeMetadata";
 
 @Injectable({
     providedIn: "root"
@@ -172,6 +173,15 @@ export class RepositoryService {
         return await invoke<RepositoryMetadata>("plugin:mediarepo|get_repo_metadata");
     }
 
+    /**
+     * Returns a specific size
+     * @param {SizeType} type
+     * @returns {Promise<SizeMetadata>}
+     */
+    public async getSize(sizeType: SizeType): Promise<SizeMetadata> {
+        return await invoke<SizeMetadata>("plugin:mediarepo|get_size", {sizeType});
+    }
+
     async loadSelectedRepository() {
         let active_repo = await invoke<Repository | undefined>(
             "plugin:mediarepo|get_active_repository");