@progressive-development/pd-order
Version:
Progressive Development Order Component
384 lines (371 loc) • 12.9 kB
JavaScript
import { css, LitElement, nothing, html } from 'lit';
import { property, state } from 'lit/decorators.js';
import { localized, msg } from '@lit/localize';
import '@progressive-development/pd-content/pd-collapse-group';
import '@progressive-development/pd-content/pd-collapse';
import '@progressive-development/pd-contact/pd-contact';
import '@progressive-development/pd-forms/pd-checkbox';
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
for (var i = decorators.length - 1, decorator; i >= 0; i--)
if (decorator = decorators[i])
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
if (kind && result) __defProp(target, key, result);
return result;
};
let PdOrderContacts = class extends LitElement {
constructor() {
super(...arguments);
this.summary = false;
this.contactTitle = {};
this.requiredFields = [];
this.withPayment = false;
this.withPropertyOwner = false;
this.withPropertyDate = false;
this._ownBillingContact = false;
this._ownAdminContact = false;
this._isPropertyOwner = false;
}
update(changedProps) {
if (changedProps.has("billingContact")) {
this._ownBillingContact = !!this.billingContact;
}
if (changedProps.has("adminContact")) {
this._ownAdminContact = !!this.adminContact;
}
if (changedProps.has("propertyContact")) {
this._isPropertyOwner = !!this.propertyContact;
}
super.update(changedProps);
}
render() {
return this.summary ? this._renderSummary() : this._renderEditContacts();
}
_renderEditContacts() {
return html`
<pd-collapse-group>
<pd-collapse id="orderContactCollapseId">
<div slot="header">
${this.contactTitle.orderInputContact ?? msg("Adresse", {
id: "pd.order.contacts.orderContact.inputHeader"
})}
</div>
<pd-contact
id="orderContactId"
class="collapse-contact"
slot="content"
.requiredFields="${this.requiredFields}"
.contact="${this.orderContact}"
.match="${this.match}"
?withPropertyDate="${!this._isPropertyOwner && this.withPropertyDate}"
></pd-contact>
</pd-collapse>
${this.withPayment ? html`
<pd-collapse id="billingContactCollapseId">
<div slot="header">
${this.contactTitle.billingInputContact ?? msg("Rechnungsadresse (optional)", {
id: "pd.order.contacts.billingContact.inputHeader"
})}
</div>
<div slot="content">
${this._ownBillingContact ? html`
<p>
<a @click="${() => this._ownBillingContact = false}"
>${msg(
"Kundenadresse als Rechnungsadresse verwenden"
)}</a
>
</p>
<pd-contact
id="billingContactId"
class="collapse-contact"
.requiredFields="${this.requiredFields}"
.contact="${this.billingContact}"
></pd-contact>
` : html`
<p>
${msg(
"Rechnungsadresse entspricht der Kundenadresse."
)}
</p>
<p>
<a @click=${() => this._ownBillingContact = true}
>${msg("Neue Rechnungsadresse hinzufügen")}</a
>
</p>
`}
</div>
</pd-collapse>
` : nothing}
${this.withPropertyOwner ? html`
<div class="property-owner-box">
<pd-checkbox
id="isPropertyOwnerId"
initValue="${this._isPropertyOwner}"
@pd-form-element-change="${(e) => {
this._isPropertyOwner = e.detail.value === "true";
}}"
>
${msg("Ist der Kunde Vermieter?", {
id: "pd.order.contacts.propertyContact.checkBox"
})}
</pd-checkbox>
${this._isPropertyOwner ? html`
<pd-collapse
id="propertyContactCollapseId"
style="padding-top: 20px;"
>
<div slot="header">
${this.contactTitle.propertyInputContact ?? msg("Adresse der Immobilie")}
</div>
<div slot="content">
<pd-contact
id="propertyContactId"
class="collapse-contact"
.requiredFields="${[
"street",
"streetNr",
"zip",
"city"
]}"
.inputFields="${[
"street",
"city",
"additionalHint"
]}"
.contact="${this.propertyContact}"
?withPropertyDate="${this.withPropertyDate}"
></pd-contact>
</div>
</pd-collapse>
<pd-collapse id="adminContactCollapseId">
<div slot="header">
${this.contactTitle.adminInputContact ?? msg("Adresse der Verwaltung (optional)")}
</div>
<div slot="content">
${this._ownAdminContact ? html`
<p>
<a
@click="${() => this._ownAdminContact = false}"
>${msg(
"Kundenadresse als Verwaltungsadresse verwenden"
)}</a
>
</p>
<pd-contact
id="adminContactId"
class="collapse-contact"
.requiredFields="${this.requiredFields}"
.contact="${this.adminContact}"
></pd-contact>
` : html`
<p>
${msg(
"Verwaltungsadresse entspricht der Kundenadresse."
)}
</p>
<p>
<a
@click="${() => this._ownAdminContact = true}"
>${msg(
"Neue Verwaltungsadresse hinzufügen"
)}</a
>
</p>
`}
</div>
</pd-collapse>
` : nothing}
</div>
` : nothing}
</pd-collapse-group>
`;
}
_renderSummary() {
return html`
<div class="summary-box">
${this.orderContact ? html`
<pd-contact
addressTitle="${this.contactTitle.orderSummaryContact ?? msg("Adresse")}"
.contact="${this.orderContact}"
summary
></pd-contact>
` : nothing}
${this.billingContact ? html`
<pd-contact
addressTitle="${this.contactTitle.billingSummaryContact ?? msg("Rechnungsadresse")}"
.contact="${this.billingContact}"
summary
></pd-contact>
` : nothing}
${this.propertyContact ? html`
<pd-contact
addressTitle="${this.contactTitle.propertySummaryContact ?? msg("Immobilie")}"
.contact="${this.propertyContact}"
summary
></pd-contact>
` : nothing}
${this.adminContact ? html`
<pd-contact
addressTitle="${this.contactTitle.adminSummaryContact ?? msg("Verwaltung")}"
.contact="${this.adminContact}"
summary
></pd-contact>
` : nothing}
</div>
`;
}
get valid() {
for (const { id, condition = true } of this._getCollapseMap()) {
if (!condition) continue;
const element = this.shadowRoot?.getElementById(id);
if (!element?.valid) {
return false;
}
}
return true;
}
async triggerValidate() {
let firstInvalidCollapseId = null;
const collapseMap = this._getCollapseMap();
console.log("Map: ", collapseMap);
for (const { id, collapse, condition = true } of collapseMap) {
if (!condition) continue;
const element = this.shadowRoot?.getElementById(id);
if (!element) continue;
const result = await element.triggerValidate();
console.log("PdContact triggerValidate: ", result);
if (!result && !firstInvalidCollapseId) {
firstInvalidCollapseId = collapse;
}
}
if (firstInvalidCollapseId) {
console.log("PdContact open failed: ", firstInvalidCollapseId);
const collapseEl = this.shadowRoot?.getElementById(
firstInvalidCollapseId
);
if (collapseEl) {
collapseEl.active = true;
}
return false;
}
return true;
}
getValues() {
const contactValues = {};
for (const { id, condition = true } of this._getCollapseMap()) {
if (!condition) continue;
contactValues[id] = this.shadowRoot?.getElementById(id)?.getValues();
}
return contactValues;
}
_getCollapseMap() {
return [
{ id: "orderContactId", collapse: "orderContactCollapseId" },
{
id: "billingContactId",
collapse: "billingContactCollapseId",
condition: this._ownBillingContact
},
{
id: "propertyContactId",
collapse: "propertyContactCollapseId",
condition: this._isPropertyOwner
},
{
id: "adminContactId",
collapse: "adminContactCollapseId",
condition: this._isPropertyOwner && this._ownAdminContact
}
];
}
};
PdOrderContacts.styles = [
css`
:host {
display: block;
}
p {
color: var(--pd-default-font-content-col);
font-size: var(--pd-default-font-content-size);
font-family: var(--pd-default-font-content-family);
max-width: 1000px;
}
a {
cursor: pointer;
font-family: var(--pd-default-font-link-family);
font-size: var(--pd-default-font-link-size);
color: var(--pd-default-font-link-col);
}
a:hover {
color: var(--pd-default-font-link-col-hover);
}
.collapse-contact {
padding: 10px;
}
.summary-box {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.summary-box pd-contact {
min-width: 150px;
}
.property-owner-box {
border: 2px solid #007b8f;
border-radius: 8px;
padding: 16px;
margin: 16px 0;
background-color: #f8fafb;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
`
];
__decorateClass([
property({ type: Boolean })
], PdOrderContacts.prototype, "summary", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "contactTitle", 2);
__decorateClass([
property({ type: Array })
], PdOrderContacts.prototype, "requiredFields", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "orderContact", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "billingContact", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "adminContact", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "propertyContact", 2);
__decorateClass([
property({ type: Boolean })
], PdOrderContacts.prototype, "withPayment", 2);
__decorateClass([
property({ type: Boolean })
], PdOrderContacts.prototype, "withPropertyOwner", 2);
__decorateClass([
property({ type: Boolean })
], PdOrderContacts.prototype, "withPropertyDate", 2);
__decorateClass([
property({ type: Object })
], PdOrderContacts.prototype, "match", 2);
__decorateClass([
state()
], PdOrderContacts.prototype, "_ownBillingContact", 2);
__decorateClass([
state()
], PdOrderContacts.prototype, "_ownAdminContact", 2);
__decorateClass([
state()
], PdOrderContacts.prototype, "_isPropertyOwner", 2);
PdOrderContacts = __decorateClass([
localized()
], PdOrderContacts);
export { PdOrderContacts };