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

<template>
  <div>
    <v-dialog v-model="editUser">
      <v-card>
        <v-card-title>
          {{
            this.editedItem.firstname +
              ' ' +
              this.editedItem.lastname +
              ' bearbeiten'
          }}
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col>
                <v-autocomplete
                  v-model="editedItem.statusgroup"
                  label="Status"
                  outlined
                  :items="status"
                  item-value="id"
                  item-text="name"
                  return-object
                  @change="clickItem(editedItem.statusgroup)"
                >
                </v-autocomplete>
              </v-col>
              <v-col>
                <v-autocomplete
                  v-model="editedItem.voting"
                  label="Stimmrecht"
                  outlined
                  :items="[
                    { value: true, text: 'ja' },
                    { value: false, text: 'nein' }
                  ]"
                  item-text="text"
                  item-value="value"
                  :disabled="disableVoting"
                  return-object
                />
              </v-col>
            </v-row>
            <v-row>
              <v-col>
                <v-autocomplete
                        chips
                        multiple
                  v-model="editedItem.workgroups"
                  label="AG's"
                  outlined
                  :items="workgroups"
                  item-value="id"
                  item-text="name"
                  return-object></v-autocomplete>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn color="primary" text @click="close()">Abbrechen</v-btn>
          <v-btn color="primary" text @click="save()">Speichern</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-data-table :headers="header" :items="users" :search="search" :loading="usersLoading || statusLoading">
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>Mitgliederliste</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            label="Sucher Mitglied"
            single-line
            hide-details
          >
            <template v-slot:append>
              <v-icon>{{ searchIcon }}</v-icon>
            </template>
          </v-text-field>
        </v-toolbar>
      </template>
      <template v-slot:item.workgroups="{item}">
          <div>
            <v-chip v-for="group in item.workgroups" :key="group.id" x-small>
              {{group.name}}
            </v-chip>
          </div>
      </template>
      <template v-slot:item.statusgroup="{ item }">
        {{ computeStatus(item.statusgroup) }}
      </template>
      <template v-slot:item.voting="{ item }">
        <v-chip small :color="item.voting ? 'green' : 'red'">
          {{ item.voting ? 'ja' : 'nein' }}
        </v-chip>
      </template>
      <template v-slot:item.actions="{ item }">
        <v-icon small @click="editItem(item)">{{ editIcon }}</v-icon>
      </template>
    </v-data-table>
    <v-divider />
    <v-card>
      <v-card-text>
        <v-container>
          <v-row>
            <v-col v-bind:class="{ fulllineText: isFulllineText }">
              <v-text-field
                outlined
                :value="users.length"
                label="Anzahl aller Mitglieder"
                readonly
              />
            </v-col>
            <v-col v-bind:class="{ fulllineText: isFulllineText }">
              <v-text-field
                outlined
                :value="allActiveUsers"
                label="Anzahl aller aktiven Mitglieder"
                readonly
              />
            </v-col>
            <v-col v-bind:class="{ fulllineText: isFulllineText }">
              <v-text-field
                outlined
                :value="allVotings"
                label="Anzahl aller Stimmberechtigten"
                readonly
              />
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import { mdiPencil, mdiMagnify, } from '@mdi/js'
import { mapActions, mapGetters } from 'vuex'
export default {
  name: 'UserManager',
  data() {
    return {
      editIcon: mdiPencil,
      searchIcon: mdiMagnify,
      isFulllineText: false,
      editUser: false,
      disableVoting: null,
      search: null,
      header: [
        { text: 'Nachname', value: 'lastname' },
        { text: 'Vorname(n)', value: 'firstname' },
        { text: 'AG\'s', value: 'workgroups'},
        { text: 'Status', value: 'statusgroup' },
        { text: 'Stimmrecht', value: 'voting' },
        {
          text: 'Aktionen',
          value: 'actions',
          sortable: false,
          filterable: false
        }
      ],
      editedItem: {
        id: -1,
        firstname: null,
        lastname: null,
        username: null,
        workgroups: [],
        statusgroup: {
          id: -1,
          name: null
        },
        voting: {
          value: false,
          text: 'nein'
        }
      },
      defaultItem: {
        id: -1,
        username: null,
        workgroups: [],
        statusgroup: {
          id: -1,
          name: null
        },
        voting: {
          value: false,
          text: 'nein'
        }
      }
    }
  },

  mounted() {
    this.$nextTick(function() {
        window.addEventListener('resize', this.getWindowWidth);
      this.getWindowWidth()

    })
  },

  methods: {
    ...mapActions({
      getUsers: 'usermanager/getUsers',
      getStatus: 'usermanager/getStatus',
      updateStatusUser: 'usermanager/updateStatusUser',
      updateVoting: 'usermanager/updateVoting',
      updateWorkgroups: 'usermanager/updateWorkgroups',
      getAllWorkgroups: 'wm/getAllWorkgroups'
    }),
     getWindowWidth() {
        this.isFulllineText = document.documentElement.clientWidth <= 750;
      },
    close() {
      this.editUser = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
      }, 300)
    },
    editItem(item) {
      this.editedItem = Object.assign({}, item)
      this.editedItem.statusgroup = Object.assign(
        {},
        this.status.find(a => a.id == item.statusgroup)
      )
      this.editedItem.voting = Object.assign({},
      item.voting ? {value: true, text: 'ja'} : {value: false, text: 'nein'})
      this.clickItem(this.editedItem.statusgroup)
      this.editUser = true
    },
    clickItem(item) {
      switch (item.id) {
        case 1:
          this.editedItem.voting = { value: true, text: 'ja' }
          this.disableVoting = true
          break
        case 2:
          this.disableVoting = false
          break
        case 3:
          this.disableVoting = true
          this.editedItem.voting = { value: false, text: 'nein' }
          break
        case 4:
          this.editedItem.voting = { value: false, text: 'nein' }
          this.disableVoting = true
          break
        case 5:
          this.editedItem.voting = { value: false, text: 'nein' }
          this.disableVoting = true
          break
      }
    },
    save() {
      this.updateStatusUser({username: this.editedItem.username, status: this.editedItem.statusgroup})
      this.updateVoting({username: this.editedItem.username, voting: this.editedItem.voting.value})
      this.updateWorkgroups(this.editedItem)
      this.close()
    }
  },
  computed: {
    ...mapGetters({
      users: 'usermanager/users',
      status: 'usermanager/status',
      usersLoading: 'usermanager/usersLoading',
      statusLoading: 'usermanager/statusLoading',
      workgroups: 'wm/workgroups'
    }),
    computeStatus() {
      return id => {
        return this.status.find(a => {
          return a.id === id
        }).name
      }
    },
    allVotings() {
      return this.users.filter(a => {
        return a.voting
      }).length
    },

    allActiveUsers(){
      return this.users.filter(a => {
        return a.statusgroup === 1
      }).length
    }
  },
  created() {
    this.getUsers()
    this.getStatus()
    this.getAllWorkgroups()
  }
}
</script>

<style scoped>
.fulllineText{
  flex-basis: unset;
}
</style>