adapt-authoring-ui 0.0.1

package/app/modules/pluginManagement/less/pluginManagement.less

@@ -0,0 +1,23 @@
+@import 'sharedStyles';
+
+.pluginManagement {
+  &-inner {
+    margin: 15px;
+    background-color: @white;
+    border: 1px solid #d6f2f9;
+  }
+}
+
+.pluginManagement-loading {
+    text-align:center;
+    padding:30px;
+}
+
+.pluginManagement-upload-plugin {
+  .form-container-style;
+  .form-group {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}

package/app/modules/pluginManagement/less/pluginType.less

@@ -0,0 +1,25 @@
+.pluginType-item.tb-row {
+  border-left: 5px solid white;
+
+  &.row-disabled {
+    color: #B5C2C6;
+  }
+  &.has-update {
+    border-left-color: @secondary-color;
+    background: lighten(@secondary-color, 53%);
+  }
+  .pluginType-update {
+    .user-uploaded {
+      padding: 10px 14px;
+    }
+    button {
+      &.plugin-update-check {
+        .secondary;
+      }
+      &.plugin-update-confirm {
+        .primary;
+      }
+    }
+  }
+}
+

package/app/modules/pluginManagement/templates/pluginManagement.hbs

@@ -0,0 +1,43 @@
+<div class="pluginManagement-inner inner">
+  <div class="pluginType-headings tb-heading col-row tb-row">
+
+    <div class="pluginType-heading pluginType-heading-title col-20">
+      <h4 class="pluginType-heading-title-inner tb-col-inner">{{t 'app.name'}}</h4>
+    </div>
+
+    <div class="pluginType-heading pluginType-heading-description col-40">
+      <h4 class="pluginType-heading-description-inner tb-col-inner">{{t 'app.description'}}</h4>
+    </div>
+
+    <div class="pluginType-heading pluginType-heading-version col-10 col-centered">
+      <h4 class="pluginType-heading-version-inner tb-col-inner">{{t 'app.version'}}</h4>
+    </div>
+
+    <div class="pluginType-heading pluginType-heading-enabled col-10 col-centered">
+      <h4 class="pluginType-heading-enabled-inner tb-col-inner">{{t 'app.enabled'}}</h4>
+    </div>
+
+    {{#ifValueEquals type 'extension'}}
+      <div class="pluginType-heading pluginType-heading-addedDefault col-10 col-centered">
+        <h4 class="pluginType-heading-addedDefault tb-col-inner">{{t 'app.addedDefault'}}</h4>
+      </div>
+    {{/ifValueEquals}}
+
+    <div class="pluginType-heading pluginType-heading-action col-10 col-centered">
+      <h4 class="pluginType-heading-action-inner tb-col-inner">{{t 'app.action'}}</h4>
+    </div>
+
+  </div>
+  <ul class="pluginManagement-plugins clearfix grid-layout">
+  {{!-- Plugins get render in here --}}
+    <div class="pluginManagement-loading">
+      {{t 'app.loading'}}
+    </div>
+  </ul>
+
+  <div class="pluginType-bulk-actions tb-row">
+    <div class="pluginType-action-buttons">
+      <button class="btn tertiary-hollow refresh-all-plugins">{{t 'app.refresh'}}</button>
+    </div>
+  </div>
+</div>

package/app/modules/pluginManagement/templates/pluginManagementSidebar.hbs

@@ -0,0 +1,40 @@
+<div class="sidebar-item-inner">
+    <div class="separator"></div>
+    <button class="pluginManagement-sidebar-upload action-primary">
+      <span class="plugin-management-sidebar-view-inner">{{t 'app.uploadplugin'}}</span>
+    </button>
+    <div class="separator"></div>
+  <div class="sidebar-row">
+    <button class="pluginManagement-sidebar-extensions">
+      <span class="pluginManagement-sidebar-extensions">
+        <i class="fa fa-plug"></i>{{t 'app.extensions'}}
+      </span>
+    </button>
+  </div>
+  <div class="sidebar-row">
+    <button class="pluginManagement-sidebar-components">
+      <span class="pluginManagement-sidebar-components">
+        <i class="fa fa-cubes"></i>{{t 'app.components'}}
+      </span>
+    </button>
+  </div>
+  <div class="sidebar-row">
+    <button class="pluginManagement-sidebar-themes">
+      <span class="pluginManagement-sidebar-themes">
+        <i class="fa fa-image"></i>{{t 'app.themes'}}
+      </span>
+    </button>
+  </div>
+  <div class="sidebar-row">
+    <button class="pluginManagement-sidebar-menus">
+      <span class="pluginManagement-sidebar-menus">
+        <i class="fa fa-sitemap"></i>{{t 'app.menus'}}
+      </span>
+    </button>
+  <div class="separator"></div>
+  <div class="sidebar-row">
+    <button class="pluginManagement-sidebar-getPlugins">
+      <i class="fa fa-external-link"></i>{{t 'app.getnewplugins'}}
+    </button>
+  </div>
+</div>

package/app/modules/pluginManagement/templates/pluginManagementUpload.hbs

@@ -0,0 +1,12 @@
+<div class="inner">
+  <form class="plugin-form forms plugin-form" action="api/contentplugins/install" method="post">
+    <div class="form-group">
+      <label for="file">
+        {{t 'app.pluginfile'}} <span class="req">*</span>
+        <span class="field-error display-none" data-error="">{{t 'app.required'}}</span>
+      </label>
+      <input type="file" class="plugin-file" name="file">
+      {{maxUploadSize}}
+    </div>
+  </form>
+</div>

package/app/modules/pluginManagement/templates/pluginManagementUploadSidebar.hbs

@@ -0,0 +1,13 @@
+<div class="sidebar-item-inner">
+
+  <div class="separator"> </div>
+
+  <button type="submit" class="pluginManagement-upload-sidebar-save-button action-primary">
+    <span>{{t 'app.upload'}}</span>
+  </button>
+
+  <button type="button" class="pluginManagement-upload-sidebar-cancel-button action-secondary">
+    <span>{{t 'app.cancel'}}</span>
+  </button>
+
+</div>

package/app/modules/pluginManagement/templates/pluginType.hbs

@@ -0,0 +1,43 @@
+<div class="pluginType-inner {{#if isEnabled}}{{else}}row-disabled{{/if}} {{#if canBeUpdated}}has-update{{/if}}">
+  <div class="pluginType-description col-row">
+    <div class="pluginType-title col-20">
+      <h4 class="pluginType-title-inner tb-col-inner">{{displayName}}</h4>
+    </div>
+    <div class="pluginType-description col-40">
+      <div class="pluginType-description-inner tb-col-inner">
+        {{description}}
+      </div>
+      {{#if homepage}}
+        <a href="{{homepage}}" class="pluginType-homepage tb-col-inner" target="_blank">
+          <span>{{t 'app.visitpluginhomepage'}}</span>
+        </a>
+      {{/if}}
+    </div>
+    <div class="pluginType-version col-10 col-centered">
+      <span class="pluginType-version-number tb-col-inner">{{version}} {{#if canBeUpdated}}({{latestCompatibleVersion}}){{else}}{{/if}}
+      </span>
+    </div>
+    <div class="pluginType-active col-10 col-centered">
+      <input class="pluginType-enabled" type="checkbox" {{#if isEnabled}} checked {{/if}}/>
+    </div>
+    {{#ifValueEquals type 'extension'}}
+      <div class="pluginType-addedDefault col-10 col-centered">
+        <input class="pluginType-addedDefault" type="checkbox" {{#if isAddedByDefault}}checked{{/if}}/>
+      </div>
+    {{/ifValueEquals}}
+    <div class="pluginType-update col-10 col-centered">
+      <div class="pluginType-update-inner tb-col-inner">
+        {{#if isLocalInstall}}
+            <button title="{{t 'app.uploadedbyuser'}}" class="plugin-update btn secondary" disabled="disabled"><i class="fa fa-ban"></i></button>
+        {{else}}
+          {{#if canBeUpdated}}
+            <button title="{{t 'app.updateplugin'}} {{latestCompatibleVersion}}" class="plugin-update btn secondary"><i class="fa fa-refresh"></i></button>
+          {{else}}
+            <button title="{{t 'app.uptodate'}}" class="plugin-update btn secondary" disabled="disabled"><i class="fa fa-check"></i></button>
+          {{/if}}
+        {{/if}}
+        <button title="{{t 'app.remove'}}" class="plugin-remove btn alert"><i class="fa fa-trash-o"></i></button>
+      </div>
+    </div>
+  </div>
+</div>

package/app/modules/pluginManagement/views/pluginManagementSidebarView.js

@@ -0,0 +1,48 @@
+// 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 PluginManagementSidebarView = SidebarItemView.extend({
+    events: {
+      'click .pluginManagement-sidebar-upload': 'onAddNewPluginClicked',
+      'click .pluginManagement-sidebar-extensions': 'onManageExtensionsClicked',
+      'click .pluginManagement-sidebar-themes': 'onManageThemesClicked',
+      'click .pluginManagement-sidebar-components': 'onManageComponentsClicked',
+      'click .pluginManagement-sidebar-menus': 'onManageMenusClicked',
+      'click .pluginManagement-sidebar-getPlugins': 'onGetPluginsClicked'
+    },
+
+    onAddNewPluginClicked: function () {
+      Origin.router.navigateTo('pluginManagement/upload');
+    },
+
+    onManageExtensionsClicked: function () {
+      this.managePluginType('extension');
+    },
+
+    onManageThemesClicked: function () {
+      this.managePluginType('theme');
+    },
+
+    onManageComponentsClicked: function () {
+      this.managePluginType('component');
+    },
+
+    onManageMenusClicked: function () {
+      this.managePluginType('menu');
+    },
+
+    onGetPluginsClicked: function () {
+      window.open("https://www.adaptlearning.org/index.php/plugin-browser/", '_blank');
+    },
+
+    managePluginType: function (pluginType) {
+      Origin.router.navigateTo('pluginManagement/' + pluginType);
+    }
+  }, {
+    template: 'pluginManagementSidebar'
+  });
+
+  return PluginManagementSidebarView;
+});

package/app/modules/pluginManagement/views/pluginManagementUploadSidebarView.js

@@ -0,0 +1,25 @@
+// 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 PluginManagementUploadSidebarView = SidebarItemView.extend({
+    events: {
+      'click .pluginManagement-upload-sidebar-save-button': 'onSaveButtonClicked',
+      'click .pluginManagement-upload-sidebar-cancel-button': 'onCancelButtonClicked'
+    },
+
+    onSaveButtonClicked: function() {
+      this.updateButton('.pluginManagement-upload-sidebar-save-button', Origin.l10n.t('app.saving'));
+      Origin.trigger('pluginManagement:uploadPlugin');
+    },
+
+    onCancelButtonClicked: function() {
+      Origin.router.navigateTo('pluginManagement');
+    }
+  }, {
+    template: 'pluginManagementUploadSidebar'
+  });
+
+  return PluginManagementUploadSidebarView;
+});

package/app/modules/pluginManagement/views/pluginManagementUploadView.js

@@ -0,0 +1,52 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var _ = require('underscore');
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+
+  var PluginManagementUploadView = OriginView.extend({
+    className: 'pluginManagement-upload-plugin',
+
+    preRender: function() {
+      Origin.trigger('contentHeader:updateTitle', { title: Origin.l10n.t('app.uploadplugin') });
+      this.listenTo(Origin, 'pluginManagement:uploadPlugin', this.uploadFile);
+    },
+
+    postRender: function() {
+      _.defer(this.setViewToReady);
+    },
+
+    uploadFile: async function() {
+      if(this.validate()) {
+        $('.loading').show();
+        try {
+          const form = this.$('.plugin-form');
+          await Helpers.submitForm(form);
+          Origin.Notify.alert({ type: 'success', text: Origin.l10n.t('app.uploadpluginsuccess') });
+          Origin.router.navigateTo('pluginManagement');
+        } catch(e) {
+          Origin.Notify.alert({ type: 'error', title: Origin.l10n.t('app.uploadpluginerror'), text: e.message });
+          Origin.router.navigateTo('pluginManagement/upload');
+        } finally {
+          $('.loading').hide();
+          Origin.trigger('sidebar:resetButtons');
+        }
+      }
+    },
+
+    validate: function() {
+      if(_.isEmpty(this.$('form input').val())) {
+        this.$('.field-error').removeClass('display-none');
+        Origin.trigger('sidebar:resetButtons');
+        return false;
+      }
+      this.$('.field-error').addClass('display-none');
+      return true;
+    }
+  }, {
+    template: 'pluginManagementUpload'
+  });
+
+  return PluginManagementUploadView;
+});

package/app/modules/pluginManagement/views/pluginManagementView.js

@@ -0,0 +1,104 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var ContentPluginCollection = require('core/collections/contentPluginCollection');
+  var Helpers = require('core/helpers');
+  var Origin = require('core/origin');
+  var OriginView = require('core/views/originView');
+  var PluginTypeView = require('./pluginTypeView');
+
+  var PluginManagementView = OriginView.extend({
+    className: "pluginManagement",
+    tagName: "div",
+    pluginType: "plugin",
+
+    events: {
+      'click .refresh-all-plugins': 'refreshPluginList'
+    },
+
+    initialize: async function(options) {
+      this.currentPluginType = options.pluginType;
+
+      this.contentPlugins = new ContentPluginCollection(undefined, { queryOptions: { includeUpdateInfo: true, type: this.currentPluginType } }); // all plugins
+      this.pluginCollections = {}; // sorted plugins go here
+
+      await this.refreshPluginList();
+
+      return OriginView.prototype.initialize.apply(this, arguments);
+    },
+
+    preRender: function() {
+      const titles = {
+        component: Origin.l10n.t('app.components'),
+        extension: Origin.l10n.t('app.extensions'),
+        menu: Origin.l10n.t('app.menus'),
+        theme: Origin.l10n.t('app.themes')
+      };
+      Origin.trigger('contentHeader:updateTitle', {
+        breadcrumbs: [{ title: Origin.l10n.t('app.pluginmanagement') }],
+        title: titles[this.currentPluginType]
+      });
+      this.refreshPluginList();
+    },
+
+    render: function() {
+      this.model = {
+        toJSON: _.bind(function() { return { type: this.currentPluginType }; }, this)
+      };
+      return OriginView.prototype.render.apply(this, arguments);
+    },
+
+    renderPluginTypeViews: function() {
+      this.$('.pluginManagement-plugins').empty();
+
+      var coll = this.pluginCollections[this.currentPluginType];
+      if(!coll) {
+        this.$('.pluginManagement-plugins').append(Origin.l10n.t('app.noplugintypes'));
+      } else {
+        coll.forEach(this.renderPluginTypeView);
+      }
+      this.setViewToReady();
+    },
+
+    renderPluginTypeView: function(pluginType, index) {
+      var cssClass = `tb-row-${Helpers.odd(index)}`;
+      var view = new PluginTypeView({ model: pluginType });
+      this.$('.pluginManagement-plugins').append(view.$el.addClass(cssClass));
+    },
+
+    refreshPluginList: async function(e) {
+      if(e) { // triggered by the UI, so handle button style
+        e.preventDefault();
+        var $btn = $(e.currentTarget);
+        if($btn.is(':disabled')) return false;
+        $btn.attr('disabled', true);
+      }
+      try {
+        // sort the plugins by name and group by type
+        await this.contentPlugins.fetch();
+        this.pluginCollections = this.contentPlugins
+          .slice()
+          .sort((a,b) => a.get('name').localeCompare(b.get('name')))
+          .reduce((memo,p) => {
+            var type = p.get('type');
+            if(!memo[type]) memo[type] = [];
+            memo[type].push(p);
+            return memo;
+          }, {});
+        // reset the button
+        if(e) $(e.currentTarget).attr('disabled', false);
+        this.renderPluginTypeViews();
+      } catch(e) {
+        console.error(e);
+      }
+    },
+
+    remove: function() {
+      Origin.Notify.snackbar.close()
+      OriginView.prototype.remove.apply(this, arguments);
+    }
+  }, {
+    template: 'pluginManagement'
+  });
+
+  return PluginManagementView;
+});

package/app/modules/pluginManagement/views/pluginTypeView.js

@@ -0,0 +1,105 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require){
+  var OriginView = require('core/views/originView');
+  var Origin = require('core/origin');
+
+  var PluginTypeView = OriginView.extend({
+    className: 'pluginType-item tb-row',
+    tagName: 'div',
+
+    events: {
+      'change input.pluginType-enabled': 'toggleEnabled',
+      'change input.pluginType-addedDefault': 'toggleAddedDefault',
+      'click .plugin-update': 'updatePlugin',
+      'click .plugin-remove': 'deletePluginPrompt'
+    },
+
+    preRender: function () {
+      this.listenTo(this, 'remove', this.remove);
+      this.listenTo(this.model, {
+        sync: this.render,
+        destroy: this.remove
+      });
+    },
+
+    render: function () {
+      var template = Handlebars.templates[this.constructor.template];
+      this.$el.html(template(this.model.attributes));
+      return this;
+    },
+
+    toggleEnabled: function () {
+      this.model.save({ 
+        isEnabled: this.$('.pluginType-enabled').is(':checked') 
+      }, { patch: true });
+    },
+
+    toggleAddedDefault: function() {
+      this.model.save({
+        isAddedByDefault: this.$('.pluginType-addedDefault').is(':checked')
+      }, { patch: true });
+    },
+
+    updatePlugin: function (event) {
+      event && event.preventDefault();
+      var $btn = this.$('.plugin-update');
+      var $icon = $btn.find('i');
+
+      if($btn.is(':disabled')) return false;
+
+      $btn.attr({
+        disabled: true,
+        title: Origin.l10n.t('app.updating')
+      });
+      $icon.removeClass().addClass('fa fa-refresh fa-spin');
+
+      $.post(`${this.model.url()}/update`)
+        .done(function() {
+          $btn.attr('title', Origin.l10n.t('app.uptodate'));
+          $icon.removeClass().addClass('fa fa-check');
+          this.model.fetch();
+        }.bind(this))
+        .fail(function(e) {
+          $btn.attr('title', Origin.l10n.t('app.updatefailed'));
+          $icon.removeClass().addClass('fa fa-times');
+          Origin.Notify.alert({ type: 'error', text: e.responseJSON.message });
+        });
+
+      return false;
+    },
+
+    deletePluginPrompt: async function(event) {
+      event && event.preventDefault();
+
+      const useData = await $.get(`${this.model.url()}/uses`);
+
+      if (useData.length === 0) {
+        Origin.Notify.confirm({
+          type: 'warning',
+          title: Origin.l10n.t('app.deleteplugin'),
+          text: Origin.l10n.t('app.confirmdeleteplugin', { plugin: this.model.get('displayName') }),
+          destructive: false,
+          callback: this.deletePluginConfirm.bind(this)
+        });
+        return;
+      }
+      Origin.Notify.alert({
+        type: 'error',
+        title: `${Origin.l10n.t('app.cannotdelete')} ${this.model.get('displayName')}`,
+        text: useData.reduce((s, d) => {
+          return `${s}${d.title} ${Origin.l10n.t('app.by')} ${d.createdBy}<br />`;
+        }, `${Origin.l10n.t('app.coursesused')}<br />`)
+      });
+    },
+
+    deletePluginConfirm: function(result) {
+      if (result.isConfirmed) {
+        this.model.destroy().done(this.remove.bind(this));
+      }
+    }
+  }, {
+    template: 'pluginType'
+  });
+
+  return PluginTypeView;
+});

package/app/modules/projects/index.js

@@ -0,0 +1,82 @@
+// LICENCE https://github.com/adaptlearning/adapt_authoring/blob/master/LICENSE
+define(function(require) {
+  var Origin = require('core/origin');
+  var ProjectsView = require('./views/projectsView');
+  var ProjectsSidebarView = require('./views/projectsSidebarView');
+  var ContentCollection = require('core/collections/contentCollection');
+  var TagsCollection = require('core/collections/tagsCollection');
+
+  Origin.on('router:projects', async function(location, subLocation, action) {
+    Origin.trigger('editor:resetData');
+    Origin.contentHeader.setButtons(Origin.contentHeader.BUTTON_TYPES.OPTIONS, [
+      {
+        title: Origin.l10n.t('app.grid'),
+        icon: 'th',
+        callbackEvent: 'dashboard:layout:grid',
+        value: 'grid',
+        group: 'layout',
+      },
+      {
+        title: Origin.l10n.t('app.list'),
+        icon: 'list',
+        callbackEvent: 'dashboard:layout:list',
+        value: 'list',
+        group: 'layout'
+      },
+      {
+        title: Origin.l10n.t('app.ascending'),
+        icon: 'sort-alpha-asc',
+        callbackEvent: 'dashboard:sort:asc',
+        value: 'asc',
+        group: 'sort'
+      },
+      {
+        title: Origin.l10n.t('app.descending'),
+        icon: 'sort-alpha-desc',
+        callbackEvent: 'dashboard:sort:desc',
+        value: 'desc',
+        group: 'sort'
+      },
+      {
+        title: Origin.l10n.t('app.recent'),
+        icon: 'edit',
+        callbackEvent: 'dashboard:sort:updated',
+        value: 'updated',
+        group: 'sort'
+      }
+    ]);
+    try {
+      const collection = new TagsCollection()
+      await collection.fetch();
+      Origin.sidebar.addView(new ProjectsSidebarView({ collection }).$el);
+      Origin.trigger('dashboard:loaded', { type: location || 'all', tags: collection });
+    } catch(e) {
+      console.log('Error occured getting the tags collection - try refreshing your page');
+      console.log(e);
+    }
+  });
+
+  Origin.on('dashboard:loaded', function ({ type, tags }) {
+    var isMine = type === 'all';
+    var isShared = type === 'shared';
+    if(!isMine && !isShared) {
+      return;
+    }
+    var meId = Origin.sessionModel.get('user')._id;
+    var collection = new ContentCollection(undefined, { 
+      filter: { createdBy: isMine ? meId : { $ne: meId } }, 
+      _type: 'course'
+    });
+    Origin.trigger('contentHeader:updateTitle', { 
+      breadcrumbs: ['dashboard'], 
+      title: Origin.l10n.t(`app.${isMine ? 'myprojects' : 'sharedprojects'}`) 
+    });
+    Origin.contentPane.setView(ProjectsView, { collection, _isShared: isShared, tags });
+  });
+
+  Origin.on('router:initialize login:changed', function() {
+    Origin.router.addDashboardHandler(() => {
+      if(Origin.sessionModel.hasScopes(['read:content'])) return 'projects';
+    });
+  });
+});