Newer
Older
<div class="col-xs-12 col-md-7 offset-md-1 col-lg-6 offset-lg-2">
<ProjectPhotosCard
:project="project"
:photos="filterPhotos"
/>
<ProjectDescriptionCard
:project="project"
/>
</div>
</div>
<q-space />
<div class="row">
<div class="col-xs-12 col-md-7 offset-md-1 col-lg-6 offset-lg-2">
<ProjectCommentsCard
:comments="project_comments"
@addComment="handleAddComment"
/>
<q-space />
<RelatedProjectsGallery :projects="related_projects" />
<q-dialog v-model="showSelectCollectionDialog">
<SelectCollectionDialog @collection="handleSaveBookmark" />
</q-dialog>
<q-dialog v-model="showDownloadsDialog">
<DownloadsDialog
:downloads="project_files"
:project="project"
/>
</q-dialog>
<div v-if="!project || !projectLoaded">
<q-spinner-dots
size="32px"
class="q-pa-xl"
/>
import { openURL } from 'quasar'
import { mapActions, mapGetters } from 'vuex';
import ProjectDescriptionCard from 'components/project/ProjectDescriptionCard';
import ProjectPhotosCard from 'components/project/ProjectPhotosCard';
import ProjectCommentsCard from 'components/project/ProjectCommentsCard';
import ProjectTextCard from 'components/project/ProjectTextCard';
import RelatedProjectsGallery from 'components/project/RelatedProjectsGallery';
import SelectCollectionDialog from 'src/components/collection/SelectCollectionDialog';
import DownloadsDialog from 'src/components/project/DownloadsDialog';
RelatedProjectsGallery,
SelectCollectionDialog,
DownloadsDialog
this.$q.loadingBar.start();
this.loadProject(this.projectId).finally(() => {
this.$q.loadingBar.stop();
this.$q.loadingBar.start();
this.loadProject(newVal).finally(() => {
this.$q.loadingBar.stop();
});
});
}
}
},
methods: {
openURL,
...mapActions({
loadProject: 'project_detail/loadProject',
addComment: 'project_detail/addComment',
addBookmark: 'collections/addBookmark'
handleAction (action) {
if (action === 'showDocumentation') {
this.handleShowDocumentation();
} else if (action === 'showDownloads') {
this.handleShowDownloads();
} else if (action === 'addBookmark') {
this.handleAddBookmark();
}
},
handleAddComment (comment) {
console.log('something')
this.commentLoading = true;
this.addComment(comment).then(() => {
this.$q.notify('Comment added successfully');
}).catch((e) => {
this.$q.notify('Error adding comment. Please try again later');
}).finally(() => {
this.commentLoading = false;
})
},
handleShowDocumentation () {
// this.showDocumentationDialog = true;
// this.openURL
if (this.project.website) { this.openURL(this.project.website) }
},
handleShowDownloads () {
this.showSelectCollectionDialog = false;
this.showDownloadsDialog = true;
},
handleAddBookmark (key) {
this.showDownloadsDialog = false;
this.showSelectCollectionDialog = true;
},
handleSaveBookmark (selectedCollection) {
console.log(selectedCollection)
const collectionId = selectedCollection.value
this.addBookmark({ collection: collectionId, project: this.project.id })
.then(() => {
this.$q.notify('Bookmark added')
}).catch((e) => {
console.log(e)
this.$q.notify('Some error occurred, please try again later')
})
if (!this.project_photos) return [];
const good = this.project_photos.filter(p => {
projectId () {
return this.$route.params['project_id'];
project: 'project_detail/selectedProject',
project_photos: 'project_detail/selectedProjectPhotos',
project_files: 'project_detail/selectedProjectFiles',
project_comments: 'project_detail/selectedProjectComments',
related_projects: 'project_detail/relatedProjects',
userCollections: 'collections/userCollections'
projectLoaded: false,
showSelectCollectionDialog: false,
showDownloadsDialog: false
<style lang="scss">
.project-card {
width: 512px;
max-width: 100%;
}
div.thumb_small {
border: none;
opacity: 0.6;
}
div.thumb_small.on {
// border: 1px solid #333;
opacity: 1;
}