editable jitis rooms

src/app/app.module.ts

@@ -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

src/app/pages/jitsi/jitsi.component.html

@@ -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>

src/app/pages/jitsi/jitsi.component.ts

@@ -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({

src/app/pages/jitsi/jitsi.edit.html

@@ -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>

src/app/pages/jitsi/jitsi.edit.scss

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

src/app/pages/urlshortener/urlshortener.component.html

@@ -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">

src/app/pages/urlshortener/urlshortener.component.ts

@@ -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 ],
     });
   }
 

src/app/pages/urlshortener/urlshortener.edit.html

@@ -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">

src/app/services/jitsi.service.ts

@@ -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);
     }