skillbox/client/src/pages/portfolio/project.vue

<template>
  <div
    :class="specialContainerClass"
    class="project">
    <div class="project__header">
      <back-link
        class="project__back"
        title="Zurück zur Übersicht"
        type="portfolio"/>

      <div class="project__actions">
        <share-link
          :final="project.final"
          class="project__share"
          @click.native="updateProjectShareState(project.id, !project.final)" />

        <project-actions
          :id="project.id"
          :share-buttons="false"
          class="project__more"
          v-if="!me.readOnly && !me.selectedClass.readOnly"/>

      </div>

      <h1
        class="project__title"
        data-cy="project-title">{{ project.title }}</h1>
      <p class="project__description">
        {{ project.description }}
      </p>

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

    </div>
    <div class="project__content">
      <add-project-entry
        :project="project.id"
        class="project__add-entry"
        data-cy="add-project-entry"
        v-if="isOwner && !me.readOnly && !me.selectedClass.readOnly"/>
      <project-entry
        v-bind="entry"
        :key="index"
        :read-only="me.readOnly || me.selectedClass.readOnly"
        v-for="(entry, index) in project.entries"/>
    </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/queries/meQuery.gql';
  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
  import BackLink from '@/components/BackLink';
  import ShareIcon from '@/components/icons/ShareIcon';
  import ShareLink from '@/components/portfolio/ShareLink';

  import updateProjectShareState from '@/mixins/update-project-share-state';

  export default {
    props: ['slug'],

    mixins: [updateProjectShareState],

    components: {
      ShareLink,
      ShareIcon,
      BackLink,
      AddProjectEntry,
      ProjectEntry,
      ProjectActions,
      EntryCountWidget,
      OwnerWidget,
    },

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

    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,
          };
        },
        pollInterval: 5000,
      },
      me: {
        query: ME_QUERY,
      },
    },

  };
</script>

<style scoped lang="scss">
  @import "~styles/helpers";

  .project {
    &__header {
      padding: $large-spacing;
      border-bottom: 1px solid $color-silver;

      display: grid;
      grid-template-areas:
        "b a"
        "t t"
        "d d"
        "m m"
    }

    &__back {
      grid-area: b;
    }

    &__actions {
      grid-area: a;
      display: flex;

      justify-self: end;
    }

    &__share {
      margin-right: $medium-spacing;
    }

    &__title {
      grid-area: t;
    }

    &__description {
      grid-area: d;
    }

    &__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 {
      grid-area: m;

      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 {
      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(min-content, 840px);
      grid-row-gap: 30px;
      justify-content: center;
      padding: $large-spacing $medium-spacing;
    }
  }
</style>