jm2l/jm2l/templates/edit_tiers.mako

<%inherit file="jm2l:templates/layout.mako"/>
<%namespace name="helpers" file="jm2l:templates/helpers.mako"/>
<%def name="cssAddOn()">    
  <link rel="stylesheet" href="/vendor/select2/css/select2.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="/vendor/fileupload/css/jquery.fileupload.css">
  <link rel="stylesheet" href="/vendor/fileupload/css/jquery.fileupload-ui.css">
  <!-- CSS adjustments for browsers with JavaScript disabled -->
  <noscript><link rel="stylesheet" href="/vendor/fileupload/css/jquery.fileupload-noscript.css"></noscript>
  <noscript><link rel="stylesheet" href="/vendor/fileupload/css/jquery.fileupload-ui-noscript.css"></noscript>
</%def>

<div class="row-fluid">
  <div class="span10 offset1">


<a class="pull-right" href="/categorie/entity">Editer les catégories</a>
<br>
<form action="" method="POST">
        % if 'uid' in form._fields:
            ${form.uid}
        %endif
<%
DicForm = {
    'name':        {'PlaceHolder':u"Nom",         'ContainerStyle':"padding-right:5px;float:left;width:35em;", "FieldStyle":"width:31em;"},
    'tiers_type':  {'PlaceHolder':u"Nature",      'ContainerStyle':"padding-right:5px;", "FieldStyle":"width:15em;"},
    'description': {'PlaceHolder':u"Description", 'ContainerStyle':"padding-right:5px;padding-top: 20px;", "FieldStyle":"width:90%;min-height:150px;" },
    'website':     {'PlaceHolder':u"Site web",    'ContainerStyle':"padding-right:15px;padding-top: 20px;", 'FieldStyle':"width:30em;"},
    'membership':  {'Ignore':True },
    'roles':       {'Ignore':True }
    } 
%>

    ${helpers.DisplayForm(form, DicForm)}

% if 'uid' in form._fields:
<fieldset>
    <legend>Ses acteurs</legend>
<div class="repeat">
    <table class="wrapper table" width="100%">
        <thead>
          <tr class="row">
            <th style="width:5em;text-align:center;">Année</th>
            <th style="width:22em;text-align:center;">Personne</th>
            <th style="width:22em;text-align:center;">Rôle</th>
            <th style="width:10em;text-align:center;">Action</th> 
          </tr>            
        </thead>
        <tbody class="container" id="tab_member">
        <tr class="row template" style="line-height:2.2em;">
            <td>
                <select class="form-control" style="width:5em;" name="membership-{{row-count-placeholder}}-year_uid"
                    id="membership-{{row-count-placeholder}}-year_uid">
                    % for year in range(2015, 2005, -1):
                        <% 
                        if year in [2014]:
                            continue
                        %> \
                        <option value="${year}">${year}</option>
                    %endfor
                </select>
            </td>
            <td style="text-align: center;">
                <input type="hidden" style="width:20em;" class="form-control" name="membership-{{row-count-placeholder}}-user_uid" 
                    id="membership-{{row-count-placeholder}}-user_uid" />
            </td>
            <td style="text-align: center;">
                <input type="text" class="form-control" name="membership-{{row-count-placeholder}}-role" />
            </td>
            <td>
                <span class="remove btn btn-mini btn-danger">
                    <i class="icon-remove-sign icon-white"></i> Suppr.
                </span>
            </td>            
        </tr>
        % for num, dicdata in enumerate(form._fields.get("membership").data):
        <tr class="row" style="padding:5px;line-height:2.2em;">
            <td style="text-align:center;">
                <input type="hidden" class="form-control" name="membership-${num}-year_uid"
                    id="membership-${num}-year_uid"
                    value="${dicdata.get('year_uid')}" style="width:4em;" />
                    <div id="content-member-${num}-year_uid">${dicdata.get('year_uid')}</div>
            </td>
            <td style="text-align:center;">                
                <input type="hidden" class="form-control" name="membership-${num}-user_uid" 
                    id="membership-${num}-user_uid" value="${dicdata.get('user_uid')}" style="width:4em;" />
                <% 
                tmpUser = DBUser.by_id(dicdata.get('user_uid'))
                %>
                % if tmpUser:
                    <div id="content-member-${num}-user_uid">${tmpUser.prenom} ${tmpUser.nom}</div>
                % endif
            </td>
            <td style="text-align:center;">
                <input type="text" class="form-control" name="membership-${num}-role" style="display:none;width:95%;"
                    id="membership-${num}-role"
                    value="${dicdata.get('role', 'Aucun')}" />
                <div id="content-member-${num}-role"><i>${dicdata.get('role', 'Aucun')}</i></div>
            </td>
            <td>
                <a class="btn btn-mini btn-primary" href="#" onclick="return edit_member(this, ${num});">
                    <i class="icon-pencil icon-white"></i> Edit.
                </a>
                <span class="remove btn btn-mini btn-danger">
                    <i class="icon-remove-sign icon-white"></i> Suppr.
                </span>
            </td>
        </tr>
        % endfor
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5" style="text-align:center;line-height: 3em;">
                <span class="add btn btn-mini btn-primary"><i class="icon-plus-sign icon-white"></i> Ajouter</span>
            </td>
          </tr>            
        </tfoot>
    </table>
