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="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 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="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 APS</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="formatemailaps"
                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>Tampilan Email</h4>
        </v-card-title>
        <v-flex xs12 class="text-md-center" pa-2 d-flex>
          <h4>FORMAT EMAIL APD</h4>
        </v-flex>

        <v-card-text class="pt-2 pb-2">
          <v-layout row>
            <v-flex xs12 pa-2 v-html="formatemail">

            </v-flex>
          </v-layout>
          <v-divider></v-divider>
          <v-flex xs12 class="text-md-center" pa-2 d-flex>
            <h4>FORMAT EMAIL APS</h4>
          </v-flex>
          <v-layout row>
            <v-flex xs12 pa-2 v-html="formatemailaps">

            </v-flex>
          </v-layout>
          <v-divider></v-divider>
          <v-flex xs12 class="text-md-center" pa-2 d-flex>
            <h4>FORMAT EMAIL REKANAN</h4>
          </v-flex>
          <v-layout row>
            <v-flex xs12 pa-2 v-html="formatemailrk">

            </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;
  }

  ::-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)
        }
      },
      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)
        }
      },

      formatemailaps: {
        get() {
          return this.$store.state.form.formatemailaps
        },
        set(val) {
          this.$store.commit("form/update_formatemailaps", val)
        }
      },

      formatemailrk: {
        get() {
          return this.$store.state.form.formatemailrk
        },
        set(val) {
          this.$store.commit("form/update_formatemailrk", val)
        }
      },
      formatemailwaaps: {
        get() {
          return this.$store.state.form.formatemailwaaps
        },
        set(val) {
          this.$store.commit("form/update_formatemailwaaps", val)
        }
      },
      formatemailwagreetingaps: {
        get() {
          return this.$store.state.form.formatemailwagreetingaps
        },
        set(val) {
          this.$store.commit("form/update_formatemailwagreetingaps", 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_EmailConfigResultFormatAPS: this.formatemailaps,
          M_EmailConfigCc: this.emailcc,
          M_EmailConfigID: this.$store.state.form.xid
        }
        this.$store.dispatch("form/save", prm)
      }
    }
  }
</script>