Skip to content

Update Ui add button history - #34

Merged
Tonfa137206 merged 1 commit into
devfrom
feature/T95-import-receipt-approval-ui
Jun 30, 2026
Merged

Tonfa137206 merged 1 commit into
devfrom
feature/T95-import-receipt-approval-ui

Conversation

@Tonfa137206

@Tonfa137206 Tonfa137206 commented Jun 30, 2026 •

Copy link
Copy Markdown
Collaborator

Summary by CodeRabbit

  • Tính năng mới
    • Thêm nút Lịch sử cho các phiếu nhập trong màn hình duyệt và danh sách chứng từ kho.
    • Bổ sung hộp thoại lịch sử dạng timeline, hiển thị trạng thái tải, lỗi, danh sách thao tác, thời gian, người thực hiện và ghi chú.
  • Cải thiện giao diện
    • Thêm kiểu hiển thị cho nút phụ để đồng bộ màu sắc và trạng thái hover.

@coderabbitai

coderabbitai Bot commented Jun 30, 2026 •

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough >ImportReceiptHistoryModal: historyList[]

ImportReceiptHistoryModal-->>ApprovalsView: emit close

</diagram>
</layer>
<layer id="views_integration" title="Tích hợp modal vào ApprovalsView và StockDocumentsView" depends_on="modal_component">
<summary>Cả 2 views import modal, thêm historyState reactive, openHistory/closeHistory handlers, nút "Lịch sử" trong table actions, và render modal có điều kiện.</summary>
<ranges>
range_5861b90b4761
range_2e7fbd6cfff5
range_af5ddf6f5466
range_a6830923a27d
range_1c6db7f2b6d1
range_2f55657c85e4
range_a0581182500c
range_490a31963841
range_c61a4e20b3f7
</ranges>
</layer>
</cohort>
<unassigned_ranges>
</unassigned_ranges>
-->

## Walkthrough

Thêm modal "Lịch sử duyệt phiếu" dạng timeline. Service mới `getImportReceiptHistory` gọi `GET /api/import-receipts/{id}/history`. Component `ImportReceiptHistoryModal` watch `receiptId` để fetch và hiển thị timeline. Hai view `ApprovalsView` và `StockDocumentsView` tích hợp nút "Lịch sử" để mở modal.

## Changes

**Import Receipt History Modal**

|Layer / File(s)|Summary|
|---|---|
|**API service** <br> `src/services/importReceiptService.js`|Thêm `getImportReceiptHistory(receiptId)`: GET có auth, trả `data`, throw lỗi chuẩn hoá khi thất bại.|
|**Modal component** <br> `src/components/ImportReceiptHistoryModal.vue`, `src/style.css`|Component nhận `receiptId`/`receiptCode`, watch để fetch, ánh xạ action → badge/icon/màu, render timeline trạng thái (loading/error/empty/list), phát `close`. CSS scoped cho layout và màu 4 action.|
|**Tích hợp vào 2 views** <br> `src/views/ApprovalsView.vue`, `src/views/StockDocumentsView.vue`|Mỗi view thêm `historyState`, handlers `openHistory`/`closeHistory`, nút "Lịch sử" trong table, và render modal có điều kiện.|

## Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

## Possibly related PRs

