From 147a3d99cbe561662fc7fc1043128138ee8310b9 Mon Sep 17 00:00:00 2001 From: helioguardabaxo Date: Sun, 17 Apr 2022 22:23:29 -0300 Subject: [PATCH] Added Table View to My Cards --- client/components/main/myCards.jade | 116 +++++++++++++++++++++++----- client/components/main/myCards.js | 44 +++++++++++ client/components/main/myCards.styl | 22 +++++- client/lib/utils.js | 15 ++++ i18n/en.i18n.json | 4 + 5 files changed, 180 insertions(+), 21 deletions(-) diff --git a/client/components/main/myCards.jade b/client/components/main/myCards.jade index 8f2fcac5c..7784c53e8 100644 --- a/client/components/main/myCards.jade +++ b/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 diff --git a/client/components/main/myCards.js b/client/components/main/myCards.js index 07171dc07..a6426b66a 100644 --- a/client/components/main/myCards.js +++ b/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; diff --git a/client/components/main/myCards.styl b/client/components/main/myCards.styl index afd108362..e8c6ac1b8 100644 --- a/client/components/main/myCards.styl +++ b/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 diff --git a/client/lib/utils.js b/client/lib/utils.js index a4ba32e9b..f9a26a068 100644 --- a/client/lib/utils.js +++ b/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); diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 29bbbe3ad..374a78834 100644 --- a/i18n/en.i18n.json +++ b/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",