Skip to content

Commit

Permalink
Add extra custom fields + support for Investr
Browse files Browse the repository at this point in the history
  • Loading branch information
FalkoJoseph committed Oct 19, 2021
1 parent 8083e8a commit 01a4df2
Show file tree
Hide file tree
Showing 11 changed files with 422 additions and 47 deletions.
23 changes: 23 additions & 0 deletions admin/css/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,3 +54,26 @@ input[type="file"] {
.attachment-info .thumbnail img {
border: none;
}

.toggle-checkbox {
@apply border-0 rounded-full h-6 w-6 m-0 min-w-0 shadow-sm !important;
}

input[type=checkbox]:checked::before {
@apply hidden;
}

.toggle-checkbox:checked {
@apply right-0 border-blue-500 !important;
}
.toggle-checkbox:checked + .toggle-label {
@apply bg-blue-500 !important;
}

td.has-error {
@apply text-red-500 !important;
}

td.has-error input {
@apply border-red-500 !important;
}
1 change: 1 addition & 0 deletions admin/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
@import "./form";
@import "./tooltip";
@import "./dialog";
@import "./wordpress";

/* Vendor */
@import "./wysiwyg";
Expand Down
7 changes: 7 additions & 0 deletions admin/css/wordpress.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
#wp-admin-bar-languages {
@apply hidden;
}

#adminmenu .wp-menu-image img {
@apply border-0 pl-2;
}
274 changes: 262 additions & 12 deletions admin/vue-components/Properties/Edit.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
<template>
<div class="wrap" v-if="estate.meta">
<!-- Notification -->
<!-- Success notification -->
<div
class="mx-0 mb-4 notice notice-success is-dismissible"
v-if="saveNotification"
>
<p>Changes saved successfully.</p>
</div>

<!-- Required notification -->
<div
class="mx-0 mb-4 notice notice-error is-dismissible"
v-if="errorNotification"
>
<p>Please fill in all the required fields.</p>
</div>

<ProjectHeading :estate="estate" :language="language"></ProjectHeading>

<!-- Tabs -->
Expand Down Expand Up @@ -90,6 +98,177 @@

<hr class="my-6" />

<p class="text-xl font-medium text-black">Additional price information</p>

<div class="flex items-center my-5 space-x-5">
<div class="relative inline-block w-12 mr-2 align-middle select-none">
<input
type="checkbox"
id="enable_additional_price"
v-model="form.enable_additional_price"
class="absolute block w-6 h-6 bg-white border-4 rounded-full appearance-none cursor-pointer toggle-checkbox"
/>
<label
for="enable_additional_price"
class="block h-6 overflow-hidden bg-gray-400 rounded-full cursor-pointer toggle-label"
></label>
</div>
<label for="enable_additional_price" class="text-gray-700">Enable</label>
</div>

<table v-if="form.enable_additional_price" class="form-table" role="presentation">
<tbody>
<tr>
<th scope="row">
<label for="gross_rent_profit">Gross rent profit</label>
</th>
<td :class="errors.gross_rent_profit ? 'has-error' : ''">
The gross rent profit of the property per month. (required)<br /><br />
<div class="flex items-center">
<div class="mr-2 text-2xl font-medium text-gray-600">&euro;</div>
<input
type="number"
id="gross_rent_profit"
v-model="form.gross_rent_profit"
class="small-text"
required
/>
</div>
</td>
</tr>
<tr v-if="estate.meta.estate.is_project">
<th scope="row">
<label for="price_construction">Price construction</label>
</th>
<td :class="errors.price_construction ? 'has-error' : ''">
Construction value of the property. (required)<br /><br />
<div class="flex items-center">
<div class="mr-2 text-2xl font-medium text-gray-600">&euro;</div>
<input
type="number"
id="price_construction"
v-model="form.price_construction"
class="regular-text"
required
/>
</div>
</td>
</tr>
<tr v-if="estate.meta.estate.is_project">
<th scope="row">
<label for="price_land">Price land</label>
</th>
<td :class="errors.price_land ? 'has-error' : ''">
Land value of the property. (required)<br /><br />
<div class="flex items-center">
<div class="mr-2 text-2xl font-medium text-gray-600">&euro;</div>
<input
type="number"
id="price_land"
v-model="form.price_land"
class="regular-text"
required
/>
</div>
</td>
</tr>
<tr v-if="estate.meta.estate.is_project">
<th scope="row">
<label for="ground_lease">Ground lease</label>
</th>
<td :class="errors.ground_lease ? 'has-error' : ''">
Ground lease value of the property. (required)<br /><br />
<div class="flex items-center">
<div class="mr-2 text-2xl font-medium text-gray-600">&euro;</div>
<input
type="number"
id="ground_lease"
v-model="form.ground_lease"
class="regular-text"
required
/>
</div>
</td>
</tr>
<tr>
<th scope="row">
<label for="enable_normal_vat">Type of VAT</label>
</th>
<td>
<div class="flex items-center mb-3 space-x-5">
<label for="enable_normal_vat" class="text-gray-700">Extended</label>
<div class="relative inline-block w-12 mr-2 align-middle select-none">
<input
type="checkbox"
id="enable_normal_vat"
v-model="form.enable_normal_vat"
class="absolute block w-6 h-6 bg-white border-4 rounded-full appearance-none cursor-pointer toggle-checkbox"
/>
<label
for="enable_normal_vat"
class="block h-6 overflow-hidden bg-gray-400 rounded-full cursor-pointer toggle-label"
></label>
</div>
<label for="enable_normal_vat" class="text-gray-700">Normal</label>
</div>
</td>
</tr>
<tr v-if="form.enable_normal_vat">
<th scope="row">
<label for="vat_total_price">VAT % on total price</label>
</th>
<td>
If you need to pay VAT on the total price of a property.<br /><br />
<div class="flex items-center">
<input
type="number"
id="vat_total_price"
v-model="form.vat_total_price"
class="small-text"
/>
<div class="ml-2 text-2xl font-medium text-gray-600">%</div>
</div>
</td>
</tr>
<tr v-if="!form.enable_normal_vat">
<th scope="row">
<label for="vat_construction">VAT % on construction</label>
</th>
<td>
If you need to pay VAT on the construction price of a property.<br /><br />
<div class="flex items-center">
<input
type="number"
id="vat_construction"
v-model="form.vat_construction"
class="small-text"
/>
<div class="ml-2 text-2xl font-medium text-gray-600">%</div>
</div>
</td>
</tr>
<tr v-if="!form.enable_normal_vat">
<th scope="row">
<label for="vat_registration_rights">Registration rights %</label>
</th>
<td>
If there is a specific percentage for the registration rights.<br /><br />
<div class="flex items-center">
<input
type="number"
id="vat_registration_rights"
v-model="form.vat_registration_rights"
class="small-text"
/>
<div class="ml-2 text-2xl font-medium text-gray-600">%</div>
</div>
</td>
</tr>
</tbody>
</table>

