Update project list on portfolio page

client/src/components/portfolio/AddProject.vue

@@ -1,7 +1,7 @@
 <template>
   <add-widget
     route="/new-project"
-    data-cy="add-project-button"/>
+    data-cy="add-project-widget"/>
 </template>
 
 <script>

client/src/components/portfolio/CreateProjectButton.vue

@@ -0,0 +1,26 @@
+<template>
+  <router-link
+    :to="createProjectRoute"
+    class="button button--primary"
+    data-cy="add-project-button">Projekt erstellen
+  </router-link>
+</template>
+
+<script>
+  import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
+
+  export default {
+    data() {
+      return {
+        createProjectRoute: {
+          name: NEW_PROJECT_PAGE,
+        },
+      };
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+</style>

client/src/components/portfolio/OwnerWidget.vue

@@ -3,7 +3,7 @@
     <avatar
       :avatar-url="owner.avatarUrl"
       class="owner-widget__avatar" />
-    <span>
+    <span data-cy="owner-name">
       {{ name }}
     </span>
   </div>

client/src/components/portfolio/PortfolioOnboarding.vue

@@ -15,26 +15,15 @@
       Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
     </p>
 
-    <router-link
+    <create-project-button />
-      :to="createProjectRoute"
-      class="button button--primary"
-      data-cy="add-project-button">Projekt erstellen</router-link>
   </div>
 </template>
 
 <script>
   import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
-  import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
+  import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
   export default {
-    components: {PortfolioIllustration},
+    components: {CreateProjectButton, PortfolioIllustration},
-
-    data() {
-      return {
-        createProjectRoute: {
-          name: NEW_PROJECT_PAGE
-        }
-      };
-    }
   };
 </script>
 

client/src/components/portfolio/ProjectList.vue

@@ -0,0 +1,40 @@
+<template>
+  <ul
+    class="project-list"
+    data-cy="project-list">
+
+    <project-list-item
+      :key="project.id"
+      :project="project"
+      data-cy="project"
+      class="project-list__item"
+      v-for="project in projects"/>
+  </ul>
+</template>
+
+<script>
+  import OwnerWidget from '@/components/portfolio/OwnerWidget';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+  import MoreActions from '@/components/rooms/MoreActions';
+  import ProjectActions from '@/components/portfolio/ProjectActions';
+  import ProjectListItem from '@/components/portfolio/ProjectListItem';
+
+  export default {
+    props: {
+      projects: {
+        type: Array,
+        default: () => ([]),
+      },
+    },
+    components: {ProjectListItem, MoreActions, EntryCountWidget, OwnerWidget, ProjectActions},
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .project-list {
+    border-top: 1px solid $color-silver;
+  }
+
+</style>

client/src/components/portfolio/ProjectListItem.vue

@@ -0,0 +1,89 @@
+<template>
+  <li
+    data-cy="project-list-item"
+    class="project">
+    <router-link
+      :to="{name: 'project', params: {slug: project.slug}}"
+      tag="div"
+      class="project__link"
+      data-cy="project-link">
+      <span
+        class="project__title"
+        data-cy="project-title">{{ project.title }}</span>
+
+      <owner-widget
+        :owner="project.student"
+        class="project__owner"/>
+
+      <entry-count-widget
+        :verbose="false"
+        :entry-count="project.entriesCount"/>
+
+    </router-link>
+    <project-actions
+      :id="project.id"
+      :final="project.final"
+      data-cy="project-actions"
+      class="project__actions"
+      v-if="!isReadOnly && isOwner"/>
+  </li>
+</template>
+
+<script>
+  import OwnerWidget from '@/components/portfolio/OwnerWidget';
+  import ProjectActions from '@/components/portfolio/ProjectActions';
+  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+
+  import me from '@/mixins/me';
+
+  export default {
+    props: {
+      project: {
+        type: Object,
+        default: () => ({}),
+      }
+    },
+
+    mixins: [me],
+
+    components: {
+      EntryCountWidget,
+      OwnerWidget,
+      ProjectActions,
+    },
+
+    computed: {
+      isOwner() {
+        return this.project.student.id === this.me.id;
+      },
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  .project {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    padding: $small-spacing 0;
+    border-bottom: 1px solid $color-silver;
+
+    &__link {
+      flex: 80%;
+      display: flex;
+      align-items: center;
+    }
+
+    &__title {
+      flex: 50%;
+      @include heading-4;
+    }
+
+    &__owner {
+      flex: 40%;
+    }
+  }
+</style>

client/src/components/rooms/EntryCountWidget.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="entry-count-widget">
     <cards/>
-    <span>{{ entryCount }} {{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</span>
+    <span data-cy="entry-count">{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span>
   </div>
 </template>
 
@@ -9,11 +9,19 @@
   import Cards from '@/components/icons/Cards.vue';
 
   export default {
-    props: ['entryCount'],
+    props: {
+      entryCount: {
+        type: Number,
+      },
+      verbose: {
+        type: Boolean,
+        default: true,
+      },
+    },
 
     components: {
-      Cards
+      Cards,
-    }
+    },
   };
 </script>
 

client/src/mixins/me.js

@@ -34,6 +34,9 @@ export default {
     canManageContent() {
       return this.me.isTeacher;
     },
+    isReadOnly() {
+      return this.me.readOnly || this.me.selectedClass.readOnly;
+    },
     currentClassName() {
       let currentClass = this.me.schoolClasses.find(schoolClass => {
         return schoolClass.id === this.me.selectedClass.id;

client/src/pages/portfolio/portfolio.vue

@@ -2,18 +2,12 @@
   <div class="portfolio__page">
     <template v-if="projects.length > 0">
       <div class="portfolio">
-        <add-project
+        <h1 data-cy="page-title">Portfolio</h1>
-          class="portfolio__add-project"
-          v-if="!me.readOnly && !me.selectedClass.readOnly"/>
 
-        <project-widget
+        <create-project-button class="portfolio__create-button" />
-          v-bind="project"
+
-          :user-id="userId"
+        <project-list
-          :key="project.id"
+          :projects="projects" />
-          :read-only="me.readOnly || me.selectedClass.readOnly"
-          class="portfolio__project"
-          v-for="project in projects"
-        />
       </div>
 
     </template>
@@ -28,9 +22,13 @@
   import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
   import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
   import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
+  import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
+  import ProjectList from '@/components/portfolio/ProjectList';
 
   export default {
     components: {
+      ProjectList,
+      CreateProjectButton,
       PortfolioOnboarding,
       ProjectWidget,
       AddProject
@@ -70,15 +68,21 @@
     @supports (display: grid) {
       display: grid;
       grid-template-columns: minmax(min-content, 840px);
+      grid-template-rows: auto;
     }
     grid-row-gap: 30px;
-    grid-auto-rows: 225px;
+    grid-auto-rows: auto;
     max-width: 840px;
     width: 100vw;
     /*justify-self: center;*/
     box-sizing: border-box;
     padding: $large-spacing $medium-spacing;
 
+    &__create-button {
+      display: inline-flex;
+      width: 150px;
+    }
+
     &__page {
       display: flex;
       flex-direction: column;

client/src/pages/portfolio/project.vue

@@ -123,12 +123,9 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_mixins.scss";
 
   .project {
-
     @include skillbox-colors;
 
     &__header {

client/src/router/portfolio.routes.js

@@ -5,7 +5,7 @@ import editProject from '@/pages/portfolio/editProject';
 import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
 
 const portfolioRoutes = [
-  {path: '/portfolio', name: 'portfolio', component: portfolio},
+  {path: '/portfolio', name: 'portfolio', component: portfolio, meta: {hideFooter: true}},
   {path: '/portfolio/:slug', name: 'project', component: project, props: true},
   {path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject},
   {path: '/edit-project/:id', name: 'edit-project', component: editProject, props: true},