Univate.2 Admin pages for Commercial & Residential

src/components/admin/property/propertyAdmin.vue

+<template>
+  <div>
+    <main id="main">
+      <propertyList />
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import propertyList from "./propertyList";
+export default {
+  components: {
+    propertyList
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/admin/property/propertyList.vue

+<template>
+  <section id="contact2">
+    <div class="container">
+      <div class="section-header">
+        <h1>Property Admin</h1>
+      </div>
+      <div class="row">
+        <div class="col-lg-6 offset-3">
+          <input class="form-control uniSelect" type="text" placeholder="SEARCH" v-model="filter" />
+        </div>
+      </div>
+      <div class="row">
+        <br />
+      </div>
+      <div class="row">
+        <div class="col-lg-12">
+          <table class="table table-striped table-responsive">
+            <thead>
+              <tr>
+                <th scope="col">Owner</th>
+                <th scope="col">Reference</th>
+                <th scope="col">Property</th>
+                <th scope="col">Unit</th>
+                <th scope="col">Size</th>
+                <th scope="col">Price Ex VAT</th>
+                <th scope="col">Region</th>
+                <th scope="col">Town</th>
+                <th scope="col">Suburb</th>
+                <th scope="col">Status</th>
+                <th scope="col">Type</th>
+                <th scope="col">Publish</th>
+                <th scope="col">Edit</th>
+                <th scope="col">Delete</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(item, i) in FilteredProperties" :key="i">
+                <td>{{ item.owner }}</td>
+                <td>{{ item.reference }}</td>
+                <td>{{ item.property }}</td>
+                <td>{{ item.unit }}</td>
+                <td>{{ item.size }}</td>
+                <td>{{ item.price | toCurrency }}</td>
+                <td>{{ item.region }}</td>
+                <td>{{ item.town }}</td>
+                <td>{{ item.suburb }}</td>
+                <td>{{ item.status }}</td>
+                <td>{{ item.type }}</td>
+                <td v-if="!item.isPublished">
+                  <a v-on:click="Publish(item)">
+                    <img src="../../../../public/img/icons/Upload.png" height="25" width="25" />
+                  </a>
+                </td>
+                <td v-else>
+                  <a v-on:click="Unpublish(item)">
+                    <img
+                      src="../../../../public/img/icons/Download-grey.png"
+                      height="25"
+                      width="25"
+                    />
+                  </a>
+                </td>
+                <td>
+                  <a v-on:click="Edit(item)">
+                    <img src="../../../../public/img/icons/Edit.png" height="25" width="25" />
+                  </a>
+                </td>
+                <td>
+                  <a v-on:click="Delete(item)">
+                    <img src="../../../../public/img/icons/delete.png" height="25" width="25" />
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div v-if="wait" id="preloader"></div>
+    </div>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from "vuex";
+import Log from "../../../assets/Log";
+import _ from "lodash";
+
+export default {
+  data() {
+    return {
+      filter: undefined,
+      userId: Log.getUser().id,
+      wait: true,
+    };
+  },
+  methods: {
+    ...mapActions("propertyList", [
+      "getAdminProperties",
+      "deleteProperty",
+      "publishProperty",
+      "unpublishProperty",
+    ]),
+    Publish(item) {
+      this.publishProperty(item);
+    },
+    Unpublish(item) {
+      this.unpublishProperty(item);
+    },
+    Edit(item) {
+      this.$router.push(`/property/edit/${item.id}`);
+    },
+    Delete(item) {
+      this.deleteProperty(item.id);
+    },
+  },
+  computed: {
+    ...mapState("propertyList", ["properties"]),
+    FilteredProperties() {
+      if (this.filter) {
+        const list = _.filter(this.properties, (item) =>
+          Object.values(item).some(
+            (i) =>
+              JSON.stringify(i)
+                .toLowerCase()
+                .indexOf(this.filter.toLowerCase()) > -1
+          )
+        );
+        return list;
+      } else {
+        return this.properties;
+      }
+    },
+  },
+  mounted() {
+    this.wait = true;
+    this.getAdminProperties(this.userId).then((fulfuilled) => {
+      this.wait = false;
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.refbyAgent {
+  will-change: transform;
+  transition: height 500ms;
+  height: 0px;
+}
+
+.refbyAgent--clicked {
+  height: 150px;
+}
+
+.spacebanked1 {
+  will-change: transform;
+  transition: height 500ms;
+  height: 0px;
+}
+
+.spacebanked1--clicked {
+  height: 150px;
+}
+
+.custom-file-label {
+  border-width: 2px;
+  border-color: rgb(27, 117, 187);
+  margin-bottom: 20px;
+}
+
+.custom-file-label::after {
+  border-left: none;
+  border-bottom: solid;
+  border-width: 2px;
+  border-color: rgb(27, 117, 187);
+  font-family: "Muli";
+}
+</style>

src/components/property/editProperty/editProperty.vue

+<template>
+  <div>
+    <main id="main">
+      <section id="services">
+        <div class="container">
+          <div class="col-12">
+            <h1>Property Details</h1>
+          </div>
+          <main id="main" style="margin-top:-20px">
+            <div class="container pt-5 pb-5">
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <select
+                    class="form-control uniSelect"
+                    v-model="property.propertyUsageType"
+                    @change="UpdateUsageType"
+                  >
+                    <option>Commercial</option>
+                    <option>Residential</option>
+                  </select>
+                </div>
+                <div class="col-md-6">
+                  <select class="form-control uniSelect" v-model="property.statusString">
+                    <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
+                  </select>
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <div v-if="!property.propertyName">
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY NAME</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="propertyName"
+                    v-model="property.propertyName"
+                  />
+                </div>
+                <div class="col-md-6">
+                  <div v-if="!property.propertyRef">
+                    <label for="propertyName" class="uniSelectLabel">PROPERTY REFERENCE</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="propertyRef"
+                    v-model="property.propertyRef"
+                  />
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <select
+                    class="form-control uniSelect"
+                    name="propertyType"
+                    id="propertyType"
+                    v-model="property.propertyTypeId"
+                  >
+                    <option value="0">Please select type *</option>
+                    <option
+                      v-for="item in propertyTypes"
+                      :value="item.id"
+                      :key="item.id"
+                    >{{ item.description }}</option>
+                  </select>
+                </div>
+                <div v-if="property.propertyUsageType === 'Commercial'" class="col-md-2">
+                  <div v-if="!property.unit">
+                    <label for="unit" class="uniSelectLabel">UNIT</label>
+                  </div>
+                  <input
+                    class="form-control uniInput"
+                    type="text"
+                    name="unit"
+                    id="unit"
+                    v-model="property.unit"
+                  />
+                </div>
+              </div>
+              <div class="row my-3">
+                <div class="col-md-6">
+                  <mapSection
+                    v-on:map-location="updateLocation"
+                    :savedCoords="property.propertCoords"
+                  />
+                  <input
+                    type="checkbox"
+                    v-model="property.showAddress"
+                    style="margin-right: 10px; margin-top: 10px;"
+                  />
+                  <label>Show address on listing</label>
+                </div>
+                <div class="col-md-6">
+                  <div class="row">
+                    <div class="col-md-6">
+                      <div v-if="property.price < 1">
+                        <label
+                          for="price"
+                          class="uniSelectLabel"
+                          style="text-transform:uppercase; margin-left:17px; background-color:white"
+                        >{{ property.salesTypeString }} Price</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="number"
+                        name="price"
+                        id="price"
+                        v-model="property.price"
+                      />
+                    </div>
+                    <div v-if="property.salesTypeString === 'Rental'" class="col-md-6">
+                      <select
+                        class="form-control uniSelect"
+                        name="propertyType"
+                        id="propertyType"
+                        v-model="property.pricePer"
+                      >
+                        <option value>Please select</option>
+                        <option value="Month">Month</option>
+                        <option value="Day">Day</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <input
+                        type="date"
+                        class="form-control uniInput"
+                        name="date"
+                        v-model="property.dateAvailable"
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <br />
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.streetNumber">
+                        <label for="streetNumber" class="uniSelectLabel">STREET NUMBER</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="streetNumber"
+                        id="unit"
+                        v-model="property.streetNumber"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.streetName">
+                        <label for="streetName" class="uniSelectLabel">STREET NAME</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="streetName"
+                        id="unit"
+                        v-model="property.streetName"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.suburb">
+                        <label for="suburb" class="uniSelectLabel">SUBURB</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="suburb"
+                        id="unit"
+                        v-model="property.suburb"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.city">
+                        <label for="city" class="uniSelectLabel">CITY</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="city"
+                        id="unit"
+                        v-model="property.city"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.province">
+                        <label for="province" class="uniSelectLabel">PROVINCE</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="province"
+                        id="unit"
+                        v-model="property.province"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.postalCode">
+                        <label for="postalCode" class="uniSelectLabel">POSTAL CODE</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="postalCode"
+                        id="unit"
+                        v-model="property.postalCode"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <div v-if="!property.country">
+                        <label for="country" class="uniSelectLabel">COUNTRY</label>
+                      </div>
+                      <input
+                        class="form-control uniInput"
+                        type="text"
+                        name="country"
+                        id="unit"
+                        v-model="property.country"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                  <div class="row my-3">
+                    <div class="col-md-12">
+                      <button
+                        type="button"
+                        @click="clearAddress()"
+                        class="btn-solid-blue"
+                      >Clear Address</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12">
+                  <label for="Property Description" style="font-family:'muli'">Description:</label>
+                  <vue-editor v-model="property.description" :editor-toolbar="customToolbar" />
+                  <br />
+                  <p>
+                    * A listing fee of R380 including VAT is payable to list your Property on the
+                    Uni-Vate website
+                  </p>
+                </div>
+              </div>
+              <div class="row">
+                <div class="section-header">
+                  <h2>Property Information</h2>
+                </div>
+                <div class="row mb-3" v-for="item in propertyFields" :key="item.id">
+                  <div class="col-md-6" v-for="field in item.fields" :key="field.id">
+                    <div v-if="field.type === 'number'">
+                      {{ field.name }}
+                      <input
+                        type="number"
+                        class="form-control uniInput"
+                        v-model="field.value"
+                      />
+                    </div>
+                    <div v-else class="display:none"></div>
+                    <div v-if="field.type === 'yesno'">
+                      {{ field.name }}
+                      <input type="checkbox" v-model="field.value" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-12">
+                  <div class="section-header">
+                    <h2>Media</h2>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group row">
+                <div class="col-md-12">
+                  <label class="uniSelectLabel">Virtual Tour (URL)</label>
+                  <div class="input-group-prepend">
+                    <input
+                      class="form-control uniInput"
+                      type="link"
+                      name="vtlink"
+                      id="vtlink"
+                      v-model="property.virtualTour"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-md-12">
+                  <label class="uniSelectLabel">Video (URL)</label>
+                  <div class="input-group-prepend">
+                    <input
+                      class="form-control uniInput"
+                      type="link"
+                      name="vlink"
+                      id="vlink"
+                      v-model="property.video"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row mt-3">
+                <div class="col-md-6">
+                  <div class="content-header">
+                    <h2>Images</h2>
+                  </div>
+
+                  <div class="input-group-prepend"></div>
+                </div>
+              </div>
+              <ImageLoad
+                :savedImaged="propertyImages"
+                :loadedImages="loadedImages"
+                @DefaultImage="UpdateDefaultImage"
+              />
+              <button v-if="!wait" type="button" @click="SubmitData()" class="btn-solid-blue">Save</button>
+              <button v-if="!wait" type="button" @click="Close()" class="btn-solid-blue">Close</button>
+              <div v-if="showPropertyTypeError">
+                <p
+                  class="alert myError"
+                >Missing fields. Please fill in all required fields. Marked with *</p>
+              </div>
+              <div v-if="!addressSet">
+                <p class="alert myError">Please enter an address.</p>
+              </div>
+              <div v-if="wait" id="preloader"></div>
+            </div>
+          </main>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script>
+/* eslint-disable */
+import { mapState, mapActions } from "vuex";
+import mapSection from "../mapSection";
+import ImageLoad from "../propertyImage";
+import _ from "lodash";
+
+export default {
+  components: {
+    mapSection,
+    ImageLoad,
+  },
+  data() {
+    return {
+      addressSet: true,
+      defaultImage: 0,
+      images: [],
+      wait: false,
+    };
+  },
+  methods: {
+    ...mapActions("property", [
+      "getProperty",
+      "getPropertyTypes",
+      "getPropertyFields",
+      "updateProperty",
+    ]),
+    clearAddress() {
+      this.addressSet = false;
+      this.property.streetNumber = undefined;
+      this.property.streetName = undefined;
+      this.property.suburb = undefined;
+      this.property.city = undefined;
+      this.property.province = undefined;
+      this.property.country = undefined;
+      this.property.postalCode = undefined;
+      this.property.addressUrl = undefined;
+      this.property.propertCoords = undefined;
+    },
+    UpdateUsageType() {
+      this.getPropertyTypes(this.property.propertyUsageType);
+      this.getPropertyFields(this.property.propertyUsageType);
+    },
+    UpdateDefaultImage(item) {
+      this.defaultImage = item;
+    },
+    loadedImages(values) {
+      this.images = values;
+    },
+    SubmitData() {
+      this.wait = true;
+      this.property.propertyFields = this.propertyFields;
+
+      if (this.images.length > 0) {
+        this.property.newImages = [];
+      }
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < this.images.length; i++) {
+        let setAsDefault = false;
+        if (i === this.defaultImage) {
+          setAsDefault = true;
+        }
+        this.property.newImages.push({
+          image: this.images[i],
+          isDefault: setAsDefault,
+        });
+      }
+
+      this.updateProperty(this.property).then((fulfilled) => {
+        this.$router.push("/PropertyAdmin");
+      });
+    },
+    Close() {
+      this.$router.push("/PropertyAdmin");
+    },
+    updateLocation(place) {
+      this.addressSet = true;
+      this.property.streetNumber = place.streetNumber;
+      this.property.streetName = place.streetName;
+      this.property.suburb = place.suburb;
+      this.property.city = place.city;
+      this.property.province = place.province;
+      this.property.country = place.country;
+      this.property.postalCode = place.postalCode;
+      this.property.addressUrl = place.url;
+      this.property.propertCoords = place.coords;
+    },
+  },
+  mounted() {
+    this.wait = false;
+    this.getProperty(this.$route.params.id);
+  },
+  computed: {
+    ...mapState("property", [
+      "property",
+      "propertyTypes",
+      "propertyImages",
+      "propertyFields",
+      "statuses",
+    ]),
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/components/property/mapSection.vue

   computed: {
     google: gmapApi,
   },
+  props: {
+    savedCoords: { default: "" },
+  },
   data() {
     return {
       place: null,
       });
     },
   },
+  watch: {
+    savedCoords: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          var array = val.split(",");
+          this.mapCenter = {
+            lat: Number(array[0]),
+            lng: Number(array[1]),
+          };
+          this.mapZoom = 17;
+        }
+      },
+    },
+  },
 };
 </script>
 

src/components/property/propertyImage.vue

         <br />
         <!-- <span class="input-group-text" align="center" style="width:150px" @click="removeImage(key)">
           <eva-icon name="trash-2-outline" fill="#60CBEB"></eva-icon>Delete
-        </span> -->
-        <button align="center" class="imageDeleteButton" @click="removeImage(key)">
+        </span>-->
+        <button align="center" class="imageDeleteButton" @click="removeImage(i)">
           <i class="fa fa-trash"></i>
         </button>
       </div>
   props: {
     loadedImages: Function,
     mayEdit: { type: Boolean, default: () => true },
-    allowMultiple: { type: Boolean, default: () => true }
+    allowMultiple: { type: Boolean, default: () => true },
+    savedImaged: { type: Array, default: () => [] },
   },
   data() {
     return {
       images: {},
       image: [],
-      imagesDefault: []
+      imagesDefault: [],
     };
   },
   // Commented out for now.
         const reader = new FileReader();
         var vm = this;
 
-        reader.onload = e => {
+        reader.onload = (e) => {
           vm.image.push(e.target.result);
         };
         reader.readAsDataURL(file[i]);
         }
         this.$emit("DefaultImage", index);
       }
