feat: migrate to Vue 3 Composition API #980
Merged
+9,944
−12,410
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…3 migration - Fix invisible logo and filters by adjusting theme colors and styles - Fix input field overlap by removing placeholders - Fix date picker data type mismatch in NewApplicationPage - Fix application detail logs layout by removing invalid wrapper - Update Docker configuration to support Vite hot reload
- Add jsconfig.json for type checking - Install and configure vitest, vue-tsc, and test utils - Add example test and setup file
- Add Playwright for E2E testing - Implement E2E tests for Login, Create Application, and Approve Application flows - Implement component tests for NewApplicationPage and ApplicationDetailPage - Update vite.config.ts to exclude E2E tests from Vitest - Update README.md with testing instructions - Update .gitignore to exclude Playwright artifacts
- Enable `noImplicitAny` in `tsconfig.json`. - Update `package.json` lint script to include `.ts` and `.tsx`. - Install `@types/markdown-it`. - Fix implicit any errors in core utility and shared components. - Add `lang="ts"` to Vue components.
- Define `Log` interface in `applicationDetail.ts`. - Use `unknown` instead of `any` in `applicationList.ts`. - Add necessary type casting in `ApplicationListPage.vue` and `ApplicationDetailLogs.vue`.
- Replace `any` with proper type assertions or `unknown` in test files to satisfy linting rules.
- Add `lang="ts"` to script tags in: - `src/App.vue` - `src/views/components/ChangeLog.vue` - `src/views/components/FormattedDate.vue` - `src/views/core/NavBar.vue` - `src/views/shared/Icon.vue` - `src/views/shared/StateChip.vue`
- Convert 10 components to `<script setup lang="ts">`. - Replace Options API (`data`, `computed`, `methods`, `props`, `emits`) with Composition API equivalents. - Replace `mapState`/`mapActions` with Pinia `useStore` and `storeToRefs`. - Ensure strict type safety.
- Remove forced white text in SimpleButton to fix invisible text on light backgrounds (e.g., secondary variant). - Update StateChip colors for better semantic consistency: 'submitted' to 'info' (blue), 'fix_required' to 'warning' (orange). - Change 'Select Repaid User' button to 'success' (green) to match the target state. - Further reduce log spacing in ApplicationDetailLogs by resetting min-height and padding.
- Fix v-autocomplete dropdown in RepaidButton dialog not opening by setting z-index. - Introduce 'done' theme color (Teal) and apply it to 'fully_repaid' status and related buttons to distinguish from 'accepted'. - Change 'StateWithReasonButton' modal buttons to default primary variant for better visibility. - Aggressively reduce vertical spacing in application logs timeline.
…sues - Add 'align="top"' to v-timeline in ApplicationDetailLogs.vue to fix excessive vertical spacing caused by default center alignment. - Set 'attach: true' in v-autocomplete menu-props within RepaidButton.vue to ensure the dropdown renders correctly inside the dialog and receives click events.
- Add 'align-items: flex-start' to ApplicationDetailPage container to prevent log section from stretching vertically, fixing large gaps between log items. - Remove 'scrollable' from RepaidButton dialog and 'attach: true' from autocomplete menu to ensure the dropdown renders correctly above the dialog.
- Remove aggressive CSS overrides in ApplicationDetailLogs.vue to restore the visibility of timeline vertical lines. - Replace v-autocomplete with v-select in RepaidButton.vue to resolve issues with selecting users inside the dialog.
- Wrap timeline item content in v-sheet to fix missing vertical lines in ApplicationDetailLogs.vue. - Replace v-date-picker with v-text-field type="date" in RepaidButton.vue to resolve display artifacts and improve usability. - Enable chips in user selection v-select for clearer feedback.
- Remove conflicting 'ref' attribute in RepaidButton.vue that matched the v-model variable name, fixing broken interactivity and display artifacts. - Explicitly set line-color and line-thickness on v-timeline in ApplicationDetailLogs.vue to ensure vertical lines are visible.
- Add global CSS override to .v-timeline-divider__line to enforce min-height and background color. - This resolves the issue where vertical lines were missing in the application logs timeline, likely due to layout density settings.
- Remove 'align="top"' from v-timeline, which was causing vertical lines to disappear. - Clean up unnecessary CSS overrides and v-sheet wrappers, restoring the component to a standard implementation. - Layout spacing is now handled by the parent container's 'align-items: flex-start'.
- Stabilize approve-application e2e test by reloading page to ensure waitForResponse captures the request. - Improve repaid-flow e2e test with robust selectors for v-select interactions and ensure menu is closed properly. - Update button color assertion in approve-application test to check for 'bg-success'. - Add basic unit test for ApplicationDetailLogs component to verify rendering structure.
- Add RepaidButton.test.ts to verify button rendering and disabled state logic based on user selection. - Add StateChip.test.ts to ensure correct semantic colors are applied for each application state. - Update StateWithReasonButton.test.ts to verify button variants match the intended state transitions (info/warning/error).
- Remove duplicate `createVuetify` calls in unit tests to resolve "[Vue warn]: ... has already been registered" warnings. - Fix `RepaidButton.test.ts` by mocking `v-dialog` to ensure content is rendered for assertions. - Remove unused variables in `RepaidButton.vue` and `ApplicationDetailLogs.test.ts`. - Apply minor formatting fixes in E2E tests.
- Limit image width to 100% in ApplicationDetail to prevent overflow. - Add left margin to header logo in NavBar. - Add padding to AdminPage content.
Contributor
Author
|
@H1rono client/*以外だけでいいからレビューください |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
概要
クライアントサイドを Vue 2/Vuex から Vue 3/Pinia/Vite へと全面的に移行する大規模なリファクタリング PR です。
アーキテクチャの刷新に加え、開発環境の整備（TypeScript, Vitest, Playwright）と、バグ修正・UI 改善を含んでいます。
主な変更点
🏗 アーキテクチャ刷新
<script setup lang="ts">スタイルに移行。noImplicitAnyを有効化。🐛 バグ修正
移行作業と並行して、以下の既存バグおよびリグレッションを修正しました。
NewApplicationPage) での連打による重複作成バグを修正（再現テスト追加）。🔧 その他
runタスクからsourcesディレクティブを削除しました。ソースコードに変更がない場合でも、サーバーを強制的に起動・再起動できるようにするためです（go-taskのスキップ動作を回避）。🧪 テスト・CI
create-application.spec.ts等）を修正。application-list.spec.tsなどのテストケース修正。検証結果
npm run test)。npm run test:e2e)。補足
22.xに変更されています。