Editace uživatele

Editace-uživatele.markdown

Editace uživatele

interní uživatel, řešitelská strana

A Pen by Tomáš Tintěra on CodePen.

License.

index.html

<div class="container" >
<form class="form-horizontal copy_panel" role="form">
  <div class="form-group">
    <label for="copy_from" class="col-sm-2 control-label">Nakopírovat hodnoty z šablon:</label>
    <div class="col-sm-4">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Hledání podle celého jména vzorového uživatele.">
      <span class="help-block"><small>Kopíruje všechna pole kromě osobních údajů. Při více vzorech kopíruje štítky ze všech, duplicitní hodnoty se vezmou z posledního údaje. Vyplňujte proto v pořadí od obecného po specializované.</small></span>
    </div>
    <label for="inputEmail3" class="col-sm-2 control-label">šablony jsou účty se štítkem:</label>
    <div class="col-sm-3">
      <select id="stitky" data-placeholder="Nastavit štítky a práva ..." class="form-control chosen-select" multiple>
        <optgroup label="Special rights">
          <option> V.I.P</option>
          <option> Cooper</option>
          <option> Sales</option>
        </optgroup>
        <optgroup label="Teams">
          <option> Back office</option>
          <option> Accounting</option>
          <option> Production</option>
          <option> SAP</option>
          <option> IT</option>
          <option> IT_network_admins</option>
          <option> IT_SW_developers</option>
        </optgroup>
        <optgroup label="Countries">
          <option> Germany</option>
          <option> Poland</option>
          <option> Czech</option>
          <option> Slovakia</option>
          <option> Hungary</option>
          <option> Rumania</option>
        </optgroup>
        <optgroup lable="Used by administrator">
          <option selected> Template user</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="form-group text-right">
    <div class="col-md-6">
      <button class="btn btn-default btn-large"><i class="icon-circle-arrow-down"></i> nakopírovat níže</button>
    </div>
  </div>
</form>
<hr class="copy_panel" style="border-top: 1px solid #999999" /><!-- @gray-light -->
<div class="row">
  <div class="col-md-2 border fotobox"><img class="foto" alt="Foto osoby" src="http://demo.taskpool.net/getUserFile?customerId=377&filename=MilanJ_portret.png" /></div>
  <div class="col-md-5 border">
    <h1 style="margin-bottom: 0.5ex">Ing. Milan Janeček</h1>
    <h3 style="margin-top:0">key account manager, Copper</h3>
  </div>
    <!--
  <div class="col-md-1 border" ></div>
-->
  <div class="col-md-2 border">
    <div class="radio activeTop">
      <label><input type="radio" name="active" value="active" checked />aktivní</label>
    </div>
    <div class="radio">
      <label><input type="radio" name="active" value="deactivated" />deaktivovaný</label>
    </div>
    <a href="#" class="btn_delete btn btn-xs btn-default" data-toggle="modal" data-target="#deleteUserModal"><span class="fa fa-times"></span> smazat</a>
<!-- 
    Jinde přidělená oprávnění:
    <div class="form-control backRights"></div>
-->
  </div><!-- /col -->
  <div class="col-md-2 border" style="text-align:right">
    <br /><a href="#" class="btn btn-sm btn-default jako_vzor" style="display:none"><span class="fa fa-files-o"></span> použít jako vzor</a>
  </div><!-- /col -->
