panda.js

<template>
    <!-- BEGIN FormFullscreen -->
  <form-fullscreen>
    <!-- HEADER -->
    <header-form title="Cadastro de Aula" />
    <!-- BEGIN CONTEUDO FORM -->
    <div class="content">
      <div class="ui container">
        <!-- BEGIN Form -->
        <form class="dg_form ui form" novalidate @submit.prevent="save">
          <input type="hidden" name="id" id="id" v-model="model.id" />
          <input type="hidden" name="untId" id="untId" v-model="model.untId" />
          <!-- NAME -->
          <div class="fields">
            <field label="Nome" className="required eight wide field" :errorBag="errors" model="model.name">
              <input type="text" placeholder="Nome" v-model="model.name" v-validate="'required'" name="model.name" maxlength="100" />
            </field>
            <!-- LOCALIZACAO -->
            <field label="Local de realização" className="four wide field" model="model.location">
              <input type="text" placeholder="Nome do Local" v-model="model.location" >
            </field>
          </div>
          <!-- FIELDS -->
          <div class="fields">
            <!-- MODALIDADE -->
            <field label="Modalidade da turma" className="required four wide field" :errorBag="errors" model="modalitie">
              <select
                class="dg_form__select ui selection dropdown"
                v-model="modalitie"
                v-validate
                name="modalitie"
                data-vv-rules="required"
              >
                <option v-for="item in modalities" :value="item" :key="item.id">
                  {{ item.name }}
                </option>
              </select>
            </field>
            <!-- Professor -->
            <field label="Professor" className="required four wide field" :errorBag="errors" model="employee">
              <select class="dg_form__select ui search selection dropdown" v-model="employee" data-vv-as="selected" v-validate="'required|not_in:Choose'" name="employee" >
                <option v-for="employee in employees" :value="employee" :data-id="employee" :key="employee.id">
                  {{ employee.name }}
                </option>
              </select>
            </field>
            <!-- DURACAO -->
            <field label="Duração estimada da aula" className="four wide field" model="model.duration">
              <input type="time" placeholder="00:00" v-model="model.duration" >
            </field>
          </div>
          <!-- FIELDS -->
          <div class="fields">
            <!-- CAPACIDADE -->
            <field label="Capacidade Máxima de Alunos" className="four wide field" model="model.capacity">
              <input type="number" placeholder="00" v-model.number="model.capacity" >
            </field>
            <!-- PRECO -->
            <field label="Valor estimado hora/aula" className="four wide field" :errorBag="errors" model="model.hourPrice">
              <money-input v-model="model.hourPrice" />
            </field>
            <!-- ATIVO -->
            <div class="three wide inline field padding-top">
              <div class="ui toggle checkbox">
                <input type="checkbox" name="active" v-model="model.active">
                <label>Turma Ativa</label>
              </div>
            </div>
            <!-- ATIVO -->
            <div class="three wide inline field padding-top">
              <div class="ui toggle checkbox">
                <input type="checkbox" name="active" v-model="model.canSchedule">
                <label>Permitir reserva?</label>
              </div>
            </div>
          </div>
          <!-- FIELDS -->
          <div class="fields">
            <!-- Observações -->
            <field label="Descrição" className="ten wide field" model="description">
              <textarea rows="3" v-model="model.description"></textarea>
            </field>
          </div>
          <!-- LISTA DE HORARIOS -->
          <div class="content_tab margin-top">
            <h2 class="ui dividing header">Adicionar Horários</h2>
            <dg-btn label="Adicionar horário" :clickable="true" icon="icon plus" color="is-blue" :action="addTimesheet" />
            <table class="ui small blue table">
              <thead>
              <tr>
                <th v-for="(item, index) in dayOfWeek" :key="index">{{item.dayShort}}</th>
              </tr>
              </thead>
              <tbody>
              <tr >
                <template v-for="item in dayOfWeek">
                  <td class="selectable" :key="item.id">
                    <template v-for="(meetingsTimesheet, i) in model.meetingsTimesheet">
                      <a href="#" v-on:click="getObjTimesheet(meetingsTimesheet)" v-if="meetingsTimesheet.dayOfWeek === item.id" :key="i">
                        <div 
                          v-if="meetingsTimesheet.times.length" 
                          v-for="(time, index) in orderBy(meetingsTimesheet.times, ['startTime'], ['asc'])" 
                          :key="index"
                        >
                          {{time.startTime}} as {{time.endTime}}
                        </div>
                      </a>
                    </template>
                  </td>
                </template>
              </tr>
              </tbody>
            </table>
          </div>
        </form>
      </div>
    </div>
    <!-- ACTIONS -->
    <actions-form
      :cancelForm="cancelForm"
      :saveForm="save"
      :loading="loadingForm"
    />

    <!-- MODAL TIME SHEET ######################################  -->
    <dg-modal-fluid
      :flag="show"
      :height="45"
      size="big"
      iconHeader="checked calendar icon"
      title="Adicionar Horário"
    >
      <!-- SLOT: CONTENT -->
      <div slot="content" class="description">
        <form class="dg_form ui form" novalidate >
          <div class="fields">
            <field label="Dia da Semana" className="seven wide field" model="listDaysOfWeek">
              <select class="dg_form__select ui selection dropdown" v-model="listDaysOfWeek" multiple style="height: 130px;" >
                <option v-for="item in dayOfWeek" :value="item.id">
                  {{ item.title }}
                </option>
              </select>
            </field>
          </div>
          <h4 class="ui dividing header">Horários</h4>
          <hours-field :times="meetingsTimesheet.times" />
        </form>
      </div>
      <div slot="footer">
        <div class="footer btn-action">
          <button v-if="edit" class="ui red button" @click="removeTimesheet(meetingsTimesheet)">Remover</button>
          <dg-btn label="Fechar" :clickable="true" :isIcon="false" :action="cancelTimesheet" />
          <dg-btn
            v-if="!edit"
            label="Salvar"
            :disabled="!listDaysOfWeek.length || !meetingsTimesheet.times.length"
            :clickable="true"
            :isIcon="false"
            color="is-green"
            :action="prepareSaveTimeSheet"
          />
          <dg-btn
            v-else
            label="Salvar"
            :disabled="!listDaysOfWeek.length || !meetingsTimesheet.times.length"
            :clickable="true"
            :isIcon="false"
            color="is-green"
            :action="prepareSaveTimeSheet"
          />
        </div>
      </div>
    </dg-modal-fluid>
  </form-fullscreen>
