fix: display email and mobile of member

bosancz · Mar 31, 2024 · ac1bc6d · ac1bc6d
1 parent 31b88e5
commit ac1bc6d
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 73 deletions.
diff --git a/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.html b/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.html
@@ -1,4 +1,4 @@
-<h4>Kontakty</h4>
+<h4>Kontakty rodiče</h4>
 
 @for (contact of contacts; track $index) {
   <bo-card class="contact mb-3">
@@ -54,22 +54,3 @@ <h4>Kontakty</h4>
 <ion-buttons class="mt-3 justify-content-center">
   <bo-add-button (click)="openContactForm(null)">Přidat kontakt</bo-add-button>
 </ion-buttons>
-
-<h4 class="mt-4">Adresa</h4>
-<bo-card class="address">
-  <bo-card-content>
-    <ion-skeleton-text *ngIf="member === undefined" [animated]="true"></ion-skeleton-text>
-
-    <ion-list *ngIf="member" class="selectable" lines="none">
-      <ion-item [button]="true" [detail]="false">
-        <ion-label *ngIf="getFullAddress(member)">{{ getFullAddress(member) }}</ion-label>
-        <ion-label *ngIf="!getFullAddress(member)"><em>Adresa není vyplněna</em></ion-label>
-
-        <ion-buttons slot="end">
-          <bo-copy-button [text]="getFullAddress(member)"></bo-copy-button>
-          <bo-edit-button (click)="openAddressForm()"></bo-edit-button>
-        </ion-buttons>
-      </ion-item>
-    </ion-list>
-  </bo-card-content>
-</bo-card>
diff --git a/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.scss b/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.scss
@@ -5,9 +5,3 @@
 ion-list {
   padding: 0;
 }
-
-.address {
-  ion-label {
-    white-space: pre-wrap;
-  }
-}
diff --git a/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.ts b/frontend/src/app/modules/members/components/member-contacts/member-contacts.component.ts
@@ -37,6 +37,76 @@ export default class MemberContactsComponent implements OnChanges {
     }
   }
 
