Added Table View to My Cards

client/components/main/myCards.jade

@@ -6,6 +6,16 @@ template(name="myCardsHeaderBar")
       i.fa.fa-list
       | {{_ 'my-cards'}}
 
+    .board-header-btns.left
+      a.board-header-btn.js-my-cards-view-change(title="{{_ 'myCardsViewChange-title'}}")
+        i.fa.fa-caret-down
+        if $eq myCardsView 'boards'
+          i.fa.fa-trello
+          | {{_ 'myCardsViewChange-choice-boards'}}
+        if $eq myCardsView 'table'
+          i.fa.fa-table
+          | {{_ 'myCardsViewChange-choice-table'}}
+
 template(name="myCardsModalTitle")
   if currentUser
     h2
@@ -17,23 +27,89 @@ template(name="myCards")
     if searching.get
       +spinner
     else
-      .wrapper
-        each board in myCardsList
-          .my-cards-board-wrapper
-            .my-cards-board-title(class=board.colorClass, id="header")
-              a(href=board.originRelativeUrl)
-                +viewer
-                  = board.title
-            each swimlane in board.mySwimlanes
-              .my-cards-swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
-                +viewer
-                  = swimlane.title
-              each list in swimlane.myLists
-                .my-cards-list-wrapper
-                  .my-cards-list-title(class=list.colorClass)
-                    +viewer
-                      = list.title
-                  each card in list.myCards
-                    .my-cards-card-wrapper
-                      a.minicard-wrapper(href=card.originRelativeUrl)
-                        +minicard(card)
+      if $eq myCardsView 'boards'
+        .wrapper
+          each board in myCardsList
+            .my-cards-board-wrapper
+              .my-cards-board-title(class=board.colorClass, id="header")
+                a(href=board.originRelativeUrl)
+                  +viewer
+                    = board.title
+              each swimlane in board.mySwimlanes
+                .my-cards-swimlane-title(class="{{#if swimlane.colorClass}}{{ swimlane.colorClass }}{{else}}swimlane-default-color{{/if}}")
+                  +viewer
+                    = swimlane.title
+                each list in swimlane.myLists
+                  .my-cards-list-wrapper
+                    .my-cards-list-title(class=list.colorClass)
+                      +viewer
+                        = list.title
+                    each card in list.myCards
+                      .my-cards-card-wrapper
+                        a.minicard-wrapper(href=card.originRelativeUrl)
+                          +minicard(card)
+      if $eq myCardsView 'table'
+        .wrapper
+          table.my-cards-board-table
+            thead
+              th {{_ "Card"}}
+              th {{_ "List"}}
+              th {{_ "Board"}}
+              th {{_ "Swimlane"}}
+              unless isMiniScreen
+                th {{_ "Members"}}
+                th {{_ "Labels"}}
+                th {{_ "Due Date"}}
+            tbody
+                each board in myCardsList
+                    each swimlane in board.mySwimlanes
+                      each list in swimlane.myLists
+                        each card in list.myCards
+                            tr
+                              td
+                                unless isMiniScreen
+                                  .my-cards-board-badge(class=board.colorClass, id="header")
+                                .my-cards-card-title-table
+                                  a.minicard-wrapper(href=card.originRelativeUrl)
+                                    {{card.title}}
+                              td
+                                {{list.title}}
+                              td
+                                a(href=board.originRelativeUrl)
+                                  {{board.title}}
+                              td
+                                {{swimlane.title}}
+
+                              unless isMiniScreen
+                                td
+                                  .div
+                                    each member in card.members
+                                      a.name
+                                        +userAvatar(userId=member noRemove=true)
+                                td
+                                  .div
+                                    each label in card.labelIds
+                                      span.card-label(class="card-label-{{labelColor board label}}" title=name)
+                                        {{labelName board label}}
+                                td
+                                  if card.dueAt
+                                    {{ moment card.dueAt 'LLL' }}
+
+template(name="myCardsViewChangePopup")
+  if currentUser
+    ul.pop-over-list
+      li
+        with "myCardsViewChange-choice-boards"
+          a.js-my-cards-view-boards
+            i.fa.fa-trello.colorful
+            | {{_ 'myCardsViewChange-choice-boards'}}
+            if $eq Utils.myCardsView "boards"
+              i.fa.fa-check
+      hr
+      li
+        with "myCardsViewChange-choice-table"
+          a.js-my-cards-view-table
+            i.fa.fa-table.colorful
+            | {{_ 'myCardsViewChange-choice-table'}}
+            if $eq Utils.myCardsView "table"
+              i.fa.fa-check

