identitas integrasi api

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",

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],
 })

src/app/identitas/identitas.page.html

@@ -16,76 +16,79 @@
   <ion-list>
     <ion-item>
       <ion-label position="stacked">Nama</ion-label>
-      <ion-input type="text" placeholder="Masukkan Nama"></ion-input>
+      <ion-input type="text" [(ngModel)]="userData.nama" placeholder="Masukkan Nama"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label position="stacked">Tempat</ion-label>
+      <ion-label position="stacked">Tempat Lahir</ion-label>
-      <ion-input type="text" placeholder="Masukkan Tempat Lahir"></ion-input>
+      <ion-input type="text" [(ngModel)]="userData.tempat_lahir" placeholder="Masukkan Tempat Lahir"></ion-input>
     </ion-item>
+
     <ion-item>
       <ion-label position="stacked">Tanggal Lahir</ion-label>
-      <ion-input type="date"></ion-input>
+      <ion-input type="date" [(ngModel)]="userData.tanggal_lahir"></ion-input>
     </ion-item>
+
     <ion-item>
       <ion-label position="stacked">Jenis Kelamin</ion-label>
-      <ion-select placeholder="Pilih Jenis Kelamin">
+      <ion-select [(ngModel)]="userData.jenis_kelamin" placeholder="Pilih Jenis Kelamin">
-        <ion-select-option value="male">Laki-Laki</ion-select-option>
+        <ion-select-option value="L">Laki-Laki</ion-select-option>
-        <ion-select-option value="female">Perempuan</ion-select-option>
+        <ion-select-option value="P">Perempuan</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Tinggi Badan (Cm)</ion-label>
-      <ion-input type="number" placeholder="Masukkan Tinggi Badan"></ion-input>
+      <ion-input type="number" [(ngModel)]="userData.tinggi_badan" placeholder="Masukkan Tinggi Badan"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Berat Badan (Kg)</ion-label>
-      <ion-input type="number" placeholder="Masukkan Berat Badan"></ion-input>
+      <ion-input type="number" [(ngModel)]="userData.berat_badan" placeholder="Masukkan Berat Badan"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Suku</ion-label>
-      <ion-input type="text" placeholder="Masukkan Suku"></ion-input>
+      <ion-input type="text" [(ngModel)]="userData.suku" placeholder="Masukkan Suku"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Riwayat Perokok</ion-label>
-      <ion-select placeholder="Pilih">
+      <ion-select [(ngModel)]="userData.riwayat_perokok" placeholder="Pilih">
-        <ion-select-option value="yes">Ya</ion-select-option>
+        <ion-select-option value="Y">Ya</ion-select-option>
-        <ion-select-option value="no">Tidak</ion-select-option>
+        <ion-select-option value="T">Tidak</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Aktivitas/Pekerjaan</ion-label>
-      <ion-input type="text" placeholder="Masukkan Aktivitas/Pekerjaan"></ion-input>
+      <ion-input type="text" [(ngModel)]="userData.pekerjaan"
+        placeholder="Masukkan Aktivitas/Pekerjaan"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Nomor HP</ion-label>
-      <ion-input type="tel" placeholder="Masukkan Nomor HP"></ion-input>
+      <ion-input type="tel" [(ngModel)]="userData.nomor_hp" placeholder="Masukkan Nomor HP"></ion-input>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Status Pernikahan</ion-label>
-      <ion-select placeholder="Pilih Status">
+      <ion-select [(ngModel)]="userData.status_pernikahan" placeholder="Pilih Status">
-        <ion-select-option value="married">Menikah</ion-select-option>
+        <ion-select-option value="M">Menikah</ion-select-option>
-        <ion-select-option value="single">Belum Menikah</ion-select-option>
+        <ion-select-option value="S">Belum Menikah</ion-select-option>
-        <ion-select-option value="divorced">Janda/Duda</ion-select-option>
+        <ion-select-option value="D">Janda/Duda</ion-select-option>
       </ion-select>
     </ion-item>
 
     <ion-item>
       <ion-label position="stacked">Alamat</ion-label>
-      <ion-input type="text" placeholder="Masukkan Alamat"></ion-input>
+      <ion-input type="text" [(ngModel)]="userData.alamat" placeholder="Masukkan Alamat"></ion-input>
     </ion-item>
 
     <ion-item>
-      <ion-label position="stacked">Tanggal Pengisian Buku Pertamakali</ion-label>
+      <ion-label position="stacked">Tanggal Pengisian Buku Pertama Kali</ion-label>
-      <ion-input type="date"></ion-input>
+      <ion-input type="date" [(ngModel)]="userData.tanggal_pertama"></ion-input>
     </ion-item>
-    <ion-button expand="block" color="primary">Simpan</ion-button>
+    <ion-button expand="block" color="primary" (click)="simpanData()">{{ isEdit ? 'Ubah' : 'Simpan' }}</ion-button>
   </ion-list>
 </ion-content>

src/app/identitas/identitas.page.scss

@@ -35,3 +35,7 @@
     justify-content: center;
     padding: 10px;  /* Add padding to ensure it doesn't stick to the bottom */
   }
+  ion-toast {
+    --background: green;
+    --color: white;
+  }

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');
   }
 
 }

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();
+  });
+});

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<any> {
+    return this.http.post(this.apiUrl, data);
+  }
+  getIdentitasById(id: number): Observable<any> {
+    return this.http.get(`${this.apiUrl}/${id}`);
+  }
+  updateIdentitas(id: number, data: any): Observable<any> {
+    return this.http.put(`${this.apiUrl}/${id}`, data);
+  }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: 'https://paijo-api.absys.ninja/api'
 };

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'
 };
 
 /*