@boligmappa/web-component-search
Version:
Web component for interacting with the Boligmappa APIs
220 lines • 8.45 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 } from "lit/decorators.js";
import arrowIcon from "../../assets/icons/arrow_forward.svg";
import { buttonStyles, innerTableStyles, tableStyles, } from "../../helpers/css-modules/styles";
export class BuildingsTable extends LitElement {
constructor() {
super();
this.buildingsData = [];
this.isLoadingMoreData = false;
}
static get styles() {
return [
buttonStyles,
tableStyles,
innerTableStyles,
css `
.arrow-icon {
height: 1.1rem;
}
.all-elements-link {
display: flex;
justify-content: flex-start;
font-size: 0.8rem;
cursor: pointer;
}
.all-elements-link:hover {
filter: invert(45%) sepia(53%) saturate(313%) hue-rotate(137deg)
brightness(97%) contrast(89%);
}
.number {
font-size: 20px;
margin-right: 8px;
}
.heading {
font-size: 18px;
}
`,
];
}
firstUpdated() {
var _a;
this.tableBody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("buildingsTableBody");
}
onViewAllProperties(building) {
const options = {
detail: { building },
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("building-clicked", options));
}
backButtonClicked() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("back-clicked", options));
}
setNullAsNotGiven(str) {
if (str === null) {
return "Ikke oppgitt";
}
return str;
}
upperCaseFirstLetter(str) {
const lowerCaseStr = str.toLowerCase();
return lowerCaseStr.charAt(0).toUpperCase() + lowerCaseStr.slice(1);
}
loadMoreBuildings() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("load-more-buildings", options));
}
loadMoreBuildingsIfScrolledToBottom() {
if (!this.tableBody) {
return;
}
if (this.tableBody.scrollHeight - Math.ceil(this.tableBody.scrollTop) ===
this.tableBody.clientHeight) {
this.loadMoreBuildings();
}
}
render() {
var _a;
if (this.buildingsData !== undefined) {
return html `
<table class="results-table">
<tbody
id="buildingsTableBody"
=${() => this.loadMoreBuildingsIfScrolledToBottom()}
}}
>
${this.buildingsData.map((building) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
return html `<tr>
<td>
<div class="tablecell-container">
<table class="inner-table">
<tbody>
<col style="width: 1%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr>
<td>
<span class="number">1</span>
</td>
<td>
<span class="heading"
>${(_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.buildings.building}</span
>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
${(_b = this.languageObject) === null || _b === void 0 ? void 0 : _b.buildings.buildingType}
</span>
<br />
<span class="inner-text">
${this.upperCaseFirstLetter(this.setNullAsNotGiven(building.buildingType))}
</span>
</td>
<td>
<span class="inner-header">
${(_c = this.languageObject) === null || _c === void 0 ? void 0 : _c.buildings.buildingNumber}
</span>
<br />
<span class="inner-text">
${building.buildingNumber}
</span>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
${(_d = this.languageObject) === null || _d === void 0 ? void 0 : _d.buildings.owner}
</span>
<br />
<span class="inner-text">
${(_e = this.languageObject) === null || _e === void 0 ? void 0 : _e.buildings.notAvailable}
</span>
</td>
<td></td>
</tr>
<tr>
<td>
<span class="number">
${building.propertyCount}
</span>
</td>
<td>
<span class="heading">
${building.propertyCount === 1
? (_f = this.languageObject) === null || _f === void 0 ? void 0 : _f.buildings.unit
: (_g = this.languageObject) === null || _g === void 0 ? void 0 : _g.buildings.units}
</span>
</td>
<td>
<div
class="all-elements-link"
=${() => this.onViewAllProperties(building)}
>
${(_h = this.languageObject) === null || _h === void 0 ? void 0 : _h.buildings.viewAllUnits}
<img src=${arrowIcon} class="arrow-icon" />
</div>
</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}>
${(_a = this.languageObject) === null || _a === void 0 ? void 0 : _a.general.back}
</button>
</div>
</td>
</tr>
</tfoot>
</table>
`;
}
else
return html ``;
}
}
__decorate([
property()
], BuildingsTable.prototype, "isLoadingMoreData", void 0);
__decorate([
property()
], BuildingsTable.prototype, "languageObject", void 0);
__decorate([
property()
], BuildingsTable.prototype, "buildingsData", void 0);
customElements.define("buildings-table", BuildingsTable);
//# sourceMappingURL=buildings-table.js.map