Merge pull request #192 from xdoo/_#175

#175
rowe42 · Feb 14, 2018 · b529a45 · b529a45
2 parents 540d993 + 1b6c49a
commit b529a45
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 43 deletions.
diff --git a/bower.json b/bower.json
@@ -34,7 +34,8 @@
     "web-animations-js": "^2.3.1",
     "paper-dialog": "PolymerElements/paper-dialog#^2.0.1",
     "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.1.0",
-    "halson": "^3.0.0"
+    "halson": "^3.0.0",
+    "paper-dropdown": "pushkar8723/paper-dropdown#^2.0.0"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",

diff --git a/locales/animad_locales.json b/locales/animad_locales.json
@@ -127,6 +127,12 @@
         "relation_search_employmentDate": "",
         "employmentDate_error": "Please give a past date!",
         "skill": "Skills",
+        "items_selected": "items selected",
+        "skill.cleaning": "Cleaning",
+        "skill.feeding": "Feeding",
+        "skill.breeding": "Breeding",
+        "skill.paperwork": "Paperwork",
+        "skill.taxes": "Taxes",                
         "relation_search_skill": "",
         "skill_error": "",
         "salary": "Gehalt",
@@ -292,6 +298,12 @@
         "relation_search_employmentDate": "",
         "employmentDate_error": "Geben Sie bitte ein Einstellungsdatum in der Vergangenheit an!",
         "skill": "Erfahrung",
+        "items_selected": "Elemente gewählt",                
+        "skill.cleaning": "Putzen",
+        "skill.feeding": "Füttern",
+        "skill.breeding": "Züchten",
+        "skill.paperwork": "Büroarbeit",
+        "skill.taxes": "Steuern",
         "relation_search_skill": "",
         "skill_error": "",
         "salary": "Gehalt",

diff --git a/src/animad-keeper/animad-keeper-create-form.html b/src/animad-keeper/animad-keeper-create-form.html
@@ -35,11 +35,27 @@
                 @apply --animad-keeper-create-form;
             }
         </style>
+
+       <!-- Routing Support -->
+        <app-location
+          route="{{route}}"
+          url-space-regex="^[[rootPath]]"
+          use-hash-as-path>
+      </app-location>
+      <app-route
+          route="{{route}}"
+          pattern="[[rootPath]]:page"
+          data="{{routeData}}"
+          active="{{active}}"
+          tail="{{subroute}}">
+      </app-route>
+
         <!--
             Das vorgefertigte Formular.
         -->
         <form class="animad-keeper-create-form">
-            <animad-keeper-form id="customform" data="{{data}}" auto-validate></animad-keeper-form>
+            <animad-keeper-form id="customform" data="{{data}}" 
+              lists="{{lists}}" auto-validate></animad-keeper-form>
             <!-- GENERATOR hier kommen die Templates für die Relationen hin -->
         </form>
         <!-- 
@@ -52,7 +68,7 @@
             </paper-button>
         </template>
         <template is="dom-if" if="{{cancelPath}}">
-            <paper-button class="cancel" on-tap="_navigateTo" raised>
+            <paper-button class="cancel" on-tap="_cancelEntity" raised>
                 <iron-icon icon="animad-icons:close-circle"></iron-icon>
                 [[t('button_cancel')]]
             </paper-button>

diff --git a/src/animad-keeper/animad-keeper-form.html b/src/animad-keeper/animad-keeper-form.html
@@ -4,6 +4,7 @@
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="../../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../../bower_components/paper-dropdown/paper-dropdown.html">
 
 <!-- custom behaviors -->
 <link rel="import" href="../behaviors/animad-i18n-behavior.html">
@@ -15,27 +16,27 @@
             .animad-keeper-form {
                 @apply --animad-keeper-form;
             }
-    
+
             .animad-keeper-firstName-field {
                 @apply --animad-keeper-firstName-field;
             }
-    
+
             .animad-keeper-lastName-field {
                 @apply --animad-keeper-lastName-field;
             }
-    
+
             .animad-keeper-employmentDate-field {
                 @apply --animad-keeper-employmentDate-field;
             }
-    
+
             .animad-keeper-skill-field {
                 @apply --animad-keeper-skill-field;
             }
-    
+
             .animad-keeper-birthday-field {
                 @apply --animad-keeper-birthday-field;
             }
-    
+
             .animad-keeper-salary-field {
                 @apply --animad-keeper-salary-field;
             }
@@ -81,18 +82,30 @@
                         pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" 
                         required>
                     </paper-input>
-                    <paper-dropdown-menu 
+                    <paper-dropdown class="animad-keeper-skill-field"
+                        id="keeper-skill" 
+                        label="[[t('skill')]]" value="{{data.skill}}" 
+                        searchable="true" multi="true"
+                        > 
+                        <!--in paper-dropdown ergänzen, sobald pull request durch ist-->
+                        <!--multi-label="[[t('items-selected')]]"-->
+                        <template is="dom-repeat" items="{{lists.skill}}">
+                            <paper-item value$="[[item]]">[[translate('skill',item)]]</paper-item>
+                        </template>
+                    </paper-dropdown>
+                     <!--Alternative mit Paper-Dropdown-Menu; Problem: man kann nur immer 1 Element anwählen, dann schließt das Dropdown; nur das erste Element wird dann angezeigt-->
+<!--                    <paper-dropdown-menu 
                         class="animad-keeper-skill-field"
                         id="keeper-skill" 
                         label="[[t('skill')]]" 
-                        value="{{data.skill}}" 
                         required>