+  async editAddress() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit adresu",
+      inputs: {
+        addressStreet: {
+          type: "text",
+          placeholder: "Ulice",
+          value: this.member?.addressStreet,
+        },
+        addressStreetNo: {
+          type: "text",
+          placeholder: "Číslo popisné",
+          value: this.member?.addressStreetNo,
+        },
+        addressCity: {
+          type: "text",
+          placeholder: "Město",
+          value: this.member?.addressCity,
+        },
+        addressPostalCode: {
+          type: "text",
+          placeholder: "PSČ",
+          value: this.member?.addressPostalCode,
+        },
+        addressCountry: {
+          type: "text",
+          placeholder: "Země",
+          value: this.member?.addressCountry,
+        },
+      },
+    });
+
+    if (data) this.update.emit(data);
+  }
+
+  getFullAddress(member: MemberResponseWithLinks) {
+    const addressLines = [
+      `${member.addressStreet ?? ""}${member.addressStreetNo ? ` ${member.addressStreetNo}` : ""}`,
+      member.addressCity,
+      member.addressPostalCode,
+    ];
+
+    if (member.addressCountry) {
+      addressLines.push(member.addressCountry);
+    }
+    return addressLines.filter((line) => !!line).join("\n");
+  }
+
+  async editMobile() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit telefonní číslo",
+      inputs: {
+        mobile: { type: "tel", placeholder: "Telefonní číslo", value: this.member?.mobile },
+      },
+    });
+
+    if (data !== null) this.update.emit(data);
+  }
+
+  async editEmail() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit email",
+      inputs: {
+        email: { type: "email", placeholder: "Email", value: this.member?.email },
+      },
+    });
+
+    if (data !== null) this.update.emit(data);
+  }
+
   async openContactForm(contact: MemberContactResponseWithLinks | null) {
     const buttons: AlertButton[] = [
       {
@@ -126,57 +196,16 @@ export default class MemberContactsComponent implements OnChanges {
   }
 
   async deleteContact(contact: MemberContactResponseWithLinks) {
+    if (!this.member) return;
+
     const confirmation = await this.modalService.deleteConfirmationModal(
       `Opravdu chcete smazat kontakt ${contact.title}?`,
     );
-    console.log(confirmation);
-  }
-
-  async openAddressForm() {
-    const data = await this.modalService.inputModal({
-      header: "Upravit adresu",
-      inputs: {
-        addressStreet: {
-          type: "text",
-          placeholder: "Ulice",
-          value: this.member?.addressStreet,
-        },
-        addressStreetNo: {
-          type: "text",
-          placeholder: "Číslo popisné",
-          value: this.member?.addressStreetNo,
-        },
-        addressCity: {
-          type: "text",
-          placeholder: "Město",
-          value: this.member?.addressCity,
-        },
-        addressPostalCode: {
-          type: "text",
-          placeholder: "PSČ",
-          value: this.member?.addressPostalCode,
-        },
-        addressCountry: {
-          type: "text",
-          placeholder: "Země",
-          value: this.member?.addressCountry,
-        },
-      },
-    });
 
-    if (data) this.update.emit(data);
-  }
+    await this.api.members.deleteContact(this.member.id, contact.id);
 
-  getFullAddress(member: MemberResponseWithLinks) {
-    const addressLines = [
-      `${member.addressStreet ?? ""}${member.addressStreetNo ? ` ${member.addressStreetNo}` : ""}`,
-      member.addressCity,
-      member.addressPostalCode,
-    ];
+    await this.loadContacts(this.member.id);
 
-    if (member.addressCountry) {
-      addressLines.push(member.addressCountry);
-    }
-    return addressLines.filter((line) => !!line).join("\n");
+    await this.toastService.toast("Kontakt byl smazán", { color: "danger" });
   }
 }
diff --git a/frontend/src/app/modules/members/components/member-info/member-info.component.html b/frontend/src/app/modules/members/components/member-info/member-info.component.html
@@ -1,4 +1,4 @@
-<h4>Základní informace</h4>
+<h4>Osobní informace</h4>
 
 <ion-list *ngIf="member" class="selectable">
   <bo-item label="Jméno" [editable]="!!member._links.updateMember.allowed" (edit)="editName()">
@@ -12,8 +12,37 @@ <h4>Základní informace</h4>
   <bo-item label="Datum narození" [editable]="!!member._links.updateMember.allowed" (edit)="editBirthday()">
     <ion-label>{{ member.birthday ? (member.birthday | date: "d. M. y") : "-" }}</ion-label>
   </bo-item>
+
+  <bo-item label="Mobil" [editable]="!!member._links.updateMember.allowed" (edit)="editMobile()">
+    <ion-label>{{ member.mobile || "-" }}</ion-label>
+    <bo-icon-button icon="call-outline" [href]="'tel:' + member.mobile" slot="end"></bo-icon-button>
+  </bo-item>
+
+  <bo-item label="Email" [editable]="!!member._links.updateMember.allowed" (edit)="editEmail()">
+    <ion-label>{{ member.email || "-" }}</ion-label>
+    <bo-icon-button icon="mail-outline" [href]="'mailto:' + member.email" slot="end"></bo-icon-button>
+  </bo-item>
 </ion-list>
 
+<h4 class="mt-4">Adresa</h4>
+<bo-card class="address">
+  <bo-card-content>
+    <ion-skeleton-text *ngIf="member === undefined" [animated]="true"></ion-skeleton-text>
+
+    <ion-list *ngIf="member" class="selectable" lines="none">
+      <ion-item [button]="true" [detail]="false">
+        <ion-label *ngIf="getFullAddress(member)">{{ getFullAddress(member) }}</ion-label>
+        <ion-label *ngIf="!getFullAddress(member)"><em>Adresa není vyplněna</em></ion-label>
+
+        <ion-buttons slot="end">
+          <bo-copy-button [text]="getFullAddress(member)"></bo-copy-button>
+          <bo-edit-button (click)="editAddress()"></bo-edit-button>
+        </ion-buttons>
+      </ion-item>
+    </ion-list>
+  </bo-card-content>
+</bo-card>
+
 <h4 class="mt-4">Členství ve skupině</h4>
 <ion-list *ngIf="member" class="selectable">
   <bo-item label="Aktivní" [editable]="!!member._links.updateMember.allowed" (edit)="editActivity()">

diff --git a/frontend/src/app/modules/members/components/member-info/member-info.component.scss b/frontend/src/app/modules/members/components/member-info/member-info.component.scss
@@ -4,3 +4,9 @@ ion-list {
 bo-item {
   --label-width: 120px;
 }
+
+.address {
+  ion-label {
+    white-space: pre-wrap;
+  }
+}
diff --git a/frontend/src/app/modules/members/components/member-info/member-info.component.ts b/frontend/src/app/modules/members/components/member-info/member-info.component.ts
@@ -57,6 +57,76 @@ export class MemberInfoComponent implements OnInit {
     if (data !== null) this.update.emit(data);
   }
 
+  async editMobile() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit telefonní číslo",
+      inputs: {
+        mobile: { type: "tel", placeholder: "Telefonní číslo", value: this.member?.mobile },
+      },
+    });
+
+    if (data !== null) this.update.emit(data);
+  }
+
+  async editEmail() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit email",
+      inputs: {
+        email: { type: "email", placeholder: "Email", value: this.member?.email },
+      },
+    });
+
+    if (data !== null) this.update.emit(data);
+  }
+
+  async editAddress() {
+    const data = await this.modalService.inputModal({
+      header: "Upravit adresu",
+      inputs: {
+        addressStreet: {
+          type: "text",
+          placeholder: "Ulice",
+          value: this.member?.addressStreet,
+        },
+        addressStreetNo: {
+          type: "text",
+          placeholder: "Číslo popisné",
+          value: this.member?.addressStreetNo,
+        },
+        addressCity: {
+          type: "text",
+          placeholder: "Město",
+          value: this.member?.addressCity,
+        },
+        addressPostalCode: {
+          type: "text",
+          placeholder: "PSČ",
+          value: this.member?.addressPostalCode,
+        },
+        addressCountry: {
+          type: "text",
+          placeholder: "Země",
+          value: this.member?.addressCountry,
+        },
+      },
+    });
+
+    if (data) this.update.emit(data);
+  }
+
+  getFullAddress(member: MemberResponseWithLinks) {
+    const addressLines = [
+      `${member.addressStreet ?? ""}${member.addressStreetNo ? ` ${member.addressStreetNo}` : ""}`,
+      member.addressCity,
+      member.addressPostalCode,
+    ];
+
+    if (member.addressCountry) {
+      addressLines.push(member.addressCountry);
+    }
+    return addressLines.filter((line) => !!line).join("\n");
+  }
+
   async editActivity() {
     const result = await this.modalService.selectModal({
       header: "Změnit aktivitu",

diff --git a/frontend/src/app/shared/components/icon-button/icon-button.component.html b/frontend/src/app/shared/components/icon-button/icon-button.component.html
@@ -0,0 +1,4 @@
+<ion-button color="dark" fill="clear" size="small" (click)="onClick($event)">
+  <ion-icon [name]="icon" [slot]="label ? 'start' : 'icon-only'"></ion-icon>
+  {{ label }}
+</ion-button>
diff --git a/frontend/src/app/shared/components/icon-button/icon-button.component.scss b/frontend/src/app/shared/components/icon-button/icon-button.component.scss
@@ -0,0 +1,3 @@
+ion-button {
+  font-size: 10px;
+}
diff --git a/frontend/src/app/shared/components/icon-button/icon-button.component.ts b/frontend/src/app/shared/components/icon-button/icon-button.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "bo-icon-button",
+  templateUrl: "./icon-button.component.html",
+  styleUrl: "./icon-button.component.scss",
+})
+export class IconButtonComponent {
+  @Input() label?: string;
+  @Input() icon?: string;
+  @Input() href?: string;
+
+  constructor() {}
+
+  onClick(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.href) {
+      window.location.href = this.href;
+    }
+  }
+}
diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -44,6 +44,7 @@ import { CopyButtonComponent } from "./components/copy-button/copy-button.compon
 import { DeleteButtonComponent } from "./components/delete-button/delete-button.component";
 import { FilterModalComponent } from "./components/filter-modal/filter-modal.component";
 import { GroupBadgeComponent } from "./components/group-badge/group-badge.component";
+import { IconButtonComponent } from "./components/icon-button/icon-button.component";
 import { ItemComponent } from "./components/item/item.component";
 import { ModalLayoutComponent } from "./components/modal-layout/modal-layout.component";
 import { ModalTemplateComponent } from "./components/modal-template/modal-template.component";
@@ -102,6 +103,7 @@ register();
     RolePipe,
     FilterModalComponent,
     ModalTemplateComponent,
+    IconButtonComponent,
   ],
   exports: [
     FormsModule,
@@ -153,6 +155,7 @@ register();
     DeleteButtonComponent,
     RolePipe,
     ModalTemplateComponent,
+    IconButtonComponent,
   ],
   providers: [DatePipe],
 })