FE - WIP add course plan settings component

Author: nmdanny

Closure_Front_End/src/components/CoursePlanSettings.vue

@@ -0,0 +1,62 @@
+<template>
+  <p class="subtitle is-3">הגדרות תכנית לימודים</p>
+  <div class="field">
+    <year-selection label="שנת תחילת לימודים" v-model="selectedYear" />
+  </div>
+  <div class="field">
+    <label class="label">מסלול לימודים</label>
+    <div class="control" dir="rtl">
+      <multiselect
+        placeholder="חיפוש מסלול"
+        class="is-loading"
+        v-model="selectedTrack"
+        searchable
+        :delay="0"
+        :minChars="1"
+        :resolveOnLoad="false"
+        :options="fetchTracks"
+      />
+    </div>
+  </div>
+
+</template>
+
+<script>
+import YearSelection from "./YearSelection.vue";
+import Multiselect from "@vueform/multiselect";
+import { fetchDjangoListIntoSelectOptions } from "@/utils.js";
+import { currentTrack, setTrack } from "@/course-store.js";
+import { reactive, toRefs, inject, computed } from "vue";
+
+export default {
+  components: { YearSelection, Multiselect },
+  setup() {
+    console.log("setup tracksettings");
+    const state = reactive({
+      selectedYear: 2022,
+      selectedTrack: null,
+      saving: false,
+    });
+
+    const http = inject("http");
+    const fetchTracks = async (query) => {
+      const url = `tracks/?limit=10&data_year=${state.selectedYear}&search=${query}`;
+      return await fetchDjangoListIntoSelectOptions(
+        http,
+        url,
+        (track) => track.name
+      );
+    };
+
+    const selectedTrack = computed({
+      get() { return currentTrack },
+      set(newVal) { setTrack(newVal) }
+    })
+
+    return { ...toRefs(state), selectedTrack, fetchTracks };
+  },
+};
+</script>
+
+<style src="@vueform/multiselect/themes/default.css">
+</style>

Closure_Front_End/src/components/Navigation.vue

@@ -1,4 +1,5 @@
 <template>
+  <course-plan-settings />
   <h2 class="subtitle is-2">הוספת קורסים</h2>
   <year-selection label="גרסת שנתון" v-model="selectedYear" />
   <div class="field">
@@ -35,11 +36,12 @@
 
 <script>
 import YearSelection from './YearSelection.vue'
+import CoursePlanSettings from './CoursePlanSettings.vue'
 import Multiselect from '@vueform/multiselect';
 import { fetchDjangoListIntoSelectOptions } from '@/utils.js';
 
 export default {
-  components: { YearSelection, Multiselect },
+  components: { YearSelection, Multiselect, CoursePlanSettings },
   data() {
     return {
       "selectedYear": 2022,

Closure_Front_End/src/course-store.js

@@ -19,6 +19,13 @@ const getInitialState = () => {
 
 const state = reactive(getInitialState());
 
+/*   */
+watch(state, (newState) => {
+  localStorage.setItem(LS_PATH, JSON.stringify(newState));
+});
+
+/* course-plan operations */
+
 const getCoursesAsTakes = () => {
   return state.courses.map((course) => ({
     course: course.id,
@@ -69,7 +76,7 @@ export const deletePlan = async (plan) => {
 }
 
 export const loadPlan = async (planId) => {
-  console.assert(typeof(planId) === "number", "loadPlan() - planId must be a number")
+  // console.assert(typeof(planId) === "number", "loadPlan() - planId must be a number")
   const res = await http.get(`/course_plans/${planId}`)
   const plan = res.data
   console.log("loaded plan", plan)
@@ -85,9 +92,7 @@ export const loadPlan = async (planId) => {
   state.dirty = false
 }
 
-watch(state, (newState) => {
-  localStorage.setItem(LS_PATH, JSON.stringify(newState));
-});
+/* course  operations */
 
 export const addCourse = (course) => {
   if (!course) {
@@ -127,6 +132,16 @@ export const addCourses = (courses, overwrite) => {
   state.dirty = true;
 };
 
+/* track operations */
+
+export const setTrack = (newTrack) => {
+  console.log("Changing track, from", state.track, "to", newTrack);
+  state.track = newTrack;
+  state.dirty = true;
+}
+
+/* store state getters */
+
 export const courses = shallowReadonly(state.courses);
 export const currentTrack = computed(() => state.track);
 export const currentCourseplan = computed(() => state.courseplan);