概要

フロントエンド 管理者コンソール ユーザ情報一覧画面を作成してください。

URLは以下のようになります。
/console/users

概要

フロントエンドで画面に一時的な情報(「ユーザーを作成しました。」)などを表示させるための
トーストを追加します。

概要

「更新」ボタン名を「変更」に変更してください。

「更新」ページの更新など、すでにあるものの再表示で、「変更」は今から情報を変えるといったイメージがあるため、
「更新」ボタン名を「変更」に変更してください。

概要

管理者コンソールのユーザ画面についてざっくりとした画面設計を行ってください。

ユーザ画面にはおそらく、以下の画面が必要です。
・一覧画面(検索もできるようにしたい)
・詳細画面(更新や削除ができる)
・新規作成画面

コーディングに入る前に、Google Slideなどでざっくりとした画面設計を行い、皆さんの認識をすり合わせておきます。

編集できるGoogle Slideを作成しました。こちらでまずはやってみましょう👍
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit?usp=sharing

管理者画面内のユーザー情報一覧、獣害情報一覧にチェックボックスが実装されたので、チェックされたデータ（行）を同時に削除するという機能を実装します。

「全て削除」ボタンを押すとmodal windowが出て、警告するようにします。

関連PR
#76

実装方法memo

以下のような方向性で進めていきたいと思います。

deleteではなく、postで行う。
deleteにはbodyに情報が入れられないため。
１件の情報を消す場合と違って、bodyに消したい情報のIDを持っておく必要がある。

Actionはdeleteを消したい情報の回数実行することで実現する。

概要

このリポジトリ内で、next.jsと、cloud functionsの2つのプロジェクトを扱えるようにします。
next.jsは、webフォルダ
cloud functionsは、apiフォルダ
に格納します。

また、docker-compse.ymlで、2つのプロジェクトを一括で起動できるようにします。

概要

ユーザ一覧画面とユーザリストAPIを接続し、利用できるようにする

概要

iPhone, iPadの位置情報付きの写真が読み込めない
iOSでは、写真のフォーマットがjpegではなく、HEIFというファイルフォーマットになっている
また、inputタグを使った画像アップロード時にEXIFのGPS情報の消し込みが行われている模様

実装

獣害マップに必要なのは、日付と位置情報のみなので、写真のアップロードではなく、ボタンを押すことをトリガーにして、ブラウザから位置情報を取得するようにする。
この方法であれば、ユーザに位置情報取得の許可さえ取れば、iOSでも位置情報を取得可能。

概要

獣害の位置情報の記録先をスプレッドシートからデータベースに変更してください。
スプレッドシートの記録の読み込みは一般的に遅く、クエリを利用した検索ができず非効率です。

概要

ユーザ一覧画面の削除ボタンは、ユーザ詳細画面の削除ボタンのみとする
そのため、ユーザ一覧画面の削除ボタンは削除する

概要

ユーザ編集画面を作成してください。
フロントエンドのURLは以下になります。
/console/users/{user}

また、APIを利用して、ユーザが実際に更新および削除できるようにしてください。

• 更新
• 削除

概要

一覧複数選択機能を作成してください。
これは、今後、テーブルにある行を選択できるようにして、各種操作できるようにするためです。

概要

日付入力の簡便化のためにデートピッカーを導入してください。

概要

コンソール画面で、獣害情報新規作成画面を作成してくだい

目的

電話等で獣害情報を受けた時に、管理者側から獣害情報新規作成画面を作成できるようにします。

概要

DBの初期化を行うmakeコマンドを作成してください。

DBの初期化を簡単に行えるようにします。
初期化は、DBの内容を削除し、laravelのマイグレーションを行うことを指します。

獣害情報やユーザデータを管理するための管理者画面を作成するため、
管理者がログインできるような機能を作成する

管理者はconsole/loginにアクセスし、ユーザ名・パスワードを入力することで、管理者画面にアクセスできるようにする

概要

