前回までの状況はこちら

【Laravel】【ホテル予約管理】ユーザーアカウントで予約登録

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/hotel-mng

さて、前回はユーザーログインでのあれこれを修正したのですが、それに伴って、管理者ログインでのあれもれも直す必要があります。

まずは、予約一覧画面。

ユーザーログインでは、ログインしたユーザーのもののみを表示させましたが、管理者ログインでは、全ユーザーの情報を表示する必要があります。

なので、ロール「管理者(manager)」でなければwhere句でユーザーを指定するというふうに変えなければなりません。

    public function getListByMonth($year, $month, $room, $userId)
    {
        $select = ['reserve_managements.id as id', 'users.name as name', 'users.address as address', 'users.phone as phone', 'num', 'rooms.id as roomid', 'rooms.name as room', 'days', 'checkout', 'start_day'];
        $query = ReserveManagement::select($select)
                                ->leftJoin('reserve_management_room', 'reserve_managements.id', '=', 'reserve_management_room.reserve_management_id')
                                ->leftJoin('rooms', 'reserve_management_room.room_id', '=', 'rooms.id')
                                ->leftJoin('reserve_management_user', 'reserve_managements.id', '=', 'reserve_management_user.reserve_management_id')
                                ->leftJoin('users', 'reserve_management_user.user_id', '=', 'users.id')
                                ->where('start_day', '>=', date('Y-m-d', strtotime('first day of '.$year.'-'.$month)))
                                ->where('start_day', '<=', date('Y-m-d', strtotime('last day of '.$year.'-'.$month)))
                                ->where('reserve_management_room.room_id', $room)
                                ->where('lodging', false);
        if(Gate::denies('manager')){
            $query = $query->where('users.id', $userId);
        }
        $query = $query->orderBy('start_day');
        return $query->get();
    }

こんな感じで、where()を、Gate::denies()で「管理者以外」とすれば、このwhereはユーザーログインのみに適用されます。

次は、予約追加画面。

ユーザーログインの場合は、ログイン中の名前などの表示させましたが、管理者ログインの場合は、登録されているユーザーを選択して登録しなければなりません。

ここでVue.jsの出番です。（まじか・・・）

まずはテンプレート。

基本的には、編集時のVue.jsを参考にしています。

