From 3d63594d4fc2c3504327b8cd1f5d38d516646af2 Mon Sep 17 00:00:00 2001 From: Ryan Ariana Date: Wed, 15 May 2024 18:08:33 +0700 Subject: [PATCH] identitas integrasi api --- package.json | 1 + src/app/app.module.ts | 5 +- src/app/identitas/identitas.page.html | 51 +++++---- src/app/identitas/identitas.page.scss | 4 + src/app/identitas/identitas.page.ts | 108 +++++++++++++++++- .../identitas-service.service.spec.ts | 16 +++ src/app/services/identitas-service.service.ts | 24 ++++ src/environments/environment.prod.ts | 3 +- src/environments/environment.ts | 3 +- 9 files changed, 185 insertions(+), 30 deletions(-) create mode 100644 src/app/services/identitas-service.service.spec.ts create mode 100644 src/app/services/identitas-service.service.ts diff --git a/package.json b/package.json index a16c1a9..4a1324d 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@capacitor/keyboard": "6.0.0", "@capacitor/status-bar": "6.0.0", "@ionic/angular": "^8.0.0", + "@ionic/storage-angular": "^4.0.0", "@swimlane/ngx-charts": "^20.5.0", "ionicons": "^7.0.0", "rxjs": "~7.8.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8bf742f..68a8af8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,13 +3,14 @@ import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; - +import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; +import { IonicStorageModule } from '@ionic/storage-angular'; @NgModule({ declarations: [AppComponent], - imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule], + imports: [BrowserModule,IonicStorageModule.forRoot(), IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule, HttpClientModule], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent], }) diff --git a/src/app/identitas/identitas.page.html b/src/app/identitas/identitas.page.html index 3ecceee..3ac82ec 100644 --- a/src/app/identitas/identitas.page.html +++ b/src/app/identitas/identitas.page.html @@ -16,76 +16,79 @@ Nama - + - Tempat - + Tempat Lahir + + Tanggal Lahir - + + Jenis Kelamin - - Laki-Laki - Perempuan + + Laki-Laki + Perempuan Tinggi Badan (Cm) - + Berat Badan (Kg) - + Suku - + Riwayat Perokok - - Ya - Tidak + + Ya + Tidak Aktivitas/Pekerjaan - + Nomor HP - + Status Pernikahan - - Menikah - Belum Menikah - Janda/Duda + + Menikah + Belum Menikah + Janda/Duda Alamat - + - Tanggal Pengisian Buku Pertamakali - + Tanggal Pengisian Buku Pertama Kali + - Simpan + {{ isEdit ? 'Ubah' : 'Simpan' }} - + \ No newline at end of file diff --git a/src/app/identitas/identitas.page.scss b/src/app/identitas/identitas.page.scss index d80f96c..7489a59 100644 --- a/src/app/identitas/identitas.page.scss +++ b/src/app/identitas/identitas.page.scss @@ -34,4 +34,8 @@ display: flex; justify-content: center; padding: 10px; /* Add padding to ensure it doesn't stick to the bottom */ + } + ion-toast { + --background: green; + --color: white; } \ No newline at end of file diff --git a/src/app/identitas/identitas.page.ts b/src/app/identitas/identitas.page.ts index e0386cc..889d7b6 100644 --- a/src/app/identitas/identitas.page.ts +++ b/src/app/identitas/identitas.page.ts @@ -1,4 +1,7 @@ import { Component, OnInit } from '@angular/core'; +import { Storage } from '@ionic/storage-angular'; +import { ToastController } from '@ionic/angular'; +import { IdentitasServiceService } from '../services/identitas-service.service'; @Component({ selector: 'app-identitas', @@ -6,10 +9,111 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./identitas.page.scss'], }) export class IdentitasPage implements OnInit { + public userData = { + nama: '', + tempat_lahir: '', + tanggal_lahir: '', + jenis_kelamin: '', + tinggi_badan: null, + berat_badan: null, + suku: '', + riwayat_perokok: '', + pekerjaan: '', + nomor_hp: '', + status_pernikahan: '', + alamat: '', + tanggal_pertama: '' + }; + public isEdit = false; + private idIdentitas: number | null = null; - constructor() { } + constructor( + private storage: Storage, + private toastController: ToastController, + private identitasService: IdentitasServiceService + ) {} - ngOnInit() { + async ngOnInit() { + await this.storage.create(); + const id_identitas = await this.storage.get('id_identitas'); + this.idIdentitas = await this.storage.get('id_identitas'); + this.isEdit = !!id_identitas; + if (id_identitas) { + this.identitasService.getIdentitasById(id_identitas).subscribe({ + next: (response) => { + if (response.status === 'success' && response.data) { + this.populateUserData(response.data); + } else { + this.clearUserData(); + this.showToast('No data found for this ID', 'middle', 'warning'); + } + }, + error: async (err) => { + await this.showToast(`Error fetching data: ${err.message}`, 'top', 'danger'); + } + }); + } else { + this.clearUserData(); + } + } + populateUserData(data: any) { + this.userData = { + ...data, + tanggal_lahir: this.formatDate(data.tanggal_lahir), + tanggal_pertama: this.formatDate(data.tanggal_pertama) + }; + console.log(this.userData) + } + formatDate(isoDate: string): string { + return isoDate.split('T')[0]; + } + + clearUserData() { + this.userData = { + nama: '', + tempat_lahir: '', + tanggal_lahir: '', + jenis_kelamin: '', + tinggi_badan: null, + berat_badan: null, + suku: '', + riwayat_perokok: '', + pekerjaan: '', + nomor_hp: '', + status_pernikahan: '', + alamat: '', + tanggal_pertama: '' + }; + } + async showToast(message: string, position: 'top' | 'middle' | 'bottom', color: string) { + const toast = await this.toastController.create({ + message: message, + duration: 2000, + position: position, + color: color + }); + toast.present(); + } + simpanData() { + if (this.isEdit && this.idIdentitas) { + this.identitasService.updateIdentitas(this.idIdentitas, this.userData).subscribe( + response => this.handleResponse(response), + error => this.handleError(error) + ); + } else { + this.identitasService.simpanIdentitas(this.userData).subscribe( + response => this.handleResponse(response), + error => this.handleError(error) + ); + } + } + + handleResponse(response: any) { + this.showToast('Data successfully saved!', 'top', 'success'); + } + + handleError(error: { message: any; }) { + this.showToast(`Error saving data: ${error.message}`, 'top', 'danger'); } } diff --git a/src/app/services/identitas-service.service.spec.ts b/src/app/services/identitas-service.service.spec.ts new file mode 100644 index 0000000..88976c2 --- /dev/null +++ b/src/app/services/identitas-service.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { IdentitasServiceService } from './identitas-service.service'; + +describe('IdentitasServiceService', () => { + let service: IdentitasServiceService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(IdentitasServiceService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/services/identitas-service.service.ts b/src/app/services/identitas-service.service.ts new file mode 100644 index 0000000..cbacb26 --- /dev/null +++ b/src/app/services/identitas-service.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs'; +import { environment } from '../../environments/environment'; + +@Injectable({ + providedIn: 'root' +}) +export class IdentitasServiceService { + + private apiUrl = `${environment.apiUrl}/identitas`; + + constructor(private http: HttpClient) { } + + simpanIdentitas(data: any): Observable { + return this.http.post(this.apiUrl, data); + } + getIdentitasById(id: number): Observable { + return this.http.get(`${this.apiUrl}/${id}`); + } + updateIdentitas(id: number, data: any): Observable { + return this.http.put(`${this.apiUrl}/${id}`, data); + } +} \ No newline at end of file diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 3612073..614bf50 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -1,3 +1,4 @@ export const environment = { - production: true + production: true, + apiUrl: 'https://paijo-api.absys.ninja/api' }; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index f56ff47..0058de9 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -3,7 +3,8 @@ // The list of file replacements can be found in `angular.json`. export const environment = { - production: false + production: false, + apiUrl: 'https://paijo-api.absys.ninja/api' }; /*