Extension Vnresource Generator

Extension này được phát triển bởi Khiem.vo để tự động hóa việc tạo các thành phần Angular theo cấu trúc dự án Vnresource.

📋 Mô tả Extension

Extension này giúp tạo nhanh các thành phần như module, component, form, grid dựa trên cấu trúc đã được định nghĩa sẵn. Sau khi tạo ra, các thành phần này có thể được tích hợp ngay vào dự án Angular mà không cần chỉnh sửa nhiều.

🧩 Cấu trúc Thư mục

template/
  ├── common/             # Chứa các thành phần chung
  ├── generator-component-grid/   # Tạo grid component
  ├── generator-form-detail/      # Tạo form chi tiết
  ├── generator-form-register/    # Tạo form đăng ký
  ├── generator-module-grid/      # Tạo module grid
  │   ├── file-generators/        # Các file generator cho module
  ├── shared-files/               # Các file dùng chung
  └── utils/                      # Các tiện ích

🔄 Luồng Hoạt Động Chính

1. Quy trình xử lý đầu vào

flowchart TD
    A[Nhận tham số đầu vào] --> B[Xử lý tên thành phần]
    B --> C[Chuyển đổi định dạng tên]
    C --> D[Tạo cấu trúc thư mục]
    D --> E[Sinh mã nguồn]

1. Nhận tham số đầu vào:

   • Đường dẫn nơi cần tạo thành phần
   • Tên của thành phần

2. Xử lý tên:

   • Loại bỏ dấu tiếng Việt
   • Chuyển đổi tên thành định dạng kebab-case (nameFile)
   • Chuyển đổi tên thành định dạng PascalCase (nameClass)

3. Xác định API URL dựa trên đường dẫn của dự án

2. Luồng Tạo Thành Phần

flowchart TD
    START[Bắt đầu] --> CHECK{Chọn loại generator}
    CHECK -->|Module Grid| MG[Tạo Module Grid]
    CHECK -->|Component Grid| CG[Tạo Component Grid]
    CHECK -->|Form Detail| FD[Tạo Form Detail]
    CHECK -->|Form Register| FR[Tạo Form Register]
    
    MG --> MG1[Tạo cấu trúc thư mục]
    MG --> MG2[Tạo Module]
    MG --> MG3[Tạo Routing]
    MG --> MG4[Tạo Services]
    MG --> MG5[Tạo Grid Component]
    MG --> MG6[Tạo Container]
    MG --> MG7[Tạo Model]
    MG --> MG8[Tạo API Service]
    MG --> MG9[Tạo Facade]

    CG --> CG1[Tạo Grid Component]
    CG --> CG2[Tạo Base Grid Component]

    FD --> FD1[Tạo Form Detail]

    FR --> FR1[Tạo Form Register]
    
    MG9 --> END[Hoàn thành]
    CG2 --> END
    FD1 --> END
    FR1 --> END

3. Chi tiết module-grid generator

flowchart TB
    A[generate-module.js] --> B[initializeFolders]
    A --> C[generateModule]
    A --> D[generateRouting]
    A --> E[generateService]
    A --> F[generateBaseGrid]
    A --> G[generateApi]
    A --> H[generateFacade]
    A --> I[generateData]
    A --> J[generateModel]
    A --> K[generateGrid]
    A --> L[generateContainer]

    B --> B1[Tạo cấu trúc thư mục module]
    C --> C1[Tạo Module file *.module.ts]
    D --> D1[Tạo Routing file *.routing.ts]
    E --> E1[Tạo Service file *.service.ts]
    F --> F1[Tạo BaseGrid file base-grid-*.component.ts]
    G --> G1[Tạo API file *.api.ts]
    H --> H1[Tạo Facade file *.facade.ts]
    I --> I1[Tạo Data file tab-filter.data.ts]
    J --> J1[Tạo Model file *.model.ts]
    K --> K1[Tạo Grid Component]
    L --> L1[Tạo Container Component]

🔍 Chi tiết các thành phần chính

1. Common (common/common.js)

Module chung chứa:

• Xử lý tham số đầu vào (tên file, đường dẫn)
• Chuyển đổi tên file từ tham số (convertFileName, convertClassName)
• Xác định API URL dựa trên đường dẫn
• Tạo keyScreen cho form đăng ký
• Hàm tạo thư mục

2. Utils (utils/get.util.js)

Cung cấp các tiện ích:

• Xóa dấu tiếng Việt
• Chuyển đổi tên thành định dạng kebab-case (tên file)
• Chuyển đổi tên thành định dạng PascalCase (tên lớp)

3. Generator Module Grid

Tạo một module Angular đầy đủ với các thành phần:

• Module
• Routing
• Service
• API
• Facade
• Model
• Grid Component
• Container Component
• Base Grid Component

4. Generator Component Grid

Tạo một Grid Component độc lập gồm:

• Component Grid
• Base Grid Component
• Template HTML/SCSS

5. Generator Form Detail

Tạo form chi tiết cho thao tác xem/sửa một bản ghi.

6. Generator Form Register

Tạo form đăng ký/tạo mới một bản ghi.

🔧 Cách sử dụng

1. Mở thư mục dự án
2. Nhấp chuột phải vào thư mục muốn tạo thành phần
3. Chọn loại generator từ menu:
   • Generate Module Grid
   • Generate Component Grid
   • Generate Form Detail
   • Generate Form Register
4. Nhập tên thành phần
5. Extension sẽ tự động tạo ra các file cần thiết

📈 Lưu ý khi mở rộng

Khi cần thêm loại generator mới:

1. Tạo thư mục generator-xxx mới trong template
2. Tạo cấu trúc tương tự các generator hiện có
3. Tạo file constants.js, generators và cấu trúc thư mục
4. Cập nhật file extension.js để thêm lựa chọn mới

🛠 Công nghệ sử dụng

• Node.js
• VS Code Extension API
• Template Engine (dựa trên string template)

Developed by Khiem.vo