Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/TimesheetCalender/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <div>
    <c-overlay :show="showLoader" v-if="days.length">
      <b-card no-body class="calendar-week">
        <b-tabs pills card justified filled>
          <b-tab v-for="(day,index) in getDays" :key="'day_'+index" @click="onTabChange(index)"
                 :active="index === selectedDayIndex">
            <template #title>
              <div class="text-center day-tab-title"
                   :class="{'require-review':day.require_review && $isAdmin() && evaluationEnabled}">
                <h6 class="d-md-block d-none">{{ day.name }}</h6>
                <h6 class="d-md-none d-block">{{ day.short_name }}</h6>
                <h6 class="mb-0" v-if="!isShowBillable">{{ day.total_time }}</h6>
                <h6 class="mb-0" v-if="isShowBillable">{{ day.total_evaluation_time }}</h6>
              </div>
            </template>
            <b-card-text class="entry-box">
              <day-entries :form="form" :day="day"
                           @delete-entry="deleteEntry"
                           @show-edit-entry-modal="showEditEntryModal"/>
            </b-card-text>
          </b-tab>
          <template #tabs-end>
            <b-nav-item role="presentation" @click.prevent href="#" class="bg-secondary rounded"
                        link-classes="py-2 px-0">
              <div class="text-center text-light" @click.prevent="toggleTotalHours()">
                <h6 class="d-md-block d-none">Week Total</h6>
                <h6 class="d-md-none d-block">Total</h6>
                <h6 class="mb-0">{{ isShowBillable ? weekTotalBillableTime : weekTotalTime }}
                  <template v-if="$isAdmin() && evaluationEnabled">
                    <fa icon="hourglass-start" class="" v-if="!isShowBillable"/>
                    <fa icon="hourglass" class="text-warning" v-if="isShowBillable && evaluationEnabled"/>
                  </template>
                </h6>
              </div>
            </b-nav-item>
          </template>
        </b-tabs>
      </b-card>
    </c-overlay>
    <c-overlay :show="false" v-else>
      <b-card no-body class="calendar-week">
        <b-tabs pills card justified filled>
          <b-tab v-for="index in 7" :key="'day_'+index">
            <template #title>
              <div class="text-center sk-tab">
                <b-skeleton animation="fade" class="d-block"></b-skeleton>
                <b-skeleton animation="fade" class="d-block mb-0"></b-skeleton>
              </div>
            </template>
            <b-card-text class="entry-box">
              <div class="p-5 loader">
                <h4 class="text-center text-muted">
                  Loading
                  <span class="dot">.</span>
                  <span class="dot">.</span>
                  <span class="dot">.</span>
                </h4>
              </div>
            </b-card-text>
          </b-tab>
          <template #tabs-end>
            <b-nav-item role="presentation" @click.prevent href="#" class="bg-secondary rounded"
                        link-classes="py-2 px-0">
              <div class="text-center text-light">
                <h6 class="d-md-block d-none">Week Total</h6>
                <h6 class="d-md-none d-block">Total</h6>
                <h6 class="mb-0">00:00
                  <template v-if="$isAdmin()">
                    <fa icon="hourglass-start" class="" v-if="!isShowBillable"/>
                  </template>
                </h6>
              </div>
            </b-nav-item>
          </template>
        </b-tabs>
      </b-card>
    </c-overlay>

    <add-entry-modal @hidden="onModalHidden"
                     @modal-submitted="updateCreateEntry"
                     :modal-title="entryModalTitle"
                     :form="form"
                     v-if="showAddEntryModal"
                     :modal-id="createEntryModalId"/>
  </div>
</template>

<script>
import COverlay from "@/components/layout/COverlay";
import DayEntries from "@/components/TimesheetCalender/DayEntries";
import AddEntryModal from "@/components/TimesheetCalender/AddEntryModal";

export default {
  name: "day",
  inject: ['showEditEntryModal', 'onModalHidden', 'updateCreateEntry', 'updateSelectedDayIndex','afterFormSubmitted'],
  components: {COverlay, DayEntries, AddEntryModal},
  props: {
    showLoader: {
      required: true
    },
    days: {
      required: true
    },
    selectedDayIndex: {
      required: true,
      default: null,
    },
    evaluationEnabled: {
      required: true
    },
    showBillable: {
      required: true
    },
    weekTotalBillableTime: {
      required: true
    },
    weekTotalTime: {
      required: true
    },
    form: {
      required: true
    },
    showAddEntryModal: {
      required: true
    },
    entryModalTitle: {
      required: true
    }
  },
  data() {
    return {
      createEntryModalId: 'timesheet-entry-model',
    }
  },
  methods: {
    deleteEntry(entry) {
      this.$axios.delete(`timesheet/projects/${entry.project_id}/entries/${entry.id}`)
        .then(response => {
          this.afterFormSubmitted();
        }).catch(err => {
        let message = err.message;
        if (err.response && err.response.data && err.response.data.message) {
          message = err.response.data.message;
        }
        this.$toast.error(message);
      })
    },
    toggleTotalHours() {
      if (!this.$isAdmin()) {
        return;
      }
      this.showBillable = !this.showBillable;
    },
    onTabChange(index) {
      this.updateSelectedDayIndex(index);
    }
  },
  computed: {
    getDays() {
      return this.days;
    },
    isShowBillable() {
      return this.showBillable;
    },
  },
}
</script>

<style scoped>
.entry-box {
  min-height: 300px;
}

.calendar-week {
  /*background: transparent;*/
}

.calendar-week >>> .card-header {
  padding: .5rem 1rem !important;
}

.calendar-week >>> .card-body {
  padding: 0 1rem !important;
}

.sk-tab {
  min-height: 44px;
  min-width: 44px;
}

.day-tab-title {
  position: relative;
}

.require-review:before {
  content: '\2022';
  position: absolute;
  top: 0;
  right: -12px;
  color: #ffc107;
  line-height: 0;
  font-size: 30px;
}

</style>