הומניסטים בטכניון? VUE.JS

מאת שלומי גוטליב

במסגרת פיתוח עם המלטיסייט שלנו בטכניון העלנו את אתר המחלקה ללימודים הומניסטיים בטכניון.

בפרויקט עלה הצורך במיון מהיר של מאות שורות תוכן עבור המשתמש, וכן כלי ניהול מהירים לעורך התוכן, לצורך ניהול והרשמה לקורסים. ניתן לראות דוגמה לפתרון כאן https://humanities.technion.ac.il/faculty_courses/ 

יש מקרים שאנגולר (ANGULARJS) גדול על מידות הפרויקט. זה המקום לשלב ספריה קלת משקל כמו VUE.JS (נשמע כמו VIEW אז למה צרפתית). VUEJS מאפשרת לבצע הצגה של נתונים בקלות מתוך JSON של פוסטים באתר. אומנם ללא כל הפילטרים והיכולות של אנגולר, אבל באופן מהיר וקל. מבחן השוואתי - בקרוב...

באפן כללי הגישה ב VUEJS מבוססת על אובייקט החיפוש כמו שנראה בדוגמה הבאה

var app = new Vue({
        el: '#courses-list-app',
        // Courses object come from wp_localized_script and includes the JSON data for the courses and the years
        data: {
            freeSearch: "",
            semesterFilter: "",
            yearFilter: "",
            degreeFilter: "",
            courses: JSON.parse(Courses.courses),
            courseYears: JSON.parse(Courses.courseYears)
        },
        methods : {
            compareByCourseNum : function(a, b) {
                if (a.number > b.number) {
                    return 1;
                } else if (a.number < b.number) {
                    return -1;
                }
                return 0;
            },
            compareByActive: function(a, b) {
                if (a.active < b.active) {
                    return 1;
                } else if (a.active > b.active) {
                    return -1;
                }
                return 0;
            }
        },
        computed: {
            filteredCourses: function() {
                var self = this;
                return self.courses.filter(function(course) {
                    // checks for free search input and all filters in the table header
                    return (course.name.indexOf(self.freeSearch) > -1 ||
                        course.number.indexOf(self.freeSearch) > -1 ||
                        course.lecturer_name.indexOf(self.freeSearch) > -1) &&
                        (course.year === self.yearFilter || self.yearFilter == "") &&
                        (course.degree === self.degreeFilter || self.degreeFilter == "")
                    // sort the results, first by course number then by activity status
                    }).sort(self.compareByCourseNum).sort(self.compareByActive);
            }
        }
    });

https://github.com/shgotlib/Academic-Course-Posttype/blob/master/inc/js/...