不足しているバックエンドのユニットテストを行います。
・獣害報告(Matter)のリスト取得
・獣害報告(Matter)の作成
・ユーザ(User)確認

#17 に続いて、
以前作った獣害情報をフロントに渡すために、１ページあたり２０個ごとくらいの獣害情報を取得できるコントローラーを作成してください。

N+1問題が起こらないように、実装する。

概要

管理者コンソールのユーザ詳細画面にて、QRコードを表示できるようにしてください。

以下のアドレスをQRコードにして下さい。

http://localhost/users/{ユーザid}/report

なお、プロトコル部とホスト部は環境により可変であることが望ましいです。

URLをQR化するライブラリはいくつかあると思います。
若干適当に見繕いましたが、フック対応しているので、以下のライブラリを使うと良いかもしれません
https://github.com/Bunlong/next-qrcode

概要

獣害情報一覧画面とAPIでつなぎこむようにします。

現在、獣害情報一覧画面は仮のデータにんりますので、それを本物のデータにつなぎこむようにします。

概要

獣害情報一覧APIを作成してください。

URLは以下のようになります。
GET: /api/console/matters

また、Controllerは、以下のアクションを利用してください。
App/UseCases/Matter/ListAction

概要

ユーザ一覧APIを作成してください。

URLは以下のようになります。
GET: /api/console/users

また、Controllerは、以下のアクションを利用してください。
App/UseCases/User/ListAction

概要

テーブルの機能について、以下の拡充を行います

・ページング機能

概要

yupのバリデーション日本語化を行ってください。
現状、バリデーションエラー時に英語のエラーになっています。

概要

GoogleCloudFunctionsを利用したバックエンド環境を構築します。
バックエンドのサーバレスで開発を行います。
また、開発言語はフロントエンドのNext.jsに合わせた、Typescript(Node.js)で行います。

概要

汎用的に利用できるテーブルコンポーネント作成してください。

TanstackTableを利用します。

概要

獣害マップのメイン画面に時間での絞り込みを追加します。

スケールは1週間、1ヶ月、カスタムのような形にします。
デフォルトは1週間です。

概要

ユーザ新規作成画面を作成してください。
フロントエンドのURLは以下になります。
/console/users/new

また、APIを利用して、ユーザが実際に作成できるようにしてください。

ユーザ新規作成API
#19

概要

ユーザ作成APIを作成してください。

URLは以下のようになります。
POST: /api/console/users
入力項目については、以下になります。

  name: string
  description: string

また、Controllerは、以下のリクエスト、アクションを利用してください。
リクエスト：App/Http/Requests/User/SaveRequest
アクション：App/UseCases/User/SaveAction

概要

ユーザに確認を求めるための確認ダイアログを作成してください。

#56 から分離させたissueです。

#一覧表で削除する仕様どうする問題

ちょっと思ったのは、この一覧の詳細ボタンの横に、削除ボタンがあるのがいいのかどうかというのが気になりました。

あくまで主観的な印象でしかありませんが、よくあるのは、チェックを入れたものを一括で削除するというような「チェック入れる」→「一括削除ボタンを押す」という二段構えが多いなあと。

今のままで行くのか、削除ボタンの仕様を変えるのか、どちらが適切なのかというのが気になっています。次回のミーティングで話すor実際に現場に使ってもらってから決めるでも良さそうとは思います。

#現在の画面

#難しいかもポイント

モーダルの表示非表示の「const [visible, setVisible] = useState(false)」の状態が一覧表だとその行数個存在する形になることがややこしくなる原因？

#タスク

• ユーザー情報一覧
• 獣害情報一覧

概要

地図表示コンポーネントのリファクタリングを行います。

任意のModelを受け入れ、ヒートマップを表示するようにする

概要

獣害情報編集画面で、地図から獣害情報を編集できるようにします。

目的

現在、獣害情報の編集は、緯度経度を直接入力する方式になっており
実際の場所の想像ができず、非常に直感的ではありません。

この方式を変更し、地図画面から、獣害情報の編集を行えるようにします。

概要

