Reffered By Agent Timeshare sell

src/components/admin/status/agentsUserManagementPage.vue

     </div>
     <div class="row">
       <div class="col-md-2 offset-1">
-        <button
-          @click="routerGoTo('/status/userManagementPage')"
-          type="button"
-          class="btn btn-b-n"
-        >Private Users</button>
+        <button @click="routerGoTo('/status/userManagementPage')" type="button" class="btn btn-b-n">
+          Private Users
+        </button>
       </div>
       <div class="col-md-2 offset-2">
         <button type="button" class="btn btn-b-n">Agents</button>
       </div>
       <div class="col-md-2 offset-2">
-        <button
-          type="button"
-          class="btn btn-b-n"
-          data-toggle="modal"
-          :data-target="'#myModal' + i"
-        >New Agent</button>
+        <button type="button" class="btn btn-b-n" data-toggle="modal" :data-target="'#myModal' + i">
+          New Agent
+        </button>
         <div :id="'myModal' + i" class="modal fade" role="dialog">
           <div class="modal-dialog modal-lg">
             <div class="modal-content">
 </template>
 
 <script>
-import { mapState, mapActions } from 'vuex';
-import axios from 'axios';
-import Agency from '../../user/registerAgencySection.vue';
+import { mapState, mapActions } from "vuex";
+import axios from "axios";
+import Agency from "../../user/registerAgencySection.vue";
 // import alert from '../../shared/alert.vue';
-import ListView from '../../shared/listView.vue';
+import ListView from "../../shared/listView.vue";
 
 export default {
-  name: 'agentManagementPage',
+  name: "agentManagementPage",
   components: {
     ListView,
-    Agency,
+    Agency
     // alert,
   },
   props: {
-    delete: Boolean,
+    delete: Boolean
   },
   data() {
     return {
-      columns: [
-        'id',
-        'name',
-        'surname',
-        'cellNumber',
-        'telephone',
-        'email',
-        'isDeleted',
-      ],
-      headers: ['', '', '', '', '', '', '', 'ResetPwd', 'Modify', 'Remove'],
-      item: {},
+      columns: ["id", "name", "surname", "cellNumber", "telephone", "email", "isDeleted"],
+      headers: ["", "", "", "", "", "", "", "ResetPwd", "Modify", "Remove"],
+      item: {}
     };
   },
   methods: {
-    ...mapActions('register', ['getAgents', 'deleteAgent']),
+    ...mapActions("register", ["getAgents", "deleteAgent"]),
     addNewAgent({ commit }) {
       axios
-        .post('/api/agent')
-        .then(result => commit('saveAgent', result.data))
+        .post("/api/agent")
+        .then(result => commit("saveAgent", result.data))
         .catch(console.error);
     },
     routerGoTo(goTo) {
     },
     Edit(item) {
       this.$router.push({
-        path: '/user/updateProfileInfo',
-        query: { id: item.id },
+        path: "/user/updateProfileInfo",
+        query: { id: item.id }
       });
     },
     Delete(item) {
       this.deleteAgent(item.id);
-    },
+    }
   },
   mounted() {
     this.getAgents();
   },
   computed: {
-    ...mapState('register', ['agents', 'removeAgent']),
-  },
+    ...mapState("register", ["agents", "removeAgent"])
+  }
 };
 </script>
 

src/components/misc/bondCaclculator.vue

 /* eslint-disable */
 export default {
   data() {
-    const formatter = new Intl.NumberFormat("en-US", {
-      minimumFractionDigits: 2
-    });
     return {
-      amount: "R" + formatter.format(100000.0),
-      deposit: "R" + formatter.format(0),
+      amount: "R1000000",
+      deposit: "R0",
       term: 10,
       rate: 7,
       isInputActive: false

src/components/timeshare/sell/contentSection.vue

                       name="agency"
                       v-model="sellItem.agencyId"
                     >
-                      <option v-for="(item, i) in agencies" :key="i" :value="item.id">{{
-                        item.agencyName
-                      }}</option>
+                      <option v-for="(item, i) in agencies" :key="i" :value="item.id">
+                        {{ item.agencyName }}</option
+                      >
                     </select>
                   </div>
                   <div class="col-md-6" v-if="refAgent">
                       id="agent"
                       name="agent"
                       v-model="sellItem.agentId"
+                      :disabled="!sellItem.agencyId"
                     >
-                      <option v-for="(item, i) in agents" :key="i" :value="item.id">{{
-                        item.name + " " + item.surname
-                      }}</option>
+                      <option
+                        v-for="(item, i) in displayNotDeletedAgents"
+                        :key="i"
+                        :value="item.id"
+                      >
+                        <div>
+                          {{ item.name + " " + item.surname }}
+                        </div>
+                      </option>
                     </select>
                   </div>
                 </div>
     },
     isLoggedIn() {
       return this.user && this.person;
+    },
+    displayNotDeletedAgents() {
+      var notDeletedArr = [];
+      this.agents.forEach(agent => {
+        if (!agent.isDeleted) {
+          if (agent.agencyId === this.sellItem.agencyId) {
+            notDeletedArr.push(agent);
+          }
+        }
+      });
+      return notDeletedArr;
     }
   },
   methods: {