admin/Facilitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HSLE#53460 Geavanceerd modal heeft nu multiSuggests en multiSelect flex kenmerken

Browse Source 
svn path=/Website/trunk/; revision=38590
This commit is contained in:
Koen Reefman
2018-07-19 16:04:53 +00:00
parent a753e90da0
commit 13586df403
6 changed files with 194 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
APPL/Localscripts/FcltJquery.js
View File

@@ -373,7 +373,7 @@ jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
e.stopPropagation();
var sel_id = $(this).attr("fcltfor");
var selector = $('select#' + sel_id);
if (selector.length && selector[0].className.match(/^ui-/))
if ((selector.length && selector[0].className.match(/^ui-/)) || $(this).hasClass("disabled"))
return; // Afblijven van jQuery calendar jaar listboxje
var old = selector.attr('multiple');
selector.attr('multiple', !old);
@@ -383,25 +383,27 @@ jQuery.fn.filterByText = function(textbox, selectSingleMatch) {
})
$.fn.extend({
multiSelectToggle : function(options){
//Settings list and the default values
multiSelectToggle : function(options) {
// Settings list and the default values
var defaults = {
label: '»'
};
var options = $.extend(defaults, options);
return this.each(function() {
var lbl = $("<span fcltfor='" + this.id + "' class='multi_select_toggle' />").html(options.label);
var div = $('<div />').addClass('multitoggle'); // deze div schuiven we 20px naar links
$(this).wrap(div);
$(this).before(lbl);
if (!$(this).prev("span.multi_select_toggle").length)
{
var lbl = $("<span fcltfor='" + this.id + "' class='multi_select_toggle' />").html(options.label);
var div = $('<div />').addClass(options.advanced ? "advmultitoggle" : "multitoggle");
$(this).wrap(div);
$(this).before(lbl);
}
});
}
});
$(function () {
$('select[fcltmulti=1]').multiSelectToggle();
});
})(jQuery);
function fcltPrompt(title, defval, fnSuccess, params)

100
APPL/Localscripts/modal_kenmerken.js
View File

@@ -80,10 +80,8 @@ function doSubmitWithKenmerken()
/* Global kenmerk_waarden */
for (var m = 0; m < kenmerk_waarden.length; m++)
{
if (kenmerk_waarden[m].op == 'IS NOT NULL' || kenmerk_waarden[m].op == 'IS NULL')
if (kenmerk_waarden[m].val || kenmerk_waarden[m].op == 'IS NOT NULL' || kenmerk_waarden[m].op == 'IS NULL')
continue; // blijven
if (kenmerk_waarden[m].val && kenmerk_waarden[m].typ != "R" && kenmerk_waarden[m].typ != "S")
continue;
if (kenmerk_waarden[m].val != '-1' && kenmerk_waarden[m].val != '' && (kenmerk_waarden[m].typ == "R" || kenmerk_waarden[m].typ == "S"))
continue;
// Schrappen
@@ -101,21 +99,33 @@ function doSubmitWithKenmerken()
function kenmerkValues(n)
{
if ($("#k" + n + "t").val() == "N" && $("#has_k" + n + "val").val() == 1)
this.key = $("#k" + n + "key").val();
this.typ = $("#k" + n + "t").val();
this.op = $("#ko" + n).val();
this.id = n;
if (this.typ == "N" && $("#has_k" + n + "val").val() == 1)
{ // Het is een checkbox
this.checkbox = true;
if ($("#k" + n + "val").prop("checked"))
this.val = 1;
else
this.val = 0;
this.val = $("#k" + n + "val").prop("checked") ? 1 : 0;
}
else if (this.typ == "S")
{
if ($("select#Suggestk" + n + "_show").length && $("[name=k" + n + "val]").val().length) // multiSuggest
this.val = $("[name=k" + n + "val]").val();
else if ($("#k" + n + "val").val() != "" && $("#k" + n + "val").val() != -1)
this.val = [$("#k" + n + "val").val()];
}
else
{
this.val = $("#k" + n + "val").val();
this.key = $("#k" + n + "key").val();
this.typ = $("#k" + n + "t").val();
this.op = $("#ko" + n).val();
this.suggest = (this.typ == "S"? $("#Suggest" + "k" + n + "_show").val(): "");
if (!this.val || (this.val == -1 && this.typ == "R"))
delete this.val;
}
if (this.typ == "S")
this.sug = $("select#Suggestk"+n+"_show").length ? $("#Suggestk"+n+"_show").val().length > 1 ? $("#Suggestk"+n+"_show").val() // open multiSuggest
: $("#Suggestk"+n+"_show option:selected").text() // single selected from multiSuggest
: $("#Suggestk"+n+"_show").val(); // single Suggest
}
function getAdvFlexValues() // Voor extern gebruik zoals in FcltMgr.saveTab();
@@ -136,13 +146,12 @@ function getAdvFlexValues() // Voor extern gebruik zoals in FcltMgr.saveTab();
{
// Alleen operator opslaan.
}
else if ((this_k.val && this_k.typ != "R" && this_k.typ != "S") ||
(this_k.val != "-1" && this_k.val != "" && (this_k.typ == "R" || this_k.typ == "S")))
else if (this_k.val || (this_k.val != "-1" && this_k.val != "" && (this_k.typ == "R" || this_k.typ == "S")))
{
save_k.typ = this_k.typ;
save_k.val = this_k.val;
if (this_k.typ == "S")
save_k.sug = this_k.suggest;
save_k.sug = this_k.sug;
}
else
continue; // niet opslaan
@@ -160,20 +169,36 @@ function setAdvFlexValues(flexKenmerken)
this_k = flexKenmerken[x];
this_k.key = x;
this_k.id = $("input[value='"+this_k.key+"'][name$='key']").eq(0).attr("id").slice(1, -3); // current id
this_k.checkbox = $("#k"+this_k.id+"val").attr("type") == "checkbox" ? 1 : 0;
if (!this_k.id) continue; // bestaat niet meer ?
if (this_k.typ == "S")
$("#Suggestk"+this_k.id+"_show").val(this_k.sug);
if (this_k.typ == "N" && $("#k"+this_k.id+"val").attr("type") == "checkbox")
$("#k"+this_k.id+"val").prop("checked", this_k.val == 1);
else
$("#k"+this_k.id+"val").val(this_k.val);
$("#k"+this_k.id+"key").val(this_k.key);
$("#ko"+this_k.id).val(this_k.op);
setAdvFlexValue(this_k);
}
}
function setAdvFlexValue(k)
{
if (k.typ == "R" && k.val != null && typeof k.val == "object" && k.val.length > 1)
$("#k" + k.id + "val").multiSelectToggle({ advanced: true }).prev().click();
if (k.typ == "S")
{
if (k.val && k.val.length > 1)
$("#Suggestk" + k.id + "_show").val(k.val);
else
$("#Suggestk" + k.id + "_show").val(k.sug);
}
if (k.typ == "N" && k.checkbox)
$("#k"+k.id+"val").prop("checked", k.val == 1);
else
$("#k"+k.id+"val").val(k.val);
$("#k"+k.id+"key").val(k.key);
$("#k"+k.id+"t") .val(k.typ);
$("#ko"+k.id) .val(k.op);
}
function showKenmerkModal(purl, ptitle, init)
{
// ***** START INTERNE FUNCTIES *****
@@ -203,7 +228,7 @@ function showKenmerkModal(purl, ptitle, init)
var toggle = false;
for (var m = 0; m < kenmerk_waarden.length; m++)
{
if ((kenmerk_waarden[m].val) || (kenmerk_waarden[m].op=='IS NOT NULL') || (kenmerk_waarden[m].op=='IS NULL') ) toggle = true;
if ((kenmerk_waarden[m].val) || (kenmerk_waarden[m].op=='IS NOT NULL') || (kenmerk_waarden[m].op=='IS NULL')) toggle = true;
}
if (toggle)
@@ -220,10 +245,13 @@ function showKenmerkModal(purl, ptitle, init)
var aantal_kenm = $("#k_all").val();
for (i = 1; i <= aantal_kenm; i++)
{
$('#ko' + i).val("=");
$('#ko' + i).val("IN");
$('#k' + i + 'val').val("");
$('#Suggest' + "k" + i + '_show').val(""); // Mocht het een Suggestbox zijn dan text ook legen
}
// Alle multiSelects en multiSuggests dichtklappen.
$("select.advMultiSuggest").prev("span.multi_suggest_toggle").click();
$("select[advmulti][multiple]").prev("span.multi_select_toggle").click();
}
// ***** EINDE INTERNE FUNCTIES *****
@@ -271,23 +299,7 @@ function showKenmerkModal(purl, ptitle, init)
else if (sameurl)
{ // Zet de geselecteerde waarden
for (var n = 0; n < kenmerk_waarden.length; n++)
{
$("#k" + (n + 1) + "t").val(kenmerk_waarden[n].typ);
if (kenmerk_waarden[n].typ == "S")
{
$("#Suggest" + "k" + (n + 1) + "_show").val(kenmerk_waarden[n].suggest)
}
// Een numeriek "N" kenmerk kan ook een checkbox zijn.
if (kenmerk_waarden[n].typ == "N" && kenmerk_waarden[n].checkbox)
{ // Het is een checkbox.
if (kenmerk_waarden[n].val == 1)
$("#k" + (n + 1) + "val").prop("checked", true); // Checkbox aanvinken.
}
else
$("#k" + (n + 1) + "val").val(kenmerk_waarden[n].val);
$("#k" + (n + 1) + "key").val(kenmerk_waarden[n].key);
$("#ko" + (n + 1)).val(kenmerk_waarden[n].op);
}
setAdvFlexValue(kenmerk_waarden[n]);
}
});
}

