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"
          data-cy="project-share-link"
          class="project__share"
          @share="updateProjectShareState(project.slug, !project.final)"
        />

        <project-actions :share-buttons="false" class="project__more" :slug="project.slug" v-if="canEdit" />
      </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.slug"
        class="project__add-entry"
        data-cy="add-project-entry"
        v-if="isOwner && !me.readOnly && !me.selectedClass.readOnly"
      />
      <project-entry v-bind="entry" :read-only="!canEdit" v-for="(entry, index) in project.entries" :key="index" />
    </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 ShareLink from '@/components/portfolio/ShareLink';

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

export default {
  props: ['slug'],

  mixins: [updateProjectShareState],

  components: {
    ShareLink,
    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;
    },
    canEdit() {
      return !this.me.readOnly && !this.me.selectedClass.readOnly && this.isOwner;
    },
  },

  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: $medium-spacing;
    @include desktop {
      padding: $large-spacing;
    }
    border-bottom: 1px solid $color-silver;

    display: grid;
    grid-template-areas:
      'b'
      't'
      'd'
      'm'
      'a';
    @include desktop {
      grid-template-areas:
        'b a'
        't t'
        'd d'
        'm m';
    }
  }

  &__back {
    grid-area: b;
    margin-bottom: $medium-spacing;
    @include desktop {
      margin-bottom: 0;
    }
  }

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

    @include desktop {
      justify-self: end;
    }
  }

  &__more {
    display: none;
    @include desktop {
      display: block;
    }
  }

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

  &__title {
    grid-area: t;
  }

  &__description {
    grid-area: d;
    font-family: $sans-serif-font-family;
  }

  &__add-entry {
    height: 120px;

    display: none;
    @include desktop {
      display: flex;
    }
  }

  &__description {
    margin-bottom: 30px;
  }

  &__meta {
    grid-area: m;

    display: flex;
    flex-direction: column;
    margin-bottom: $medium-spacing;

    @include desktop {
      flex-direction: row-reverse;
      align-items: center;
      margin-bottom: 0;
    }
    justify-content: flex-start;
    position: relative;
    & > :first-child {
      margin-bottom: $medium-spacing;
      @include desktop {
        margin-left: $large-spacing;
        margin-bottom: 0;
      }
    }

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

  &__content {
    display: flex;
    flex-direction: column;
    /*max-width: 840px;*/
    width: 100%;
    min-height: 75vh;
    align-content: flex-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>