@progressive-development/pd-contact 0.0.12 → 0.0.14

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "main": "index.js",
   "module": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
     "storybook:build": "npm run analyze -- --exclude dist && build-storybook"
   },
   "dependencies": {
-    "@progressive-development/pd-forms": "0.0.40",
+    "@progressive-development/pd-forms": "0.0.42",
     "lit": "^2.0.2"
   },
   "devDependencies": {

package/src/PdContact.js

@@ -94,6 +94,7 @@
        this._errorMap.set(e.detail.name, '');
        super.requestUpdate();
      });
+     this.addEventListener('validate-form', this._validateForm);
    }
  
    render() {
@@ -106,11 +107,12 @@
  
    _renderEditContact() {
      return html`
-       <pd-form-container>
+       <pd-form-container id="contactContainerId">
          <pd-form-row id="testFormId">
            <pd-radio-group
              class="quarter4"
-             label="Type*"
+             label="Type"
+             required
              @checkbox-changed="${this._switchAddressType}"
              style="--group-gap: 20px;"
            >
@@ -127,16 +129,17 @@
                  <pd-input
                    id="compNameId"
                    class="quarter2"
-                   label="Naam onderneming*"
+                   label="Naam onderneming"
+                   required
                    valueName="companyName"
-                   errorMsg="${this._getErrorMsg('companyName')}"
                  ></pd-input>
                  <pd-input
                    id="vatId"
                    class="quarter2"
-                   label="Ondernemingsnr*"
+                   label="Ondernemingsnr"
+                   required
+                   field-type="vat"
                    valueName="vatNr"
-                   errorMsg="${this._getErrorMsg('vatNr')}"
                  ></pd-input>
                </pd-form-row>
              `
@@ -145,16 +148,16 @@
                  <pd-input
                    id="firstNameId"
                    class="quarter2"
-                   label="Voornaam*"
+                   label="Voornaam"
                    valueName="firstName"
-                   errorMsg="${this._getErrorMsg('firstName')}"
+                   required
                  ></pd-input>
                  <pd-input
                    id="lastNameId"
                    class="quarter2"
-                   label="Naam*"
+                   label="Naam"
                    valueName="lastName"
-                   errorMsg="${this._getErrorMsg('lastName')}"
+                   required
                  ></pd-input>
                </pd-form-row>
              `}
@@ -162,16 +165,16 @@
            <pd-input
              id="streetId"
              class="quarter3"
-             label="Straat*"
+             label="Straat"
              valueName="street"
-             errorMsg="${this._getErrorMsg('street')}"
+             required
            ></pd-input>
            <pd-input
              id="streetNrId"
              class="quarter1"
-             label="Nr*"
+             label="Nr"
              valueName="streetNr"
-             errorMsg="${this._getErrorMsg('streetNr')}"
+             required
            ></pd-input>
          </pd-form-row>
          <pd-form-row class="contact-form">
@@ -188,47 +191,50 @@
                    readonly
                    id="zipId"
                    class="quarter2"
-                   label="Postcode*"
+                   label="Postcode"
                    key="zip"
                    valueName="zip"
                    value="${this.match ? this.match.zip || '' : ''}"
-                   errorMsg="${this._getErrorMsg('zip')}"
+                   required
                  ></pd-input>
                `
              : html`
                  <pd-input
                    id="zipId"
                    class="quarter2"
-                   label="Postcode*"
+                   label="Postcode"
                    key="zip"
+                   field-type="number"
                    valueName="zip"
-                   errorMsg="${this._getErrorMsg('zip')}"
+                   required
                  ></pd-input>
                `}
            <pd-input
              id="cityId"
              class="quarter2"
-             label="Plaats*"
-             valueName="city"
-             errorMsg="${this._getErrorMsg('city')}"
+             label="Plaats"
+             valueName="city"             
+             required
            ></pd-input>
          </pd-form-row>
          <pd-form-row class="contact-form">
            <pd-input
              id="phoneId"
              class="quarter2"
-             label="Telefoon*"
+             label="Telefoon"
              key="phone"
              valueName="phone1"
-             errorMsg="${this._getErrorMsg('phone1')}"
+             field-type="phone"
+             required
            ></pd-input>
            <pd-input
              id="mailId"
              class="quarter2"
-             label="E-mail*"
+             label="E-mail"
              key="mail"
+             field-type="mail"
              valueName="email"
-             errorMsg="${this._getErrorMsg('email')}"
+             required
            ></pd-input>
          </pd-form-row>
        </pd-form-container>
@@ -271,6 +277,7 @@
      this.business = e.detail.name === 'business';
    }
  
+   /*
    validateInput() {
      const matchForValidate = this.match || {};
  
@@ -377,27 +384,68 @@
        }
      });
    }
- 
-   static _mailIsValid(email) {
-     const mValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
-     return mValid;
-   }
+   */
+
+   _validateForm(e) {
+    if (e.detail) {
+      this.shadowRoot.getElementById("contactContainerId").dispatchEvent(
+        new CustomEvent("validate-form", {
+          detail: e.detail
+        })
+      );
+
+      // set prepared form, if no validation error occured
+      if (e.detail.errorMap.size === 0) {
+        e.detail.formData[this.id] = this._setFormData();
+      }
+    }
+  }
+
+  _setFormData() {
+    const companyName = this.business
+       ? this.shadowRoot.getElementById('compNameId').value
+       : undefined;
+     const vatNr = this.business
+       ? this.shadowRoot.getElementById('vatId').value
+       : undefined;
+     const firstName = this.business
+       ? undefined
+       : this.shadowRoot.getElementById('firstNameId').value;
+     const lastName = this.business
+       ? undefined
+       : this.shadowRoot.getElementById('lastNameId').value;
+     const street = this.shadowRoot.getElementById('streetId').value;
+     const streetNr = this.shadowRoot.getElementById('streetNrId').value;
+     const additionalHint =
+       this.shadowRoot.getElementById('additionalHintId').value;
+     const zip = this.shadowRoot.getElementById('zipId').value;
+     const city = this.shadowRoot.getElementById('cityId').value;
+     const phone1 = this.shadowRoot.getElementById('phoneId').value;
+     const email = this.shadowRoot.getElementById('mailId').value;
+
+     this.contact = {
+      business: this.business,
+      companyName,
+      vatNr,
+      firstName,
+      lastName,
+      street,
+      streetNr,
+      additionalHint,
+      zip,
+      city,
+      phone1,
+      email,
+    };
+
+    return {...this.contact};
+  }
  
    static _vatIsValid(vat) {
      const mValid = /^BE[0-9]{10}/.test(vat);
      return mValid;
    }
  
-   static _phoneIsValid(nr) {
-     // Valid +49 830 9001 | 49 221 123 | 08912379
-     const mValid = /^\+?[0-9 ]{7,15}$/.test(nr);
-     return mValid;
-   }
- 
-   _getErrorMsg(itemId) {
-     return this._errorMap.get(itemId) || '';
-   }
- 
    _getFullName() {
      return PdContact._getFullVal(this.contact.firstName, this.contact.lastName);
    }