0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【TP転職市場PJ日記その4】アカウント設定のバリデーションから検索画面まで頑張る回

Posted at

前回は...

Laravel Jetstream を使ってアカウント発行管理系の仕組みを簡単に導入したね。
今回は導入後のアカウントの設定画面やら独自バリデーション(入力チェック)とか検索系の実装で頑張った回を書いてく

Laravel Jetstream便利すぎということでLet'sカスタマイズ

アカウントのパスワード再発行とか自動でつくってくれるのは熱かった。
さて、これに今回のwebサービスに合うようにカスタマイズしますよっと…

結論こんな感じの画面にしました。
profile.PNG

・氏名(これ書いてるときに思ったけどユーザー名でいいなw)
・メアド(認証系でどうしても必要)
・ユーザー区分:プレイヤー(TPチームの選手だけやってるならこれだけチェック)
・ユーザー区分:チーム運営者(TPチームの運営だけやってるならこれだけチェック、もちろんプレイヤー兼運用の場合は両方チェック)
・所属チーム:TPの現在所属しているチームがあればここも設定。

※いったんこのTP転職市場でもチーム名ぐらいは管理というかデータとしてもっておきたいなと。

あ、TwitterId入れてもらう欄忘れてるな。後でつくっとこww
あと、スクショ外にあるけどアカウント削除とかのボタンも用意してある。自分の始末は自分でしよーねスタイル。
嫌いじゃない。

アカウント情報の設定画面で防ぎたい事

TPチームの運営も誰でもなれるようにすると、悪意あるユーザが他チームの関係者を装って暇つぶしされても困るので
運営人数の上限を設けてその人数以上の人間は設定できないようにする事にする。
運営者の人数が増減する場合は一応アカウント削除時に上限を減らして増やしてほしかったらお願いしてねスタイルにしようかなと思う。
追々フォームで自動化したいけど今は工数がないかなー。

技術的な話

さて、このJetstreamに独自のバリデーションを追加したいが思うような情報が転がっていなかった。はて…
という事で純粋にLaravelが標準で用意しているバリデーションを使えないかやってみる。
まずjetstreamのクラスについて調査でまじめにリファレンスを読む

Laravel jetstreamのリファレンス

こいつによると以下のクラスがUserテーブルを更新する際に使われるクラスとの事でこいつの改修をしてみることに

UpdateUserProfileInformation.php
<?php

namespace App\Actions\Fortify;

use App\Models\User;
use App\Rules\TeamValidRules;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;

class UpdateUserProfileInformation implements UpdatesUserProfileInformation
{
    /**
     * Validate and update the given user's profile information.
     *
     * @param  mixed  $user
     * @param  array  $input
     * @return void
     */
    public function update($user, array $input)
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
            'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
        ])->validateWithBag('updateProfileInformation');


        if (isset($input['photo'])) {
            $user->updateProfilePhoto($input['photo']);
        }

        if ($input['email'] !== $user->email &&
            $user instanceof MustVerifyEmail) {
            $this->updateVerifiedUser($user, $input);
        } else {
            $user->forceFill([
                'name' => $input['name'],
                'email' => $input['email'],
                'playerflag'=> $input['playerflag'],
                'teammanagementflag'=> $input['teammanagementflag'],
                'teamid'=> $input['teamid'] !== "" ? $input['teamid']: null,
            ])->save();
        }
    }

で、まずはコレ

でRulsを継承したクラスを作成してロジックを書いて(ここは共有したくないw)
最終的に更新メソッドはこんな感じに(ちなみに作ったクラス名はTeamValidRulesというやつ

UpdateUserProfileInformation.php
<?php

namespace App\Actions\Fortify;

use App\Models\User;
use App\Rules\TeamValidRules;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rule;
use Laravel\Fortify\Contracts\UpdatesUserProfileInformation;

class UpdateUserProfileInformation implements UpdatesUserProfileInformation
{
    /**
     * Validate and update the given user's profile information.
     *
     * @param  mixed  $user
     * @param  array  $input
     * @return void
     */
    public function update($user, array $input)
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($user->id)],
            'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'],
           'teamid' => [ new TeamValidRules($input) ], // ここを追加
        ])->validateWithBag('updateProfileInformation');


        if (isset($input['photo'])) {
            $user->updateProfilePhoto($input['photo']);
        }

これで、自前で作った入力チェックの処理が呼ばれてエラーがあったら更新しないようにしてくれた。
jetstreamで入力チェックはこんな感じでよさげ。

そして検索画面

ここはjetstreamのrouteで遷移先を指定してコントローラー作ってって感じでできたそして
画面にはテンプレートサイトから無料な物を引っ張ってきたんだが、できればjetstreamのメニューアイコンなどは使いたいということで
jetstreamの仕組みを利用することに。最低限こんな感じのタグ構成でいってみたらいい感じになった。

xxx.blade.php
<x-app-layout>
    <div>templatebody</div>
    <div>templatebody</div>
    <div>templatebody</div>
    <div>templatebody</div>
</x-app-layout>
<x-app-layout>

っていうのでかこってあげるとjetstreamのテンプレートいい感じにマージしてくれるみたい。
(さっきからいい感じにしか書いてない気がするww)

検索画面の仕様

・非同期はしない工数の関係でゴメン。POSTでやる。
・初期表示は全件検索ページネーション付きでやる。
・フィルター条件はポジションとin率と所属チームor所属リーグ
・ソートはつけるけど降順指定
※このあたりはTPやってる人の意見を追って聞いてみたいと思う。

というわけで画面は鬼質素。こう。目的特化型です。募集してる人、チームが見つかればええねん。
Twitterでやってるんだから。見た目もク〇もあったもんじゃないでしょ。すみません。スピード感優先で質素なだけです。ごめんなさい。
search.PNG

次回は...

ユーザー検索画面から詳細画面へそして気になる&スカウトボタンと評価の見える化というか気になるボタンやスカウトの通知を実装していこうと思ふ。

なんか記事かくよりも早く実装したくてウイイレどころじゃないw
ってわけで開発頑張ります^^
また次回お願いします^^

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?