vue-router, remote ajax actor search

maeharin · Nov 16, 2017 · 0978807 · 0978807
1 parent d388823
commit 0978807
Show file tree

Hide file tree

Showing 26 changed files with 456 additions and 60 deletions.
diff --git a/admin-front/app/controllers/ajax/actors_controller.rb b/admin-front/app/controllers/ajax/actors_controller.rb
@@ -0,0 +1,6 @@
+class Ajax::ActorsController < ApplicationController
+  def search
+    actors = actor_api.staff_search_actors(params[:query])
+    render json: actors
+  end
+end
diff --git a/admin-front/app/controllers/ajax/films_controller.rb b/admin-front/app/controllers/ajax/films_controller.rb
@@ -0,0 +1,11 @@
+class Ajax::FilmsController < ApplicationController
+  def index
+    films = film_api.staff_get_films
+    render json: films
+  end
+
+  def show
+    film = film_api.staff_get_film(params[:id])
+    render json: film
+  end
+end
diff --git a/admin-front/app/controllers/application_controller.rb b/admin-front/app/controllers/application_controller.rb
@@ -40,6 +40,10 @@ def film_api
     @film_api ||= DvdRentalStaffClient::FilmApi.new(_staff_api_client)
   end
 
+  def actor_api
+    @actor_api ||= DvdRentalStaffClient::ActorApi.new(_staff_api_client)
+  end
+
   private
 
   def _staff_api_client

diff --git a/admin-front/app/controllers/home_controller.rb b/admin-front/app/controllers/home_controller.rb
@@ -1,6 +1,5 @@
 class HomeController < ApplicationController
   def show
-    @films = film_api.staff_get_films
   end
 end
 
diff --git a/admin-front/app/javascript/packs/home.ts b/admin-front/app/javascript/packs/home.ts
@@ -6,12 +6,31 @@
 // All it does is render <div>Hello Vue</div> at the bottom of the page.
 
 import Vue from 'vue'
-import Home from '../src/Home.vue'
-import Element from 'element-ui'
+import VueRouter from 'vue-router'
+import App from '../src/App.vue'
+import ElementUI from 'element-ui'
+import locale from 'element-ui/lib/locale/lang/ja'
 
-Vue.use(Element)
+Vue.use(VueRouter)
+Vue.use(ElementUI, { locale })
+
+import FilmIndex from '../src/FilmIndex.vue'
+import FilmCreate from '../src/FilmCreate.vue'
+import FilmDetail from '../src/FilmDetail.vue'
+import CustomerIndex from '../src/CustomerIndex.vue'
+
+const router = new VueRouter({
+  routes:  [
+    { path: '/', component: FilmIndex },
+    { path: '/films/new', component: FilmCreate },
+    { path: '/films/:id', component: FilmDetail },
+    { path: '/customers', component: CustomerIndex },
+  ]
+})
 
 document.addEventListener('DOMContentLoaded', () => {
-  document.body.appendChild(document.createElement('hello'))
-  new Vue(Home).$mount('hello')
+  new Vue({
+    router,
+    render: h => h(App),
+  }).$mount('#app')
 })
