Kịch bản demo
📁 Terminal Commands Demo
- Context: @src/app/pages/resources-type/resources-type.component.html
# Create a new empty component named update-resource-type using terminal command
# Tạo một component rỗng mới tên là update-resource-type sử dụng terminal command
ng generate component pages/update-resource-type
# Delete the component created above using terminal command
# Xóa component đã tạo ở trên sử dụng terminal command
ng destroy component pages/update-resource-type
# Start Angular server using terminal command
# Khởi động server Angular sử dụng terminal command
ng serve
✨ Tự động hoàn thành mã (Auto-complete Example)
// Sum a + b
sum(a: number, b: number): number {
return a + b;
}
// Subtract a - b
subtract(a: number, b: number): number {
return a - b;
}
// Multiply a * b
multiply(a: number, b: number): number {
return a * b;
}
// Divide a / b
divide(a: number, b: number): number {
return a / b;
}
// Import Test:
private apiHandlerService: ApiHandlerService
🔍 Rà soát & Tối ưu hóa Mã
- Context: @src/app/pages/auto-config
// Before Optimization:
// Optimize this code
addConfig() {
if (this.validateSubmitData()) {
const { selectedLevel, selectedWarningType, selectedProcess } = this.formGroup.controls;
const submitData = {
processId: selectedProcess.value?.id,
fieldId: selectedWarningType.value?.id,
priorityId: selectedLevel.value?.id,
};
this.dialogForm.loading = true;
this.autoConfigurationService.createConfiguration(submitData)
.pipe(finalize(() => this.dialogForm.loading = false))
.subscribe({
next: (res: CommonResponse) => {
this.apiHandlerService.handleSuccess(res, () => {
this.dialogForm.visible = false;
this.getTableData();
}, 201);
}
});
}
}
updateConfig() {
if (this.validateSubmitData()) {
const { selectedLevel, selectedWarningType, selectedProcess } =
this.formGroup.controls;
const submitData = {
processId: selectedProcess.value?.id,
fieldId: selectedWarningType.value?.id,
priorityId: selectedLevel.value?.id,
};
this.dialogForm.loading = true;
this.autoConfigurationService
.updateConfiguration(submitData, this.dialogForm.data.id)
.pipe(finalize(() => this.dialogForm.loading = false))
.subscribe({
next: (res: CommonResponse) => {
this.apiHandlerService.handleSuccess(
res, () => {
this.dialogForm.visible = false;
this.getTableData();
}, 200,
);
},
});
}
}
// After Optimization:
/**
* Common method to handle both create and update operations
* @param isUpdate Whether this is an update operation
*/
private handleConfigSubmit(isUpdate: boolean = false) {
if (!this.validateSubmitData()) return;
const { selectedLevel, selectedWarningType, selectedProcess } = this.formGroup.controls;
const submitData = {
processId: selectedProcess.value?.id,
fieldId: selectedWarningType.value?.id,
priorityId: selectedLevel.value?.id,
};
this.dialogForm.loading = true;
const request$ = isUpdate
? this.autoConfigurationService.updateConfiguration(submitData, this.dialogForm.data.id)
: this.autoConfigurationService.createConfiguration(submitData);
request$
.pipe(finalize(() => this.dialogForm.loading = false))
.subscribe({
next: (res: CommonResponse) => {
this.apiHandlerService.handleSuccess(res, () => {
this.dialogForm.visible = false;
this.getTableData();
}, isUpdate ? 200 : 201);
}
});
}
addConfig() {
this.handleConfigSubmit(false);
}
updateConfig() {
this.handleConfigSubmit(true);
}
⚠ Nhận biết ngữ cảnh, hỗ trợ nhiều tệp
- Giải quyết Race Condition bằng Angular Route Resolver
- Context: feature.component.ts (174-186)
- Prompt:
this code makes racing conditions, sometimes table display data before filter, using resolve route in angular for solving problem
- Java: Kiểm tra điểm nằm trong đa giác
- Prompt:
Using Java, create a class that determines whether a point lies inside or outside a polygon. Each class should be placed in its own file. Additionally, write comprehensive unit tests to verify the implementation.
📃 Viết tài liệu & Giải thích mã
- Context: feature.component.ts
- Prompt:
Document by comment and explain this code
🔧 Backend APIs
- Context: @backend/src/api/room
Implement a set of RESTful APIs for room management, ensuring consistency with the existing project architecture. Each room entity should include title and description fields. Add a RoomService to handle all routing and business logic related to room operations. Create a RoomRepository along with a model class to manage data access and persistence. Define the necessary input and output schemas to validate and structure API requests and responses, ensuring alignment with the current schema definition approach used in the project. The implementation should follow the current project's modular structure and naming conventions for seamless integration and maintainability.
The room router should call the RoomService to handle features.
Please add room router to app router
🎨 Chuyển đổi thiết kế từ Figma
-
Figma: Figma COS
-
Hướng dẫn: Xem video chuyển Figma sang HTML/CSS
-
Prompt:
Please replicate the design while maintaining the exact layout, proportions, and visual style: https://www.figma.com/design/qdg8XRRqiAM6ofGsRaqgcd/COS---Nam-0?node-id=1669-67323&t=kHk3iYEyS4WGJCfb-0
- Xóa bộ nhớ cache của npx
npx clear-npx-cache