</div>
<hr />
<div class="row">
  <div class="col-md-6" style="border: 0px solid green">
    <div class="row">
      <div class="col-md-4 border nazvyPoli">
        doména a<br />uživatelské jméno:
      </div>    
      <div class="col-md-8 border">
        <div class="input-group">
          <!--<span class="input-group-addon">lokální</span>-->
          <div class="input-group-btn">
            <button type="button" class="btn btn-default 
                     dropdown-toggle" data-toggle="dropdown">
                     Místní účet
                     <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu pull-right">
                     <li><a href="#">Místní účet</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Doména Cooper (AD)</a></li>
                     <li><a href="#">LDAP Cooper</a></li>
                     <li class="divider"></li>
                     <li><a href="#">Přidat metodu autentizace <span class="fa fa-external-link-square"></span></a></li>
                  </ul>
          </div>
          <input class="form-control" value="mjanecek" />
          <span class="input-group-addon"><span class="fa fa-refresh"></span></span>
        </div>
        
      </div>
    </div> <!-- vnitřní row -->
    <div class="row">
      <br />
      <div class="col-md-4 border nazvyPoli">štítky:</div>    
      <div class="col-md-8 border">
        <select id="stitky" data-placeholder="Nastavit štítky a práva ..." class="form-control chosen-select" multiple>
          <optgroup label="Special rights">
            <option selected> V.I.P</option>
            <option selected> Cooper</option>
            <option selected> Sales</option>
          </optgroup>
          <optgroup label="Teams">
            <option> Back office</option>
            <option> Accounting</option>
            <option> Production</option>
            <option> SAP</option>
            <option> IT</option>
            <option> IT_network_admins</option>
            <option> IT_SW_developers</option>
          </optgroup>
          <optgroup label="Countries">
            <option> Germany</option>
            <option> Poland</option>
            <option selected> Czech</option>
            <option> Slovakia</option>
            <option> Hungary</option>
            <option> Rumania</option>
          </optgroup>
        </select>
        <br /><br />
        <a href="#">oprávnění přidělená "na jméno".</a>
      </div><!-- col -->
    </div><!-- vnitřní row -->
    <div class="row">
      <br />
      <div class="col-md-4 border nazvyPoli">
        e-mail:
      </div>    
      <div class="col-md-8 border">
        <input class="form-control" value="janecek.milan@copper.com"/>
      </div>
    </div> <!-- vnitřní row -->
    <div class="row">
      <br />
      <div class="col-md-4 border nazvyPoli">
        GSM:
      </div>    
      <div class="col-md-8 border">
        <input class="form-control" value="+420 777 689 243"/>
      </div>    
    </div> <!-- vnitřní row -->
    <div class="row">
      <br />
      <div class="col-md-4 border nazvyPoli">
        výchozí jazyk:
      </div>    
      <div class="col-md-8 border">
        <select class="form-control"/>
          <option>Němčina</option>
          <option>Polština</option>
          <option selected>čeština</option>
          <option>Slovenština</option>
          <option>Maďarština</option>
          <option>Rumunština</option>
        </select>
      </div>    
    </div> <!-- vnitřní row -->
  </div><!-- col -->
  <div class="col-md-1 border" ></div>    
  <div class="col-md-4 border">
    <textarea class="form-control notes">Zapsat poznámku</textarea>
  </div>  
</div> <!-- row -->
<hr />
<div class="row">
  <div class="col-md-2 border nazvyPoli">
    může zastupovat: 
  </div>    
  <div class="col-md-4 border">
    <select id="stitky" data-placeholder="Nastavit osoby, které Milan Janeček může nyní zastupopvat ..." class="form-control chosen-select" multiple>
      <option selected>Jan Dašek</option>
      <option selected>Johana Malá</option>
      <option >Petr Hanák</option>
    </select>
    <br /><br />
  </div>
</div>
<div class="row" style="position: relative; top:-21px">
  <div class="col-md-2 border nazvyPoli">
    mohou ho zastupovat: 
  </div>    
  <div class="col-md-4 border">
    <select id="stitky" data-placeholder="Nastavit osoby, které mohou zastupovat osobu: 'Milan Janeček'" class="form-control chosen-select" multiple>
      <option selected>Jan Dašek</option>
      <option selected>Johana Malá</option>
      <option >Petr Hanák</option>
    </select>
    <br /><br />
  </div>
</div>
<hr />
Vlastní pole
</div>

