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

<template>
  <div>
    <v-data-table
      :headers="header"
      :items="workgroups"
      :loading="workgroupLoading"
      :search="search"
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Arbeitsgruppen</v-toolbar-title>
          <v-spacer> </v-spacer>
          <v-text-field
            v-model="search"
            label="Suche Arbeitsgrupp"
            single-line
            hide-details
          >
            <template v-slot:append>
              <v-icon>{{ searchIcon }}</v-icon>
            </template>
          </v-text-field>
          <v-dialog v-model="dialog">
            <template v-slot:activator="{ on }">
              <v-btn
                fab
                x-small
                color="primary"
                class="mb-2"
                v-on="on"
                style="margin: 5px"
              >
                <v-icon>
                  {{ plusIcon }}
                </v-icon>
              </v-btn>
            </template>
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-container>
                  <v-text-field
                    v-model="editedItem.name"
                    label="Name"
                    outlined
                  ></v-text-field>
                  <v-autocomplete
                    v-model="editedItem.boss"
                    label="AG-Leiter"
                    :items="users"
                    :item-text="item => item.firstname + ' ' + item.lastname"
                    item-value="username"
                    :loading="usersLoading"
                    outlined
                    return-object
                  >
                  </v-autocomplete>
                </v-container>
              </v-card-text>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="blue darken-1" text @click="close"
                  >Abbreche</v-btn
                >
                <v-btn color="blue darken-1" text @click="save"
                  >Speichern</v-btn
                >
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-toolbar>
      </template>
      <template v-slot:item.boss="{ item }">
        <div v-if="item.boss != null">
          {{ item.boss.firstname }} {{ item.boss.lastname }}
        </div>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
          {{ editIcon }}
        </v-icon>
        <v-icon small class="mr-2" @click="deleteItem(item)">
          {{ deleteIcon }}
        </v-icon>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { mdiPencil, mdiMagnify, mdiDelete, mdiPlus } from '@mdi/js'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'WorkgroupManagement',
  data() {
    return {
      editIcon: mdiPencil,
      searchIcon: mdiMagnify,
      deleteIcon: mdiDelete,
      plusIcon: mdiPlus,
      search: null,
      dialog: false,
      header: [
        { text: 'AG-Name', value: 'name' },
        { text: 'AG-Leiter', value: 'boss' },
        {
          text: 'Aktionen',
          value: 'actions',
          sortable: false,
          filterable: false
        }
      ],
      editedItem: {
        id: -1,
        username: null,
        boss: {
          username: null,
          firstname: null,
          lastname: null
        }
      },
      defaultItem: {
        id: -1,
        username: null,
        boss: {
          name: null,
          firstname: null,
          lastname: null
        }
      },
      editedIndex: -1
    }
  },
  methods: {
    ...mapActions({
      getAllWorkgroups: 'wm/getAllWorkgroups',
      setWorkgroup: 'wm/setWorkgroup',
      updateWorkgroup: 'wm/updateWorkgroup',
      getAllUsers: 'usermanager/getUsers',
      deleteWorkgroup: 'wm/deleteWorkgroup'
    }),
    editItem(item) {
      this.editedIndex = item.id
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },
    save() {
      this.editedItem.id === -1
        ? this.setWorkgroup(this.editedItem)
        : this.updateWorkgroup(this.editedItem)
      this.editedItem = Object.assign({}, this.defaultItem)
      this.close()
    },
    close() {
      this.dialog = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      }, 300)
    },
    deleteItem(item) {
      confirm(
        'Bist du sicher, dass du diese Arbeitsgruppe entfernen willst?'
      ) && this.deleteWorkgroup(item)
    }
  },
  computed: {
    ...mapGetters({
      workgroupLoading: 'wm/workgroupLoading',
      workgroups: 'wm/workgroups',
      users: 'usermanager/users',
      usersLoading: 'usermanager/usersLoading'
    }),
    formTitle() {
      return this.editedIndex === -1
        ? 'Neue Arbeitsgruppe'
        : 'Bearbeite Arbeitsgruppe'
    }
  },
  created() {
    this.getAllWorkgroups()
    this.getAllUsers()
    console.log(this.users)
  }
}
</script>

<style scoped></style>