FE_CPONE/test/vuex/one-md-schedule-v2/components/mdScheduleTest.1.vue

<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white" style="min-height:100px">
        <v-toolbar class="mb-1" color="blue lighten-3" dark height="50px">
          <v-toolbar-title>SCHEDULE TEST : {{xschedules.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn @click="openFormScheduleTest()" icon>
            <v-icon>library_add</v-icon>
          </v-btn>
        </v-toolbar>
        <v-btn class="mt-1 mb-2" v-for="(vst,idx) in vscheduletests" :key="vst.id" small color="error">{{vst.name}}
          <v-icon @click="deleteTest(vst)" right dark>clear</v-icon>
        </v-btn>

        <template>

          <v-dialog v-model="dialogdeletealerttest" max-width="30%">
            <v-card>
              <v-card-title class="headline grey lighten-2 pt-2 pb-2" primary-title>
                Peringatan !
              </v-card-title>
              <v-card-text class="pt-2 pb-2">
                <v-layout row>
                  <v-flex xs12 d-flex>
                    <v-layout row>
                      <v-flex pb-1 xs12>
                        <v-layout row>
                          <v-flex pt-2 pr-2 xs12>
                            {{msgalerttest}}
                          </v-flex>
                        </v-layout>
                      </v-flex>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-card-text>
              <v-divider></v-divider>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" flat @click="dialogdeletealerttest = false">
                  Tutup
                </v-btn>
                <v-btn color="primary" flat @click="closeDeleteAlertTest()">
                  Yakin lah
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

        </template>


        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogscheduletest" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Schedule Pemeriksaan</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formscheduletest" v-model="validtest" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        SCHEDULE : {{xschedules.name}}
                      </v-flex>
                      <v-flex xs12>
                        <v-autocomplete label="Pemeriksaan" v-model="xselected_test" :items="xtests" :search-input.sync="search" auto-select-first
                          no-filter return-object item-text="name" :loading="is_loading" no-data-text="Pilih Pemeriksaan">
                          <template slot="item" slot-scope="{ item }">
                            <v-list-tile-content>
                              <v-list-tile-title v-text="item.name"></v-list-tile-title>
                            </v-list-tile-content>
                          </template>

                        </v-autocomplete>
                      </v-flex>
                    </v-layout>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="blue darken-1" flat @click="updateDialogFormScheduleTest()">Tutup</v-btn>
                  <v-btn color="blue darken-1" flat @click="saveFormScheduleTest()">Simpan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>

      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
</style>

<script>
  module.exports = {
    data: () => ({
      color: "success",
      validtest: false,
      search: "",
      dialogdeletealerttest: false,
      xid: 0,
      msgalerttest: ""
    }),
    computed: {
      vscheduletests() {
        return this.$store.state.scheduletest.scheduletests
      },
      dialogscheduletest() {
        return this.$store.state.scheduletest.dialog_form_schedule_test
      },
      xselected_test: {
        get() {
          return this.$store.state.scheduletest.selected_test
        },
        set(val) {
          this.$store.commit("scheduletest/update_selected_test", val)
        }
      },
      xschedules() {
        return this.$store.state.schedule.selected_schedule
      },
      xtests() {
        return this.$store.state.scheduletest.tests
      },
      is_loading() {
        return this.$store.state.scheduletest.search_status == 1
      }
    },
    methods: {
      updateDialogFormScheduleTest() {
        this.$store.commit("scheduletest/update_dialog_form_schedule_test", false)
      },
      openFormScheduleTest() {
        this.$store.commit("scheduletest/update_selected_test", {})
        this.$refs.formscheduletest.reset()
        this.$refs.formscheduletest.resetValidation()
        this.$store.commit("scheduletest/update_dialog_form_schedule_test", true)
      },
      saveFormScheduleTest() {
        if (this.$refs.formscheduletest.validate()) {
          this.$store.dispatch("scheduletest/save", {
            scheduleid: this.$store.state.schedule.selected_schedule.id,
            schedulename: this.$store.state.schedule.selected_schedule.name,
            testid: this.xselected_test.id,
            testname: this.xselected_test.name
          })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("schedule/update_alert_success", val)
      },
      thr_search: _.debounce(function () {
        this.$store.dispatch("scheduletest/search", {
          id: this.$store.state.schedule.selected_schedule.id
        })
      }, 2000),
      deleteTest(data) {
        this.xid = data.id
        console.log(this.xid)
        this.$store.commit("scheduletest/update_selected_test", data)
        this.msgalerttest = "Yakin, mau hapus pemeriksaan " + this.xselected_test.name + "dari schedule " + this.xschedules
          .name + "  ?"
        this.dialogdeletealerttest = true
      },
      closeDeleteAlertTest() {
        this.$store.dispatch("scheduletest/delete", {
          xid: this.xid,
          scheduleid: this.$store.state.schedule.selected_schedule.id,
          schedulename: this.$store.state.schedule.selected_schedule.name,
          testname: this.xselected_test.name
        })
        this.dialogdeletealerttest = false
      }
    },
    watch: {
      search(val, old) {
        console.log(val)
        if (val !== "" && val !== old && val && val.length > 2) {
          this.$store.commit("scheduletest/update_search", val)
          this.thr_search()
        }
      }
    }
  }
</script>