144 lines
3.3 KiB
Vue
144 lines
3.3 KiB
Vue
<template>
|
|
<div class="portfolio__page">
|
|
<div class="portfolio">
|
|
<add-project class="portfolio__add-project"></add-project>
|
|
|
|
<project-widget
|
|
v-for="project in projects"
|
|
v-bind="project"
|
|
:userId="userId"
|
|
@delete="deleteProject"
|
|
@updateShare="updateShareState"
|
|
@edit="editProject"
|
|
:key="project.id"
|
|
class="portfolio__project"
|
|
></project-widget>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ProjectWidget from '@/components/portfolio/ProjectWidget';
|
|
import AddProject from '@/components/portfolio/AddProject';
|
|
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
|
import PROJECTS_QUERY from '@/graphql/gql/allProjects.gql';
|
|
import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
|
|
import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';
|
|
|
|
export default {
|
|
components: {
|
|
ProjectWidget,
|
|
AddProject
|
|
},
|
|
|
|
apollo: {
|
|
projects: {
|
|
query: PROJECTS_QUERY,
|
|
update(data) {
|
|
return this.$getRidOfEdges(data).projects
|
|
}
|
|
},
|
|
me: {
|
|
query: ME_QUERY
|
|
}
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
projects: [],
|
|
me: {}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
userId () {
|
|
return this.me.id;
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
deleteProject(id) {
|
|
this.$apollo.mutate({
|
|
mutation: DELETE_PROJECT_MUTATION,
|
|
variables: {
|
|
input: {
|
|
id
|
|
}
|
|
},
|
|
update(store, {data: {deleteProject: {success}}}) {
|
|
if (success) {
|
|
const data = store.readQuery({query: PROJECTS_QUERY});
|
|
|
|
if (data) {
|
|
data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
|
|
store.writeQuery({query: PROJECTS_QUERY, data});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
},
|
|
editProject(id) {
|
|
this.$router.push({name: 'edit-project', params: { id }});
|
|
},
|
|
updateShareState(id, state) {
|
|
const project = this.projects.filter(project => project.id === id)[0];
|
|
this.$apollo.mutate({
|
|
mutation: UPDATE_PROJECT_MUTATION,
|
|
variables: {
|
|
input: {
|
|
project: {
|
|
id: project.id,
|
|
title: project.title,
|
|
description: project.description,
|
|
appearance: project.appearance,
|
|
objectives: project.objectives,
|
|
final: state
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
.portfolio {
|
|
display: flex;
|
|
flex-direction: column;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
|
|
grid-row-gap: 30px;
|
|
grid-auto-rows: 200px;
|
|
max-width: 640px;
|
|
width: auto;
|
|
justify-self: center;
|
|
box-sizing: border-box;
|
|
padding: $large-spacing $medium-spacing;
|
|
|
|
&__page {
|
|
display: flex;
|
|
@supports (display: grid) {
|
|
display: grid;
|
|
}
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
padding-top: $large-spacing;
|
|
}
|
|
|
|
/*IE10*/
|
|
&__add-project {
|
|
margin-bottom: $large-spacing;
|
|
@supports (display: grid) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|