</div>
</fieldset>
% endif


% if 'uid' in form._fields:
<fieldset>
    <legend>Ses rôles</legend>
<div class="repeat">
    <table class="wrapper table" width="100%">
        <thead>
          <tr class="row">
            <th style="width:5em;text-align:center;">Année</th>
            <th style="width:22em;text-align:center;">Rôle</th>
            <th style="width:10em;text-align:center;">Action</th> 
          </tr>            
        </thead>
        <tbody class="container" id="tab_role">
        <tr class="row template" style="line-height:2.2em;">
            <td>
                <select class="form-control" style="width:5em;" name="roles-{{row-count-placeholder}}-year_uid"
                    id="roles-{{row-count-placeholder}}-year_uid">
                    % for year in range(2015, 2005, -1):
                        <% 
                        if year in [2014]:
                            continue
                        %> \
                        <option value="${year}">${year}</option>
                    %endfor
                </select>
            </td>
            <td style="text-align: center;">
                <select class="form-control" name="roles-{{row-count-placeholder}}-tiers_role" />
                    <option value="Exposant">Exposant</option>
                    <option value="Sponsor">Sponsor</option>
                    <option value="Donateur">Donateur</option>
                </select>
            </td>
            <td>
                <span class="remove btn btn-mini btn-danger">
                    <i class="icon-remove-sign icon-white"></i> Suppr.
                </span>
            </td>            
        </tr>
        % for num, dicdata in enumerate(form._fields.get("roles").data):
        <tr class="row" style="padding:5px;line-height:2.2em;">
            <td style="text-align:center;">
                <input type="hidden" class="form-control" name="roles-${num}-year_uid"
                    id="roles-${num}-year_uid"
                    value="${dicdata.get('year_uid')}" style="width:4em;" />
                    <div id="content-role-${num}-year_uid">${dicdata.get('year_uid')}</div>
            </td>
            <td style="text-align:center;">
                <input type="hidden" class="form-control" name="roles-${num}-tiers_role"
                    id="roles-${num}-tiers_role"
                    value="${dicdata.get('tiers_role', 'Aucun')}" />
                <div id="content-role-${num}-tiers_role"><i>${dicdata.get('tiers_role', 'Aucun')}</i></div>
            </td>
            <td>
                <a class="btn btn-mini btn-primary" href="#" onclick="return edit_role(this, ${num});">
                    <i class="icon-pencil icon-white"></i> Edit.
                </a>
                <span class="remove btn btn-mini btn-danger">
                    <i class="icon-remove-sign icon-white"></i> Suppr.
                </span>
            </td>
        </tr>
        % endfor
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5" style="text-align:center;line-height: 3em;">
                <span class="add btn btn-mini btn-primary"><i class="icon-plus-sign icon-white"></i> Ajouter</span>
            </td>
          </tr>            
        </tfoot>
    </table>
</div>
</fieldset>
% endif


% if 'uid' in form._fields:
    <button class="btn btn-primary" type="submit">Enregistrer</button>
% else:
    <button class="btn btn-primary" type="submit">Proposer</button>
% endif
</form>
    % if 'uid' in form._fields:
        % if request.user:
<fieldset>
    <legend>Les supports liés</legend>
        <div style="float:right;width:60%">
            <p> En plus de vos support de présentation classique.
            Pensez aussi aux affiches, aux flyers, aux stickers,
            au bulletin d'adhésion à une association, à la documentation technique...
            Tous ce qui peut être utile, de près ou de loin à sa promotion.
            </p>
        </div>
        ${helpers.uploader("tiers", form.uid.data, u"fichiers" )}
</fieldset>
        % else:
        <br>NB: Vous devez être identifié afin de proposer du contenu.
        % endif
    % else:
        <br>NB: Vous devez proposer votre entité avant de pouvoir
        téléverser des fichiers la concernant.
    % endif

  </div>
</div>

<%def name="jsAddOn()">
    <script src="/vendor/select2/js/select2.js"></script>
    <script src="/vendor/repeatable-fields/js/repeatable-fields.js"></script>
    <script src="/vendor/ckeditor/ckeditor.js"></script>    
<script type="text/javascript">
var year_data = Array();
var role_data = Array();
var editor = CKEDITOR.replace('description', { autoGrow_onStartup: true, language: 'fr' } );
for (var i=2005;i<2016;i++)
    year_data.push( {id:i, text:i.toString()});
role_data.push({id:'Exposant', text:'Exposant'});
role_data.push({id:'Sponsor', text:'Sponsor'});
role_data.push({id:'Donateur', text:'Donateur'}); 

$("#tiers_type").select2({});

function show_editor() {
    if (editor) {
        editor.destroy();
        editor=null;
    } else
        editor = CKEDITOR.replace('description');
}

jQuery(function() {
    jQuery('.repeat').each(function() {
        jQuery(this).repeatable_fields(
            {
            is_ready: function(container, therow) {
                var numrow=$(container).attr('data-rf-row-count');
                if ($(container).attr("id")=="tab_member") {
                    $("#membership-"+ (numrow-1) +"-user_uid").select2(
                        {
                            placeholder: 'Entrez ici un Nom ou un Prénom',
                            minimumInputLength: 2, allowClear: true,
                            ajax: {
                                quietMillis: 250, url: "/json-users", dataType: 'json',
                                data: function (term, page) {
                                    return { pageSize: 8, pageNum: page, searchTerm: term };
                                },
                                results: function (data, page) {
                                    var more = (page * 8) < data.Total; 
                                    return { results: data.Results, more: more };
                                }
                            }
                        });
                    $("#membership-"+ (numrow-1) +"-year_uid").select2({});
                }
                if ($(container).attr("id")=="tab_role") {
                    $("#roles-"+ (numrow-1) +"-year_uid").select2({});
                    $("#roles-"+ (numrow-1) +"-tiers_role").select2({});
                }
            }
        });
    });
});

function edit_member(srcobj, num) {
    $(srcobj).addClass("disabled");
    $("#content-member-"+ num +"-year_uid").hide();
    $("#membership-"+ num +"-year_uid").select2({
        width:'80px',
        data: year_data
    });
    //$('select').select2(); 
    $("#content-member-"+ num +"-user_uid").hide();
    $("#membership-"+ num +"-user_uid").select2(
        {
            width:'250px',
            placeholder: 'Entrez ici un Nom ou un Prénom',
            minimumInputLength: 2, allowClear: true,
            initSelection: function(element, callback){
                callback({id: element.val(), text: $("#content-member-"+ num +"-user_uid").text() })
            },
            ajax: {
                quietMillis: 250, url: "/json-users", dataType: 'json',
                data: function (term, page) {
                    return { pageSize: 8, pageNum: page, searchTerm: term };
                },
                results: function (data, page) {
                    var more = (page * 8) < data.Total; 
                    return { results: data.Results, more: more };
                }
            }
        });
    $("#content-member-"+ num +"-role").hide();
    $("#membership-"+ num +"-role").show();
    return false;
};

function edit_role(srcobj, num) {
    $(srcobj).addClass("disabled");
    $("#roles-"+ num +"-year_uid").select2({
        width:'80px',
        data: year_data
    });
    $("#roles-"+ num +"-tiers_role").select2({
        width:'100%',
        data: role_data
    });
    $("#content-role-"+ num +"-year_uid").hide();
    $("#content-role-"+ num +"-tiers_role").hide();
    $("#roles-"+ num +"-tiers_role").show();
    return false;
};
</script>
</%def>