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

<template>
  <div>
    <v-card tile :loading="jobRequestsLoading">
      <v-card-title>
        Eingehende Anfragen
      </v-card-title>
      <v-card-text>
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(jobrequest, index) in jobRequestsToMe"
            :key="index"
          >
            <v-expansion-panel-header @click.once="seenJobRequest(jobrequest)">
              <div>
                {{ jobrequest.on_date.getDate() }}.{{
                  jobrequest.on_date.getMonth() + 1
                }}.{{ jobrequest.on_date.getFullYear() }} von
                {{ jobrequest.from_user.firstname }}
                {{ jobrequest.from_user.lastname }}
              </div>
              <v-row class="text-right" style="margin-right: 5px">
                <v-col>
                  <v-progress-circular
                    indeterminate
                    v-if="jobRequestsLoading"
                  ></v-progress-circular>
                </v-col>
                <v-col>
                  <v-icon color="green" v-show="userInWorker(jobrequest)">
                    {{ check }}
                  </v-icon>
                </v-col>
              </v-row>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-row class="text-right">
                <v-col>
                  <v-btn icon @click="updatingSeenJobRequest(jobrequest)">
                    <v-icon>
                      {{ jobrequest.watched ? seen : notSeen }}
                    </v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <Day
                :day="jobrequest.day"
                :long="true"
                @sendRequests="sendingJobRequests(jobrequest, $event)"
              />
              <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>
      </v-card-text>
    </v-card>
    <v-card tile :loading="jobRequestsLoading">
      <v-card-title>
        Ausgehende Anfragen
      </v-card-title>
      <v-card-text>
        <v-expansion-panels>
          <v-expansion-panel
            v-for="(jobrequest, index) in jobRequestsFromMe"
            :key="index"
          >
            <v-expansion-panel-header>
              <div>
                {{ jobrequest.on_date.getDate() }}.{{
                  jobrequest.on_date.getMonth() + 1
                }}.{{ jobrequest.on_date.getFullYear() }} an
                {{ jobrequest.to_user.firstname }}
                {{ jobrequest.to_user.lastname }}
              </div>
              <v-row class="text-right" style="margin-right: 5px">
                <v-col>
                  <v-progress-circular
                    indeterminate
                    v-if="jobRequestsLoading"
                  ></v-progress-circular>
                </v-col>
                <v-col>
                  <v-icon color="green" v-show="jobrequest.accepted">
                    {{ check }}
                  </v-icon>
                </v-col>
              </v-row>
            </v-expansion-panel-header>
            <v-expansion-panel-content>
              <v-row class="text-right">
                <v-col>
                  <v-btn icon @click="deleteJobRequestFromMe(jobrequest)">
                    <v-icon>
                      {{trashCan}}
                    </v-icon>
                  </v-btn>
                </v-col>
              </v-row>
              <Day
                :day="jobrequest.day"
                :long="true"
                @sendRequests="sendingJobRequests(jobrequest, $event)"
              />
              <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>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiEyeOff, mdiEyeCheck, mdiCheck, mdiTrashCan } from '@mdi/js'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'JobTransfer',
  components: { Day },
  props: {},
  data() {
    return {
      notSeen: mdiEyeOff,
      seen: mdiEyeCheck,
      check: mdiCheck,
      trashCan: mdiTrashCan,
    }
  },
  methods: {
    ...mapActions({
      getJobRequests: 'jobRequests/getJobRequests',
      updateJobRequestToMe: 'jobRequests/updateJobRequestToMe',
      setJobRequests: 'jobRequests/setJobRequests',
      deleteJobRequestFromMe: 'jobRequests/deleteJobRequestFromMe'
    }),
    updatingAcceptedJobRequest(jobRequest) {
      jobRequest.accepted = true
      jobRequest.answered = true
      this.updateJobRequestToMe({ ...jobRequest })
      setTimeout(() => {
        this.getJobRequests(), 200
      })
    },
    updatingSeenJobRequest(jobRequest) {
      jobRequest.watched = !jobRequest.watched
      this.updateJobRequestToMe({ ...jobRequest })
    },
    seenJobRequest(jobRequest) {
      if (!jobRequest.watched) {
        jobRequest.watched = true
        this.updateJobRequestToMe(jobRequest)
      }
    },
    userInWorker(jobrequest) {
      var jobkinddate = jobrequest.day.jobkinddate.find(item => {
        return item.worker.find(workeritem => {
          return workeritem.id === this.activeUser.id
        })
      })
      return !!jobkinddate
    },
    sendingJobRequests(jobrequest, event) {
      this.seenJobRequest(jobrequest)
      this.setJobRequests(event)
    }
  },
  computed: {
    ...mapGetters({
      jobRequestsToMe: 'jobRequests/jobRequestsToMe',
      jobRequestsFromMe: 'jobRequests/jobRequestsFromMe',
      jobRequestsLoading: 'jobRequests/jobRequestsLoading',
      loading: 'user/loading',
      activeUser: 'user/user'
    })
  },
  created() {
    if (!this.loading) {
      this.getJobRequests()
    }
  },
  watch: {
    loading(newValue) {
      if (!newValue) {
        this.getJobRequests()
      }
    },
    jobRequestsLoading(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

<style scoped></style>