Basic view for PluginManager

application/client/src/app/service/bridge.ts

@@ -1,6 +1,6 @@
 import { SetupService, Interface, Implementation, register } from '@platform/entity/service';
 import { services } from '@register/services';
-import { File, Entity } from '@platform/types/files';
+import { File, Entity, ParsedPath } from '@platform/types/files';
 import { FolderEntity } from '@platform/types/bindings';
 import { FileType } from '@platform/types/observe/types/file';
 import { DltStatisticInfo, Profile } from '@platform/types/bindings';
@@ -55,9 +55,7 @@ export class Service extends Implementation {
         isBinary(file: string): Promise<boolean>;
         checksumWithCache(filename: string): Promise<string>;
         exists(path: string): Promise<boolean>;
-        name(
-            path: string,
-        ): Promise<{ name: string; filename: string; parent: string; ext: string }>;
+        name(path: string): Promise<ParsedPath>;
         cp(src: string, dest: string): Promise<void>;
         copy(files: string[], dest: string): Promise<void>;
         read(filename: string): Promise<string>;
@@ -185,9 +183,7 @@ export class Service extends Implementation {
                     return response.exists;
                 });
             },
-            name: (
-                path: string,
-            ): Promise<{ name: string; filename: string; parent: string; ext: string }> => {
+            name: (path: string): Promise<ParsedPath> => {
                 return Requests.IpcRequest.send(
                     Requests.File.Name.Response,
                     new Requests.File.Name.Request({

application/client/src/app/service/plugins.ts

@@ -1,8 +1,8 @@
 import { SetupService, Interface, Implementation, register } from '@platform/entity/service';
 import { services } from '@register/services';
+import { PluginEntity } from '@platform/types/bindings/plugins';
 
 import * as Requests from '@platform/ipc/request/index';
-import { PluginEntity } from '@platform/types/bindings/plugins';
 
 @SetupService(services['plugins'])
 export class Service extends Implementation {

application/client/src/app/ui/tabs/plugins/component.ts

@@ -1,9 +1,9 @@
-import { Component, ChangeDetectorRef, AfterContentInit, Input } from '@angular/core';
+import { Component, ChangeDetectorRef, AfterContentInit, OnDestroy } from '@angular/core';
 import { Ilc, IlcInterface } from '@env/decorators/component';
 import { Initial } from '@env/decorators/initial';
 import { ChangesDetector } from '@ui/env/extentions/changes';
-//TODO:
-// import { State } from './state';
+import { Provider } from './provider';
+import { Target } from './list/component';
 
 @Component({
     selector: 'app-tabs-plugins-manager',
@@ -13,57 +13,34 @@ import { ChangesDetector } from '@ui/env/extentions/changes';
 })
 @Initial()
 @Ilc()
-export class PluginsManager extends ChangesDetector implements AfterContentInit {
-    @Input() public allPlugins!: string;
-    @Input() public activePlugins!: string;
+export class PluginsManager extends ChangesDetector implements AfterContentInit, OnDestroy {
+    public provider: Provider = new Provider();
 
+    public get Target(): typeof Target {
+        return Target;
+    }
     constructor(cdRef: ChangeDetectorRef) {
         super(cdRef);
     }
 
-    public onReloadClick(): void {
-        this.allPlugins = 'Loading ...';
-        this.activePlugins = 'Loading ...';
-        this.detectChanges();
-
-        this.ilc()
-            .services.system.plugins.reloadPlugins()
-
-            .then(() => {
-                this.loadPlugins();
-            })
-            .catch((err: Error) => {
-                this.log().error(`Error while reloading: ${err}`);
-            });
+    public ngOnDestroy(): void {
+        this.provider.destroy();
     }
 
-    loadPlugins(): void {
-        this.ilc()
-            .services.system.plugins.allPlugins()
-            .then((plugins) => {
-                const plugins_pretty = JSON.stringify(plugins, null, 2);
-
-                this.allPlugins = plugins_pretty;
+    public ngAfterContentInit(): void {
+        this.env().subscriber.register(
+            this.provider.subjects.get().state.subscribe(() => {
                 this.detectChanges();
-            })
-            .catch((err: Error) => {
-                this.log().error(`Fail to get all plugins: ${err}`);
-            });
-
-        this.ilc()
-            .services.system.plugins.activePlugins()
-            .then((activePlugins) => {
-                const plugins_pretty = JSON.stringify(activePlugins, null, 2);
-                this.activePlugins = plugins_pretty;
+            }),
+            this.provider.subjects.get().selected.subscribe(() => {
                 this.detectChanges();
-            })
-            .catch((err: Error) => {
-                this.log().error(`Fail to get active plugins: ${err}`);
-            });
+            }),
+        );
+        this.provider.load();
     }
 
-    public ngAfterContentInit(): void {
-        this.loadPlugins();
+    public reload() {
+        this.provider.load();
     }
 }
 

application/client/src/app/ui/tabs/plugins/desc.ts

@@ -0,0 +1,61 @@
+import { PluginEntity } from '@platform/types/bindings/plugins';
+import { bridge } from '@service/bridge';
+import { ParsedPath } from '@platform/types/files';
+
+export class PluginDesc {
+    public name: string = '';
+    public desc: string = '';
+    public icon: string = '';
+    public path: ParsedPath | undefined;
+
+    constructor(public readonly entity: PluginEntity) {}
+
+    public load(): Promise<void> {
+        return bridge
+            .files()
+            .name(this.entity.dir_path)
+            .then((path: ParsedPath) => {
+                this.path = path;
+                this.update();
+            });
+    }
+
+    protected update() {
+        this.icon = this.getIcon();
+        this.name = this.getName();
+        this.desc = this.getDesc();
+    }
+
+    protected getIcon(): string {
+        switch (this.entity.plugin_type) {
+            case 'Parser':
+                return 'swap_vert';
+            case 'ByteSource':
+                return 'input';
+        }
+    }
+
+    protected getName(): string {
+        if (!this.entity.metadata && !this.path) {
+            return this.entity.dir_path;
+        } else if (!this.entity.metadata && this.path) {
+            return this.path.name;
+        } else if (this.entity.metadata) {
+            return this.entity.metadata.name;
+        } else {
+            return this.entity.dir_path;
+        }
+    }
+
+    protected getDesc(): string {
+        if (!this.entity.metadata && !this.path) {
+            return this.entity.dir_path;
+        } else if (!this.entity.metadata && this.path) {
+            return this.path.name;
+        } else if (this.entity.metadata && this.entity.metadata.description) {
+            return this.entity.metadata.description;
+        } else {
+            return this.entity.dir_path;
+        }
+    }
+}

application/client/src/app/ui/tabs/plugins/details/component.ts

@@ -0,0 +1,25 @@
+import { Component, ChangeDetectorRef, Input } from '@angular/core';
+import { Ilc, IlcInterface } from '@env/decorators/component';
+import { Initial } from '@env/decorators/initial';
+import { ChangesDetector } from '@ui/env/extentions/changes';
+import { PluginDesc } from '../desc';
+import { Provider } from '../provider';
+
+@Component({
+    selector: 'app-plugins-manager-details',
+    templateUrl: './template.html',
+    styleUrls: ['./styles.less'],
+    standalone: false,
+})
+@Initial()
+@Ilc()
+export class Details extends ChangesDetector {
+    @Input() public provider!: Provider;
+    @Input() public plugin!: PluginDesc;
+
+    constructor(cdRef: ChangeDetectorRef) {
+        super(cdRef);
+    }
+}
+
+export interface Details extends IlcInterface {}

application/client/src/app/ui/tabs/plugins/details/styles.less

@@ -0,0 +1,12 @@
+@import '../../../styles/variables.less';
+
+:host {
+    position: relative;
+    & div.info {
+        margin: 0 6px;
+        overflow: hidden;
+        & p {
+            text-align: left;
+        }
+    }
+}

application/client/src/app/ui/tabs/plugins/details/template.html

@@ -0,0 +1,4 @@
+<div class="info">
+    <p class="title t-normal color-scheme-0">{{plugin.name}}</p>
+    <p class="subtitle t-small color-scheme-2">{{plugin.desc}}</p>
+</div>

application/client/src/app/ui/tabs/plugins/list/component.ts

@@ -0,0 +1,64 @@
+import { Component, ChangeDetectorRef, AfterContentInit, Input } from '@angular/core';
+import { Ilc, IlcInterface } from '@env/decorators/component';
+import { Initial } from '@env/decorators/initial';
+import { ChangesDetector } from '@ui/env/extentions/changes';
+import { Provider } from '../provider';
+import { PluginDesc } from '../desc';
+
+export enum Target {
+    Active,
+    Available,
+}
+
+@Component({
+    selector: 'app-plugins-manager-list',
+    templateUrl: './template.html',
+    styleUrls: ['./styles.less'],
+    standalone: false,
+})
+@Initial()
+@Ilc()
+export class List extends ChangesDetector implements AfterContentInit {
+    @Input() public provider!: Provider;
+    @Input() public target!: Target;
+
+    public plugins: PluginDesc[] = [];
+
+    constructor(cdRef: ChangeDetectorRef) {
+        super(cdRef);
+    }
+
+    public ngAfterContentInit(): void {
+        this.env().subscriber.register(
+            this.provider.subjects.get().load.subscribe(() => {
+                this.update();
+            }),
+            this.provider.subjects.get().state.subscribe(() => {
+                this.update();
+            }),
+        );
+    }
+
+    public getTitle(): string {
+        switch (this.target) {
+            case Target.Active:
+                return 'Active Plugins';
+            case Target.Available:
+                return 'Available Plugins';
+        }
+    }
+
+    protected update() {
+        switch (this.target) {
+            case Target.Active:
+                this.plugins = this.provider.get().active();
+                break;
+            case Target.Available:
+                this.plugins = this.provider.get().available();
+                break;
+        }
+        this.detectChanges();
+    }
+}
+
+export interface List extends IlcInterface {}

application/client/src/app/ui/tabs/plugins/list/styles.less

@@ -0,0 +1,8 @@
+@import '../../../styles/variables.less';
+
+:host {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}

application/client/src/app/ui/tabs/plugins/list/template.html

@@ -0,0 +1,18 @@
+<mat-card>
+    <mat-card-title>{{getTitle()}}</mat-card-title>
+    <mat-card-content style="text-align: center">
+        <ng-container *ngIf="provider.state.loading">
+            <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+        </ng-container>
+        <ng-container *ngIf="!provider.state.loading">
+            <app-plugins-manager-plugin
+                [plugin]="plugin"
+                [provider]="provider"
+                *ngFor="let plugin of plugins"
+            ></app-plugins-manager-plugin>
+        </ng-container>
+        <ng-container *ngIf="!provider.state.loading && plugins.length === 0">
+            <p class="t-normal color-scheme-2">No plugins</p>
+        </ng-container>
+    </mat-card-content>
+</mat-card>

application/client/src/app/ui/tabs/plugins/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatIconModule } from '@angular/material/icon';
 
 import { PluginsManager } from './component';
+import { List } from './list/component';
+import { Plugin } from './plugin/component';
+import { Details } from './details/component';
 
 @NgModule({
-    imports: [CommonModule, FormsModule, MatCardModule, MatButtonModule],
-    declarations: [PluginsManager],
+    imports: [CommonModule, MatCardModule, MatButtonModule, MatProgressBarModule, MatIconModule],
+    declarations: [PluginsManager, Plugin, List, Details],
     exports: [PluginsManager],
     bootstrap: [PluginsManager],
 })

application/client/src/app/ui/tabs/plugins/plugin/component.ts

@@ -0,0 +1,28 @@
+import { Component, ChangeDetectorRef, Input, HostListener } from '@angular/core';
+import { Ilc, IlcInterface } from '@env/decorators/component';
+import { Initial } from '@env/decorators/initial';
+import { ChangesDetector } from '@ui/env/extentions/changes';
+import { PluginDesc } from '../desc';
+import { Provider } from '../provider';
+
+@Component({
+    selector: 'app-plugins-manager-plugin',
+    templateUrl: './template.html',
+    styleUrls: ['./styles.less'],
+    standalone: false,
+})
+@Initial()
+@Ilc()
+export class Plugin extends ChangesDetector {
+    @Input() public provider!: Provider;
+    @Input() public plugin!: PluginDesc;
+
+    @HostListener('click', ['$event']) onClick(_event: MouseEvent) {
+        this.provider.select(this.plugin.entity.dir_path);
+    }
+    constructor(cdRef: ChangeDetectorRef) {
+        super(cdRef);
+    }
+}
+
+export interface Plugin extends IlcInterface {}