Email Recipients

src/components/communication/emailRecipientEdit.vue

@@ -0,0 +1,100 @@
+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Edit Recipient</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-5">
+        <div class="col">
+          <alert :text="alertMessage" :type="alertState" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <float-label>
+            <input
+              v-model="recipient.recipientName"
+              type="text"
+              class="form-control uniInput"
+              placeholder="RECIPIENT NAME"
+            />
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label>
+            <input
+              v-model="recipient.recipientMail"
+              type="text"
+              class="form-control uniInput"
+              placeholder="RECIPIENT EMAIL"
+            />
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label fixed label="USAGE">
+            <select v-model="recipient.recipientUsage" class="form-control uniSelect">
+              <option value="ContactUs">Contact Us</option>
+              <option value="EnquireNow">Enquire Now</option>
+            </select>
+          </float-label>
+        </div>
+      </div>
+      <div class="row mt-4">
+        <div class="col">
+          <button class="btn-solid-blue" @click="sendToApi()">UPDATE</button>
+        </div>
+        <div class="col">
+          <router-link class="btn-solid-blue" to="/emailRecipient">CANCEL</router-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  created() {
+    this.getMailRecipientById(this.$route.params.id).then(() => {
+      console.log(this.recipient);
+    });
+  },
+  computed: {
+    ...mapState("template", ["recipient"])
+  },
+  methods: {
+    ...mapActions("template", ["getMailRecipientById", "updateMailRecipient"]),
+    sendToApi() {
+      if (this.checkEmail(this.recipient.recipientMail)) {
+        if (this.recipient.recipientUsage != "") {
+          this.updateMailRecipient(this.recipient).then(() => {
+            this.$router.push("/emailRecipient");
+          });
+        } else {
+          this.alertMessage = "Please select a usage type";
+          this.alertState = "ERROR";
+        }
+      } else {
+        this.alertMessage = "Invalid Email";
+        this.alertState = "ERROR";
+      }
+    },
+    checkEmail(email) {
+      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(String(email).toLowerCase());
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/communication/emailRecipientNew.vue

@@ -0,0 +1,103 @@
+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>New Email Recipient</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row mb-5">
+        <div class="col">
+          <alert :text="alertMessage" :type="alertState" />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <float-label>
+            <input
+              v-model="recipient.recipientName"
+              type="text"
+              class="form-control uniInput"
+              placeholder="RECIPIENT NAME"
+            />
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label>
+            <input
+              v-model="recipient.recipientMail"
+              type="text"
+              class="form-control uniInput"
+              placeholder="RECIPIENT EMAIL"
+            />
+          </float-label>
+        </div>
+        <div class="col">
+          <float-label fixed label="USAGE">
+            <select v-model="recipient.recipientUsage" class="form-control uniSelect">
+              <option value="ContactUs">Contact Us</option>
+              <option value="EnquireNow">Enquire Now</option>
+            </select>
+          </float-label>
+        </div>
+      </div>
+      <div class="row mt-4">
+        <div class="col">
+          <button class="btn-solid-blue" @click="sendToApi()">SAVE</button>
+        </div>
+        <div class="col">
+          <router-link class="btn-solid-blue" to="/emailRecipient">CANCEL</router-link>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions } from "vuex";
+import alert from "../shared/alert";
+
+export default {
+  components: {
+    alert
+  },
+  data() {
+    return {
+      recipient: {
+        recipientName: "",
+        recipientMail: "",
+        recipientUsage: ""
+      },
+      alertMessage: "",
+      alertState: ""
+    };
+  },
+  methods: {
+    ...mapActions("template", ["addMailRecipient"]),
+    sendToApi() {
+      if (this.checkEmail(this.recipient.recipientMail)) {
+        if (this.recipient.recipientUsage != "") {
+          this.addMailRecipient(this.recipient).then(() => {
+            this.$router.push("/emailRecipient");
+          });
+        } else {
+          this.alertMessage = "Please select a usage type";
+          this.alertState = "ERROR";
+        }
+      } else {
+        this.alertMessage = "Invalid Email";
+        this.alertState = "ERROR";
+      }
+    },
+    checkEmail(email) {
+      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+      return re.test(String(email).toLowerCase());
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/communication/emailRecipients.vue

@@ -0,0 +1,70 @@
+<template>
+  <main id="main" style="margin-top:200px; padding-bottom:50px">
+    <div class="container">
+      <div class="row">
+        <div class="col">
+          <div class="section-header">
+            <h2>Email Recipients</h2>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <listView
+            :items="recipients"
+            :showNew="true"
+            :editable="true"
+            :deleteable="true"
+            :hideSearch="true"
+            :showColumnChooser="false"
+            :displayColumns="columns"
+            :sortKey="'description'"
+            @onEdit="Edit"
+            @onDelete="Delete"
+            @onNew="New"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapActions, mapState } from "vuex";
+import listView from "../shared/listView";
+
+export default {
+  name: "MailRecipients",
+  components: {
+    listView
+  },
+  data() {
+    return {
+      columns: ["recipientName", "recipientMail", "recipientUsage"]
+    };
+  },
+  created() {
+    this.getMailRecipients();
+  },
+  computed: {
+    ...mapState("template", ["recipients"])
+  },
+  methods: {
+    ...mapActions("template", ["getMailRecipients", "deleteMailRecipient"]),
+    New() {
+      this.$router.push("/emailRecipient/new");
+    },
+    Edit(item) {
+      this.$router.push({
+        path: `/emailRecipient/Edit/${item.id}`
+      });
+    },
+    Delete(item) {
+      this.deleteMailRecipient(item.id);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/shared/contactUsSection.vue

@@ -105,7 +105,7 @@ export default {
   methods: {
     async sendMail() {
       var mailObj = {
-        toAddress: "abigaildf@provision-sa.com",
+        //toAddress: "abigaildf@provision-sa.com",
         fromAddress: "jlouw365@gmail.com",
         name: this.name,
         email: this.email,

src/components/shared/navBar.vue

@@ -43,7 +43,8 @@
                   </router-link>
                 </div>
               </div>
-              <nav id="nav-menu-container">
+
+              <nav id="nav-menu-container" class="mt-2">
                 <ul class="nav-menu sf-js-enabled sf-arrows">
                   <li style="margin-left:-20px">
                     <router-link to="/property/commercial">Commercial</router-link>
@@ -243,11 +244,14 @@
                           style="margin-top:-10px;text-align:left;width:250px"
                           :class="submenu1Class"
                         >
+                          <li>
+                            <router-link to="/termsConditions">Edit Terms & Conditions</router-link>
+                          </li>
                           <li>
                             <router-link to="/communication/template">Email Templates</router-link>
                           </li>
                           <li>
-                            <router-link to="/termsConditions">Edit Terms & Conditions</router-link>
+                            <router-link to="/emailRecipient">Email Recipients</router-link>
                           </li>
                           <li>
                             <router-link to="/fees">Fees</router-link>

src/components/user/forgotPasswordReset.vue

@@ -149,7 +149,7 @@ export default {
       var Tokendate = new Date(this.byteArrayToLong(timeArr));
       var d = new Date();
       var date = new Date(d.getTime());
-      var upperDate = new Date(Tokendate.setHours(Tokendate.getHours() + 2));
+      var upperDate = new Date(Tokendate.setHours(Tokendate.getHours() + 1));
 
       if (date < upperDate) {
         this.validLink = true;

src/router/index.js

@@ -73,6 +73,9 @@ import CarouselList from "../components/admin/misc/carouselList.vue";
 import CarouselDetail from "../components/admin/misc/carousel.vue";
 import AlertPage from "../components/shared/alertPage.vue";
 import PropertySearchResults from "../components/property/propertySearchResults.vue";
+import EmailRecipient from '../components/communication/emailRecipients.vue'
+import EmailRecipientNew from '../components/communication/emailRecipientNew.vue'
+import EmailRecipientEdit from '../components/communication/emailRecipientEdit.vue'
 
 import CommercialSearchResults from "../components/property/commercial/commercialSearchResults.vue";
 import ResidentialSearchResults from "../components/property/residential/residentialSearchResults.vue";
@@ -497,5 +500,20 @@ export default new Router({
       name: "ForgotPasswordReset",
       component: ForgotPasswordReset,
     },
+    {
+      path: "/emailRecipient",
+      name: "emailRecipient",
+      component: EmailRecipient,
+    },
+    {
+      path: "/emailRecipient/new",
+      name: "emailRecipientNew",
+      component: EmailRecipientNew,
+    },
+    {
+      path: "/emailRecipient/Edit/:id",
+      name: "emailRecipientEdit",
+      component: EmailRecipientEdit,
+    },
   ]
 });

src/store/modules/communication/template.js

@@ -1,4 +1,6 @@
+/* eslint-disable */
 import axios from 'axios';
+import { result } from 'lodash';
 
 export default {
   namespaced: true,
@@ -6,11 +8,23 @@ export default {
     list: [],
     item: {},
     message: undefined,
+    recipients: [],
+    recipient: {}
   },
   mutations: {
     setList(state, list) {
       state.list = list;
     },
+    setRecipients(state, recips){
+      state.recipients = recips
+    },
+    setRecipient(state, recip){
+      state.recipient = recip
+    },
+    removeRecipient(state, id){
+      var index = state.recipients.findIndex((recip) => recip.id == id)
+      state.recipients.splice(index, 1)
+    }
   },
   getters: {},
   actions: {
@@ -38,5 +52,50 @@ export default {
         .then(() => dispatch('getList'))
         .catch(console.error);
     },
+    async getMailRecipients({commit}){
+      await axios.get('/api/mail/mailrecipients')
+      .then((result) => {
+        commit("setRecipients", result.data)
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+    },
+    async getMailRecipientById({commit}, id){
+      await axios.get('/api/mail/mailrecipient/' + id)
+      .then((result) => {
+        commit("setRecipient", result.data)
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+    },
+    async addMailRecipient({commit}, rec){
+      await axios.post('/api/mail/mailrecipient', rec)
+      .then((result) => {
+        console.log(result);
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+    },
+    async updateMailRecipient({commit}, rec){
+      await axios.put('/api/mail/mailrecipients', rec)
+      .then((result) => {
+        console.log(result);
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+    },
+    async deleteMailRecipient({commit}, id){
+      await axios.delete('/api/mail/mailrecipient/'+ id)
+      .then(() => {
+        commit("removeRecipient", id)
+      })
+      .catch((e) => {
+        console.log(e);
+      })
+    }
   },
 };