address observations, list and view edit (TODO save)

client/client/src/address-edit/address-edit.html

@@ -46,6 +46,47 @@
                 <vn-textfield vn-one label="Phone" field="$ctrl.address.phone"></vn-textfield>
                 <vn-textfield vn-one label="Mobile" field="$ctrl.address.mobile"></vn-textfield>
             </vn-horizontal>
+
+            <vn-one margin-medium-top>
+                <vn-title>Notes</vn-title>
+                <mg-ajax path="/client/api/ObservationTypes" options="mgIndex as observationsTypes"></mg-ajax>
+                <vn-horizontal ng-repeat="note in $ctrl.notes track by note.id">
+                    <vn-autocomplete
+                        vn-one
+                        initial-data = "note.observationType"
+                        field = "note.observationTypeFk"
+                        data = "observationsTypes.model"
+                        show-field = "description"
+                        label = "Observation type"
+                        order = "description ASC"
+                        filter-search="{where: {description: {regexp: 'search'}} }"
+                    >
+                        <tpl-item>{{$parent.$parent.item.description}}</tpl-item>
+                    </vn-autocomplete>
+                    <vn-textfield vn-three label="Description" model="note.description"></vn-textfield>
+                    <vn-one pad-medium-top>
+                        <vn-icon
+                            pointer 
+                            medium-grey
+                            icon="remove_circle_outline"
+                            ng-if = "note.showRemoveIcon" 
+                            ng-click="$ctrl.removeNote(note.id)"
+                            >
+                        </vn-icon>
+                        <vn-icon
+                            pointer 
+                            margin-medium-left
+                            orange
+                            icon="add_circle"
+                            ng-if = "note.showAddIcon" 
+                            ng-click="$ctrl.addNote()"
+                        ></vn-icon>  
+                    </vn-one>
+                </vn-horizontal>
+
+            </vn-one>
+
+
         </vn-vertical>
     </vn-card>
     <vn-button-bar>

client/client/src/address-edit/address-edit.js

