-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add typed forms * Get the form running * Comments * Spacing * Formatting * Current state: Multiple FormGroupTypes * Add vertical tabs * Add type float, general improvements * support multiple categories * Remove multiple categories again, introduce weight * introduce representation * Apply new structure * Form validation * Display detailed error messages * Retreive settings * Retreiving settings for given scope * list scopes and fetch settings based on them * Load single settings + motd for admin ui * Better fetching of single settings * Remove old code * rename setting to motd-admin-ui --------- Co-authored-by: Jan-Gerrit Göbel <jgoebel@uni-bremen.de>
- Loading branch information
Showing
23 changed files
with
1,447 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <div class="clr-row"> | ||
| <div class="clr-col"> | ||
| <h3> | ||
| Settings | ||
| <span class="scope">{{ this.selectedScope?.displayName ?? "scope" }}</span> | ||
| </h3> | ||
| </div> | ||
| </div> | ||
| <alert #alert></alert> | ||
| <ng-container *ngIf="scopesLoading"> | ||
| <div> | ||
| <span class="spinner spinner-inline"> Please wait... </span> | ||
| <span> Scopes are being loaded... </span> | ||
| </div> | ||
| </ng-container> | ||
| <ng-container *ngIf="!scopesLoading"> | ||
| <clr-dropdown> | ||
| <b><label>Scope</label></b> | ||
| <button | ||
| class="dropdown-toggle btn btn-link" | ||
| clrDropdownTrigger | ||
| [disabled]="scopes.length == 0" | ||
| > | ||
| <span *ngIf="!this.selectedScope">Select Scope</span> | ||
| <span *ngIf="this.selectedScope">{{ | ||
| this.selectedScope.displayName | ||
| }}</span> | ||
| <clr-icon shape="caret down"></clr-icon> | ||
| </button> | ||
|
|
||
| <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen> | ||
| <clr-row | ||
| *ngFor="let sc of scopes" | ||
| clrDropdownItem | ||
| (click)="setScope(sc)" | ||
| [ngClass]="{ selected: this.selectedScope == sc }" | ||
| > | ||
| {{ sc.displayName }} | ||
| </clr-row> | ||
| </clr-dropdown-menu> | ||
| </clr-dropdown> | ||
| <button class="btn" (click)="onSubmit()" [disabled]="!hasChanges || !valid"> | ||
| Save Changes | ||
| </button> | ||
| <ng-container *ngIf="loading"> | ||
| <div> | ||
| <span class="spinner spinner-inline"> Please wait... </span> | ||
| <span> Settings are being loaded... </span> | ||
| </div> | ||
| </ng-container> | ||
| <ng-container *ngIf="!loading"> | ||
| <app-typed-form | ||
| *ngIf="settings.length > 0" | ||
| [typedInputs]="settings" | ||
| (syncedInputs)="onFormChange($event)" | ||
| (inputsValid)="changeFormValidity($event)" | ||
| [groupType]="FormGroupType.TABS" | ||
| ></app-typed-form> | ||
| <div *ngIf="settings.length == 0"> | ||
| No settings available for scope | ||
| <code>{{ this.selectedScope.displayName }}</code | ||
| >. | ||
| </div> | ||
| </ng-container> | ||
| </ng-container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .scope { | ||
| padding: 5px 10px 5px 10px; | ||
| color: white; | ||
| background-color: #3fc5f0; | ||
| border-radius: 20px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { Component, ViewChild } from '@angular/core'; | ||
| import { TypedInput, FormGroupType } from '../../typed-form/TypedInput'; | ||
| import { | ||
| PreparedScope, | ||
| TypedSettingsService, | ||
| } from 'src/app/data/typedSettings.service'; | ||
| import { AlertComponent } from 'src/app/alert/alert.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-settings', | ||
| templateUrl: './settings.component.html', | ||
| styleUrls: ['./settings.component.scss'], | ||
| }) | ||
| export class SettingsComponent { | ||
| public settings: TypedInput[] = []; | ||
| public updatedSettings: TypedInput[] = []; | ||
| public hasChanges: boolean = false; | ||
| public valid: boolean = true; | ||
| public scopes: PreparedScope[] = []; | ||
| public selectedScope: PreparedScope; | ||
| public loading: boolean = true; | ||
| public scopesLoading: boolean = true; | ||
| readonly FormGroupType = FormGroupType; // Reference to TypedInputTypes enum for template use | ||
|
|
||
| @ViewChild('alert') alert: AlertComponent; | ||
|
|
||
| private alertTime = 2000; | ||
| private alertErrorTime = 10000; | ||
|
|
||
| constructor(public typedSettingsService: TypedSettingsService) { | ||
| this.getScopes(); | ||
| } | ||
|
|
||
| onFormChange(data: TypedInput[]) { | ||
| this.updatedSettings = data; | ||
| this.hasChanges = true; | ||
| } | ||
|
|
||
| changeFormValidity(valid: boolean) { | ||
| this.valid = valid; | ||
| } | ||
|
|
||
| onSubmit() { | ||
| if (!this.updatedSettings) { | ||
| return; | ||
| } | ||
| console.log(this.updatedSettings); | ||
| this.typedSettingsService.updateCollection(this.updatedSettings).subscribe( | ||
| (resp) => { | ||
| console.log(resp); | ||
| this.hasChanges = false; | ||
| this.alert.success( | ||
| 'Settings successfully saved', | ||
| false, | ||
| this.alertTime | ||
| ); | ||
| }, | ||
| (err) => { | ||
| this.alert.danger(err.error.message, true, this.alertErrorTime); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| setScope(scope: PreparedScope) { | ||
| this.loading = true; | ||
| this.selectedScope = scope; | ||
| this.typedSettingsService.list(this.selectedScope.name).subscribe( | ||
| (typedSettings) => { | ||
| this.settings = typedSettings; | ||
| this.loading = false; | ||
| }, | ||
| (err) => { | ||
| this.alert.danger(err.error.message, true, this.alertErrorTime); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| getScopes() { | ||
| this.scopes = []; | ||
| this.typedSettingsService.listScopes().subscribe( | ||
| (scopes) => { | ||
| this.scopes = scopes; | ||
| this.scopesLoading = false; | ||
| this.setScope(this.scopes[0]); | ||
| }, | ||
| (err) => { | ||
| this.alert.danger(err.error.message, true, this.alertErrorTime); | ||
| } | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.