dialog-subscription

sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.html

@@ -127,6 +127,7 @@
             <p-button
                 class="*:w-24"
                 severity="primary"
+                (click)="openDialog(building)"
                 [label]="
                     'enterprise.buildings.overview.btn.activate' | translate
                 "

sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.ts

@@ -1,15 +1,19 @@
 import {AfterViewInit, Component, ComponentRef} from '@angular/core';
 import {Router} from '@angular/router';
 import * as L from 'leaflet';
-import {takeUntil} from 'rxjs';
+import {forkJoin, takeUntil} from 'rxjs';
 import {UUID} from '../../../../../types/uuid';
 import {AppRoutingConstants} from '../../../../app-routing.constant';
 import {BuildingService} from '../../../../services/building.service';
 import {SubscriptionAwareComponent} from '../../../core/subscription-aware.component';
-import {Building} from '../../models/enterprise.dto';
+import {Building, BuildingDetails} from '../../models/enterprise.dto';
 import {PopupService} from '../../services/popup.service';
 import {BuildingPopupMarkerComponent} from '../building-popup-marker/building-popup-marker.component';
-
+import {BuildingSubcriptionDialogComponent} from '../../../shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component';
+import {DialogService, DynamicDialogRef} from 'primeng/dynamicdialog';
+import {WalletService} from '../../services/wallet.service';
+import {MessageService} from 'primeng/api';
+import {TranslateService} from '@ngx-translate/core';
 const iconRetinaUrl = 'assets/marker-icon-2x.png';
 const iconUrl = 'assets/marker-icon.png';
 const shadowUrl = 'assets/marker-shadow.png';
@@ -44,6 +48,10 @@ export class BuildingsComponent
   extends SubscriptionAwareComponent
   implements AfterViewInit
 {
+  balance: number = 0;
+  totalCredit: number = 0;
+  selectedBuildingDetails: BuildingDetails | null = null;
+  ref: DynamicDialogRef | undefined;
   addBuildingLocation: boolean = false;
   buildingLocation: MapLocation | null = null;
   viewMode: ViewMode = ViewMode.MAP;
@@ -59,7 +67,11 @@ export class BuildingsComponent
   constructor(
     private readonly router: Router,
     private readonly buildingService: BuildingService,
-    private readonly popupService: PopupService
+    private readonly translate: TranslateService,
+    private readonly popupService: PopupService,
+    public dialogService: DialogService,
+    private readonly walletService: WalletService,
+    private readonly messageService: MessageService
   ) {
     super();
   }
@@ -87,6 +99,40 @@ export class BuildingsComponent
     return this.viewMode === ViewMode.LIST;
   }
 
+  openDialog(building: Building): void {
+    forkJoin({
+      details: this.buildingService.getBuildingDetails(building.id),
+      balance: this.walletService.getWalletBalance()
+    }).subscribe(({details, balance}) => {
+      // Update your component properties with the fetched data
+      this.selectedBuildingDetails = details;
+      this.balance = balance;
+      this.ref = this.dialogService.open(BuildingSubcriptionDialogComponent, {
+        width: '50rem',
+        modal: true,
+        data: {
+          selectedBuildingDetails: this.selectedBuildingDetails,
+          balance: this.balance,
+          totalCredit: this.totalCredit
+        }
+      });
+
+      this.ref.onClose.subscribe(result => {
+        if (result === 'buy') {
+          this.messageService.add({
+            severity: 'success',
+            summary: this.translate.instant(
+              'admin.packageCredit.message.success.summary'
+            ),
+            detail: this.translate.instant(
+              'admin.packageCredit.message.success.detail'
+            )
+          });
+        }
+      });
+    });
+  }
+
   onViewModeChanged(): void {
     this.fetchBuilding();
   }

sep490-frontend/src/app/modules/enterprise/models/enterprise.dto.ts

@@ -1,4 +1,5 @@
 import {BaseDTO} from '../../shared/models/models';
