_Bastler/bstlboard-front
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

entry edit, fix menu touch

Browse Source
This commit is contained in:
_Bastler
2021-11-21 16:43:36 +01:00
parent 2bd1e7a9d1
commit 185f28e262
18 changed files with 344 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/entry/edit/edit.page.html
+41
View File
@@ -0,0 +1,41 @@
<div class="container">
<form [formGroup]="form" (ngSubmit)="update()" #formDirective="ngForm">
<mat-card>
<mat-card-content>
<p>{{'submission.edit' | i18n}}</p>
<mat-form-field>
<input matInput placeholder="{{'submission.entryType' | i18n}}" formControlName="entryType" disabled>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{'submission.url' | i18n}}" formControlName="url" type="url"
[required]="entryType == 'LINK'" matAutofocus>
<mat-error *ngIf="hasError('url')">
{{'submission.url.error' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="{{'submission.title' | i18n}}" formControlName="title" type="text" required
(focus)="onTitleFocus($event)">
<mat-error>
{{'submission.title.error' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<textarea [mat-autosize] [matAutosizeMinRows]="3" matInput placeholder="{{'submission.text' | i18n}}" [required]="entryType != 'LINK'"
formControlName="text"></textarea>
<mat-error>
{{'submission.text.error' | i18n}}
</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
{{'submission.update' | i18n}}
</button>
<a *ngIf="success" mat-button color="primary">{{'submission.success' | i18n}}</a>
</mat-card-actions>
</mat-card>
</form>
</div>
src/app/pages/entry/edit/edit.page.scss
+20
View File
@@ -0,0 +1,20 @@
mat-form-field {
display: block;
}
form {
margin: 5px;
@media screen and (min-width: 576px) {
max-width: 100%;
}
@media screen and (min-width: 768px) {
max-width: 80%;
margin: 15px;
}
@media screen and (min-width: 992px) {
max-width: 50%;
}
}
src/app/pages/entry/edit/edit.page.ts
+127
View File
@@ -0,0 +1,127 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { EntriesService } from '../../../services/entries.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'page-entry-edit',
templateUrl: './edit.page.html',
styleUrls: [ './edit.page.scss' ]
})
export class PageEntryEdit implements OnInit {
id: number;
entry: any;
entryTypes: string[] = [ 'LINK', 'DISCUSSION', 'QUESTION', 'INTERN' ];
entryType: string = this.entryTypes[ 0 ];
notfound: boolean = false;
working: boolean = false;
success: boolean = false;
form: FormGroup;
@ViewChild('formDirective') private formDirective: NgForm;
constructor(private entriesService: EntriesService,
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private snackBar: MatSnackBar) { }
ngOnInit(): void {
this.form = this.formBuilder.group({
entryType: [ '', Validators.required ],
url: [ '', Validators.required ],
title: [ '', Validators.required ],
text: [ '', Validators.nullValidator ],
});
this.form.get('entryType').disable();
this.form.get('entryType').valueChanges.subscribe((value) => {
this.entryType = value;
switch (value) {
case 'LINK':
this.form.get('url').setValidators([ Validators.required ]);
this.form.get('text').setValidators([ Validators.nullValidator ]);
break;
default:
this.form.get('url').setValidators([ Validators.nullValidator ]);
this.form.get('text').setValidators([ Validators.required ]);
break;
}
});
this.form.get('url').valueChanges.pipe(
debounceTime(800),
distinctUntilChanged()).subscribe((value) => {
if (value && !this.form.get('title').value) {
this.entriesService.titleHelper(value).subscribe((title: string) => {
this.form.get('title').setValue(title);
})
}
})
this.id = +this.route.snapshot.paramMap.get('id');
this.refresh();
}
refresh() {
this.entriesService.getEntry(this.id).subscribe((data) => {
this.entry = data;
this.entryType = this.entry.entryType;
this.form.get("entryType").setValue(this.entry.entryType);
this.form.get("url").setValue(this.entry.url);
this.form.get("title").setValue(this.entry.title);
this.form.get("text").setValue(this.entry.text);
}, (error) => {
if (error.status == 404) {
this.notfound = true;
}
})
}
hasError(controlName: string): boolean {
return this.form.controls[ controlName ].errors != null;
}
onTitleFocus(event): void {
}
update(): void {
if (this.working) {
return;
}
this.working = true;
this.entry.url = this.form.get("url").value;
this.entry.title = this.form.get("title").value;
this.entry.text = this.form.get("text").value;
this.entriesService.update(this.entry).subscribe((data) => {
this.entry = data;
this.working = false;
this.success = true;
}, (error) => {
this.working = false;
if (error.status == 403) {
this.snackBar.open("Error");
}
if (error.status == 422) {
let errors = {};
for (let code of error.error) {
errors[ code.field ] = errors[ code.field ] || {};
errors[ code.field ][ code.code ] = true;
}
for (let code in errors) {
this.form.get(code).setErrors(errors[ code ]);
}
}
})
}
}
src/app/pages/login/login.page.html
+52 -44
View File
@@ -1,51 +1,59 @@
<div class="container">
<mat-card *ngIf="externals && externals.length > 0" class="box">
<mat-card-content>
<h2>{{'login.external' | i18n}}</h2>
<mat-error *ngIf="externalLoginInvalid">
{{'login.external.invalid' | i18n}}
</mat-error>
</mat-card-content>
<mat-card-actions>
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals" mat-raised-button
color="accent">{{'login.external.client' | i18n:client.id}}</a>
<mat-slide-toggle [(ngModel)]="autologin">
{{'login.autologin' | i18n}}
</mat-slide-toggle>
</mat-card-actions>
</mat-card>
<form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
<div fxLayout="column" fxFlexFill>
<div class="container">
<mat-card *ngIf="externals && externals.length > 0" class="box">
<mat-card-content>
<h2>{{'login.internal' | i18n}}</h2>
<mat-error *ngIf="loginInvalid">
{{'login.invalid' | i18n}}
<h2>{{'login.external' | i18n}}</h2>
<mat-error *ngIf="externalLoginInvalid">
{{'login.external.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required
matAutofocus>
<mat-error>
{{'username.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input id="password" name="password" matInput type="password" placeholder="{{'password' | i18n}}"
required>
<mat-error>
{{'password.invalid.hint' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="remember-me" name="remember-me">
{{'login.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
[disabled]="loginForm.invalid">{{'login' |
i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></button>
<a class="external-login" (click)="externalLogin(client)" *ngFor="let client of externals"
mat-raised-button color="accent">{{'login.external.client' | i18n:client.id}}</a>
<mat-slide-toggle [(ngModel)]="autologin">
{{'login.autologin' | i18n}}
</mat-slide-toggle>
</mat-card-actions>
</mat-card>
</form>
<form action="{{apiUrl}}/login" method="POST" #loginForm class="box">
<mat-card *ngIf="internalLogin || externals && externals.length < 1">
<mat-card-content>
<h2>{{'login.internal' | i18n}}</h2>
<mat-error *ngIf="loginInvalid">
{{'login.invalid' | i18n}}
</mat-error>
<mat-form-field>
<input id="username" name="username" matInput placeholder="{{'username' | i18n}}" required
matAutofocus>
<mat-error>
{{'username.missing' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input id="password" name="password" matInput type="password"
placeholder="{{'password' | i18n}}" required>
<mat-error>
{{'password.invalid.hint' | i18n}}
</mat-error>
</mat-form-field>
<mat-slide-toggle id="remember-me" name="remember-me">
{{'login.keepSession' | i18n}}
</mat-slide-toggle>
</mat-card-content>
<mat-card-actions>
<button type="submit" (click)="loginForm.submit()" mat-raised-button color="primary"
[disabled]="loginForm.invalid">{{'login' |
i18n}}<mat-icon style="font-size: 1em;">open_in_new
</mat-icon></button>
</mat-card-actions>
</mat-card>
</form>
</div>
<span fxFlexOffset="auto"></span>
<div class="container" *ngIf="!internalLogin">
<small>
<a href="/login?all">{{'login.local' | i18n}}</a>
</small>
</div>
</div>
src/app/pages/settings/settings.page.html
+15
View File
@@ -32,6 +32,21 @@
{{'settings.gravity.zero' | i18n}}
</mat-hint>
</mat-form-field>
<mat-form-field>
<button
*ngIf="user.settings.entryDelay || form.get('entryDelay').value != settings.defaultEntryDelay"
matPrefix mat-icon-button (click)="resetEntryDelay()">
<mat-icon>cancel</mat-icon>
</button>
<input type="number" min="0" max="15" step="1" matInput placeholder="{{'settings.entryDelay' | i18n}}"
formControlName="entryDelay">
<mat-hint *ngIf="form.get('entryDelay').value != 0">
{{'settings.entryDelay.hint' | i18n}}
</mat-hint>
<mat-hint *ngIf="form.get('entryDelay').value == 0">
{{'settings.entryDelay.zero' | i18n}}
</mat-hint>
</mat-form-field>
<mat-form-field>
<button
*ngIf="user.settings.commentDelay || form.get('commentDelay').value != settings.defaultCommentDelay"
src/app/pages/settings/settings.page.ts
+14 -1
View File
@@ -30,6 +30,7 @@ export class PageSettings implements OnInit {
email: [ '', Validators.nullValidator ],
about: [ '', Validators.nullValidator ],
gravity: [ '', Validators.nullValidator ],
entryDelay: [ '', Validators.nullValidator ],
commentDelay: [ '', Validators.nullValidator ],
});
@@ -47,6 +48,7 @@ export class PageSettings implements OnInit {
this.settingsService.settings.subscribe((settings) => {
this.settings = settings;
this.form.get('gravity').setValue(this.user.settings.gravity || this.settings.defaultGravity);
this.form.get('entryDelay').setValue(this.user.settings.entryDelay || this.settings.defaultEntryDelay);
this.form.get('commentDelay').setValue(this.user.settings.commentDelay || this.settings.defaultCommentDelay);
});
})
@@ -63,6 +65,11 @@ export class PageSettings implements OnInit {
this.form.get('gravity').setValue(this.settings.defaultGravity);
}
resetEntryDelay(): void {
this.user.settings.entryDelay = null;
this.form.get('entryDelay').setValue(this.settings.defaultEntryDelay);
}
resetCommentDelay(): void {
this.user.settings.commentDelay = null;
this.form.get('commentDelay').setValue(this.settings.defaultCommentDelay);
@@ -89,10 +96,16 @@ export class PageSettings implements OnInit {
this.user.settings.gravity = this.form.get('gravity').value;
}
if (this.form.get('entryDelay').value != this.settings.defaultEntryDelay && !this.user.settings.entryDelay) {
this.user.settings.entryDelay = this.form.get('entryDelay').value;
} else if (this.user.settings.entryDelay) {
this.user.settings.entryDelay = this.form.get('entryDelay').value;
}
if (this.form.get('commentDelay').value != this.settings.defaultCommentDelay && !this.user.settings.commentDelay) {
this.user.settings.commentDelay = this.form.get('commentDelay').value;
} else if (this.user.settings.commentDelay) {
this.user.settings.commentDelay = this.form.get('gravity').value;
this.user.settings.commentDelay = this.form.get('commentDelay').value;
}
this.userService.update(this.user).subscribe((data) => {