- [ThienlocTran/sme-stocksense-frontend#23](https://github.com/ThienlocTran/sme-stocksense-frontend/pull/23): Giới thiệu `importReceiptService` và `StockDocumentsView` — cùng codebase mà PR này mở rộng.
- [ThienlocTran/sme-stocksense-frontend#33](https://github.com/ThienlocTran/sme-stocksense-frontend/pull/33): Cũng chỉnh `ApprovalsView.vue` để thêm modal/action trên từng phiếu, chồng lấn trực tiếp với phần nút "Lịch sử" ở PR này.

</details>

<!-- walkthrough_end -->
<!-- pre_merge_checks_walkthrough_start -->

<details>
<summary>🚥 Pre-merge checks | ✅ 4 | ❌ 1</summary>

### ❌ Failed checks (1 warning)

|     Check name     | Status     | Explanation                                                                           | Resolution                                                                         |
| :----------------: | :--------- | :------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------- |
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. | Write docstrings for the functions missing them to satisfy the coverage threshold. |

<details>
<summary>✅ Passed checks (4 passed)</summary>

|         Check name         | Status   | Explanation                                                                        |
| :------------------------: | :------- | :--------------------------------------------------------------------------------- |
|      Description Check     | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled.                        |
|         Title check        | ✅ Passed | Tiêu đề liên quan trực tiếp đến thay đổi chính là thêm nút/lịch sử duyệt trong UI. |
|     Linked Issues check    | ✅ Passed | Check skipped because no linked issues were found for this pull request.           |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request.           |

</details>

</details>

<!-- pre_merge_checks_walkthrough_end -->
<!-- finishing_touch_checkbox_start -->

<details>
<summary>✨ Finishing Touches</summary>

<details>
<summary>📝 Generate docstrings</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> Create stacked PR
- [ ] <!-- {"checkboxId": "3e1879ae-f29b-4d0d-8e06-d12b7ba33d98"} --> Commit on current branch

</details>
<details>
<summary>🧪 Generate unit tests (beta)</summary>

- [ ] <!-- {"checkboxId": "f47ac10b-58cc-4372-a567-0e02b2c3d479", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Create PR with unit tests
- [ ] <!-- {"checkboxId": "6ba7b810-9dad-11d1-80b4-00c04fd430c8", "radioGroupId": "utg-output-choice-group-unknown_comment_id"} -->   Commit unit tests in branch `feature/T95-import-receipt-approval-ui`

</details>

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---




<sub>Comment `@coderabbitai help` to get the list of available commands.</sub>

<!-- tips_end -->

@Tonfa137206
Tonfa137206 merged commit 77561d1 into dev Jun 30, 2026
1 check was pending

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/ImportReceiptHistoryModal.vue`:
- Around line 29-35: Trong ImportReceiptHistoryModal, giá trị trả về từ
getImportReceiptHistory có thể là null/undefined hoặc không phải mảng, khiến
historyList và template historyList.length bị lỗi khi render. Hãy cập nhật logic
trong hàm tải dữ liệu để luôn gán historyList.value về một mảng an toàn sau khi
gọi getImportReceiptHistory(id), và giữ nguyên xử lý lỗi trong catch/finally để
component chỉ render với dữ liệu dạng mảng.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d8de6813-1cc7-4d11-bd2a-b064b30ba39b

📥 Commits

Reviewing files that changed from the base of the PR and between d9f84c6 and 9f83f98.

📒 Files selected for processing (5)
  • src/components/ImportReceiptHistoryModal.vue
  • src/services/importReceiptService.js
  • src/style.css
  • src/views/ApprovalsView.vue
  • src/views/StockDocumentsView.vue

Comment on lines +29 to +35
try {
historyList.value = await getImportReceiptHistory(id)
} catch (err) {
errorMessage.value = err.message || 'Không thể tải lịch sử duyệt.'
} finally {
isLoading.value = false
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

Cần phòng trường hợp API trả về null/không phải mảng.

Nếu getImportReceiptHistory trả về null/undefined (body rỗng từ backend), historyList.value thành null, và template historyList.length === 0 sẽ ném lỗi khi render. Nên ép về mảng:

🛡️ Đề xuất guard
-      historyList.value = await getImportReceiptHistory(id)
+      const data = await getImportReceiptHistory(id)
+      historyList.value = Array.isArray(data) ? data : (data?.content ?? [])
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
try {
historyList.value = await getImportReceiptHistory(id)
} catch (err) {
errorMessage.value = err.message || 'Không thể tải lịch sử duyệt.'
} finally {
isLoading.value = false
}
try {
const data = await getImportReceiptHistory(id)
historyList.value = Array.isArray(data) ? data : (data?.content ?? [])
} catch (err) {
errorMessage.value = err.message || 'Không thể tải lịch sử duyệt.'
} finally {
isLoading.value = false
}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ImportReceiptHistoryModal.vue` around lines 29 - 35, Trong
ImportReceiptHistoryModal, giá trị trả về từ getImportReceiptHistory có thể là
null/undefined hoặc không phải mảng, khiến historyList và template
historyList.length bị lỗi khi render. Hãy cập nhật logic trong hàm tải dữ liệu
để luôn gán historyList.value về một mảng an toàn sau khi gọi
getImportReceiptHistory(id), và giữ nguyên xử lý lỗi trong catch/finally để
component chỉ render với dữ liệu dạng mảng.

@ThienlocTran
ThienlocTran deleted the feature/T95-import-receipt-approval-ui branch July 31, 2026 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant