Update some portfolio components

client/src/components/portfolio/NewProjectEntryWizard.vue

@@ -19,9 +19,7 @@
     data() {
       return {
         projectEntry: {
-          activity: '',
-          reflection: '',
-          nextSteps: '',
+          content: '',
           documentUrl: ''
         }
       };

client/src/components/portfolio/PortfolioOnboarding.vue

@@ -15,14 +15,26 @@
       Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
     </p>
 
-    <a class="button button--primary">Projekt erstellen</a>
+    <router-link
+      :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';
   export default {
-    components: {PortfolioIllustration}
+    components: {PortfolioIllustration},
+
+    data() {
+      return {
+        createProjectRoute: {
+          name: NEW_PROJECT_PAGE
+        }
+      };
+    }
   };
 </script>
 

client/src/components/portfolio/ProjectEntryForm.vue

@@ -1,24 +1,14 @@
 <template>
-  <modal :hide-header="true">
+  <modal :hide-header="false">
+    <h2
+      class="project-entry-modal__heading"
+      slot="header">
+      Beitrag erfassen
+    </h2>
     <div class="project-entry-modal">
-      <text-form-with-help-text
-        :value="localProjectEntry.activity"
-        title="Tätigkeit"
-        data-cy="activity-input"
-        help-text="Was? Wie? Mittel?"
-        @change="localProjectEntry.activity = $event"/>
-      <text-form-with-help-text
-        :value="localProjectEntry.reflection"
-        title="Reflexion"
-        data-cy="reflection-input"
-        help-text="Nachdenken über die eigene Tätigkeit und das eigene Handeln. Was ging gut? Was hatte ich für Schwierigkeiten? Was habe ich gelernt?"
-        @change="localProjectEntry.reflection = $event"/>
-      <text-form-with-help-text
-        :value="localProjectEntry.nextSteps"
-        title="Nächste Schritte"
-        data-cy="next-steps-input"
-        help-text="Wie geht es weiter? Wer macht was?"
-        @change="localProjectEntry.nextSteps = $event"/>
+      <text-form
+        :value="content"
+        @change="localProjectEntry.content = $event"/>
       <document-form
         :value="document"
         :index="0"
@@ -40,36 +30,59 @@
   import Modal from '@/components/Modal';
   import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
   import DocumentForm from '@/components/content-forms/DocumentForm';
+  import TextForm from '@/components/content-forms/TextForm';
 
   export default {
-    props: ['project-entry'],
+    props: {
+      projectEntry: {
+        type: Object,
+        default: null,
+      },
+    },
 
     components: {
+      TextForm,
       DocumentForm,
       Modal,
-      TextFormWithHelpText
+      TextFormWithHelpText,
     },
 
     data() {
       return {
         localProjectEntry: Object.assign({}, {
-          ...this.projectEntry
-        })
+          ...this.projectEntry,
+        }),
       };
     },
 
     computed: {
       document() {
         return this.localProjectEntry.documentUrl > '' ? {
-          url: this.localProjectEntry.documentUrl
+          url: this.localProjectEntry.documentUrl,
         } : {};
-      }
+      },
+      content() {
+        return {
+          text: this.localProjectEntry.content,
+        };
+      },
     },
 
     methods: {
       setDocumentUrl(url) {
         this.localProjectEntry.documentUrl = url;
       },
-    }
+    },
   };
 </script>
+
+<style lang="scss" scoped>
+  @import "~styles/helpers";
+
+  .project-entry-modal {
+    &__heading {
+      @include heading-3;
+      margin-bottom: 0;
+    }
+  }
+</style>

client/src/components/portfolio/ProjectForm.vue

@@ -9,10 +9,6 @@
       v-model="localProject.description"
       label="Beschreibung"
       type="textarea"/>
-    <page-form-input
-      v-model="localProject.objectives"
-      label="Ziele"
-      type="textarea"/>
     <color-chooser
       :selected-color="localProject.appearance"
       @input="updateColor"
@@ -56,7 +52,7 @@
 
     computed: {
       formValid() {
-        return this.localProject.title && this.localProject.description && this.localProject.objectives;
+        return this.localProject.title;
       }
     },
 

client/src/router/portfolio.names.js

@@ -0,0 +1 @@
+export const NEW_PROJECT_PAGE = 'new-project';

client/src/router/portfolio.routes.js

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