Laclic
/
Souke
Suivre 5
Ajouter aux favoris 0
Bifurcation 1
Code Tickets 1 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

[backend] Rapports : gestion propre du chargement de la page (affichage d'un gif loading)

refactoring
Guillaume Bourgeois il y a 5 ans
Parent
fb2135346e
révision
2f81f733e8
7 fichiers modifiés avec 406 ajouts et 380 suppressions
Vue séparée Afficher les stats Diff
  1. +2
    -2
      backend/views/distribution/index.php
  2. +81
    -76
      backend/views/report/index.php
  3. +285
    -276
      backend/web/css/screen.css
  4. +3
    -0
      backend/web/js/vuejs/report-index.js
  5. +6
    -26
      backend/web/sass/distribution/_index.scss
  6. +7
    -0
      backend/web/sass/report/_index.scss
  7. +22
    -0
      backend/web/sass/screen.scss

+ 2
- 2
backend/views/distribution/index.php Voir le fichier

@@ -42,14 +42,14 @@ $this->setTitle('Distributions') ;
$this->setPageTitle('Distributions') ;

?>
<div id="app-distribution-index">
<div id="app-distribution-index" class="app-vuejs">
<?php if(strlen($date)): ?>
<span id="distribution-date"><?= $date; ?></span>
<?php endif; ?>
<div id="loading" v-if="showLoading">
<img src="<?= Yii::$app->urlManagerBackend->getBaseUrl(); ?>/img/loader.gif" alt="Chargement ..." />
</div>
<div id="wrapper-app-distribution-index" :class="{'loaded': !loading}">
<div id="wrapper-app-distribution-index" :class="'wrapper-app-vuejs '+(loading ? '' : 'loaded')">
<div class="col-md-4">
<div id="calendar">
<v-date-picker

+ 81
- 76
backend/views/report/index.php Voir le fichier

@@ -42,94 +42,99 @@ $this->setTitle('Rapports') ;
$this->addBreadcrumb('Rapports') ;

?>
<div id="app-report-index">
<div id="parameters" class="col-md-6">
<div id="nav-sections-report">
<a v-for="section in sections" :class="'btn-section btn '+(currentSection == section.id ? 'btn-primary' : 'btn-default')" @click="changeSection(section)"><span :class="'fa '+section.icon"></span> {{ section.name }}<span v-if="currentSection == section.id"> <span class="glyphicon glyphicon-triangle-bottom"></span></span></a>
</div>
<div id="section-users" class="panel panel-default section" v-show="currentSection == 'users'">
<div class="panel-body">
<div id="wrapper-search-user">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" v-model="termSearchUser" />
</div>
<div class="content-max-height">
<ul id="list-users">
<li v-for="user in usersArray" v-if="!termSearchUser.length || (termSearchUser.length && (user.lastname.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 || user.name.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 ))">
<input type="checkbox" :id="'user_'+user.user_id" v-model="user.checked" />
<label :for="'user_'+user.user_id" v-html="user.lastname+' '+user.name"></label>
</li>
</ul>
</div>
<div id="app-report-index" class="app-vuejs">
<div id="loading" v-if="showLoading">
<img src="<?= Yii::$app->urlManagerBackend->getBaseUrl(); ?>/img/loader.gif" alt="Chargement ..." />
</div>
<div id="wrapper-app-report-index" :class="'wrapper-app-vuejs '+(showLoading ? '' : 'loaded')">
<div id="parameters" class="col-md-6">
<div id="nav-sections-report">
<a v-for="section in sections" :class="'btn-section btn '+(currentSection == section.id ? 'btn-primary' : 'btn-default')" @click="changeSection(section)"><span :class="'fa '+section.icon"></span> {{ section.name }}<span v-if="currentSection == section.id"> <span class="glyphicon glyphicon-triangle-bottom"></span></span></a>
</div>
</div>
<div id="section-points-sale" class="panel panel-default section" v-show="currentSection == 'points-sale'">
<div class="panel-body">
<div class="content-max-height">
<ul class="list" id="list-points-sale">
<li v-for="pointSale in pointsSaleArray">
<input type="checkbox" :id="'pointsale_'+pointSale.id" v-model="pointSale.checked" />
<label :for="'pointsale_'+pointSale.id" v-html="pointSale.name"></label>
</li>
</ul>
<div id="section-users" class="panel panel-default section" v-show="currentSection == 'users'">
<div class="panel-body">
<div id="wrapper-search-user">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" id="input-search-user" placeholder="Rechercher" v-model="termSearchUser" />
</div>
<div class="content-max-height">
<ul id="list-users">
<li v-for="user in usersArray" v-if="!termSearchUser.length || (termSearchUser.length && (user.lastname.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 || user.name.toLowerCase().indexOf(termSearchUser.toLowerCase()) != -1 ))">
<input type="checkbox" :id="'user_'+user.user_id" v-model="user.checked" />
<label :for="'user_'+user.user_id" v-html="user.lastname+' '+user.name"></label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="section-distributions" class="panel panel-default section" v-show="currentSection == 'distributions'">
<div class="panel-body">
<div id="wrapper-select-year">
<select class="form-control" v-model="distributionYear">
<option v-for="year in distributionYearsArray">{{ year }}</option>
</select>
</div>
<div class="content-max-height">
<div class="distribution-month" v-for="distributionsMonth in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
<a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="glyphicon glyphicon-menu-down"></span></a>
<ul v-if="distributionsMonth.display">
<li v-for="distribution in distributionsMonth.distributions">
<input type="checkbox" :id="'distribution_'+distribution.id" v-model="distribution.checked" />
<label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
<div id="section-points-sale" class="panel panel-default section" v-show="currentSection == 'points-sale'">
<div class="panel-body">
<div class="content-max-height">
<ul class="list" id="list-points-sale">
<li v-for="pointSale in pointsSaleArray">
<input type="checkbox" :id="'pointsale_'+pointSale.id" v-model="pointSale.checked" />
<label :for="'pointsale_'+pointSale.id" v-html="pointSale.name"></label>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="col-md-6">
<div id="report" class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Rapport</h2>
</div>
<div class="panel-body">
<div id="summary">
<div class="alert alert-info" v-if="!countUsers() && !countPointsSale() && !countDistributions()">
Veuillez sélectionner un utilisateur et/ou un point de vente et/ou une distribution.
</div>
<div class="section" v-if="countUsers() > 0">
<h3><span class="fa fa-users"></span> {{ countUsers() }} Utilisateurs</h3>
<template v-for="user in usersArray" v-if="user.checked">
<span v-html="user.name+' '+user.lastname"></span><span class="comma">, </span>
</template>
<div id="section-distributions" class="panel panel-default section" v-show="currentSection == 'distributions'">
<div class="panel-body">
<div id="wrapper-select-year">
<select class="form-control" v-model="distributionYear">
<option v-for="year in distributionYearsArray">{{ year }}</option>
</select>
</div>
<div class="section" v-if="countPointsSale() > 0">
<h3><span class="fa fa-map-marker"></span> {{ countPointsSale() }} Points de vente</h3>
<template v-for="pointSale in pointsSaleArray" v-if="pointSale.checked">
<span v-html="pointSale.name"></span><span class="comma">, </span>
</template>
<div class="content-max-height">
<div class="distribution-month" v-for="distributionsMonth in distributionsByMonthArray" v-if="distributionsMonth.year == distributionYear && distributionsMonth.distributions.length > 0">
<a class="btn btn-default link-month-distribution" @click="distributionsMonth.display = !distributionsMonth.display">{{ distributionsMonth.month }} <span class="glyphicon glyphicon-menu-down"></span></a>
<ul v-if="distributionsMonth.display">
<li v-for="distribution in distributionsMonth.distributions">
<input type="checkbox" :id="'distribution_'+distribution.id" v-model="distribution.checked" />
<label :for="'distribution_'+distribution.id">{{ distribution.date }}</label>
</li>
</ul>
</div>
</div>
<div class="section" v-if="countDistributions() > 0">
<h3><span class="fa fa-calendar"></span> {{ countDistributions() }} Distributions</h3>
<template v-for="distributionsMonth in distributionsByMonthArray">
<template v-for="distribution in distributionsMonth.distributions" v-if="distribution.checked">
<span v-html="distribution.date"></span><span class="comma">, </span>
</div>
</div>
</div>

<div class="col-md-6">
<div id="report" class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">Rapport</h2>
</div>
<div class="panel-body">
<div id="summary">
<div class="alert alert-info" v-if="!countUsers() && !countPointsSale() && !countDistributions()">
Veuillez sélectionner un utilisateur et/ou un point de vente et/ou une distribution.
</div>
<div class="section" v-if="countUsers() > 0">
<h3><span class="fa fa-users"></span> {{ countUsers() }} Utilisateurs</h3>
<template v-for="user in usersArray" v-if="user.checked">
<span v-html="user.name+' '+user.lastname"></span><span class="comma">, </span>
</template>
</div>
<div class="section" v-if="countPointsSale() > 0">
<h3><span class="fa fa-map-marker"></span> {{ countPointsSale() }} Points de vente</h3>
<template v-for="pointSale in pointsSaleArray" v-if="pointSale.checked">
<span v-html="pointSale.name"></span><span class="comma">, </span>
</template>
</template>
</div>
<div class="section" v-if="countDistributions() > 0">
<h3><span class="fa fa-calendar"></span> {{ countDistributions() }} Distributions</h3>
<template v-for="distributionsMonth in distributionsByMonthArray">
<template v-for="distribution in distributionsMonth.distributions" v-if="distribution.checked">
<span v-html="distribution.date"></span><span class="comma">, </span>
</template>
</template>
</div>
</div>
<div id="report" v-if="countUsers() || countPointsSale() || countDistributions()">
<a href="#" class="btn btn-primary">Générer</a>
</div>
</div>
<div id="report" v-if="countUsers() || countPointsSale() || countDistributions()">
<a href="#" class="btn btn-primary">Générer</a>
</div>
</div>
</div>

+ 285
- 276
backend/web/css/screen.css
Fichier diff supprimé car celui-ci est trop grand
Voir le fichier


+ 3
- 0
backend/web/js/vuejs/report-index.js Voir le fichier

@@ -2,6 +2,7 @@
var app = new Vue({
el: '#app-report-index',
data: {
showLoading: true,
currentSection: 'users',
sections: [
{
@@ -40,6 +41,8 @@ var app = new Vue({
app.distributionYearsArray = response.data.distributionYearsArray ;
app.distributionYear = app.distributionYearsArray[app.distributionYearsArray.length - 1] ;
app.distributionsByMonthArray = response.data.distributionsByMonthArray ;
app.showLoading = false ;
});
},
changeSection: function(section) {

+ 6
- 26
backend/web/sass/distribution/_index.scss Voir le fichier

@@ -36,6 +36,12 @@ termes.

.distribution-index {
.content-header {
.date {
font-weight: bold ;
}
}
#wrapper-app-distribution-index {
display: none ;
&.loaded {
@@ -43,12 +49,6 @@ termes.
}
}
.content-header {
.date {
font-weight: bold ;
}
}
#app-distribution-index {
position: relative ;
}
@@ -57,26 +57,6 @@ termes.
display: none ;
}
#loading {
position: fixed ;
top: 50% ;
left: 50% ;
width: 100px ;
height: 100px ;
@include border-radius(50px) ;
background-color: white ;
z-index: 10 ;
@include box-shadow(0px 0px 5px #d0d0d0) ;
img {
position: relative ;
top: 35px ;
left: 35px ;
width: 30px ;
height: 30px ;
}
}
#calendar {
margin-bottom: 15px ;
.c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {

+ 7
- 0
backend/web/sass/report/_index.scss Voir le fichier

@@ -36,6 +36,13 @@ termes.

.report-index {
#wrapper-app-report-index {
display: none ;
&.loaded {
display: block ;
}
}
#parameters {
#nav-sections-report {
.btn-section {

+ 22
- 0
backend/web/sass/screen.scss Voir le fichier

@@ -292,6 +292,28 @@ a.btn, button.btn {
}
}

.app-vuejs {
#loading {
position: fixed ;
top: 50% ;
left: 50% ;
width: 100px ;
height: 100px ;
@include border-radius(50px) ;
background-color: white ;
z-index: 10 ;
@include box-shadow(0px 0px 5px #d0d0d0) ;

img {
position: relative ;
top: 35px ;
left: 35px ;
width: 30px ;
height: 30px ;
}
}
}

// liste de commandes
.site-index, .user-commandes {
#last-orders, #history-orders {

Écrire Aperçu
Chargement…
Annuler
Enregistrer