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

<template>
  <div>
    <v-card tile>
      <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)">
              {{ jobrequest.on_date.getDate() }}.{{
                jobrequest.on_date.getMonth() + 1
              }}.{{ jobrequest.on_date.getFullYear() }} von
              {{ jobrequest.from_user.firstname }}
              {{ jobrequest.from_user.lastname }}
              <v-row class="text-right">
                <v-col>
                  <v-progress-circular
                    indeterminate
                    v-if="jobRequestsLoading"
                  ></v-progress-circular>
                </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" />
              <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>
    <h1>
      fromme
    </h1>
    <div v-for="(jobrequest, index) in jobRequestsFromMe" :key="index">
      {{ jobrequest }}
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiEyeOff, mdiEyeCheck } from '@mdi/js'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'JobTransfer',
  components: { Day },
  props: {},
  data() {
    return {
      notSeen: mdiEyeOff,
      seen: mdiEyeCheck
    }
  },
  methods: {
    ...mapActions({
      getJobRequests: 'jobRequests/getJobRequests',
      updateJobRequestToMe: 'jobRequests/updateJobRequestToMe'
    }),
    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)
      }
    }
  },
  computed: {
    ...mapGetters({
      jobRequestsToMe: 'jobRequests/jobRequestsToMe',
      jobRequestsFromMe: 'jobRequests/jobRequestsFromMe',
      jobRequestsLoading: 'jobRequests/jobRequestsLoading',
      loading: 'user/loading'
    })
  },
  created() {
    if (!this.loading) {
      this.getJobRequests()
    }
  },
  watch: {
    loading(newValue) {
      if (!newValue) {
        this.getJobRequests()
      }
    },
    jobRequestsLoading(newValue, oldValue) {
      console.log(newValue, oldValue)
    }
  }
}
</script>

<style scoped></style>