client/components/main/myCards.js

@@ -7,12 +7,20 @@ BlazeComponent.extendComponent({
     return Utils.myCardsSort();
   },
 
+  myCardsView() {
+    // eslint-disable-next-line no-console
+    // console.log('sort:', Utils.myCardsView());
+    return Utils.myCardsView();
+  },
+
   events() {
     return [
       {
         'click .js-toggle-my-cards-choose-sort': Popup.open(
           'myCardsSortChange',
         ),
+        'click .js-my-cards-view-change': Popup.open(
+          'myCardsViewChange'),
       },
     ];
   },
@@ -24,6 +32,24 @@ Template.myCards.helpers({
   },
 });
 
+BlazeComponent.extendComponent({
+  events() {
+    return [
+      {
+        'click .js-my-cards-view-boards'() {
+          Utils.setMyCardsView('boards');
+          Popup.back();
+        },
+
+        'click .js-my-cards-view-table'() {
+          Utils.setMyCardsView('table');
+          Popup.back();
+        },
+      },
+    ];
+  },
+}).register('myCardsViewChangePopup');
+
 class MyCardsComponent extends CardSearchPagedComponent {
   onCreated() {
     super.onCreated();
@@ -41,6 +67,24 @@ class MyCardsComponent extends CardSearchPagedComponent {
     );
   }
 
+  myCardsView() {
+    // eslint-disable-next-line no-console
+    //console.log('sort:', Utils.myCardsView());
+    return Utils.myCardsView();
+  }
+
+  labelName(board, labelId) {
+    const label = board.getLabelById(labelId)
+    const name = label.name
+    return name
+  }
+
+  labelColor(board, labelId) {
+    const label = board.getLabelById(labelId)
+    const color = label.color
+    return color
+  }
+
   myCardsList() {
     const boards = [];
     let board = null;

client/components/main/myCards.styl

@@ -8,7 +8,7 @@
   border-width: 2px
   border-style: solid
   border-color: #a2a2a2
-  
+
 .my-cards-board-title
   font-size: 1.4rem
   font-weight: bold
@@ -55,3 +55,23 @@
   max-width: 500px
   margin-right: auto
   margin-left: auto
+
+.my-cards-board-table
+  thead
+    border-bottom: 3px solid #4d4d4d
+    background-color: transparent
+  th, td
+    border: 0
+  tr
+    border-bottom: 2px solid #a2a2a2
+
+.my-cards-card-title-table
+  font-weight: bold
+  padding-left: 2px
+
+.my-cards-board-badge
+  width:36px
+  height:24px
+  float:left
+  border-radius:5px
+  margin-right: 5px

client/lib/utils.js

@@ -138,6 +138,21 @@ Utils = {
     Utils.reload();
   },
 
+  myCardsView() {
+    let view = window.localStorage.getItem('myCardsView');
+
+    if (!view || !['boards', 'table'].includes(view)) {
+      view = 'boards';
+    }
+
+    return view;
+  },
+
+  setMyCardsView(view) {
+    window.localStorage.setItem('myCardsView', view);
+    Utils.reload();
+  },
+
   // XXX We should remove these two methods
   goBoardId(_id) {
     const board = Boards.findOne(_id);

i18n/en.i18n.json

@@ -939,6 +939,10 @@
   "list": "List",
   "board": "Board",
   "context-separator": "/",
+  "myCardsViewChange-title": "My Cards View",
+  "myCardsViewChangePopup-title": "My Cards View",
+  "myCardsViewChange-choice-boards": "Boards",
+  "myCardsViewChange-choice-table": "Table",
   "myCardsSortChange-title": "My Cards Sort",
   "myCardsSortChangePopup-title": "My Cards Sort",
   "myCardsSortChange-choice-board": "By Board",