ProjectDetail.vue

<template>
  <q-page>
    <div
      v-if="project && projectLoaded"
      class="q-pa-md container"
    >
      <!--
      {{project}}
      -->
      <div class="row">
        <!-- content -->
        <div class="col-xs-12 col-md-7 offset-md-1 col-lg-6 offset-lg-2">
          <ProjectPhotosCard
            :project="project"
            :photos="filterPhotos"
          />
          <q-space />
          <ProjectTextCard :project="project" />
        </div>
        <div class="col-xs-12 col-md-3 col-lg-2">
          <ProjectDescriptionCard
            :project="project"
            @action="handleAction"
          />
        </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" />
        </div>
      </div>

      <q-dialog v-model="showSelectCollectionDialog">
        <SelectCollectionDialog @collection="handleSaveBookmark" />
      </q-dialog>

      <q-dialog v-model="showDownloadsDialog">
        <DownloadsDialog
          :downloads="project_files"
          :project="project"
        />
      </q-dialog>
    </div>

    <div v-if="!project || !projectLoaded">
      <div class="project-loader flex flex-center">
        <q-spinner-dots
          size="32px"
          class="q-pa-xl"
        />
      </div>
    </div>
  </q-page>
</template>

<script>
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';
export default {
  components: {
    ProjectPhotosCard,
    ProjectDescriptionCard,
    ProjectCommentsCard,
    ProjectTextCard,
    RelatedProjectsGallery,
    SelectCollectionDialog,
    DownloadsDialog
  },
  // name: 'PageName',
  mounted () {
    if (this.projectId) {
      this.projectLoaded = false;
      this.$q.loadingBar.start();
      this.loadProject(this.projectId).finally(() => {
        this.$q.loadingBar.stop();
        this.projectLoaded = true;
      });
    }
  },
  watch: {
    projectId (newVal) {
      if (newVal) {
        this.$nextTick(() => {
          this.projectLoaded = false;
          this.$q.loadingBar.start();
          this.loadProject(newVal).finally(() => {
            this.projectLoaded = true;
            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')
        })
    }

  },
  computed: {
    filterPhotos () {
      if (!this.project_photos) return [];
      const good = this.project_photos.filter(p => {
        return p != null;
      });
      return good;
    },
    projectId () {
      return this.$route.params['project_id'];
    },
    ...mapGetters({
      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'
    })
  },
  data () {
    return {
      commentLoading: false,
      projectLoaded: false,
      showSelectCollectionDialog: false,
      showDownloadsDialog: false
    };
  }
};
</script>

<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;
}
</style>