user können sich nun auch in den jobinvites ein und austragen

update, also dass sich die buttons ändern in jobinvites, funktioniert noch nicht richtig.
maximale größe des days wurde auf 20em gesetzt, wenn man sich nicht in den jobinvites befindet.

package.json

@@ -8,33 +8,33 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@mdi/font": "^4.8.95",
-    "@mdi/js": "^4.8.95",
-    "core-js": "^3.4.3",
+    "@mdi/font": "^4.9.95",
+    "@mdi/js": "^4.9.95",
+    "core-js": "^3.6.5",
     "vue": "^2.6.10",
-    "vue-router": "^3.1.3",
-    "vuetify": "^2.1.0",
-    "vuex": "^3.1.2"
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.2.29",
+    "vuex": "^3.4.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "^4.1.0",
-    "@vue/cli-plugin-router": "^4.1.1",
-    "@vue/cli-plugin-vuex": "^4.1.1",
-    "@vue/cli-service": "^4.1.0",
+    "@vue/cli-plugin-babel": "^4.3.1",
+    "@vue/cli-plugin-eslint": "^4.3.1",
+    "@vue/cli-plugin-router": "^4.3.1",
+    "@vue/cli-plugin-vuex": "^4.3.1",
+    "@vue/cli-service": "^4.3.1",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "axios": "^0.19.0",
-    "babel-eslint": "^10.0.3",
+    "axios": "^0.19.2",
+    "babel-eslint": "^10.1.0",
     "eslint": "^5.16.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^5.0.0",
     "material-design-icons-iconfont": "^5.0.1",
     "prettier": "^1.19.1",
-    "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
-    "vue-cli-plugin-vuetify": "^2.0.2",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-template-compiler": "^2.6.10",
-    "vuetify-loader": "^1.3.0"
+    "vuetify-loader": "^1.4.4"
   },
   "eslintConfig": {
     "root": true,

src/components/user/JobRequests/JobInvites.vue

@@ -7,7 +7,7 @@
       <v-expansion-panel
         v-for="jobInvite in jobInvitesToMe"
         :key="jobInvite.id"
-        @click="seenJobIvnite(jobInvite)"
+        @click.once="seenJobIvnite(jobInvite)"
       >
         <v-expansion-panel-header>
           <div>
@@ -27,7 +27,7 @@
             </v-icon>
           </v-row>
         </v-expansion-panel-header>
-        <v-expansion-panel-content>
+        <v-expansion-panel-content :eager="true">
           <v-row>
             <v-spacer />
             <v-btn text @click="updatingJobInvite(jobInvite)">
@@ -37,9 +37,11 @@
             </v-btn>
           </v-row>
           <Day
-            v-bind:day="jobInvite.day"
+            :day="jobInvite.day"
             :long="true"
+            :loading="jobInvite.day.loading"
             @addingJob="addingJob(jobInvite, $event)"
+            @deletingJob="deletingJob(jobInvite, $event)"
           />
         </v-expansion-panel-content>
       </v-expansion-panel>
@@ -68,7 +70,8 @@ export default {
     ...mapActions({
       getJobInvites: 'jobInvites/getJobInvites',
       addJob: 'jobInvites/addJob',
-      updateJobInviteToMe: 'jobInvites/updateJobInviteToMe'
+      updateJobInviteToMe: 'jobInvites/updateJobInviteToMe',
+      deleteJob: 'jobInvites/deleteJob',
     }),
     forceRender() {
       setTimeout(() => {
@@ -90,6 +93,12 @@ export default {
       this.addJob(event)
       this.forceRender()
     },
+    deletingJob(jobInvite, event) {
+      this.seenJobIvnite(jobInvite)
+      this.deleteJob(event)
+      this.forceRender()
+
+    },
     userInWorker(jobinvite) {
       var jobkinddate = jobinvite.day.jobkinddate.find(item => {
         return item.worker.find(workeritem => {

src/components/user/Jobs.vue

@@ -45,7 +45,7 @@
       <v-card-text>
         <v-row justify="start" align="start">
           <div v-for="day in week.days" :key="day.id">
-            <v-col>
+            <v-col cols="12">
               <Day :day="day" :long="false" @addingJob="addJob" @sendInvites="setJobInvites" @deletingJob="deleteJob"/>
             </v-col>
           </div>

src/components/user/Jobs/Day.vue

@@ -2,8 +2,7 @@
   <div v-if="day">
     <v-card
       :color="color(day)"
-      :max-width="long ? '' : '250px'"
-      :min-width="long ? '' : '250px'"
+      :max-width="long ? '' : '20em'"
     >
       <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
         {{ name }} den {{ day.date.getDate() }}.{{ day.date.getMonth() + 1 }}.{{
@@ -47,7 +46,7 @@
           </div>
         </v-expand-transition>
       </v-card-text>
-      <v-card-actions class="text--secondary" v-if="!dayLoading">
+      <v-card-actions class="text--secondary" v-if="!dayLoading" :key="update">
         <v-spacer />
         <v-menu
           v-model="menu"
@@ -152,7 +151,8 @@ export default {
   name: 'Day',
   props: {
     day: Object,
-    long: Boolean
+    long: Boolean,
+    loading: Boolean
   },
   data() {
     return {
@@ -165,6 +165,9 @@ export default {
       job_invites: []
     }
   },
+  created() {
+    //setInterval(() => {console.log(this.day.loading)},100)
+  },
   methods: {
     ...mapActions({
       deleteInvite: 'jobInvites/deleteJobInviteFromMe'
@@ -314,7 +317,7 @@ export default {
       else return 'Samstag'
     },
     dayLoading() {
-      return this.day.loading
+      return this.loading
     }
   }
 }

src/components/vorstand/ServiceManagementComponents/Day.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="day">
-    <v-card :color="color(day)" max-width="250px" min-width="250px">
+    <v-card :color="color(day)" max-width="20em">
       <v-card-title v-if="day.date" class="subtitle-1 font-weight-bold">
         {{ day.name }} {{ day.date.getDate() }}.{{ day.date.getMonth() + 1 }}.{{
           day.date.getFullYear()

src/store/modules/jobInvites.js

@@ -160,7 +160,9 @@ const mutations = {
     let day = getters.getDayToMe(date)
     day.forEach(a => {
       a.day.loading = value
+      console.log('day', value ? 'loading' : 'not loading', day, a.day.loading)
     })
+
   },
   deleteJobInviteFromMe: (state, jobinvite) => {
     var item = state.jobInvitesFromMe.find(item => {
@@ -273,6 +275,31 @@ const actions = {
         if (e.response.status === 401) dispatch('logout', null, { root: true })
     }
   },
+  async deleteJob({ commit, rootState, dispatch, getters }, data) {
+    var date = new Date(data.year, data.month - 1, data.day)
+    commit('setDayLoading', {date, getters, value: true})
+    try {
+      const response = await axios.post(
+          url.user.deleteJob,
+          { ...data },
+          {
+            headers: { Token: rootState.login.user.accessToken }
+          }
+      )
+      console.log(response.data)
+      commit('updateMonthWorker', {
+        workers: [...response.data],
+        date: new Date(data.year, data.month - 1, data.day),
+        getters
+      })
+      commit('setDayLoading', {date, getters, value: false})
+      dispatch('getLifeTime', null, { root: true })
+    } catch (e) {
+      console.log(e)
+      if (e.response)
+        if (e.response.status === 401) dispatch('logout', null, { root: true })
+    }
+  },
   async updateJobInviteToMe({ commit, rootState, dispatch }, data) {
     try {
       const response = await axios.post(url.user.setJobInvites, data, {