From e039ef7142639fb1c9f40ee58e88c61f9c6d639c Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Mon, 2 Dec 2019 23:30:16 +0800
Subject: [PATCH] Feature: Add user-board view

---
 pinry-spa/src/assets/pinry-placeholder.jpg | Bin 0 -> 3212 bytes
 pinry-spa/src/components/Boards.vue        | 227 +++++++++++++++++++++
 pinry-spa/src/components/PHeader.vue       |   2 +-
 pinry-spa/src/components/api.js            |   6 +
 pinry-spa/src/components/utils/fonts.scss  |   1 +
 pinry-spa/src/router/index.js              |   6 +
 pinry-spa/src/views/Boards4User.vue        |  40 ++++
 7 files changed, 281 insertions(+), 1 deletion(-)
 create mode 100755 pinry-spa/src/assets/pinry-placeholder.jpg
 create mode 100644 pinry-spa/src/components/Boards.vue
 create mode 100644 pinry-spa/src/views/Boards4User.vue

diff --git a/pinry-spa/src/assets/pinry-placeholder.jpg b/pinry-spa/src/assets/pinry-placeholder.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..3915616e9ea42b685201c9f75da452fe16940e28
GIT binary patch
literal 3212
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

literal 0
HcmV?d00001

diff --git a/pinry-spa/src/components/Boards.vue b/pinry-spa/src/components/Boards.vue
new file mode 100644
index 0000000..4a57324
--- /dev/null
+++ b/pinry-spa/src/components/Boards.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="boards">
+    <section class="section">
+      <div id="boards-container" class="container" v-if="blocks">
+        <div
+          v-masonry=""          transition-duration="0.3s"
+          item-selector=".grid-item"
+          column-width=".grid-sizer"
+          gutter=".gutter-sizer"
+        >
+          <template v-for="item in blocks">
+            <div v-bind:key="item.id"
+                 v-masonry-tile
+                 :class="item.class"
+                 class="grid">
+              <div class="grid-sizer"></div>
+              <div class="gutter-sizer"></div>
+              <div class="board-card grid-item">
+                <router-link :to="{ name: 'board', params: { boardId: item.id } }">
+                  <div class="card-image">
+                    <img :src="item.preview_image_url"
+                       @load="onPinImageLoaded(item.id)"
+                       :style="item.style"
+                       v-show="item.preview_image_url"
+                       class="preview-image">
+                  </div>
+                  <div class="board-footer">
+                    <p class="sub-title board-info">{{ item.name }}</p>
+
+                    <p class="description">
+                      <small>
+                        Pins in board: <span class="num-pins">{{ item.total_pins }}</span>
+                      </small>
+                    </p>
+                  </div>
+                </router-link>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+      <loadingSpinner v-bind:show="status.loading"></loadingSpinner>
+      <noMore v-bind:show="!status.hasNext"></noMore>
+    </section>
+  </div>
+</template>
+
+<script>
+import API from './api';
+import pinHandler from './utils/PinHandler';
+import loadingSpinner from './loadingSpinner.vue';
+import noMore from './noMore.vue';
+import scroll from './utils/scroll';
+import placeholder from '../assets/pinry-placeholder.jpg';
+
+function createBoardItem(board) {
+  const defaultPreviewImage = placeholder;
+  const boardItem = {};
+  const pins4Board = board.pins_detail;
+  let previewImage = {
+    image: { thumbnail: { image: null, width: 240, height: 240 } },
+  };
+  if (pins4Board.length > 0) {
+    [previewImage] = pins4Board;
+  }
+  boardItem.id = board.id;
+  boardItem.name = board.name;
+  boardItem.total_pins = pins4Board.length;
+  if (previewImage.image.thumbnail.image !== null) {
+    boardItem.preview_image_url = pinHandler.escapeUrl(
+      previewImage.image.thumbnail.image,
+    );
+  } else {
+    boardItem.preview_image_url = defaultPreviewImage;
+  }
+  boardItem.style = {
+    width: `${previewImage.image.thumbnail.width}px`,
+    height: `${previewImage.image.thumbnail.height}px`,
+  };
+  boardItem.class = {};
+  return boardItem;
+}
+
+export default {
+  name: 'boards',
+  components: {
+    loadingSpinner,
+    noMore,
+  },
+  data() {
+    return {
+      blocks: [],
+      blocksMap: {},
+      status: {
+        loading: false,
+        hasNext: true,
+        offset: 0,
+      },
+    };
+  },
+  props: ['boardUsername'],
+  methods: {
+    onPinImageLoaded(itemId) {
+      this.blocksMap[itemId].class = {
+        'image-loaded': true,
+      };
+    },
+    registerScrollEvent() {
+      const self = this;
+      scroll.bindScroll2Bottom(
+        () => {
+          if (self.status.loading || !self.status.hasNext) {
+            return;
+          }
+          self.fetchMore();
+        },
+      );
+    },
+    buildBlocks(results) {
+      const blocks = [];
+      results.forEach(
+        (pin) => {
+          const item = createBoardItem(pin);
+          blocks.push(
+            item,
+          );
+        },
+      );
+      return blocks;
+    },
+    shouldFetchMore(created) {
+      if (!created) {
+        if (this.status.loading) {
+          return false;
+        }
+        if (!this.status.hasNext) {
+          return false;
+        }
+      }
+      return true;
+    },
+    fetchMore(created) {
+      if (!this.shouldFetchMore(created)) {
+        return;
+      }
+      this.status.loading = true;
+      const promise = API.fetchBoardForUser(this.boardUsername);
+      promise.then(
+        (resp) => {
+          const { results, next } = resp.data;
+          let newBlocks = this.buildBlocks(results);
+          newBlocks.forEach(
+            (item) => { this.blocksMap[item.id] = item; },
+          );
+          newBlocks = this.blocks.concat(newBlocks);
+          this.blocks = newBlocks;
+          this.status.offset = newBlocks.length;
+          this.status.hasNext = !(next === null);
+          this.status.loading = false;
+        },
+        () => { this.status.loading = false; },
+      );
+    },
+  },
+  created() {
+    this.registerScrollEvent();
+    this.fetchMore(true);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* grid */
+.grid-sizer,
+.grid-item { width: 240px; }
+.grid-item {
+  margin-bottom: 15px;
+}
+.gutter-sizer {
+  width: 15px;
+}
+
+/* card */
+$pin-footer-position-fix: -6px;
+$avatar-width: 30px;
+$avatar-height: 30px;
+@import './utils/fonts';
+@import './utils/loader.scss';
+
+.board-card{
+  .preview-image {
+    max-height: 200px;
+  }
+  .card-image > img {
+    background-color: white;
+    border-radius: 3px 3px 0 0;
+    @include loader('../assets/loader.gif');
+  }
+}
+.board-footer {
+  position: relative;
+  top: $pin-footer-position-fix;
+  background-color: white;
+  border-radius: 0 0 3px 3px ;
+  box-shadow: 0 1px 0 #bbb;
+  font-weight: bold;
+  .description {
+    @include secondary-font;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .board-info {
+    padding: 10px;
+    color: $main-title-font-color;
+  }
+  .num-pins {
+    font-size: 0.8rem;
+    color: $main-title-font-color;
+  }
+}
+
+@import 'utils/grid-layout';
+@include screen-grid-layout("#boards-container")
+
+</style>
diff --git a/pinry-spa/src/components/PHeader.vue b/pinry-spa/src/components/PHeader.vue
index 69aceec..2212618 100644
--- a/pinry-spa/src/components/PHeader.vue
+++ b/pinry-spa/src/components/PHeader.vue
@@ -31,7 +31,7 @@
               </a>
               <div class="navbar-dropdown">
                 <router-link
-                  to="/boards"
+                  :to="{ name: 'boards4user', params: {username: user.meta.username} }"
                   class="navbar-item">
                   Boards
                 </router-link>
diff --git a/pinry-spa/src/components/api.js b/pinry-spa/src/components/api.js
index 290f3bf..159f3cb 100644
--- a/pinry-spa/src/components/api.js
+++ b/pinry-spa/src/components/api.js
@@ -55,6 +55,11 @@ function fetchPinsForBoard(boardId) {
   );
 }
 
+function fetchBoardForUser(username) {
+  const url = `${API_PREFIX}boards/?submitter__username=${username}`;
+  return axios.get(url);
+}
+
 const User = {
   storageKey: 'pinry.user',
   logIn(username, password) {
@@ -128,5 +133,6 @@ export default {
   fetchPin,
   fetchPins,
   fetchPinsForBoard,
+  fetchBoardForUser,
   User,
 };
diff --git a/pinry-spa/src/components/utils/fonts.scss b/pinry-spa/src/components/utils/fonts.scss
index 8ff7c1c..fee673c 100644
--- a/pinry-spa/src/components/utils/fonts.scss
+++ b/pinry-spa/src/components/utils/fonts.scss
@@ -9,6 +9,7 @@
 @mixin secondary-font-color-in-dark {
   color: #878787;
 }
+$main-title-font-color: rgb(51, 51, 51);
 
 // for pins component
 @mixin pin-detail-font-size{
diff --git a/pinry-spa/src/router/index.js b/pinry-spa/src/router/index.js
index b28ce79..f4d8a1b 100644
--- a/pinry-spa/src/router/index.js
+++ b/pinry-spa/src/router/index.js
@@ -5,6 +5,7 @@ import Pins4Tag from '../views/Pins4Tag.vue';
 import Pins4User from '../views/Pins4User.vue';
 import Pins4Board from '../views/Pins4Board.vue';
 import Pins4Id from '../views/Pins4Id.vue';
+import Boards4User from '../views/Boards4User.vue';
 
 Vue.use(VueRouter);
 
@@ -34,6 +35,11 @@ const routes = [
     name: 'pin',
     component: Pins4Id,
   },
+  {
+    path: '/boards/users/:username',
+    name: 'boards4user',
+    component: Boards4User,
+  },
 ];
 
 const router = new VueRouter({
diff --git a/pinry-spa/src/views/Boards4User.vue b/pinry-spa/src/views/Boards4User.vue
new file mode 100644
index 0000000..2909dac
--- /dev/null
+++ b/pinry-spa/src/views/Boards4User.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="boards-for-user">
+    <PHeader></PHeader>
+    <Boards :boardUsername="username"></Boards>
+  </div>
+</template>
+
+<script>
+import PHeader from '../components/PHeader.vue';
+import Boards from '../components/Boards.vue';
+
+export default {
+  name: 'Boards4User',
+  data() {
+    return {
+      username: null,
+    };
+  },
+  components: {
+    PHeader,
+    Boards,
+  },
+  created() {
+    this.initialize();
+  },
+  beforeRouteUpdate(to, from, next) {
+    this.initialize();
+    next();
+  },
+  methods: {
+    initialize() {
+      this.username = this.$route.params.username;
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+</style>