</template>

<script>
import GenericCrud from 'mixins/GenericCrud'
import { Validator } from 'vee-validate';
import { dayOfWeek } from '@/helpers/enums'
import { HeaderForm, FormFullscreen, Field, ActionsForm, HoursField, MoneyInput } from 'dg-lib/forms/'
import { DgModalFluid , DgBtn } from 'dg-lib/layout/'
import { mapGetters, mapActions } from 'vuex'
import { saveMeeting, updateMeeting } from 'gql/meeting'
import { listModalitie } from 'gql/modalitie'
import { listEmployeesOccupations } from 'gql/employee'
import { ID_EMPLOYEER_INSTRUCTOR } from 'src/config'
import { mascaraMoeda } from 'src/helpers/masks'
import { notify } from 'src/helpers/notify'
import { model, meetingsTimesheetModel } from './MeetingModel'
import {
  findObjFromArray,
  unformatHour,
  formatHour,
  formatHourArrayObj,
  unformatHourArrayObj,
  findIndexFromArray,
  deleteObjFromArray,
  stringToMoneyFloat,
  FloatToMaskMoney,
  convertToEdit,
  cloneDeep
} from 'src/helpers/data'
import { orderBy } from 'lodash'

export default {
  mixins: [GenericCrud],
  data () {
    return {
      model: model(),
      meetingsTimesheet: meetingsTimesheetModel(),
      dayOfWeek: dayOfWeek(),
      show: false,
      edit: false,
      modalitie: null,
      employee: null,
      listModalities: [],
      listDaysOfWeek: [],
      employees: [],
      modalities: []
    }
  },
  mounted () {
    this.getModalities()
    this.verifyUpdate()
  },
  methods: {
    verifyUpdate() {
      if(!!this.routeParams.id && this.routeParams.id === this.objUpdate.id){
        this.model = convertToEdit(this.objUpdate)
        this.$set(this.model, 'meetingsTimesheet', formatHourArrayObj(this.model.meetingsTimesheet))
        this.model.duration = (this.model.duration)? formatHour(this.model.duration): null
        this.model.hourPrice = (this.model.hourPrice)? FloatToMaskMoney(this.model.hourPrice): null
      }
    },
    getModalities() {
      this.getListAux(listModalitie, { untId: this.untId }, true).then(data => this.listModalities = data.modalities)
    },
    getEmployees() {
      this.getQuery(listEmployeesOccupations, { filter: [ID_EMPLOYEER_INSTRUCTOR], untId: this.untId }, true).then(data => this.ListEmployees = data.employees)
    },
    async save() {
      const result = await this.$validator.validateAll()
      if(result){
        this.model.mdlId = this.modalitie.id
        this.model.mdlName = this.modalitie.name
        this.model.empId = this.employee.id
        this.model.empName = this.employee.name
        this.model.duration = parseInt(unformatHour(this.model.duration))
        this.model.hourPrice = stringToMoneyFloat(this.model.hourPrice)
        this.model.meetingsTimesheet = unformatHourArrayObj(this.model.meetingsTimesheet)
        this.saveObj(saveMeeting, updateMeeting, ['meetingList', 'appMeetingsTimesheet'])
          .then(this.cancelForm)
          .catch(this.cancelForm)
      }
    },
    cancelForm() {
      this.$data.model = model();
      this.loading = false;
      setTimeout(() => this.errors.clear() , 1)
      this.$router.push('/configuracoes/meeting')
      this.resetObj()
    },
    addTimesheet() {
      this.show = true
    },
    getObjTimesheet(obj) {
      this.meetingsTimesheet = cloneDeep(this.model.meetingsTimesheet[findIndexFromArray(this.model.meetingsTimesheet, obj, 'dayOfWeek')])
      this.listDaysOfWeek.push(this.meetingsTimesheet.dayOfWeek)
      this.show = true
      this.edit = true
    },
    removeTimesheet(obj) {
      this.model.meetingsTimesheet = deleteObjFromArray(this.model.meetingsTimesheet, obj, 'dayOfWeek')
      this.cancelTimesheet()
    },
    prepareSaveTimeSheet() {
      this.listDaysOfWeek.forEach(item => {
        this.saveTimeSheet({
          dayOfWeek: item,
          times: this.meetingsTimesheet.times
        })
      })
      this.cancelTimesheet()
    },
    saveTimeSheet(modelTimeSheet) {
      if(findIndexFromArray(this.model.meetingsTimesheet, modelTimeSheet, 'dayOfWeek') === -1) {
        this.model.meetingsTimesheet.push(modelTimeSheet)
      }else {
        const index = findIndexFromArray(this.model.meetingsTimesheet, modelTimeSheet, 'dayOfWeek')
        this.model.meetingsTimesheet[index].times = modelTimeSheet.times
      }
    },
    cancelTimesheet() {
      this.$data.meetingsTimesheet = meetingsTimesheetModel();
      this.listDaysOfWeek = []
      this.show = false
      this.edit = false
    },
    orderBy(list, arrayParams, arrayOrder) {
      return orderBy(list, arrayParams, arrayOrder)
    }
  },
  computed: {
    ...mapGetters(['untId', 'objUpdate', 'routeParams']),
    ListEmployees() {
      return this.employees
    }
  },
  watch: {
    listModalities(data) {
      if(data.length && this.model.mdlId) this.modalitie = findObjFromArray(data, this.model.mdlId)
    },
    ListEmployees(data) {
      if(data.length && this.model.empId) this.employee = findObjFromArray(data, this.model.empId)
    },
  },
  apollo: {
    employees: {
      query: listEmployeesOccupations,
      variables() {
        return {
          filter: [ID_EMPLOYEER_INSTRUCTOR],
          by: 'name',
          untId: this.untId
        }
      },
      fetchPolicy: 'network-only',
      pollInterval: 10000
    },
    modalities: {
      query: listModalitie,
      variables() {
        return {
          offset: '0',
          limit: '0',
          filter: '',
          by: 'name'
        }
      },
      fetchPolicy: 'network-only',
      pollInterval: 10000
    }
  },
  components: {
    FormFullscreen,
    Field,
    HeaderForm,
    ActionsForm,
    HoursField,
    MoneyInput,
    DgModalFluid,
    DgBtn
  }
}
</script>

<style lang="stylus">
  .padding-top
    padding-top: 2.4rem !important
</style>