Property Banners - changes

src/App.vue

   background-color: #ff8344;
   color: white;
 }
+.redText {
+  background-color: #eb5252;
+  color: white;
+}
+.greenText {
+  background-color: #43e243;
+  color: white;
+}
 .noWeeks {
   background-color: #ff4444;
 }

src/components/admin/property/propertyList.vue

       }
     });
   },
-  // watch: {
-  //   sortKey: {
-  //     immediate: true,
-  //     handler(val, oldVal) {
-  //       return this.FilteredProperties;
-  //     },
-  //   },
-  // },
+  watch: {
+    filter: {
+      immediate: true,
+      handler(val, oldVal) {
+        if (val != oldVal) {
+          this.currentPage = 1;
+        }
+      },
+    },
+  },
 };
 </script>
 

src/components/property/editProperty/editProperty.vue

                     v-model="property.statusString"
                     @change="StatusChanged"
                   >
-                    <option v-for="(item, i) in statuses" :key="i">{{ item }}</option>
+                    <option v-for="(item, i) in Statuses" :key="i">{{ item }}</option>
                   </select>
                 </div>
               </div>
                       </select>
                     </div>
                   </div>
-                  <div class="row my-3">
+                  <div v-if="!property.isSale" class="row my-3">
                     <div class="col-md-12">
+                      Date Available
                       <input
                         type="date"
                         class="form-control uniInput"
                       />
                     </div>
                   </div>
+                  <div
+                    class="row my-3"
+                    v-if="property.statusString === 'Sold' || property.statusString ==='Rented Out'"
+                  >
+                    <div class="col-md-12">
+                      Hide Property After
+                      <input
+                        type="date"
+                        class="form-control uniInput"
+                        name="date"
+                        v-model="property.cutOffDisplayDateString"
+                      />
+                    </div>
+                  </div>
+
                   <div class="row my-3">
                     <br />
                   </div>
       }
       return list;
     },
+    Statuses() {
+      const list = [];
+      for (let i = 0; i < this.statuses.length; i++) {
+        if (this.property.isSale && this.statuses[i] !== "Rented Out") {
+          list.push(this.statuses[i]);
+        }
+        if (!this.property.isSale && this.statuses[i] !== "Sold") {
+          list.push(this.statuses[i]);
+        }
+      }
+      return list;
+    },
   },
 };
 </script>

src/components/property/propertyCard.vue

                   <h3>{{ currentProperty.displayPrice }}</h3>
                   <div>
                     <img
-                      style="max-height:165px; object-fit: cover;"
+                      style="height:165px; object-fit: cover;"
                       :src="currentProperty.displayImage"
                       alt
                     />
                   {{ currentProperty.propertyReference }}
                 </p>
                 <p
-                  v-if="!currentProperty.isSale"
-                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
                 >
-                  <strong>{{ currentProperty.available }}</strong>
-                </p>
-                <p
-                  v-if="currentProperty.isSale && currentProperty.hasPendingOffer"
-                  class="pendingOffer"
-                >
-                  <strong>{{ currentProperty.available }}</strong>
+                  <strong>{{ currentProperty.displayText }}</strong>
                 </p>
               </div>
             </router-link>
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
                   <img
-                    style="max-height:165px; object-fit: cover;"
+                    style="height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
                     alt
                   />
                   <strong>Property Reference</strong>
                   {{ currentProperty.propertyReference }}
                 </p>
+                <p
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
+                >
+                  <strong>{{ currentProperty.displayText }}</strong>
+                </p>
               </div>
             </router-link>
           </div>
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" }
+    salesType: { type: String, default: "Rent" },
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/property/propertyCardSearch.vue

                 <div class="feature-top pt-3 mb-2">
                   <h3 style="color:white !important">{{ currentProperty.displayPrice }}</h3>
                   <img
-                    style="max-height:165px; object-fit: cover;"
+                    style="height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
                     alt
                   />
                   {{ currentProperty.propertyReference }}
                 </p>
                 <p
-                  v-if="!currentProperty.isSale"
-                  :class="[currentProperty.hasPendingOffer ? 'pendingOffer' : 'normalText']"
+                  v-if="currentProperty.displayText != ''"
+                  :class="[currentProperty.displayColor === 'green' ? 'greenText' : currentProperty.displayColor === 'orange' ? 'pendingOffer' : currentProperty.displayColor === 'red' ? 'redText' : 'normalText']"
                 >
-                  <strong>{{ currentProperty.available }}</strong>
-                </p>
-                <p
-                  v-if="currentProperty.isSale && currentProperty.hasPendingOffer"
-                  class="pendingOffer"
-                >
-                  <strong>{{ currentProperty.available }}</strong>
+                  <strong>{{ currentProperty.displayText }}</strong>
                 </p>
               </div>
             </router-link>
                 <div class="feature-top pt-3 mb-2">
                   <h3>{{ currentProperty.displayPrice }}</h3>
                   <img
-                    style="max-height:165px; object-fit: cover;"
+                    style="height:165px; object-fit: cover;"
                     :src="currentProperty.displayImage"
                     alt
                   />
   props: {
     properties: { type: Array, default: () => [] },
     showSort: { type: Boolean, default: true },
-    salesType: { type: String, default: "Rent" }
+    salesType: { type: String, default: "Rent" },
   },
   methods: {
     sortHighPrice() {
       }
 
       return this.properties.sort(compare);
-    }
-  }
+    },
+  },
 };
 </script>