Change the board import layout from a popup to a full page

This commit also removes the “import a single Trello card” as we couldn’t figure
out some reasonable use case.

We also create a new publication on the server to provide the minimal user
profile informations required to display an avatar.

client/components/import/import.jade

@@ -1,39 +1,52 @@
-template(name="importPopup")
-  if error.get
-    .warning {{_ error.get}}
+template(name="importHeaderBar")
+  h1
+    a.back-btn(href="{{pathFor 'home'}}")
+      i.fa.fa-chevron-left
+    | {{_ 'import-board-title'}}
+
+template(name="import")
+  .wrapper
+    if error.get
+      .warning {{_ error.get}}
+    +Template.dynamic(template=currentTemplate)
+
+template(name="importTextarea")
   form
-    p: label(for='import-textarea') {{_ getLabel}}
-    textarea#import-textarea.js-import-json(placeholder="{{_ 'import-json-placeholder'}}" autofocus)
+    p: label(for='import-textarea') {{_ 'import-board-trello-instruction'}}
+    textarea.js-import-json(placeholder="{{_ 'import-json-placeholder'}}" autofocus)
       | {{jsonText}}
-    if membersMapping
-      div
-        a.show-mapping
-          | {{_ 'import-show-user-mapping'}}
     input.primary.wide(type="submit" value="{{_ 'import'}}")
 
-template(name="mapMembersPopup")
+template(name="importMapMembers")
+  h2 {{_ 'import-map-members'}}
   .map-members
     p {{_ 'import-members-map'}}
     .mapping-list
       each members
-        .mapping
-          a.source
-            div.full-name
-              = fullName
-            div.username
+        a.mapping-item.js-select-member(class="{{#if wekan}}filled{{/if}}")
+          .profile-source
+            .full-name= fullName
+            .username
               | ({{username}})
           .wekan
             if wekan
               +userAvatar(userId=wekan._id)
             else
-              a.member.add-member.js-add-members
+              a.member.add-member
                 i.fa.fa-plus
+      //-
+        Due to the way the flewbox layout is working, we need to set some
+        invisible items so that the last row items have a consistent width.
+        See http://jsfiddle.net/Ln4h3c4n/ for an minimal example of the issue.
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
+      .mapping-item.ghost-item
     form
       input.primary.wide(type="submit" value="{{_ 'done'}}")
 
-      template(name="addMemberPopup")
-
-template(name="mapMembersAddPopup")
+template(name="importMapMembersAddPopup")
   .select-member
     p
       | {{_ 'import-user-select'}}

client/components/import/import.js

