Hello tout le monde,
Je suis tombé sur un Admin kit plutôt sympa que j'aimerais retravailler, et notamment la page Invoice (que j'aimerais utiliser pour une list d'user)
seuleument je commenc tranquillement le js et là je sèche de ouf !!
http://altair_html.tzdthemes.com/page_invoices.html
J'ai chargé ma liste d'user sur la partie droite (sous forme de <li>) mais impossible d'aller chercher le bon bloc principal... voici comment le tout fonctionne :
page invoice.php
chargement des users
Code php : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13 <li class="heading_list">Mes users chéris</li> <?php $UsersMini = $bdd->query('SELECT * FROM users WHERE 1 ORDER BY idUser DESC'); while($UM=$UsersMini->fetchObject()) {?> <li> <a href="#" class="md-list-content" data-invoice-id="<?php echo $UM->idUser;?>"> <span class="md-list-heading uk-text-truncate"><?php echo $UM->loginUser;?></span> </a> </li> <?php }; ?>
Gabarit du bloc principal (j'ai conserver les noms d'origine, mais le contenu sera remplacé):
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53 <script id="invoice_template" type="text/x-handlebars-template"> <div class="md-card-toolbar"> <div class="md-card-toolbar-actions hidden-print"> <i class="md-icon material-icons" id="invoice_print"></i> <div class="md-card-dropdown" data-uk-dropdown="{pos:'bottom-right'}"> <i class="md-icon material-icons"></i> <div class="uk-dropdown uk-dropdown-small"> <ul class="uk-nav"> <li><a href="#">Archiver</a></li> <li><a href="#" class="uk-text-danger">Supprimer</a></li> </ul> </div> </div> </div> <h3 class="md-card-toolbar-heading-text large" id="invoice_name"> Identifiant {{invoice_id.invoice_number}} </h3> </div> <div class="md-card-content"> <div class="uk-margin-medium-bottom"> <span class="uk-text-muted uk-text-small uk-text-italic">Date de dernière connexion :</span> {{invoice_id.invoice_date}} </div> <div class="uk-grid uk-margin-large-bottom"> <div class="uk-width-1-1"> <table class="uk-table"> <thead> <tr class="uk-text-upper"> <th> titre du sujet</th> <th>nombre de réponse</th> <th class="uk-text-center">nombre de vues</th> </tr> </thead> <tbody> {{#each invoice_id.invoice_services}} <tr class="uk-table-middle"> <td> <span class="uk-text-large">{{ service_name }}</span><br/> </td> <td> {{ service_rate }} </td> <td class="uk-text-center"> {{ service_hours }} </td> </tr> {{/each}} </tbody> </table> </div> </div> </div> </script>
et voici là où je pêche, car le gabarit "template" charge tout le temps les mêmes infos, impossible de modifier le contenu, j'ai tenter des boucle à la en veux tu en voilà mais rien.
De peur de vous donner un code complètement pété, je vous donne celui de base, pourriez vous m'indiquer par où attaquer pour rendre le tout modifiable par boucle php
page invoice.js (partie qui nous intéresse,) il manque des champs, mais je les rajouterais plus tard, je souhaite juste piger le truc
Merci à tous pour votre aide les potos !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54 open_invoice: function() { var show_invoice = function(element) { var $this = element, $invoice_template = $('#invoice_template'); var template = $invoice_template.html(), template_compiled = Handlebars.compile(template); var invoice_id = parseInt($this.attr('data-invoice-id')), context = { invoice_id: { invoice_number: Math.floor((Math.random() * 200) + 1) + '/2016', invoice_date: moment().format('DD.MM.YYYY'), invoice_services: [ { service_name: "nom du sujet crée par le user", service_description: "sous titre du sujet créé par le user", }, ], }, theCompiledHtml = template_compiled(context); $invoice_preview.html(theCompiledHtml); $invoice_form.html(''); $window.resize(); }; $(invoice_list_class) .on('click','a', function(e) { e.preventDefault(); e.stopPropagation(); altair_md.card_show_hide($invoice_card,undefined,show_invoice,$(this)); $(this).closest('li').siblings('li').removeClass('md-list-item-active').end().addClass('md-list-item-active'); setTimeout(function() { // reinitialize uikit margin altair_uikit.reinitialize_grid_margin(); },560); //2 x animation duration }); if($(invoice_list_class).find('a').length) { // open first invoice $(invoice_list_class).find('a').eq(0).click(); } else { // open form $invoice_add_btn.trigger('click'); } },
Partager