xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

Add basic extension UI #784

Browse Source
This commit is contained in:
Patrik J. Braun 2024-02-19 22:15:57 +01:00
parent 850fb7b48b
commit d33e29cd82
13 changed files with 175 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -29,7 +29,7 @@
"sharp": "0.31.3",
"ts-exif-parser": "0.2.2",
"ts-node-iptc": "1.0.11",
"typeconfig": "2.1.2",
"typeconfig": "2.2.7",
"typeorm": "0.3.12",
"xml2js": "0.6.2"
},
@ -20385,8 +20385,9 @@
}
},
"node_modules/typeconfig": {
"version": "2.1.2",
"license": "MIT",
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.2.7.tgz",
"integrity": "sha512-xxMJky/XUsmWss8HM99uPeN+sZYF67AAht3Gajtnbp4k5bxBwplnahU+1N1GUKhmvFuqQoIQbiXsu9WpvznI1g==",
"dependencies": {
"minimist": "1.2.8"
}
@ -35319,7 +35320,9 @@
}
},
"typeconfig": {
"version": "2.1.2",
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.2.7.tgz",
"integrity": "sha512-xxMJky/XUsmWss8HM99uPeN+sZYF67AAht3Gajtnbp4k5bxBwplnahU+1N1GUKhmvFuqQoIQbiXsu9WpvznI1g==",
"requires": {
"minimist": "1.2.8"
}

2
package.json
View File

@ -56,7 +56,7 @@
"sharp": "0.31.3",
"ts-exif-parser": "0.2.2",
"ts-node-iptc": "1.0.11",
"typeconfig": "2.1.2",
"typeconfig": "2.2.7",
"typeorm": "0.3.12",
"xml2js": "0.6.2"
},

1
src/backend/middlewares/RenderingMWs.ts
View File

@ -119,6 +119,7 @@ export class RenderingMWs {
skipTags: {secret: true} as TAGS
}) as PrivateConfigClass
);
console.log(message.result.Extensions.extensions);
res.json(message);
}

21
src/backend/model/extension/ExtensionConfigWrapper.ts
View File

