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>