code-cegled/template/templates/user_group_data_edit.tpl

<div class="form_wrapper">
    <form method="post">
        <div class="buttons">
            <a href="/admin/delete_user_group/{$user_group->get_ug_id()}" class="addbutton delete-big">Csoport törlése</a>
        </div>
        <input type="hidden" name="action" value="user_group_update">
        <input type="hidden" name="ug_id" id="ug_id" value="{$user_group->get_ug_id()}">
        <input type="hidden" name="ug_automatic" id="ug_automatic" value="{$user_group->get_ug_is_automatic()}">

        <div>
            <label class="desc" id="title1" for="ug_name">Név:</label>
            <div><input type="text" name="ug_name" id="ug_name" value="{$user_group->get_ug_name()}" required></div>
        </div>

        <div>
            <label class="desc" id="title1" for="ug_description">Leírás:</label>
            <div><textarea rows="5" name="ug_description" id="ug_description">{$user_group->get_ug_description()}</textarea></div>
        </div>

        <div>
            <label class="desc" id="title1" for="ug_is_automatic">Automatikus csoport:</label>
            <div><input type="checkbox" name="ug_is_automatic" id="ug_is_automatic" value="1" disabled="disabled" {if $user_group->get_ug_is_automatic()}checked{/if}></div>
        </div>

        <div>
            <div>
                <input class="button black" type="submit" value="Mentés">
            </div>
        </div>

    </form>

{if $user_group->get_ug_is_automatic()}
    <br><br><br>
    <form method="post" id="auto_filters">
    </form>
    <input type="hidden" name="ug_id" id="ug_id" value="{$user_group->get_ug_id()}">
    <div class="user_filter">
        <button type="button" class="button black" onclick="add_filter()" style="height: 40px;">Szűrő Hozzáadás</button>
    </div>
    <br>
    <div class="user_filter">
        <button type="button" class="button black" onclick="apply_filters()" style="height: 40px;">Halmaz</button>
        <button type="button" class="button black" onclick="apply_filters(1)" style="height: 40px;">Metszet</button>
    </div>

    <div class="list wide" id="user_list" style="padding: 20px 0px 50px 0px;"></div>

    <div id="footer_control">
        <a onclick="update_user_list()" class="addbutton add" style="cursor: pointer;">Minden tag</a>
        <div id="categories">
        </div>

    </div>
    <div id="footer_toggle" onclick="footer_toggle();">
        <img src="/_image/collapse.png">
    </div>

<script type="text/javascript">

var footer_category_ids = [];
var footer_values = [];

$( document ).ready(function() {
    update_user_list(null, true);
    update_footer();
    get_filters();
});


function get_filters() {
    $.post("/_ajax/get_filter_value_list.php",
    {
        group_id: $("#ug_id").val()
    },
    function(data, status) {
        //filter array
        var pdata = JSON.parse(data);

        $.each(pdata, function(key, filter_value) {
            //végigmegyünk a filter_value-kon
            var filter_id = filter_value['ugfv_filter_id'];
            var filter_value_id = filter_value['ugfv_id'];
            var filter_html = '\
            <div class="filter_row"><label for="filter_'+filter_value_id+'""><select class="filter_select" onChange="update_value_list('+filter_value_id+', this)" id="filter_'+filter_value_id+'"><option value="null">- Válassz szűrőt -</option></select></label>\
            <div>\
            <select id="filter_value_'+filter_value_id+'"><option value="null">- Szűrő értéke -</option></select>\
            </div></div>\
            ';
            $("#auto_filters").append(filter_html);
            load_filters(filter_value_id, filter_id, filter_value['ugfv_value']);
            //update_value_list(filter_value_id, $("#filter_"+filter_value_id), filter_value['ugfv_value']);
        });

    });
}


function load_filters(select_id, selected_filter_id = null, ugfv_value = null) {
    $.post("/_ajax/get_filter_list.php",
    function(data, status) {
        //filter array
        var pdata = JSON.parse(data);
        var selected;
        var option_string = '<option value="null">- Válassz szűrőt -</option>';
        $.each(pdata, function(key, value) {
            selected = '';
            if (selected_filter_id) {
                if (selected_filter_id == value["ugf_id"]) {
                    selected = ' selected';
                }
            }
            option_string += "<option value='"+value["ugf_id"]+"'"+selected+">"+value["ugf_name"]+"</option>";
        });
        $("#filter_"+select_id).html(option_string);
        //$("#filter_"+select_id).trigger('change');
        if (ugfv_value) {
            update_value_list(select_id, $("#filter_"+select_id), ugfv_value);
        }

    });
}


function update_value_list(id, select_element, selected_id = null) {
    //itt kell megvizsgálni, hogy milyen fajta mező stb
    //mármint az ajaxezés közben
    $.post("/_ajax/get_filter_values.php",
    {
        filter_id: $("#filter_"+id).val(),
    },
    function(data, status) {
        //value array
        var pdata = JSON.parse(data);
        if (pdata != null) {
            var option_string = '';
            $.each(pdata, function(key, value) {
                option_string += "<option value='"+value["ugf_id"]+"'>"+value["ugf_name"]+"</option>";
            });
            $("#filter_value_"+id).html(option_string);
            if (selected_id) {
                $("#filter_value_"+id).val(selected_id);
            }
        }
        else {
            $("#filter_value_"+id).html('<option value="null">- Szűrő értéke -</option>');

        }
    });
}

function update_footer() {
    $("#categories").html('');
    $.each(footer_category_ids, function(key, value) {
        $("#categories").append('<a onclick="update_user_list('+value+')" class="addbutton add" style="cursor: pointer;">'+footer_values[key]+'</a>');
    });
}

function apply_filters(intersect = 0) {
    //ha üres a filter list, akkor nem csinál semmit
    var to_remove = [];
    if( ($('#auto_filters').children()).length ) {
        //todo: a kiválasztott mezőket is hozzá kell rakni

        //bele kell rakni egy tömbbe a filterek id-ját
        var filter_array = [];
        $.each($(".filter_select"), function(key, value) {
            //le kell vágni a _ után a számot
            //tömb[tömb]
            //a belső tömbben egy filter ID, filter_value ID és egy value van
            var filter_select_value = $(this).val();


            if (filter_select_value == 'null') {
                to_remove.push($(this).parent().parent());
            }

            var parts = $(value).attr('id').split('_');
            var filter_id = parts[1];
            var filter_value = [];
            filter_value.push(filter_id);
            filter_value.push($("#filter_value_"+filter_id).val());
            filter_value.push($("#filter_"+filter_id).val());

            filter_array.push(filter_value);


        });
        //return;
        $.post("/_ajax/apply_filters.php",
        {
            filter_array: filter_array,
            user_group_id: $("#ug_id").val(),
            intersect: intersect,
        },
        function(data, status) {
            update_user_list(null, true);
            $.each(to_remove, function(key, value) {
                value.remove();
            });
        });

    }
}

function update_user_list(category_id = 0, footer_update = false) {
    //lekéri a usereket a csoportból


    $.ajax({
        url: '/_ajax/get_auto_group_members.php',
        global: false,
        type: 'POST',
        data: {
            group_id: $("#ug_id").val(),
            category_id: category_id,
        },
        async: true, //blocks window close
        success: function(data, status) {
            var pdata = JSON.parse(data);
            console.log(pdata);
            var content = '';
            var ugc_name_parts;
            footer_category_ids = [];
            footer_values = [];
            content += '<div class="date_separator">'+pdata.length+' fő';
            if (category_id) {
                content += ' (szűkített nézet!)';
            }

            content += '</div>';
            $.each(pdata, function(key, value) {
                ugc_name_parts = value['ugc_names'].split(",");
                //footer elements
                //darabokra szedjük + mégegy each
                if (value['ugc_ids']) {
                    var ugc_ids = value['ugc_ids'].split(',');
                    $.each(ugc_ids, function(k, v) {
                        if (footer_category_ids.indexOf(v) == -1) {
                            footer_category_ids.push(v);
                        }
                    });
                }
                //fe. end

                ugc_name_parts.sort();
                content +=
                '\
                <div class="list_item" id="kid_'+value['uk_id']+'">\
                    <span class="name_span">'+value['uk_name']+'</span>';
                if (value['ugc_ids']) {
                    content += '<div class="categories">';

                    $.each(ugc_name_parts, function(ugc_key, ugc_value) {
                        content += '<span class="category_tab">'+ugc_value+'</span>';
                        if (footer_values.indexOf(ugc_value) == -1) {
                            footer_values.push(ugc_value);
                        }

                    });

                content += '\
                    </div>';
                }
                content += '</div>';
            });
            if (footer_update) {
                update_footer();
            }
            document.getElementById('user_list').innerHTML = content;
        }
    });
}


