FE_CPONE/test/vuex/one-md-email-notification-config/components/oneMdEmailNotificationConfig.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="snackbar = 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 Notification 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="username" label="Username"></v-text-field>
            </v-flex>
            <v-flex xs6 pa-2 d-flex>
              <v-text-field v-model="password" label="Password" type="password"></v-text-field>
            </v-flex>
          </v-layout>
          <v-layout row>
            <v-flex xs12 class="text-md-center" pa-2 d-flex>
              <h4>TEMPLATE EMAIL NOTIFIKASI</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="Template Email" v-model="template"
                rows="14"></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>Preview Template Email</h4>
        </v-card-title>
        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pa-2 v-html="template">
            </v-flex>
          </v-layout>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<style scoped>
  ::-webkit-scrollbar {
    width: 7px;
  }
  ::-webkit-scrollbar-track {
    background-color: #73baf3;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #2196f3;
  }
  ::-webkit-scrollbar-button {
    background-color: #0079da;
  }
  ::-webkit-scrollbar-corner {
    background-color: black;
  }
</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) }
      },
      sendtime: {
        get() { return this.$store.state.form.sendtime },
        set(val) { this.$store.commit("form/update_sendtime", val) }
      },
      template: {
        get() { return this.$store.state.form.template },
        set(val) { this.$store.commit("form/update_template", val) }
      },
      isactive: {
        get() { return this.$store.state.form.isactive },
        set(val) { this.$store.commit("form/update_isactive", 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 = {
          Email_ConfigNofificationID: this.$store.state.form.xid,
          Email_ConfigNofificationSender: this.sender,
          Email_ConfigNofificationUsername: this.username,
          Email_ConfigNofificationPassword: this.password,
          Email_ConfigNofificationServer: this.server,
          Email_ConfigNofificationSendTime: this.sendtime,
          Email_ConfigNofificationTemplate: this.template,
          Email_ConfigNofificationIsActive: this.isactive,
        }
        this.$store.dispatch("form/save", prm)
      }
    }
  }
</script>