@@ -1,13 +1,76 @@
 import ngModule from '../module';
 
 export default class Controller {
-    constructor($state) {
+    constructor($state, $http) {
         this.address = {
             id: parseInt($state.params.addressId)
         };
+        this.$http = $http;
+        this.notes = [];
+    }
+
+    _setIconAdd() {
+        if (this.notes.length) {
+            this.notes.forEach(element => {
+                element.showAddIcon = false;
+            });
+            this.notes[this.notes.length - 1].showAddIcon = true;
+        }
+    }
+    _setRemoveAdd() {
+        if (this.notes.length) {
+            this.notes.forEach(element => {
+                element.showRemoveIcon = true;
+            });
+        } else {
+            this.notes = [this._createEmptyNote()];
+        }
+    }
+    _createEmptyNote() {
+        return {id: this._createFakeId(), observationTypeFk: null, description: null, showRemoveIcon: true, showAddIcon: true};
+    }
+    _createFakeId() {
+        let now = Date.now();
+        let random = Math.ceil((Math.random() * 100000) + 1);
+        return `fakeId${now}${random}`;
+    }
+    addNote() {
+        this.notes.push(this._createEmptyNote());
+        this._setIconAdd();
+        this._setRemoveAdd();
+    }
+    removeNote(id) {
+        let found = false;
+        for (let i = 0; i < this.notes.length; i++) {
+            if (this.notes[i].id === id) {
+                this.notes.splice(i, 1);
+                found = true;
+                break;
+            }
+        }
+
+        if (found) {
+            this._setIconAdd();
+            this._setRemoveAdd();
+        }
+    }
+    $onInit() {
+        let filter = {
+            where: {
+                addressFk: this.address.id
+            },
+            include: [
+                {relation: 'observationType'}
+            ]
+        };
+        this.$http.get(`/client/api/AddressObservations?filter=${JSON.stringify(filter)}`).then(res => {
+            this.notes = (res.data && res.data.length) ? res.data : [this._createEmptyNote()];
+            this._setIconAdd();
+            this._setRemoveAdd();
+        });
     }
 }
-Controller.$inject = ['$state'];
+Controller.$inject = ['$state', '$http'];
 
 ngModule.component('vnAddressEdit', {
     template: require('./address-edit.html'),

client/client/src/addresses/addresses.html

@@ -5,21 +5,29 @@
             <vn-horizontal>
                 <vn-title vn-one>Addresses</vn-title>
             </vn-horizontal>
-            <vn-horizontal ng-repeat="i in index.model.items track by i.id" class="pad-medium-top" style="align-items: center;">
+            <vn-horizontal ng-repeat="address in index.model.items track by address.id" class="pad-medium-top" style="align-items: center;">
                 <vn-one border-radius class="pad-small border-solid"
-                    ng-class="{'bg-dark-item': i.isDefaultAddress,'bg-opacity-item': !i.isEnabled && !i.isDefaultAddress}">
+                    ng-class="{'bg-dark-item': address.isDefaultAddress,'bg-opacity-item': !address.isEnabled && !address.isDefaultAddress}">
                     <vn-horizontal style="align-items: center;">
                         <vn-none pad-medium-h style="color:#FFA410;">
-                            <i class="material-icons" ng-if="i.isDefaultAddress">star</i>
+                            <i class="material-icons" ng-if="address.isDefaultAddress">star</i>
-                            <i class="material-icons pointer" ng-if="!i.isDefaultAddress&&i.isEnabled" vn-tooltip="Set as default" tooltip-position="left" ng-click="$ctrl.setDefault(i.id)">star_border</i>
+                            <i class="material-icons pointer" ng-if="!address.isDefaultAddress&&address.isEnabled" vn-tooltip="Set as default" tooltip-position="left" ng-click="$ctrl.setDefault(address.id)">star_border</i>
                         </vn-none>
-                        <vn-one>
+                        <vn-one border-solid-right>
-                            <div><b>{{::i.consignee}}</b></div>
+                            <div><b>{{::address.consignee}}</b></div>
-                            <div>{{::i.street}}</div>
+                            <div>{{::address.street}}</div>
-                            <div>{{::i.city}}, {{::i.province}}</div>
+                            <div>{{::address.city}}, {{::address.province}}</div>
-                            <div>{{::i.phone}}, {{::i.mobile}}</div>
+                            <div>{{::address.phone}}, {{::address.mobile}}</div>
                         </vn-one>
-                        <a vn-auto ui-sref="clientCard.addresses.edit({addressId: {{i.id}}})">
+                        
+                        <vn-vertical vn-one pad-medium-h>
+                            <vn-one ng-repeat="observation in address.observations track by $index" ng-class="{'pad-small-top': $index}">
+                                <b margin-medium-right>{{::observation.observationType.description}}:</b>
+                                <span>{{::observation.description}}</span>
+                            </vn-one>
+                        </vn-vertical>
+                        
+                        <a vn-auto ui-sref="clientCard.addresses.edit({addressId: {{address.id}}})">
                             <vn-icon-button icon="edit"></vn-icon-button>
                         </a>
                     </vn-horizontal>

client/salix/src/styles/font-style.scss

@@ -9,4 +9,16 @@ body {
 }
 html [uppercase], .uppercase {
     text-transform: uppercase;
-}
+}
+
+html [green], .green{color: $color-green}
+html [orange], .orange{color: $color-orange}
+html [white], .white{color: $color-white}
+html [dark], .dark{color: $color-dark}
+html [dark-grey], .dark-grey{color: $color-dark-grey}
+html [light-grey], .light-grey{color: $color-light-grey}
+html [medium-grey], .medium-grey{color: $color-medium-grey}
+html [medium-green], .medium-green{color: $color-medium-green}
+html [medium-orange], .medium-orange{color: $color-medium-orange}
+html [light-green], .light-green{color: $color-light-green}
+html [light-orange], .light-orange{color: $color-light-orange}

karma.conf.js

@@ -61,10 +61,10 @@ module.exports = function(config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: ['ChromeNoSandboxHeadless'],
+        browsers: ['ChromiumNoSandboxHeadless'],
         customLaunchers: {
-            ChromeNoSandboxHeadless: {
+            ChromiumNoSandboxHeadless: {
-                base: 'Chrome',
+                base: 'Chromium',
                 flags: [
                     '--no-sandbox',
                     // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

services/client/common/methods/client/addresses.js

@@ -38,7 +38,8 @@ module.exports = function(Client) {
             },
             skip: (params.page - 1) * params.size,
             limit: params.size,
-            order: ['isDefaultAddress DESC', 'isEnabled DESC']
+            order: ['isDefaultAddress DESC', 'isEnabled DESC'],
+            include: {observations: 'observationType'}
         };
 
         let total = null;

services/client/common/models/address-observation.json

@@ -0,0 +1,34 @@
+{
+    "name": "AddressObservation",
+    "base": "VnModel",
+    "options": {
+        "mysql": {
+          "table": "addressObservation",
+          "database": "vn"
+        }
+    },
+    "properties": {
+      "id": {
+        "type": "Number",
+        "id": true,
+        "description": "Identifier"
+      },
+      "description": {
+        "type": "string",
+        "required": true
+      }
+    },
+    "relations": {
+      "address": {
+        "type": "belongsTo",
+        "model": "Address",
+        "foreignKey": "addressFk"
+      },
+      "observationType": {
+        "type": "belongsTo",
+        "model": "ObservationType",
+        "foreignKey": "observationTypeFk"
+      }
+    }
+  }
+  

services/client/common/models/address.json

@@ -60,6 +60,11 @@
       "type": "belongsTo",
       "model": "AgencyMode",
       "foreignKey": "defaultAgencyFk"
+    },
+    "observations": {
+      "type": "hasMany",
+      "model": "AddressObservation",
+      "foreignKey": "addressFk"
     }
   }
 }

services/client/common/models/observation-type.json

@@ -0,0 +1,22 @@
+{
+    "name": "ObservationType",
+    "base": "VnModel",
+    "options": {
+        "mysql": {
+          "table": "observationType",
+          "database": "vn"
+        }
+    },
+    "properties": {
+      "id": {
+        "type": "Number",
+        "id": true,
+        "description": "Identifier"
+      },
+      "description": {
+        "type": "string",
+        "required": true
+      }
+    }
+  }
+  

services/client/server/model-config.json

@@ -74,5 +74,11 @@
   },
   "Company": {
     "dataSource": "vn"
+  },
+  "AddressObservation": {
+    "dataSource": "vn"
+  },
+  "ObservationType": {
+    "dataSource": "vn"
   }
 }