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

Implementing sorting method selector to settings

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-30 18:56:49 +02:00
parent b6d8e5dfd1
commit 2febe176de
9 changed files with 193 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/frontend/app/app.module.ts
View File

@ -179,6 +179,9 @@ import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-metho
import {SafeHtmlPipe} from './pipes/SafeHTMLPipe';
import {DatePipe} from '@angular/common';
import {ParseIntPipe} from './pipes/ParseIntPipe';
import {
SortingMethodSettingsEntryComponent
} from './ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component';
@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
@ -325,7 +328,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
UsersComponent,
SharingsListComponent,
SortingMethodIconComponent,
SafeHtmlPipe
SafeHtmlPipe,
SortingMethodSettingsEntryComponent
],
providers: [
{provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true},

23
src/frontend/app/ui/settings/template/CustomSettingsEntries.ts Normal file
View File

@ -0,0 +1,23 @@
import {propertyTypes} from 'typeconfig/common';
export class CustomSettingsEntries {
public static readonly entries = ['ClientSortingConfig', 'SVGIconConfig'];
static getName(s: { tags?: { uiType?: string }, type?: propertyTypes }): string {
let c = s.tags?.uiType;
try {
if (!c) {
c = Object.getPrototypeOf(Object.getPrototypeOf(s?.type))?.name;
}
} catch (e) {
// no action
}
return c;
}
public static iS(s: { tags?: { uiType?: string }, type?: propertyTypes }) {
const c = this.getName(s);
return this.entries.includes(c);
}
}

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

@ -144,6 +144,17 @@
</textarea>
<app-settings-entry-sorting-method
class="w-100"
*ngSwitchCase="'ClientSortingConfig'"
[(ngModel)]="state.value"
[id]="idName"
[name]="idName"
(ngModelChange)="onChange($event)">
</app-settings-entry-sorting-method>
<app-settings-workflow
class="w-100"
*ngSwitchCase="'JobScheduleConfig'"

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

@ -18,6 +18,7 @@ import {JobScheduleConfig, UserConfig} from '../../../../../../common/config/pri
import {enumToTranslatedArray} from '../../../EnumTranslations';
import {BsModalService} from '../../../../../../../node_modules/ngx-bootstrap/modal';
import {Config} from '../../../../../../common/config/public/Config';
import {CustomSettingsEntries} from '../CustomSettingsEntries';
interface IState {
shouldHide(): boolean;
@ -234,11 +235,14 @@ export class SettingsEntryComponent
this.state.isEnumType = true;
}
this.uiType = this.arrayType;
if(CustomSettingsEntries.iS(this.state)){
this.uiType = CustomSettingsEntries.getName(this.state);
}
if (!this.state.isEnumType &&
!this.state.isEnumArrayType &&
this.type !== 'boolean' &&
this.type !== 'SearchQuery' &&
this.type !== 'SVGIconConfig' &&
!CustomSettingsEntries.iS(this.state) &&
this.arrayType !== 'MapLayers' &&
this.arrayType !== 'NavigationLinkConfig' &&
this.arrayType !== 'MapPathGroupConfig' &&

3
src/frontend/app/ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component.css Normal file
View File

@ -0,0 +1,3 @@
.dropdown-item{
cursor: pointer;
}

45
src/frontend/app/ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component.html Normal file
View File

@ -0,0 +1,45 @@
<div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right"
[insideClick]="true"
title="Sort and group" i18n-title>
<button id="button-alignment" dropdownToggle type="button"
class="btn dropdown-toggle btn-outline-primary btn-navigator"
aria-controls="sorting-dropdown">
<ng-icon *ngIf="sortingMethod?.ascending !== null"
[name]="!sortingMethod?.ascending ? 'ionArrowDownOutline' : 'ionArrowUpOutline'"></ng-icon>
<app-sorting-method-icon [method]="sortingMethod?.method"></app-sorting-method-icon>
</button>
<div id="sorting-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-alignment">
<div class="dropdown-item " role="menuitem"
[class.active]="sortingMethod?.method == type.key"
*ngFor="let type of sortingByTypes"
(click)="setSortingBy(type.key)">
<div class="me-2 d-inline-block">
<app-sorting-method-icon [method]="type.key"></app-sorting-method-icon>
</div>
<div class="d-inline-block">{{type.key | stringifySorting}}</div>
</div>
<ng-container *ngIf="sortingMethod?.method != SortingByTypes.random">
<hr>
<div class="dropdown-item " role="menuitem"
[class.active]="sortingMethod?.ascending == true"
(click)="setSortingAscending(true)">
<div class="me-2 d-inline-block">
<ng-icon name="ionArrowUpOutline"></ng-icon>
</div>
<div class="d-inline-block" i18n>ascending</div>
</div>
<div class="dropdown-item" role="menuitem"
[class.active]="sortingMethod?.ascending == false"
(click)="setSortingAscending(false)">
<div class="me-2 d-inline-block">
<ng-icon name="ionArrowDownOutline"></ng-icon>
</div>
<div class="d-inline-block" i18n>descending</div>
</div>
</ng-container>
</div>
</div>

90
src/frontend/app/ui/settings/template/settings-entry/sorting-method/sorting-method.settings-entry.component.ts Normal file
View File

@ -0,0 +1,90 @@
import {Component} from '@angular/core';
import {
ControlValueAccessor,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
UntypedFormControl,
ValidationErrors,
Validator
} from '../../../../../../../../node_modules/@angular/forms';
import {SortingByTypes, SortingMethod} from '../../../../../../../common/entities/SortingMethods';
import {enumToTranslatedArray} from '../../../../EnumTranslations';
import {AutoCompleteService} from '../../../../gallery/search/autocomplete.service';
import {RouterLink} from '../../../../../../../../node_modules/@angular/router';
import {forwardRef} from '../../../../../../../../node_modules/@angular/core';
@Component({
selector: 'app-settings-entry-sorting-method',
templateUrl: './sorting-method.settings-entry.component.html',
styleUrls: ['./sorting-method.settings-entry.component.css'],
providers: [
AutoCompleteService,
RouterLink,
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SortingMethodSettingsEntryComponent),
multi: true,
},
{
provide: NG_VALIDATORS,
useExisting: forwardRef(() => SortingMethodSettingsEntryComponent),
multi: true,
},
],
})
export class SortingMethodSettingsEntryComponent
implements ControlValueAccessor, Validator {
public sortingMethod: SortingMethod;
public readonly sortingByTypes = enumToTranslatedArray(SortingByTypes);
public onTouched(): void {
//ignoring
}
public writeValue(obj: SortingMethod): void {
this.sortingMethod = obj;
}
registerOnChange(fn: (_: unknown) => void): void {
this.propagateChange = fn;
}
registerOnTouched(fn: () => void): void {
this.propagateTouch = fn;
}
public onChange(): void {
this.propagateChange(this.sortingMethod);
}
validate(control: UntypedFormControl): ValidationErrors {
return {required: true};
}
private propagateChange = (_: SortingMethod): void => {
//ignoring
};
private propagateTouch = (_: never): void => {
//ignoring
};
protected readonly SortingByTypes = SortingByTypes;
setSortingBy(key: SortingByTypes): void {
this.sortingMethod.method = key;
if (key == SortingByTypes.random) {
this.sortingMethod.ascending = null;
} else if (this.sortingMethod.ascending == null) {
this.sortingMethod.ascending = true;
}
this.onChange();
}
setSortingAscending(ascending: boolean): void {
this.sortingMethod.ascending = ascending;
this.onChange();
}
}

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

