Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- -------------------- -->
<!-- Index page component -->
<!-- -------------------- -->
<template>
<div>
<v-container v-if="$route.name === 'crm/projects'" class="px-0" fluid>
<v-layout row wrap>
<v-flex>
<v-toolbar flat>
<v-text-field v-model="search" append-icon="search" label="Search" single-line hide-details></v-text-field>
<v-spacer></v-spacer>
<v-btn icon :color="com.toolbarBtnColor" :to="'/crm/' + product + '/projects/add'">
<v-icon>add</v-icon>
</v-btn>
</v-toolbar>
<v-data-table :headers="headers" :items="projectsList" hide-actions :search="search">
<v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>
<template slot="items" slot-scope="props">
<td class="text-xs-left projectTitle">
<router-link :to="'/crm/' + product + '/projects/' + props.item.id">{{ props.item.title }}</router-link>
</td>
<td class="text-xs-left">{{ props.item.description }}</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
<router-view></router-view>
</div>
</template>
<script>
import { com } from "./../../../main";
import * as log from 'loglevel';
import { mapGetters } from 'vuex';
export default {
name: 'CrmProjects',
created() {
log.info("Initial fetch projects");
this.$store.dispatch('projects/fetchProjects', this.product);
},
computed: {
...mapGetters("projects", [ 'projectsList'])
},
data () {
return {
com: com,
product: this.$route.params.product,
headers: [
{ text: 'Titel', value: 'title' },
{ text: 'Beschreibung', value: 'description' }
],
search: ""
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.projectTitle {
min-width: 140px;
a {
font-weight: bold;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
</style>
// --------------------
// Show page component
// --------------------
<template>
<v-container grid-list-xl>
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<h1 class="pa-0 ma-0 mt-2 subheading font-weight-bold text-xs-left hidden-lg-and-up">
<v-btn icon :to="`/crm/${product}/projects`" small><v-icon small>fas fa-arrow-left</v-icon></v-btn>
{{ project.title }}
</h1>
<h1 class="pa-0 ma-0 mt-2 display-1 text-xs-left hidden-md-and-down">
<v-btn icon :to="'/crm/' + product + '/projects'"><v-icon>fas fa-arrow-left</v-icon></v-btn>
{{ project.title }}
</h1>
</v-flex>
<v-flex md6>
<HxCard title="Stammdaten">
<template slot="toolbar">
<v-btn icon small :color="com.toolbarBtnColor" :to="`/crm/${product}/projects/${id}/edit`" @click.stop>
<v-icon class="subheading">edit</v-icon>
</v-btn>
</template>
<v-container grid-list-md text-xs-center>
<DataItem label="Titel" divider>{{ project.title }}</DataItem>
<DataItem label="Beschreibung">{{ project.description }}</DataItem>
</v-container>
</HxCard>
</v-flex>
<v-flex md6>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import * as log from 'loglevel';
import { com } from "./../../../main";
import { mapGetters } from 'vuex';
export default {
name: 'ShowProject',
created() {
log.info("Created Project Show");
this.$store.dispatch('projects/setCurrentProject', this.id);
},
computed: {
...mapGetters("projects", [ 'project'])
},
data () {
return {
id: this.$route.params.id,
product: this.$route.params.product,
com: com
}
},
methods: {
}
}
</script>
// --------------------
// Edit page component
// --------------------
<template>
<v-container grid-list-xl text-xs-center>
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<h1 v-if="project" class="pa-0 ma-0 mt-2 headline text-xs-left">
<v-btn icon :to="back"><v-icon>fas fa-arrow-left</v-icon></v-btn>
{{ project.title }}
</h1>
</v-flex>
<v-flex md6>
<HxCard title="Projekt bearbeiten">
<v-btn slot="toolbar" icon small :color="com.toolbarBtnColor" @click.stop="deleteProject">
<v-icon class="subheading">delete</v-icon>
</v-btn>
<v-card-text>
<ProjectForm :back="back" @submit="submit" :project="project"/>
</v-card-text>
</HxCard>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import { com } from "./../../../main";
import { mapGetters } from 'vuex';
export default {
computed: {
back() { return `/crm/${this.product}/projects/${this.id}` },
...mapGetters("projects", {
projectState: 'project'
}),
project() {
// Create a copy, so the form can't modify the state directly
return {
id: this.projectState.id,
title: this.projectState.title,
description: this.projectState.description
}
}
},
data() {
return {
com: com,
id: this.$route.params.id,
product: this.$route.params.product
}
},
methods: {
submit(project) {
this.$store.dispatch('projects/updateProject', { product: this.product, project: project });
this.$router.push(this.back);
},
deleteProject() {
this.$store.dispatch('projects/deleteProject', { product: this.product, project: this.project });
this.$router.push(this.back);
}
}
}
</script>
// -------------------
// Add page component
// -------------------
<template>
<v-container grid-list-xl text-xs-center>
<v-layout row wrap>
<v-flex xs12 class="pa-2">
<h1 class="pa-0 ma-0 mt-2 headline text-xs-left">
<v-btn icon :to="back"><v-icon>fas fa-arrow-left</v-icon></v-btn>
Zurück
</h1>
</v-flex>
<v-flex md6>
<HxCard title="Projekt erstellen">
<v-card-text>
<ProjectForm :back="back" @submit="submit"/>
</v-card-text>
</HxCard>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
computed: {
back() { return `/crm/${this.product}/projects/` }
},
data () {
return {
product: this.$route.params.product
}
},
methods: {
submit(project) {
this.$store.dispatch('projects/addProject', { product: this.product, project: project });
this.$router.push(this.back);
}
}
}
</script>
// -------------------
// Form widget
// -------------------
<template>
<v-form v-if="project" ref="form" @submit.stop="submit" v-model="valid" lazy-validation>
<v-text-field v-model="project.title" :rules="titleRules" label="Titel"/>
<v-text-field v-model="project.description" label="Beschreibung"/>
<div class="d-flex mt-2">
<v-spacer></v-spacer>
<v-btn :to="back">Zurück</v-btn>
<v-btn :disabled="!valid" type="submit" color="primary" class="mr-0">Speichern</v-btn>
</div>
</v-form>
</template>
<script>
import * as log from 'loglevel';
import { com } from "../main";
export default {
props: {
back: {
required: true,
type: String
},
project: {
default: function () {
return {
title: "",
description: ""
}
},
type: Object
}
},
data () {
return {
valid: true,
titleRules: [ v => !!v || 'Title is required' ]
}
},
methods: {
submit() {
log.info("Submit project form");
if (this.$refs.form.validate()) {
this.$emit('submit', this.project)
}
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment