機能の内容

スマホの表示を最適化するため、dvhを適用する

機能追加・修正の理由

スマホでの操作性を向上させるため

修正方針

https://zenn.dev/cti1650/articles/4d36c8a667f88a

スクリーンショット

機能の内容

• Admin用のMiddlewareを作成する

機能追加・修正の理由

• 権限に応じてページのアクセス権を制御するため

修正方針

• Middlewareを作成する

スクリーンショット

機能の内容

• #95 の続き
• 閲覧機能に加えて編集機能を追加する

機能の内容

• Bootstrap 5 の代わりに https://mdbootstrap.com/ を使用する

機能追加・修正の理由

• デザイン向上のため

修正方針

• npm でMDBをインストールする
• MDBを用いたcssを生成するように変更

スクリーンショット

なし

機能の内容

• 管理者向け個別会計画面を実装する
• 閲覧のみ
  • 編集は別 PR で対応

修正方針

• 以下をもとに実装する
  • https://github.com/chorkleines/kleines-mypage-legacy/tree/master/admin/individual_accounting

機能の内容

• 個別会計ページを作成する

修正方針

• 以下のファイルを元に個別会計ページを作成する
• https://github.com/chorkleines/kleines-mypage-legacy/blob/master/accounting/individual/index.php

スクリーンショット

機能の内容

データ読み込み時にページ全体を覆うように、各ページで isFullScreenLoading を定義する

機能追加・修正の理由

ページを読み込んでいることをユーザーにわかりやすく伝えるため

修正方針

スクリーンショット

機能の内容

• #93 の続き
• 閲覧機能に加えて編集機能を追加する

機能の内容

セキュリティを向上させるため、JWT認証ではなくCookieによるSPA認証を用いる

機能追加・修正の理由

• https://qiita.com/ucan-lab/items/3e7045e49658763a9566

修正方針

スクリーンショット

機能の内容

• トップページを作成する

修正方針

• 以下のファイルを元にトップページを作成する
• https://github.com/chorkleines/kleines-mypage-legacy/blob/master/index.php

スクリーンショット

機能の内容

mypage.chorkleines.com へのデプロイを自動化する

機能追加・修正の理由

CD 改善のため

修正方針

スクリーンショット

機能の内容

• https://github.com/chorkleines/kleines-mypage-legacy と同じ設計でデータベースを作成する
• Modelを定義する
• Seeder を定義する（開発者用）

機能追加・修正の理由

• 既存のデータベースをそのまま引き継いで移行を行うため

修正方針

• 既存のデータベースからマイグレーションファイルを生成するのには https://github.com/oscarafdev/migrations-generator を使う
  • https://qiita.com/LowSE01/items/b5a87f859cb7fb66e8e5
  • https://qiita.com/yukibe/items/4160f6522cab8ec40f59

スクリーンショット

機能の内容

• 管理者向け集金画面を実装する
• 閲覧のみ
  • 編集は別 PR で対応

修正方針

• 以下をもとに実装する
  • https://github.com/chorkleines/kleines-mypage-legacy/tree/master/admin/accounting
• 合宿会計も同じ画面に実装する

バグの内容

存在しない accountingId を指定した際に、白紙のページが表示される

バグの再現方法

1. 存在しない accountingId を指定したページを表示する

実際の挙動

存在しない accountingId を指定した際に、白紙のページが表示される

想定される挙動

存在しない accountingId を指定した際に、accountingId が存在しないことをエラーとして表示する

環境

• OS: [iOS / macOS / android / Windows]
• Browser: [Google Chrome / Safari / Microsoft Edge]
• Version: [macOS 12.5.1 / Google Chrome 105.0.5195.102]

修正方針

スクリーンショット

機能の内容

/individual_accountings のテーブルを components/Table に移行する

機能追加・修正の理由

ページング・ソートの UI/UX 改善

このIssueをもとに開発に必要な知識を身につけましょう。
項目が完了したらチェックをつけてください。

わからないことがあったら気軽に他のメンバーに相談・質問しましょう。

チュートリアル

開発に必要な技術のチュートリアルを掲載しました。
ここにリストアップしたサイト以外を利用しても構いません。

既に知っている知識についてはチュートリアルを無視してチェックを入れて大丈夫です。

• HTML / CSS 入門
  • HTML & CSS | Progate
• PHP 入門
  • PHP | Progate
• MySQL 入門
  • MySQL でデータベースを作成しよう | Progate
  • MySQL 入門 | Qiita
• Laravel 入門
  • Laravel 入門 | Qiita