ユーザ詳細画面にて、ユーザが投稿した獣害情報一覧を取得できるようにする

概要

獣害情報を検索できる 検索コンポーネントを作成します。

検索できる内容としては
・日付 (期間)
・ユーザ (ユーザ名とユーザID)

この変更に伴うバックエンドの改修も行います。

概要

フロントエンド 管理者コンソール 獣害情報一覧画面を作成してください。

URLは以下のようになります。
/console/matters

また、獣害情報一覧は、以下のスライドを参照してください。
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit#slide=id.p

概要

ユーザ作成FormRequestを改修してください。
現在、ユーザ作成FormRequestであるApp\Http\Request\User\CreateRequestは、Laravelのデフォルトであるため、
これを獣害マップ用に改修する必要があります。

Request\User\SaveRequestを作成してください。

入力項目については、以下のように変更します。

  name: string 必須入力 255文字以内
  description: string 必須入力

概要

管理者コンソールの害獣情報画面についてざっくりとした画面設計を行ってください。
コーディングに入る前に、Google Slideなどでざっくりとした画面設計を行い、皆さんの認識をすり合わせておきます。

害獣情報画面にはおそらく、以下の画面が必要です。
・一覧画面(検索もできるようにしたい)
・詳細画面(更新や削除ができる)
・新規作成画面

編集できるGoogle Slideを作成しました。こちらでまずはやってみましょう👍
https://docs.google.com/presentation/d/15n-wXPODiaztN-RxQ9d8AQ1kHPBjrwUPN0cU8wD_zsE/edit?usp=sharing

概要

docker composeのコマンドの修正とポートのカスタマイズができるようにします。

現在、docker composeのコマンドは、docker-composeとなっており、非推奨の書き方になっています。
Makefileの書き方を推奨されたdocker composeに変更します。

また、docker composeで、公開するポートについて、ローカルでカスタマイズできるようにします。

概要

GithubActionを利用してプッシュ時に単体テストができるようにしてください。
今のところ、mainブランチおよび、devブランチについて、単体テストできるようにします。
すべてのブランチについてする必要はありません。

こちらを押すと、

↓こちらのページへジャンプできるようにします。

概要

管理者コンソール ユーザ一覧画面にて、検索コンポーネントと機能を追加して下さい。

すでに、獣害情報一覧では検索が可能になっていますので、参考にしてみてください。
検索は、
・ユーザ名で部分一致
・ユーザIDで完全一致
するようにすれば良いかなと思います。

概要

管理者ログイン周りの単体テストを行う
主に、Controller単体テストを重点する

概要

獣害情報編集画面を作成してください。
フロントエンドのURLは以下になります。
/console/matters/{matter}

また、APIを利用して、ユーザが実際に更新および削除できるようにしてください。

概要

AdminUserControllerの名前空間とフォルダ配置を変更します。

AdminUserContorller名前空間とフォルダを以下に変更します。

名前空間変更前： App\Http\Controllers
フォルダ変更前： app/Http/Contorllers/AdminUserController

名前空間変更後： App\Http\Controllers\Console
フォルダ変更後： app/Http/Contorllers/Console/AdminUserController

概要

獣害情報削除アクションUseCases/Matter/RemoveActionクラスを作成してください。

獣害情報Matterを引数に取って、その引数の獣害情報を削除できるようにしてください。
削除する獣害情報が実際にデータベースにない場合、何もする必要はありません。

UseCases/User/RemoveActionが似たようなアクションになります。

概要

マップシステムを現在のLeafletからDeck.glに変更します。

Deck.glは、webglを利用しており、表示速度等が優れています。
https://deck.gl/

githubActionsでAWS ECRにコンテナイメージをプッシュできるようにしてください。

タイミングはmainコンテナマージ時にテストを行い、成功した場合、コンテナイメージをプッシュするようにします。

概要

各テーブルのプライマリキーが不足しているので、プライマリキーを追加する

エラーコード

Access to fetch at 'https://c.tile.openstreetmap.org/9/444/206.png' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.