feat: typed ModalService

frontend/src/app/modules/members/components/member-contacts/member-contacts.component.ts

@@ -3,6 +3,7 @@ import { AlertButton, AlertController } from "@ionic/angular";
 import { UntilDestroy } from "@ngneat/until-destroy";
 import { MemberContactResponseWithLinks, MemberResponseWithLinks } from "src/app/api";
 import { ApiService } from "src/app/services/api.service";
+import { ModalService } from "src/app/services/modal.service";
 import { ToastService } from "src/app/services/toast.service";
 
 @UntilDestroy()
@@ -21,6 +22,7 @@ export default class MemberContactsComponent implements OnChanges {
     private toastService: ToastService,
     private api: ApiService,
     private alertController: AlertController,
+    private modalService: ModalService,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -124,84 +126,45 @@ export default class MemberContactsComponent implements OnChanges {
   }
 
   async deleteContact(contact: MemberContactResponseWithLinks) {
-    const alert = await this.alertController.create({
-      header: "Smazat kontakt",
-      message: `Opravdu chcete smazat kontakt ${contact.title}?`,
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Smazat",
-          handler: async () => {
-            this.deleteContactConfirmed(contact);
-          },
-        },
-      ],
-    });
-
-    await alert.present();
-  }
-
-  async deleteContactConfirmed(contact: MemberContactResponseWithLinks) {
-    if (!this.member) return;
-
-    await this.api.members.deleteContact(this.member.id, contact.id);
-
-    await this.loadContacts(this.member.id);
-
-    await this.toastService.toast("Kontakt byl smazán");
+    const confirmation = await this.modalService.deleteConfirmationModal(
+      `Opravdu chcete smazat kontakt ${contact.title}?`,
+    );
+    console.log(confirmation);
   }
 
   async openAddressForm() {
-    const alert = await this.alertController.create({
+    const data = await this.modalService.inputModal({
       header: "Upravit adresu",
-      inputs: [
-        {
-          name: "addressStreet",
+      inputs: {
+        addressStreet: {
           type: "text",
           placeholder: "Ulice",
           value: this.member?.addressStreet,
         },
-        {
-          name: "addressStreetNo",
+        addressStreetNo: {
           type: "text",
           placeholder: "Číslo popisné",
           value: this.member?.addressStreetNo,
         },
-        {
-          name: "addressCity",
+        addressCity: {
           type: "text",
           placeholder: "Město",
           value: this.member?.addressCity,
         },
-        {
-          name: "addressPostalCode",
+        addressPostalCode: {
           type: "text",
           placeholder: "PSČ",
           value: this.member?.addressPostalCode,
         },
-        {
-          name: "addressCountry",
+        addressCountry: {
           type: "text",
           placeholder: "Země",
           value: this.member?.addressCountry,
         },
-      ],
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Uložit",
-          handler: async (data) => this.update.emit(data),
-        },
-      ],
+      },
     });
 
-    await alert.present();
+    if (data) this.update.emit(data);
   }
 
   getFullAddress(member: MemberResponseWithLinks) {

frontend/src/app/modules/members/components/member-info/member-info.component.html

@@ -1,6 +1,12 @@
 <h4 class="d-flex justify-content-between">
   Základní informace
-  <bo-edit-button slot="end" (click)="openBasicInfoForm()" class="float-end">Upravit</bo-edit-button>
+  <bo-edit-button
+    *ngIf="member?._links?.updateMember?.allowed"
+    slot="end"
+    (click)="openBasicInfoForm()"
+    class="float-end"
+    >Upravit</bo-edit-button
+  >
 </h4>
 <ion-list *ngIf="member" class="selectable">
   <ion-item>
@@ -27,22 +33,34 @@ <h4 class="mt-4">Členství ve skupině</h4>
   <ion-item>
     <ion-label>Aktivní:</ion-label>
     <ion-label>{{ member.active === undefined ? "-" : member.active ? "Ano" : "Ne" }}</ion-label>
-    <bo-edit-button slot="end" (click)="openMembershipChangeForm()"></bo-edit-button>
+    <bo-edit-button
+      *ngIf="member?._links?.updateMember?.allowed"
+      slot="end"
+      (click)="openMembershipChangeForm()"
+    ></bo-edit-button>
   </ion-item>
 
   <ion-item>
     <ion-label>Role:</ion-label>
 
     <ion-label>{{ member | member: "role" || "-" }}</ion-label>
-    <bo-edit-button slot="end" (click)="openRoleChangeForm()"></bo-edit-button>
+    <bo-edit-button
+      *ngIf="member?._links?.updateMember?.allowed"
+      slot="end"
+      (click)="openRoleChangeForm()"
+    ></bo-edit-button>
   </ion-item>
 
   <ion-item>
     <ion-label>Oddíl</ion-label>
     <ion-label>
       <bo-group-badge [groupId]="member.groupId"></bo-group-badge>
     </ion-label>
-    <bo-edit-button slot="end" (click)="openGroupChangeForm()"></bo-edit-button>
+    <bo-edit-button
+      *ngIf="member?._links?.updateMember?.allowed"
+      slot="end"
+      (click)="openGroupChangeForm()"
+    ></bo-edit-button>
   </ion-item>
 
   <!-- <ion-item [button]="true" [detail]="false">

frontend/src/app/modules/members/components/member-info/member-info.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
-import { AlertController, AlertInput } from "@ionic/angular";
+import { AlertController } from "@ionic/angular";
 import { UntilDestroy } from "@ngneat/until-destroy";
-import { MemberResponse, MemberResponseWithLinks } from "src/app/api";
+import { MemberResponse, MemberResponseWithLinks, MemberRolesEnum } from "src/app/api";
 import { MemberRoles } from "src/app/config/member-roles";
 import { ApiService } from "src/app/services/api.service";
+import { ModalService } from "src/app/services/modal.service";
 
 @UntilDestroy()
 @Component({
@@ -18,140 +19,65 @@ export class MemberInfoComponent implements OnInit {
   constructor(
     private alertController: AlertController,
     private api: ApiService,
+    private modalService: ModalService,
   ) {}
 
   ngOnInit(): void {}
 
   async openBasicInfoForm() {
-    const alert = await this.alertController.create({
+    const data = await this.modalService.inputModal({
       header: "Upravit základní informace",
-      inputs: [
-        {
-          name: "firstName",
-          type: "text",
-          placeholder: "Jméno",
-          value: this.member?.firstName,
-        },
-        {
-          name: "lastName",
-          type: "text",
-          placeholder: "Příjmení",
-          value: this.member?.lastName,
-        },
-        {
-          name: "nickname",
-          type: "text",
-          placeholder: "Přezdívka",
-          value: this.member?.nickname,
-        },
-        {
-          name: "phone",
-          type: "date",
-          placeholder: "Datum narození",
-          value: this.member?.birthday,
-        },
-      ],
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Uložit",
-          handler: async (data) => this.update.emit(data),
-        },
-      ],
+      inputs: {
+        firstName: { placeholder: "Jméno", value: this.member?.firstName },
+        lastName: { placeholder: "Příjmení", value: this.member?.lastName },
+        nickname: { placeholder: "Přezdívka", value: this.member?.nickname },
+        birthday: { type: "date", placeholder: "Datum narození", value: this.member?.birthday },
+      },
     });
 
-    await alert.present();
+    if (data !== null) this.update.emit(data);
   }
 
   async openMembershipChangeForm() {
-    const alert = await this.alertController.create({
-      header: "Změnit členství",
-      inputs: [
-        {
-          name: "active",
-          type: "radio",
-          label: "Aktivní",
-          value: true,
-          checked: this.member?.active,
-        },
-        {
-          name: "active",
-          type: "radio",
-          label: "Neaktivní",
-          value: false,
-          checked: !this.member?.active,
-        },
-      ],
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Uložit",
-          handler: async (data) => this.update.emit(data),
-        },
+    const result = await this.modalService.selectModal({
+      header: "Změnit aktivitu",
+      buttonText: "Uložit",
+      values: [
+        { label: "Aktivní", value: true },
+        { label: "Neaktivní", value: false },
       ],
+      value: this.member?.active,
     });
 
-    await alert.present();
+    if (result !== null) this.update.emit({ active: result });
   }
 
   async openRoleChangeForm() {
-    const alert = await this.alertController.create({
+    const role = await this.modalService.selectModal<MemberRolesEnum>({
       header: "Změnit roli",
-      inputs: Object.entries(MemberRoles).map(([id, role]) => ({
-        name: "role",
-        type: "radio",
+      buttonText: "Uložit",
+      values: Object.entries(MemberRoles).map(([id, role]) => ({
         label: role.title,
-        value: id,
+        value: id as MemberRolesEnum,
         checked: this.member?.role === id,
       })),
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Uložit",
-          handler: async (data) => this.update.emit(data),
-        },
-      ],
+      value: this.member?.role,
     });
 
-    await alert.present();
+    if (role !== null) this.update.emit({ role });
   }
 
   async openGroupChangeForm() {
     const groups = await this.api.members.listGroups({ active: true }).then((res) => res.data);
     groups.sort((a, b) => a.shortName.localeCompare(b.shortName, "cs", { numeric: true }));
 
-    const inputs: AlertInput[] = groups.map((g) => ({
-      name: "groupId",
-      type: "radio",
-      value: g.id,
-      label: g.name,
-      checked: this.member?.groupId === g.id,
-    }));
-
-    const alert = await this.alertController.create({
+    const group = await this.modalService.selectModal({
       header: "Změnit skupinu",
-      inputs,
-      buttons: [
-        {
-          text: "Zrušit",
-          role: "cancel",
-        },
-        {
-          text: "Uložit",
-          handler: async (data) => this.update.emit({ groupId: data }),
-        },
-      ],
+      buttonText: "Uložit",
+      values: groups.map((g) => ({ label: g.name ?? g.shortName, value: g.id })),
+      value: this.member?.groupId,
     });
 
-    await alert.present();
+    if (group !== null) this.update.emit({ groupId: group });
   }
 }

frontend/src/app/modules/members/pages/members-view/members-view.component.ts

@@ -70,12 +70,17 @@ export class MembersViewComponent implements OnInit, ViewWillEnter, ViewWillLeav
 
     const toast = await this.toastService.toast("Ukládám...");
 
-    await this.api.members.updateMember(this.member.id, data);
+    try {
+      await this.api.members.updateMember(this.member.id, data);
 
-    await this.loadMember(this.member.id);
+      await this.loadMember(this.member.id);
 
-    toast.dismiss();
-    this.toastService.toast("Uloženo.");
+      toast.dismiss();
+      this.toastService.toast("Uloženo.");
+    } catch (e) {
+      toast.dismiss();
+      this.toastService.toast("Chyba při ukládání.", { color: "danger" });
+    }
   }
 
   async delete() {