<div class="pageComments">
<br />
<ul>
  <li>
    <b>Cíle:</b> efektivní a přehledné nastavení. Několikrát rychlejší nastavení i přehlednost a jistota správného nastavení.</li>
  <li><b>Poznámky k implmentaci:</b> jednotlivá pole vypadají ve výchozím stavu read only, do editačního stavu se přepínají získáním fokusu.<br />
    Pole s editací štítků je pouze demo. Je třeba doplnit další vlastnosti. Barvy štítků, možnost chodit kurzorem mezi jednotlivými štítky, práce s clipboardem. (po vzoru Outlooku a GMailu).
  </li>
  <li><b>Vynechané prvky (proti TP2)</b> Zaškrtávátko pamatovat bude pouze součástí přihlašovacího dialogu. Časování notifikací bude v notifikacích. Navíc #TP3 zásadně ozmení potřebu e-mail notifikací. TaskPool Tray zatím není řešen.
  </li>
  <li>Ukládací tlačítko bude modré jen pokud je co uložit a formulář je validní. Lze všaj kliknout i na šedé tlačítko a vyvolat tak chybové hlášení.</li>
  <li>Chybová hlášení se zobrazují u prvku s chybou. (Provedení viz Bootstrap CSS)</li>
  <li>Oznámení o uložení se zobrazuje na obrazovce nahoře.</li>
  <li>Design: návrh je v čistém Bootstrap-u, předpokládám nasazení administračního skinu.</li>
  <li>Zobrazit rozložení prvků jako při:  
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active showHideButton" data-show-class="copy_panel" data-hide-class="jako_vzor">
        <input type="radio" id="ano" checked>vytváření nového uživatele</label>
      <label class="btn btn-default showHideButton" data-show-class="jako_vzor" data-hide-class="copy_panel">
        <input type="radio" id="ne" >úpravě existujícího</label>
    </div>
    <br />Pozn.:1. 9. 2014 pouze schová vrchní část nebo tlačítko "použít jako vzor".
  </li>
  <li>TODO: při zobrazení horního kopírovátka skrýt dolní kopírovátko a obráceně.</li>
  <li>
<b>Shoda jmen:</b> Pro shodu jmen je podstatný nejen pohled admina, ale i dalších osob. Dana Tichá potřebuje rozeznat s kým spolupracuje na druhé straně. (A není přípustné ji nutit rozlišovat osoby pouze na základě avataru). Stejně tak například Jiří Černý musí vědět, kdo se ho ptá a s kým na zakázce spolupracuje.</p>

<p>Čili potřebujeme rozlišit viditelná jména.</p>
<p>Duplicita může také vznikat při registraci zadavatele. Přijde e-mail od osoby Dana Tichá. Tento e-mail není registrován. Později se reálná Dana Tichá na portálu zákazníka bude chtít registrovat.</p>

<p>Jsou však hned dva bezpečnostní důvody, proč je nutné tuto duplicitu povolit. 
<br />- TP nemá bránit registraci na základě neregistrovaného e-mailového požadavku. Neb jinak by kdokoli mohl uživateli daného jména zkomplikovat registraci.
<br />- TP nesmí ani prozradit, že uživatel se jménem XY používá tuto nebo jinou instalaci TP.</p>

<p><b>Řešení:</b> U interních uživatelů zakázat duplicitu viditelné části jména. Doporučuji rozlišit například například jako "Jiří Černý ml." a "Jiří Černý st.", případně u vnitropodnikového HD uvedenám přezdívky nebo oddělení. V budoucích verzích pravděpodobně přidáme volitelné zobrazení funkce. Potom může existovat souběžně "Jiří Černý, technik" a "Jiří Černý, ředitel".</p>

<p>U klientů ale toto omezení není možné zavést úplně z dikutovaných bezpečnostních důvodů. Proto bude TP vyžadovat povinně e-mail adresu (A jak budou na to požadavky, upravíme obrazovku a budeme ji zobrazovat současně se jménem). V případě, kde se TP používá na CallCentru, vystupují z pohledu TP jako zadavatelé operátoři CallCentra a zákazníka následně o vyřešení informují telefonicky. V těchto instalacích tedy bude telefonní číslo volajícího povinnným dynamickým polem.</p>
<p>Dále budeme vyžadovat unikátní jméno klienta mezi registrovanýými klienty v rámci jedné společnosti.</p>

<p>Duplicita je zároveň řešena v use case s registrací HD_Prihlaseni.docx, a *.pdf</p>
</li>

</ul>
<ul>
  <li><b>Novinky:</b></li>
  <li>12. 12. 2014: K "může zastupovat" přidáno související "mohou ho zastupovat"  Příklad ukazuje situaci, kdy se v týmu account managerů zastupují všichni navzájem.</li>
  <li>1. 9. kopírování ze vzoru, použít jako vzor</li>
  <li>23. 8. login, doména, tlačítko na znovunačtení údajů z LDAPu, ukládací tlačítko. Doplněny implementční poznámky.</li>
  <li>12. 4. 2015 Do poznámek doplněn požadavek na unikátní jména.</li>
</ul>  
</div>

script.js

$('.btn').button();

$(".showHideButton").click(function() {
  //alert(".showHideButton");
  //if( ! $(this).hasClass("active") ) {
  //  $(".showCopyPanel").removeClass("active");
  //  $(this).addClass("active");    
  //}
  var hideClass= $(this).data("hideClass");
  $("."+hideClass).hide();
  var showClass= $(this).data("showClass");
  $("."+showClass).show();
});



$(".chosen-select").chosen();

var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'hledaný text nenalezen!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
/*
$('#deleteUserModal').modal({
  keyboard: false
});*/

style.css

.btn_delete:hover {
    color: #FFF;
    background-color: #D9534F;
    border-color: #D43F3A;
}
.border { border: 0px solid lightGray; }
body { margin: 0em 0em; }

div.container { margin: 0; padding 0;}
.foto { width:5em; height:5em; }
.foto, .activeTop { margin-top: 20px; }
.center { text-align: right; }
.nazvyPoli { text-align: right; margin-top: 10px;}
.fotobox { text-align: right; }
textarea.notes { height: 11em;  }
.backRights  { height: 6em; width: 100% }
/*---------------------------------------*/
select.form-control + .chosen-container.chosen-container-single .chosen-single {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-image:none;
}

select.form-control + .chosen-container.chosen-container-single .chosen-single div {
    top:4px;
    color:#000;
}

select.form-control + .chosen-container .chosen-drop {
    background-color: #FFF;
    border: 1px solid #CCC;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    margin: 2px 0 0;

}

select.form-control + .chosen-container .chosen-search input[type=text] {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container .chosen-results {
    margin: 2px 0 0;
    padding: 5px 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    margin-bottom: 5px;
}

select.form-control + .chosen-container .chosen-results li , 
select.form-control + .chosen-container .chosen-results li.active-result {
    display: block;
    padding: 3px 40px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
    background-image:none;
}
select.form-control + .chosen-container .chosen-results li.group-result {
  padding: 3px 20px;
  font-weight: bold;
} 


select.form-control + .chosen-container .chosen-results li:hover, 
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
    color: #FFF;
    text-decoration: none;
    background-color: #428BCA;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 6px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555;
    vertical-align: middle;
    background-color: #FFF;
    border: 1px solid #CCC;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    background-image:none;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
    height:auto;
    padding:5px 0;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice {

    background-image: none;
    padding: 3px 24px 3px 5px;
    margin: 0 6px 0 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #FFF;
    border-color: #CCC;
}

select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
    top:8px;
    right:6px;
}

select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
    border-color: #66AFE9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}

select.form-control + .chosen-container-multi .chosen-results li.result-selected{
    display: list-item;
    color: #ccc;
    cursor: default;
    background-color: white;
}