Skip to content

P
PERFORMA_REPLICA
Commit 4f3f7568 by Saliya Randunu
Options

ui changes and jquery coding for occupation selection popup and page

parent 52e649a2
Showing with 107 additions and 2 deletions
cmsWebApp/webroot/css/common.css
...@@ -6386,3 +6386,19 @@ input{ ...@@ -6386,3 +6386,19 @@ input{
.create-job-selector.checked h3{ .create-job-selector.checked h3{
color: #FFFFFF; color: #FFFFFF;
} }
.occupation_content {position: relative;}
.occupation_content_list {width: 25%; overflow-y: scroll; max-height: 400px;}
.occupation_content_list ul {display: none;width: 25%;position: absolute; top:0}
.occupation_content_list li {cursor: pointer;font-weight: 500;background: #F4F7F8; border-bottom: solid 1px #e5e8eb ; border-right: solid 1px #e5e8eb ; padding: 0;}
.occupation_content_list li span {display: block;padding:15px 20px ; }
.occupation_content_list > li {font-weight: 700;}
.occupation_content_list li.clicked {border-right: 0}
.occupation_content_list li.clicked > span {background: #fff;color: #03a0e7;font-weight: 700;}
.occupation_content_list li.clicked > ul {display: block;}
#occupation-list .jBox-container {border-radius: 3px; padding: 0}
#occupation-list .jBox-content {padding: 0;font-size: 13px;}
#occupation-list .jBox-container .jBox-title{background-color: #4E5258; color: #fff;font-size: 17px;border-radius: 3px 3px 0 0; height: 70px;line-height: 40px}
.occupation_select_button {height: 100px; padding:20px; text-align: right; border-top: solid 1px #e5e8eb ;}
.occupation_select_button .btn.btn-primary.largeBtn{margin: 0}
\ No newline at end of file
cmsWebApp/webroot/extensions/adminportal/job_detail.jsp
...@@ -32,7 +32,37 @@ ...@@ -32,7 +32,37 @@
$("button[name$='loadJobFromTemplate']").click(); $("button[name$='loadJobFromTemplate']").click();
}); });
// $(".occupation_content ul").css('width', $(".occupation_content").width()/4);
var popup_width = 1040;
new jBox('Modal', {
id : "occupation-list",
attach: '.select-occupation',
title: 'Select the occupation classification for this job',
content : $("#occupation_content"),overlay : true,
closeButton: "title",
minWidth : popup_width, height : 500,
onCreated : function(){
var menu_item_width = popup_width/4;
$(".occupation_content_list ul").css("width",menu_item_width);
$(".occupation_content_list ul.first-child").css("left",menu_item_width);
$(".occupation_content_list ul.second-child").css("left",menu_item_width);
$(".occupation_content_list ul.third-child").css("left",menu_item_width);
}
});
$(".occupation_content_list li").click(function(){
$(this).siblings('li').removeClass("clicked");
$(this).addClass("clicked");
});
}); });
</script> </script>
...@@ -169,7 +199,8 @@ ...@@ -169,7 +199,8 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<label><oneit:label GUIName="Job Occupation Classification" /></label> <label><oneit:label GUIName="Job Occupation Classification" /></label>
<tagfile:ormsingleasso_select obj="<%= job %>" assocName="Occupation" options="<%= Occupation.searchAll(transaction) %>"/> <input type="text" class="form-control select-occupation" value="Select Occupation"></input>
<!--<tagfile:ormsingleasso_select obj="<%= job %>" assocName="Occupation" options="<%= Occupation.searchAll(transaction) %>"/>-->
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row">
...@@ -283,5 +314,62 @@ ...@@ -283,5 +314,62 @@
</div> </div>
</div> </div>
</div> </div>
<div class="occupation_content" id="occupation_content" style="display: none;">
<ul class="occupation_content_list">
<%
Occupation[] firstLevelOccupations = Occupation.SearchByAll()
.andLevel(new EqualsFilter<>(OccupationLevel.LEVEL_1))
.search(transaction);
for (Occupation firstLevel : firstLevelOccupations)
{
%>
<li class="main-item">
<span> <%= firstLevel%> </span>
<ul class="first-child">
<%
for (Occupation secondLevel : firstLevel.getChildOccupationsSet())
{
%>
<li >
<span> <%= secondLevel%></span>
<ul class="second-child">
<%
for (Occupation thirdLevel : secondLevel.getChildOccupationsSet())
{
%>
<li >
<span> <%= thirdLevel%></span>
<ul class="third-child">
<%
for (Occupation fourthLevel : thirdLevel.getChildOccupationsSet())
{
%>
<li >
<span> <%= fourthLevel%></span>
</li>
<%
}
%>
</ul>
</li>
<%
}
%>
</ul>
</li>
<%
}
%>
</ul>
</li>
<%
}
%>
</ul>
<div class="occupation_select_button">
<button type="button" value="Save Job Occupation" class="btn btn-primary largeBtn" style="" >Save Job Occupation</button>
</div>
</div>
</oneit:form> </oneit:form>
</oneit:dynIncluded> </oneit:dynIncluded>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment