@progressive-development/pd-contact 0.1.59 → 0.1.61

package/package.json

@@ -3,7 +3,7 @@
   "description": "Progressive Development Contact component",
   "license": "SEE LICENSE IN LICENSE",
   "author": "PD Progressive Development",
-  "version": "0.1.59",
+  "version": "0.1.61",
   "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.2.12",
+    "@progressive-development/pd-forms": "^0.2.13",
     "@progressive-development/pd-shared-styles": "^0.1.1",
     "lit": "^2.2.0"
   },

package/src/PdContact.js

@@ -62,11 +62,7 @@
      return {
        
        addressTitle: { type: String },
-       addressRef: { type: String },
-       /**
-        * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
-        */
-       business: { type: Boolean },
+       addressRef: { type: String },       
        /**
         * summary (true) or view (false) contact data
         */
@@ -77,21 +73,32 @@
        requiredFields: { type: Array },
        contact: { type: Object },
        match: { type: Object },
+       /**
+        * address type, business (true) or private (false), refactor, ist state internal? => _business, state:true
+        */
+       _business: { type: Boolean, state: true },
        _errorMap: { type: Object },
      };
    }
 
-   constructor() {
-     super();
-     this.addressTitle = 'Adres';     
-     this.requiredFields = [];
-     this.summary = false;
-     this.business = false;
-     this.match = {};
-     this._errorMap = new Map();
-   }
+  constructor() {
+    super();
+    this.addressTitle = 'Adres';     
+    this.requiredFields = [];
+    this.summary = false;    
+    this.match = {};
+    this._business = false;
+    this._errorMap = new Map();
+  }
+
+  update(changedProperties) {
+    if (changedProperties.has("contact") && this.contact) {
+      this._business = this.contact.business;
+    }
+    super.update(changedProperties);
+  }   
 
-   connectedCallback() {
+  connectedCallback() {
     super.connectedCallback();
     // add validation event listener
     this.addEventListener('validate-form', this._validateForm);
@@ -103,13 +110,13 @@
     this.removeEventListener('validate-form', this._validateForm);
   }
 
-   firstUpdated() {
-     this.addEventListener('key-pressed', e => {
-       this._errorMap.set(e.detail.name, '');
-       super.requestUpdate();
-     });
+  firstUpdated() {
+    this.addEventListener('key-pressed', e => {
+      this._errorMap.set(e.detail.name, '');
+      super.requestUpdate();
+    });
 
-     // first validation if form is already filled (edit)
+      // first validation if form is already filled (edit)
     if (this.contact) {
       const detail = {
         errorMap: new Map()
@@ -118,7 +125,7 @@
         new CustomEvent("validate-form", {detail})
       );
     }
-   }
+  }
 
    render() {
      return html`
@@ -147,7 +154,7 @@
            </pd-radio-group>
          </pd-form-row>
 
-         ${this.business
+         ${this._business
            ? html`
                <pd-form-row class="contact-form">
                  <pd-input
@@ -155,6 +162,7 @@
                    class="quarter2"
                    label="Naam onderneming"
                    ?required="${this._isRequired("companyName")}"
+                   value="${this.contact ? this.contact.companyName : ""}"
                    valueName="companyName"
                    autoCompleteName="organization"
                  ></pd-input>
@@ -165,6 +173,7 @@
                    ?required="${this._isRequired("vatNr")}"
                    field-type="vat"
                    valueName="vatNr"
+                   value="${this.contact ? this.contact.vatNr : ""}"
                    autoCompleteName="vat"
                  ></pd-input>
                </pd-form-row>
@@ -319,7 +328,7 @@
    }
 
    _switchAddressType(e) {
-     this.business = e.detail.name === 'business';
+     this._business = e.detail.name === 'business';
    }
 
    _isRequired(field) {
@@ -452,16 +461,16 @@
   }
 
   _setFormData() {
-    const companyName = this.business
+    const companyName = this._business
        ? this.shadowRoot.getElementById('compNameId').value
        : undefined;
-     const vatNr = this.business
+     const vatNr = this._business
        ? this.shadowRoot.getElementById('vatId').value
        : undefined;
-     const firstName = this.business
+     const firstName = this._business
        ? undefined
        : this.shadowRoot.getElementById('firstNameId').value;
-     const lastName = this.business
+     const lastName = this._business
        ? undefined
        : this.shadowRoot.getElementById('lastNameId').value;
      const street = this.shadowRoot.getElementById('streetId').value;
@@ -471,10 +480,10 @@
      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;
+     const email = this.shadowRoot.getElementById('mailId').value;     
 
-     this.contact = {
-      business: this.business,
+    return {
+      business: this._business,
       companyName,
       vatNr,
       firstName,
@@ -487,8 +496,6 @@
       phone1,
       email,
     };
-
-    return {...this.contact};
   }
 
    _getFullName() {

package/stories/index.stories.js

@@ -32,6 +32,24 @@ function TemplateView({summary}) {
                            }}"></pd-contact>`;
 }
 
+function TemplateViewBusiness({summary}) {
+  console.log(summary);
+  return html`    
+    <h3>View Contact</h3>
+    <pd-contact ?summary="${summary}" .contact="${{
+                           business: true,
+                           companyName: 'PD Progressive Develpoment', 
+                           vatNr: "DE0123456789",
+                           street: 'Musterstrasse',
+                           streetNr: '23b',
+                           zip: '9040',
+                           city: 'Gent',
+                           phone1: '0221 992344234',
+                           mobil: '0175/9923443',
+                           email: 'peter@muster.be'
+                           }}"></pd-contact>`;
+}
+
 export const ContactForm = Template.bind({});
 ContactForm.args = {  
 };
@@ -45,3 +63,8 @@ export const ContactPreparedForm = TemplateView.bind({});
 ContactView.args = {  
   summary: "false"
 };
+
+export const ContactPreparedFormCompany = TemplateViewBusiness.bind({});
+ContactView.args = {  
+  summary: "false"
+};