add card cover image and activity detail

Author: jamesjieye

front-end/src/modals/CardModal.vue

@@ -74,7 +74,7 @@
               <div class="wrapper-body">
                 <div class="activity" v-for="activity in cardActivities" v-bind:key="activity.id">
                   <div><strong>{{ activity.user.name }}</strong> <span class="when">{{ activity.when }} ago</span></div>
-                  <div class="detail">{{ activity.detail.comment }}</div>
+                  <div class="detail" :class="activity.type">{{ activity.actionDetail }}</div>
                 </div>
               </div>
             </div>
@@ -152,9 +152,23 @@ export default {
       const now = new Date()
       this.activities.forEach(activity => {
         const detail = JSON.parse(activity.detail)
+        let actionDetail = ''
+        if (activity.type === 'add-comment') {
+          actionDetail = detail.comment
+        } else if (activity.type === 'add-card') {
+          actionDetail = 'Added this card'
+        } else if (activity.type === 'add-attachment') {
+          actionDetail = 'Added attachment ' + detail.fileName
+        } else if (activity.type === 'change-card-description') {
+          actionDetail = 'Changed card description'
+        } else if (activity.type === 'change-card-title') {
+          actionDetail = 'Changed card title'
+        }
+
         cardActivities.push({
           user: userById[activity.userId],
-          detail: detail,
+          type: activity.type,
+          actionDetail: actionDetail,
           when: formatDistance(new Date(activity.createdDate), now),
           createdDate: activity.createdDate
         })
@@ -263,6 +277,13 @@ export default {
     onAttachmentUploaded (attachment) {
       this.uploadingCount--
       this.attachments.push(attachment)
+      if (!this.card.coverImage && attachment.previewUrl) {
+        this.$emit('coverImageChanged', {
+          cardId: this.card.id,
+          cardListId: this.cardList.id,
+          coverImage: attachment.previewUrl
+        })
+      }
     },
     when (createdDate) {
       return formatDistance(new Date(createdDate), new Date())
@@ -483,6 +504,16 @@ export default {
               display: inline-block;
               padding: .2rem 0;
               margin-bottom: .5rem;
+              color: #666;
+            }
+
+            .detail.add-comment {
+              color: #000;
+              padding: 2px 5px;
+              border: 1px solid #eee;
+              background: #f4f4f4;
+              border-radius: 3px;
+              margin-top: .2rem;
             }
           }
         }

front-end/src/views/BoardPage.vue

@@ -32,6 +32,7 @@
                     animation: 0, scrollSensitivity: 100, touchStartThreshold: 20}"
                     v-bind:data-list-id="cardList.id">
                     <div class="card-item" v-for="card in cardList.cards" v-bind:key="card.id" @click="openCard(card)">
+                      <div class="cover-image" v-if="card.coverImage"><img :src="card.coverImage" /></div>
                       <div class="card-title">{{ card.title }}</div>
                     </div>
                     <div class="add-card-form-wrapper" v-if="cardList.cardForm.open">
@@ -70,7 +71,8 @@
       :card="openedCard"
       :cardList="focusedCardList"
       :board="board"
-      :members="members" />
+      :members="members"
+      @coverImageChanged="updateCardCoverImage"/>
   </div>
 </template>
 
@@ -386,7 +388,8 @@ export default {
       if (existingIndex === -1) {
         cardList.cards.push({
           id: card.id,
-          title: card.title
+          title: card.title,
+          coverImage: ''
         })
       }
     },
@@ -401,6 +404,15 @@ export default {
     closeCardWindow () {
       console.log('[BoardPage] Close card window ' + this.openedCard.id)
       $('#cardModal').modal('hide')
+    },
+    updateCardCoverImage (change) {
+      const cardList = this.cardLists.find(cardList => {
+        return cardList.id === change.cardListId
+      })
+      const card = cardList.cards.find(card => {
+        return card.id === change.cardId
+      })
+      card.coverImage = change.coverImage
     }
   }
 }
@@ -572,14 +584,17 @@ export default {
                 .card-item {
                   overflow: hidden;
                   background: #fff;
-                  padding: 5px 8px;
                   border-radius: 4px;
                   margin: 0 8px 8px;
                   box-shadow: 0 1px 0 #ccc;
                   cursor: pointer;
 
+                  .cover-image img {
+                    max-width: 256px;
+                  }
+
                   .card-title {
-                    margin: 0;
+                    margin: 5px 8px;
 
                     a {
                       color: #333;

setup/2.refactoring-database.sql

@@ -23,3 +23,6 @@ ALTER TABLE `task_agile`.`attachment` CHANGE COLUMN `file_type` `file_type` VARC
 -- Add thumbnail_created to attachment
 ALTER TABLE `task_agile`.`attachment` ADD COLUMN `thumbnail_created` TINYINT(1) NOT NULL DEFAULT 0 AFTER `file_type`;
 
+-- Add `cover_image` to `card`
+ALTER TABLE `task_agile`.`card` ADD COLUMN `cover_image` VARCHAR(255) CHARACTER SET utf8 COLLATE utf8_bin NULL DEFAULT NULL AFTER `position`;
+

src/main/java/com/taskagile/domain/application/impl/CardServiceImpl.java

@@ -128,6 +128,12 @@ public Attachment addAttachment(AddCardAttachmentCommand command) {
     Card card = findCard(command.getCardId());
     Attachment attachment = attachmentManagement.save(
       command.getCardId(), command.getFile(), command.getUserId());
+
+    if (!card.hasCoverImage() && attachment.isThumbnailCreated()) {
+      card.addCoverImage(attachment.getFilePath());
+      cardRepository.save(card);
+    }
+
     domainEventPublisher.publish(new CardAttachmentAddedEvent(card, attachment, command));
     return attachment;
   }

src/main/java/com/taskagile/domain/model/card/Card.java

@@ -5,6 +5,7 @@
 import com.taskagile.domain.model.cardlist.CardList;
 import com.taskagile.domain.model.cardlist.CardListId;
 import com.taskagile.domain.model.user.UserId;
+import org.springframework.util.StringUtils;
 
 import javax.persistence.*;
 import java.util.Date;
@@ -35,6 +36,9 @@ public class Card extends AbstractBaseEntity {
   @Column(name = "description")
   private String description;
 
+  @Column(name = "cover_image")
+  private String coverImage;
+
   @Column(name = "position")
   private int position;
 
@@ -66,6 +70,14 @@ public void changeDescription(String description) {
     this.description = description;
   }
 
+  public boolean hasCoverImage() {
+    return StringUtils.hasText(coverImage);
+  }
+
+  public void addCoverImage(String coverImage) {
+    this.coverImage = coverImage;
+  }
+
   public CardId getId() {
     return new CardId(id);
   }
@@ -90,6 +102,10 @@ public String getDescription() {
     return description;
   }
 
+  public String getCoverImage() {
+    return coverImage;
+  }
+
   public int getPosition() {
     return position;
   }
@@ -128,6 +144,7 @@ public String toString() {
       ", userId=" + userId +
       ", title='" + title + '\'' +
       ", description='" + description + '\'' +
+      ", coverImage='" + coverImage + '\'' +
       ", position=" + position +
       ", archived=" + archived +
       ", createdDate=" + createdDate +

src/main/java/com/taskagile/web/apis/BoardApiController.java

@@ -6,6 +6,7 @@
 import com.taskagile.domain.application.TeamService;
 import com.taskagile.domain.application.commands.AddBoardMemberCommand;
 import com.taskagile.domain.application.commands.CreateBoardCommand;
+import com.taskagile.domain.common.file.FileUrlCreator;
 import com.taskagile.domain.model.board.Board;
 import com.taskagile.domain.model.board.BoardId;
 import com.taskagile.domain.model.card.Card;
@@ -36,15 +37,18 @@ public class BoardApiController extends AbstractBaseController {
   private TeamService teamService;
   private CardListService cardListService;
   private CardService cardService;
+  private FileUrlCreator fileUrlCreator;
 
   public BoardApiController(BoardService boardService,
                             TeamService teamService,
                             CardListService cardListService,
-                            CardService cardService) {
+                            CardService cardService,
+                            FileUrlCreator fileUrlCreator) {
     this.boardService = boardService;
     this.teamService = teamService;
     this.cardListService = cardListService;
     this.cardService = cardService;
+    this.fileUrlCreator = fileUrlCreator;
   }
 
   @PostMapping("/api/boards")
@@ -74,7 +78,7 @@ public ResponseEntity<ApiResult> getBoard(@PathVariable("boardId") long rawBoard
     List<CardList> cardLists = cardListService.findByBoardId(boardId);
     List<Card> cards = cardService.findByBoardId(boardId);
 
-    return BoardResult.build(team, board, members, cardLists, cards);
+    return BoardResult.build(team, board, members, cardLists, cards, fileUrlCreator);
   }
 
   @PostMapping("/api/boards/{boardId}/members")

src/main/java/com/taskagile/web/results/BoardResult.java

@@ -1,11 +1,13 @@
 package com.taskagile.web.results;
 
+import com.taskagile.domain.common.file.FileUrlCreator;
 import com.taskagile.domain.model.board.Board;
 import com.taskagile.domain.model.card.Card;
 import com.taskagile.domain.model.cardlist.CardList;
 import com.taskagile.domain.model.cardlist.CardListId;
 import com.taskagile.domain.model.team.Team;
 import com.taskagile.domain.model.user.User;
+import com.taskagile.utils.ImageUtils;
 import org.springframework.http.ResponseEntity;
 
 import java.util.ArrayList;
@@ -16,7 +18,8 @@
 public class BoardResult {
 
   public static ResponseEntity<ApiResult> build(Team team, Board board, List<User> members,
-                                                List<CardList> cardLists, List<Card> cards) {
+                                                List<CardList> cardLists, List<Card> cards,
+                                                FileUrlCreator fileUrlCreator) {
     Map<String, Object> boardData = new HashMap<>();
     boardData.put("id", board.getId().value());
     boardData.put("name", board.getName());
@@ -34,7 +37,7 @@ public static ResponseEntity<ApiResult> build(Team team, Board board, List<User>
     }
 
     for (CardList cardList: cardLists) {
-      cardListsData.add(new CardListData(cardList, cardsByList.get(cardList.getId())));
+      cardListsData.add(new CardListData(cardList, cardsByList.get(cardList.getId()), fileUrlCreator));
     }
 
     ApiResult result = ApiResult.blank()
@@ -80,13 +83,13 @@ private static class CardListData {
     private int position;
     private List<CardData> cards = new ArrayList<>();
 
-    CardListData(CardList cardList, List<Card> cards) {
+    CardListData(CardList cardList, List<Card> cards, FileUrlCreator fileUrlCreator) {
       this.id = cardList.getId().value();
       this.name = cardList.getName();
       this.position = cardList.getPosition();
       if (cards != null) {
         for (Card card: cards) {
-          this.cards.add(new CardData(card));
+          this.cards.add(new CardData(card, fileUrlCreator));
         }
       }
     }
@@ -112,11 +115,14 @@ private static class CardData {
     private long id;
     private String title;
     private int position;
+    private String coverImage;
 
-    CardData(Card card) {
+    CardData(Card card, FileUrlCreator fileUrlCreator) {
       this.id = card.getId().value();
       this.title = card.getTitle();
       this.position = card.getPosition();
+      this.coverImage = card.hasCoverImage() ?
+        ImageUtils.getThumbnailVersion(fileUrlCreator.url(card.getCoverImage())) : "";
     }
 
     public long getId() {
@@ -130,6 +136,10 @@ public String getTitle() {
     public int getPosition() {
       return position;
     }
+
+    public String getCoverImage() {
+      return coverImage;
+    }
   }
 
 }