From f84ac32aee1671121752bc14a17ff462cb5a2b13 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 2 Sep 2021 09:39:06 +0200
Subject: [PATCH] Update some portfolio components

---
 .../portfolio/NewProjectEntryWizard.vue       |  4 +-
 .../portfolio/PortfolioOnboarding.vue         | 16 ++++-
 .../components/portfolio/ProjectEntryForm.vue | 65 +++++++++++--------
 .../src/components/portfolio/ProjectForm.vue  |  6 +-
 client/src/router/portfolio.names.js          |  1 +
 client/src/router/portfolio.routes.js         |  3 +-
 6 files changed, 58 insertions(+), 37 deletions(-)
 create mode 100644 client/src/router/portfolio.names.js

diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index 9712e99c..46c779f3 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -19,9 +19,7 @@
     data() {
       return {
         projectEntry: {
-          activity: '',
-          reflection: '',
-          nextSteps: '',
+          content: '',
           documentUrl: ''
         }
       };
diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue
index 964ac7c8..33567d58 100644
--- a/client/src/components/portfolio/PortfolioOnboarding.vue
+++ b/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>
 
diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index 38a1d990..aba739a6 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/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>
diff --git a/client/src/components/portfolio/ProjectForm.vue b/client/src/components/portfolio/ProjectForm.vue
index 72d526fc..62bfcf2b 100644
--- a/client/src/components/portfolio/ProjectForm.vue
+++ b/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;
       }
     },
 
diff --git a/client/src/router/portfolio.names.js b/client/src/router/portfolio.names.js
new file mode 100644
index 00000000..3001fa59
--- /dev/null
+++ b/client/src/router/portfolio.names.js
@@ -0,0 +1 @@
+export const NEW_PROJECT_PAGE = 'new-project';
diff --git a/client/src/router/portfolio.routes.js b/client/src/router/portfolio.routes.js
index a63a115d..fbd59102 100644
--- a/client/src/router/portfolio.routes.js
+++ b/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},
 ];