35
APPL/Shared/Suggest/suggest.js
View File

@@ -141,17 +141,18 @@ function Suggest(inParams)
}
else
var $klikker = $("<div class='suggestklikker'><i class='fa fa-fw " + icon + " suggestklikker'></i></div>");
$(params.queryField).after($klikker)
.addClass("hasIcon");
if (params.multitoggle)
{
$(params.queryField).addClass("multiSuggest");
$(params.queryField).addClass(params.multitoggle == "advanced" ? "advMultiSuggest" : "multiSuggest");
var $lbl = $("<span fcltfor='" + $(params.queryField).attr("id") + "' class='multi_suggest_toggle' />").on("click", function() { toggleSelect(this); }).html("&raquo;");
var $div = $("<div />").addClass("multitoggle"); // deze div schuiven we 20px naar links
var $div = $("<div />").addClass(params.multitoggle == "advanced" ? "advmultitoggle" : "multitoggle"); // deze div schuiven we 15px naar links
$(params.queryField).add($(params.queryField).next(".suggestklikker")).wrapAll($div);
$(params.queryField).before($lbl);
}
params.queryField.setAttribute("sgKey", params.initKey);
// IE6 en IE7 hebben functie hasAttribute niet
if (!params.queryField.hasAttribute)
@@ -225,6 +226,11 @@ function Suggest(inParams)
setClass("suggestBad");
}
// Geavanceerd scherm waarvan een suggest geladen wordt met meerdere waarden automatisch uitklappen
var storedVars = $(params.queryField).val().split(",");
if (params.multitoggle == "advanced" && storedVars.length && storedVars.length > 1)
toggleSelect();
/**
*
* It all starts here!
@@ -330,9 +336,13 @@ function Suggest(inParams)
label = $suggestField.prev("span.multi_suggest_toggle");
}
else
$suggestField = $(label).next(".multiSuggest");
$suggestField = $(label).next(".multiSuggest, .advMultiSuggest");
if ($(label).hasClass("disabled"))
return;
var isMultiSuggest = $suggestField.prop("tagName") == "SELECT";
var multiClass = $suggestField.hasClass("multiSuggest") ? "multiSuggest" : "advMultiSuggest";
// toggle label between <20> and <20>
$(label).html().indexOf("<22>") == -1 ? $(label).html("&raquo;") : $(label).html("&laquo;");
@@ -357,7 +367,7 @@ function Suggest(inParams)
}
}
// Toggle subsequent multiSuggest SELECT's of the same type, back to input's
// Toggle subsequent multiSuggest SELECT's of the same type, back to input's (not in advanced popup)
$suggestField.closest("tr").nextAll("tr").find("select.multiSuggest").prev("span.multi_suggest_toggle").click();
// hide|show subsequent suggests of the same type
@@ -370,7 +380,6 @@ function Suggest(inParams)
sgRel[key].makeHidden();
}
//
if (isMultiSuggest) // Replace multi-suggest back to single-suggest with new or empty value.
{
var sgKey = $suggestField.find(":selected").eq(0).val() || -1;
@@ -383,14 +392,15 @@ function Suggest(inParams)
{
// Make multi-SELECT
var url = params.queryUrl + _urlAddParams(params.urlAdd) + "&SuggestAll=1&k=*";
var storedVars = $suggestField.val().split(",");
$.getJSON(url, function(data, textStatus)
{
if (data)
{
var sgKey = $currentField[0].getAttribute("sgKey");
var $sel = $("<select size=\"5\" multiple=\"1\" class=\"multiSuggest\">").attr("id", $currentField.attr("id"))
.attr("name", params.keyField.id)
.attr("sgType", sgType);
var $sel = $("<select size=\"5\" multiple=\"1\" class=\""+multiClass+"\">").attr("id", $currentField.attr("id"))
.attr("name", params.keyField.id)
.attr("sgType", sgType);
if (data.hasMore)
$sel.append($("<option>").attr("disabled", true)
.attr("title", L("lcl_shared_suggest_toomany"))
@@ -401,13 +411,16 @@ function Suggest(inParams)
$option = $("<option>").attr("value", data.result[i].key)
.attr("title", data.result[i].desc)
.text(data.result[i].txt);
if (sgKey == data.result[i].key)
if (sgKey == data.result[i].key || $.inArray(String(data.result[i].key), storedVars) > -1)
$option.attr("selected", true);
$sel.append($option);
}
$suggestField.replaceWith($sel);
$currentField = $sel;
thisSgObj.setValue(-1, "");
if (thisSgObj)
thisSgObj.setValue(-1, "");
}
});
}

40
APPL/Shared/default.csx
View File

@@ -280,12 +280,24 @@ div.multitoggle {
margin-left: -15px;
display: inline-block;
}
div.advmultitoggle {
cursor: pointer;
margin-left: 0px;
display: inline-block;
}
span.multi_select_toggle,
span.multi_suggest_toggle {
width:15px;
display:inline-block;
text-align: center;
vertical-align: top;
color: inherit;
cursor: inherit;
}
span.multi_select_toggle.disabled,
span.multi_suggest_toggle.disabled {
color: #aaa;
cursor: default;
}
a[href^="mailto:"] {
text-decoration: none;
@@ -2792,6 +2804,10 @@ i.productklikker {
{
width: 224px;
}
select.advMultiSuggest
{
width: 209px;
}
tr.mod_xcp .fldcontroletype, tr.mod_xcp .fldsel_srtcontrole, tr.mod_xcp .fldeenheid {
width: 346px;
}
@@ -2810,11 +2826,19 @@ input[readonly].fldflexT {
{
width: 218px;
}
.fldflexS.advMultiSuggest,
.fldSflexS.advMultiSuggest
{
width: 203px;
}
.fldflexR, .fldSflexR, input.button
{
width: 224px;
}
[advmulti="1"]
{
width: 209px;
}
input.materiaal
{
width: 206px;
@@ -2901,11 +2925,20 @@ input.materiaal
{
width: 346px;
}
select.advMultiSuggest
{
width: 331px;
}
.fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
.fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
{
width: 340px;
}
.fldflexS.advMultiSuggest,
.fldSflexS.advMultiSuggest
{
width: 325px;
}
.fldflexD, .fldSflexD,
.fldflexT, .fldSflexT {
width: 340px;
@@ -2914,6 +2947,10 @@ input.materiaal
{
width: 346px;
}
[advmulti="1"]
{
width: 331px;
}
input.button {
width: 346px;
}
@@ -3202,6 +3239,7 @@ tr.flexcollapsable td {
}
.operand {
background-color: #E1E894;
vertical-align: top;
width: 60px;
border: 0;
padding: 2px;

31
APPL/Shared/getkenmerksql.inc
View File

@@ -62,10 +62,9 @@ function getKenmerkSql(pmodule, pkeyColumn, prequestForm)
var kk = (prequestForm
? getFParamInt("k" + kenmerk + "key", -1)
: getQParamInt("k" + kenmerk + "key", -1)); // kenmerk key of bij INS: srtkenmerk_key
var kv = new String(
(prequestForm
? getFParam("k" + kenmerk + "val", "")
: getQParam("k" + kenmerk + "val", ""))); // kenmerk waarde
var kv = (prequestForm
? getFParamArray("k" + kenmerk + "val", [], true)
: getQParamArray("k" + kenmerk + "val", [], true)); // kenmerk waarde
var ko = new String(
(prequestForm
? getFParam("ko" + kenmerk, "")
@@ -74,7 +73,12 @@ function getKenmerkSql(pmodule, pkeyColumn, prequestForm)
? getFParam("k" + kenmerk + "t", null)
: getQParam("k" + kenmerk + "t", null)); // kenmerk type
if ((kt == "S" || kt == "R") && kv == "-1") kv = "";
if (!kv.length || ((kt == "S" || kt == "R") && kv == [-1]))
kv = "";
else if (kv.length == 1)
kv = kv[0];
if (kk > 0 && (kv != "" || ko == "IS NOT NULL" || ko == "IS NULL"))
{
var where1 = kwaarde;
@@ -128,10 +132,10 @@ function getKenmerkSql(pmodule, pkeyColumn, prequestForm)
where3 = " AND ik.ins_srtinstallatie_key = " + (slecil == 1? S("cil_ins_srt_groep_key") : S("sle_ins_srt_groep_key"));
}
if (ko != 'IS NOT NULL' && ko != 'IS NULL')
if (ko != "IS NOT NULL" && ko != "IS NULL")
{
add_b = false;
if (ko == 'LIKE' || ko == 'NOT LIKE')
if (ko == "LIKE" || ko == "NOT LIKE")
{
where1 = "UPPER(" + where1 + ")";
kv = safe.quoted_sql_wild("%" + kv + "%");
@@ -161,10 +165,19 @@ function getKenmerkSql(pmodule, pkeyColumn, prequestForm)
{
if (kt != 'R' && kt != 'S') // Listbox en suggestbox zijn keys. Upper is dan niet nodig. Wordt de query alleen maar trager van.
where1 = "UPPER(" + where1 + ")";
kv = safe.quoted_sql(kv.toUpperCase());
if (typeof kv != "string" && kv.length > 1 && (ko == "IN" || ko == "NOT IN")) // e.g. 2042,723,341
kv = "(" + safe.quoted_sql_join(kv, true) + ")";
else
{
kv = safe.quoted_sql(kv.toUpperCase());
if (ko == "IN" || ko == "NOT IN")
{
ko = ko == "IN" ? "=" : "<>";
where2 = ko;
}
}
}
}
where2 += " " + kv;
}
else

45
APPL/Shared/kenmerk_common.inc
View File

@@ -174,8 +174,8 @@ function OpenFlexFile(Module, Niveau, Key, Kenmerk_key, fname, params)
function Operand(n)
{
ret_str = "<select class='operand' id='ko" + n + "' name='ko" + n + "'>"
+"<option value='='>=</option> "
+"<option value='&lt;&gt;'>&lt;&gt;</option> "
+"<option value='IN'>=</option> "
+"<option value='NOT IN'>&lt;&gt;</option> "
+"<option value='&lt;'>&lt;</option>"
+"<option value='&gt;'>&gt;</option>"
+"<option value='&lt;='>&lt;=</option>"
@@ -292,6 +292,8 @@ function kenmerk_regel(kv_params)
{
kvhtml += ('>');
kvhtml += (Operand(kv_params.idCounter));
}
else
{
@@ -451,6 +453,7 @@ function listKenmerk(sql, module, key, props)
var anyDate = false;
var anyTime = false;
var anyTextarea = false;
var anySelect = false;
var kenmerkidref = new Array(); // Bijhouden welk kenmerk welke id referentie mee heeft gekregen
var dpYearRanges = []; // te gebruiker jaren voor datepicker vastleggen.
var minMax = []; // te gebruiker uren voor timepicker vastleggen.
@@ -1038,12 +1041,15 @@ function listKenmerk(sql, module, key, props)
+ ", \"" + nameprefix + "\""
+ ", \"" + extraserie + "\""
+ ");";
anySelect = true;
kv = "<select id='" + nameprefix + idCounter + "val' name='" + nameprefix + idCounter + "val'"
+ " class='"
+ (kenmerk_search ? "fldSflexR " : "fldflexR ")
+ (required ? required_class : "")
+ "'"
//+ " placeholder='"+flexkenmerklabel+"'"
+ (kenmerk_search ? " advmulti=1 " : "")
+ (required ? " required='required' " : "")
+ (required > 1
? " onChange='checkRequiredGroup(\"" + required_group + "\");" + onchangeExp + "'"
@@ -1669,6 +1675,7 @@ function listKenmerk(sql, module, key, props)
if ($("#execDone<%=nameprefix + idCounter%>").val() == 0)
{ // Alleen initieel uitvoeren. Niet bij overzichten als "Geavanceerd" kenmerken worden gekopieerd naar div binnen form. Want waarde kan veranderd/ingevuld zijn.
Suggest<%=nameprefix + idCounter%> = new Suggest({objectName: "Suggest<%=nameprefix + idCounter%>",
<%=(kenmerk_search ? "multitoggle: \"advanced\", " : "")%>
queryField: $("#Suggest<%=nameprefix + idCounter%>_show")[0],
queryUrl: rooturl + "/appl/shared/Suggest/SuggestKenmerkDomein.asp?kenmerkdomein_key=<%=kdomein_key%>",
initKey: '<%=flexkenmerkwaarde%>',
@@ -1866,6 +1873,40 @@ function listKenmerk(sql, module, key, props)
}
if (anySelect && kenmerk_search)
{
%><script>
$(function()
{
$('[advmulti=1]').multiSelectToggle({advanced: true});
});
</script><%
}
if (kenmerk_search)
{
%><script>
$(function()
{
$("select.operand").each(function() {
$(this).change(function() {
var isIs = $(this).val() == "NOT IN" || $(this).val() == "IN"; // "=" of "<>"
var $advDiv = $(this).next("div.advmultitoggle:has(> select[multiple])"); // open multiToggle
if (!isIs && $advDiv.length)
$advDiv.find("span.multi_select_toggle, span.multi_suggest_toggle").click(); // close open multiToggle
$(this).next("div.advmultitoggle")
.find("span.multi_select_toggle, span.multi_suggest_toggle")
.toggleClass("disabled", !isIs);
});
});
});
</script><%
}
// Add preview links for bijlagen
if (previewParams.length && !kenmerk_search)
{