前回までの状況はこちら。

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

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

さて、ここである重大な欠陥を見つけてしまいました。

それは、Vue.jsで実装を行った際、管理者が予約をチェックする処理の実装を忘れていました。

いかんいかん、完全にミスったわ。

というわけで、ここを実装します。

修正するのは予約一覧から予約をクリックして表示される予約詳細画面です。

管理者がこの画面を表示させた場合、チェックボタンを追加し、チェック処理を行います。

Vue.jsのテンプレートと処理を追加します。

            <p>
                <button @click="closeModal">close</button>
                <button v-if="edit_flg == false" @click="onClickEdit">編集</button>
                <button v-else @click="onClickSave">保存</button>
                <button v-if="edit_flg == false" @click="onClickDelete">削除</button>
                <button v-if="role == true && edit_flg == false" @click="onClickCheck">チェック</button>
            </p>

        data() {
            return {
                role: false,
                error_message: "",
                error_flg:false,
                errors: {},

        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;
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },

データにroleフラグを追加し、画面表示時にroleの取得を行います。

trueが返れば管理者であるということなので(ここは前回実装の動きに合わせる)、role=trueならば、チェックボタンを表示させます。

また、編集中はチェックボタンを表示させないようにします。

では、API部分の実装。

    public function check(Request $request)
    {
        $this->registerManagement->lodging($request->id);
        return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
            $request->year,
            $request->month,
            $request->room,
            Auth::user()
        )]);
    }

チェックの実行を行った直後に、予約一覧を返すことで、チェック後の予約一覧を素早く表示させることができます。

最後Routeを追加。

Route::post('/api/check', 'ApiController@check');

これで機能するようになりました。

ふぅ。（汗

前回までの状況はこちら

最新ソースはこちら(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」を使用します。

管理者ログイン時の動作

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

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