# Component Quản lý AppConfig

## 📋 Tổng quan

Component này cung cấp giao diện quản lý cấu hình ứng dụng (AppConfig) với đầy đủ chức năng CRUD, tìm kiếm, và quản lý cache.

## 🎯 Tính năng

### ✅ Danh sách cấu hình
- Hiển thị danh sách configs với pagination
- Tìm kiếm theo Key/Value
- Lọc theo ngày tạo
- Sắp xếp và phân trang
- Hiển thị thông tin chi tiết: Key, Value, Description, ngày tạo/cập nhật, người cập nhật

### ✅ Thêm/Sửa cấu hình
- Form validation đầy đủ
- Hỗ trợ tạo mới và cập nhật
- Hiển thị thông tin audit (ngày tạo, người tạo, etc.)
- Ràng buộc dữ liệu theo API specification

### ✅ Xóa cấu hình
- Xác nhận trước khi xóa
- Hiển thị tên Key trong dialog xác nhận

### ✅ Reload Cache
- Nút reload cache riêng biệt
- Loading state khi đang reload
- Thông báo kết quả

## 🔧 API Integration

### Endpoints sử dụng:
- `POST /api/AppConfig/Search` - Tìm kiếm với phân trang
- `GET /api/AppConfig/GetById?id={id}` - Lấy theo ID
- `POST /api/AppConfig/CreateOrUpdate` - Tạo/cập nhật
- `DELETE /api/AppConfig/Delete?id={id}` - Xóa
- `POST /api/AppConfig/ReloadCache` - Reload cache

### Data Models:
```typescript
// Search Model
interface SearchAppConfigModel {
  KeyFilter?: string;
  ValueFilter?: string;
  CreatedStart?: Date;
  CreatedEnd?: Date;
  page: number;
  pageSize: number;
}

// Create/Update Model
interface CreateAppConfigModel {
  Id?: number;
  Key: string; // required, max 512 chars
  Value: string; // required, max 1024 chars
  Description?: string; // optional, max 2048 chars
}

// Display Model
interface AppConfigItem {
  Id: number;
  Key: string;
  Value: string;
  Description: string;
  CreatedTime: string;
  UpdatedTime: string;
  CreatedBy: number;
  CreatedByUserName: string;
  UpdatedBy: number;
  UpdatedByUserName: string;
}
```

## 🎨 UI Components

### 1. Trang chính (`index.vue`)
- **Breadcrumb**: Trang chủ > Hệ thống > Cấu hình ứng dụng
- **Search Form**: Tìm kiếm theo Key, Value, ngày tạo
- **Action Buttons**: Thêm mới, Reload Cache
- **Data Table**: Hiển thị danh sách với dropdown actions
- **Pagination**: Phân trang với tùy chọn page size

### 2. Form tạo/sửa (`CreateOrUpdate.vue`)
- **Key Field**: Input với validation pattern, disabled khi edit
- **Value Field**: Textarea với character counter
- **Description Field**: Textarea optional với character counter
- **Audit Info**: Hiển thị thông tin tạo/cập nhật khi edit
- **Action Buttons**: Hủy, Lưu với loading state

## 🔐 Validation Rules

### Key Field:
- Required
- Max 512 characters
- Pattern: `^[A-Za-z0-9._-]+$` (chỉ chữ, số, dấu chấm, gạch dưới, gạch ngang)
- Disabled khi edit (không cho phép thay đổi key)

### Value Field:
- Required
- Max 1024 characters
- Character counter hiển thị

### Description Field:
- Optional
- Max 2048 characters
- Character counter hiển thị

## 🎯 Routing

- **Path**: `/cau-hinh-ung-dung`
- **Name**: `appconfig`
- **Title**: "Cấu hình ứng dụng"

## 📱 Responsive Design

- Form responsive trên mobile
- Table scroll horizontal trên màn hình nhỏ
- Dropdown actions thay vì inline buttons trên mobile

## 🔧 Utilities

### Text Truncation:
```javascript
function truncateText(text, maxLength) {
  if (!text) return '';
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
}
```

### Date Formatting:
```javascript
function formatDate(dateString) {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('vi-VN') + ' ' + 
         date.toLocaleTimeString('vi-VN', { 
           hour: '2-digit', 
           minute: '2-digit' 
         });
}
```

## 🧪 Testing

### Test Cases cần cover:
1. **Search functionality**: Tìm kiếm theo Key, Value, date range
2. **CRUD operations**: Create, Read, Update, Delete
3. **Validation**: Form validation rules
4. **Cache reload**: Reload cache functionality
5. **Pagination**: Page size change, page navigation
6. **Error handling**: API errors, network errors

## 🚀 Deployment

### Dependencies:
- Vue 3 Composition API
- Vue Router
- Pinia (nếu cần state management)
- Vue Toastification (notifications)
- VueDatePicker (date range picker)

### Build considerations:
- Component được lazy load trong router
- CSS scoped để tránh conflicts
- Responsive design cho mobile

## 📚 Usage Examples

### Truy cập trang:
```
http://localhost:3000/cau-hinh-ung-dung
```

### Thêm vào menu:
```vue
<router-link :to="{ name: 'appconfig' }">
  Cấu hình ứng dụng
</router-link>
```

### Programmatic navigation:
```javascript
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({ name: 'appconfig' })
```

## 🔍 Troubleshooting

### Common Issues:

1. **API 403 Error**: Kiểm tra quyền user có role `AppConfig.*`
2. **Form validation không hoạt động**: Kiểm tra reactive objects
3. **Date picker không hiển thị**: Kiểm tra VueDatePicker import
4. **Toast không hiển thị**: Kiểm tra vue-toastification setup

### Debug Tips:
- Kiểm tra Network tab cho API calls
- Console.log searchModel để debug search parameters
- Kiểm tra Vue DevTools cho reactive state

## 📝 Notes

- Component tuân thủ pattern của các component khác trong dự án
- Sử dụng Bootstrap classes có sẵn
- Error handling tập trung trong service layer
- Responsive design với mobile-first approach
- Accessibility considerations với proper labels và ARIA attributes
