Laclic
/
Souke
Watch 5
Star 0
Fork 1
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

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

refactoring
Guillaume Bourgeois 5 years ago
parent
fb2135346e
commit
2f81f733e8
7 changed files with 406 additions and 380 deletions
Unified View Show Diff Stats
  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 View File

$this->setPageTitle('Distributions') ; $this->setPageTitle('Distributions') ;


?> ?>
<div id="app-distribution-index">
<div id="app-distribution-index" class="app-vuejs">
<?php if(strlen($date)): ?> <?php if(strlen($date)): ?>
<span id="distribution-date"><?= $date; ?></span> <span id="distribution-date"><?= $date; ?></span>
<?php endif; ?> <?php endif; ?>
<div id="loading" v-if="showLoading"> <div id="loading" v-if="showLoading">
<img src="<?= Yii::$app->urlManagerBackend->getBaseUrl(); ?>/img/loader.gif" alt="Chargement ..." /> <img src="<?= Yii::$app->urlManagerBackend->getBaseUrl(); ?>/img/loader.gif" alt="Chargement ..." />
</div> </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 class="col-md-4">
<div id="calendar"> <div id="calendar">
<v-date-picker <v-date-picker

+ 81
- 76
backend/views/report/index.php View File

$this->addBreadcrumb('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>
<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>
</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> </li>
</ul> </ul>
</div> </div>
</div> </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>
<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>
<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>
</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>
<div id="report" v-if="countUsers() || countPointsSale() || countDistributions()">
<a href="#" class="btn btn-primary">Générer</a>
</div> </div>
</div> </div>
</div> </div>

+ 285
- 276
backend/web/css/screen.css
File diff suppressed because it is too large
View File


+ 3
- 0
backend/web/js/vuejs/report-index.js View File

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

+ 6
- 26
backend/web/sass/distribution/_index.scss View File



.distribution-index { .distribution-index {
.content-header {
.date {
font-weight: bold ;
}
}
#wrapper-app-distribution-index { #wrapper-app-distribution-index {
display: none ; display: none ;
&.loaded { &.loaded {
} }
} }
.content-header {
.date {
font-weight: bold ;
}
}
#app-distribution-index { #app-distribution-index {
position: relative ; position: relative ;
} }
display: none ; 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 { #calendar {
margin-bottom: 15px ; margin-bottom: 15px ;
.c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] { .c-header .c-title-layout .c-title-popover .c-title-anchor .c-title[data-v-2083cb72] {

+ 7
- 0
backend/web/sass/report/_index.scss View File



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

+ 22
- 0
backend/web/sass/screen.scss View File

} }
} }


.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 // liste de commandes
.site-index, .user-commandes { .site-index, .user-commandes {
#last-orders, #history-orders { #last-orders, #history-orders {

Write Preview
Loading…
Cancel
Save