use kebab case in FE components

Author: nmdanny

Closure_Front_End/src/components/Navigation.vue

@@ -4,7 +4,7 @@
   <div class="field">
     <label class="label">מסלול</label>
     <div class="control" dir="rtl">
-      <Multiselect
+      <multiselect
         placeholder="חיפוש מסלול"
         v-model="selectedTrack"
         searchable
@@ -19,16 +19,15 @@
   <div class="field">
     <label class="label">קורס</label>
     <div class="control" dir="rtl">
-      <Multiselect
+      <multiselect
         placeholder="חיפוש קורס"
         searchable
-        @update:modelValue="selectCourseHandler"
+        @update:modelValue="selectCourse"
         :disabled="!selectedTrack"
         :delay="0"
         :minChars="1"
         :resolveOnLoad="false"
         :options="fetchCourses"
-        ref="courseMultiselect"
       />
     </div>
   </div>
@@ -62,10 +61,6 @@ export default {
       const url = `tracks/${this.selectedTrack?.pk ?? 'null'}/courses/?limit=6&offset=15&data_year=${this.selectedYear}&search=${query}`;
       return await fetchDjangoListIntoSelectOptions(this.http, url, course => course.name);
     },
-    selectCourseHandler(course) {
-      // this.$refs.courseMultiselect.clear();
-      this.selectCourse(course);
-    }
   }
 };
 </script>

Closure_Front_End/src/components/User.vue

@@ -31,7 +31,7 @@
         <li>
           <label class="menu-label">בחר מסלול מרשימה</label>
           <div class="control" >
-            <Multiselect
+            <multiselect
               placeholder="חיפוש מסלול"
               v-model="newTrack"
               searchable

Closure_Front_End/src/views/Home.vue

@@ -7,8 +7,8 @@
             <navigation
               :allcourses="courses"
             />
-            <CourseDetail :course="selectedCourse" v-if="selectedCourse" />
-            <ProgressBox :allcourses="courses" />
+            <course-detail :course="selectedCourse" v-if="selectedCourse" />
+            <progress-box :allcourses="courses" />
           </div>
           <div class="column" v-for="year in years" :key="year">
             <year :year="year" />