@ -16,6 +16,7 @@ import {UserRoles} from '../../../../../common/entities/UserDTO';
import {WebConfigClassBuilder} from '../../../../../../node_modules/typeconfig/src/decorators/builders/WebConfigClassBuilder';
import {ErrorDTO} from '../../../../../common/entities/Error';
import {ISettingsComponent} from './ISettingsComponent';
import {CustomSettingsEntries} from './CustomSettingsEntries';
interface ConfigState {
@ -271,7 +272,7 @@ export class TemplateComponent implements OnInit, OnChanges, OnDestroy, ISetting
}
isExpandableConfig(c: ConfigState) {
return c.isConfigType && c.tags?.uiType !== 'SVGIconConfig';
return c.isConfigType && !CustomSettingsEntries.iS(c);
}

11
src/frontend/app/ui/settings/workflow/workflow.component.ts
View File

@ -96,13 +96,20 @@ export class WorkflowComponent implements ControlValueAccessor, Validator, OnIni
for (const enumMember in SortingByTypes) {
const key = parseInt(enumMember, 10);
if (key >= 0) {
if (key == SortingByTypes.random) {
this.SortingByTypes.push({
key: {method: key, ascending: null} as SortingMethod,
value: EnumTranslations[SortingByTypes[enumMember]]
});
continue;
}
this.SortingByTypes.push({
key: {method: key, ascending: true} as SortingMethod,
value: EnumTranslations[SortingByTypes[enumMember]] || SortingByTypes[enumMember] + $localize`ascending`
value: EnumTranslations[SortingByTypes[enumMember]] + ' ' + $localize`ascending`
});
this.SortingByTypes.push({
key: {method: key, ascending: false} as SortingMethod,
value: EnumTranslations[SortingByTypes[enumMember]] || SortingByTypes[enumMember] + $localize`descending`
value: EnumTranslations[SortingByTypes[enumMember]] + ' ' + $localize`descending`
});
}
}