66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
|
<page-form @save="$emit('save', localProject)" title="Neues Projekt">
|
|
<page-form-input label="Titel" v-model="localProject.title"></page-form-input>
|
|
<page-form-input label="Beschreibung" type="textarea" v-model="localProject.description"></page-form-input>
|
|
<page-form-input label="Ziele" type="textarea" v-model="localProject.objectives"></page-form-input>
|
|
<color-chooser
|
|
:selected-color="localProject.appearance"
|
|
v-on:input="updateColor"
|
|
></color-chooser>
|
|
<template slot="footer">
|
|
<button
|
|
type="submit"
|
|
class="button button--primary"
|
|
data-cy="save-project-button"
|
|
:class="{'button--disabled': !formValid}"
|
|
:disabled="!formValid"
|
|
>Speichern
|
|
</button>
|
|
<router-link to="/portfolio" tag="button" class="button">Abbrechen</router-link>
|
|
</template>
|
|
</page-form>
|
|
</template>
|
|
|
|
<script>
|
|
import PageForm from '@/components/page-form/PageForm';
|
|
import PageFormInput from '@/components/page-form/PageFormInput';
|
|
import ColorChooser from '@/components/ColorChooser';
|
|
|
|
export default {
|
|
props: ['project'],
|
|
|
|
components: {
|
|
PageForm,
|
|
PageFormInput,
|
|
ColorChooser
|
|
},
|
|
|
|
computed: {
|
|
formValid() {
|
|
return this.localProject.title && this.localProject.description && this.localProject.objectives;
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
localProject: Object.assign({}, this.project),
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateColor(newColor) {
|
|
this.localProject.appearance = newColor;
|
|
this.$store.dispatch('setSpecialContainerClass', newColor);
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.$store.dispatch('setSpecialContainerClass', this.localProject.appearance);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.$store.dispatch('setSpecialContainerClass', '');
|
|
}
|
|
}
|
|
</script>
|