diff --git a/sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.html b/sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.html index 5b37b38a..e47caf50 100644 --- a/sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.html +++ b/sep490-frontend/src/app/modules/enterprise/components/buildings/buildings.component.html @@ -127,6 +127,7 @@ { + // 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(); } diff --git a/sep490-frontend/src/app/modules/enterprise/models/enterprise.dto.ts b/sep490-frontend/src/app/modules/enterprise/models/enterprise.dto.ts index 68ea8254..12dd45cd 100644 --- a/sep490-frontend/src/app/modules/enterprise/models/enterprise.dto.ts +++ b/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; +} diff --git a/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.css b/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.css new file mode 100644 index 00000000..e69de29b diff --git a/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.html b/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.html new file mode 100644 index 00000000..4f218cf8 --- /dev/null +++ b/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.html @@ -0,0 +1,128 @@ +
+
+ + {{ + "dialog.subscription.header.title" | translate + }} +
+
+
+
+
+ {{ "dialog.subscription.body.name" | translate }}: + {{ data.selectedBuildingDetails?.name }} + {{ "dialog.subscription.body.numberDevices" | translate }}: + {{ data.selectedBuildingDetails?.numberOfDevices }} +
+ {{ "purchaseCredit.currentBalance" | translate }}: + {{ data.balance }} +
+ +
+
+
+ + + + + + + + + +
+
+ +
+
+
+
+ + + + + + + + + +
+
+ +
+
+
+
+ {{ "dialog.subscription.body.totalCredit" | translate }}: + {{ data.totalCredit }} +
+ + +
+
+
+
+ + +
diff --git a/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.ts b/sep490-frontend/src/app/modules/shared/components/dialog/building-subcription-dialog/building-subcription-dialog.component.ts new file mode 100644 index 00000000..b7e66b2c --- /dev/null +++ b/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 { + 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 ''; + } +} diff --git a/sep490-frontend/src/app/modules/shared/shared.module.ts b/sep490-frontend/src/app/modules/shared/shared.module.ts index c84cc7ed..9b4840b3 100644 --- a/sep490-frontend/src/app/modules/shared/shared.module.ts +++ b/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] }) diff --git a/sep490-frontend/src/app/services/building.service.ts b/sep490-frontend/src/app/services/building.service.ts index 3fe67e01..2a0ea905 100644 --- a/sep490-frontend/src/app/services/building.service.ts +++ b/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 diff --git a/sep490-frontend/src/assets/i18n/en.json b/sep490-frontend/src/assets/i18n/en.json index 0f34c56d..617dd9f5 100644 --- a/sep490-frontend/src/assets/i18n/en.json +++ b/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" + } + } + } + } } diff --git a/sep490-frontend/src/assets/i18n/vi.json b/sep490-frontend/src/assets/i18n/vi.json index c19a79e4..89677205 100644 --- a/sep490-frontend/src/assets/i18n/vi.json +++ b/sep490-frontend/src/assets/i18n/vi.json @@ -233,6 +233,26 @@ } } } - + }, + "dialog": { + "subscription": { + "header": { + "title": "Mua gói đăng ký" + }, + "body": { + "name": "Tên", + "numberDevices": "Số lượng thiết bị hiện tại", + "numberMonth": "Số tháng", + "numberMaxDevice": "Số lượng thiết bị tối đa", + "totalCredit": "Tổng cộng", + "confirm": "Xác nhận đăng ký {{numberOfMonths}} tháng và {{numberOfDevices}} thiết bị" + }, + "footer": { + "button": { + "buy" : "Mua", + "cancel": "Hủy" + } + } + } } } diff --git a/sep490-frontend/src/assets/i18n/zh.json b/sep490-frontend/src/assets/i18n/zh.json index 737c822c..29067be8 100644 --- a/sep490-frontend/src/assets/i18n/zh.json +++ b/sep490-frontend/src/assets/i18n/zh.json @@ -233,5 +233,26 @@ } } } + }, + "dialog": { + "subscription": { + "header": { + "title": "购买订阅" + }, + "body": { + "name": "姓名", + "numberDevices": "当前设备数量", + "numberMonth": "月份数", + "numberMaxDevice": "最大设备数量", + "totalCredit": "全部的", + "confirm": "确认订阅 {{numberOfMonths}} 个月 和 {{numberOfDevices}} 设备" + }, + "footer": { + "button": { + "buy" : "买", + "cancel": "取消" + } + } + } } }