<template>
    <div>
        <p v-if="error_flg == true" class="error">{{error_message}}</p>
        <table class="edit">
            <tbody>
                <tr>
                    <th>名前</th>
                    <td v-if=role>{{ contents.name }}<button @click="openModal">検索</button></td>
                    <td v-else>{{ contents.name }}</td>
                </tr>
                <tr>
                    <th>住所</th>
                    <td>{{ contents.address }}</td>
                </tr>
                <tr>
                    <th>電話番号</th>
                    <td>{{ contents.phone }}</td>
                </tr>
                <tr>
                    <th>人数</th>
                    <td>
                        <select v-model=contents.num>
                            <option v-for="num in nums" v-bind:value="num.value">{{ num.text }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>宿泊部屋</th>
                    <td>
                        <select v-model="contents.roomid">
                            <option v-for="room in rooms" v-bind:value="room.id">{{ room.name }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>宿泊日数</th>
                    <td><input type="number" v-model=contents.days /></td>
                </tr>
                <tr>
                    <th>宿泊日</th>
                    <td><input type="date" v-model=contents.start_day /></td>
                </tr>
                <tr>
                    <th>チェックアウト</th>
                    <td>
                        <select v-model="contents.checkout">
                            <option v-for="time in timeList" v-bind:value="time.key">{{ time.value }}</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <p><button @click="regist">登録</button></p>
        <div id="overlay" v-show="showContent">
            <div id="content">
                <table class="edit">
                    <p>名前<input type="text" v-model=param.search /></p>
                    <tbody>
                        <tr>
                            <th>名前</th>
                            <th>住所</th>
                            <th>電話番号</th>
                        </tr>
                        <tr v-for="user in users" @click="selectUser(user)">
                            <td class="name">{{ user.name }}</td>
                            <td class="address">{{ user.address }}</td>
                            <td class="phone">{{ user.phone }}</td>
                        </tr>
                    </tbody>
                </table>
            <p>
                <button @click="closeModal">close</button>
                <button @click="searchUsers">検索</button>
            </p>
            </div>
        </div>
    </div>
</template>

まず、テーブルの部分ですが、名前、住所、電話番号以外は、編集画面をそのまま使用しました。

問題の、名前、住所、電話番号の部分ですが、管理者ログインならば、検索ボタンを設置し、それをクリックするとモーダルダイアログを表示する、という仕組みにしたいと思います。

モーダルダイアログでユーザーを検索し、その名前をクリックすると、登録画面に反映される、という動きにします。

実際の処理。

<script>
    export default {
        data() {
            return {
                role: false,
                error_message: "",
                error_flg:false,
                errors: {},
                nums: [
                    {text:'1', value:1},
                    {text:'2', value:2}
                ],
                timeList:[],
                rooms: [],
                users: [],
                showContent: false,
                param: {
                    search: "",
                },
                contents: {
                    id: 0,
                    name: "",
                    address: "",
                    phone: "",
                    num: 0,
                    roomid: 0,
                    room: "",
                    days: 0,
                    start_day: "",
                    checkout: "",
                },
            }
        },
        created: function() {
            this.getRole();
            this.getRooms();
            this.getTimeList();
        },
        methods: {
            getRole: function() {
                var self = this;
                axios.post('/api/role').then(function(response){
                    self.role = response.data.role;
                    if(self.role == false){
                        self.contents.id = response.data.user.id;
                        self.contents.name = response.data.user.name;
                        self.contents.address = response.data.user.address;
                        self.contents.phone = response.data.user.phone;
                    }
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },
            searchUsers: function() {
                this.users = [];
                var self = this;
                axios.post('/api/users', this.param).then(function(response){
                    response.data.users.forEach(element => {
                        self.users.push({id:element.id, name:element.name, address:element.address, phone:element.phone});
                    });
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },
            selectUser: function(user) {
                this.contents.id = user.id;
                this.contents.name = user.name;
                this.contents.address = user.address;
                this.contents.phone = user.phone;
                this.closeModal();
            },
            regist: function() {
                var self = this;
                this.param.contents = this.contents;
                axios.post('/api/add', this.param).then(function(response){
                    document.location = "/management";
                }).catch(function(error){
                    self.error_flg = true;
                    self.error_message = error.response.data.errors;
                    console.log("失敗しました");
                });
            },
            getRooms: function() {
                var self = this;
                axios.post('/api/rooms').then(function(response){
                    response.data.roomLists.forEach(element => {
                        self.rooms.push({id:element.id, name:element.name});
                    });
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },
            getTimeList: function(){
                var self = this;
                axios.post('/api/timelist').then(function(response){
                    for (let [key, value] of Object.entries(response.data.timelist)){
                        self.timeList.push({key: key, value: value});
                    }
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },
            openModal: function(){
                this.users = [];
                this.showContent = true;
            },
            closeModal: function(){
                this.showContent = false;
                this.edit_flg = false;
            },
        }
    }
</script>

ポイントは、ユーザーログインも管理者ログインも使用するということ。

なので、現在ログインしているアカウントのロールをgetRole()で最初に取得している、ということです。

このgetRole()の結果で表示内容を切り替えたりしてます。

そして、必要事項を入力したら、登録処理を行います。

このとき必要になるのは、ユーザーID。これも送信するパラメータに含めます。

では、API側の処理。

    public function __construct()
    {
        $this->middleware('auth');
        $this->registerManagement = new RegisterManagementRepository();
        $this->room = new RoomRepository();
        $this->user = new UserRepository();
    }

    public function role(Request $request)
    {
        return response()->json(['role' => Gate::Allows('manager'),
                                 'user' => Auth::user()]);
    }

    public function users(Request $request)
    {
        return response()->json(['users' => $this->user->search($request->search)]);
    }

    public function add(Request $request)
    {
        \Log::debug(print_r($request->contents, true));
        if($this->registerManagement->checkSchedule($request->contents["start_day"], 
                                                    $request->contents["days"], 
                                                    $request->contents["roomid"]) == false)
        {
            return response()->json([
                'errors' => "スケジュールが重複しています"
            ], 400);
        }
        $param = $this->registerManagement->getParam();
        $this->registerManagement->add([
            $param[0] => $request->contents["num"],
            $param[1] => $request->contents["days"],
            $param[2] => $request->contents["start_day"],
            $param[3] => false,
            $param[4] => date('Y-m-d H:i', strtotime($request->contents["start_day"].' + '.$request->contents["days"].' day') + $request->contents["checkout"])
        ], $request->contents["roomid"], $this->user->getUserById($request->contents["id"]));
        return response()->json();
    }

class UserRepository
{
    public function __construct()
    {

    }

    public function getUserById($id)
    {
        return User::where("id", $id)->first();
    }

    public function search($word)
    {
        $select = ['id', 'name', 'address', 'phone'];
        return User::select($select)
                    ->where('name', 'like', "%{$word}%")
                    ->get();
    }
}

ユーザー検索で使用する「あいまい検索」はこんな感じで「like」を使用します。

管理者ログイン時の動作

ユーザーログイン時の動作

これでうまく行ったみたいです。（疲れた。。。）