• コマンドライン入門
  • Command Line | Progate
• Git入門
  • サル先生の Git 入門 | Backlog
  • Git | Progate
• GitHub 入門
  • GitHub の概要 - Learn | Microsoft Docs
  • Introduction to GitHub | GitHub Skills

開発環境構築

CONTRIBUTING.mdを参考に環境構築を行なってください。

• レポジトリのフォーク
• レポジトリのクローン
• PHPのインストール
• 依存ライブラリのインストール
• MySQLのインストール
  • MySQL の開発環境を用意しよう (mac) | Progate
  • MySQL の開発環境を用意しよう (Windows) | Progate
    MAMPを使っても構いません（便利です）
• データベース作成
• .envファイルの変更
• Laravelのセットアップ

機能の内容

• MVCモデルからREST API+SPAに移行する

機能追加・修正の理由

• SPAにすることでUXを向上させるため

修正方針

• Vue.jsを用いてフロントエンドを実装する
• バックエンドはREST APIで実装する

スクリーンショット

機能の内容

/users のテーブルを components/Table に移行する

機能追加・修正の理由

ページング・ソートの UI/UX 改善

バグの内容

集金記録ページで集金名が表示されない

バグの再現方法

1. 集金記録の詳細画面に遷移する

実際の挙動

集金記録ページで集金名が表示されない

想定される挙動

集金記録の詳細画面の breadcrumb と画面上部に集金名が表示される

環境

• OS: [iOS / macOS / android / Windows]
• Browser: [Google Chrome / Safari / Microsoft Edge]
• Version: [macOS 12.5.1 / Google Chrome 105.0.5195.102]

修正方針

スクリーンショット

機能の内容

• アカウント一覧ページを作成する

修正方針

• サイドメニューにアカウント一覧を追加する
• 新規に accounts.blade.php と AccountsController.php を作成し、ルーティングを定義する
• View にテーブル形式でアカウント一覧が表示されるようにする
  • スプレッドシートでのエクスポート機能は実装しない
  • パート・学年別のグラフは表示しない
• 元実装：https://github.com/chorkleines/kleines-mypage-legacy/blob/master/accounts/index.php

スクリーンショット

バグの内容

バグの再現方法

1. /accountings/{id} にアクセスする

実際の挙動

サイドメニューの「集金リスト」がアクティブにならない

想定される挙動

/accountings にアクセスした時と同様に、サイドメニューの「集金リスト」がアクティブになる

環境

• OS: macOS
• Browser: Google Chrome
• Version: macOS 13.4.1 / Google Chrome 114.0.5735.198

修正方針

スクリーンショット

バグの内容

バグの再現方法

1. 誕生日が NULL のユーザーを作る
2. ユーザーの詳細画面を表示する

実際の挙動

誕生日の欄が 1970/1/1 となる

想定される挙動

誕生日の欄が 未入力 となる

スクリーンショット

機能の内容

Integration Test の実装を見直し、高速化する

機能追加・修正の理由

CI の実行に時間がかかるため

修正方針

スクリーンショット

機能の内容

• 集金一覧ページを作成する

修正方針

• 以下のファイルを元に集金一覧ページを作成する
• https://github.com/chorkleines/kleines-mypage-legacy/blob/master/accounting/collection/index.php

スクリーンショット

バグの内容

ユーザーの誕生日を NULL に変更できない

バグの再現方法

1. /admin/users/{id} にアクセスする
2. 誕生日の欄を空白にし、保存する

実際の挙動

保存できずにエラーが表示される

想定される挙動

保存され、誕生日が「未入力」になる

スクリーンショット

機能の内容

• view template の作成

機能追加・修正の理由

• 各ページのデザインを統一するため

修正方針

• resources/views/layouts/app.blade.php を編集する

スクリーンショット

機能の内容

• 管理者用のページを作成したい
  • とりあえず各ページの権限を絞って、空のページを作る

修正方針

• API 側で各権限のミドルウェアを作成する
• サイドバーにメニューを作成する
• ログインしているユーザーに管理者権限があるかを判定できるように API を修正する

機能の内容

• ↓のようなバッジを README.md に追加する
  

機能追加・修正の理由

PR をみなくてもコードカバッレジをわかるようにするため

修正方針

https://github.com/marketplace/actions/bring-your-own-badge

スクリーンショット

機能の内容

• アカウントを追加し画面遷移した後に toast を表示する

機能追加・修正の理由

• アカウントが正常に追加されたことをわかりやすくするため