Update some portfolio components

This commit is contained in:
Ramon Wenger 2021-09-02 09:39:06 +02:00
parent 96ed807b2b
commit f84ac32aee
6 changed files with 58 additions and 37 deletions

View File

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

View File

@ -15,14 +15,26 @@
Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren. Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
</p> </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> </div>
</template> </template>
<script> <script>
import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration'; import PortfolioIllustration from '@/components/illustrations/PortfolioIllustration';
import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
export default { export default {
components: {PortfolioIllustration} components: {PortfolioIllustration},
data() {
return {
createProjectRoute: {
name: NEW_PROJECT_PAGE
}
};
}
}; };
</script> </script>

View File

@ -1,24 +1,14 @@
<template> <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"> <div class="project-entry-modal">
<text-form-with-help-text <text-form
:value="localProjectEntry.activity" :value="content"
title="Tätigkeit" @change="localProjectEntry.content = $event"/>
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"/>
<document-form <document-form
:value="document" :value="document"
:index="0" :index="0"
@ -40,36 +30,59 @@
import Modal from '@/components/Modal'; import Modal from '@/components/Modal';
import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText'; import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
import DocumentForm from '@/components/content-forms/DocumentForm'; import DocumentForm from '@/components/content-forms/DocumentForm';
import TextForm from '@/components/content-forms/TextForm';
export default { export default {
props: ['project-entry'], props: {
projectEntry: {
type: Object,
default: null,
},
},
components: { components: {
TextForm,
DocumentForm, DocumentForm,
Modal, Modal,
TextFormWithHelpText TextFormWithHelpText,
}, },
data() { data() {
return { return {
localProjectEntry: Object.assign({}, { localProjectEntry: Object.assign({}, {
...this.projectEntry ...this.projectEntry,
}) }),
}; };
}, },
computed: { computed: {
document() { document() {
return this.localProjectEntry.documentUrl > '' ? { return this.localProjectEntry.documentUrl > '' ? {
url: this.localProjectEntry.documentUrl url: this.localProjectEntry.documentUrl,
} : {}; } : {};
} },
content() {
return {
text: this.localProjectEntry.content,
};
},
}, },
methods: { methods: {
setDocumentUrl(url) { setDocumentUrl(url) {
this.localProjectEntry.documentUrl = url; this.localProjectEntry.documentUrl = url;
}, },
} },
}; };
</script> </script>
<style lang="scss" scoped>
@import "~styles/helpers";
.project-entry-modal {
&__heading {
@include heading-3;
margin-bottom: 0;
}
}
</style>

View File

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

View File

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

View File

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