Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added 'My Project' section in hackathon projects #6494

Merged
merged 2 commits into from
Jun 4, 2020
Merged

Added 'My Project' section in hackathon projects #6494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f73592
Added 'My Project' section in hackathon projects
imtiaz101325 May 24, 2020
9193241
Merge branch 'master' into imtiaz-6442-hackathon-my-projects
danlipert Jun 4, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 77 additions & 2 deletions app/assets/v2/js/vue-components.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

Vue.mixin({
data: function() {
const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i).test(navigator.userAgent);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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'],
Expand Down
69 changes: 16 additions & 53 deletions app/dashboard/templates/dashboard/index-vue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -921,5 +881,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>