vorstand can change group for jobkind

src/components/vorstand/JobKindManager.vue

@@ -1,43 +1,62 @@
 <template>
   <div>
-    <v-card tile :loading="jobkindsLoading">
-      <v-card-title>
-        Dienstarten
-        <v-spacer />
-        <v-btn fab small color="primary" @click="add()">
-          <v-icon>
-            {{ plusIcon }}
-          </v-icon>
-        </v-btn>
-      </v-card-title>
-      <v-card-text>
-        <v-card tile v-for="jobkind in jobkinds" :key="jobkind.id">
-          <v-card-text class="black--text">
-            <v-row class="ml-3 mr-3">
-              {{ jobkind.name }}
-              <v-spacer />
-              <v-btn icon @click="editJobKind(jobkind)">
-                <v-icon>
-                  {{ editIcon }}
-                </v-icon>
-              </v-btn>
-              <v-btn icon @click="deleteJobKind(jobkind)">
-                <v-icon>
-                  {{ deleteIcon }}
-                </v-icon>
-              </v-btn>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-card-text>
-    </v-card>
+    <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-text-field outlined label="Name" v-model="editedItem.name" />
+          <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 />
@@ -51,22 +70,42 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
-import { mdiPencil, mdiDelete, mdiPlus } from '@mdi/js'
+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
+        name: null,
+        workgroup: {
+          id: -1,
+          name: null
+        }
       },
       defaultItem: {
         id: -1,
-        name: null
+        name: null,
+        workgroup: {
+          id: -1,
+          name: null
+        }
       }
     }
   },
@@ -75,7 +114,8 @@ export default {
       getAllJobKinds: 'jkm/getAllJobKinds',
       addingJobKind: 'jkm/addJobKind',
       updateJobKind: 'jkm/updateJobKind',
-      deletingJobKind: 'jkm/deleteJobKind'
+      deletingJobKind: 'jkm/deleteJobKind',
+      getAllWorkgroups: 'wm/getAllWorkgroups'
     }),
     add() {
       this.dialog = true
@@ -83,9 +123,13 @@ export default {
     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)
+      confirm('Willst du diese Dienstart wirklich löschen') &&
+        this.deletingJobKind(jobkind)
       this.close()
     },
     close() {
@@ -95,14 +139,20 @@ export default {
       }, 200)
     },
     save() {
-      this.editedItem.id === -1 ? this.addingJobKind(this.editedItem) : this.updateJobKind(this.editedItem)
+      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'
+      jobkindsLoading: 'jkm/jobkindsLoading',
+      workgroups: 'wm/workgroups',
+      workgroupsLoading: 'wm/workgroupLoading'
     }),
     title() {
       return this.editedItem.id === -1
@@ -112,6 +162,8 @@ export default {
   },
   created() {
     this.getAllJobKinds()
+    this.getAllWorkgroups()
+    console.log(this.jobkinds)
   }
 }
 </script>

src/components/vorstand/UserManager.vue

@@ -45,15 +45,16 @@
             <v-row>
               <v-col>
                 <v-autocomplete
-                        chips
-                        multiple
+                  chips
+                  multiple
                   v-model="editedItem.workgroups"
                   label="AG's"
                   outlined
                   :items="workgroups"
                   item-value="id"
                   item-text="name"
-                  return-object></v-autocomplete>
+                  return-object
+                ></v-autocomplete>
               </v-col>
             </v-row>
           </v-container>
@@ -65,7 +66,12 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <v-data-table :headers="header" :items="users" :search="search" :loading="usersLoading || statusLoading">
+    <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>
@@ -82,12 +88,12 @@
           </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 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) }}
@@ -138,7 +144,7 @@
 </template>
 
 <script>
-import { mdiPencil, mdiMagnify, } from '@mdi/js'
+import { mdiPencil, mdiMagnify } from '@mdi/js'
 import { mapActions, mapGetters } from 'vuex'
 export default {
   name: 'UserManager',
@@ -153,7 +159,7 @@ export default {
       header: [
         { text: 'Nachname', value: 'lastname' },
         { text: 'Vorname(n)', value: 'firstname' },
-        { text: 'AG\'s', value: 'workgroups'},
+        { text: "AG's", value: 'workgroups' },
         { text: 'Status', value: 'statusgroup' },
         { text: 'Stimmrecht', value: 'voting' },
         {
@@ -196,9 +202,8 @@ export default {
 
   mounted() {
     this.$nextTick(function() {
-        window.addEventListener('resize', this.getWindowWidth);
+      window.addEventListener('resize', this.getWindowWidth)
       this.getWindowWidth()
-
     })
   },
 
@@ -211,9 +216,9 @@ export default {
       updateWorkgroups: 'usermanager/updateWorkgroups',
       getAllWorkgroups: 'wm/getAllWorkgroups'
     }),
-     getWindowWidth() {
-        this.isFulllineText = document.documentElement.clientWidth <= 750;
-      },
+    getWindowWidth() {
+      this.isFulllineText = document.documentElement.clientWidth <= 750
+    },
     close() {
       this.editUser = false
       setTimeout(() => {
@@ -226,8 +231,12 @@ export default {
         {},
         this.status.find(a => a.id == item.statusgroup)
       )
-      this.editedItem.voting = Object.assign({},
-      item.voting ? {value: true, text: 'ja'} : {value: false, text: 'nein'})
+      this.editedItem.voting = Object.assign(
+        {},
+        item.voting
+          ? { value: true, text: 'ja' }
+          : { value: false, text: 'nein' }
+      )
       this.clickItem(this.editedItem.statusgroup)
       this.editUser = true
     },
@@ -255,8 +264,14 @@ export default {
       }
     },
     save() {
-      this.updateStatusUser({username: this.editedItem.username, status: this.editedItem.statusgroup})
-      this.updateVoting({username: this.editedItem.username, voting: this.editedItem.voting.value})
+      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()
     }
@@ -282,7 +297,7 @@ export default {
       }).length
     },
 
-    allActiveUsers(){
+    allActiveUsers() {
       return this.users.filter(a => {
         return a.statusgroup === 1
       }).length
@@ -297,7 +312,7 @@ export default {
 </script>
 
 <style scoped>
-.fulllineText{
+.fulllineText {
   flex-basis: unset;
 }
 </style>

src/store/modules/jobkindManager.js

@@ -18,6 +18,7 @@ const mutations = {
     console.log(exists)
     if (exists) {
       exists.name = jobkind.name
+      exists.workgroup = jobkind.workgroup
     } else {
       state.jobkinds.push(jobkind)
     }