Update some portfolio components
This commit is contained in:
parent
96ed807b2b
commit
f84ac32aee
|
|
@ -19,9 +19,7 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
projectEntry: {
|
projectEntry: {
|
||||||
activity: '',
|
content: '',
|
||||||
reflection: '',
|
|
||||||
nextSteps: '',
|
|
||||||
documentUrl: ''
|
documentUrl: ''
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
export const NEW_PROJECT_PAGE = 'new-project';
|
||||||
|
|
@ -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},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue