skillbox/client/src/pages/project.vue

<template>
  <div class="project" :class="specialContainerClass">
    <div class="project__header">
      <h1 class="project__title">{{project.title}}</h1>
      <p class="project__description">
        {{project.description}}
      </p>

      <h2 class="project__objectives-title">Ziele</h2>
      <ul class="project__objectives">
        <li class="project__objective" :key="index" v-for="(objective, index) in objectives">{{objective}}</li>
      </ul>

      <div class="project__meta">
        <project-actions :id="this.project.id"></project-actions>
        <owner-widget :owner="this.project.student"></owner-widget>
        <entry-count-widget :entry-count="projectEntryCount"></entry-count-widget>
      </div>

    </div>
    <div class="project__content">
      <add-project-entry v-if="isOwner" class="project__add-entry" data-cy="add-project-entry"
                         :project="project.id"></add-project-entry>
      <project-entry v-bind="entry" v-for="(entry, index) in project.entries" :key="index"></project-entry>
    </div>
  </div>
</template>

<script>
  import ProjectEntry from '@/components/portfolio/ProjectEntry';
  import ProjectActions from '@/components/portfolio/ProjectActions';
  import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
  import OwnerWidget from '@/components/portfolio/OwnerWidget';

  import ME_QUERY from '@/graphql/gql/meQuery.gql';
  import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';

  export default {
    props: ['slug'],

    components: {
      AddProjectEntry,
      ProjectEntry,
      ProjectActions,
      EntryCountWidget,
      OwnerWidget
    },

    computed: {
      objectives() {
        return this.project.objectives ? this.project.objectives.split('\n') : [];
      },
      specialContainerClass() {
        const cls = this.project.appearance;
        return [cls ? `project--${cls}` : ''];
      },
      isOwner() {
        return this.me.id === this.project.student.id;
      },
      projectEntryCount() {
        return this.project.entries ? this.project.entries.length : 0;
      }
    },

    apollo: {
      project: {
        query: PROJECT_QUERY,
        variables() {
          return {
            slug: this.slug
          }
        },
        update(data) {
          const project = this.$getRidOfEdges(data).project || {};
          this.$store.dispatch('setSpecialContainerClass', project.appearance);
          return project;
        },
        pollInterval: 5000,
      },
      me: {
        query: ME_QUERY
      }
    },

    data() {
      return {
        project: {
          student: {
            id: ' '
          }
        },
        me: {
          id: ''
        }
      }
    },

    created() {
    },

    beforeDestroy() {
      this.$store.dispatch('setSpecialContainerClass', '');
    },
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_functions.scss";
  @import "@/styles/_mixins.scss";

  .project {

    @include skillbox-colors;

    &__header {
      padding: $large-spacing;
    }

    &__add-entry {
      height: 120px;
    }

    &__description,
    &__objective {
      font-family: $sans-serif-font-family;
    }

    &__description {
      margin-bottom: 30px;
    }

    &__objectives-title {
      font-size: toRem(22px);
      margin-bottom: 8px;
    }

    &__objectives {
      list-style: disc;
      padding-left: 30px;
    }

    &__objective {
      line-height: 1.5;
    }

    &__meta {
      display: flex;
      flex-direction: column;
      @include desktop {
        flex-direction: row-reverse;
      }
      justify-content: start;
      position: relative;
      align-items: center;

      & > :first-child {
        margin-left: $large-spacing;
      }

      & > :nth-child(2) {
        margin-left: $large-spacing;
      }
    }

    &__content {
      background-color: rgba($color-charcoal-dark, 0.18);
      display: flex;
      flex-direction: column;
      /*max-width: 840px;*/
      width: 100%;
      min-height: 75vh;
      align-content: start;
      margin: 0 auto;
      @supports (display: grid) {
        display: grid;
        width: auto;
      }
      grid-template-columns: minmax(max-content, 840px);
      grid-row-gap: 30px;
      justify-content: center;
      padding: $large-spacing $medium-spacing;
    }
  }
</style>