adapt-authoring-ui 0.0.1

package/app/modules/projects/views/projectsSidebarView.js

@@ -0,0 +1,172 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var SidebarItemView = require('modules/sidebar/views/sidebarItemView');
+
+  var ProjectsSidebarView = SidebarItemView.extend({
+    settings: {
+      autoRender: true
+    },
+
+    events: {
+      'click .projects-sidebar-add-course': 'addCourse',
+      'click .projects-sidebar-my-courses': 'gotoMyCourses',
+      'click .projects-sidebar-shared-courses': 'gotoSharedCourses',
+      'click .sidebar-filter-clear': 'clearFilterInput',
+      'click .projects-sidebar-tag': 'onFilterButtonClicked',
+      'click .projects-sidebar-add-tag': 'onAddTagClicked',
+      'click .projects-sidebar-row-filter': 'onFilterRemovedClicked',
+      'keyup .projects-sidebar-filter-search-input': 'onKeyUp',
+      'paste .projects-sidebar-filter-search-input': 'onPaste'
+    },
+
+    initialize: function() {
+      this.listenTo(Origin, 'sidebarFilter:filterByTags', this.filterProjectsByTags);
+      this.listenTo(Origin, 'sidebarFilter:addTagToSidebar', this.addTagToSidebar);
+      this.listenTo(Origin, 'sidebar:update:ui', this.updateUI);
+      
+      this.debouncedFilterProjectsByTitle = _.debounce(this.filterProjectsByTitle.bind(this), 1000);
+      return SidebarItemView.prototype.initialize.apply(this, arguments);
+    },
+
+    postRender: function() {
+      this.tags = [];
+      this.usedTags = [];
+    },
+
+    highlightSearchBox: function(){
+      this.$('.projects-sidebar-filter-search-input').removeClass('search-highlight');
+      if (this.$('.projects-sidebar-filter-search-input').val()) {
+        this.$('.projects-sidebar-filter-search-input').addClass('search-highlight');
+      }
+    },
+
+    updateUI: function(userPreferences) {
+      if (userPreferences.search) {
+        this.$('.projects-sidebar-filter-search-input').val(userPreferences.search);
+      }
+      this.highlightSearchBox();
+      if (userPreferences.tags) {
+        this.tags = userPreferences.tags;
+        _.each(userPreferences.tags, this.addTagToSidebar, this);
+      }
+    },
+
+    addCourse: function() {
+      Origin.router.navigateTo('project/new');
+    },
+
+    gotoMyCourses: function() {
+      Origin.router.navigateTo('projects');
+    },
+
+    gotoSharedCourses: function() {
+      Origin.router.navigateTo('projects/shared');
+    },
+
+    filterProjectsByTitle: function() {
+      var filterText = this.$('.projects-sidebar-filter-search-input').val().trim();
+      Origin.trigger('dashboard:dashboardSidebarView:filterBySearch', filterText);
+      this.highlightSearchBox();
+    },
+
+    clearFilterInput: function(event) {
+      event && event.preventDefault();
+
+      var $currentTarget = $(event.currentTarget);
+      $currentTarget.prev('.projects-sidebar-filter-input').val('').trigger('keyup', [true]);
+      this.highlightSearchBox();
+    },
+
+    onFilterButtonClicked: function(event) {
+      event && event.preventDefault();
+      // toggle filter
+      $currentTarget = $(event.currentTarget);
+      var filterType = $currentTarget.attr('data-tag');
+      if ($currentTarget.hasClass('selected')) {
+        $currentTarget.removeClass('selected');
+        Origin.trigger('dashboard:sidebarFilter:remove', filterType);
+      } else {
+        $currentTarget.addClass('selected');
+        Origin.trigger('dashboard:sidebarFilter:add', filterType);
+      }
+    },
+
+    onAddTagClicked: function(event) {
+      event && event.preventDefault();
+      var availableTags = [];
+      // create an array of unique project tags
+      this.collection.each(function(tag) {
+        var availableTagsTitles = _.pluck(availableTags, 'title');
+        var usedTagTitles = _.pluck(this.usedTags, 'title');
+        if (!_.contains(availableTagsTitles, tag.get('title')) && !_.contains(usedTagTitles, tag.get('title'))) {
+          availableTags.push(tag.attributes);
+        }
+      }, this);
+
+      Origin.trigger('sidebar:sidebarFilter:add', {
+        title: Origin.l10n.t('app.filterbytags'),
+        items: availableTags
+      });
+    },
+
+    onTagClicked: function(event) {
+      var tag = $(event.currentTarget).toggleClass('selected').attr('data-tag');
+      this.filterProjectsByTags(tag);
+    },
+
+    filterProjectsByTags: function(tag) {
+      // toggle tag
+      if (_.findWhere(this.tags, { id: tag.id } )) {
+        this.tags = _.reject(this.tags, function(tagItem) {
+          return tagItem.id === tag.id;
+        });
+      } else {
+        this.tags.push(tag);
+      }
+      Origin.trigger('dashboard:dashboardSidebarView:filterByTags', this.tags);
+    },
+
+    addTagToSidebar: function(tag) {
+      this.usedTags.push(tag);
+
+      var template = Handlebars.templates['sidebarRowFilter'];
+      var data = {
+        rowClasses: 'sidebar-row-filter',
+        buttonClasses:'projects-sidebar-row-filter',
+        tag: tag
+      };
+
+      this.$('.projects-sidebar-add-tag').parent().after(template(data));
+    },
+
+    onFilterRemovedClicked: function(event) {
+      var tag = {
+        title: $(event.currentTarget).attr('data-title'),
+        id: $(event.currentTarget).attr('data-id')
+      }
+      // Remove this tag from the usedTags
+      this.usedTags = _.reject(this.usedTags, function(item) {
+        return item.id === tag.id;
+      });
+
+      this.filterProjectsByTags(tag);
+
+      $(event.currentTarget).parent().remove();
+    },
+
+    onKeyUp: function(event) {
+      event && event.preventDefault();
+
+      this.debouncedFilterProjectsByTitle();
+    },
+
+    onPaste: function() {
+      this.filterProjectsByTitle();
+    }
+  }, {
+    template: 'projectsSidebar'
+  });
+
+  return ProjectsSidebarView;
+});

