<div class="property-data-table " data-module="propertyDataTable" data-method="get" data-endpoint="/data/property-data-table.json" data-filter-text="{0} properties found" data-singular-filter-text="1 property found">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/property-data-table.css?cb=">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="property-data-table__filter js-filter">
<div class="property-filter property-filter-- property-filter--">
<a href="#" class="property-filter__toggle-filters js-toggle-button">Filter Properties</a>
<form class="property-filter__form js-filter-form">
<div class="property-filter__filters js-filters">
<div class="property-filter__reset-form-button-container">
<a href="#" class="property-filter__reset-form-button js-reset-form">Clear filters</a>
</div>
<input type="hidden" name="propertyType" value="" />
<input type="hidden" name="saleType" value="" />
<input type="hidden" name="isGlobal" value="" />
<input type="hidden" name="development" value="Kapok" />
<div class="grid-x grid-padding-x property-filter__dropdowns-container">
<div class="cell property-filter__dropdown-container">
<label for="">Max Price</label>
<select id="" name="priceMax">
<option value="">Any</option>
<option value="2000000000">2,000,000, 000</option>
<option value="5000000000">5,000,000, 000</option>
<option value="10000000000">10,000,000, 000</option>
<option value="" selected>No Limit</option>
</select>
</div>
<div class="cell property-filter__dropdown-container">
<label for="">Unit Type</label>
<select id="" name="unitType">
<option value="">Any</option>
<option value="One bed">One bed</option>
<option value="One bed + den">One bed + den</option>
<option value="One bed plus">One bed plus</option>
<option value="Three bed">Three bed</option>
</select>
</div>
<div class="cell property-filter__checkbox-container">
<label for="availabilityFilter">
Availability
</label>
<input id="availabilityFilter" type="checkbox" name="isAvailableStatus" value="availability">
<label for="availabilityFilter">Available Only</label>
</div>
</div>
<div class="grid-x grid-padding-x ">
<div class="cell property-filter__buttons-container">
<button class="property-filter__cancel-button js-cancel-button">Cancel</button>
<button class="property-filter__submit-button js-submit-button" disabled>Search</button>
</div>
</div>
</div>
<div class="property-filter__results-and-order-by-container">
<div class="property-filter__result-count js-result-count"></div>
<div class="property-filter__order-by-container js-order-by-container">
<label for="">Order By</label>
<select id="" name="orderBy">
<option value="Price DESC">Price High > Low</option>
<option value="Price ASC">Price Low > High</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="property-data-table__results">
<table class="property-data-table__results-medium">
<thead>
<tr>
<th data-field='title'>Title</th>
<th data-field='unitNumber'>Unit No.</th>
<th data-field='unitType'>Unit Type</th>
<th data-field='floor'>Floor</th>
<th data-field='price'>Price</th>
<th data-field='squareFootage'>Sq Ft</th>
<th data-field='marketStatus'>Availability</th>
<th data-field='images,floorplans'>Images|Floorplan</th>
<th></th>
</tr>
</thead>
<tbody class='js-results'>
</tbody>
</table>
<div class="property-data-table__results-small js-small-results"></div>
<template>
<div class="property-data-table__small-title js-toggle" data-accordion-title>
<span class="property-data-table__small-text js-title"></span>
<span class="property-data-table__small-price js-price"></span>
<span class="property-data-table__small-toggle js-toggle"></span>
</div>
<div class="property-data-table__small-content js-content" data-accordion-panel>
<div class="property-data-table__small-fields property-data-table__small-fields-title">
<span class="property-data-table__small-label">Title</span>
<span class="property-data-table__small-field" data-field='title'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-unitNumber">
<span class="property-data-table__small-label">Unit No.</span>
<span class="property-data-table__small-field" data-field='unitNumber'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-unitType">
<span class="property-data-table__small-label">Unit Type</span>
<span class="property-data-table__small-field" data-field='unitType'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-floor">
<span class="property-data-table__small-label">Floor</span>
<span class="property-data-table__small-field" data-field='floor'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-price">
<span class="property-data-table__small-label">Price</span>
<span class="property-data-table__small-field" data-field='price'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-squareFootage">
<span class="property-data-table__small-label">Sq Ft</span>
<span class="property-data-table__small-field" data-field='squareFootage'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-marketStatus">
<span class="property-data-table__small-label">Availability</span>
<span class="property-data-table__small-field" data-field='marketStatus'></span>
</div>
<div class="property-data-table__small-fields property-data-table__small-fields-images,floorplans">
<span class="property-data-table__small-label">Images|Floorplan</span>
<span class="property-data-table__small-field" data-field='images,floorplans'></span>
</div>
<div class="property-data-table__enquire-cta-container">
<a href="#" class="property-data-table__small-enquire-cta js-enquire-cta">Enquire</a>
</div>
</div>
</template>
</div>
<div class="property-data-table__no-results js-no-results">
<p>Couldn't find any results</p>
</div>
<div class="property-data-table__pagination">
<link rel="stylesheet" href="/assets/themes/default/css/pagination.css?cb=" />
<div class="pagination js-pagination">
<a href="#top" class="pagination__previous js-previous"><span>Previous</span></a>
<a href="#top" class="pagination__page js-page js-first selected" data-page="1">1</a>
<span class="pagination__dots js-dots-left">…</span>
<a href="#top" class="pagination__page js-page js-second-page" data-page="2">2</a>
<a href="#top" class="pagination__page js-page js-third-page" data-page="3">3</a>
<a href="#top" class="pagination__page js-page js-fourth-page" data-page="4">4</a>
<span class="pagination__dots js-dots-right">…</span>
<a href="#top" class="pagination__page js-page js-last-page" data-page="5">5</a>
<a href="#top" class="pagination__next js-next"><span>Next</span></a>
</div>
</div>
<div class="property-data-table__results-count js-results-count" data-results-count-text="{0}-{1} of {2} units" data-singular-results-count-text="" data-pagesize="2"></div>
<dialog class="property-data-table-modal js-gallery-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"></span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__gallery">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/gallery.css?cb=">
<div class="gallery " data-module="gallery">
<div class="gallery__slides-container">
<div class="gallery__slides js-slides">
</div>
<span class="gallery__arrow gallery__arrow--left js-arrow-left"><span>Previous</span> </span>
<div class="gallery__selection-label">
<span class="gallery__current-slide js-current-slide">1</span>
<span class="gallery__total-slides js-total-slides"></span>
</div>
<span class="gallery__arrow gallery__arrow--right js-arrow-right"><span>Next</span> </span>
</div>
<div class="gallery__dots js-dots">
</div>
</div>
</div>
</dialog>
<dialog class="property-data-table-modal js-enquire-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"></span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__enquire-form-container grid-container">
<link rel='stylesheet' href='/assets/themes/default/css/forms.css?0.0.0.0'>
<form action='/' enctype='multipart/form-data' method='post' novalidate='novalidate'>
<div class='umbraco-forms-page'>
<fieldset class='umbraco-forms-fieldset' id='10154d0e-e7cc-4f07-d4ae-1b82a8028295'>
<div class='grid-x grid-padding-x'>
<div class='umbraco-forms-container cell medium-6'>
<div class=' umbraco-forms-field firstname shortanswer mandatory form__row'> <label for='26a9cc02-0b66-4a62-b763-da8f6035477e' class='umbraco-forms-label form__label'> First Name <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='26a9cc02-0b66-4a62-b763-da8f6035477e' id='26a9cc02-0b66-4a62-b763-da8f6035477e' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for First Name'> <span class='field-validation-valid' data-valmsg-for='26a9cc02-0b66-4a62-b763-da8f6035477e' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field lastname shortanswer mandatory alternating form__row'> <label for='90a4583a-5deb-493f-88cb-9ab69f54a31a' class='umbraco-forms-label form__label'> Last Name <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='90a4583a-5deb-493f-88cb-9ab69f54a31a' id='90a4583a-5deb-493f-88cb-9ab69f54a31a' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for Last Name'> <span class='field-validation-valid' data-valmsg-for='90a4583a-5deb-493f-88cb-9ab69f54a31a' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field emailaddress shortanswer mandatory form__row'> <label for='b47215bd-36ff-453b-bbdb-13b736249a47' class='umbraco-forms-label form__label'> Email address <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='b47215bd-36ff-453b-bbdb-13b736249a47' id='b47215bd-36ff-453b-bbdb-13b736249a47' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for Email address' data-val-regex='Please provide a valid value for Email address' data-regex='^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'> <span class='field-validation-valid' data-valmsg-for='b47215bd-36ff-453b-bbdb-13b736249a47' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field company shortanswer alternating form__row'> <label for='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' class='umbraco-forms-label form__label'> Company </label>
<div class='umbraco-forms-field-wrapper'> <input type='text' name='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' id='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' class='textfield__input text' value='' maxlength='500'> <span class='field-validation-valid' data-valmsg-for='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' data-valmsg-replace='true'></span> </div>
</div>
</div>
<div class='umbraco-forms-container cell medium-6'>
<div class=' umbraco-forms-field country dropdown form__row'> <label for='140857ba-d700-4599-da44-71235d9766ff' class='umbraco-forms-label form__label'> Country </label>
<div class='umbraco-forms-field-wrapper'> <select class='dropdown ' name='140857ba-d700-4599-da44-71235d9766ff' id='140857ba-d700-4599-da44-71235d9766ff'>
<option value=''></option>
</select> <span class='field-validation-valid' data-valmsg-for='140857ba-d700-4599-da44-71235d9766ff' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field message longanswer mandatory alternating form__row'> <label for='c2079f50-3ec2-42ca-d4f9-f4257274b024' class='umbraco-forms-label form__label'> Message <span class='umbraco-forms-indicator'>*</span> </label>
<div class='umbraco-forms-field-wrapper'> <textarea class='textarea__input ' name='c2079f50-3ec2-42ca-d4f9-f4257274b024' id='c2079f50-3ec2-42ca-d4f9-f4257274b024' rows='2' cols='20' data-val='true' data-val-required='Please provide a value for Message'></textarea> <span class='field-validation-valid' data-valmsg-for='c2079f50-3ec2-42ca-d4f9-f4257274b024' data-valmsg-replace='true'></span> </div>
</div>
<div class=' umbraco-forms-field recaptcha recaptchav3withscore form__row'> </div>
<div class=' umbraco-forms-field propertyid hidden mandatory alternating form__row'>
<div class='umbraco-forms-field-wrapper'> <input type='hidden' name='222a3bd7-5ed8-40aa-9378-362d4064ed8c' id='222a3bd7-5ed8-40aa-9378-362d4064ed8c' class='hidden' data-alias='propertyId' value=''> <span class='field-validation-valid' data-valmsg-for='222a3bd7-5ed8-40aa-9378-362d4064ed8c' data-valmsg-replace='true'></span> </div>
</div>
</div>
</div>
</fieldset>
<fieldset class='umbraco-forms-fieldset' id='371f2f90-6da0-40a4-e3d0-ff98236b04e7'>
<div class='grid-x grid-padding-x'>
<div class='umbraco-forms-container cell medium-12'>
<div class=' umbraco-forms-field ihavereadtheahrefprivacypolicytarget_blankprivacypolicyaandahreftermsofusetarget_blanktermsofusea checkbox mandatory form__row'>
<div class='umbraco-forms-field-wrapper'>
<div class='checkbox__container'> <input type='checkbox' name='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' id='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' class='checkbox__input ' data-val='true' data-val-requiredcb='Please provide a value for I have read the <a href=' /privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a>'> <label for='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' class='umbraco-forms-label checkbox__label'> I have read the <a href='/privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a> <span class='umbraco-forms-indicator'>*</span> </label> </div> <span class='field-validation-valid' data-valmsg-for='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' data-valmsg-replace='true'></span>
</div>
</div>
<div class=' umbraco-forms-field privacynotice titleanddescription alternating form__row'>
<div class='umbraco-forms-field-wrapper'>
<div id='71953aef-4631-4219-f9a8-99191ed10a0a' class='form-text '>
<p class='form-text__body'>Dart Enterprises Ltd. takes your privacy very seriously and will only use your personal information to respond to your inquiry. The full details of how we use the personal information you provide to us, and the steps we take to protect your privacy, can be found within our privacy policy.</p>
</div> <span class='field-validation-valid' data-valmsg-for='71953aef-4631-4219-f9a8-99191ed10a0a' data-valmsg-replace='true'></span>
</div>
</div>
</div>
</div>
</fieldset>
<div style='display: none'> <input type='text' name='f9dcb8a8-5deb-4c2b-8d30-abe712ef1c43'> </div>
<div class='umbraco-forms-navigation grid-x grid-padding-x'>
<div class='cell medium-12'> <input type='submit' class='btn form__submit' value='Submit' name='__next'> </div>
</div>
</div>
</form>
</div>
</dialog>
<dialog class="property-data-table-modal property-data-table-modal--form-submitted js-form-submitted-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"> </span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__submitted-message-container grid-container">
<p></p>
<div class="property-data-table-modal__close-cta-container">
<a href="#" class="js-close-modal property-data-table-modal__close-cta">Close</a>
</div>
</div>
</dialog>
</div>
<div class="property-data-table {{#if formSubmitted}}umbraco-forms-submitmessage{{/if}}" data-module="propertyDataTable"
data-method="{{method}}" data-endpoint="{{endpoint}}" data-filter-text="{{filterCountText}}" data-singular-filter-text="{{singularFilterCountText}}" {{#if
formSubmitted}}data-open-modal=".js-form-submitted-modal" {{/if}}>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/property-data-table.css?cb={{cacheBuster}}">
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image.css?cb={{cacheBuster}}">
{{/if}}
<div class="property-data-table__filter js-filter">
{{> @property-filter filter }}
</div>
<div class="property-data-table__results">
<table class="property-data-table__results-medium">
<thead>
<tr>{{#each columns}}<th data-field='{{propertyField}}'>{{label}}</th>{{/each}}<th></th>
</tr>
</thead>
<tbody class='js-results'>
</tbody>
</table>
<div class="property-data-table__results-small js-small-results"></div>
<template>
<div class="property-data-table__small-title js-toggle" data-accordion-title>
<span class="property-data-table__small-text js-title"></span>
<span class="property-data-table__small-price js-price"></span>
<span class="property-data-table__small-toggle js-toggle"></span>
</div>
<div class="property-data-table__small-content js-content" data-accordion-panel>
{{#each columns}}
<div class="property-data-table__small-fields property-data-table__small-fields-{{propertyField}}">
<span class="property-data-table__small-label">{{label}}</span>
<span class="property-data-table__small-field" data-field='{{propertyField}}'></span>
</div>
{{/each}}
<div class="property-data-table__enquire-cta-container">
<a href="#" class="property-data-table__small-enquire-cta js-enquire-cta">Enquire</a>
</div>
</div>
</template>
</div>
<div class="property-data-table__no-results js-no-results">
<p>{{ noResultsText }}</p>
</div>
<div class="property-data-table__pagination">
{{> @pagination }}
</div>
<div class="property-data-table__results-count js-results-count" data-results-count-text="{{resultsCountText}}" data-singular-results-count-text="{{singularResultsCountText}}"
data-pagesize="{{pageSize}}"></div>
<dialog class="property-data-table-modal js-gallery-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"></span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__gallery">
{{> @gallery hideThumbnails=true }}
</div>
</dialog>
<dialog class="property-data-table-modal js-enquire-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"></span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__enquire-form-container grid-container">
{{{enquireForm}}}
</div>
</dialog>
<dialog class="property-data-table-modal property-data-table-modal--form-submitted js-form-submitted-modal">
<div class="property-data-table-modal__header">
<span class="js-property-title"> </span>
<a href="#" class="property-data-table-modal__close-modal-button js-close-modal"><span>close</span></a>
</div>
<div class="property-data-table-modal__submitted-message-container grid-container">
<p>{{messageOnSubmit}}</p>
<div class="property-data-table-modal__close-cta-container">
<a href="#" class="js-close-modal property-data-table-modal__close-cta">Close</a>
</div>
</div>
</dialog>
</div>
{
"theme": "default",
"firstInstance": true,
"method": "get",
"endpoint": "/data/property-data-table.json",
"noResultsText": "Couldn't find any results",
"pageSize": 2,
"resultsCountText": "{0}-{1} of {2} units",
"singluarResultsCountText": "1 of 1 unit",
"filterCountText": "{0} properties found",
"singularFilterCountText": "1 property found",
"filter": {
"filterToggleText": "Filter Properties",
"cancelText": "Cancel",
"submitText": "Search",
"clearText": "Clear filters",
"hiddenFilters": [
{
"name": "development",
"value": "Kapok"
}
],
"dropdownFilters": [
{
"label": "Max Price",
"name": "priceMax",
"options": [
{
"text": "Any",
"value": ""
},
{
"value": "2000000000",
"text": "2,000,000, 000"
},
{
"value": "5000000000",
"text": "5,000,000, 000"
},
{
"value": "10000000000",
"text": "10,000,000, 000"
},
{
"value": "",
"text": "No Limit",
"isSelected": true
}
]
},
{
"label": "Unit Type",
"name": "unitType",
"options": [
{
"text": "Any",
"value": ""
},
{
"value": "One bed",
"text": "One bed"
},
{
"value": "One bed + den",
"text": "One bed + den"
},
{
"value": "One bed plus",
"text": "One bed plus"
},
{
"value": "Three bed",
"text": "Three bed"
}
]
}
],
"orderBy": {
"label": "Order By",
"name": "orderBy",
"options": [
{
"value": "Price DESC",
"text": "Price High > Low"
},
{
"value": "Price ASC",
"text": "Price Low > High"
}
]
},
"availabilityCheckbox": {
"text": "Available Only",
"id": "availabilityFilter",
"value": "availability",
"name": "isAvailableStatus",
"title": "Availability"
}
},
"columns": [
{
"label": "Title",
"propertyField": "title"
},
{
"label": "Unit No.",
"propertyField": "unitNumber"
},
{
"label": "Unit Type",
"propertyField": "unitType"
},
{
"label": "Floor",
"propertyField": "floor"
},
{
"label": "Price",
"propertyField": "price"
},
{
"label": "Sq Ft",
"propertyField": "squareFootage"
},
{
"label": "Availability",
"propertyField": "marketStatus"
},
{
"label": "Images|Floorplan",
"propertyField": "images,floorplans"
}
],
"enquireForm": "<link rel='stylesheet' href='/assets/themes/default/css/forms.css?0.0.0.0'><form action='/' enctype='multipart/form-data' method='post' novalidate='novalidate'> <div class='umbraco-forms-page'> <fieldset class='umbraco-forms-fieldset' id='10154d0e-e7cc-4f07-d4ae-1b82a8028295'> <div class='grid-x grid-padding-x'> <div class='umbraco-forms-container cell medium-6'> <div class=' umbraco-forms-field firstname shortanswer mandatory form__row'> <label for='26a9cc02-0b66-4a62-b763-da8f6035477e' class='umbraco-forms-label form__label'> First Name <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='26a9cc02-0b66-4a62-b763-da8f6035477e' id='26a9cc02-0b66-4a62-b763-da8f6035477e' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for First Name'> <span class='field-validation-valid' data-valmsg-for='26a9cc02-0b66-4a62-b763-da8f6035477e' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field lastname shortanswer mandatory alternating form__row'> <label for='90a4583a-5deb-493f-88cb-9ab69f54a31a' class='umbraco-forms-label form__label'> Last Name <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='90a4583a-5deb-493f-88cb-9ab69f54a31a' id='90a4583a-5deb-493f-88cb-9ab69f54a31a' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for Last Name'> <span class='field-validation-valid' data-valmsg-for='90a4583a-5deb-493f-88cb-9ab69f54a31a' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field emailaddress shortanswer mandatory form__row'> <label for='b47215bd-36ff-453b-bbdb-13b736249a47' class='umbraco-forms-label form__label'> Email address <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='b47215bd-36ff-453b-bbdb-13b736249a47' id='b47215bd-36ff-453b-bbdb-13b736249a47' class='textfield__input text' value='' maxlength='500' data-val='true' data-val-required='Please provide a value for Email address' data-val-regex='Please provide a valid value for Email address' data-regex='^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$'> <span class='field-validation-valid' data-valmsg-for='b47215bd-36ff-453b-bbdb-13b736249a47' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field company shortanswer alternating form__row'> <label for='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' class='umbraco-forms-label form__label'> Company </label> <div class='umbraco-forms-field-wrapper'> <input type='text' name='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' id='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' class='textfield__input text' value='' maxlength='500'> <span class='field-validation-valid' data-valmsg-for='f1282c91-ae01-4253-f5c1-f7e8919b2fdb' data-valmsg-replace='true'></span> </div> </div> </div> <div class='umbraco-forms-container cell medium-6'> <div class=' umbraco-forms-field country dropdown form__row'> <label for='140857ba-d700-4599-da44-71235d9766ff' class='umbraco-forms-label form__label'> Country </label> <div class='umbraco-forms-field-wrapper'> <select class='dropdown ' name='140857ba-d700-4599-da44-71235d9766ff' id='140857ba-d700-4599-da44-71235d9766ff'> <option value=''></option> </select> <span class='field-validation-valid' data-valmsg-for='140857ba-d700-4599-da44-71235d9766ff' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field message longanswer mandatory alternating form__row'> <label for='c2079f50-3ec2-42ca-d4f9-f4257274b024' class='umbraco-forms-label form__label'> Message <span class='umbraco-forms-indicator'>*</span> </label> <div class='umbraco-forms-field-wrapper'> <textarea class='textarea__input ' name='c2079f50-3ec2-42ca-d4f9-f4257274b024' id='c2079f50-3ec2-42ca-d4f9-f4257274b024' rows='2' cols='20' data-val='true' data-val-required='Please provide a value for Message'></textarea> <span class='field-validation-valid' data-valmsg-for='c2079f50-3ec2-42ca-d4f9-f4257274b024' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field recaptcha recaptchav3withscore form__row'> </div> <div class=' umbraco-forms-field propertyid hidden mandatory alternating form__row'> <div class='umbraco-forms-field-wrapper'> <input type='hidden' name='222a3bd7-5ed8-40aa-9378-362d4064ed8c' id='222a3bd7-5ed8-40aa-9378-362d4064ed8c' class='hidden' data-alias='propertyId' value=''> <span class='field-validation-valid' data-valmsg-for='222a3bd7-5ed8-40aa-9378-362d4064ed8c' data-valmsg-replace='true'></span> </div> </div> </div> </div> </fieldset> <fieldset class='umbraco-forms-fieldset' id='371f2f90-6da0-40a4-e3d0-ff98236b04e7'> <div class='grid-x grid-padding-x'> <div class='umbraco-forms-container cell medium-12'> <div class=' umbraco-forms-field ihavereadtheahrefprivacypolicytarget_blankprivacypolicyaandahreftermsofusetarget_blanktermsofusea checkbox mandatory form__row'> <div class='umbraco-forms-field-wrapper'> <div class='checkbox__container'> <input type='checkbox' name='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' id='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' class='checkbox__input ' data-val='true' data-val-requiredcb='Please provide a value for I have read the <a href='/privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a>'> <label for='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' class='umbraco-forms-label checkbox__label'> I have read the <a href='/privacy-policy' target='_blank'>Privacy Policy</a> and <a href='/terms-of-use' target='_blank'>Terms of Use</a> <span class='umbraco-forms-indicator'>*</span> </label> </div> <span class='field-validation-valid' data-valmsg-for='9eb2eaa6-dec3-4f35-a1ee-8e03f11c9708' data-valmsg-replace='true'></span> </div> </div> <div class=' umbraco-forms-field privacynotice titleanddescription alternating form__row'> <div class='umbraco-forms-field-wrapper'> <div id='71953aef-4631-4219-f9a8-99191ed10a0a' class='form-text '> <p class='form-text__body'>Dart Enterprises Ltd. takes your privacy very seriously and will only use your personal information to respond to your inquiry. The full details of how we use the personal information you provide to us, and the steps we take to protect your privacy, can be found within our privacy policy.</p> </div> <span class='field-validation-valid' data-valmsg-for='71953aef-4631-4219-f9a8-99191ed10a0a' data-valmsg-replace='true'></span> </div> </div> </div> </div> </fieldset> <div style='display: none'> <input type='text' name='f9dcb8a8-5deb-4c2b-8d30-abe712ef1c43'> </div> <div class='umbraco-forms-navigation grid-x grid-padding-x'> <div class='cell medium-12'> <input type='submit' class='btn form__submit' value='Submit' name='__next'> </div> </div> </div> </form>"
}
import LazyLoader from '../../../../js/utils/lazy-loader';
import Pagination from '../../listings/pagination/pagination';
import format, { convertToHyphenated } from '../../../../js/utils/string';
import { Gallery } from '../../media/gallery/gallery';
import { Accordion } from '../../text/accordion/accordion';
import { getQueryStringParameter, setQueryParams } from '../../../../js/utils/routing';
import { PropertyFilter } from '../../listings/_property-listing/property-filter';
export class PropertyDataTable {
constructor(component) {
this.component = component;
this.resultsContainer = this.component.querySelector('.js-results');
this.smallResultsContainer = this.component.querySelector('.js-small-results');
this.noResultsContainer = this.component.querySelector('.js-no-results');
this.resultsCountContainer = this.component.querySelector('.js-results-count');
this.modalCloseButtons = this.component.querySelectorAll('.js-close-modal');
this.modal = this.component.querySelector('.js-gallery-modal');
this.enquireModal = this.component.querySelector('.js-enquire-modal');
this.columns = this.component.querySelectorAll('th[data-field]');
const galleryElement = this.component.querySelector('[data-module="gallery"]');
this.gallery = new Gallery(galleryElement);
this.pagination = new Pagination(this.component.querySelector('.js-pagination'), () => { this.search(this.pagination.currentPage); });
this.propertyFilter = new PropertyFilter(this.component.querySelector('.js-filter'), () => { this.search(1); });
this.init();
}
init() {
this.component.querySelectorAll('dialog').forEach((dialog) => {
if (typeof dialog.showModal !== 'function') {
// dialog is not supported (Safari 15.3 and older)
const d = dialog;
d.style.display = 'none';
d.style.position = 'fixed';
d.style.zIndex = '100';
d.style.left = '50%';
d.style.top = '50%';
d.style.transform = 'translate(-50%, -50%)';
}
});
const dialogToOpen = this.component.dataset.openModal;
if (dialogToOpen) {
this.openDialog(dialogToOpen);
}
this.lazyLoader = new LazyLoader(
this.component.dataset.endpoint,
null,
null,
this.resultsContainer,
(res) => { this.onApiSuccess(res); },
this.component.dataset.method,
);
const pageNumber = getQueryStringParameter('page');
if (pageNumber) {
this.lazyLoader.setPage(pageNumber);
}
this.lazyLoader.load(this.propertyFilter.getFormData());
this.modalCloseButtons.forEach((modalCloseButton) => {
modalCloseButton.addEventListener('click', (e) => {
e.preventDefault();
PropertyDataTable.closeModal(modalCloseButton.closest('dialog'));
});
});
}
static closeModal(dialog) {
const d = dialog;
if (typeof d.showModal !== 'function') {
d.style.display = 'none';
} else {
d.close();
}
}
openDialog(className) {
const dialog = this.component.querySelector(className);
if (typeof dialog.showModal !== 'function') {
dialog.style.display = 'block';
} else {
dialog.showModal();
}
}
openGalleryModal(propertyId) {
if (typeof this.modal.showModal !== 'function') {
this.modal.style.display = 'block';
} else {
this.modal.showModal();
}
const property = this.properties.filter((p) => { return p.id === propertyId; })[0] || null;
if (property) {
const slides = [];
property.images.forEach((image, index) => {
slides.push({
type: 'image',
image: {
altText: `${property.title} ${index}`,
placeholderImageUrl: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA',
sources: image.sources,
fallbackImageUrl: image.fallbackImageUrl,
},
});
});
this.gallery.setSlides(slides);
this.modal.querySelector('.js-property-title').innerText = property.title;
}
}
openEnquireModal(propertyId) {
if (typeof this.enquireModal.showModal !== 'function') {
this.enquireModal.style.display = 'block';
} else {
this.enquireModal.showModal();
}
const property = this.properties.filter((p) => { return p.id === propertyId; })[0] || null;
if (property) {
this.enquireModal.querySelector('.js-property-title').innerText = property.title;
// set hidden property id field
this.enquireModal.querySelector('input[data-alias="propertyId"]').value = property.id;
}
}
onApiSuccess(json) {
setQueryParams('page', this.lazyLoader.pageNumber);
const response = JSON.parse(json);
this.properties = response.properties;
// Medium devices: tablets / desktop
this.renderMediumResults(response.properties);
// Small devices: mobile
this.renderSmallResults(response.properties);
const imageButtons = this.component.querySelectorAll('.js-image-button');
imageButtons.forEach((button) => {
const propertyId = parseInt(button.dataset.propertyId, 10);
button.addEventListener('click', (e) => {
e.preventDefault();
this.openGalleryModal(propertyId);
});
});
const enquireCtas = this.component.querySelectorAll('.js-enquire-cta');
enquireCtas.forEach((enquireCta) => {
const propertyId = parseInt(enquireCta.dataset.propertyId, 10);
enquireCta.addEventListener('click', (e) => {
e.preventDefault();
this.openEnquireModal(propertyId);
});
});
if (this.pagination) {
this.pagination.setNumberOfPages(response.totalPages);
}
// display zero results message if no results
this.noResultsContainer.classList.remove('active');
if (!response.properties || response.properties.length < 1) {
this.renderNoResults();
} else {
this.renderResultsCount(response.totalResultCount);
}
this.renderFilterCount(response.totalResultCount);
}
renderNoResults() {
this.noResultsContainer.classList.add('active');
}
renderResultsCount(totalResultCount) {
const resultsString = totalResultCount === 1 ? this.resultsCountContainer.dataset.singularResultsCountText : this.resultsCountContainer.dataset.resultsCountText;
const pageSize = parseInt(this.resultsCountContainer.dataset.pagesize, 10);
const { currentPage } = this.pagination;
const resultsFormat = format(resultsString, (pageSize * (currentPage - 1)) + 1, pageSize * currentPage < totalResultCount ? pageSize * currentPage : totalResultCount, totalResultCount);
this.resultsCountContainer.innerText = resultsFormat;
}
renderFilterCount(totalResultCount) {
const resultsString = totalResultCount === 1 ? this.component.dataset.singularFilterText : this.component.dataset.filterText;
const resultsFormat = format(resultsString, totalResultCount);
this.propertyFilter.setResultsCount(resultsFormat);
}
renderSmallResults(properties) {
const template = this.component.querySelector('template');
const smallResults = this.component.querySelector('.js-small-results');
smallResults.innerHTML = '';
properties.forEach((property) => {
const clone = template.content.cloneNode(true);
clone.querySelector('.js-title').innerText = property.title;
clone.querySelector('.js-price').innerText = property.price;
this.columns.forEach((item) => {
const { field } = item.dataset;
const element = clone.querySelector(`[data-field="${field}"]`);
if (field.includes('images') || field.includes('floorplans')) {
let mediaHtml = '';
if (field.includes('images')) {
mediaHtml = `<a href="#" data-property-id='${property.id}' class='js-image-button property-data-table__small--images'>Images<a/>`;
}
if (field.includes('floorplans')) {
const floorplan = property && property.floorplans && property.floorplans[0];
mediaHtml += floorplan ? `<a class="property-data-table__small--floorplan" target='_blank' href='${floorplan}'>Floorplan</a>` : '';
}
element.innerHTML = mediaHtml;
} else {
element.innerHTML = `<span class="property-data-table__small--${convertToHyphenated(property[field])}" data-value='${property[field]}'>${property[field]}</span>`;
}
});
clone.querySelector('.js-enquire-cta').dataset.propertyId = property.id;
smallResults.append(clone);
});
new Accordion(smallResults);
}
renderMediumResults(properties) {
let html = '';
properties.forEach((property) => {
html += `<tr class="property-data-table__row" data-status='${property.marketStatus}'>`;
this.columns.forEach((th) => {
const { field } = th.dataset;
if (field.includes('images') || field.includes('floorplans')) {
html += '<td class="property-data-table__cell">';
if (field.includes('images')) {
html += `<a href="#" data-property-id='${property.id}' class='property-data-table__cell--images js-image-button'>Images<a/>`;
}
if (field.includes('floorplans')) {
const floorplan = property && property.floorplans && property.floorplans[0];
html += floorplan ? `<a class="property-data-table__cell--floorplan" href='${floorplan}' target='_blank'>Floorplan</a>` : '';
}
html += '</td>';
} else {
html += `<td class="property-data-table__cell property-data-table__cell--${convertToHyphenated(field)}" data-value='${property[field]}'><span>${property[field]}</span></td>`;
}
});
html += `<td class="property-data-table__cell"><a href="#" class="property-data-table__enquire-cta js-enquire-cta" data-property-id='${property.id}'>Enquire</a></tr>`;
});
this.resultsContainer.innerHTML = html;
}
search(pageNumber) {
this.lazyLoader.reset();
this.lazyLoader.setPage(pageNumber);
this.lazyLoader.load(this.propertyFilter.getFormData());
}
}
export default (module) => new PropertyDataTable(module);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
@import '../../listings/_property-listing/property-filter';
.property-data-table {
&__filter,
&__results {
@extend %spacer-medium;
table {
width: 100%;
}
thead {
tr {
display: flex;
padding: rem(10);
}
th {
align-items: center;
display: flex;
text-align: left;
width: calc(100% / 10);
}
}
tbody {
tr {
display: flex;
padding: rem(10);
}
td {
align-items: center;
display: flex;
font-weight: 400;
text-align: left;
width: calc(100% / 10);
}
}
&-medium {
display: none;
@include breakpoint(medium) {
display: table;
}
}
&-small {
@include breakpoint(medium) {
display: none;
}
}
}
&__no-results {
display: none;
&.active {
display: block;
}
}
&__small-text,
&__small-price {
pointer-events: none;
}
@include breakpoint(small only) {
&__small-fields-title,
&__small-fields-price {
display: none;
}
}
[data-accordion-title] {
cursor: pointer;
}
[data-accordion-panel] {
display: none;
&.is-open {
display: block;
}
}
&-modal {
background: $color-white;
height: 100vh;
padding: 0;
width: 100vw;
&__image {
height: 100%;
width: 100%;
}
&__header {
background-color: $color-black;
color: $color-white;
position: relative;
text-align: center;
}
&__close-modal-button {
color: inherit;
position: absolute;
right: rem(5);
top: 0;
}
&__enquire-form-container {
padding-top: rem(20);
}
&__submitted-message-container {
@extend %spacer-medium;
overflow: hidden;
padding: rem(60);
text-align: center;
p {
margin: 0 auto rem(60);
max-width: calc($grid-container / 2);
}
}
&__close-cta {
@extend %primary-cta;
}
}
}
This component is composed of the property filter component, a data table that dynamically loads the property and a pagination component