fix: 可用課程名稱搜尋(#3)

$emit is from ChooseDepartment.

index.html

@@ -51,6 +51,7 @@
                                 v-bind:departments="departments"
                                 v-bind:selected="selectDepartment"
                                 v-on:selectok="select"
+                                v-on:foundedok="founded"
                             >
                             </choose-department><br>
                         </div><br><br>
@@ -59,6 +60,7 @@
                                 v-bind:courses="courses"
                                 v-bind:selected_d="selectDepartment"
                                 v-bind:selected_c="selectCourses"
+                                v-bind:find_name="foundName"
                                 v-on:add-course="addCourse"
                             >
                             </course-anslist>

js/components/chooseDepartment.vue

@@ -2,7 +2,8 @@ var chooseDepartment = {
     props: ['departments', 'selected'],
     data: function(){
         return {
-            initSelect: this.selected
+            initSelect: this.selected,
+            initFounded: "",
         }
     },
     watch: {
@@ -11,10 +12,17 @@ var chooseDepartment = {
         },
         'initSelect': function(){
             this.$emit("selectok", this.initSelect)
+        },
+        'initFounded': function(){
+            this.$emit("foundedok", this.initFounded)
         }
     },
     template: `
+    
     <div>
+        <h5>1. 「課程名稱」直接搜尋</h5>
+        <input class="form-control" type='text' v-model='initFounded'>
+        <br>或<br><br>
         <h5>1. 選擇類別</h5>
         <select class="custom-select mr-sm-2" v-model="initSelect">
             <option v-for="(item, index) in departments" :key="index" 

js/components/coursesList.vue

@@ -1,8 +1,9 @@
 var coursesList = {
-    props: ['courses', 'selected_d', 'selected_c'],
+    props: ['courses', 'selected_d', 'selected_c', 'find_name'],
     data: function(){
         return {
-            selectedTime: []
+            selectedTime: [],
+            foundedCourses: []
         }
     },
     methods: {
@@ -42,31 +43,64 @@ var coursesList = {
             }
             this.selectedTime = temp
         },
+        'find_name': function(){
+            var temp = []
+            for(var c of this.courses){
+                if(c.name.indexOf(this.find_name) != -1){
+                    temp.push(c)
+                }
+            }
+            this.foundedCourses = temp
+        }
     },
     template: `
     <div>
     <h5>2. 安排課程</h5>
+    <p style="color: orange" v-if="find_name"> ※ 已套用「名稱」搜尋： <br>{{find_name}}</p>
     <table class="table table-striped table-bordered">
-        <tr v-for="(course, index) in courses" :key="index"
-            v-if="course.department == selected_d">
-            <td>
-                <div class="container">
-                    <div class="row">
-                        <b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b>
-                    </div>
-                    <div class="row">
-                        <div class="col-sm-8">
-                            {{ course.teacher }} ‧ {{ course.time }} 
+        <template v-if="find_name">
+            <tr v-for="(course, index) in foundedCourses" :key="index">
+                <td>
+                    <div class="container">
+                        <div class="row">
+                            <b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b>
                         </div>
-                        <div class="col-sm-4">
-                            <button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
-                                <span>&#43;</span>
-                            </button>
+                        <div class="row">
+                            <div class="col-sm-8">
+                                {{ course.teacher }} ‧ {{ course.time }} 
+                            </div>
+                            <div class="col-sm-4">
+                                <button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
+                                    <span>&#43;</span>
+                                </button>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </td>
-        </tr>
+                </td>
+            </tr>
+        </template>
+        <template v-else>
+            <tr v-for="(course, index) in courses" :key="index"
+                v-if="course.department == selected_d">
+                <td>
+                    <div class="container">
+                        <div class="row">
+                            <b>{{ course.name }} (<a v-bind:href="'https://ccweb.ncnu.edu.tw/student/aspmaker_course_opened_detail_viewview.php?showdetail=&year=1091&courseid='+ course.number +'&_class=' + course.class + '&modal=0'">詳</a>)</b>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-8">
+                                {{ course.teacher }} ‧ {{ course.time }} 
+                            </div>
+                            <div class="col-sm-4">
+                                <button v-if="isOK(course)" type="button" v-on:click="$emit('add-course', course)" class="btn btn-primary">
+                                    <span>&#43;</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </td>
+            </tr>
+        </template>
     </table>
     </div>
     `

js/index.vue

@@ -5,6 +5,7 @@ var vm = new Vue({
         'selectCourses': [],
         'departments': [],
         'selectDepartment': '',
+        'foundName': "",
     },
     mounted() {
         axios
@@ -43,6 +44,9 @@ var vm = new Vue({
         'select': function(department){
             this.selectDepartment = department
         },
+        'founded': function(courseName){
+            this.foundName = courseName
+        },
         'addCourse': function(course){
             var time = this.getTime(course.time)
             for(var t of time){