FE_CPONE/test/vuex/one-md-requirement---/components/oneMdTest.vue

<template>
  <v-layout>
    <v-flex xs12>
      <v-card class="mb-2" color="white">
        <v-toolbar color="blue lighten-3" dark height="50px">
          <v-toolbar-title class="white--text">Pemeriksaan untuk {{xrequirement.name}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn v-if="xrequirement.Nat_RequirementIsAllTest =='N'" @click="openFormRequirementTest()" icon>
            <v-icon class="white--text">library_add</v-icon>
          </v-btn>
        </v-toolbar>

        <v-layout row wrap>
          <v-flex class="border-bottom-dashed" xs12 pt-2 pl-4 pr-4 pb-4>

            <v-layout xs12 row wrap>
              <v-flex xs4 v-for="(vst,idx) in vtests" :key="vst.Nat_TestID" class="pr-2 pb-1">
                <v-layout row>
                  <v-flex class="boxoutline" style="text-overflow:ellipsis;overflow:hidden;" xs11>
                    <span>{{vst.Nat_TestName}}</span>
                  </v-flex>
                  <v-flex class="boxoutline" class="text-center" style="padding-top:10px" pl-2 pb-2 pr-2 xs2>
                    <v-layout row align-center justify-space-between>
                      <v-icon style="color:red" @click="deleteTest(vst.Nat_TestID,vst.Nat_TestName)">clear</v-icon>
                    </v-layout>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>

          </v-flex>
        </v-layout>

        <template>
          <v-layout row justify-center>
            <v-dialog v-model="dialogrequirementtest" persistent max-width="600px">
              <v-card>
                <v-card-title>
                  <span class="headline">Form Requirement Test</span>
                </v-card-title>
                <v-card-text class="pt-0 pb-0">
                  <v-form ref="formrequirementtest" v-model="validtest" lazy-validation>
                    <v-layout wrap>
                      <v-flex xs12>
                        REQUIREMENT : {{xrequirement.name}}
                      </v-flex>
                      <v-flex xs12>
                        <v-autocomplete label="Test" v-model="test" :items="xtests" :search-input.sync="search_test" auto-select-first no-filter
                          item-text="Nat_TestName" return-object :loading="isLoading" no-data-text="Pilih Test">
                          <template slot="item" slot-scope="{ item }">
                            <v-list-tile-content>
                              <v-list-tile-title v-text="item.Nat_TestName"></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="grey darken-1" flat @click="updateDialogFormRequirementTest()">Tutup</v-btn>
                  <v-btn color="grey darken-1" flat @click="saveFormRequirementTest()">Simpan</v-btn>
                </v-card-actions>
                </v-form>
              </v-card>
            </v-dialog>
          </v-layout>
        </template>

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

<style scoped>
  .searchbox .v-input.v-text-field .v-input__slot {
    min-height: 60px;
  }

  .searchbox .v-btn {
    min-height: 60px;
  }

  .boxoutline {
    color: teal;
    border: 1px solid teal;
    justify-content: center;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 1px
  }

  .boxoutline:hover {
    background: rgba(0, 0, 0, 0.07) !important;
    font-size: 15px;
    font-weight: 700;
  }


  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    background: white;
    border: 0px;
  }

  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  table>tr>td {
    padding: 8px;
  }

  table>tr>td:first {
    padding-left: 15px !important;
  }
</style>

<script>
  module.exports = {
    data() {
      return {
        isLoading: false,
        validtest: false,
        search_test: '',
        items: [],
        msgalertmou: ""
      };
    },
    computed: {
      selected: {
        get() {
          return this.$store.state.test.selected
        }
      },
      xrequirement() {
        return this.$store.state.requirement.selected_requirement
      },
      dialogrequirementtest() {
        return this.$store.state.test.dialog_form_requirement_test
      },
      xtests() {
        return this.$store.state.test.tests
      },
      test: {
        get() {
          return this.$store.state.test.test
        },
        set(val) {
          this.$store.commit("test/update_test", val)
        }
      },
      vtests() {
        return this.$store.state.test.selected
      }
    },
    methods: {
      isSelected(id) {
        let vals = this.$store.state.test.selected
        if (vals.indexOf(id) > -1) return true
        return false
      },
      async deleteTest(id,name) {
        let req_id = this.$store.state.requirement.selected_requirement.id
        await this.$store.dispatch("test/delete", {
          id: id,
          name: name,
          req_id: req_id
        })
        await this.$store.dispatch("test/selected", req_id)
      },
      updateDialogFormRequirementTest() {
        this.$store.commit("test/update_dialog_form_requirement_test", false)
      },
      thr_search_test: _.debounce(function () {
        this.$store.dispatch("test/searchtest", this.search_test)
      }, 2000),
      openFormRequirementTest(val) {
        //console.log("masuk")
        this.xid = val
        this.search_test = ''
        this.$store.commit("test/update_tests", [])
        this.test = {}
        this.$refs.formrequirementtest.reset()
        this.$refs.formrequirementtest.resetValidation()
        this.$store.commit("test/update_dialog_form_requirement_test", true)
      },
      saveFormRequirementTest() {
        if (this.$refs.formrequirementtest.validate()) {
          this.$store.dispatch("test/save", {
            xid: this.xid,
            requirementid: this.$store.state.requirement.selected_requirement.id,
            requirementname: this.$store.state.requirement.selected_requirement.name,
            testid: this.test.Nat_TestID
          })
        }
      },
      updateAlert_success(val) {
        this.$store.commit("requirement/update_alert_success", val)
      }
    },
    watch: {
      search_test(val, old) {
        if (val == old) return
        if (!val) return
        if (val.length < 1) return
        if (this.$store.state.test.update_autocomplete_status == 1) return
        this.thr_search_test()
      }
    }
  }
</script>