-    }
-  }
+    },
+  },
+  watch: {
+    savedImaged: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val) {
+          this.image = val;
+        }
+      },
+    },
+  },
 };
 </script>
 

src/components/shared/navBar.vue

                       <li>
                         <router-link to="/status/changeLogPage">Changes Logs</router-link>
                       </li>
+                      <li>
+                        <router-link to="/PropertyAdmin">Property Admin</router-link>
+                      </li>
                       <li>
                         <router-link to="/userDefinedGroups/list"
                           >Property User Defined Groups</router-link

src/components/timeshare/resort/unit/summarySection.vue

             <tr>
               <td>{{ week ? week.unitNumber : "" }}</td>
               <td>{{ week ? week.weekNumber : "" }}</td>
-              <td>{{ week ? week.arrivalDate : "" }}</td>
+              <td v-if="week.arrivalDate === '0001-01-01T00:00:00'"></td>
+              <td v-else>{{ week.arrivalDate | toDate }}</td>
               <td>{{ week ? week.bedrooms : "" }}</td>
               <td>{{ week ? week.season : "" }}</td>
-              <td>R{{ week ? week.levyAmount : "" }}</td>
-              <td>R{{ week ? week.sellPrice : "" }}</td>
+              <td>{{ week ? week.levyAmount : "" | toCurrency }}</td>
+              <td>{{ week ? week.sellPrice : "" | toCurrency }}</td>
             </tr>
           </tbody>
         </table>