@@ -1,68 +1,46 @@
-/// Abstract root for all import popup screens.
-/// Descendants must define:
-/// - getMethodName(): return the Meteor method to call for import, passing json
-/// data decoded as object and additional data (see below);
-/// - getAdditionalData(): return object containing additional data passed to
-/// Meteor method (like list ID and position for a card import);
-/// - getLabel(): i18n key for the text displayed in the popup, usually to
-/// explain how to get the data out of the source system.
-const ImportPopup = BlazeComponent.extendComponent({
-  jsonText() {
-    return Session.get('import.text');
-  },
-
-  membersMapping() {
-    return Session.get('import.membersToMap');
-  },
-
+BlazeComponent.extendComponent({
   onCreated() {
     this.error = new ReactiveVar('');
-    this.dataToImport = '';
+    this.steps = ['importTextarea', 'importMapMembers'];
+    this._currentStepIndex = new ReactiveVar(0);
+    this.importedData = new ReactiveVar();
+    this.membersToMap = new ReactiveVar([]);
   },
 
-  onFinish() {
-    Popup.close();
+  currentTemplate() {
+    return this.steps[this._currentStepIndex.get()];
   },
 
-  onShowMapping(evt) {
-    this._storeText(evt);
-    Popup.open('mapMembers')(evt);
+  nextStep() {
+    const nextStepIndex = this._currentStepIndex.get() + 1;
+    if (nextStepIndex >= this.steps.length) {
+      this.finishImport();
+    } else {
+      this._currentStepIndex.set(nextStepIndex);
+    }
   },
 
-  onSubmit(evt){
+  importData(evt) {
     evt.preventDefault();
-    const dataJson = this._storeText(evt);
-    let dataObject;
+    const dataJson = this.find('.js-import-json').value;
     try {
-      dataObject = JSON.parse(dataJson);
+      const dataObject = JSON.parse(dataJson);
       this.setError('');
+      this.importedData.set(dataObject);
+      this._prepareAdditionalData(dataObject);
+      this.nextStep();
     } catch (e) {
       this.setError('error-json-malformed');
-      return;
     }
-    if(this._hasAllNeededData(dataObject)) {
-      this._import(dataObject);
-    } else {
-      this._prepareAdditionalData(dataObject);
-      Popup.open(this._screenAdditionalData())(evt);
-
-    }
-  },
-
-  events() {
-    return [{
-      submit: this.onSubmit,
-      'click .show-mapping': this.onShowMapping,
-    }];
   },
 
   setError(error) {
     this.error.set(error);
   },
 
-  _import(dataObject) {
-    const additionalData = this.getAdditionalData();
-    const membersMapping = this.membersMapping();
+  finishImport() {
+    const additionalData = {};
+    const membersMapping = this.membersToMap.get();
     if (membersMapping) {
       const mappingById = {};
       membersMapping.forEach((member) => {
@@ -72,99 +50,75 @@ const ImportPopup = BlazeComponent.extendComponent({
       });
       additionalData.membersMapping = mappingById;
     }
-    Session.set('import.membersToMap', null);
-    Session.set('import.text', null);
-    Meteor.call(this.getMethodName(), dataObject, additionalData,
-      (error, response) => {
-        if (error) {
-          this.setError(error.error);
+    this.membersToMap.set([]);
+    Meteor.call('importTrelloBoard', this.importedData.get(), additionalData,
+      (err, res) => {
+        if (err) {
+          this.setError(err.error);
         } else {
-          // ensure will display what we just imported
-          Filter.addException(response);
-          this.onFinish(response);
+          Utils.goBoardId(res);
         }
       }
     );
   },
 
-  _hasAllNeededData(dataObject) {
-    // import has no members or they are already mapped
-    return dataObject.members.length === 0 || this.membersMapping();
-  },
-
   _prepareAdditionalData(dataObject) {
-    // we will work on the list itself (an ordered array of objects)
-    // when a mapping is done, we add a 'wekan' field to the object representing the imported member
+    // we will work on the list itself (an ordered array of objects) when a
+    // mapping is done, we add a 'wekan' field to the object representing the
+    // imported member
     const membersToMap = dataObject.members;
     // auto-map based on username
     membersToMap.forEach((importedMember) => {
-      const wekanUser = Users.findOne({username: importedMember.username});
-      if(wekanUser) {
+      const wekanUser = Users.findOne({ username: importedMember.username });
+      if (wekanUser) {
         importedMember.wekan = wekanUser;
       }
     });
     // store members data and mapping in Session
     // (we go deep and 2-way, so storing in data context is not a viable option)
-    Session.set('import.membersToMap', membersToMap);
+    this.membersToMap.set(membersToMap);
     return membersToMap;
   },
 
   _screenAdditionalData() {
     return 'mapMembers';
   },
+}).register('import');
 
-  _storeText() {
-    const dataJson = this.$('.js-import-json').val();
-    Session.set('import.text', dataJson);
-    return dataJson;
-  },
-});
-
-ImportPopup.extendComponent({
-  getAdditionalData() {
-    const listId = this.currentData()._id;
-    const selector = `#js-list-${this.currentData()._id} .js-minicard:first`;
-    const firstCardDom = $(selector).get(0);
-    const sortIndex = Utils.calculateIndex(null, firstCardDom).base;
-    const result = {listId, sortIndex};
-    return result;
+BlazeComponent.extendComponent({
+  template() {
+    return 'importTextarea';
   },
 
-  getMethodName() {
-    return 'importTrelloCard';
+  events() {
+    return [{
+      submit(evt) {
+        return this.parentComponent().importData(evt);
+      },
+    }];
+  },
+}).register('importTextarea');
+
+BlazeComponent.extendComponent({
+  onCreated() {
+    this.autorun(() => {
+      this.parentComponent().membersToMap.get().forEach(({ wekan }) => {
+        if (wekan !== undefined) {
+          const userId = wekan._id;
+          this.subscribe('user-miniprofile', userId);
+        }
+      });
+    });
   },
 
-  getLabel() {
-    return 'import-card-trello-instruction';
-  },
-}).register('listImportCardPopup');
-
-ImportPopup.extendComponent({
-  getAdditionalData() {
-    const result = {};
-    return result;
-  },
-
-  getMethodName() {
-    return 'importTrelloBoard';
-  },
-
-  getLabel() {
-    return 'import-board-trello-instruction';
-  },
-
-  onFinish(response) {
-    Utils.goBoardId(response);
-  },
-}).register('boardImportBoardPopup');
-
-const ImportMapMembers = BlazeComponent.extendComponent({
   members() {
-    return Session.get('import.membersToMap');
+    return this.parentComponent().membersToMap.get();
   },
+
   _refreshMembers(listOfMembers) {
-    Session.set('import.membersToMap', listOfMembers);
+    return this.parentComponent().membersToMap.set(listOfMembers);
   },
+
   /**
    * Will look into the list of members to import for the specified memberId,
    * then set its property to the supplied value.
@@ -202,15 +156,17 @@ const ImportMapMembers = BlazeComponent.extendComponent({
     // Session.get gives us a copy, we have to set it back so it sticks
     this._refreshMembers(listOfMembers);
   },
+
   setSelectedMember(memberId) {
     return this._setPropertyForMember('selected', true, memberId, true);
   },
+
   /**
    * returns the member with specified id,
    * or the selected member if memberId is not specified
    */
   getMember(memberId = null) {
-    const allMembers = Session.get('import.membersToMap');
+    const allMembers = this.members();
     let finder = null;
     if(memberId) {
       finder = (user) => user.id === memberId;
@@ -219,15 +175,20 @@ const ImportMapMembers = BlazeComponent.extendComponent({
     }
     return allMembers.find(finder);
   },
+
   mapSelectedMember(wekan) {
     return this._setPropertyForMember('wekan', wekan, null);
   },
+
   unmapMember(memberId){
     return this._setPropertyForMember('wekan', null, memberId);
   },
-});
 
-ImportMapMembers.extendComponent({
+  onSubmit(evt) {
+    evt.preventDefault();
+    this.parentComponent().nextStep();
+  },
+
   onMapMember(evt) {
     const memberToMap = this.currentData();
     if(memberToMap.wekan) {
@@ -235,33 +196,31 @@ ImportMapMembers.extendComponent({
       this.unmapMember(memberToMap.id);
     } else {
       this.setSelectedMember(memberToMap.id);
-      Popup.open('mapMembersAdd')(evt);
+      Popup.open('importMapMembersAdd')(evt);
     }
   },
-  onSubmit(evt) {
-    evt.preventDefault();
-    Popup.back();
-  },
+
   events() {
     return [{
       'submit': this.onSubmit,
-      'click .mapping': this.onMapMember,
+      'click .js-select-member': this.onMapMember,
     }];
   },
-}).register('mapMembersPopup');
+}).register('importMapMembers');
+
+BlazeComponent.extendComponent({
+  onRendered() {
+    this.find('.js-map-member input').focus();
+  },
 
-ImportMapMembers.extendComponent({
   onSelectUser(){
-    this.mapSelectedMember(this.currentData());
+    Popup.getOpenerComponent().mapSelectedMember(this.currentData());
     Popup.back();
   },
+
   events() {
     return [{
       'click .js-select-import': this.onSelectUser,
     }];
   },
-  onRendered() {
-    // todo XXX why do I not get the focus??
-    this.find('.js-map-member input').focus();
-  },
-}).register('mapMembersAddPopup');
+}).register('importMapMembersAddPopup');

client/components/import/import.styl

@@ -1,17 +1,47 @@
 @import 'nib'
 
 .map-members
-  .mapping:first-of-type
-    border-top: solid 1px #999
-  .mapping
-    padding: 10px 0
-    border-bottom: solid 1px #999
-    .source
+  &:after
+    content: "";
+    flex: auto;
+
+  .mapping-list
+    display: flex
+    flex-wrap: wrap
+    margin: 0 -4px
+
+    .mapping-item
+      max-width: 300px
+      min-width: 200px
+      padding: 6px
+      margin: 5px
+      flex:1
+      background: white
+      border-radius: 3px
+      box-shadow: 0 1px 2px rgba(0,0,0,.15)
+
+      &:hover
+        background: darken(white, 5%)
+
+      &.filled
+        background: #E0FFE5
+
+        &:hover
+          background: #FFE0E0
+
+      &.ghost-item
+        height: 0
+        visibility: hidden
+        border: none
+
+    .profile-source
       display: inline-block
       width: 80%
+
     .wekan
       display: inline-block
       width: 35px
+
       .member
         float: none