[ Application 58] « Scanne ton Employé » Journal de développement au jour 5

scanne

Introduction


Aujourd’hui, je crée la possibilité d’ajouter une catégorie socio-professionelle dans l’application . Temps de réalisation : 3h30

Voici le look de la vue une fois qu’elle sera créée :

categvue.jpg

Par ailleurs j’ajoute la possibilité de supprimer un employé (Pour l’instant, pas de demande de confirmation) dans la vue liste.html

Je crée aussi la vue des statistiques.

Je créerais le FRONT END en dernier lieu, ce sera l’écran de demande de scane de l’employé, à la porte de l’établissement.

Ajouter une catégorie Socio-Professionelle :


Quel est le but ?

Pouvoir ajouter une catégorie socio-professionelle à un employé, afin de le catégoriser.

Pour cela, on doit réaliser les actions suivantes :

  1. Modifier la vue « nouveau.html » en ajoutant un menu déroulant qui permet de choisir la catégorie socio professionelle pour l’employé.
  2. Modifier le controleur de la vue « nouveau.html » afin qu’il charge le modèle de données des catégorie socio professionelle, pour les présenter dans le menu déroulant.
  3. Créer une vue permettant le CRUD(création/suppression/Maj) d’une catégorie socio professionelle, cette vue s’appelera categories.html. Ne pas oublier de l’ajouter au routing d’angularJs .
  4. Créer le controleur de la vue categories.html qui gère le CRUD sur le back end firebase.

 


  1. Ajouter le menu déroulant dans la vue nouveau.html :
<div class="form-group input-group">
	<span class="input-group-addon">Catégorie</span>
	<select ng-model="nouvelEmploye.categorie" class="form-control form-field">
	<option ng-repeat="categorie in categEmployes" value="{{categorie.nom}}">{{categorie.nom}}</option>
	</select>
</div>

 

2.Modifier le controleur de la vue « nouveau.html »


/* CHARGE LES CATEGORIES DEMPLOYES POUR LE SELECT CATEGORIES*/
var ref = new Firebase("https://blinding-heat-8502.firebaseio.com");
$scope.categEmployes = $firebaseArray(ref.child('categEmployes'));

3.Créer une vue permettant le CRUD(création/suppression/Maj) d’une catégorie socio professionelle, cette vue s’appelera categories.html:

<div class="row ">
	<div class="col-lg-12 " >
		 <div class="panel panel-warning">
			<!-- ENTETE DU PANEL -->
			<div class="panel-heading"> 
				<span class="glyphicon glyphicon glyphicon-home" aria-hidden="true"></span> Catégories
			</div>
			
			<!-- CENTRAL DU PANEL -->
			<div  class="panel-body " style="min-height:600px;">
					
				<div class="row">
					<div class="col-md-6">
						<div class="well">
							<form name="myForm"> <!-- LE NOMMER POUR BENEIFICER DU CONTROLE ANGULARJS -->
								<div class="panel-heading">
									<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> 
									Ajouter 
								</div>
									
								<div class="form-group input-group">
									<span class="input-group-addon">Catégorie</span>
									<input type="text" ng-model="nouvelleCategorie.nom" class="form-control text "placeholder="Tapez ici le nom"  required>
								</div>	
								
								<div class="form-group input-group">
									<span class="input-group-addon">Décrire</span>
									<textarea type="text" ng-model="nouvelleCategorie.desc" class="form-control text " placeholder="Tapez ici la description" ></textarea>
								</div>
								
								<button class="btn btn-block" ng-click="myForm.$valid && ajouterCategorie()">Ajouter</button>
							</form>
						</div>
					</div>
					
					<div class="col-md-6">
						<div class="well">
							
							<div class="panel-heading">
								<span class="glyphicon glyphicon glyphicon-minus" aria-hidden="true"></span> 
								Supprimer
							</div>
								
							<div class="limitModalNico">
								<ul>
									<div ng-repeat="categorie in categEmployes|orderBy:'nom'">
										<div class="form-group input-group">
											<span class="input-group-btn"><button ng-click="categEmployes.$remove(categorie)" class="btn btn-danger">x</button></span>
													<input placeholder="{{categorie.nom}}" class="form-control text " ></input>
										</div>
									</div>
								</ul>
							</div>
						
						</div>
					</div>
				<!-- FIN DE ROW -->
				</div>
			
			
			<!-- FIN DE PANEL BODY -->
			</div>
			
			<!-- PIED DE PAGE DU PANEL -->
			<div class="panel-footer text-right">
			</div>
			
		 </div>
	</div>
</div> 

4. Créer le controleur de la vue categories.html qui gère le CRUD sur le back end firebase.

/* CONTROLEUR DE LA VUE CATEGORIES */
.controller('categCtrl', function($scope, notifier,$firebaseArray) {	

var ref = new Firebase("https://blinding-heat-8502.firebaseio.com");
$scope.categEmployes = $firebaseArray(ref.child('categEmployes'));

$scope.ajouterCategorie = function(){
		$scope.categEmployes.$add(angular.copy($scope.nouvelleCategorie)).then(function(){
		notifier.notify('La catégorie a bien été ajoutée');
	});

}
/* FIN DU CONTROLEUR */
})

Et ne pas oublier …Le menu PARAMETRES/AJOUTER UNE CATEGORIE D’EMPLOYE pointe sur la vue categories.html dans le routing angularJs :


ROUTING DE VUES */
.config(function ($routeProvider, $locationProvider){
  $routeProvider
	.when('/accueil', {
	  templateUrl: 'vues/accueil.html',
	  controller: 'accueilCtrl'
	})
	.when('/nouveau', {
	  templateUrl: 'vues/nouveau.html',
	  controller: 'nouveauCtrl'
	})
	.when('/liste', {
	  templateUrl: 'vues/liste.html',
	  controller: 'listeCtrl'
	})
	.when('/stats', {
	  templateUrl: 'vues/stats.html',
	  controller: 'statsCtrl'
	})
	.when('/parametres', {
	  templateUrl: 'vues/parametres.html',
	  controller: ''
	})
	 .when('/maj', {
		templateUrl: 'vues/nouveau.html',
		controller: 'majCtrl'
     })
	 .when('/categories', {
		templateUrl: 'vues/categories.html',
		controller: 'categCtrl'
     })
	.otherwise({redirectTo: '/accueil'});
})

Publicités