This repository has been archived by the owner on Jul 22, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 62
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Première utilisation de VueJS (#760)
* Use VueJS * Add script vue * First vuejs plannings * Liste planning OK * Inexistante fonction * Association * Remove hello * This is an object * WIP - JS API call for planning * main-content is a container for VueJS * VueJS + axios = first JS call * Remove php var * import nouvelle api * WIP - type_absence * WIP - use vue for type_absence * Absence list via Vue and loader * Security empty list * Added axios * Suite rebase * Encore
- Loading branch information
1 parent
cd4e2b6
commit 1e9037b
Showing
27 changed files
with
405 additions
and
521 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,153 @@ | ||
| <?php | ||
| /* | ||
| * $listeTypeConges | ||
| * $url | ||
| * $nouveauLibelle | ||
| * $nouveauLibelleCourt | ||
| * $enumTypeConges | ||
| * $nouveauType | ||
| * $traductions | ||
| * $url | ||
| * $isCongesExceptionnelsActive | ||
| */ | ||
| ?> | ||
| <h1><?= _('config_abs_titre') ?></h1> | ||
| <?php foreach ($listeTypeConges as $typeConge => $conges) : ?> | ||
| <h2><?= _('divers_' . $typeConge . '_maj_1') ?></h2> | ||
| <p><?= _('config_abs_comment_' . $typeConge) ?></p> | ||
| <table class="table table-hover table-responsive table-condensed table-striped"> | ||
| <tr> | ||
| <th><?= _('config_abs_libelle') ?></th> | ||
| <th><?= _('config_abs_libelle_short') ?></th> | ||
| <th></th> | ||
| </tr> | ||
| <?php if (empty($conges)) : ?> | ||
| <tr><td colspan="2"><center><?= _('aucun_resultat') ?></center></td></tr> | ||
| <?php else : ?> | ||
| <?php foreach ($conges as $conge) : ?> | ||
| <div id="inner-content"> | ||
| <h1><?= _('config_abs_titre') ?></h1> | ||
| <div id="loader-bar" class="progress"> | ||
| <div class="progress-bar progress-bar-striped active" role="progressbar" | ||
| aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%"> | ||
| </div> | ||
| </div> | ||
| <div v-for="(value, key) in absenceTypes"> | ||
| <h2>{{ titre(key) }}</h2> | ||
| <p>{{ commentaire(key) }}</p> | ||
| <table class="table table-hover table-responsive table-condensed table-striped"> | ||
| <tr> | ||
| <td><strong><?= $conge['libelle'] ?></strong></td> | ||
| <td><?= $conge['libelleCourt'] ?></td> | ||
| <th><?= _('config_abs_libelle') ?></th> | ||
| <th><?= _('config_abs_libelle_short') ?></th> | ||
| <th></th> | ||
| </tr> | ||
| <tr v-if="!hasAbsences(key)"><td colspan="2"><center><?= _('aucun_resultat') ?></center></td></tr> | ||
| <tr v-for="absenceType in value"> | ||
| <td><strong>{{ absenceType.libelle }}</strong></td> | ||
| <td>{{ absenceType.libelleCourt }}</td> | ||
| <td class="action"> | ||
| <?php if (!$conge['typeNatif']) : ?> | ||
| <a href="<?= $PHP_SELF ?>?action=modif&id_to_update=<?= $conge['id'] ?>" title=" <?= _('form_modif') ?>"><i class="fa fa-pencil"></i></a> | ||
| | ||
| <a href="<?= $PHP_SELF ?>?action=suppr&id_to_update=<?= $conge['id'] ?>" title=" <?= _('form_supprim') ?>"><i class="fa fa-times-circle"></i></a> | ||
| <?php else : ?> | ||
| <div v-if="absenceType.typeNatif"> | ||
| <i class="fa fa-pencil disabled" title="Type d'absence natif"></i> | ||
| | ||
| <i class="fa fa-times-circle disabled" title="Type d'absence natif"></i></a> | ||
| <?php endif; ?> | ||
| <i class="fa fa-times-circle disabled" title="Type d'absence natif"></i> | ||
| </div> | ||
| <div v-else> | ||
| <a :href="linkModification(absenceType.id)" title=" <?= _('form_modif') ?>"><i class="fa fa-pencil"></i></a> | ||
| | ||
| <a :href="linkSuppression(absenceType.id)" title=" <?= _('form_supprim') ?>"><i class="fa fa-times-circle"></i></a> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| <?php endforeach ; ?> | ||
| <?php endif ?> | ||
| </table> | ||
| <hr/> | ||
| <?php endforeach ; ?> | ||
| </table> | ||
| <hr/> | ||
| </div> | ||
|
|
||
| <h2><?= _('config_abs_add_type_abs') ?></h2> | ||
| <p><?= _('config_abs_add_type_abs_comment') ?></p> | ||
| <form action="<?= $url ?>" method="POST"> | ||
| <table class="table table-hover table-responsive table-condensed table-striped"> | ||
| <tr> | ||
| <th><?= _('config_abs_libelle') ?></th> | ||
| <th><?= _('config_abs_libelle_short') ?></th> | ||
| <th><?= _('divers_type') ?></th> | ||
| </tr><tr> | ||
| <td><input class="form-control" type="text" name="tab_new_values[libelle]" size="20" maxlength="20" value="<?= $nouveauLibelle ?>"></td> | ||
| <td><input class="form-control" type="text" name="tab_new_values[short_libelle]" size="3" maxlength="3" value="<?= $nouveauLibelleCourt ?>"></td> | ||
| <td> | ||
| <select class="form-control" name=tab_new_values[type]> | ||
| <?php foreach (array_keys($listeTypeConges) as $typeConge) : ?> | ||
| <option <?= ($typeConge == $nouveauType) ? 'selected' : '' ?>><?= $typeConge ?></option> | ||
| <?php endforeach ;?> | ||
| </select> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <input type="hidden" name="action" value="new"> | ||
| <hr/> | ||
| <input type="submit" class="btn btn-success" value="<?= _('form_ajout') ?>"><br> | ||
| </form> | ||
| <h2><?= _('config_abs_add_type_abs') ?></h2> | ||
| <p><?= _('config_abs_add_type_abs_comment') ?></p> | ||
| <form :action="url" method="POST"> | ||
| <table class="table table-hover table-responsive table-condensed table-striped"> | ||
| <tr> | ||
| <th><?= _('config_abs_libelle') ?></th> | ||
| <th><?= _('config_abs_libelle_short') ?></th> | ||
| <th><?= _('divers_type') ?></th> | ||
| </tr><tr> | ||
| <td><input class="form-control" type="text" name="tab_new_values[libelle]" size="20" maxlength="20" :value="nouveauLibelle"></td> | ||
| <td><input class="form-control" type="text" name="tab_new_values[short_libelle]" size="3" maxlength="3" :value="nouveauLibelleCourt"></td> | ||
| <td> | ||
| <select class="form-control" name=tab_new_values[type]> | ||
| <option v-for="type in typesGeneraux" :selected="isSelected(type)">{{ type }}</option> | ||
| </select> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <input type="hidden" name="action" value="new"> | ||
| <hr/> | ||
| <input type="submit" class="btn btn-success" value="<?= _('form_ajout') ?>"><br> | ||
| </form> | ||
| </div> | ||
|
|
||
| <script> | ||
| axios.defaults.headers.get = { | ||
| 'Content-Type': 'application/json', | ||
| 'Accept': 'application/json', | ||
| 'Token': '<?= $_SESSION['token'] ?>', | ||
| }; | ||
|
|
||
| const instance = axios.create({ | ||
| baseURL: '<?= $baseURIApi ?>', | ||
| timeout: 1500 | ||
| }); | ||
|
|
||
| var vm = new Vue({ | ||
| el: '#inner-content', | ||
| data: { | ||
| absenceTypes : {}, | ||
| url : '<?= $url ?>', | ||
| nouveauLibelle : '<?= $nouveauLibelle ?>', | ||
| nouveauLibelleCourt : '<?= $nouveauLibelleCourt ?>', | ||
| nouveauType : '<?= $nouveauType ?>', | ||
| traductions : <?= json_encode($traductions) ?>, | ||
| isCongesExceptionnelsActive: 'true' == "<?= $isCongesExceptionnelsActive ? 'true' : 'false' ?>", | ||
| axios : instance | ||
| }, | ||
| computed: { | ||
| typesGeneraux : function () { | ||
| return Object.keys(this.absenceTypes); | ||
| } | ||
| }, | ||
| 'methods' : { | ||
| hasAbsences: function (type) { | ||
| return 0 < this.absenceTypes[type].length; | ||
| }, | ||
| titre: function (type) { | ||
| return this.traductions.titres[type]; | ||
| }, | ||
| commentaire: function (type) { | ||
| return this.traductions.commentaires[type]; | ||
| }, | ||
| linkModification : function (id) { | ||
| return this.url + '?action=modif&id_to_update=' + id; | ||
| }, | ||
| linkSuppression : function (id) { | ||
| return this.url + '?action=suppr&id_to_update=' + id; | ||
| }, | ||
| isSelected : function (type) { | ||
| return type == this.nouveauType; | ||
| } | ||
| }, | ||
| created () { | ||
| var vm = this; | ||
| this.axios.get('/absence/type') | ||
| .then((response) => { | ||
| if (typeof response.data != 'object') { | ||
| return; | ||
| } | ||
| const absenceTypes = response.data.data; | ||
| console.log(response.data); | ||
| var organisedTypes = {}; | ||
| for (var i = 0; i < absenceTypes.length; ++i) { | ||
| var absenceType = absenceTypes[i]; | ||
| if (undefined == organisedTypes[absenceType.type]) { | ||
| organisedTypes[absenceType.type] = new Array(); | ||
| } | ||
| organisedTypes[absenceType.type].push(absenceType); | ||
| } | ||
| if (!vm.isisCongesExceptionnelsActive && undefined != organisedTypes['conges_exceptionnels']) { | ||
| delete organisedTypes['conges_exceptionnels']; | ||
| } | ||
|
|
||
| // Finally hide loader and show var | ||
| document.getElementById('loader-bar').classList.add('hidden'); | ||
| vm.absenceTypes = organisedTypes; | ||
| }) | ||
| .catch((error) => { | ||
| console.log(error.response); | ||
| console.error(error); | ||
| }) | ||
| } | ||
| }); | ||
| </script> | ||
| <?php |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.