spa.html

<!-- -------------------- -->
<!-- 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>