function add_filter() {
    //hozzáad egy új szűrő a HTML-hez

    $.post("/_ajax/create_user_group_filter.php",
    {
        create_new: true,
    },
    function(data, status) {
        //az új szűrő id-ját kapjuk vissza
        var pdata = JSON.parse(data);
        //illesszünk be rögtön egy új szűrőt, először csak null filter_id-val, és majd az Alkalmaz gombra kattintva tölti ki
        var filter_html = '\
        <div class="filter_row"><label for="filter_'+pdata+'""><select class="filter_select" onChange="update_value_list('+pdata+', this)" id="filter_'+pdata+'"><option value="null">- Válassz szűrőt -</option></select></label>\
        <div>\
        <select id="filter_value_'+pdata+'"><option value="null">- Szűrő értéke -</option></select>\
        </div></div>\
        ';
        $("#auto_filters").append(filter_html);
        //legyen egy function, ami egy adott selectbe beletölti az összes filter típust
        load_filters(pdata);

    });
}





</script>


{else}

    <div class="user_filter">
        <input name="uk_filter_name" id="uk_filter_name" placeholder="Keresés..." autofocus>
        <button type="button" class="button black" onclick="get_group_members({$user_group->get_ug_id()}, null)" style="height: 40px;">Összes tag</button>
    </div>
    <div class="user_filter">
        <input class="add_category" id="add_category" placeholder="Új kategória">
        <button type="button" class="button black" onclick="add_category()" style="height: 40px;">Hozzáadás</button>
    </div>

    <div class="list wide" id="user_list" style="padding: 20px 0px 50px 0px;"></div>


</div>

<div id="footer_control">
    <a href="#" id="members" onclick="get_group_members({$user_group->get_ug_id()},'members')" class="addbutton add">Tagok</a>
    <a href="#" id="not_members" onclick="get_group_members({$user_group->get_ug_id()},'not_members')" class="addbutton add">Nem tagok</a>
    <a href="#" id="members_without_category" onclick="get_group_members({$user_group->get_ug_id()},'members_without_category')" class="addbutton add">Kategória nélküli tagok</a>
</div>
<div id="footer_toggle" onclick="footer_toggle();">
    <img src="/_image/collapse.png">
</div>

<script>

var Timer;
var options = '';

$( document ).ready(function() {
    //$("#uk_filter_name").focus();

    //legeneráljuk az option-öket, és ezeket csak appendeljük, hogy ne kelljen minden lépésben lekérni
    generate_options($("#ug_id").val());

    //betöltjük a footerbe a category-kat
    generate_footer_items($("#ug_id").val());

    //mutassuk a tagokat
    get_group_members($('#ug_id').val(), 'members');

});

$("#uk_filter_name").keyup(function() {
    var text = $("#uk_filter_name").val();
    if (text.length >= 3) {
        document.getElementById('user_list').innerHTML = 'Betöltés...';
        clearTimeout(Timer);
        Timer = window.setTimeout(get_group_members($("#ug_id").val(),text), 1000);
    }
});

function generate_options(ug_id) {
    $.post("/_ajax/get_category_list.php",
    {
        group_id: ug_id,
    },
    function(data, status) {
        var pdata = JSON.parse(data);
        var option_string = '';
        $.each(pdata, function(key, value) {
            option_string += "<option value='"+value["ugc_id"]+"'>"+value["ugc_name"]+"</option>";
        });
        options = option_string;
        update_select_lists();
    });
}

function generate_footer_items(ug_id) {
    $.post("/_ajax/get_category_list.php",
    {
        group_id: ug_id,
    },
    function(data, status) {
        var pdata = JSON.parse(data);
        var option_string = '';
        $.each(pdata, function(key, value) {
            option_string += '<a href="#" id="members" onclick="get_group_members({$user_group->get_ug_id()},'+value['ugc_id']+')" class="addbutton add">'+value['ugc_name']+'</a>';
        });
        $("#footer_control").append(option_string);
    });
}


function modify_membership(uk_id, group_id) {

    //css átállítása
    if ($("#kid_"+uk_id).hasClass('member')) {
        $("#kid_"+uk_id).removeClass('member');
        $("#kid_"+uk_id).addClass('not_member');
    }
    else {
        $("#kid_"+uk_id).addClass('member');
        $("#kid_"+uk_id).removeClass('not_member');
    }

    //adatbázis módosítás
    $.post("/_ajax/update_membership.php",
    {
        uk_id: uk_id,
        group_id: group_id
    });
}

