@boligmappa/web-component-search/lib/results-table/tables/addresses-table.js

Web component for interacting with the Boligmappa APIs

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, tableStyles } from "../../helpers/css-modules/styles";
import arrowIcon from "../../assets/icons/arrow_forward.svg";
import "./empty-table";
export class AddressesTable extends LitElement {
    constructor() {
        super();
        this.addressesData = [];
        this.searchText = "";
        this.potentialHouseNumbers = [];
        this.isLoadingMoreData = false;
    }
    static get styles() {
        return [
            buttonStyles,
            tableStyles,
            css `
        tr:hover {
          cursor: pointer;
        }
        .arrow-icon {
          height: 20px;
          display: inline-block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(-50%, -50%);
        }
      `,
        ];
    }
    firstUpdated() {
        var _a;
        this.tableBody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("addressTableBody");
    }
    update(changedProperties) {
        if (changedProperties.has("searchText")) {
            this.potentialHouseNumbers = this.getPotentialHouseNumbers(this.searchText);
        }
        super.update(changedProperties);
    }
    getPotentialHouseNumbers(searchText) {
        if (!searchText) {
            return [];
        }
        const stringParts = searchText.split(" ");
        const stringsOfOnlyDigits = stringParts.filter((stringpart) => /^\d+$/.test(stringpart) === true);
        return stringsOfOnlyDigits;
    }
    onAddressClicked(address) {
        const options = {
            detail: { address },
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent("address-clicked", options));
    }
    backButtonClicked() {
        const options = {
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent("back-clicked", options));
    }
    loadMoreAddresses() {
        const options = {
            bubbles: true,
            composed: true,
        };
        this.dispatchEvent(new CustomEvent("load-more-addresses", options));
    }
    loadMoreAddressesIfScrolledToBottom() {
        if (!this.tableBody) {
            return;
        }
        if (this.tableBody.scrollHeight - Math.ceil(this.tableBody.scrollTop) ===
            this.tableBody.clientHeight) {
            this.loadMoreAddresses();
        }
    }
    getAddressSubnumber(address) {
        if (address.houseSubNumber === null) {
            return "";
        }
        return address.houseSubNumber;
    }
    filteredAddresses() {
        if (this.potentialHouseNumbers.length === 0) {
            return this.addressesData;
        }
        const words = this.searchText.split(" ");
        const numbers = words.filter((stringpart) => /^\d+$/.test(stringpart) === true);
        const searchTextEndsWithSpace = this.searchText.slice(-1) === " ";
        const lastWord = words.at(-1);
        const lastWordIsNumber = /^\d+$/.test(lastWord);
        if (lastWordIsNumber && !searchTextEndsWithSpace) {
            const filteredAddresses = this.addressesData.filter((address) => numbers.includes(address.houseNumber.toString()) ||
                address.houseNumber.toString().startsWith(lastWord));
            return filteredAddresses;
        }
        else {
            const filteredAddresses = this.addressesData.filter((address) => numbers.includes(address.houseNumber.toString()));
            return filteredAddresses;
        }
    }
    render() {
        if (this.filteredAddresses().length === 0) {
            return html `<empty-table></empty-table>`;
        }
        if (this.addressesData) {
            return html `
        <table class="results-table">
          <tbody
            id="addressTableBody"
            @scroll=${() => this.loadMoreAddressesIfScrolledToBottom()}
            }}
          >
            ${this.filteredAddresses().map((address) => html `<tr
                @click=${() => this.onAddressClicked(address)}
              >
                <td>
                  <div class="tablecell-container">
                    <div class="results-text">
                      ${address.streetName +
                " " +
                address.houseNumber +
                " " +
                this.getAddressSubnumber(address)}
                      <br />
                      <span class="postal-text"
                        >${address.postalCode + " " + address.postalPlace}</span
                      >
                    </div>
                    <img src=${arrowIcon} class="arrow-icon" />
                  </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" @click=${this.backButtonClicked}>
                    Tilbake
                  </button>
                </div>
              </td>
            </tr>
          </tfoot>
        </table>
      `;
        }
        else
            return html ``;
    }
}
__decorate([
    property()
], AddressesTable.prototype, "isLoadingMoreData", void 0);
__decorate([
    property({
        hasChanged(newVal, oldVal) {
            return JSON.stringify(newVal) !== JSON.stringify(oldVal);
        },
    })
], AddressesTable.prototype, "addressesData", void 0);
__decorate([
    property()
], AddressesTable.prototype, "searchText", void 0);
__decorate([
    state()
], AddressesTable.prototype, "potentialHouseNumbers", void 0);
customElements.define("addresses-table", AddressesTable);
//# sourceMappingURL=addresses-table.js.map