diff --git a/admin-front/app/javascript/src/App.vue b/admin-front/app/javascript/src/App.vue
@@ -0,0 +1,36 @@
+<template>
+    <el-container>
+        <el-header>
+            kotlin dvd rental 管理画面
+        </el-header>
+
+        <el-container>
+            <el-aside>
+                <el-menu
+                    class="el-menu-vertical-demo"
+                    router
+                >
+                    <el-menu-item index="/">
+                        <i class="el-icon-menu"></i>
+                        <span>映画</span>
+                    </el-menu-item>
+                    <el-menu-item index="/customers">
+                        <i class="el-icon-setting"></i>
+                        <span>顧客</span>
+                    </el-menu-item>
+                </el-menu>
+            </el-aside>
+
+            <el-main>
+                <router-view></router-view>
+            </el-main>
+         </el-container>
+    </el-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+})
+</script>
diff --git a/admin-front/app/javascript/src/CustomerIndex.vue b/admin-front/app/javascript/src/CustomerIndex.vue
@@ -0,0 +1,12 @@
+<template>
+    <div>
+        customer index
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+})
+</script>
diff --git a/admin-front/app/javascript/src/FilmCreate.vue b/admin-front/app/javascript/src/FilmCreate.vue
@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <h1>映画 新規作成</h1>
+
+        <el-form ref="form" :model="form" label-width="120px" size="mini">
+            <el-form-item label="タイトル">
+                <el-input v-model="form.title"></el-input>
+            </el-form-item>
+
+            <el-form-item label="説明">
+                <el-input v-model="form.description"></el-input>
+            </el-form-item>
+
+            <el-form-item label="出演者">
+                  <el-select
+                    v-model="form.actorIds"
+                    multiple
+                    filterable
+                    remote
+                    :reserve-keyword="false"
+                    placeholder="名前で検索してください"
+                    :remote-method="searchActors"
+                    :loading="isSearchActorLoading">
+                        <el-option
+                            v-for="actor in actors"
+                            :key="actor.id"
+                            :label="actor.fullName"
+                            :value="actor.id">
+                    </el-option>
+                </el-select>
+            </el-form-item>
+
+            <el-form-item label="出版年">
+                <el-date-picker
+                    v-model="form.releaseYear"
+                    type="year"
+                    placeholder="出版年を選択してください">
+                </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="レンタル料金">
+                <el-input type="text" v-model.number="form.rentalRate" />$
+            </el-form-item>
+
+            <el-form-item label="原価">
+                <el-input type="text" v-model.number="form.replacementCost" />$
+            </el-form-item>
+
+            <el-form-item label="再生時間">
+                <el-input type="text" v-model.number="form.length" />分
+            </el-form-item>
+
+            <el-form-item label="言語">
+                <el-checkbox-group v-model="form.languageId">
+                </el-checkbox-group>
+            </el-form-item>
+
+            <el-form-item label="カテゴリ">
+                <el-checkbox-group v-model="form.categoryIds">
+                    <el-checkbox label="Online activities" name="type"></el-checkbox>
+                    <el-checkbox label="Promotion activities" name="type"></el-checkbox>
+                    <el-checkbox label="Offline activities" name="type"></el-checkbox>
+                    <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+
+            <el-form-item>
+                <el-button type="primary" @click="onSubmit">Create</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import axios from 'axios'
+
+export default Vue.extend({
+    data() {
+        return {
+            form: {
+                actorIds: []
+            },
+            actors: [],
+            isSearchActorLoading: false,
+        }
+    },
+    methods: {
+        async onSubmit() {
+            console.log(this.form)
+            //try {
+            //    const res = await axios.post("/ajax/films")
+            //    this.$router.push("/")
+            //} catch (e) {
+            //    alert(e)
+            //}
+        },
+        async searchActors(query: string) {
+            if (query == "") { return }
+
+            try {
+                this.isSearchActorLoading = true
+                const res = await axios.get("/ajax/actors/search", {
+                    params: {query: query}
+                 })
+                this.actors = res.data
+                this.isSearchActorLoading = false
+            } catch (e) {
+                this.isSearchActorLoading = false
+                alert(e)
+            }
+        }
+    }
+})
+</script>
diff --git a/admin-front/app/javascript/src/FilmDetail.vue b/admin-front/app/javascript/src/FilmDetail.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <el-card>
+            <h1>{{ film.title }} ({{ film.releaseYear }})</h1>
+            <table>
+                <tr>
+                    <th>説明</th>
+                    <td>{{ film.description }}</td>
+                </tr>
+                <tr>
+                    <th>言語</th>
+                    <td>{{ film.language.name }}</td>
+                </tr>
+                <tr>
+                    <th>レンタル料金</th>
+                    <td>{{ film.rentalRate }}$</td>
+                </tr>
+                <tr>
+                    <th>再生時間</th>
+                    <td>{{ film.length }}分</td>
+                </tr>
+                <tr>
+                    <th>カテゴリ</th>
+                    <td>
+                        <span v-for="category in film.categories" :key="category.id">
+                            {{ category.name }}
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <th>主演</th>
+                    <td>
+                        <span v-for="actor in film.actors" :key="actor.id">
+                            {{ actor.firstName }}
+                        </span>
+                    </td>
+                </tr>
+            </table>
+        </el-card>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import axios from 'axios'
+
+export default Vue.extend({
+    data() {
+        return {
+            id: this.$route.params.id,
+            film: {
+                language: {},
+                actors: [],
+                categories: []
+            }
+        }
+    },
+    async mounted() {
+        try {
+            const res = await axios.get(`/ajax/films/${this.id}`)
+            this.film = res.data
+        } catch (e) {
+            alert(e)
+        }
+    },
+})
+</script>