src/router/index.js

 
 import PropertySearch from "../components/property/propertySearchPage.vue";
 import PropertyPage from "../components/property/propertyPage.vue";
-import PropertyEdit from "../components/property/propertyeditPage.vue";
+import PropertyEdit from "../components/property/editProperty/editProperty.vue";
 
 import PropertyCreate from "../components/property/propertyCreate.vue";
 import CommercialCreate from "../components/property/commercial/createProperty/commercialCreate.vue";
 import ResidentialCreate from "../components/property/residential/createProperty/residentialCreate.vue";
 import ListProperty from "../components/property/ListProperty/listPropertyPage.vue";
 
-import PropertyList from "../components/property/propertyList.vue";
+import PropertyAdminList from "../components/admin/property/propertyAdmin.vue";
 import PropertyTypeList from "../components/admin/property/propertyTypeList.vue";
 import PropertyType from "../components/admin/property/propertyTypeEdit.vue";
 import UserDefinedGroups from "../components/admin/property/userDefinedGroupsPage.vue";
       component: PropertyCreate
     },
     {
-      path: "/property/edit",
+      path: "/property/edit/:id",
       name: "PropertyEdit",
       component: PropertyEdit
     },
     {
-      path: "/properties",
-      name: "PropertyListAdmin",
-      component: PropertyList
+      path: "/PropertyAdmin",
+      name: "PropertyAdminList",
+      component: PropertyAdminList
     },
     {
       path: "/propertyTypes/list",

src/store/modules/property/property.js

 import axios from "axios";
 import { Date } from "core-js";
+import { result } from "lodash";
+import { resolve } from "core-js/fn/promise";
 
 export default {
   namespaced: true,
   state: {
+    statuses: [],
     property: {},
     propertyImages: [],
     propertyTypes: [],
     },
     clearPropertyImages(state) {
       state.propertyImages = [];
+    },
+    setStatuses(state, stats) {
+      state.statuses = stats;
     }
   },
   getters: {},
   actions: {
-    getProperty({ commit }, id) {
+    getStatuses({ commit }) {
       axios
-        .get(`/api/Property/getDetailed/${id}`)
-        .then(result => commit("setProperty", result.data))
-        .catch(console.error);
+        .get("/api/property/GetPropertyStatuses")
+        .then(result => commit("setStatuses", result.data));
+    },
+    getProperty({ commit, dispatch }, id) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/Property/getDetailed/${id}`)
+          .then(result => {
+            commit("setProperty", result.data);
+            dispatch("getPropertyTypes", result.data.propertyUsageType);
+            dispatch("getPropertyImages", result.data.id);
+            dispatch("getSavedPropertyFields", result.data.id);
+            dispatch("getStatuses");
+            resolve();
+          })
+          .catch(error => reject(new Error(error.message)));
+      });
     },
     getPropertyImages({ commit }, id) {
       axios
         .get(`/api/propertyFields/PropertyType/${propertyType}`)
         .then(response => commit("setPropertyFields", response.data));
     },
+    getSavedPropertyFields({ commit }, id) {
+      axios
+        .get(`/api/PropertyFields/GetSavedPropertyUserFields/${id}`)
+        .then(result => commit("setPropertyFields", result.data));
+    },
     getPropertySavedOverviewFields({ commit }, id) {
       axios
         .get(`/api/PropertyFields/GetSavedValues/Residential/Property Overview/${id}`)
         .get(`/api/PropertyImage/GetProperySavedImages/${id}`)
         .then(result => commit("setPropertyImages", result.data))
         .catch(console.error);
+    },
+    updateProperty({ commit }, property) {
+      return new Promise((resolve, reject) => {
+        axios
+          .put("/api/property", property)
+          .then(response => {
+            resolve();
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
     }
   }
 };

src/store/modules/property/propertyAdmin.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
     userDefinedGroups: [],
     userDefinedGroup: {
       id: 0,
-      description: '',
+      description: "",
       usageType: 0,
       rank: 0,
-      fields: [],
+      fields: []
     },
     userFields: [],
     userField: {
       id: 0,
       groupId: 0,
-      fieldName: '',
-      fieldType: '',
-      rank: 0,
-    },
+      fieldName: "",
+      fieldType: "",
+      rank: 0
+    }
   },
   mutations: {
     setUserDefinedGroups(state, groups) {
     clearUserGroup(state) {
       state.userDefinedGroup = {
         id: 0,
-        description: '',
+        description: "",
         usageType: 0,
-        rank: 0,
+        rank: 0
       };
     },
     clearUserField(state) {
       state.userField = {
         id: 0,
-        fieldName: '',
-        fieldType: '',
-        rank: 0,
+        fieldName: "",
+        fieldType: "",
+        rank: 0
       };
     },
     clearUserFields(state) {
       state.userFields = [];
-    },
+    }
   },
   getters: {},
   actions: {
     getUserDefinedGroups({ commit }) {
       axios
-        .get('/api/UserDefinedGroup')
-        .then(result => commit('setUserDefinedGroups', result.data))
+        .get("/api/UserDefinedGroup")
+        .then(result => commit("setUserDefinedGroups", result.data))
         .catch(console.error);
     },
     getUserDefinedGroup({ commit }, id) {
       axios
         .get(`/api/UserDefinedGroup/${id}`)
-        .then(result => commit('setUserDefinedGroup', result.data))
+        .then(result => commit("setUserDefinedGroup", result.data))
         .catch(console.error);
     },
     getUserFields({ commit }, groupId) {
       axios
         .get(`/api/UserDefinedField/group/${groupId}`)
-        .then(result => commit('setUserFields', result.data))
+        .then(result => commit("setUserFields", result.data))
         .catch(console.error);
     },
     getUserField({ commit }, id) {
       axios
         .get(`/api/UserDefinedField/${id}`)
-        .then(result => commit('setUserField', result.data))
+        .then(result => commit("setUserField", result.data))
         .catch(console.error);
     },
     saveUserDefinedGroup({ commit }, item) {
       axios
-        .post('/api/UserDefinedGroup', item)
-        .then(response => commit('addUserDefinedGroups', response.data))
+        .post("/api/UserDefinedGroup", item)
+        .then(response => commit("addUserDefinedGroups", response.data))
         .catch(console.error);
     },
     updateUserDefinedGroup({ commit }, item) {
       axios
-        .put('/api/UserDefinedGroup', item)
-        .then(response => commit('updateUserDefinedGroups', response.data))
+        .put("/api/UserDefinedGroup", item)
+        .then(response => commit("updateUserDefinedGroups", response.data))
         .catch(console.error);
     },
     saveUserField({ commit }, item) {
       axios
-        .post('/api/UserDefinedField', item)
-        .then(response => commit('addUserField', response.data))
+        .post("/api/UserDefinedField", item)
+        .then(response => commit("addUserField", response.data))
         .catch(console.error);
     },
     updateUserField({ commit }, item) {
       axios
-        .put('/api/UserDefinedField', item)
-        .then(response => commit('updateUserFields', response.data))
+        .put("/api/UserDefinedField", item)
+        .then(response => commit("updateUserFields", response.data))
         .catch(console.error);
     },
     deleteUserDefinedGroup({ commit }, id) {
       axios
         .delete(`/api/UserDefinedGroup/${id}`)
-        .then(result => commit('removeUserDefinedGroup', id))
+        .then(result => commit("removeUserDefinedGroup", id))
         .catch(console.error);
     },
     deleteUserField({ commit }, id) {
       axios
         .delete(`/api/UserDefinedField/${id}`)
-        .then(result => commit('removeUserField', id))
+        .then(result => commit("removeUserField", id))
         .catch(console.error);
     },
     clearUserGroup({ commit }) {
-      commit('clearUserGroup');
+      commit("clearUserGroup");
     },
     clearUserField({ commit }) {
-      commit('clearUserField');
+      commit("clearUserField");
     },
     clearUserFields({ commit }) {
-      commit('clearUserFields');
-    },
-  },
+      commit("clearUserFields");
+    }
+  }
 };

src/store/modules/property/propertyLists.js

-import axios from 'axios';
+import axios from "axios";
 
 export default {
   namespaced: true,
   state: {
     properties: [],
-    propertiesLive: [],
+    propertiesLive: []
   },
   mutations: {
     setProperties(state, properties) {
       state.properties = properties;
     },
     removeProperties(state, id) {
-      state.properties.pop(state.properties.find(item => item.id === id));
+      let index = 0;
+      for (let i = 0; i < state.properties.length; i++) {
+        if (state.properties[i].id == id) {
+          index = i;
+        }
+      }
+      state.properties.splice(index, 1);
     },
     updatePropertyPublish(state, curItem) {
-      state.properties.find(item => item.id === curItem.id).publish = 'Yes';
+      state.properties.find(item => item.id === curItem.id).isPublished = true;
     },
     updatePropertyUnpublish(state, curItem) {
-      state.properties.find(item => item.id === curItem.id).publish = 'No';
+      state.properties.find(item => item.id === curItem.id).isPublished = false;
     },
     setLiveProperties(state, items) {
       state.propertiesLive = items;
-    },
+    }
   },
   getters: {},
   actions: {
+    getAdminProperties({ commit }, userId) {
+      return new Promise((resolve, reject) => {
+        axios
+          .get(`/api/property/GetAdminProperties/${userId}`)
+          .then(result => {
+            commit("setProperties", result.data);
+            resolve();
+          })
+          .catch(() => {
+            reject(console.error);
+          });
+      });
+    },
     getProperties({ commit }, item) {
       console.log(`/api/property/GetPropertyList/${item}`);
       axios
         .get(`/api/property/GetPropertyList/${item}`) // .get(`/api/property/${item.propertyType}/${item.user}`)
-        .then(result => commit('setProperties', result.data))
+        .then(result => commit("setProperties", result.data))
         .catch(console.error);
     },
     getLiveProperties({ commit }) {
       axios
-        .get('/api/property/GetLivePropertyList') // .get(`/api/property/${item.propertyType}/${item.user}`)
-        .then(result => commit('setLiveProperties', result.data))
+        .get("/api/property/GetLivePropertyList") // .get(`/api/property/${item.propertyType}/${item.user}`)
+        .then(result => commit("setLiveProperties", result.data))
         .catch(console.error);
     },
     deleteProperty({ commit }, id) {
       axios
         .delete(`/api/property/${id}`)
-        .then(commit('removeProperties', id))
+        .then(commit("removeProperties", id))
         .catch(console.error);
     },
     publishProperty({ commit }, item) {
       axios
-        .put('/api/property/publishproperty', item)
-        .then(result => commit('updatePropertyPublish', item))
+        .put("/api/property/publishproperty", item)
+        .then(result => commit("updatePropertyPublish", item))
         .catch(console.error);
     },
     unpublishProperty({ commit }, item) {
       axios
-        .put('/api/property/unpublishproperty', item)
-        .then(result => commit('updatePropertyUnpublish', item))
+        .put("/api/property/unpublishproperty", item)
+        .then(result => commit("updatePropertyUnpublish", item))
         .catch(console.error);
-    },
-  },
+    }
+  }
 };