Skip to content
This repository was archived by the owner on Jul 27, 2024. It is now read-only.

Commit d98d671

Browse files
nmdannynmdanny
committed
WIP add course detail, refactor Home
- Create CourseDetail component, which will be mostly used for when adding a course - Refactor ProgressBox outside of Home - 'Home' is now responsible for the currently selected course, you can select a course either by clicking on it(From one of the 'Year' components) or via the select at 'Navigation' component)
1 parent 06bf053 commit d98d671

7 files changed

Lines changed: 123 additions & 24 deletions

File tree

‎Closure_Front_End/src/components/CourseBox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<script>
2626
export default {
2727
props: ["course"],
28-
28+
emits: ['clickclose'],
2929
methods: {
3030
colorMatch() {
3131
if (this.course.type === "MUST") return "must";

‎Closure_Front_End/src/components/CourseDetail.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
3+
<div class="card">
4+
<header class="card-header">
5+
<p class="card-header-title">
6+
{{ course.course_id}} -
7+
{{ course.name }}
8+
</p>
9+
<button class="card-header-icon" aria-label="more options">
10+
<span class="icon">
11+
<i class="fas fa-angle-down" aria-hidden="true"></i>
12+
</span>
13+
</button>
14+
</header>
15+
<div class="card-content">
16+
<div class="content">
17+
18+
<ul>
19+
<li>
20+
משנתון:
21+
<strong>{{ course.data_year}}</strong>
22+
</li>
23+
<li>
24+
סמסטר:
25+
<strong> {{ courseSemester }}</strong>
26+
</li>
27+
<li>
28+
נ"ז:
29+
<strong>{{ course.points}}</strong>
30+
</li>
31+
<li>
32+
סוג:
33+
<strong>{{courseType}}</strong>
34+
</li>
35+
<li>
36+
הערות:
37+
<p>{{course.comment}}</p>
38+
</li>
39+
40+
<li> {{ JSON.stringify({...course, comment: ""}) }} </li>
41+
</ul>
42+
</div>
43+
</div>
44+
<footer class="card-footer">
45+
<a href="#" class="card-footer-item">גרור</a>
46+
<a href="#" class="card-footer-item">מחק</a>
47+
</footer>
48+
</div>
49+
</template>
50+
51+
<script>
52+
import { MODEL_COURSE_TYPE_TO_STRING, MODEL_SEMESTER_TO_STRING } from '@/utils.js'
53+
export default {
54+
props: {
55+
course: Object
56+
},
57+
computed: {
58+
courseType() {
59+
if (MODEL_COURSE_TYPE_TO_STRING.has(this.course.type)) {
60+
return MODEL_COURSE_TYPE_TO_STRING.get(this.course.type);
61+
}
62+
return "לא מוגדר";
63+
},
64+
courseSemester() {
65+
if (MODEL_SEMESTER_TO_STRING.has(this.course.semester)) {
66+
return MODEL_SEMESTER_TO_STRING.get(this.course.semester);
67+
}
68+
return "לא מוגדר";
69+
}
70+
}
71+
}
72+
</script>
73+
74+
<style>
75+
76+
</style>

‎Closure_Front_End/src/components/Navigation.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -21,41 +21,35 @@
2121
<div class="control" dir="rtl">
2222
<Multiselect
2323
placeholder="חיפוש קורס"
24-
v-model="selectedCourse"
2524
searchable
25+
@update:modelValue="selectCourseHandler"
2626
:disabled="!selectedTrack"
2727
:delay="0"
2828
:minChars="1"
2929
:resolveOnLoad="false"
3030
:options="fetchCourses"
31-
@update:modelValue="course => $emit('selectCourse', course)"
31+
ref="courseMultiselect"
3232
/>
3333
</div>
3434
</div>
35-
36-
<ProgressBox :allcourses = "allcourses"/>
3735
</template>
3836

3937
<script>
4038
import YearSelection from './YearSelection.vue'
41-
import ProgressBox from "./ProgressBox.vue";
4239
import Multiselect from '@vueform/multiselect';
4340
import { fetchDjangoListIntoSelectOptions } from '@/utils.js';
4441
4542
export default {
46-
components: { YearSelection, ProgressBox, Multiselect },
43+
components: { YearSelection, Multiselect },
4744
data() {
4845
return {
4946
"selectedYear": 2022,
5047
"selectedTrack": null,
51-
"selectedCourse": null,
5248
"value": null
5349
}
5450
},
55-
emits: ["selectCourse"],
5651
props: ["allcourses"],
57-
inject: ["http"],
58-
52+
inject: ["http", "selectCourse"],
5953
methods: {
6054
emitCourseClick(course) {
6155
this.$emit("clickCourse", course);
@@ -67,6 +61,10 @@ export default {
6761
async fetchCourses(query) {
6862
const url = `tracks/${this.selectedTrack?.pk ?? 'null'}/courses/?limit=6&offset=15&data_year=${this.selectedYear}&search=${query}`;
6963
return await fetchDjangoListIntoSelectOptions(this.http, url, course => course.name);
64+
},
65+
selectCourseHandler(course) {
66+
// this.$refs.courseMultiselect.clear();
67+
this.selectCourse(course);
7068
}
7169
}
7270
};

‎Closure_Front_End/src/components/Semester.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
:course="course"
1818
class="drag-el"
1919
draggable="true"
20+
@click="selectCourse(course)"
2021
@dragstart="startDrag($event, course)"
2122
@clickclose="deleteCourse(course)"
2223
></course-box>
@@ -36,7 +37,7 @@ import { courses, moveCourse, deleteCourse} from '@/course-store.js'
3637
3738
export default {
3839
props: ["year", "semester" ],
39-
40+
inject: [ "selectCourse"],
4041
components: { CourseBox, SemesterSummary },
4142
data() {
4243
return {

‎Closure_Front_End/src/huji-import/CandidateCourses.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,7 @@
9494

9595
<script>
9696
import { courses as currentCourses } from '@/course-store.js'
97-
98-
const MODEL_COURSE_TYPE_TO_STRING = new Map([
99-
["MUST", "חובה"],
100-
["CHOICE", "בחירה"],
101-
["CHOOSE_FROM_LIST", "חובת בחירה"],
102-
["CORNER_STONE", "אבן פינה"],
103-
["SUPPLEMENTARY", "לימודים משלימים"]
104-
])
97+
import { MODEL_COURSE_TYPE_TO_STRING } from '@/utils.js'
10598
10699
export default {
107100
props: {

‎Closure_Front_End/src/utils.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,26 @@ export function groupBy(xs, key) {
2525
}, {});
2626
}
2727

28+
export const MODEL_COURSE_TYPE_TO_STRING = new Map([
29+
["MUST", "חובה"],
30+
["CHOICE", "בחירה"],
31+
["CHOOSE_FROM_LIST", "חובת בחירה"],
32+
["CORNER_STONE", "אבן פינה"],
33+
["SUPPLEMENTARY", "לימודים משלימים"]
34+
]);
35+
36+
export const MODEL_SEMESTER_TO_STRING = new Map([
37+
['FIRST', "ראשון"],
38+
['SECOND', "שני"],
39+
['SUMMER', "קיץ"],
40+
['EITHER', "כל"],
41+
['ANNUAL', "שנתי"],
42+
// TODO: standardize model types in the code to avoid this
43+
// duplictation
44+
[1, "ראשון"],
45+
[2, "שני"]
46+
]);
47+
2848
/**
2949
* A function used to query a list endpoint from Django Rest Framework(DRF),
3050
* and return an array of objects suitable for passing into Multiselect component 'options'.

‎Closure_Front_End/src/views/Home.vue‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@
66
<div class="column is-2 is-right is-hidden-mobile is-hidden-touch">
77
<navigation
88
:allcourses="courses"
9-
@selectCourse="addCourse"
10-
></navigation>
9+
/>
10+
<CourseDetail :course="selectedCourse" v-if="selectedCourse" />
11+
<ProgressBox :allcourses="courses" />
1112
</div>
1213
<div class="column" v-for="year in years" :key="year">
1314
<year :year="year" />
@@ -26,6 +27,8 @@
2627
<script>
2728
import Year from "../components/Year.vue";
2829
import Navigation from "../components/Navigation.vue";
30+
import CourseDetail from '../components/CourseDetail.vue';
31+
import ProgressBox from "../components/ProgressBox.vue";
2932
import {
3033
courses,
3134
moveCourse,
@@ -35,7 +38,7 @@ import {
3538
3639
export default {
3740
name: "Closure()",
38-
components: { Navigation, Year },
41+
components: { Year, Navigation, CourseDetail, ProgressBox },
3942
data() {
4043
return {
4144
years: [
@@ -44,13 +47,21 @@ export default {
4447
{ id: 3, name: "שנה ג" },
4548
{ id: 4, name: "שנה ד" }
4649
],
47-
courses
50+
courses,
51+
selectedCourse: null
4852
};
4953
},
5054
methods: {
5155
moveCourse,
5256
deleteCourse,
5357
addCourse,
58+
},
59+
provide() {
60+
return {
61+
selectCourse: (course) => {
62+
this.selectedCourse = course;
63+
}
64+
};
5465
}
5566
};
5667
</script>

0 commit comments

Comments
 (0)