FE_CPONE/test/vuex/one-md-email-config/components/oneMdEmailConfig0.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 xs6 mr-1>
      <v-card>
        <v-card-title
            class="headline grey darken-1 pt-2 pb-2"
            primary-title
            style="color:white"
        >
        <h4 >Email Konfigurasi</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
               <v-text-field
                  v-model="server"
                  label="Server"
                ></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 d-flex>
               <v-text-field
                  v-model="sender"
                  label="Pengirim"
                ></v-text-field>
            </v-flex>
          </v-layout> 
          <v-layout row>
            <v-flex xs6 pa-2 d-flex>
               <v-text-field
                  v-model="emailcc"
                  label="Email CC"
                ></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 >
                <v-text-field
                  v-model="maxretry"
                  label="Maksimal Pengulangan Pengiriman Otomatis"
                ></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 class="text-md-center" pa-2 d-flex>
              <h4>FORMAT EMAIL</h4>
            </v-flex>
          </v-layout> 
          <v-layout row>
            <v-flex xs12 pa-2 d-flex>
              <v-textarea
                filled
                solo
                background-color="amber lighten-4"
                color="orange orange-darken-4"
                label="Format Email"
                v-model="formatemail"
                rows="18"
              ></v-textarea>
            </v-flex>
          </v-layout> 
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="doSave()" color="primary" >SIMPAN</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs6 ml-1>
      <v-card>
        <v-card-title
            class="headline grey darken-1 pt-2 pb-2"
            primary-title
            style="color:white"
        >
        <h4 >Tampilan Email</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pa-2 v-html="formatemail">
              
            </v-flex>
          </v-layout> 
          </v-layout> 
        </v-card-text>
      </v-card>
    </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/getdata")
  },
  computed: {
     sender:{
      get() {
        return this.$store.state.form.sender
      },
      set(val) {
        this.$store.commit("form/update_sender",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
    },
  },
  methods : {
    doSave(){
      var prm = {
        M_EmailConfigSender:this.sender,
        M_EmailConfigUsername:this.username,
        M_EmailConfigPassword:this.password,
        M_EmailConfigServer:this.server,
        M_EmailConfigMaxRetry:this.maxretry,
        M_EmailConfigHomeServiceFormat:this.formatemail,
        M_EmailConfigCc:this.emailcc,
        M_EmailConfigID:this.$store.state.form.xid
      }
      this.$store.dispatch("form/save",prm)
    }
  }
}
</script>