forked from ttc/micro-frontend
first
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
:host {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh; /* ครอบเต็มหน้าจอ */
|
||||
overflow: hidden; /* ปิด scroll bar */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column; /* ✅ แก้ตรงนี้ จาก row → column */
|
||||
align-items: center; /* ✅ จัดให้อยู่กลางแนวนอน */
|
||||
justify-content: center; /* ✅ จัดให้อยู่กลางแนวตั้ง */
|
||||
text-align: center; /* ✅ ให้ข้อความตรงกลาง */
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<div class="justify-content-center flex-column">
|
||||
<!-- <h2>Login | เข้าสู่ระบบ ({{ mode }})</h2> -->
|
||||
@if (mode == "default") {
|
||||
<app-login-page [mode]="mode" (signedIn)="onSignInSubmit($event)"></app-login-page>
|
||||
} @else if(mode == "forgot-password"){
|
||||
<app-login-forgot (otpEventSubmit)="onOtpSendSubmit($event)" (otpVerifyEventSubmit)="onVerifySubmit($event)"></app-login-forgot>
|
||||
}
|
||||
<!-- @else {
|
||||
|
||||
} -->
|
||||
</div>
|
||||
@@ -0,0 +1,140 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { GeneralService } from '../../services/generalservice';
|
||||
import { LoginForgotComponent } from '../../../app/component/login-forgot/login-forgot.component';
|
||||
import { LoginPageComponent } from '../../../app/component/login-page/login-page.component';
|
||||
import { finalize } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login-content',
|
||||
standalone: false,
|
||||
templateUrl: './login-content.component.html',
|
||||
styleUrl: './login-content.component.css'
|
||||
})
|
||||
export class LoginContentComponent implements OnInit {
|
||||
@ViewChild(LoginForgotComponent) loginForgotComponent!: LoginForgotComponent;
|
||||
@ViewChild(LoginPageComponent) loginPageComponent!: LoginPageComponent;
|
||||
mode: 'forgot-password' | 'default' = 'default';
|
||||
|
||||
constructor(
|
||||
private generalService: GeneralService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
let param = this.route.snapshot.paramMap.get('mode');
|
||||
|
||||
if (param === 'forgot-password') {
|
||||
this.mode = 'forgot-password';
|
||||
} else {
|
||||
// this.router.navigate(['/login']); // This can cause navigation loops
|
||||
this.mode = 'default';
|
||||
}
|
||||
}
|
||||
|
||||
onSignInSubmit(value: any){
|
||||
const uri = '/api/login/login';
|
||||
const request = {
|
||||
username: value.username,
|
||||
password: value.password
|
||||
};
|
||||
|
||||
if (this.loginPageComponent) {
|
||||
this.loginPageComponent.busy = true;
|
||||
this.loginPageComponent.message = '';
|
||||
}
|
||||
|
||||
this.generalService.postRequest(uri, request)
|
||||
.pipe(
|
||||
finalize(() => {
|
||||
if (this.loginPageComponent) {
|
||||
this.loginPageComponent.busy = false;
|
||||
}
|
||||
})
|
||||
).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200' && result.data?.token) {
|
||||
this.generalService.trowApi(result);
|
||||
localStorage.setItem('access_token', result.data.token);
|
||||
this.router.navigate(['main/dashboard']);
|
||||
} else {
|
||||
const errorMessage = result.message_th || result.message || 'Sign-in failed.';
|
||||
if (this.loginPageComponent) {
|
||||
this.loginPageComponent.message = errorMessage;
|
||||
}
|
||||
this.generalService.trowApi(result);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
const errorMessage = error?.error?.message_th || error?.error?.message || 'An error occurred.';
|
||||
if (this.loginPageComponent) {
|
||||
this.loginPageComponent.message = errorMessage;
|
||||
}
|
||||
this.generalService.trowApi(error.error || { message_th: 'เกิดข้อผิดพลาดไม่ทราบสาเหตุ' });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onOtpSendSubmit(value: any){
|
||||
let uri = '/api/login/otp/send';
|
||||
let request = {
|
||||
email: value.email
|
||||
// otp: value.otp
|
||||
}
|
||||
|
||||
this.loginForgotComponent.isLoading = true;
|
||||
this.generalService.postRequest(uri, request)
|
||||
.pipe(
|
||||
// ✅ finalize จะทำงานทุกกรณี (ทั้ง success/error)
|
||||
finalize(() => {
|
||||
this.loginForgotComponent.isLoading = false;
|
||||
})
|
||||
).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
this.generalService.trowApi(result);
|
||||
console.log(`✅ OTP ส่งไปที่ ${value.email}`);
|
||||
} else {
|
||||
console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
this.loginForgotComponent.isSendOtp = false;
|
||||
this.loginForgotComponent.isLoading = false;
|
||||
this.generalService.trowApi(error);
|
||||
console.error('❌ Error sending OTP:', error);
|
||||
},
|
||||
complete: () => {
|
||||
this.loginForgotComponent.isLoading = false;
|
||||
this.loginForgotComponent.isSendOtp = true;
|
||||
console.log('📨 OTP send request completed');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onVerifySubmit(value: any){
|
||||
let uri = '/api/login/otp/verify';
|
||||
let request = {
|
||||
email: value.email,
|
||||
otp: value.otp
|
||||
}
|
||||
this.generalService.postRequest(uri, request).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200') {
|
||||
console.log(`OTP ส่งไปยืนยันสำเร็จ`);
|
||||
} else {
|
||||
console.warn('⚠️ ไม่สามารถส่ง OTP ได้:', result.message_th);
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('❌ Error sending OTP:', error);
|
||||
},
|
||||
complete: () => {
|
||||
this.router.navigate(['/login']);
|
||||
console.log('📨 OTP send request completed');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<app-main-dashboard></app-main-dashboard>
|
||||
@@ -0,0 +1,95 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { ChartConfiguration, ChartOptions } from 'chart.js';
|
||||
import { BaseChartDirective } from 'ng2-charts';
|
||||
import { GeneralService } from '../../services/generalservice';
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-dashboard-content',
|
||||
standalone: false,
|
||||
templateUrl: './main-dashboard-content.component.html',
|
||||
styleUrls: ['./main-dashboard-content.component.css']
|
||||
})
|
||||
export class MainDashboardContentComponent implements OnInit {
|
||||
@ViewChild(BaseChartDirective) chart?: BaseChartDirective;
|
||||
|
||||
public lineChartData: ChartConfiguration<'line'>['data'] = {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
data: [],
|
||||
label: 'Revenue',
|
||||
fill: true,
|
||||
tension: 0.5,
|
||||
borderColor: 'rgba(75,192,192,1)',
|
||||
backgroundColor: 'rgba(75,192,192,0.2)'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
public lineChartOptions: ChartOptions<'line'> = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Revenue Summary - Last 6 Months'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
constructor(private generalService: GeneralService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.fetchChartData();
|
||||
}
|
||||
|
||||
fetchChartData(): void {
|
||||
// NOTE: Using a placeholder endpoint as the actual one was not provided.
|
||||
const uri = '/api/dashboard/summary-last-6-months';
|
||||
|
||||
this.generalService.getRequest(uri).subscribe({
|
||||
next: (result: any) => {
|
||||
if (result.code === '200' && result.data) {
|
||||
this.processChartData(result.data);
|
||||
} else {
|
||||
console.warn('Could not fetch chart data:', result.message_th);
|
||||
// Optionally, display placeholder data or an error message
|
||||
this.setupPlaceholderData();
|
||||
}
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('Error fetching chart data:', error);
|
||||
// Display placeholder data on error to show the graph structure
|
||||
this.setupPlaceholderData();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
processChartData(data: any[]): void {
|
||||
const labels = data.map(item => item.month);
|
||||
const revenues = data.map(item => item.revenue);
|
||||
|
||||
this.lineChartData.labels = labels;
|
||||
this.lineChartData.datasets[0].data = revenues;
|
||||
|
||||
this.chart?.update();
|
||||
}
|
||||
|
||||
setupPlaceholderData(): void {
|
||||
// This function is called if the API fails, to show a sample graph.
|
||||
const labels = ['January', 'February', 'March', 'April', 'May', 'June'];
|
||||
const revenues = [1200, 1900, 3000, 5000, 2300, 3200]; // Sample data
|
||||
|
||||
this.lineChartData.labels = labels;
|
||||
this.lineChartData.datasets[0].data = revenues;
|
||||
|
||||
this.chart?.update();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.layout {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
.main-container {
|
||||
flex: 1;
|
||||
background: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
<!-- Sidebar (เฉพาะ main) -->
|
||||
<app-sidebar></app-sidebar>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 overflow-y-auto bg-gray-50 text-gray-900">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-sidebar-content',
|
||||
standalone: false,
|
||||
templateUrl: './sidebar-content.component.html',
|
||||
styleUrl: './sidebar-content.component.css'
|
||||
})
|
||||
export class SidebarContentComponent {
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user