cv_database/flask_app/app/templates/qualifications.html

{% extends base %}
{% block head_extra %}
<style>
#tbl_qualifications {
display: none;
}
</style>
{% endblock head_extra %}

{% block content %}
{% import "macros/action_icons_static.html" as icons with context %}
<span class="title" role="main"><h2>{% block title %}Qualifications{% endblock %}</h2></span>
<div class="content-container content">
<article>
<h3>Qualification Types</h3>
<div><a href="#" id="a_add_type">Add qualification type</a></div>
{% if qualification_types %}
<div class="table-container">
<table id="tbl_types" class="data-table">
<thead>
<tr>
<th>Qualification type</th><th style="font-size: smaller;">(actions)</th>
</tr>
</thead>
<tbody>
{% for type in qualification_types %}
<tr>
<td>{{ type.v_qualification_type }}</td><td><a href="#{{ type.id }}" class="a_edit_type">{{ icons.edit_svg(bl_quotes=False, s_label="edit type") }}</a>&nbsp;<a href= "#{{ type.id }}" class="a_remove_type" >&times;</a></td>
</tr>
{% endfor %}{# end of looping through qualification_types #}
</tbody>
</table><!-- end of tbl_types -->
</div><!-- end of div.table-container -->
{% endif %}{# end of checking if qualification_types populated #}
</article>
<article>
<h3>Qualifications</h3>
<div id="div_qualifications">
<div><a href="#" id="a_add_qualification">Add qualification</a></div>
<div><select id="sel_type_filter">
<option value="0" selected>--all types--</option>
{% for type in qualification_types %}
<option value="{{ type.id }}">{{ type.v_qualification_type }}</option>
{% endfor %}{# end of looping through qualification_types #}
</select>
<button type="button" id="btn_type_filter" value="Apply filter" style="background-color: rgb(39, 37, 92); color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer;">
{{ icons.search_svg(s_label="apply filter") }}
Apply filter
</button>
</div>
<div class="table-container">
<table id="tbl_qualifications" class="data-table">
<thead>
<tr>
<th>Qualification type</th><th>Qualification Name</th><th>Qualification Description</th><th style="font-size: smaller;">(actions)</th>
</tr>
</thead>
<tbody></tbody>
</table><!-- end of tbl_qualifications -->
</div><!-- end of div.table-container -->
</div><!-- end of div_qualifications -->
</article>
</div><!-- end of div.content -->
{% from "macros/dialog.html" import dlg_prep with context %}
{{ dlg_prep(["dlg_type", "dlg_qualification"]) }}
{# dlg divs below #}
<div id="dlg_type" aria-labeledby="spn_type">
<span id="spn_type">Qualification type</span><br>
<form action="{{ url_for("main.qualifications") }}" method="post" id="frm_type">
{{ type_form.csrf_token }}
{{ type_form.hid_qualification_type_id }}
{{ type_form.txt_qualification_type.label}}{{ type_form.txt_qualification_type }}<br>
<input type="submit" name="btn_save_type" value="Save">
</form>
</div><!-- end of dlg_type -->
<div id="dlg_qualification" aria-labeledby="spn_qualification">
<span id="spn_qualification">Qualification details</span><br>
<form action="{{ url_for("main.qualifications") }}" method="post" id="frm_qualification">
{{ form.csrf_token }}
{{ form.hid_qualification_id }}
<ul>
<li>{{ form.sel_qualification_type.label }}{{ form.sel_qualification_type }}<br></li>
<li>{{ form.txt_qualification_name.label }}{{ form.txt_qualification_name }}</li>
<li>{{ form.txt_description.label }}<br>
{{ form.txt_description }}</li>
</ul>
<input type="submit" name="btn_save_qualification" value="Save">
</form>
</div><!-- end of dlg_qualification -->
<script type="text/javascript">
$(document).ready( function() {

try {

var s_dlg_type = $("#dlg_type").html();
var s_dlg_qualification = $("#dlg_qualification").html();

$("#a_add_type").click( function(event) {
    event.preventDefault();
    $("#dlg_type").html(s_dlg_type);
    $("#dlg_type").redraw();
    $("#dlg_type").dialog("open");
});// end of a_add_type click event

$(".a_edit_type").click( function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var s_type = $($($($(this).parent()).parent()).children("td")[0]).text();
    $("#dlg_type").html(s_dlg_type);
    $("#dlg_type").redraw();
    $("#hid_qualification_type_id").val(s_id);
    $("#txt_qualification_type").val(s_type);
    $("#dlg_type").redraw();
    $("#dlg_type").dialog("open");
});// end of .a_edit_type click event

$(".a_remove_type").click( function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var bl_confirm = confirm("Are you sure - this will also remove all qualifications under this type, including entries under CV records, but uploaded documents will not be removed?");
    if (bl_confirm) {
        $("#hid_remove_qualification_type_id").val(s_id);
        document.getElementById("frm_remove_type").submit();
    }// end of checking confirmation
});// end of .a_remove_type click event

function filter_qualifications(s_type_id) {
try {
    var i_type_id = Number(s_type_id);
    if (isNaN(i_type_id)!=true) {
        s_type_id = String(i_type_id);
        var s_url = "{{ url_for("main.qualifications_list", i_type_id=99999) }}".replace("99999", s_type_id);
        $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            var s_html = "";
            $("#tbl_qualifications tbody").empty();
            if (o_data.length>0) {
                $.each(o_data, function(ix, q) {
                    // v_qualification_type, v_qualification_name, v_description, id
                    s_html = s_html + "<tr><td>" + q.v_qualification_type + "</td><td>" + q.v_qualification_name + "</td><td>" + q.v_description + "</td>";
                    s_html = s_html + "<td><a href=\"#" + q.id + "\" class=\"a_edit_qualification\">{{ icons.edit_svg(bl_quotes=False, s_label="edit qualification") }}</a>&nbsp;<a href=\"#" + q.id + "\" class=\"a_remove_qualification\">{{ icons.delete_svg(bl_quotes=False, s_label="remove qualification") }}</a></td></tr>";
                });// end of .each loop through qualifications
                $("#tbl_qualifications tbody").append(s_html);
                $("#tbl_qualifications").show();
                do_alert("Qualifications matching this type loaded");
            } else {
                $("#tbl_qualifications").hide();
                var s_extra = (i_type_id==0) ? "" : " matching this type";
                do_alert("No qualifications" + s_extra);
            }// end of length check against o_data
        }// end of typeof check
        });// end of .get
    }// end of making sure valid numeric value passed
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
}// end of filter_qualifications function

var s_type_filter = "0";
{% if type_filter>0 %}
s_type_filter = String("{{ type_filter }}");
{% endif %}
var bl_wait = true;
$($("#sel_type_filter").children("option[value='" + s_type_filter + "']")[0]).prop("selected", true);
filter_qualifications(s_type_filter);

$("#btn_type_filter").click( function(event) {
    try {
    if (bl_wait!=true) {
        var s_type_id = String($("#sel_type_filter").val());
        filter_qualifications(s_type_id);
    }// end of checking if should wait
    bl_wait = false;
} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch
});// end of btn_type_filter click|sel_type_filter change event

$("#a_add_qualification").click( function(event) {
    event.preventDefault();
    $("#dlg_qualification").html(s_dlg_qualification);
    $("#dlg_qualification").redraw();
    $("#dlg_qualification").dialog("open");
});// end of a_add_qualification click event

$("#tbl_qualifications").on("click", ".a_edit_qualification", function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    $("#dlg_qualification").html(s_dlg_qualification);
    $("#dlg_qualification").redraw();
    var s_url = "{{ url_for("main.qualification_details", i_qualification_id=99999) }}".replace("99999", s_id);
    $.get(s_url, function(o_data) {
        if (typeof(o_data)=="object") {
            $("#hid_qualification_id").val(s_id);
            $("#sel_qualification_type").val(o_data.i_qualification_type);
            $("#txt_qualification_name").val(o_data.v_qualification_name);
            $("#txt_description").val(o_data.v_description);
            $("#dlg_qualification").redraw();
            $("#dlg_qualification").dialog("open");
        }// end of typeof check
    });// end of .get
});// end of .a_edit_qualification inside tbl_qualifications click event

$("#tbl_qualifications").on("click", ".a_remove_qualification", function(event) {
    event.preventDefault();
    var s_id = String($(this).attr("href")).replace("#", "");
    var bl_confirm = confirm("Are you sure - this will also remove all qualifications of this type under CV records, but uploaded documents will not be removed?");
    if (bl_confirm) {
        $("#hid_remove_qualification_id").val(s_id);
        document.getElementById("frm_remove_qualification").submit();
    }// end of checking confirmation
});// end of .a_remove_qualification inside tbl_qualifications click event

} catch(e) {
    var s_err = String(e.name) + "\nmessage:" + String(e.message);
    s_err = (typeof(e.lineNumber)!="undefined") ? s_err + "\nline:" + String(e.lineNumber) : s_err;
    alert("Error! " + s_err);
}//end of catch

});// end of secondary document ready
</script>
<form action="{{ url_for("main.qualifications") }}" method="post" id="frm_remove_type">
{{ remove_type_form.csrf_token }}
{{ remove_type_form.hid_remove_qualification_type_id}}
</form>
<form action="{{ url_for("main.qualifications") }}" method="post" id="frm_remove_qualification">
{{ remove_form.csrf_token }}
{{ remove_form.hid_remove_qualification_id }}
</form>
{% endblock %}