diensteinladung und übertragung fertig. User können leute einladen, sich austragen, jobs abgeben usw.

user können sehen, wenn es neue nachrichten gibt und sehen ob die einladung bzw. anfrage gesehen wurde.

src/components/user/JobRequests/JobInvites.vue

@@ -14,10 +14,12 @@
             <v-expansion-panel-header>
               <div>
                 {{ jobInvite.on_date.getDate() }}.{{
-                  jobInvite.on_date.getMonth() + 1
+                jobInvite.on_date.getMonth() + 1
                 }}.{{ jobInvite.on_date.getFullYear() }} von
-                {{ jobInvite.from_user.firstname }}
-                {{ jobInvite.from_user.lastname }}
+                <v-badge dot :value="!jobInvite.watched" color="red">
+                  {{ jobInvite.from_user.firstname }}
+                  {{ jobInvite.from_user.lastname }}
+                </v-badge>
               </div>
               <v-row class="text-right" style="margin-right: 5px">
                 <v-col>
@@ -49,6 +51,72 @@
                 :loading="jobInvite.day.loading"
                 @addingJob="addingJob(jobInvite, $event)"
                 @deletingJob="deletingJob(jobInvite, $event)"
+                @sendInvites="setJobInvites"
+                @sendRequests="setJobRequests"
+                @deleteJobInvite="deleteInvite"
+                @deleteJobRequest="deleteRequest"
+              />
+            </v-expansion-panel-content>
+          </v-expansion-panel>
+        </v-expansion-panels>
+      </v-card-text>
+    </v-card>
+    <v-card tile :loading="jobInvitesLoading">
+      <v-card-title>
+        Versendete Einladungen
+      </v-card-title>
+      <v-card-text>
+        <v-expansion-panels>
+          <v-expansion-panel
+                  v-for="jobInvite in jobInvitesFromMe"
+                  :key="jobInvite.id"
+                  @click.once="seenJobIvnite(jobInvite)"
+          >
+            <v-expansion-panel-header>
+
+              <div>
+                {{ jobInvite.on_date.getDate() }}.{{
+                jobInvite.on_date.getMonth() + 1
+                }}.{{ jobInvite.on_date.getFullYear() }} an
+                <v-badge :value="jobInvite.watched" icon="mdi-eye" color="grey" inline>
+                  {{ jobInvite.to_user.firstname }}
+                  {{ jobInvite.to_user.lastname }}
+                </v-badge>
+              </div>
+              <v-row class="text-right" style="margin-right: 5px">
+                <v-col>
+                  <v-progress-circular
+                          indeterminate
+                          v-if="jobInvitesLoading"
+                  ></v-progress-circular>
+                </v-col>
+                <v-col>
+                  <v-icon color="green" v-show="userInWorker(jobInvite)">
+                    {{ check }}
+                  </v-icon>
+                </v-col>
+              </v-row>
+            </v-expansion-panel-header>
+            <v-expansion-panel-content :eager="true">
+              <v-row class="text-right">
+                <v-col>
+                  <v-btn icon @click="deleteInvite(jobInvite)">
+                    <v-icon>
+                      {{trashCan}}
+                    </v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <Day
+                      :day="jobInvite.day"
+                      :long="true"
+                      :loading="jobInvite.day.loading"
+                      @addingJob="addingJob(jobInvite, $event)"
+                      @deletingJob="deletingJob(jobInvite, $event)"
+                      @sendInvites="setJobInvites"
+                      @sendRequests="setJobRequests"
+                      @deleteJobInvite="deleteInvite"
+                      @deleteJobRequest="deleteRequest"
               />
             </v-expansion-panel-content>
           </v-expansion-panel>
