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

【Laravel】【ホテル予約管理】管理者画面の修正

最新ソースはこちら(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');

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

ふぅ。（汗