flaschengeist-frontend/src/components/user/JobRequests/JobInvites.vue

<template>
  <div>
    <v-row align="center" justify="center" v-if="jobInvitesLoading">
      <v-progress-circular indeterminate color="grey" />
    </v-row>
    <v-expansion-panels>
      <v-expansion-panel
        v-for="jobInvite in jobInvitesToMe"
        :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() }} von
            {{ jobInvite.from_user.firstname }}
            {{ jobInvite.from_user.lastname }}
          </div>
          <v-row
                  class="text-right"
            style="margin-right: 5px"
            v-show="userInWorker(jobInvite)"
          >
            <v-col>
              <v-icon color="green">
                {{ check }}
              </v-icon>
              <v-progress-circular indeterminate v-if="jobInvitesLoading"></v-progress-circular>
            </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="updatingJobInvite(jobInvite)">
                <v-icon>
                  {{ jobInvite.watched ? seen : notSeen }}
                </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)"
          />
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { mdiEyeOff, mdiEyeCheck, mdiCheck } from '@mdi/js'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'JobInvites',
  components: { Day },
  data() {
    return {
      notSeen: mdiEyeOff,
      seen: mdiEyeCheck,
      check: mdiCheck,
      showNotSeen: false,
      showSeen: false,
      update: 0
    }
  },
  methods: {
    ...mapActions({
      getJobInvites: 'jobInvites/getJobInvites',
      addJob: 'jobInvites/addJob',
      updateJobInviteToMe: 'jobInvites/updateJobInviteToMe',
      deleteJob: 'jobInvites/deleteJob',
    }),
    forceRender() {
      setTimeout(() => {
        this.update += 0
      }, 500)
    },
    updatingJobInvite(jobInvite) {
      jobInvite.watched = !jobInvite.watched
      this.updateJobInviteToMe(jobInvite)
    },
    seenJobIvnite(jobInvite) {
      if (!jobInvite.watched) {
        jobInvite.watched = true
        this.updateJobInviteToMe(jobInvite)
      }
    },
    addingJob(jobInvite, event) {
      this.seenJobIvnite(jobInvite)
      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 => {
          return workeritem.id === this.activeUser.id
        })
      })
      return !!jobkinddate
    }
  },
  computed: {
    ...mapGetters({
      jobInvitesFromMe: 'jobInvites/jobInvitesFromMe',
      jobInvitesToMe: 'jobInvites/jobInvitesToMe',
      jobInvitesLoading: 'jobInvites/jobInvitesLoading',
      activeUser: 'user/user'
    })
  },
  created() {
    setTimeout(() => {
      this.getJobInvites(new Date())
    }, 200)
  }
}
</script>

<style scoped></style>