@boligmappa/web-component-search
Version:
Web component for interacting with the Boligmappa APIs
400 lines • 16.2 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, html, css } from "lit";
import { property, state } from "lit/decorators.js";
import { buttonStyles, innerTableStyles, tableStyles, } from "../../helpers/css-modules/styles";
import { checkBoxStyles } from "../../helpers/css-modules/buttonStyles";
import "../tags/building-tag";
import "../tags/house-tag";
export class PropertyTable extends LitElement {
constructor() {
super();
this.propertiesData = [];
this.selectedAddress = {};
this.building = {};
this.selectedProperties = [];
this.isLoadingMoreData = false;
}
static get styles() {
return [
buttonStyles,
tableStyles,
innerTableStyles,
checkBoxStyles,
css `
td.tag-container {
padding: 0;
}
td.tag-container > img {
vertical-align: middle;
}
.properties-tablecell-container {
position: relative;
padding-left: 1rem;
padding-top: 1rem;
padding-bottom: 0.5rem;
}
.properties-tablecell-container tbody {
padding: 0;
}
.bygningstype {
padding-right: 1rem;
}
.select-all {
padding-top: 0.5rem;
}
.select-all-container {
position: relative;
padding-left: 1rem;
}
`,
];
}
firstUpdated() {
var _a;
this.tableBody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("propertiesTableBody");
}
onCheckboxButtonClicked(index) {
if (this.selectedProperties.includes(index)) {
this.removeIndexFromSelectedProperties(index);
}
else {
this.selectedProperties.push(index);
}
this.requestUpdate();
console.log(this.selectedProperties);
}
removeIndexFromSelectedProperties(numberToBeRemoved) {
const index = this.selectedProperties.indexOf(numberToBeRemoved);
if (index > -1) {
this.selectedProperties.splice(index, 1);
}
}
getButtonClass(index) {
if (this.selectedProperties.includes(index)) {
return "square-checkbox square-checkbox--clicked";
}
else
return "square-checkbox";
}
getButtonClassSelectAll() {
if (this.selectedProperties.length === this.propertiesData.length + 1) {
return "square-checkbox square-checkbox--clicked";
}
else
return "square-checkbox";
}
backButtonClicked() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("back-clicked", options));
}
confirmButtonClicked() {
let options = {};
let detailToBeDispatched = { properties: [] };
if (this.selectedProperties.includes(-1)) {
detailToBeDispatched.building = this.building;
this.removeIndexFromSelectedProperties(-1);
}
this.selectedProperties.forEach((index) => {
detailToBeDispatched.properties.push(this.propertiesData[index]);
});
options = {
detail: {
selectedProperties: detailToBeDispatched,
},
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("property-confirmed", options));
}
selectAllClicked() {
if (this.selectedProperties.length !== this.propertiesData.length + 1) {
this.selectedProperties = Array.from(new Array(this.propertiesData.length + 1), (x, i) => i + -1);
}
else {
this.selectedProperties = [];
}
}
setNullAsNotGiven(str) {
if (str === null) {
return "Ikke oppgitt";
}
return str;
}
getBoligmappaField(boligmappaNummer) {
if (boligmappaNummer) {
return html ` <span class="inner-header"> Boligmappanummer </span>
<br />
<span class="inner-text"> ${boligmappaNummer} </span>`;
}
else
return html ``;
}
getPropertyOwner(property) {
var _a;
if (property.propertyOwners.length > 0) {
const owner = property.propertyOwners[0];
return `${owner.firstName} ${owner.lastName}`;
}
return (_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.properties.notAvailable;
}
upperCaseFirstLetter(str) {
const lowerCaseStr = str.toLowerCase();
return lowerCaseStr.charAt(0).toUpperCase() + lowerCaseStr.slice(1);
}
loadMoreProperties() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("load-more-properties", options));
}
loadMorePropertiesIfScrolledToBottom() {
if (!this.tableBody) {
return;
}
if (this.tableBody.scrollHeight - Math.ceil(this.tableBody.scrollTop) ===
this.tableBody.clientHeight) {
this.loadMoreProperties();
}
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (this.propertiesData !== undefined) {
return html `
<table class="results-table">
<tbody
id="propertiesTableBody"
=${() => this.loadMorePropertiesIfScrolledToBottom()}
}}
>
${this.propertiesData.length !== 1
? html ` <tr>
<td>
<div class="select-all-container">
<table class="inner-table">
<tbody>
<col style="width: 5%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr class="select-all-container">
<td class="checkbox-button-container">
<div
=${() => this.selectAllClicked()}
class=${this.getButtonClassSelectAll()}
>
<div class="square-checkbox--content"></div>
</div>
</td>
<td class="select-all">
<span class="inner-text">
${(_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.properties.selectAll}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<div class="properties-tablecell-container">
<table class="inner-table">
<tbody>
<col style="width: 5%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr>
<td class="checkbox-button-container">
<div
=${() => this.onCheckboxButtonClicked(-1)}
class=${this.getButtonClass(-1)}
>
<div class="square-checkbox--content"></div>
</div>
</td>
<td class="tag-container">
<building-tag
.languageObject=${this.languageObject}
></building-tag>
</td>
</tr>
<tr>
<td class="checkbox-button-container"></td>
<td class="bygningstype">
<span class="inner-header">
${(_b = this.languageObject) === null || _b === void 0 ? void 0 : _b.properties.buildingType}
</span>
<br />
<span class="inner-text">
${this.upperCaseFirstLetter(this.setNullAsNotGiven(this.building.buildingType))}
</span>
</td>
<td>
<span class="inner-header">
${(_c = this.languageObject) === null || _c === void 0 ? void 0 : _c.properties.buildingNumber}
</span>
<br />
<span class="inner-text">
${this.building.buildingNumber}
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
${(_d = this.languageObject) === null || _d === void 0 ? void 0 : _d.properties.owner}
</span>
<br />
<span class="inner-text">
${(_e = this.languageObject) === null || _e === void 0 ? void 0 : _e.properties.notAvailable}
</span>
</td>
<td>
${this.building.boligmappaNumber
? html `<span class="inner-header">
${(_f = this.languageObject) === null || _f === void 0 ? void 0 : _f.properties.boligmappaNumber}
</span>
<br />
<span class="inner-text">
${this.building.boligmappaNumber}
</span>`
: html ``}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>`
: html ``}
${this.propertiesData.map((property, index) => {
var _a, _b, _c;
return html `<tr>
<td>
<div class="properties-tablecell-container">
<table class="inner-table">
<tbody>
<col style="width: 5%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr>
<td class="checkbox-button-container">
<div
=${() => this.onCheckboxButtonClicked(index)}
class=${this.getButtonClass(index)}
>
<div class="square-checkbox--content"></div>
</div>
</td>
<td class="tag-container">
<house-tag
.languageObject=${this.languageObject}
></house-tag>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
${(_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.properties.unitType}
</span>
<br />
<span class="inner-text">
${this.upperCaseFirstLetter(this.setNullAsNotGiven(property.propertyType))}
</span>
</td>
<td>
<span class="inner-header">
${(_b = this.languageObject) === null || _b === void 0 ? void 0 : _b.properties.occupancyUnit}
</span>
<br />
<span class="inner-text">
${property.unitNumber}
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
${(_c = this.languageObject) === null || _c === void 0 ? void 0 : _c.properties.owner}
</span>
<br />
<span class="inner-text">
${this.getPropertyOwner(property)}
</span>
</td>
<td>
${this.getBoligmappaField(property.boligmappaNumber)}
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>`;
})}
${this.isLoadingMoreData
? html ` <tr>
<td>
<loading-animation></loading-animation>
</td>
</tr>`
: html ``}
</tbody>
<tfoot>
<tr>
<td>
<div class="button-container">
<button class="back-button" =${this.backButtonClicked}>
${(_g = this.languageObject) === null || _g === void 0 ? void 0 : _g.general.back}
</button>
<button
=${this.confirmButtonClicked}
class=${this.selectedProperties.length >= 1
? "confirm-button"
: "confirm-button disabled"}
>
${(_h = this.languageObject) === null || _h === void 0 ? void 0 : _h.properties.confirm}
</button>
</div>
</td>
</tr>
</tfoot>
</table>
`;
}
else
return html ``;
}
}
__decorate([
property()
], PropertyTable.prototype, "isLoadingMoreData", void 0);
__decorate([
property()
], PropertyTable.prototype, "languageObject", void 0);
__decorate([
property()
], PropertyTable.prototype, "propertiesData", void 0);
__decorate([
property()
], PropertyTable.prototype, "selectedAddress", void 0);
__decorate([
property()
], PropertyTable.prototype, "building", void 0);
__decorate([
state()
], PropertyTable.prototype, "selectedProperties", void 0);
customElements.define("properties-table", PropertyTable);
//# sourceMappingURL=properties-table.js.map