FE_CPONE/test/vuex/one-mcu-download/components/oneSampleCallSODetail.vue

<template>
  <v-layout class="mb-2" column>
    <v-card class="mb-2">
      <v-layout align-center row>
        <v-flex mt-1 mb-1 xs6>
          <v-subheader font-weight-bold> SETUP MCU OFFLINE  </v-subheader>
        </v-flex>
        <v-flex mt-1 align-right class="text-xs-right align-center" mb-1 xs6>
          <v-btn small :disabled="disabled_start" @click="startToDo()" color="info">LAKUKAN</v-btn>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card class="mb-2">
      <v-layout align-center row>
        <v-flex mt-1 mb-1 pa-2 xs6>
          <v-autocomplete
            label="BERITA ACARA"
            v-model="selected_agreement"
            :items="xagreements"
            :search-input.sync="search_agreement"
            auto-select-first
            no-filter
            item-text="name"
            return-object
            :disabled="disabled_start"
            :loading="isLoading"
            no-data-text="Tidak ada data"
          >
            <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-flex pa-1 xs6>
          <v-text-field :disabled="disabled_start" v-model="numbering_suffix" label="Imbuhan depan penomoran"></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-jumbotron v-if="start_todo === false" color="primary" dark>
    <v-container fill-height>
      <v-layout align-center>
        <v-flex text-xs-center>
          <h3 class="display-3">0%</h3>
        </v-flex>
      </v-layout>
    </v-container>
  </v-jumbotron>
    <v-card v-if="start_todo === true" class="mb-2">
      <v-layout row>
        <v-flex mt-1 mb-1 xs12>
          <v-subheader>FILES</v-subheader>
          <v-divider></v-divider>
        </v-flex>
      </v-layout>
      <v-layout pa-2 row>
        <v-flex xs12>
        <v-list two-line subheader>
          <v-list-tile
            v-for="item in todos"
            :key="item.title"
            avatar
            @click=""
          >
            <v-list-tile-avatar>
              <v-icon :class="[item.iconClass]">{{ item.icon }}</v-icon>
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              <v-list-tile-sub-title>
                <v-progress-linear v-model="item.progressvalue"></v-progress-linear>
              </v-list-tile-sub-title>
            </v-list-tile-content>

            <v-list-tile-action>
                <v-btn icon ripple>
                  <v-icon v-if="item.process === 'N' && item.complete === 'N'" color="grey lighten-1">info</v-icon>
                  <v-icon v-if="item.process === 'N' && item.complete === 'Y'" color="success">check_circle</v-icon>
                </v-btn>
                <v-progress-circular
                  v-if="item.process === 'Y' && item.complete === 'N'"
                  indeterminate
                  color="primary"
                ></v-progress-circular>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>
        </v-flex>
      </v-layout>
      <v-divider></v-divider>
      <v-layout v-if="zipname !== ''" align-center justify-center row>
        <v-flex my-2 xs12>
          <a style="text-decoration:none;" :href="zipname"><v-btn x-large @click="downloadfile()" color="success" dark>DOWNLOAD FILE DI SINI</v-btn></a>
        </v-flex>
      </v-layout>
    </v-card>
  </v-layout>
</template>

<style scoped>
</style>

<script>
module.exports = {
  data: () => ({
    search_company: "",
    isLoading: false,
    disabled_start:false,
    search_agreement:''
  }),
  computed: {
    start_todo: {
      get() {
        return this.$store.state.samplecall.start_todo
      },
      set(val) {
        this.$store.commit("samplecall/update_start_todo", val)
      }
    },
    todos: {
      get() {
        return this.$store.state.samplecall.todos
      },
      set(val) {
        this.$store.commit("samplecall/update_todos", val)
      }
    },
    zipname: {
      get() {
        return this.$store.state.samplecall.zipname
      },
      set(val) {
        this.$store.commit("samplecall/update_zipname", val)
      }
    },
    selected_agreement: {
      get() {
        return this.$store.state.samplecall.selected_agreement
      },
      set(val) {
        this.$store.commit("samplecall/update_selected_agreement", val)
      }
    },
    xagreements() {
      return this.$store.state.samplecall.agreements
    },
    numbering_suffix: {
      get() {
        return this.$store.state.samplecall.numbering_suffix
      },
      set(val) {
        this.$store.commit("samplecall/update_numbering_suffix", val)
      }
    },
  },
  methods: {
    startToDo(){
      this.start_todo = true
      this.disabled_start = true
      var todos = this.todos
      todos[0].process = 'Y'
      var agreement = this.selected_agreement
      var suffix = this.numbering_suffix
      var key = 0
      todos.forEach(function(entry) {
        console.log(todos[key])
                        todos[key].agreement = agreement
                        todos[key].suffix = suffix

                      key++
                    })
      var prm = {todos:todos,count:3}
      prm.agreement = this.selected_agreement
      prm.suffix = this.numbering_suffix
      this.$store.dispatch("samplecall/runningtodo",prm)
    },
    thr_search_agreement: _.debounce(function() {
      this.$store.dispatch("samplecall/search_agreement", {search:this.search_agreement});
    }, 2000),
  },
   watch: {
    search_agreement(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.samplecall.update_autocomplete_status == 1) return;
      this.thr_search_agreement();
    }
  }
};
</script>