Field formating

src/components/property/propertyUserField.vue

@@ -2,27 +2,31 @@
   <div class="form-group row">
     <div class="col-md-4 mb-2" v-for="(currentField, i) in fields" :key="i">
       <label>{{ currentField.name }}</label>
-      <input
-        v-if="currentField.type === 'number'"
-        class="form-control form-control-lg form-control-a"
-        type="number"
-        name="currentField.name"
-        id="currentField.id"
-        v-model="setFields[i]"
-        @change="UpdateSetFields(currentField, i)"
-      />
-      <input
-        v-if="currentField.type === 'text'"
-        class="form-control form-control-lg form-control-a"
-        type="text"
-        name="currentField.name"
-        id="currentField.id"
-        v-model="setFields[i]"
-        @change="UpdateSetFields(currentField, i)"
-      />
-      <div v-if="currentField.type === 'yesno'">
+      <div class="input-group-prepend">
+        <span class="input-group-text" style="color: #60CBEB">
+          <b>{{ GetFirstLetter(currentField.name) }}</b>
+        </span>
+        <input
+          v-if="currentField.type === 'number'"
+          class="form-control"
+          type="number"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
+        <input
+          v-if="currentField.type === 'text'"
+          class="form-control"
+          type="text"
+          name="currentField.name"
+          id="currentField.id"
+          v-model="setFields[i]"
+          @change="UpdateSetFields(currentField, i)"
+        />
         <select
-          class="form-control form-control-lg form-control-a"
+          v-if="currentField.type === 'yesno'"
+          class="form-control"
           id="currentField.id"
           v-model="setFields[i]"
           @change="UpdateSetFields(currentField, i)"
@@ -54,6 +58,19 @@ export default {
       };
       this.$emit('UpdateUserDefinedFields', item);
     },
+    GetFirstLetter(value) {
+      if (value) {
+        return value.slice(0, 1);
+      }
+      return '';
+    },
   },
+  // Testing editing
+  // created() {
+  //   this.setFields = [];
+  //   for (let i = 0; i < this.fields.length; i++) {
+  //     this.setFields[i] = this.fields[i].value;
+  //   }
+  // },
 };
 </script>

src/components/timeshare/resort/unitPage.vue

@@ -37,7 +37,7 @@
             <div class="title-box-d">
               <h3 class="title-d">Facilities</h3>
             </div>
-            <ul>
+            <ul v-if="resort.prUnitFacilities">
               <li v-for="(item, i) in resort.prUnitFacilities.split('\n')" :key="i">{{item}}</li>
             </ul>
           </div>
@@ -104,25 +104,23 @@
                     type="text"
                     id="levy"
                     name="levy"
-                    :value="week.currentLevy"
+                    :value="formatPrice(week.currentLevy)"
                     disabled
                   />
                 </div>
               </div>
               <div class="col-md-6">
                 <label for="price">Price</label>
-                <div class="card-box-ico">
-                  <span class="ion-money">R</span>
+                <div class="property-price d-flex justify-content-center foo">
+                  <div class="card-header-c d-flex">
+                    <div class="card-box-ico">
+                      <span class="ion-money">R</span>
+                    </div>
+                    <div class="card-title-c align-self-center">
+                      <h5 class="title-c">{{ formatPrice(week.price) }}</h5>
+                    </div>
+                  </div>
                 </div>
-
-                <input
-                  class="form-control"
-                  type="text"
-                  name="price"
-                  id="price"
-                  :value="week.price"
-                  disabled
-                />
               </div>
             </div>
             <br />
@@ -230,10 +228,13 @@ export default {
   methods: {
     ...mapActions('resort', ['initResort']),
     ...mapActions('week', ['initWeek']),
-  },
-  formatPrice(value) {
-    const val = (value / 1).toFixed(2);
-    return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+    formatPrice(value) {
+      if (value) {
+        const val = (value / 1).toFixed(2);
+        return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+      }
+      return '';
+    },
   },
 };
 </script>