<hr class="my-6" />

<p class="text-xl font-medium text-black">Advanced customization</p>
<p class="max-w-xl mt-2 mb-6 text-sm">
Depending on whether your website theme supports it, you can customize
Expand Down Expand Up @@ -193,8 +372,15 @@ export default {
data() {
return {
saveNotification: false,
errorNotification: false,
estate: {},
id: false,
errors: {
gross_rent_profit: false,
price_construction: false,
price_land: false,
ground_lease: false,
},
form: {
tag: "",
style: "",
Expand All @@ -205,6 +391,15 @@ export default {
label: "",
action: "default",
},
enable_additional_price: false,
enable_normal_vat: true,
gross_rent_profit: false,
price_construction: false,
price_land: false,
ground_lease: false,
vat_total_price: false,
vat_construction: false,
vat_registration_rights: false,
},
language: window.sweepbrightLanguage,
};
Expand Down Expand Up @@ -259,6 +454,19 @@ export default {
if (this.estate.meta.custom_fields.cta.action) {
this.form.cta.action = this.estate.meta.custom_fields.cta.action;
}
// Additional price
this.form.enable_additional_price = this.estate.meta.custom_fields.enable_additional_price;
this.form.gross_rent_profit = this.estate.meta.custom_fields.gross_rent_profit;
this.form.price_construction = this.estate.meta.custom_fields.price_construction;
this.form.price_land = this.estate.meta.custom_fields.price_land;
this.form.ground_lease = this.estate.meta.custom_fields.ground_lease;
if (this.estate.meta.custom_fields.enable_normal_vat) {
this.form.enable_normal_vat = this.estate.meta.custom_fields.enable_normal_vat;
}
this.form.vat_total_price = this.estate.meta.custom_fields.vat_total_price;
this.form.vat_construction = this.estate.meta.custom_fields.vat_construction;
this.form.vat_registration_rights = this.estate.meta.custom_fields.vat_registration_rights;
}
},
getEstate() {
Expand All @@ -270,19 +478,61 @@ export default {
this.fillForm();
});
},
validateFields() {
let result = true;
this.errors.gross_rent_profit = false;
this.errors.price_construction = false;
this.errors.price_land = false;
this.errors.ground_lease = false;
if (this.form.enable_additional_price) {
if (!this.form.gross_rent_profit) {
result = false;
this.errors.gross_rent_profit = true;
}
if (this.estate.meta.estate.is_project) {
if (!this.form.price_construction) {
result = false;
this.errors.price_construction = true;
}
if (!this.form.price_land) {
result = false;
this.errors.price_land = true;
}
if (!this.form.ground_lease) {
result = false;
this.errors.ground_lease = true;
}
}
}
return result;
},
saveChanges() {
axios
.post(`/wp-json/v1/sweepbright/property/${this.id}/save`, {
form: this.form,
})
.then(() => {
$("html, body").animate({ scrollTop: 0 }, 200);
this.saveNotification = true;
if (this.validateFields()) {
axios
.post(`/wp-json/v1/sweepbright/property/${this.id}/save`, {
form: this.form,
})
.then(() => {
$("html, body").animate({ scrollTop: 0 }, 200);
this.errorNotification = false;
this.saveNotification = true;
setTimeout(() => {
this.saveNotification = false;
}, 3000);
});
setTimeout(() => {
this.saveNotification = false;
}, 3000);
});
} else {
$("html, body").animate({ scrollTop: 0 }, 200);
this.saveNotification = false;
this.errorNotification = true;
setTimeout(() => {
this.errorNotification = false;
}, 3000);
}
},
},
mounted() {
Expand Down
Loading

0 comments on commit 01a4df2

Please sign in to comment.