-                        <paper-listbox slot="dropdown-content">
-                            <paper-item>Putzen</paper-item>
-                            <paper-item>Füttern</paper-item>
-                            <paper-item>Verwaltung</paper-item>
+                        <paper-listbox multi attr-for-selected="key" selected-values="{{data.skill}}" slot="dropdown-content">
+                            <template is="dom-repeat" items="{{lists.skill}}">
+                                <paper-item key="[[item]]">[[translate('skill',item)]]</paper-item>
+                            </template>
                         </paper-listbox>
-                    </paper-dropdown-menu>
+                    </paper-dropdown-menu>-->
+
                     <paper-input
                         class="animad-keeper-birthday-field" 
                         id="keeper-birthday"
@@ -140,7 +153,9 @@
          *
          */
         class AnimadKeeperForm extends mix(Polymer.Element).with(AnimadI18nBehavior) {
-            static get is() { return 'animad-keeper-form'; }
+            static get is() {
+                return 'animad-keeper-form';
+            }
 
             static get properties() {
                 return {
@@ -149,17 +164,19 @@
                      */
                     data: {
                         type: Object,
-                        value() {
-                            return {}
-                        },
+                        notify: true,
+                        observer: '_setListObjects'
+                    },
+                    lists: {
+                        type: Object,
                         notify: true
                     },
                     /*
                      * Soll das Formular automatisch validiert werden?
                      */
                     autoValidate: {
-                       type:  Boolean,
-                       value: false
+                        type: Boolean,
+                        value: false
                     },
                     /*
                      * Soll das Formular nur lesend dargestellt werden?
@@ -193,16 +210,36 @@
                 }
             }
 
+            _setListObjects(data) {
+                if (!data) {
+                    data = {}
+                }
+
+                //Leere Liste für Skills anlegen
+                if (!data.skill) {
+                    data.skill = [];
+                    this.notifyPath('data.skill');
+                }
+            }
+
             /*
              * Diese Methode validiert das Formular. Sie kann von
              * 'aussen' aufgerufen werden. 
              */
-             validate() {
-                 //HACK in order to get the keeper saved. Fixme!!!
-                this.data.skill = ['cleaning'];
+            validate() {
                 var valid = this.shadowRoot.querySelector('#iform').validate();
                 return valid;
-            }            
+            }
+
+            /**
+             * Methode ist nötig, da im Text Binding keine String-Concatenation möglich ist.
+             * @returns die übergebenen Parameter werden konkateniert und dann als Key für die Übersetzung genommen
+             */
+            translate() {
+                var joined = Array.prototype.join.call(arguments, '.');
+                return this.t(joined);
+            }
+
         }
 
         customElements.define(AnimadKeeperForm.is, AnimadKeeperForm);

diff --git a/src/animad-keeper/animad-keeper-update-form.html b/src/animad-keeper/animad-keeper-update-form.html
@@ -34,11 +34,25 @@
                 @apply --animad-keeper-update-form;
             }
         </style>
+       <!-- Routing Support -->
+        <app-location
+          route="{{route}}"
+          url-space-regex="^[[rootPath]]"
+          use-hash-as-path>
+      </app-location>
+      <app-route
+          route="{{route}}"
+          pattern="[[rootPath]]:page"
+          data="{{routeData}}"
+          active="{{active}}"
+          tail="{{subroute}}">
+      </app-route>        
         <!--
             Das Formular.
         -->
         <form class="animad-keeper-form">
-            <animad-keeper-form data="{{data}}" readonly="[[readform]]" auto-validate></animad-keeper-form>
+            <animad-keeper-form id="customform" data="{{data}}" lists="{{lists}}" 
+              readonly="[[readform]]" auto-validate></animad-keeper-form>
             <!-- GENERATOR hier kommen die Templates für die Relationen hin -->
         </form>
         <!-- 
@@ -58,7 +72,7 @@
                 </paper-button>
             </template>
             <template is="dom-if" if="{{cancelPath}}">
-                <paper-button class="cancel" on-tap="_navigateTo" raised>
+                <paper-button class="cancel" on-tap="_cancelEntity" raised>
                     <iron-icon icon="animad-icons:close-circle"></iron-icon>
                     [[t('button_cancel')]]
                 </paper-button>

diff --git a/src/animad-keepers-view.html b/src/animad-keepers-view.html
@@ -40,8 +40,16 @@ <h1>Keepers view</h1>
                 edit-path="/keepers-view/edit"
                 create-path="/keepers-view/create">
               </animad-keepers-list>
-              <animad-keeper-create-form name="create" save-url="[[backendUrl]]/api/admin_service/keepers"></animad-keeper-create-form>
-              <animad-keeper-update-form name="edit" load-url="[[backendUrl]]/api/admin_service/keepers{{subroute.path}}"></animad-keeper-update-form>
+              <animad-keeper-create-form name="create" 
+                save-url="[[backendUrl]]/api/admin_service/keepers"
+                profile-url="[[backendUrl]]/api/admin_service/profile/keepers"
+                save-path="/keepers-view/"
+                cancel-path="/keepers-view/">
+              </animad-keeper-create-form>
+              <animad-keeper-update-form name="edit" load-url="[[backendUrl]]/api/admin_service/keepers{{subroute.path}}"
+                 profile-url="[[backendUrl]]/api/admin_service/profile/keepers"
+                 save-path="/keepers-view/"
+                 cancel-path="/keepers-view/"></animad-keeper-update-form>
               <animad-keepers-list name="filterexample" url="[[backendUrl]]/api/admin_service/keepers" load-complete-data="true"></animad-keepers-list>
           </iron-pages>
         </div>