@@ -60,7 +128,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex'
-import { mdiEyeOff, mdiEyeCheck, mdiCheck } from '@mdi/js'
+import { mdiEyeOff, mdiEyeCheck, mdiCheck, mdiTrashCan } from '@mdi/js'
 import Day from '@/components/user/Jobs/Day'
 export default {
   name: 'JobInvites',
@@ -70,6 +138,7 @@ export default {
       notSeen: mdiEyeOff,
       seen: mdiEyeCheck,
       check: mdiCheck,
+      trashCan: mdiTrashCan,
       showNotSeen: false,
       showSeen: false,
       update: 0
@@ -79,8 +148,12 @@ export default {
     ...mapActions({
       getJobInvites: 'jobInvites/getJobInvites',
       addJob: 'jobInvites/addJob',
+      setJobInvites: 'jobInvites/setJobInvites',
       updateJobInviteToMe: 'jobInvites/updateJobInviteToMe',
-      deleteJob: 'jobInvites/deleteJob'
+      deleteJob: 'jobInvites/deleteJob',
+      setJobRequests: 'jobRequests/setJobRequests',
+      deleteInvite: 'jobInvites/deleteJobInviteFromMe',
+      deleteRequest: 'jobRequests/deleteJobRequestFromMe'
     }),
     forceRender() {
       setTimeout(() => {
@@ -110,7 +183,7 @@ export default {
     userInWorker(jobinvite) {
       var jobkinddate = jobinvite.day.jobkinddate.find(item => {
         return item.worker.find(workeritem => {
-          return workeritem.id === this.activeUser.id
+          return workeritem.id === jobinvite.to_user.id
         })
       })
       return !!jobkinddate

src/components/user/JobRequests/JobTransfer.vue

@@ -13,10 +13,12 @@
             <v-expansion-panel-header @click.once="seenJobRequest(jobrequest)">
               <div>
                 {{ jobrequest.on_date.getDate() }}.{{
-                  jobrequest.on_date.getMonth() + 1
+                jobrequest.on_date.getMonth() + 1
                 }}.{{ jobrequest.on_date.getFullYear() }} von
-                {{ jobrequest.from_user.firstname }}
-                {{ jobrequest.from_user.lastname }}
+                <v-badge dot :value="!jobrequest.watched" color="red">
+                  {{ jobrequest.from_user.firstname }}
+                  {{ jobrequest.from_user.lastname }}
+                </v-badge>
               </div>
               <v-row class="text-right" style="margin-right: 5px">
                 <v-col>
@@ -46,15 +48,23 @@
                 :day="jobrequest.day"
                 :long="true"
                 @sendRequests="sendingJobRequests(jobrequest, $event)"
+                @addingJob="addJob"
+                @deletingJob="deleteJob"
+                @sendInvites="setJobInvites"
+                @deleteJobInvite="deleteInvite"
+                @deleteJobRequest="deleteJobRequestFromMe"
               />
               <v-row class="text-right">
                 <v-col>
                   <v-btn
-                    v-show="!jobrequest.accepted"
+                    v-show="!jobrequest.answered"
                     text
                     @click="updatingAcceptedJobRequest(jobrequest)"
                     >Annehmen</v-btn
                   >
+                  <div v-show="jobrequest.answered && !jobrequest.accepted">
+                    Dieser Dienst wurde schon übertragen.
+                  </div>
                 </v-col>
               </v-row>
             </v-expansion-panel-content>
@@ -75,10 +85,12 @@
             <v-expansion-panel-header>
               <div>
                 {{ jobrequest.on_date.getDate() }}.{{
-                  jobrequest.on_date.getMonth() + 1
+                jobrequest.on_date.getMonth() + 1
                 }}.{{ jobrequest.on_date.getFullYear() }} an
-                {{ jobrequest.to_user.firstname }}
-                {{ jobrequest.to_user.lastname }}
+                <v-badge :value="jobrequest.watched" icon="mdi-eye" color="grey" inline>
+                  {{ jobrequest.to_user.firstname }}
+                  {{ jobrequest.to_user.lastname }}
+                </v-badge>
               </div>
               <v-row class="text-right" style="margin-right: 5px">
                 <v-col>
@@ -108,17 +120,12 @@
                 :day="jobrequest.day"
                 :long="true"
                 @sendRequests="sendingJobRequests(jobrequest, $event)"
+                @addingJob="addJob"
+                @deletingJob="deleteJob"
+                @sendInvites="setJobInvites"
+                @deleteJobInvite="deleteInvite"
+                @deleteJobRequest="deleteJobRequestFromMe"
               />
-              <v-row class="text-right">
-                <v-col>
-                  <v-btn
-                    v-show="!jobrequest.accepted"
-                    text
-                    @click="updatingAcceptedJobRequest(jobrequest)"
-                    >Annehmen
-                  </v-btn>
-                </v-col>
-              </v-row>
             </v-expansion-panel-content>
           </v-expansion-panel>
         </v-expansion-panels>
@@ -148,7 +155,13 @@ export default {
       getJobRequests: 'jobRequests/getJobRequests',
       updateJobRequestToMe: 'jobRequests/updateJobRequestToMe',
       setJobRequests: 'jobRequests/setJobRequests',
-      deleteJobRequestFromMe: 'jobRequests/deleteJobRequestFromMe'
+      deleteJobRequestFromMe: 'jobRequests/deleteJobRequestFromMe',
+      deleteInvite: 'jobInvites/deleteJobInviteFromMe',
+      getJobInvites: 'jobInvites/getJobInvites',
+      addJob: 'jobInvites/addJob',
+      setJobInvites: 'jobInvites/setJobInvites',
+      updateJobInviteToMe: 'jobInvites/updateJobInviteToMe',
+      deleteJob: 'jobInvites/deleteJob',
     }),
     updatingAcceptedJobRequest(jobRequest) {
       jobRequest.accepted = true

src/components/user/Jobs.vue

@@ -46,7 +46,16 @@
         <v-row justify="start" align="start">
           <div v-for="day in week.days" :key="day.id">
             <v-col cols="12">
-              <Day :day="day" :long="false" @addingJob="addJob" @sendInvites="setJobInvites" @deletingJob="deleteJob"/>
+              <Day
+                :day="day"
+                :long="false"
+                @addingJob="addJob"
+                @sendInvites="setJobInvites"
+                @deletingJob="deleteJob"
+                @sendRequests="setJobRequests"
+                @deleteJobInvite="deleteInvite"
+                @deleteJobRequest="deleteRequest"
+              />
             </v-col>
           </div>
         </v-row>
@@ -112,7 +121,10 @@ export default {
       deleteJob: 'jobs/deleteJob',
       setJobInvites: 'jobInvites/setJobInvites',
       getJobInvites: 'jobInvites/getJobInvites',
-      getJobRequests: 'jobRequests/getJobRequests'
+      getJobRequests: 'jobRequests/getJobRequests',
+      setJobRequests: 'jobRequests/setJobRequests',
+      deleteInvite: 'jobInvites/deleteJobInviteFromMe',
+      deleteRequest: 'jobRequests/deleteJobRequestFromMe'
     }),
     changeMonth(value) {
       if (value === -1) {
@@ -168,7 +180,7 @@ export default {
       })
     },
     loading(newValue) {
-      if(!newValue) {
+      if (!newValue) {
         this.getJobInvites()
         this.getJobRequests()
       }

src/components/user/Jobs/Day.vue

@@ -84,28 +84,21 @@
               >Einladen</v-btn
             >
           </template>
-          <v-card>
+          <v-card :loading="jobInvitesLoading">
             <v-card-title>
               Einladungen
             </v-card-title>
             <v-card-text>
-              <v-tooltip
-                bottom
-                v-for="(invite, index) in getInvites(day.date)"
-                :key="index"
+              <v-div
+                      bottom
+                      v-for="(invite, index) in getInvites(day.date)"
+                      :key="index"
               >
-                <template v-slot:activator="{ on }">
-                  <v-chip
-                    v-on="on"
-                    close
-                    style="margin: 5px"
-                    @click:close="deleteInvite(invite)"
-                  >
-                    {{ invite.to_user.firstname }} {{ invite.to_user.lastname }}
-                  </v-chip>
-                </template>
-                <span>Klicken um Einladung zu widerrufen.</span>
-              </v-tooltip>
+                <v-chip v-on="on" style="margin: 5px">
+                  {{ invite.to_user.firstname }}
+                  {{ invite.to_user.lastname }}
+                </v-chip>
+              </v-div>
               <v-divider style="margin-bottom: 5px" />
               <v-autocomplete
                 v-model="job_invites"
@@ -134,17 +127,41 @@
             </v-card-actions>
           </v-card>
         </v-menu>
-        <v-menu v-model="menu_request" :close-on-content-click="false" offset-y v-if="day.locked && userInWorker()">
+        <v-menu
+          v-model="menu_request"
+          :close-on-content-click="false"
+          offset-y
+          v-if="day.locked && userInWorker()"
+        >
           <template v-slot:activator="{ on }">
             <v-btn v-show="day.locked && userInWorker()" text v-on="on">
               Abgeben
             </v-btn>
           </template>
-          <v-card>
+          <v-card :loading="jobRequestsLoading">
+            <v-card-title>
+              Dienstabgabenanfrage
+            </v-card-title>
             <v-card-text>
+              <div v-if="jobRequestsLoading">
+                <v-progress-circular indeterminate />
+              </div>
+              <div v-if="!jobRequestsLoading">
+                <v-div
+                  bottom
+                  v-for="(request, index) in getRequests(day.date)"
+                  :key="index"
+                >
+                  <v-chip v-on="on" style="margin: 5px">
+                    {{ request.to_user.firstname }}
+                    {{ request.to_user.lastname }}
+                  </v-chip>
+                </v-div>
+              </div>
+              <v-divider style="margin-bottom: 5px" />
               <v-autocomplete
                 v-model="job_requests"
-                label="Einladungen senden an"
+                label="Anfragen senden an"
                 return-object
                 multiple
                 filled
@@ -202,9 +219,7 @@ export default {
     //setInterval(() => {console.log(this.day.loading)},100)
   },
   methods: {
-    ...mapActions({
-      deleteInvite: 'jobInvites/deleteJobInviteFromMe'
-    }),
+    ...mapActions({}),
     sendInvites() {
       var sendData = []
       this.job_invites.forEach(item => {
@@ -305,7 +320,20 @@ export default {
         month: sendData.on_date.getMonth() + 1,
         day: sendData.on_date.getDate()
       }
-      this.deleteInvite(sendData)
+      this.$emit('deleteJobInvite', sendData)
+    },
+    deletingRequest(jobRequest) {
+      let sendData = { ...jobRequest }
+      sendData.on_date = {
+        year: sendData.on_date.getFullYear(),
+        month: sendData.on_date.getMonth() + 1,
+        day: sendData.on_date.getDate()
+      }
+      this.$emit('deleteJobRequest', sendData)
+      this.menu_request = false
+      setTimeout(() => {
+        this.menu_request = true
+      }, 200)
     },
     getJob_Kind() {
       var jobkinddate = this.day.jobkinddate.find(item => {
@@ -361,7 +389,10 @@ export default {
       activeUser: 'user/user',
       allUsers: 'usermanager/users',
       getDay: 'jobInvites/getDayFromMe',
-      getInvites: 'jobInvites/getDayWorkerFromMe'
+      getInvites: 'jobInvites/getDayWorkerFromMe',
+      getRequests: 'jobRequests/getDayWorkerFromMe',
+      jobInvitesLoading: 'jobInvites/jobInvitesLoading',
+      jobRequestsLoading: 'jobRequests/jobRequestsLoading'
     }),
     jobkindWithSpace() {
       var retVal = this.day.jobkinddate.filter(item => {