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

<template>
  <div>
    <v-card tile :loading="jobInvitesLoading">
      <v-card-title>
        Eingehende Einladungen
      </v-card-title>
      <v-card-text>
        <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
                <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>
                  <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="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)"
                @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>
        </v-expansion-panels>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { mdiEyeOff, mdiEyeCheck, mdiCheck, mdiTrashCan } from '@mdi/js'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'JobInvites',
  components: { Day },
  data() {
    return {
      notSeen: mdiEyeOff,
      seen: mdiEyeCheck,
      check: mdiCheck,
      trashCan: mdiTrashCan,
      showNotSeen: false,
      showSeen: false,
      update: 0
    }
  },
  methods: {
    ...mapActions({
      getJobInvites: 'jobInvites/getJobInvites',
      addJob: 'jobInvites/addJob',
      setJobInvites: 'jobInvites/setJobInvites',
      updateJobInviteToMe: 'jobInvites/updateJobInviteToMe',
      deleteJob: 'jobInvites/deleteJob',
      setJobRequests: 'jobRequests/setJobRequests',
      deleteInvite: 'jobInvites/deleteJobInviteFromMe',
      deleteRequest: 'jobRequests/deleteJobRequestFromMe'
    }),
    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 === jobinvite.to_user.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>