From 6f7359294e3da8097b5d685bf3adbe0c2ae9e4fd Mon Sep 17 00:00:00 2001
From: Sk Imtiaz Ahmed <imtiaz101325@gmail.com>
Date: Mon, 25 May 2020 05:08:24 +0600
Subject: [PATCH] Added 'My Project' section in hackathon projects

- filtered existing data with user id
- refactored card markup into component
- added edit button to cards
---
 app/assets/v2/js/vue-components.js            | 79 ++++++++++++++++++-
 .../templates/dashboard/index-vue.html        | 69 ++++------------
 2 files changed, 93 insertions(+), 55 deletions(-)

diff --git a/app/assets/v2/js/vue-components.js b/app/assets/v2/js/vue-components.js
index 7a1c8a25d93..e0e4af7820a 100644
--- a/app/assets/v2/js/vue-components.js
+++ b/app/assets/v2/js/vue-components.js
@@ -1,4 +1,3 @@
-
 Vue.mixin({
   data: function() {
     const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent);
@@ -188,7 +187,7 @@ Vue.component('tribes-settings', {
 
 Vue.component('project-directory', {
   delimiters: [ '[[', ']]' ],
-  props: ['tribe'],
+  props: [ 'tribe', 'userId' ],
   methods: {
     fetchProjects: function(newPage) {
       let vm = this;
@@ -228,6 +227,16 @@ Vue.component('project-directory', {
           vm.hackathonProjects.push(item);
         });
 
+        vm.userProjects = [];
+        if (vm.userId) {
+          vm.userProjects = vm.hackathonProjects.filter(
+            ({ profiles }) => profiles.some(
+              ({ id }) => id === parseInt(vm.userId, 10)
+            )
+          );
+        }
+
+
         vm.projectsNumPages = response.num_pages;
         vm.projectsHasNext = response.has_next;
         vm.numProjects = response.count;
@@ -261,6 +270,7 @@ Vue.component('project-directory', {
       sponsor: this.tribe || null,
       hackathonSponsors: document.hackathonSponsors || [],
       hackathonProjects: document.hackathonProjects || [],
+      userProjects: document.userProjects || [],
       projectsPage: 1,
       hackathonId: document.hackathon_id || null,
       projectsNumPages: 0,
@@ -306,6 +316,71 @@ Vue.component('project-directory', {
   }
 });
 
+Vue.component('project-card', {
+  delimiters: [ '[[', ']]' ],
+  props: [ 'project', 'edit' ],
+  methods: {
+    projectModal() {
+      let project = this.$props.project;
+
+      projectModal(project.bounty.pk, project.pk);
+    }
+  },
+  template: `<div class="card card-user shadow-sm border-0">
+    <div class="card card-project">
+      <button v-on:click="projectModal" class="position-absolute btn btn-gc-green btn-sm m-2" id="edit-btn" v-bind:class="{ 'd-none': !edit }">edit</button>
+      <img v-if="project.badge" class="position-absolute card-badge" width="50" :src="profile.badge" alt="badge" />
+
+      <div class="card-bg rounded-top">
+        <img v-if="project.logo" class="card-project-logo m-auto rounded shadow" height="87" width="87" :src="project.logo" alt="Hackathon logo" />
+        <img v-else class="card-project-logo m-auto rounded shadow" height="87" width="87" :src="project.bounty.avatar_url" alt="Bounty Logo" />
+      </div>
+      <div class="card-body">
+        <h5 class="card-title font-weight-bold text-left">[[ project.name ]]</h5>
+        <div class="my-2">
+          <p class="text-left text-muted font-smaller-1">
+            [[ project.summary | truncate(500) ]]
+          </p>
+          <div class="text-left">
+            <a :href="project.work_url" target="_blank" class="btn btn-sm btn-gc-blue font-smaller-2 font-weight-semibold">View Project</a>
+            <a :href="project.bounty.url" class="btn btn-sm btn-outline-gc-blue font-smaller-2 font-weight-semibold">View Bounty</a>
+            <b-dropdown variant="outline-gc-blue" toggle-class="btn btn-sm" split-class="btn-sm btn btn-gc-blue">
+            <template v-slot:button-content>
+              <i class='fas fa-comment-dots'></i>
+            </template>
+            <b-dropdown-item-button @click.prevent="chatWindow(profile.handle);" v-for="profile in project.profiles" aria-describedby="dropdown-header-label" :key="profile.id">
+              @ [[ profile.handle ]]
+            </b-dropdown-item-button>
+            </b-dropdown>
+          </div>
+        </div>
+
+        <div class="my-3 mb-2 text-left">
+          <b class="font-weight-bold font-smaller-3">Team Members</b>
+          <div class="mt-1">
+              <a v-for="profile in project.profiles" :href="'/profile/' + profile.handle">
+                <b-img-lazy :src="profile.avatar_url" :alt="profile.handle" :title="profile.handle" width="30" height="30" class="rounded-circle"></b-img-lazy>
+              </a>
+          </div>
+        </div>
+
+        <div v-if="project.looking_members || project.message" class="my-3 looking-team">
+          <h5 v-if="project.looking_members"  class="info-card-title uppercase">Looking for team members</h5>
+          <p v-if="project.message" class="info-card-desc">
+            [[ project.message ]]
+          </p>
+        </div>
+
+        <div class="font-smaller-2 mt-4">
+          <b class="font-weight-bold">Sponsored by</b>
+          <img width="20" :src="project.bounty.avatar_url" :alt="project.bounty.org_name" />
+          <a :href="/profile/[[project.bounty.org_name]]">[[ project.bounty.org_name ]]</a>
+        </div>
+      </div>
+    </div>
+  </div>`
+});
+
 
 Vue.component('suggested-profiles', {
   props: ['profiles'],
diff --git a/app/dashboard/templates/dashboard/index-vue.html b/app/dashboard/templates/dashboard/index-vue.html
index d9bacb47e3b..3a51615c2aa 100644
--- a/app/dashboard/templates/dashboard/index-vue.html
+++ b/app/dashboard/templates/dashboard/index-vue.html
@@ -392,7 +392,7 @@ <h1 class="font-title font-weight-semibold">Hackathon Coming Soon!</h1>
                       <span class="nav-badge d-none d-sm-inline">({{projects_count}})</span>
                     </div>
                   </template>
-                  <project-directory inline-template>
+                  <project-directory inline-template user-id={{ user.profile.id | safe }}>
                     <div class="ml-4">
                     <div class="sidebar-container flex-column flex-lg-row">
                       <transition name="fade">
@@ -448,59 +448,19 @@ <h1 class="font-title font-weight-semibold">Hackathon Coming Soon!</h1>
                           <p class="mt-4 font-weight-bold mb-0">No projects found</p>
                           <button class="btn blue" @click="params = {}; searchTerm = ''; searchProjects();">Reset Filters</button>
                         </div>
-                        <div class="project-grid ml-2">
-                          <div v-for="project in hackathonProjects" class="card card-user shadow-sm border-0" :key="project.id">
-                            <div class="card card-project">
-                                <img v-if="project.badge" class="position-absolute card-badge" width="50" :src="profile.badge" alt="badge" />
-
-                                <div class="card-bg rounded-top" style="">
-                                  <img v-if="project.logo" class="card-project-logo m-auto rounded shadow" height="87" width="87" :src="project.logo" alt="Hackathon logo" />
-                                  <img v-else class="card-project-logo m-auto rounded shadow" height="87" width="87" :src="project.bounty.avatar_url" alt="Bounty Logo" />
-                                </div>
-                                <div class="card-body">
-                                <h5 class="card-title font-weight-bold text-left">[[ project.name ]]</h5>
-                                <div class="my-2">
-                                  <p class="text-left text-muted font-smaller-1">
-                                    [[ project.summary | truncate(500) ]]
-                                  </p>
-                                  <div class="text-left">
-                                    <a :href="project.work_url" target="_blank" class="btn btn-sm btn-gc-blue font-smaller-2 font-weight-semibold">View Project</a>
-                                    <a :href="project.bounty.url" class="btn btn-sm btn-outline-gc-blue font-smaller-2 font-weight-semibold">View Bounty</a>
-                                    <b-dropdown variant="outline-gc-blue" toggle-class="btn btn-sm" split-class="btn-sm btn btn-gc-blue">
-                                     <template v-slot:button-content>
-                                       <i class='fas fa-comment-dots'></i>
-                                     </template>
-                                     <b-dropdown-item-button @click.prevent="chatWindow(profile.handle);" v-for="profile in project.profiles" aria-describedby="dropdown-header-label">
-                                       @ [[ profile.handle ]]
-                                     </b-dropdown-item-button>
-                                    </b-dropdown>
-                                  </div>
-                                </div>
-
-                                <div class="my-3 mb-2 text-left">
-                                  <b class="font-weight-bold font-smaller-3">Team Members</b>
-                                  <div class="mt-1">
-                                      <a v-for="profile in project.profiles" :href=`/profile/${profile.handle}` class="">
-                                        <b-img-lazy :src="profile.avatar_url" :alt=`"@${profile.handle}"` :title="profile.handle" width="30" height="30" class="rounded-circle"></b-img-lazy>
-                                      </a>
-                                  </div>
-                                </div>
-
-                                <div v-if="project.looking_members || project.message" class="my-3 looking-team">
-                                  <h5 v-if="project.looking_members"  class="info-card-title uppercase">Looking for team members</h5>
-                                  <p v-if="project.message" class="info-card-desc">
-                                    [[ project.message ]]
-                                  </p>
-                                </div>
-
-                                <div class="font-smaller-2 mt-4">
-                                  <b class="font-weight-bold">Sponsored by</b>
-                                  <img class="" width="20" :src="project.bounty.avatar_url" :alt="project.bounty.org_name" />
-                                  <a :href=`/profile/${project.bounty.org_name}`>[[ project.bounty.org_name ]]</a>
-                                </div>
-                              </div>
-                              </div>
+                        <div v-if="userProjects.length > 0">
+                          <h1 class="font-title title ml-2">
+                            My Projects
+                          </h1>
+                          <div class="project-grid ml-2">
+                            <project-card v-for="project in userProjects" v-bind:project="project" v-bind:edit="true" :key="project.id"/>
                           </div>
+                          <h1 class="font-title title ml-2 mt-4">
+                            All Projects
+                          </h1>
+                        </div>
+                        <div class="project-grid ml-2">
+                          <project-card v-for="project in hackathonProjects" v-bind:project="project" :key="project.id"/>
                         </div>
                         <loading-screen v-if="isLoading"></loading-screen>
                       </div>
@@ -922,5 +882,8 @@ <h6 class="font-weight-bold mb-3">Invite [[numUsers]] Users to the Bounty</h6>
     <script src='{% static "v2/js/pages/townsquare.js" %}'></script>
     <script src='{% static "v2/js/pages/join_tribe.js" %}'></script>
     <script src='{% static "v2/js/users.js" %}'></script>
+    <script src='{% static "v2/js/hackathon-projects.js" %}'></script>
+    {% include 'shared/current_profile.html' %}
+    <script src='{% static "v2/js/user-search.js" %}'></script>
   </body>
 </html>