editable jitis rooms

This commit is contained in:
_Bastler 2021-08-17 20:37:09 +02:00
parent 323ce0e885
commit 7a4839b2e6
9 changed files with 264 additions and 109 deletions

View File

@ -42,7 +42,7 @@ import {NotfoundComponent} from './pages/notfound/notfound.component';
import { HtmlComponent } from './utils/html/html.component';
import { ConfirmDialog } from './ui/confirm/confirm.component'
import { UserComponent } from './pages/user/user.component'
import {JitsiComponent, JitsiShareDialog} from './pages/jitsi/jitsi.component'
import { JitsiComponent, JitsiEditDialog, JitsiShareDialog } from './pages/jitsi/jitsi.component'
import { ParteyTimeslotsComponent, ParteyTimeslotDialog } from './pages/partey/timeslots/timeslots.compontent'
import { UrlShortenerComponent, UrlShortenerPasswordComponent, UrlShortenerShareDialog, UrlShortenerEditDialog } from './pages/urlshortener/urlshortener.component'
@ -100,7 +100,7 @@ export class XhrInterceptor implements HttpInterceptor {
HtmlComponent,
ConfirmDialog,
UserComponent,
JitsiComponent, JitsiShareDialog,
JitsiComponent, JitsiEditDialog, JitsiShareDialog,
ParteyTimeslotsComponent, ParteyTimeslotDialog,
MinetestAccountsComponent,
UrlShortenerComponent, UrlShortenerShareDialog, UrlShortenerEditDialog, UrlShortenerPasswordComponent

View File

@ -65,6 +65,15 @@
</td>
</ng-container>
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef> {{'jitsi.rooms.edit' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom" class="text-right">
<a mat-icon-button>
<mat-icon (click)="edit(jitsiRoom)">edit</mat-icon>
</a>
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef class="align-right"> {{'jitsi.rooms.delete' | i18n}} </th>
<td mat-cell *matCellDef="let jitsiRoom" class="text-right">
@ -99,7 +108,7 @@
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="startsPicker" [(ngModel)]="jitsiRoom.starts" formControlName="starts"
placeholder="{{'jitsi.rooms.starts' | i18n}}">
placeholder="{{'jitsi.rooms.starts' | i18n}}" (dateChange)="clearModeration(jitsiRoom)">
<mat-datepicker-toggle matSuffix [for]="startsPicker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #startsPicker></ngx-mat-datetime-picker>
<mat-error>

View File

@ -31,7 +31,7 @@ export class JitsiComponent implements OnInit {
page: any = { page: 0, size: 10, sort: "id", desc: false };
pageSizeOptions: number[] = [ 5, 10, 25, 50 ];
jitsiRoomsColumns = ["share", "room", "starts", "moderationStarts", "expires", "moderationUrl", "delete"];
jitsiRoomsColumns = [ "share", "room", "starts", "moderationStarts", "expires", "moderationUrl", "edit", "delete" ];
constructor(
private quotaService: QuotaService,
@ -51,7 +51,7 @@ export class JitsiComponent implements OnInit {
expires: [ '', Validators.nullValidator ],
});
this.update();
this.refresh();
}
create(): void {
@ -61,7 +61,7 @@ export class JitsiComponent implements OnInit {
}
this.jitsiService.create(this.jitsiRoom).subscribe(response => {
this.update();
this.refresh();
this.formDirective.resetForm();
this.jitsiRoom = {};
this.working = false;
@ -81,7 +81,7 @@ export class JitsiComponent implements OnInit {
})
}
update() {
refresh() {
this.jitsiRoomsQuota = 0;
this.shortenedUrlQuota = 0;
this.quotaService.quotas().subscribe((data: any) => {
@ -131,7 +131,7 @@ export class JitsiComponent implements OnInit {
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.jitsiService.delete(jitsiRoom.id).subscribe((result: any) => {
this.update();
this.refresh();
})
}
});
@ -150,11 +150,87 @@ export class JitsiComponent implements OnInit {
createShortenedUrl(jitsiRoom: any) {
this.jitsiService.createShortUrl(jitsiRoom.id).subscribe((result: any) => {
this.update();
this.refresh();
}, (error: any) => {
this.snackBar.open(this.i18n.get("urlshortener.noQuota", []), this.i18n.get("close", []));
});
}
clearModeration(jitsiRoom) {
if (!jitsiRoom.starts) {
jitsiRoom.moderationStarts = null;
}
}
edit(jitsiRoom) {
const dialogRef = this.dialog.open(JitsiEditDialog, {
data: jitsiRoom,
minWidth: '400px',
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.refresh();
}
});
}
}
@Component({
selector: 'app-jitsi-edit-dialog',
templateUrl: 'jitsi.edit.html',
styleUrls: [ './jitsi.edit.scss' ]
})
export class JitsiEditDialog {
form: FormGroup;
jitsiRoom: any;
datetimeformat: string;
constructor(
private i18n: I18nService,
private jitsiService: JitsiService,
public dialogRef: MatDialogRef<JitsiEditDialog>,
private formBuilder: FormBuilder,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.jitsiRoom = JSON.parse(JSON.stringify(data));
}
ngOnInit(): void {
this.datetimeformat = this.i18n.get('format.datetime', []);
this.form = this.formBuilder.group({
room: [ '', Validators.required ],
starts: [ '', Validators.nullValidator ],
moderationStarts: [ '', Validators.nullValidator ],
expires: [ '', Validators.nullValidator ],
});
}
clearModeration(jitsiRoom) {
if (!jitsiRoom.starts) {
jitsiRoom.moderationStarts = null;
}
}
save() {
this.jitsiService.update(this.jitsiRoom).subscribe((result: any) => {
this.dialogRef.close(result);
}, (error) => {
if (error.status == 409) {
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 ]);
}
}
});
}
}
@Component({

View File

@ -0,0 +1,49 @@
<h1 mat-dialog-title>
<mat-icon inline="true">edit</mat-icon> {{'jitsi.rooms.edit' | i18n}}
</h1>
<mat-dialog-content>
<form [formGroup]="form">
<mat-form-field>
<input matInput placeholder="{{'jitsi.rooms.room' | i18n}}" formControlName="room" [(ngModel)]="jitsiRoom.room"
required pattern="[a-zA-Z0-9]+">
<mat-error>
{{'jitsi.rooms.error.room' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="startsPicker" [(ngModel)]="jitsiRoom.starts" formControlName="starts"
placeholder="{{'jitsi.rooms.starts' | i18n}}" (dateChange)="clearModeration(jitsiRoom)">
<mat-datepicker-toggle matSuffix [for]="startsPicker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #startsPicker></ngx-mat-datetime-picker>
<mat-error>
{{'jitsi.rooms.error.starts' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field *ngIf="jitsiRoom.starts">
<input matInput [ngxMatDatetimePicker]="moderationStartsPicker" [(ngModel)]="jitsiRoom.moderationStarts"
formControlName="moderationStarts" placeholder="{{'jitsi.rooms.moderationStarts' | i18n}}">
<mat-datepicker-toggle matSuffix [for]="moderationStartsPicker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #moderationStartsPicker></ngx-mat-datetime-picker>
<mat-error>
{{'jitsi.rooms.error.moderationStarts' | i18n}}
</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput [ngxMatDatetimePicker]="expiresPicker" [(ngModel)]="jitsiRoom.expires" formControlName="expires"
placeholder="{{'jitsi.rooms.expires' | i18n}}">
<mat-datepicker-toggle matSuffix [for]="expiresPicker"></mat-datepicker-toggle>
<ngx-mat-datetime-picker #expiresPicker></ngx-mat-datetime-picker>
<mat-error>
{{'jitsi.rooms.error.expires' | i18n}}
</mat-error>
</mat-form-field>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="false">{{'cancel' | i18n}}</button>
<button [disabled]="form.invalid" mat-raised-button (click)="save()" color="accent">{{ 'jitsi.rooms.save' |
i18n}}</button>
</mat-dialog-actions>

View File

@ -0,0 +1,7 @@
mat-form-field {
display: block;
}
mat-slide-toggle {
margin-bottom: 24px;
}

View File

@ -133,6 +133,11 @@
</mat-error>
</mat-form-field>
<mat-slide-toggle [(ngModel)]="shortenedUrl.queryParameters" formControlName="queryParameters">
{{'urlshortener.queryParameters' | i18n}}
<mat-icon inline="true" matTooltip="{{'urlshortener.queryParameters.info' | i18n}}">info</mat-icon>
</mat-slide-toggle>
<mat-form-field>
<input matInput placeholder="{{'urlshortener.code' | i18n}}" formControlName="code"
[(ngModel)]="shortenedUrl.code">

View File

@ -52,6 +52,7 @@ export class UrlShortenerComponent implements OnInit {
password: [ '', Validators.nullValidator ],
password2: [ '', Validators.nullValidator ],
expires: [ '', Validators.nullValidator ],
queryParameters: [ '', Validators.nullValidator ],
}, {
validator: MatchingValidator('password', 'password2')
});
@ -64,14 +65,14 @@ export class UrlShortenerComponent implements OnInit {
})
})
this.update();
this.refresh();
}
create(): void {
this.working = true;
this.urlShortenerService.create(this.shortenedUrl).subscribe(response => {
this.update();
this.refresh();
this.formDirective.resetForm();
this.shortenedUrl = {};
this.working = false;
@ -91,7 +92,7 @@ export class UrlShortenerComponent implements OnInit {
})
}
update() {
refresh() {
this.shortenedUrlQuota = 0;
this.quotaService.quotas().subscribe((data: any) => {
for (let quota of data) {
@ -149,7 +150,7 @@ export class UrlShortenerComponent implements OnInit {
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.urlShortenerService.delete(shortenedUrl.code).subscribe((result: any) => {
this.update();
this.refresh();
})
}
});
@ -169,15 +170,13 @@ export class UrlShortenerComponent implements OnInit {
});
dialogRef.afterClosed().subscribe(result => {
console.log(result);
if (result) {
this.update();
this.refresh();
}
});
}
}
@Component({
selector: 'app-urlshortener-edit-dialog',
templateUrl: 'urlshortener.edit.html',
@ -192,7 +191,6 @@ export class UrlShortenerEditDialog {
constructor(
private i18n: I18nService,
private urlShortenerService: UrlShortenerService,
private snackBar: MatSnackBar,
public dialogRef: MatDialogRef<UrlShortenerShareDialog>,
private formBuilder: FormBuilder,
@Inject(MAT_DIALOG_DATA) public data: any) {
@ -202,6 +200,7 @@ export class UrlShortenerEditDialog {
this.shortenedUrlModel.newCode = data.code;
this.shortenedUrlModel.note = data.note;
this.shortenedUrlModel.expires = data.expires;
this.shortenedUrlModel.queryParameters = data.queryParameters;
}
ngOnInit(): void {
@ -214,6 +213,7 @@ export class UrlShortenerEditDialog {
password: [ '', Validators.nullValidator ],
password2: [ '', Validators.nullValidator ],
expires: [ '', Validators.nullValidator ],
queryParameters: [ '', Validators.nullValidator ],
});
}

View File

@ -58,6 +58,11 @@
</mat-error>
</mat-form-field>
<mat-slide-toggle [(ngModel)]="shortenedUrlModel.queryParameters" formControlName="queryParameters">
{{'urlshortener.queryParameters' | i18n}}
<mat-icon inline="true" matTooltip="{{'urlshortener.queryParameters.info' | i18n}}">info</mat-icon>
</mat-slide-toggle>
<mat-form-field>
<input matInput placeholder="{{'urlshortener.code' | i18n}}" formControlName="code"
[(ngModel)]="shortenedUrlModel.newCode">

View File

@ -35,6 +35,10 @@ export class JitsiService {
return this.http.post(environment.apiUrl + "/jitsi/rooms", jitsiRoom);
}
update(jitsiRoom) {
return this.http.patch(environment.apiUrl + "/jitsi/rooms", jitsiRoom);
}
createShortUrl(id) {
return this.http.patch(environment.apiUrl + "/jitsi/rooms/" + id, null);
}