+import {UUID} from '../../../../types/uuid';
 
 export interface Building extends BaseDTO {
   name: string;
@@ -21,3 +22,9 @@ export interface CreditPackage extends BaseDTO {
   numberOfCredits: number;
   price: number;
 }
+
+export interface Subscription extends BaseDTO {
+  numberOfMonths: number;
+  numberOfDevices: number;
+  idBuilding: UUID;
+}

sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.html

@@ -0,0 +1,128 @@
+<div class="p-dialog-header">
+    <div class="inline-flex items-center justify-center gap-2">
+        <p-avatar
+            image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp"
+            class="flex items-center justify-center mr-2"
+            size="large"
+        />
+        <span class="font-bold whitespace-nowrap">{{
+            "dialog.subscription.header.title" | translate
+        }}</span>
+    </div>
+</div>
+<div class="p-dialog-content">
+    <div
+        class="flex flex-col lg:flex-row items-center justify-between px-4 border-primary border mb-4"
+    >
+        <div class="flex flex-col gap-5 p-5 items-center lg:items-start">
+            <span class="text-surface-500 dark:text-surface-400 block"
+                >{{ "dialog.subscription.body.name" | translate }}:
+                {{ data.selectedBuildingDetails?.name }}</span
+            >
+            <span class="text-surface-500 dark:text-surface-400 block"
+                >{{ "dialog.subscription.body.numberDevices" | translate }}:
+                {{ data.selectedBuildingDetails?.numberOfDevices }}</span
+            >
+        </div>
+        <span class="text-primary block mb-8 lg:0 lg:pr-12"
+            >{{ "purchaseCredit.currentBalance" | translate }}:
+            {{ data.balance }}</span
+        >
+    </div>
+
+    <form
+        [formGroup]="formGroup"
+        class="grid lg:grid-cols-2 px-4 pt-4 gap-4 justify-between mt-2"
+    >
+        <div class="mb-4 block" errorMessages>
+            <div class="flex items-center gap-2 justify-evenly mb-4">
+                <label class="font-semibold w-40">{{
+                    "dialog.subscription.body.numberMonth" | translate
+                }}</label>
+                <p-inputnumber
+                    id="numberOfMonths"
+                    type="number"
+                    formControlName="numberOfMonths"
+                    [showButtons]="true"
+                    [step]="1"
+                    buttonLayout="horizontal"
+                    spinnerMode="horizontal"
+                    inputId="horizontal"
+                    [inputStyle]="{ width: '4rem' }"
+                >
+                    <ng-template #incrementbuttonicon>
+                        <span class="pi pi-plus"></span>
+                    </ng-template>
+                    <ng-template #decrementbuttonicon>
+                        <span class="pi pi-minus"></span>
+                    </ng-template>
+                </p-inputnumber>
+            </div>
+            <div class="items-center justify-center flex">
+                <form-field-error></form-field-error>
+            </div>
+        </div>
+        <div class="mb-2 block" errorMessages>
+            <div class="flex items-center gap-2 justify-evenly mb-4">
+                <label class="font-semibold w-44">{{
+                    "dialog.subscription.body.numberMaxDevice" | translate
+                }}</label>
+                <p-inputnumber
+                    id="numberOfDevices"
+                    type="number"
+                    formControlName="numberOfDevices"
+                    [showButtons]="true"
+                    [step]="100"
+                    buttonLayout="horizontal"
+                    spinnerMode="horizontal"
+                    inputId="horizontal"
+                    [inputStyle]="{ width: '4rem' }"
+                >
+                    <ng-template #incrementbuttonicon>
+                        <span class="pi pi-plus"></span>
+                    </ng-template>
+                    <ng-template #decrementbuttonicon>
+                        <span class="pi pi-minus"></span>
+                    </ng-template>
+                </p-inputnumber>
+            </div>
+            <div class="items-center justify-center flex">
+                <form-field-error></form-field-error>
+            </div>
+        </div>
+    </form>
+    <div class="flex flex-col p-4 gap-8">
+        <span class="text-surface-500 dark:text-surface-400 block"
+            >{{ "dialog.subscription.body.totalCredit" | translate }}:
+            {{ data.totalCredit }}</span
+        >
+        <div class="flex flex-row gap-1 items-center">
+            <p-checkbox [(ngModel)]="checked" [binary]="true" />
+            <label class="ml-2">{{
+                "dialog.subscription.body.confirm"
+                    | translate
+                        : {
+                              numberOfMonths:
+                                  formGroup.get("numberOfMonths")?.value,
+                              numberOfDevices:
+                                  formGroup.get("numberOfDevices")?.value,
+                          }
+            }}</label>
+        </div>
+    </div>
+</div>
+<div class="p-dialog-footer">
+    <p-button
+        label="{{ 'dialog.subscription.footer.button.cancel' | translate }}"
+        [text]="true"
+        severity="primary"
+        [outlined]="true"
+        (click)="closeDialog()"
+    />
+    <p-button
+        label="{{ 'dialog.subscription.footer.button.buy' | translate }}"
+        severity="primary"
+        [disabled]="!checked"
+        (click)="buy()"
+    />
+</div>

sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.ts

@@ -0,0 +1,69 @@
+import {Component} from '@angular/core';
+import {AbstractFormComponent} from '../../form/abstract-form-component';
+import {Subscription} from '../../../../enterprise/models/enterprise.dto';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  Validators
+} from '@angular/forms';
+import {HttpClient} from '@angular/common/http';
+import {MessageService} from 'primeng/api';
+import {TranslateService} from '@ngx-translate/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {DynamicDialogConfig, DynamicDialogRef} from 'primeng/dynamicdialog';
+
+@Component({
+  selector: 'app-building-subcription-dialog',
+  templateUrl: './building-subcription-dialog.component.html',
+  styleUrl: './building-subcription-dialog.component.css'
+})
+export class BuildingSubcriptionDialogComponent extends AbstractFormComponent<Subscription> {
+  data: any;
+  checked: boolean = false;
+  protected readonly formStructure = {
+    id: new FormControl(''),
+    version: new FormControl(null),
+    numberOfMonths: new FormControl(0, {
+      nonNullable: true,
+      validators: [Validators.min(1), Validators.max(100), Validators.required]
+    }),
+    numberOfDevices: new FormControl(0, {
+      nonNullable: true,
+      validators: [Validators.min(100), Validators.required]
+    }),
+    idBuilding: new FormControl('')
+  };
+  constructor(
+    httpClient: HttpClient,
+    formBuilder: FormBuilder,
+    notificationService: MessageService,
+    translate: TranslateService,
+    private readonly router: Router,
+    private readonly activatedRoute: ActivatedRoute,
+    public ref: DynamicDialogRef,
+    public config: DynamicDialogConfig
+  ) {
+    super(httpClient, formBuilder, notificationService, translate);
+    this.data = config.data;
+  }
+
+  closeDialog(): void {
+    this.ref.close();
+  }
+  buy(): void {
+    // Handle the buy logic here before closing, if necessary.
+    this.ref.close('buy');
+  }
+  protected initializeData(): void {}
+
+  protected initializeFormControls(): {[p: string]: AbstractControl} {
+    return this.formStructure;
+  }
+
+  protected onSubmitFormDataSuccess(): void {}
+
+  protected submitFormDataUrl(): string {
+    return '';
+  }
+}

sep490-frontend/src/app/modules/shared/shared.module.ts

@@ -43,6 +43,9 @@ import {ErrorMessagesDirective} from './directives/error-messages.directive';
 import {FormFieldErrorDirective} from './directives/form-field-error.directive';
 import {TranslateParamsPipe} from './pipes/translate-params.pipe';
 import {ModalProvider} from './services/modal-provider';
+import {BuildingSubcriptionDialogComponent} from './components/dialog/building-subcription-dialog/building-subcription-dialog.component';
+import {InputNumber} from 'primeng/inputnumber';
+import {Checkbox} from 'primeng/checkbox';
 
 const primeNgModules = [
   AccordionModule,
@@ -96,9 +99,10 @@ const commons = [
     FormFieldErrorDirective,
     FormFieldErrorComponent,
     PaymentStatusComponent,
-    CardTemplateComponent
+    CardTemplateComponent,
+    BuildingSubcriptionDialogComponent
   ],
-  imports: [...commons, ...primeNgModules],
+  imports: [...commons, ...primeNgModules, InputNumber, Checkbox],
   exports: [
     ...commons,
     ...primeNgModules,
@@ -109,7 +113,8 @@ const commons = [
     FormFieldErrorDirective,
     FormFieldErrorComponent,
     PaymentStatusComponent,
-    CardTemplateComponent
+    CardTemplateComponent,
+    BuildingSubcriptionDialogComponent
   ],
   providers: [DatePipe, ModalProvider]
 })

sep490-frontend/src/app/services/building.service.ts

@@ -43,6 +43,8 @@ export class BuildingService {
               return {
                 ...building,
                 address: 'Avenue Louis-CASAÏ 18, 1209 Genève',
+                // can add field address at BE => use api goong map convert from (lat ,lng) to address => save address db
+                // https://docs.goong.io/rest/geocode/
                 validFromInclusive: new Date(),
                 validToInclusive: new Date(
                   new Date().getTime() + Math.random() * 1e12

sep490-frontend/src/assets/i18n/en.json

@@ -233,5 +233,26 @@
       }
     }
   }
-}
+},
+  "dialog": {
+    "subscription": {
+        "header": {
+          "title": "Buy Subscription"
+        },
+      "body": {
+        "name": "Name",
+        "numberDevices": "Current number of devices",
+        "numberMonth": "Number of months",
+        "numberMaxDevice": "Maximum number of devices",
+        "totalCredit": "Total",
+        "confirm": "Confirm subscription {{numberOfMonths}} months and {{numberOfDevices}} devices"
+      },
+      "footer": {
+        "button": {
+          "buy" : "Buy",
+          "cancel": "Cancel"
+        }
+      }
+    }
+  }
 }