FE_CPONE/test/vuex/one-sampling-handling/components/oneSamplingHandlingRequirementProcess.vue

<template>
  
    <v-dialog
      v-model="dialog"
      :width="this.requirements.length <= 5 ? 500 : 900"
    >
      

      <v-card>
        <v-card-title
          class="headline grey lighten-2 pt-2 pb-2"
          primary-title
        >
          Sample Handling
        </v-card-title>

        <v-card-text class="pt-2 pb-2">
          <v-layout row wrap>
            <v-flex v-bind:class="this.requirements.length <= 5 ? 'xs12' : 'xs6'">
              <v-layout row wrap>
                <v-flex xs12 v-for="(req, i) in reqs_odd" v-bind:key="i">
                  <v-checkbox :label="req.req_name" v-model="selected_requirements" :value="req.req_id"
                    hide-details
                    class="mt-2"></v-checkbox>
                </v-flex>
              </v-layout>
            </v-flex>

            <v-flex xs6 v-if="this.requirements.length > 5">
              <v-layout row wrap>
                <v-flex xs12 v-for="(req, i) in reqs_even" v-bind:key="i">
                  <v-checkbox :label="req.req_name" v-model="selected_requirements" :value="req.req_id"
                    hide-details
                    class="mt-2"></v-checkbox>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>

          <v-layout row wrap>
            <v-flex xs12 pt-4>
              <v-textarea
                auto-grow
                label="Catatan"
                rows="3"
                v-model="note"
                outline
              ></v-textarea>
            </v-flex>
          </v-layout>

        </v-card-text>
        <v-divider></v-divider>

        <v-card-actions>
            <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Tutup
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn
            color="red"
            @click="save"
            :disabled="selected_requirements.length < 1"
            :dark="selected_requirements.length > 0"
          >
            OK
          </v-btn>
          <!-- <v-btn
            color="primary"
            @click="save_process"
            :disabled="selected_requirements.length < 1"
            :dark="selected_requirements.length > 0"
          >
            Proses
          </v-btn> -->
        </v-card-actions>
      </v-card>
    </v-dialog>
  
</template>

<style scoped>
</style>

<script>
module.exports = {
    components : {
    },
    methods : {
    //    save_reject () {
    //      this.$store.dispatch('handling_process_patient/reject')
    //       //  this.$store.dispatch('handling_patient/save_requirement', "N")
    //    },

    //    save_process () {
    //      this.$store.dispatch('handling_process_patient/verify')
    //    }
        save () {
            this.$store.commit('handling_process_patient/update_req_status', {req_status:'N', reqs:this.$store.state.handling_process_patient.reqs})
            this.dialog = false
        }
    },
    computed : {
       dialog: {
          get() {
             return this.$store.state.handling_process_patient.dialog_requirement;
          },
          set(val) {
             this.$store.commit('handling_process_patient/update_dialog_requirement', val);
          }
       },

       requirements () {
         if (this.$store.state.handling_process_patient.reqs)
          return this.$store.state.handling_process_patient.reqs

        return []
       },

       selected_requirements : {
         get () {
           return this.$store.state.handling_process_patient.selected_reqs
         },
         set (v) {
           this.$store.commit('handling_process_patient/update_selected_reqs', v)
         }
       },

        note : {
            get () {
                return this.$store.state.handling_process_patient.req_note
            },
            set (v) {
                this.$store.commit('handling_process_patient/update_req_note', v)
            }
        },

        reqs_odd () {
          if (!this.requirements)
            return []

          if (this.requirements.length <= 5)
            return this.requirements

          if (this.requirements <= 10)
            return this.requirements.slice(0,4)
          
          else {
            let x = Math.ceil(this.requirements.length / 2)
            return this.requirements.slice(0, x-1)
          }
        },

        reqs_even () {
          if (!this.requirements)
            return []

          if (this.requirements.length <= 5)
            return []

          if (this.requirements <= 10)
            return this.requirements.slice(5, this.requirements-1)
          
          else {
            let x = Math.ceil(this.requirements.length / 2)
            return this.requirements.slice(x, this.requirements.length-1)
          }
        }
    },

    mounted () {
    //   this.$store.dispatch('handling_patient/get_requirement')
    },

    watch : {
      dialog(n, o) {
        let x = this.$store.state.handling_patient.selected_reqs_process
        if (n && !o)
          this.$store.commit('handling_patient/update_selected_requirements', {pos:'PROCESS', data:x})
      }
    }
}
</script>