提出一覧テーブルと汎用テーブルの実装 #87
Conversation
あと mock の JSON が壊れていたので修正しました
src/views/UserView.vue
Outdated
| // TODO: Fetch user data | ||
| </script> | ||
|
|
||
| <!-- TODO: Fix the layout on mobile --> |
There was a problem hiding this comment.
mobileのデザインは一旦考慮しないでおいて，このPRでは作業しなくて良いです。
src/views/user/UserSubmissions.vue
Outdated
| const response = await new SubmissionsApi().getSubmissionsRaw({ | ||
| orderBy: 'submittedAtDesc', | ||
| username, | ||
| limit: rowPerPage, | ||
| offset: page.value * rowPerPage | ||
| }) | ||
| const summaries: SubmissionSummaries = await response.value() |
There was a problem hiding this comment.
getSubmissionsを用いればまとめられると思います。
There was a problem hiding this comment.
多分もともとレスポンスコード取るために Raw 使ってたんですが、全部 try-catch に丸投げすることに変えて意味が無くなってたので普通のに戻しました
src/views/user/UserSubmissions.vue
Outdated
| }) | ||
| const summaries: SubmissionSummaries = await response.value() | ||
| totalSubmissions.value = summaries.total! |
There was a problem hiding this comment.
非nullアサーションするよりnullやundefindedであった時のデフォルト値を明示的にセットする方が良さそう。他の部分も同様です。
There was a problem hiding this comment.
Non-null Assertion をなくしました。それに伴い、Nullish になり得ないけど Non-null Assertion を避けたところには補足を書き残しておきました
| }>() | ||
| const emit = defineEmits<{ switch: [page: number] }>() | ||
| // previous pages (begin, ..., -32, -16, -8, -4, -3, -2, -1) |
There was a problem hiding this comment.
日本語話者がメインでメンテすることが想定されるのでコメントは日本語でもいいかなー？と思いますが，これは好みの問題なので何方でも良いです！
There was a problem hiding this comment.
ここは英語のままにしましたが、複雑な箇所や意図を伝えたい箇所では日本語でコメントを書きました
| <div> | ||
| <h1>User</h1> | ||
| <RouterView /> | ||
| <div class="flex gap-[max(2rem,calc(25dvw-16rem))] px-[max(2rem,calc(25dvw-16rem))]"> |
There was a problem hiding this comment.
今はデザインが確定していないので全く問題ないですが，将来的にはこのようなArbitrary valueは削除することになることだけよろしくお願いします:man_bowing:
There was a problem hiding this comment.
こういう細かな調整は <style> でやる感じですかね？
仮デザインなのでとりあえずいじらずそのままにしてます
デザインはプロジェクト全体を通して仮であるため、ここだけ TODO コメントで明記する必要はない
Nullish になり得ない所も型安全性のために避ける
非本質な URL クエリは切り分けるべきなので
提出一覧はユーザーページ以外でも使うことが想定されるため
|
追加で気になったところのリファクタリングもしましたが、修正版できたはずです |
close #67
GitHub Copilot による要約
このプルリクエストには、アプリケーション内のさまざまなコンポーネントの機能とレイアウトを強化するための変更が含まれています。主な変更点は、モック API レスポンスの更新、新しいリスト表示テーブルおよびページ切り替えコンポーネントの追加、ユーティリティ関数の実装、およびビューの改善です。
モック API レスポンス:
src/api/mock/front-back-api-mock.json内のモック API レスポンスにおいて、languageIdフィールドの修正を行い、適切な JSON フォーマットを確保しました。[1]
[2]
新しいコンポーネント:
ListingTable.vueコンポーネントを追加し、カスタマイズ可能な列と行を持つ表形式のデータを表示できるようにしました。PageSwitcher.vueコンポーネントを追加し、前後のページ遷移ロジックを含むページネーションを実装しました。ユーティリティ関数:
src/utils/date.tsにdateToString関数を導入し、特定のロケールで日付をフォーマットできるようにしました。ビューの改善:
UserView.vueを更新し、サイドナビゲーションを追加するとともに、ルートパラメータに基づいてユーザーデータを取得するようにしました。UserSubmissions.vueを強化し、ユーザーの投稿を表形式で表示し、ページネーションとデータ取得のロジックを組み込みました。補足
ListingTableコンポーネントを作り、それを使用する感じで実装しました。サイト内の他のテーブルも基本的にこれを使うことを想定しています。セルの中身の指定に
slotを用いることで、文字列に限らず、リンク、アイコン、コンポーネントなどを自由に指定できるようになっています。現状だと
totalがlimitと等しくなってしまうため、loadSubmissions関数のconst summaries: SubmissionSummaries = await response.value()のすぐ下にsummaries.total = 3141などを書き加えて複数ページを試すことができます。ListingTableにその機能を UI 含め実装し、ListingTableを使う側がその新機能に対応するよう修正するという形を想定しています。