flaschengeist-frontend/src/components/vorstand/JobKindManager.vue

<template>
  <div>
    <v-data-table
      :items="jobkinds"
      :headers="header"
      :loading="jobkindsLoading || workgroupsLoading"
      :search="search"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>
            Dienstarten
          </v-toolbar-title>
          <v-spacer />
          <v-text-field
            v-model="search"
            label="Suche Dienstart"
            single-line
            hide-details
          >
            <template v-slot:append>
              <v-icon>{{ searchIcon }}</v-icon>
            </template>
          </v-text-field>
          <v-btn fab small color="primary" @click="add()">
            <v-icon>{{ plusIcon }}</v-icon>
          </v-btn>
        </v-toolbar>
      </template>
      <template v-slot:item.workgroup="{ item }">
        {{ item.workgroup === null ? 'Alle' : item.workgroup.name }}
      </template>
      <template v-slot:item.actions="{item}">
        <v-icon x-small @click="editJobKind(item)">{{editIcon}}</v-icon>
        <v-icon x-small @click="deleteJobKind(item)">{{deleteIcon}}</v-icon>
      </template>
    </v-data-table>
    <v-dialog v-model="dialog">
      <v-card>
        <v-card-title>
          {{ title }}
        </v-card-title>
        <v-card-text>
          <v-row>
            <v-col>
              <v-text-field outlined label="Name" v-model="editedItem.name" />
            </v-col>
            <v-col>
              <v-autocomplete
                outlined
                return-object
                label="Arbeitsgruppe"
                v-model="editedItem.workgroup"
                item-text="name"
                item-value="id"
                :items="[...workgroups, { id: -1, name: 'Alle' }]"
              />
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text color="primary" @click="close()">Abbrechen</v-btn>
          <v-btn text color="primary" @click="save()">Speichern</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiPencil, mdiDelete, mdiPlus, mdiMagnify } from '@mdi/js'
export default {
  name: 'JobKindManager',
  data() {
    return {
      search: null,
      editIcon: mdiPencil,
      deleteIcon: mdiDelete,
      plusIcon: mdiPlus,
      searchIcon: mdiMagnify,
      dialog: false,
      header: [
        { text: 'Name', value: 'name' },
        { text: 'Zugewiesene Arbeitsgruppe', value: 'workgroup' },
        {
          text: 'Aktionen',
          value: 'actions',
          filterable: false,
          sortable: false
        }
      ],
      editedItem: {
        id: -1,
        name: null,
        workgroup: {
          id: -1,
          name: null
        }
      },
      defaultItem: {
        id: -1,
        name: null,
        workgroup: {
          id: -1,
          name: null
        }
      }
    }
  },
  methods: {
    ...mapActions({
      getAllJobKinds: 'jkm/getAllJobKinds',
      addingJobKind: 'jkm/addJobKind',
      updateJobKind: 'jkm/updateJobKind',
      deletingJobKind: 'jkm/deleteJobKind',
      getAllWorkgroups: 'wm/getAllWorkgroups'
    }),
    add() {
      this.dialog = true
    },
    editJobKind(jobkind) {
      this.dialog = true
      this.editedItem = Object.assign({}, jobkind)
      if (this.editedItem.workgroup === null) {
        this.editedItem.workgroup = Object.assign({}, this.defaultItem.workgroup)
      }
    },
    deleteJobKind(jobkind) {
      confirm('Willst du diese Dienstart wirklich löschen') &&
        this.deletingJobKind(jobkind)
      this.close()
    },
    close() {
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.dialog = false
      }, 200)
    },
    save() {
      if (this.editedItem.workgroup.id === -1)
        this.editedItem.workgroup = null
      this.editedItem.id === -1
        ? this.addingJobKind(this.editedItem)
        : this.updateJobKind(this.editedItem)
      this.close()
    }
  },
  computed: {
    ...mapGetters({
      jobkinds: 'jkm/jobkinds',
      jobkindsLoading: 'jkm/jobkindsLoading',
      workgroups: 'wm/workgroups',
      workgroupsLoading: 'wm/workgroupLoading'
    }),
    title() {
      return this.editedItem.id === -1
        ? 'Neue Dienstart erstellen'
        : 'Dienstart bearbeiten'
    }
  },
  created() {
    this.getAllJobKinds()
    this.getAllWorkgroups()
    console.log(this.jobkinds)
  }
}
</script>

<style scoped></style>