@ -1,4 +1,4 @@
import {ConfigProperty, IConfigClass} from 'typeconfig/common';
import {IConfigClass} from 'typeconfig/common';
import {Config, PrivateConfigClass} from '../../../common/config/private/Config';
import {ConfigClassBuilder} from 'typeconfig/node';
import {IExtensionConfig} from './IExtension';
@ -32,22 +32,14 @@ export class ExtensionConfig<C> implements IExtensionConfig<C> {
constructor(private readonly extensionFolder: string) {
}
private findConfig(config: PrivateConfigClass) {
private findConfig(config: PrivateConfigClass): ServerExtensionsEntryConfig {
let c = (config.Extensions.extensions || []).find(e => e.path === this.extensionFolder);
if (!c) {
c = new ServerExtensionsEntryConfig(this.extensionFolder);
config.Extensions.extensions.push(c);
}
return c;
if (!config.Extensions.extensions2[this.extensionFolder]) {
Object.defineProperty(config.Extensions.extensions2, this.extensionFolder,
ConfigProperty({type: ServerExtensionsEntryConfig})(config.Extensions.extensions2, this.extensionFolder));
// config.Extensions.extensions2[this.extensionFolder] = c as any;
config.Extensions.extensions2[this.extensionFolder] = c;
}
return config.Extensions.extensions2[this.extensionFolder];
}
public getConfig(): C {
@ -67,11 +59,12 @@ export class ExtensionConfig<C> implements IExtensionConfig<C> {
const confTemplate = ConfigClassBuilder.attachPrivateInterface(new this.template());
const extConf = this.findConfig(config);
// confTemplate.__loadJSONObject(Utils.clone(extConf.configs || {}));
//extConf.configs = confTemplate;
Object.defineProperty(config.Extensions.extensions2[this.extensionFolder].configs, this.extensionFolder,
extConf.configs = confTemplate;
console.log(((config as any).toJSON({attachState: true})).Extensions.extensions);
/* Object.defineProperty(config.Extensions.extensions2[this.extensionFolder].configs, this.extensionFolder,
ConfigProperty({type: this.template})(config.Extensions.extensions2[this.extensionFolder], this.extensionFolder));
console.log(config.Extensions.extensions2[this.extensionFolder].configs);
config.Extensions.extensions2[this.extensionFolder].configs = confTemplate as any;
console.log(config.Extensions.extensions2[this.extensionFolder].configs);
console.log(config.Extensions.extensions2[this.extensionFolder].configs);*/
}
}

4
src/backend/model/extension/ExtensionManager.ts
View File

@ -118,10 +118,14 @@ export class ExtensionManager implements IObjectManager {
}
if (fs.existsSync(packageJsonPath)) {
if (fs.existsSync(path.join(extPath, 'node_modules'))) {
Logger.debug(LOG_TAG, `node_modules folder exists. Skipping "npm install".`);
} else {
Logger.silly(LOG_TAG, `Running: "npm install --prefer-offline --no-audit --progress=false --omit=dev" in ${extPath}`);
await exec('npm install --no-audit --progress=false --omit=dev', {
cwd: extPath
});
}
// eslint-disable-next-line @typescript-eslint/no-var-requires
const pkg = require(packageJsonPath);
if (pkg.name) {

12
src/common/config/private/subconfigs/ServerExtensionsConfig.ts
View File

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/no-inferrable-types */
import {ConfigProperty, SubConfigClass} from 'typeconfig/common';
import {ClientExtensionsConfig, ConfigPriority, TAGS} from '../../public/ClientConfig';
import {IConfigClassPrivate} from '../../../../../node_modules/typeconfig/src/decorators/class/IConfigClass';
import {GenericConfigType} from 'typeconfig/src/GenericConfigType';
@SubConfigClass<TAGS>({softReadonly: true})
export class ServerExtensionsEntryConfig {
@ -28,12 +28,13 @@ export class ServerExtensionsEntryConfig {
path: string = '';
@ConfigProperty({
type: GenericConfigType,
tags: {
name: $localize`Config`,
priority: ConfigPriority.advanced
}
})
configs: IConfigClassPrivate<unknown>;
configs: GenericConfigType;
}
@SubConfigClass<TAGS>({softReadonly: true})
@ -59,13 +60,6 @@ export class ServerExtensionsConfig extends ClientExtensionsConfig {
})
extensions: ServerExtensionsEntryConfig[] = [];
@ConfigProperty({
tags: {
name: $localize`Installed extensions2`,
priority: ConfigPriority.advanced
}
})
extensions2: Record<string, ServerExtensionsEntryConfig> = {};
@ConfigProperty({
tags: {

3
src/common/config/public/ClientConfig.ts
View File

@ -11,7 +11,7 @@ declare let $localize: (s: TemplateStringsArray) => string;
if (typeof $localize === 'undefined') {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
global.$localize = (s) => s;
global.$localize = (s) => s[0];
}
@ -1034,7 +1034,6 @@ export class ThemesConfig {
name: $localize`Selected theme css`, //this is a 'hack' to the UI settings. UI will only show the selected setting's css
uiDisabled: (sb: ThemesConfig) => !sb.enabled,
relevant: (c: ThemesConfig) => c.selectedTheme !== 'default',
uiType: 'SelectedThemeSettings'
} as TAGS,
description: $localize`Adds these css settings as it is to the end of the body tag of the page.`
})

21
src/frontend/app/ui/settings/template/CustomSettingsEntries.ts
View File

@ -1,5 +1,15 @@
import {propertyTypes} from 'typeconfig/common';
import {ClientGroupingConfig, ClientSortingConfig, SVGIconConfig} from '../../../../../common/config/public/ClientConfig';
import {
ClientGroupingConfig,
ClientSortingConfig,
MapLayers,
MapPathGroupConfig,
MapPathGroupThemeConfig,
NavigationLinkConfig,
SVGIconConfig,
ThemeConfig
} from '../../../../../common/config/public/ClientConfig';
import {JobScheduleConfig, UserConfig} from '../../../../../common/config/private/PrivateConfig';
/**
* Configuration in these class have a custom UI
@ -8,6 +18,13 @@ export class CustomSettingsEntries {
public static readonly entries = [
{c: ClientSortingConfig, name: 'ClientSortingConfig'},
{c: ClientGroupingConfig, name: 'ClientGroupingConfig'},
{c: MapLayers, name: 'MapLayers'},
{c: JobScheduleConfig, name: 'JobScheduleConfig'},
{c: UserConfig, name: 'UserConfig'},
{c: NavigationLinkConfig, name: 'NavigationLinkConfig'},
{c: MapPathGroupThemeConfig, name: 'MapPathGroupThemeConfig'},
{c: MapPathGroupConfig, name: 'MapPathGroupConfig'},
{c: ThemeConfig, name: 'ThemeConfig'},
{c: SVGIconConfig, name: 'SVGIconConfig'},
];
@ -46,7 +63,7 @@ export class CustomSettingsEntries {
return cN;
}
public static iS(s: { tags?: { uiType?: string }, type?: propertyTypes }) {
public static iS(s: { tags?: { uiType?: string }, type?: propertyTypes, arrayType?: propertyTypes }) {
const c = this.getConfigName(s);
return this.entries.findIndex(e => e.name == c) !== -1;
}

20
src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
View File

@ -12,7 +12,6 @@
[hidden]="shouldHide">
<label class="col-sm-3 col-md-2 control-label" [for]="idName">{{name}}</label>
<div class="col-12 col-sm">
<div class="input-group" [ngSwitch]="uiType">
<app-gallery-search-field
*ngSwitchCase="'SearchQuery'"
@ -29,7 +28,9 @@
style="flex: 1"
*ngSwitchCase="'StringInput'">
<input
[type]="HTMLInputType" [min]="state.min" [max]="state.max" class="form-control"
[type]="HTMLInputType"
[min]="state.min"
[max]="state.max" class="form-control"
[placeholder]="placeholder"
[title]="title"
[(ngModel)]="StringValue"
@ -131,7 +132,7 @@
<textarea
rows="5"
*ngSwitchCase="'SelectedThemeSettings'"
*ngSwitchCase="'ThemeConfig-Array'"
type="text"
class="form-control"
[title]="title"
@ -168,7 +169,7 @@
<app-settings-workflow
class="w-100"
*ngSwitchCase="'JobScheduleConfig'"
*ngSwitchCase="'JobScheduleConfig-Array'"
[(ngModel)]="state.value"
[id]="idName"
[name]="idName"
@ -252,7 +253,7 @@
</ng-template>
</ng-container>
<ng-container *ngSwitchCase="'MapLayers'">
<ng-container *ngSwitchCase="'MapLayers-Array'">
<div class="container">
<table class="table">
<thead>
@ -295,7 +296,7 @@
</div>
</ng-container>
<ng-container *ngSwitchCase="'MapPathGroupThemeConfig'">
<ng-container *ngSwitchCase="'MapPathGroupThemeConfig-Array'">
<div class="container">
<div class="row mt-1 mb-1 bg-body-tertiary" *ngFor="let val of state.value; index as i; last as isLast">
<div class="row mt-1 mb-1 bg-body-tertiary">
@ -357,7 +358,7 @@
</div>
</ng-container>
<ng-container *ngSwitchCase="'MapPathGroupConfig'">
<ng-container *ngSwitchCase="'MapPathGroupConfig-Array'">
<div class="container">
<div class="bg-body-tertiary row mt-1 mb-1" *ngFor="let arr of state.value; let i = index">
<div class="row mt-1 mb-1 me-0 ms-0 pe-0 ps-0">
@ -403,7 +404,7 @@
</div>
</ng-container>
<ng-container *ngSwitchCase="'NavigationLinkConfig'">
<ng-container *ngSwitchCase="'NavigationLinkConfig-Array'">
<div class="container">
<div class="row mt-1 mb-1 bg-body-tertiary" *ngFor="let link of state.value; let i = index">
<div class="col ps-0">
@ -468,7 +469,8 @@
</div>
</ng-container>
<ng-container *ngSwitchCase="'UserConfig'">
<ng-container *ngSwitchCase="'UserConfig-Array'">
<div class="container ps-0 pe-0">
<div class="row ms-0 me-0 mt-1 mb-1 bg-body-tertiary" *ngFor="let item of state.value; let i = index">

2
src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.ts
View File

@ -258,7 +258,7 @@ export class SettingsEntryComponent
this.arrayType !== 'MapPathGroupConfig' &&
this.arrayType !== 'ServerExtensionsEntryConfig' &&
this.arrayType !== 'MapPathGroupThemeConfig' &&
this.arrayType !== 'JobScheduleConfig' &&
this.arrayType !== 'JobScheduleConfig-Array' &&
this.arrayType !== 'UserConfig') {
this.uiType = 'StringInput';
}

32
src/frontend/app/ui/settings/template/template.component.html
View File

@ -72,7 +72,8 @@
let-confPath="confPath">
<div class="alert alert-secondary" role="alert"
*ngIf="rStates.description && settingsService.configStyle == ConfigStyle.full">
<ng-icon size="1.3em" name="ionInformationCircleOutline"></ng-icon> {{rStates.description}}
<ng-icon size="1.3em" name="ionInformationCircleOutline"></ng-icon>
{{ rStates.description }}
<a *ngIf="rStates.tags?.githubIssue"
[href]="'https://github.com/bpatrik/pigallery2/issues/'+rStates.tags?.githubIssue">
<ng-container i18n>See</ng-container>
@ -80,12 +81,34 @@
</div>
<ng-container *ngFor="let ck of getKeys(rStates)">
<ng-container *ngIf="!(rStates.value.__state[ck].shouldHide && rStates.value.__state[ck].shouldHide())">
<!-- is array -->
<ng-container *ngIf="rStates.value.__state[ck].isConfigArrayType && isExpandableArrayConfig(rStates.value.__state[ck])">
<div class="row">
<div class="col-auto">
<h5>{{ rStates?.value.__state[ck].tags?.name || ck }}</h5>
</div>
<div class="col mt-2">
<div class="row mt-2" *ngFor="let entry of rStates.value.__state[ck].value; let i = index">
<hr/>
<ng-container
*ngTemplateOutlet="Recursion; context:{ rStates: {value: rStates.value.__state[ck].value[i]}, confPath:confPath+'.'+ck+'.'+i }"
></ng-container>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="!rStates.value.__state[ck].isConfigArrayType || !isExpandableArrayConfig(rStates.value.__state[ck])">
<!-- simple entries or complex once's but with custom UI--->
<app-settings-entry
*ngIf="(ck!=='enabled' || !topLevel) && !isExpandableConfig(rStates.value.__state[ck])"
[name]="confPath+'_'+ck"
[ngModel]="rStates?.value.__state[ck]">
</app-settings-entry>
<!-- Config entries --->
<ng-container *ngIf="isExpandableConfig(rStates.value.__state[ck])">
<!-- Sub category with header and menu item -->
<div class="card mt-2 mb-2" *ngIf="topLevel && rStates?.value.__state[ck].tags?.uiIcon"
[id]="ConfigPath+'.'+ck">
<div class="card-body">
@ -98,6 +121,7 @@
></ng-container>
</div>
</div>
<!-- Sub category without header and menu item -->
<ng-container *ngIf="!topLevel || !rStates?.value.__state[ck].tags?.uiIcon">
<div class="row mt-2">
<div class="col-auto">
@ -116,6 +140,7 @@
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<div *ngIf="rStates.tags?.uiJob && !skipJobs">
<ng-container
*ngTemplateOutlet="JobTemplate; context:{ uiJob: rStates.tags?.uiJob }"
@ -125,12 +150,14 @@
></ng-container>
</div>
</ng-template>
<ng-template #JobTemplate let-uiJob="uiJob">
<div class="mb-2">
<ng-container *ngFor="let job of uiJob; let i = index">
<div class="alert alert-secondary" role="alert"
*ngIf="job.description && settingsService.configStyle == ConfigStyle.full">
<ng-icon size="1.3em" name="ionInformationCircleOutline"></ng-icon> {{job.description}}
<ng-icon size="1.3em" name="ionInformationCircleOutline"></ng-icon>
{{ job.description }}
</div>
<app-settings-job-button
*ngIf="!job.relevant || job.relevant(settingsService.settings | async)"
@ -144,6 +171,7 @@
</div>
</ng-template>
<ng-template #JobProcessTemplate let-uiJob="uiJob">
<div>
<ng-container *ngFor="let job of uiJob">

9
src/frontend/app/ui/settings/template/template.component.ts
View File

@ -271,10 +271,18 @@ export class TemplateComponent implements OnInit, OnChanges, OnDestroy, ISetting
this.getSettings();
}
/**
* main template should list it
* @param c
*/
isExpandableConfig(c: ConfigState) {
return c.isConfigType && !CustomSettingsEntries.iS(c);
}
isExpandableArrayConfig(c: ConfigState) {
return c.isConfigArrayType && !CustomSettingsEntries.iS(c);
}
public async save(): Promise<boolean> {
this.inProgress = true;
@ -328,7 +336,6 @@ export class TemplateComponent implements OnInit, OnChanges, OnDestroy, ISetting
return 1;
}
return (s[a].tags?.name as string || a).localeCompare(s[b].tags?.name || b);
});
states.keys = keys;
return states.keys;