Amélioration de l'interface de sélection du code postal et de la ville

app/js/controllers/foyer/logement.js

@@ -63,59 +63,25 @@ angular.module('ddsApp').controller('FoyerLogementCtrl', function($scope, $http,
         ['colocation', 'locationType', 'membreFamilleProprietaire', 'primoAccedant', 'loyer', 'isChambre'].forEach(function(field) {
             delete logement[field];
         });
-        delete logement.adresse.codePostal;
-        $scope.selectedCity = null;
-        $scope.cities = [];
     };
 
-    $scope.unknownCodePostal = true;
-
-    $scope.updateCities = function() {
-        $scope.retrievingCities = false;
-        $scope.cities = [];
-
-        var codePostal = logement.adresse.codePostal;
-        if (!codePostal || 5 !== codePostal.length) {
-            $scope.unknownCodePostal = true;
-            return;
-        }
-
+    $scope.updateCities = function updateCities() {
         $scope.retrievingCities = true;
-        $http.get('/api/outils/communes', { params: { codePostal: codePostal } }).then(function(result) {
-            var records = result.data.records;
-            if (!records.length) {
-                $scope.unknownCodePostal = true;
-            } else {
-                $scope.unknownCodePostal = false;
-                $scope.cities = [];
-                records.forEach(function(record) {
-                    var field = 'nom_comm';
-                    var nomCommune = record.fields[field];
-                    field = 'insee_com';
-                    var codeInsee = record.fields[field];
-                    $scope.cities.push({nom: nomCommune, codeInsee: codeInsee});
-                });
-                $scope.selectedCity = $scope.cities[0];
-            }
-        }, function() {
-            $scope.unknownCodePostal = true;
-        }).finally(function() {
-            $scope.retrievingCities = false;
-        });
-    };
 
-    $scope.updateCities();
+        $http.get('/api/outils/communes/' + $scope.postalCode)
+             .then(function(result) {
+                  $scope.cities = result.data;
+                  logement.adresse = $scope.cities[0];
+              }, console.error.bind(console)
+              ).finally(function() {
+                  $scope.retrievingCities = false;
+              });
+    };
 
     $scope.submit = function(form) {
         $scope.submitted = true;
-        if (form.$valid && !$scope.unknownCodePostal) {
-            logement.adresse.ville = $scope.selectedCity.nom;
-            logement.adresse.codeInsee = $scope.selectedCity.codeInsee;
+        if (form.$valid && logement.adresse) {
             $scope.$emit('logement', logement);
         }
     };
-
-    $scope.updateSelectedCity = function(selectedCity) {
-        $scope.selectedCity = selectedCity;
-    };
 });

app/js/directives/recapSituation.js

@@ -172,7 +172,7 @@ angular.module('ddsRecapSituation').directive('recapSituation', function($timeou
                     type: $sce.trustAsHtml(typeLogementHtml),
                     loyer: logement.loyer,
                     codePostal: logement.adresse.codePostal,
-                    ville: logement.adresse.ville
+                    nomCommune: logement.adresse.nomCommune
                 };
             };
             $scope.individus = _.map(situation.individus, mapIndividu);

app/views/partials/form-infos-complementaires/adresse-contact.html

@@ -22,7 +22,7 @@ <h2>Votre adresse</h2>
       <div class="form-group">
         <label class="col-sm-1 control-label" for="city">Ville</label>
         <div class="col-sm-11">
-          <input type="text" name="city" id="city" class="form-control" ng-model="situation.logement.adresse.ville">
+          <input type="text" name="city" id="city" class="form-control" ng-model="situation.logement.adresse.nomCommune">
         </div>
       </div>
     </div>
@@ -73,7 +73,7 @@ <h2>L'adresse de votre conjoint</h2>
         <div class="form-group">
           <label class="col-sm-1 control-label" for="city-conjoint">Ville</label>
           <div class="col-sm-11">
-            <input type="text" name="city" id="city-conjoint" class="form-control" ng-model="situation.logement.adresseConjoint.ville">
+            <input type="text" name="city" id="city-conjoint" class="form-control" ng-model="situation.logement.adresseConjoint.nomCommune">
           </div>
         </div>
       </div>

app/views/partials/foyer/logement.html

@@ -114,18 +114,22 @@ <h1>Votre logement principal</h1>
       <div class="col-sm-6">
         <div
           class="form-group"
-          ng-class="{'has-error': submitted && unknownCodePostal}">
-          <label class="col-sm-6 control-label" for="postal-code">Code postal de votre résidence</label>
+          ng-class="{'has-error': submitted && ! cities.length}">
+          <label class="col-sm-6 control-label" for="postal-code">Code postal et ville</label>
           <div class="col-sm-6">
             <input
               type="text"
+              inputmode="numeric"
+              minlength="5"
+              maxlength="5"
+              pattern="[0-9]{5}"
+              title="Cinq chiffres"
               class="form-control"
               id="postal-code"
-              name="codePostal"
               required
-              ng-model="logement.adresse.codePostal"
+              ng-model="postalCode"
               ng-change="updateCities()">
-            <span class="help-block" ng-if="submitted && unknownCodePostal">Ce code postal est invalide</span>
+            <span class="help-block" ng-if="submitted && ! cities.length">Ce code postal est invalide</span>
           </div>
         </div>
       </div>
@@ -135,10 +139,10 @@ <h1>Votre logement principal</h1>
             <p class="form-control-static" ng-if="retrievingCities"><i class="fa fa-spinner fa-spin"></i></p>
             <select
               class="form-control"
-              ng-if="cities.length"
-              ng-options="city as city.nom for city in cities"
-              ng-model="selectedCity"
-              ng-change="updateSelectedCity(selectedCity)">
+              required
+              ng-show="cities.length"
+              ng-options="city.nomCommune for city in cities"
+              ng-model="logement.adresse">
             </select>
           </div>
         </div>

app/views/partials/foyer/recap-situation.html

@@ -10,7 +10,7 @@ <h4 class="section-header">Votre logement</h4>
     <div ng-bind-html="recapLogement|uppercaseFirst"></div>
     <div ng-if="situation.logement.loyer">{{ loyerLabel }}&nbsp;: <b>{{ situation.logement.loyer }} €</b></div>
     Code postal <b>{{ situation.logement.adresse.codePostal }}</b>
-    <br><b>{{ situation.logement.adresse.ville }}</b>
+    <br><b>{{ situation.logement.adresse.nomCommune }}</b>
   </div>
 </div>
 

app/views/partials/recap-situation.html

@@ -43,7 +43,7 @@ <h5>{{ individu.label }}</h5>
   <h4>Logement</h4>
   <div ng-bind-html="logement.type"></div>
   <div ng-if="logement.loyer">Loyer/mensualité d'emprunt : {{ logement.loyer }} €</div>
-  Code postal {{ logement.codePostal }} - {{ logement.ville }}
+  Code postal {{ logement.codePostal }} - {{ logement.nomCommune }}
 
   <h4>Patrimoine</h4>
   <span ng-if="!(patrimoine.length + revenusDuPatrimoine.length)">Aucun</span>

package.json

@@ -8,7 +8,7 @@
     "morgan": "~1.5.0",
     "prerender-node": "^1.1.1",
     "ludwig-ui": "^1.0.1",
-    "sgmap-mes-aides-api": "sgmap/mes-aides-api#v0.1.8",
+    "sgmap-mes-aides-api": "sgmap/mes-aides-api#v0.2.0",
     "serve-favicon": "~2.2.0"
   },
   "repository": {