@boligmappa/web-component-search
Version:
Web component for interacting with the Boligmappa APIs
280 lines • 10.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 { radioButtonStyles } from "../../helpers/css-modules/buttonStyles";
export class ProjectsTable extends LitElement {
constructor() {
super();
this.projectsData = [];
this.building = {};
this.selectedProject = -1;
}
static get styles() {
return [
buttonStyles,
tableStyles,
innerTableStyles,
radioButtonStyles,
css `
.properties-tablecell-container {
position: relative;
padding-left: 1rem;
padding-top: 1rem;
padding-bottom: 0.5rem;
}
.bygningstype {
padding-right: 1rem;
}
.projectTypeHeader {
margin-left: 10%;
}
th {
position: sticky;
top: 0;
}
th > .properties-tablecell-container {
width: 150%;
}
`,
];
}
firstUpdated() {
var _a;
this.tableBody = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("propertiesTableBody");
}
onRadioButtonClicked(index) {
if (index === this.selectedProject) {
this.selectedProject = -1;
}
else {
this.selectedProject = index;
}
}
getButtonClass(index) {
if (index === this.selectedProject) {
return "square-radio square-radio--clicked";
}
else
return "square-radio";
}
backButtonClicked() {
const options = {
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("back-clicked", options));
}
mapToOdd(num) {
return 2 * num + 1;
}
mapToEven(num) {
return 2 * num;
}
isOdd(num) {
return Boolean(num % 2);
}
confirmButtonClicked() {
let selectedProjectObject;
if (this.isOdd(this.selectedProject)) {
selectedProjectObject =
this.getOwnedProjects()[(this.selectedProject - 1) / 2];
}
else {
selectedProjectObject =
this.getInvitedProjects()[this.selectedProject / 2];
}
const options = {
detail: {
projectCode: selectedProjectObject.code,
},
bubbles: true,
composed: true,
};
this.dispatchEvent(new CustomEvent("property-confirmed", options));
}
getOwnedProjects() {
return this.projectsData.filter((project) => project.isOwner === true);
}
getInvitedProjects() {
return this.projectsData.filter((project) => project.isOwner === false);
}
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() {
if (this.projectsData !== undefined) {
return html `
<table class="results-table">
<tbody
id="projectsTableBody"
=${() => this.loadMorePropertiesIfScrolledToBottom()}
}}
>
<tr>
<th>
<div class="properties-tablecell-container">
<span class="projectTypeHeader">Dine Prosjekter</span>
</div>
</th>
</tr>
${this.getOwnedProjects().map((project, index) => html `<tr>
<td>
<div class="properties-tablecell-container">
<table class="inner-table">
<tbody>
<col style="width: 10%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr>
<td class="radio-button-container">
<div
=${() => this.onRadioButtonClicked(this.mapToOdd(index))}
class=${this.getButtonClass(this.mapToOdd(index))}
>
<div class="square-radio--content"></div>
</div>
</td>
<td>
<span class="inner-header"> Prosjektnavn </span>
<br />
<span class="inner-text"> ${project.name} </span>
</td>
<td>
<span class="inner-header"> Prosjektnummer </span>
<br />
<span class="inner-text"> ${project.code} </span>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header">
Ansvarlig Virksomhet
</span>
<br />
<span class="inner-text">
${project.ownedBy.company}
</span>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>`)}
<tr>
<th>
<div class="properties-tablecell-container">
<span class="projectTypeHeader">Inviterte Prosjekter</span>
</div>
</th>
</tr>
${this.getInvitedProjects().map((project, index) => html `<tr>
<td>
<div class="properties-tablecell-container">
<table class="inner-table">
<tbody>
<col style="width: 10%" />
<col style="width: 50%" />
<col style="width: 40%" />
<tr>
<td class="radio-button-container">
<div
=${() => this.onRadioButtonClicked(this.mapToEven(index))}
class=${this.getButtonClass(this.mapToEven(index))}
>
<div class="square-radio--content"></div>
</div>
</td>
<td>
<span class="inner-header"> Prosjektnavn </span>
<br />
<span class="inner-text"> ${project.name} </span>
</td>
<td>
<span class="inner-header"> Prosjektnummer </span>
<br />
<span class="inner-text"> ${project.code} </span>
</td>
</tr>
<tr>
<td></td>
<td>
<span class="inner-header"> Adresse </span>
<br />
<span class="inner-text"> ${"Temp Adresse"} </span>
</td>
<td>
<span class="inner-header">
Ansvarlig Virksomhet
</span>
<br />
<span class="inner-text">
${project.ownedBy.company}
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>`)}
</tbody>
<tfoot>
<tr>
<td>
<div class="button-container">
<button class="back-button" =${this.backButtonClicked}>
Tilbake
</button>
<button
=${this.confirmButtonClicked}
class=${this.selectedProject > -1
? "confirm-button"
: "confirm-button disabled"}
>
Bekreft
</button>
</div>
</td>
</tr>
</tfoot>
</table>
`;
}
else
return html ``;
}
}
__decorate([
property({
hasChanged(newVal, oldVal) {
return JSON.stringify(newVal) !== JSON.stringify(oldVal);
},
})
], ProjectsTable.prototype, "projectsData", void 0);
__decorate([
state()
], ProjectsTable.prototype, "selectedProject", void 0);
customElements.define("projects-table", ProjectsTable);
//# sourceMappingURL=projects-table.js.map