FE_CPONE/test/vuex/one-md-mcu-fisik/components/oneMdEmailConfig.vue

<template>
  <v-layout row>
    <v-snackbar v-model="snackbar" :color="color" :timeout="5000" :multi-line="false" :vertical="false" :top="true">
      {{ msgsnackbar }}
      <v-btn flat @click="updateAlert_success(false)">
        Tutup
      </v-btn>
    </v-snackbar>
    <v-flex xs3 mr-1>
      <v-card>
        <v-card-title class="pt-1 pb-1" primary-title style="color:white;background:#fb8c00">
          <h4>PILIH BAHASA</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pr-1>
              <v-select return-object item-text="name" v-model="selected_lang" :items="langs" label="BAHASA"
                outline></v-select>
            </v-flex>

          </v-layout>

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

          <v-btn block @click="doSave()" color="primary">SIMPAN</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs9 style=" overflow-y: scroll;height:650px" mr-1>
      <v-layout mb-1 row>
        <v-flex xs12>
          <v-card>
            <v-card-title class="pt-1 pb-1" primary-title style="color:white;background:#fb8c00">
              <v-layout row>
                <v-flex pa-2 xs6>
                  <v-text-field hide-details dense placeholder="Cari ..." v-model="search" solo></v-text-field>
                </v-flex>
                <v-flex class="text-xs-right" pa-2 xs6>
                  <v-btn @click="addnew()" color="primary" style="min-width:30px"><v-icon>add</v-icon></v-btn>
                </v-flex>

              </v-layout>

            </v-card-title>
            <v-card-text class="pt-2 pb-2">
              <v-layout row>
                <v-flex pa-2 text-xs-center xs6>KATA ASAL</v-flex>
                <v-flex pa-2 text-xs-center xs6>TERJEMAHAN</v-flex>
              </v-layout>
              <v-divider></v-divider>
              <v-layout wrap row>
                <v-flex v-for="data in datas" xs12 pr-1>
                  <v-layout row>
                    <v-flex pa-2 xs6>
                      <v-text-field hide-details dense v-model="data.Translate_WordFrom" solo></v-text-field>
                    </v-flex>
                    <v-flex pa-2 xs6>
                      <v-text-field hide-details dense v-model="data.Translate_WordTo" label="Tuliskan terjemahan"
                        solo></v-text-field>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-layout>
              <v-pagination style="margin-top:10px;margin-bottom:10px" :total-visible="15" v-model="curpage"
                :length="total_page"></v-pagination>
            </v-card-text>

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

  </v-layout>
</template>

<style scoped>
.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
  width: 7px;
}

/* this targets the default scrollbar (compulsory) */
::-webkit-scrollbar-track {
  background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
}

/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>

<script>
module.exports = {
  data: () => ({
    color: "success"
  }),
  mounted() {
    this.$store.dispatch("form/getlang")
    // this.goSearch()
  },
  computed: {
    curpage: {
      get() {
        return this.$store.state.form.curpage
      },
      set(val) {
        this.$store.commit("form/update_curpage", val)
        this.goSearch()
      }
    },
    total_page: {
      get() {
        return this.$store.state.form.total_page
      },
      set(val) {
        this.$store.commit("form/update_total_page", val)
      }
    },
    search: {
      get() {
        return this.$store.state.form.search
      },
      set(val) {
        this.$store.commit("form/update_search", val)
        this.goSearch()
      }
    },
    datas: {
      get() {
        return this.$store.state.form.datas
      },
      set(val) {
        this.$store.commit("form/update_datas", val)
      }
    },
    sender: {
      get() {
        return this.$store.state.form.sender
      },
      set(val) {
        this.$store.commit("form/update_sender", val)
      }
    },
    selected_lang: {
      get() {
        return this.$store.state.form.selected_lang
      },
      set(val) {
        this.$store.commit("form/update_selected_lang", val)
      }
    },
    server: {
      get() {
        return this.$store.state.form.server
      },
      set(val) {
        this.$store.commit("form/update_server", val)
      }
    },
    username: {
      get() {
        return this.$store.state.form.username
      },
      set(val) {
        this.$store.commit("form/update_username", val)
      }
    },
    password: {
      get() {
        return this.$store.state.form.password
      },
      set(val) {
        this.$store.commit("form/update_password", val)
      }
    },
    maxretry: {
      get() {
        return this.$store.state.form.maxretry
      },
      set(val) {
        this.$store.commit("form/update_maxretry", val)
      }
    },
    emailcc: {
      get() {
        return this.$store.state.form.emailcc
      },
      set(val) {
        this.$store.commit("form/update_emailcc", val)
      }
    },
    formatemail: {
      get() {
        return this.$store.state.form.formatemail
      },
      set(val) {
        this.$store.commit("form/update_formatemail", val)
      }
    },
    snackbar: {
      get() {
        return this.$store.state.form.alert_success
      },
      set(val) {
        this.$store.commit("form/update_alert_success", val)
      }
    },
    msgsnackbar() {
      return this.$store.state.form.msg_success
    },
    langs() {
      return this.$store.state.form.langs
    },
  },
  methods: {
    addnew() {

      var newx = [{
        Translate_WordFrom: "",
        Translate_WordID: "0",
        Translate_WordIsActive: "Y",
        Translate_WordLastUpdated: "",
        Translate_WordNat_LangID: "",
        Translate_WordTo: "",
        Translate_WordUserID: ""
      }]

      var olds = this.datas
      olds.forEach(function (entry) {
        newx.push(entry)
      });

      this.datas = newx
    },
    goSearch() {
      //console.log(this.search)
      var prm = {
        search: this.search
      }
      console.log(prm)
      this.$store.dispatch("form/search", prm)
    },
    doSave() {
      var prm = {
        lang: this.selected_lang,
        datas: this.datas
      }
      this.$store.dispatch("form/save", prm)
    }
  }
}
</script>