function create_category(group_id, category_name) {
    $.post("/_ajax/create_category.php",
    {
        group_id: group_id,
        category_name: category_name
    },
    function(data, status) {
        var pdata = JSON.parse(data);

        generate_options(group_id);
        //add_category_to_kid(uk_id, pdata, group_id);
        //update_select_list(uk_id, group_id, pdata);
        add_category_to_footer(pdata);
    });

}

function update_select_list(uk_id, group_id, category_id = null) {
    //az utolsó paraméter határozza meg, hogy selecteddé kell-e tenni valamit

    //kitöröljük az összes optiont-t
    $('#cat_list_'+uk_id).html('');

    //lekérjük a friss category listát ehhez a grouphoz
    $.post("/_ajax/get_category_list.php",
    {
        group_id: group_id,
    },
    function(data, status){
        var pdata = JSON.parse(data);
        var selected;
        //végigmegyünk rajta
        $.each(pdata, function(key, value) {
            selected = false;
            if (category_id) {
                if (value['ugc_id'] == category_id) {
                    selected = 'selected';
                    $('#select_value_'+uk_id).val(category_id);
                }
            }
            //a hidden mező értékét kéne csak beállítani
            $('#cat_list_'+uk_id).append($("<option></option>")
                                            .attr('value', value['ugc_id'])
                                            .prop('selected', selected)
                                            .text(value['ugc_name'])

                );
        });

        update_select_lists();
    });
}

function update_select_lists() {
    //updateli az összes selectet az oldalon
    //először elmenti h melyik id-jú a selected
    //betöltés után beállítja
    var selected;
    var select_id;
    var kid_id;
    var temp_array;
    $("select").each(function() {
        select_id = $(this).prop('id');
        temp_array = select_id.split('_');
        kid_id = temp_array[2];
        selected = $("#select_value_"+kid_id).val();
        $(this).html('<option value="null">- nincs kategória -</option>');
        $(this).append(options);
        $(this).val(selected);
    });
}

function add_category_to_footer(category_id) {
    $.post("/_ajax/get_category.php",
    {
        category_id: category_id,
    },
    function(data, status){
        var pdata = JSON.parse(data);
        $("#footer_control").append('<a href="#" onclick="get_group_members('+$("#ug_id").val()+','+category_id+')" class="addbutton add">'+pdata[0]['ugc_name']+'</a>');
    });


}

function add_category() {
    //létrehozzuk a category-t a group-hoz
    var cat_name = $("#add_category").val();
    create_category($("#ug_id").val(), cat_name);
    $("#add_category").val('');

    //hozzáadjuk az új category-t a footerhez
}

function add_category_to_kid(uk_id, category_id, group_id) {
    $.post("/_ajax/add_category_to_kid.php",
    {
        uk_id: uk_id,
        category_id: category_id,
        group_id: group_id
    });
}

function update_category_to_user(uk_id, group_id, select_element) {
    $.post("/_ajax/add_category_to_kid.php",
    {
        uk_id: uk_id,
        category_id: select_element.value,
        group_id: group_id
    });
}


//searchStr lehetséges paraméterek: members, not_members, category_id
function get_group_members(groupId, searchStr) {
    document.getElementById('user_list').innerHTML = 'Betöltés...';
    $.post("/_ajax/get_group_members.php",
    {
        searchStr: searchStr,
        groupId: groupId,

    },
    function(data, status){
        var pdata = JSON.parse(data);
        var member;
        var content = '';
        for (var i=0; i<pdata.length; ++i) {

            member = 'not_member';
            if (pdata[i]['ugk_user_group_ug_id'] == groupId) {
                member = 'member';
            }

            content +=
            '\
            <div class="list_item '+member+'" id="kid_'+pdata[i]['uk_id']+'">\
                <span class="toggle" onclick="modify_membership('+pdata[i]['uk_id']+', '+groupId+')"><img src="/_image/switch.png"></span>\
                    <span class="name_span">'+pdata[i]['uk_name']+'</span>\
                    <select class="category_list" onChange="update_category_to_user('+pdata[i]['uk_id']+', '+groupId+', this)" id="cat_list_'+pdata[i]['uk_id']+'" name="cat_list_'+pdata[i]['uk_id']+'"><option value="null">- nincs kategória -</option></select>\
                    <input type="hidden" id="select_value_'+pdata[i]['uk_id']+'" value="'+pdata[i]['ugk_category_ugc_id']+'">\
            </div>\
            ';
        }
        document.getElementById('user_list').innerHTML = content;
        update_select_lists();
    });
}

</script>

{/if}

<script type="text/javascript">
    function footer_toggle() {
        $("#footer_control").fadeToggle( "fast", "linear" );
    }
</script>