package/app/modules/projects/views/projectsView.js

@@ -0,0 +1,271 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var CourseModel = require('core/models/courseModel');
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+  var ProjectView = require('./projectView');
+  var UserCollection = require('modules/userManagement/collections/userCollection');
+
+  var ProjectsView = OriginView.extend({
+    className: 'projects',
+    supportedLayouts: [
+      "grid",
+      "list"
+    ],
+
+    preRender: function(options) {
+      OriginView.prototype.preRender.apply(this, arguments);
+      this._isShared = options._isShared;
+      this.allTags = options.tags.models.slice() || [];
+      this.usersCollection = new UserCollection();
+      this.childViews = [];
+      this.filterText = '';
+      this.filterTags = [];
+    },
+
+    postRender: function() {
+      this.settings.preferencesKey = 'dashboard';
+      this.initUserPreferences();
+      this.initEventListeners();
+      this.initPaging();
+    },
+
+    initEventListeners: function() {
+      this._doLazyScroll = _.throttle(this.doLazyScroll, 250).bind(this);
+      this._onResize = _.debounce(this.onResize, 250).bind(this);
+
+      this.listenTo(Origin, {
+        'window:resize dashboard:refresh': this._onResize,
+        'dashboard:dashboardSidebarView:filterBySearch': text => {
+          this.filterText = text;
+          this.doFilter()
+        },
+        'dashboard:dashboardSidebarView:filterByTags': tags => {
+          this.filterTags = tags;
+          this.doFilter()
+        },
+        'dashboard:sort:asc': () => this.doSort('asc'),
+        'dashboard:sort:desc': () => this.doSort('desc'),
+        'dashboard:sort:updated': () => this.doSort('updated')
+      });
+
+      this.supportedLayouts.forEach(l => {
+        this.listenTo(Origin, `dashboard:layout:${l}`, () => this.doLayout(l));
+      }, this);
+
+      $('.contentPane').on('scroll', this._doLazyScroll);
+    },
+
+    initUserPreferences: function() {
+      var prefs = this.getUserPreferences();
+      this.filterText = prefs.search;
+      this.filterTags = prefs.tags
+        ? prefs.tags.reduce((m, tagId) => {
+            const tagModel = this.allTags.find(tag => tag.get('_id') === tagId)
+            if (tagModel) m.push({id:tagId, title:tagModel.get('title')})
+            return m
+          }, [])
+        : [];
+      this.doLayout(prefs.layout);
+      this.doSort(prefs.sort, false);
+      this.doFilter(false);
+      // set relevant filters as selected
+      $(`a[data-callback='dashboard:layout:${prefs.layout}']`).addClass('selected');
+      $(`a[data-callback='dashboard:sort:${prefs.sort}']`).addClass('selected');
+      // need to refresh this to get latest filters
+      prefs = this.getUserPreferences();
+      prefs.tags = this.filterTags
+      Origin.trigger('options:update:ui', prefs);
+      Origin.trigger('sidebar:update:ui', prefs);
+    },
+
+    // Set some default preferences
+    getUserPreferences: function() {
+      var prefs = OriginView.prototype.getUserPreferences.apply(this, arguments);
+
+      if(!prefs.layout) prefs.layout = 'grid';
+      if(!prefs.sort) prefs.sort = 'asc';
+
+      return prefs;
+    },
+
+    initPaging: function() {
+      if(this.resizeTimer) {
+        clearTimeout(this.resizeTimer);
+        this.resizeTimer = -1;
+      }
+      var $item = new ProjectView({ model: new CourseModel() }).$el;
+      $item.css({
+        visibility: 'hidden'
+      }).appendTo('.projects-list'); // Fixed: added missing class selector
+
+      var containerHeight = $(window).height()-this.$el.offset().top;
+      var itemHeight = $item.outerHeight(true);
+      var columns = Math.floor(this.$('.projects-inner').width()/$item.outerWidth(true));
+      var rows = Math.max(1, Math.ceil(containerHeight/itemHeight));
+      $item.remove();
+      // columns stack nicely, but need to add extra row if it's not a clean split
+      if((containerHeight % itemHeight) > 0) rows++;
+      this.collection.queryOptions.limit = columns*rows;
+      this.resetCollection(this.setViewToReady);
+    },
+
+    getProjectsContainer: function() {
+      return this.$('.projects-list');
+    },
+
+    appendProjectItem: function(model) {
+      let creatorName;
+      try {
+        const { firstName, lastName } = this.usersCollection.findWhere({ _id: model.get('createdBy') }).attributes;
+        creatorName = `${firstName} ${lastName}`;
+      } catch(e) {
+        creatorName = Origin.l10n.t('app.unknownuser');
+      }
+      if(this._isShared && creatorName) model.set('creatorName', creatorName);
+      model.set('tagTitles', model.get('tags').map(tId => this.allTags.find(t => t.get('_id') === tId).get('title')));
+      const view = new ProjectView({ model });
+      this.childViews.push(view);
+      this.getProjectsContainer().append(view.$el);
+    },
+
+    resetCollection: function(cb) {
+      this.abortFetches();
+      this.removeChildViews();
+      this.allCourses = [];
+      this.page = 1;
+      this.collection.queryOptions.collation = { locale: navigator.language.substring(0, 2) };
+      this.shouldStopFetches = false;
+      this.collection.reset();
+      this.fetchCollection(cb);
+    },
+
+    abortFetches: function() {
+
+      doAbort(this.usersCollectionXhr);
+      doAbort(this.collectionXhr);
+
+      function doAbort(xhr) {
+        if (!xhr) return;
+
+        if(xhr.readyState > 0 && xhr.readyState < 4){
+          xhr.abort();
+        }
+      }
+    },
+
+    fetchCollection: function(cb) {
+      if(this.shouldStopFetches) return;
+
+      this.isCollectionFetching = true;
+
+      this.usersCollection.fetch({
+        success: (collection, response) => {
+          Object.assign(this.collection.queryOptions, {
+            skip: this.allCourses.length,
+            page: this.page++,
+          });
+          this.collectionXhr = this.collection.fetch({
+            success: (collection, response) => {
+              this.isCollectionFetching = false;
+
+              collection.models.forEach(model => {
+                const courseId = model.get('_courseId')
+                if (this.allCourses.find(course => course.get('_courseId') === courseId)) return
+                this.allCourses.push(model);
+              })
+
+              this.removeChildViews();
+              this.allCourses.forEach(a => this.appendProjectItem(a));
+
+              // stop further fetching if this is the last page
+              if(response.length < this.collection.queryOptions.limit) this.shouldStopFetches = true;
+
+              this.$('.no-projects').toggleClass('display-none', this.allCourses.length > 0);
+              if(typeof cb === 'function') cb(collection);
+            },
+            error: () => {
+              this.isCollectionFetching = false;
+            }
+          });
+        },
+        error: () => {
+          this.isCollectionFetching = false;
+        }
+      });
+    },
+
+    doLazyScroll: function(e) {
+      if(this.isCollectionFetching) {
+        return;
+      }
+      const $last = $('.project-list-item').last();
+      const triggerY = ($('.contentPane').offset().top + $('.contentPane').height()) - ($last.height()/2) ;
+
+      if($last.offset().top < triggerY) this.fetchCollection();
+    },
+
+    doLayout: function(layout) {
+      if(this.supportedLayouts.indexOf(layout) === -1) {
+        return;
+      }
+      this.getProjectsContainer().attr('data-layout', layout);
+      this.setUserPreference('layout', layout);
+    },
+
+    doSort: function(sort, fetch) {
+      let data;
+      switch(sort) {
+        case "desc":
+          data = { title: -1 };
+          break;
+        case "updated":
+          data = { updatedAt: -1 };
+          break;
+        case "asc":
+        default:
+          sort = "asc";
+          data = { title: 1 };
+        }
+      this.collection.queryOptions.sort = data;
+      this.setUserPreference('sort', sort);
+
+      if(fetch !== false) this.resetCollection();
+    },
+
+    doFilter: function(fetch) {
+      const text = this.filterText || '';
+      const tags = this.filterTags || [];
+
+      this.collection.customQuery.title = {
+        $regex: `.*${text.toLowerCase()}.*`,
+        $options: 'i'
+      };
+      this.setUserPreference('search', text, true);
+
+      this.collection.customQuery.tags = {$all: _.pluck(tags, 'id')};
+      this.setUserPreference('tags', this.filterTags.map(tag => tag.id), true);
+
+      if(fetch !== false) this.resetCollection();
+    },
+
+    onResize: function() {
+      this.initPaging();
+    },
+
+    removeChildViews: function() {
+      this.childViews.forEach(child => child.remove());
+      this.childViews = [];
+    },
+
+    remove: function() {
+      $('.contentPane').off('scroll', this._doLazyScroll);
+      this.removeChildViews();
+      OriginView.prototype.remove.apply(this, arguments);
+    }
+  }, {
+    template: 'projects'
+  });
+
+  return ProjectsView;
+});