View Applicants HT005 - card view (shortlist applicant grid view)

cmsWebApp/src/performa/utils/WebUtils.java

@@ -35,6 +35,7 @@ public class WebUtils
     public static final String BILLING          = "Billing";
     public static final String VIEW_APPLICANTS  = "ViewApplicants";
     public static final String APPLICANTS_SHORTLIST  = "ApplicantsShortlist";
+    public static final String APPLICANTS_GRID  = "ApplicantsGrid";
     
     public static String getArticleLink(HttpServletRequest request, ObjectTransaction objTran, String articleShortcut, String renderMode)
     {

cmsWebApp/webroot/css/common.css

@@ -407,6 +407,125 @@ span.active-time {
 	color: #a6a6a6;
 }
 
+
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    /*float: left;*/
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    /*display: block;*/
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    /*display: block;*/
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}
+
 /*Form Layout Css*/
 
 .form-group {

cmsWebApp/webroot/extensions/adminportal/GeneralConfig_adminPortal.xml

@@ -14,6 +14,7 @@
                 <RenderMode name="EditJob"              preIncludeJSP="extensions/adminportal/edit_job.jsp"/>
                 <RenderMode name="ViewApplicants"       preIncludeJSP="extensions/adminportal/view_applicants.jsp"/>
                 <RenderMode name="ApplicantsShortlist"  preIncludeJSP="extensions/adminportal/view_applicants_shortlist.jsp"/>
+                <RenderMode name="ApplicantsGrid"       preIncludeJSP="extensions/adminportal/view_applicants_shortlist_grid.jsp"/>
                 
             </NODE>
             

cmsWebApp/webroot/extensions/adminportal/inc/shortlist_tabs.jsp

+<%@ page extends="oneit.servlets.jsp.JSPInclude" %>
+
+<%@ include file="/inc/stdimports50.jsp" %><%-- This is in cougar --%>
+<%@ include file="/inc/stdcms.jsp" %><%-- This is in cougar --%>
+<%@ include file="/extensions/performa/inc/stdimports.jsp" %>
+
+<%
+    Job     job         =   (Job) process.getAttribute("Job");
+    String  tabNumber   =   (String)  getData(request, "TabNumber");
+    String  firstTab    =   WebUtils.getSamePageInRenderMode(request, WebUtils.APPLICANTS_SHORTLIST);
+    String  secondTab   =   WebUtils.getSamePageInRenderMode(request, WebUtils.APPLICANTS_GRID);
+%>
+
+<oneit:dynIncluded>
+    <div class="main-applicants-filter main-shortlist-filter">
+        <div class="appli-list-shorting main-shortlist">
+            <div class="appli-shorting-dropdown appli-left">
+                <span class="appli-order-label">Bulk edit</span>
+                <select class="form-control">
+                    <option>Interview</option>
+                </select>
+            </div>
+            <div class="appli-filter">
+                <ul class="">
+                    <li class="lable-appli-shorting">View</li>
+                    <li class="<%= (tabNumber == "1" ? "active" : "" ) + " short-list"%>">
+                            <oneit:button   value="List"   name="gotoPage" skin="link"
+                            requestAttribs="<%= CollectionUtils.mapEntry("nextPage", firstTab)
+                                                            .mapEntry("procParams", CollectionUtils.mapEntry("Job", job).toMap())
+                                                            .toMap() %>"/>
+                    </li>
+                    <li class="<%= (tabNumber == "2" ? "active" : "" ) + " grid-list"%>">
+                            <oneit:button   value="Grid"   name="gotoPage" skin="link"
+                            requestAttribs="<%= CollectionUtils.mapEntry("nextPage", secondTab)
+                                                            .mapEntry("procParams", CollectionUtils.mapEntry("Job", job).toMap())
+                                                            .toMap() %>"/>
+                    </li>
+                </ul>
+            </div>
+            <div class="appli-shorting-dropdown">
+                <span class="appli-order-label">Export</span>
+                <select class="form-control">
+                    <option>PDF</option>
+                    <option>CSV</option>
+                    <option>XML</option>
+                </select>
+            </div>
+            <div class="appli-shorting-dropdown">
+                <span class="appli-order-label">order by</span>
+                <select class="form-control">
+                    <option>Suitability</option>
+                    <option>Newest</option>
+                    <option>Oldest</option>              
+                </select>
+            </div>
+        </div>
+    </div>
+</oneit:dynIncluded>
+

cmsWebApp/webroot/extensions/adminportal/view_applicants_shortlist.jsp

@@ -10,9 +10,9 @@
     Job     job         = (Job) process.getAttribute("Job");
 
     Debug.assertion(job != null, "Job is null in admin portal view applicants");
-    
-    String  editJobPage     = WebUtils.getSamePageInRenderMode(request, WebUtils.EDIT_JOB);
-    int     closingInDays   = DateDiff.getDateDiff(Calendar.DATE, DateDiff.getToday(), job.getApplyBy());
+
+    String  firstTab        =   WebUtils.getSamePageInRenderMode(request, WebUtils.APPLICANTS_SHORTLIST);
+    String  secondTab       =   WebUtils.getSamePageInRenderMode(request, WebUtils.APPLICANTS_GRID);
 %>
 
     <oneit:form name="viewApplicants" method="post"    enctype="multipart/form-data">
@@ -20,39 +20,9 @@
         <oneit:dynInclude   page="/extensions/adminportal/inc/applicant_view_tabs.jsp"  TabNumber="2"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
        
         <div class="dashboard-content-area second-part view-app-area">            
-            <div class="main-applicants-filter main-shortlist-filter">
-                <div class="appli-list-shorting main-shortlist">
-                    <div class="appli-shorting-dropdown appli-left">
-                        <span class="appli-order-label">Bulk edit</span>
-                        <select class="form-control">
-                            <option>Interview</option>
-                        </select>
-                    </div>
-                    <div class="appli-filter">
-                        <ul class="">
-                            <li class="lable-appli-shorting">View</li>
-                            <li class="active short-list"><a href="#">List</a></li>
-                            <li class="grid-list"><a href="#">Grid</a></li>
-                        </ul>
-                    </div>
-                    <div class="appli-shorting-dropdown">
-                        <span class="appli-order-label">Export</span>
-                        <select class="form-control">
-                            <option>PDF</option>
-                            <option>CSV</option>
-                            <option>XML</option>
-                        </select>
-                    </div>
-                    <div class="appli-shorting-dropdown">
-                        <span class="appli-order-label">order by</span>
-                        <select class="form-control">
-                            <option>Suitability</option>
-                            <option>Newest</option>
-                            <option>Oldest</option>              
-                        </select>
-                    </div>
-                </div>
-            </div>
+            
+            <oneit:dynInclude   page="/extensions/adminportal/inc/shortlist_tabs.jsp"  TabNumber="1"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
+        
             <div class="view-appli-list">
             <%
                 int j   = 0;

cmsWebApp/webroot/extensions/adminportal/view_applicants_shortlist_grid.jsp

+<%@ page extends="oneit.servlets.jsp.JSPInclude" %>
+
+<%@ include file="/inc/stdimports50.jsp" %><%-- This is in cougar --%>
+<%@ include file="/inc/stdcms.jsp" %><%-- This is in cougar --%>
+<%@ include file="/extensions/performa/inc/stdimports.jsp" %>
+<%@page import="oneit.utils.text.FormatUtils"%>
+
+<oneit:dynIncluded>
+<%
+    Job     job         = (Job) process.getAttribute("Job");
+
+    Debug.assertion(job != null, "Job is null in admin portal view applicants");
+%>
+
+    <script type="text/javascript">
+        $(document).ready(function()
+        {
+            $('.grid-box-view').slick({
+                dots: false,
+                infinite: false,
+                speed: 300,
+                slidesToShow: 5,    
+                nextArrow: "<div class='sl_width slider-next'><span><img src='images/slider-arrow.png' /></span></div>",
+                prevArrow: "<div class='sl_width slider-prev'><span><img src='images/slider-arrow-left.png' /></span></div>",
+                responsive: [
+                {
+                  breakpoint: 1280,
+                  settings: {
+                    slidesToShow: 4
+                  }
+                },
+                {
+                  breakpoint: 1024,
+                  settings: {
+                    slidesToShow: 3
+                  }
+                },
+                {
+                  breakpoint: 600,
+                  settings: {
+                    slidesToShow: 2
+                  }
+                },
+                {
+                  breakpoint: 480,
+                  settings: {
+                    slidesToShow: 1
+                  }
+                }
+              ]
+            });
+        });
+        
+    </script>
+    
+    <oneit:form name="viewApplicants" method="post"    enctype="multipart/form-data">
+        
+        <oneit:dynInclude   page="/extensions/adminportal/inc/applicant_view_tabs.jsp"  TabNumber="2"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
+       
+        <div class="dashboard-content-area second-part view-app-area">            
+            
+            <oneit:dynInclude   page="/extensions/adminportal/inc/shortlist_tabs.jsp"  TabNumber="2"   data="<%= CollectionUtils.EMPTY_MAP%>"/>
+            
+            <div class="five-boxs grid-box-view">
+            <%
+                int i   = 0;
+
+                for(JobApplication jobApplication : job.getJobApplicationsSet())
+                {
+            %>
+                    <div class="<%= "appl-c-box " + (i == 0 ? " cb-one" : "")%> ">
+                        <!--TODO: need to work on the logic. just added to demonstrate that there are 3 different colors for this-->
+                        <div class="<%= "cb-title " + (i == 0 ? "green-back" : (i < 3 ? "blue-back" : "dark-back" ))%> ">
+                            <div class="checkbox-list grid-checkbox">
+                                <input id="checkbox1" type="checkbox">
+                                <label for="checkbox1">
+                                    <oneit:toString value="<%= jobApplication.getCandidate() %>"    mode="EscapeHTML" />
+                                </label>
+                            </div>
+                        </div>
+                        <div class="overall-suitablity">
+                            <!--TODO: need to work on the logic. just added to demonstrate that there are 3 different colors for this-->
+                            <div class="<%= "over-all " + (i == 0 ? "f-60 green" : (i < 3 ? "blue"  : "gray"))%>">
+                                <oneit:toString value="<%= jobApplication.getOverallSuitability() %>"   mode="PercentageWholeNumber" />
+                            </div>
+                            <div class="overall take-font-up">overall suitablity</div>
+                        </div>
+                        <div class="jcc-box">
+                            <div class="job-match jcc">
+                                <img src="images/app-job-match-icon.png"> Profile 
+                                <span>
+                                    <oneit:toString value="<%= jobApplication.getJobMatchPercentage() %>"   mode="PercentageWholeNumber" />
+                                </span>
+                            </div>
+                            <div class="detail-box">
+                                <div class="detail-row">
+                                    <div class="detail-label">Career Drive</div>
+                                    <div class="detail-no green">82%</div>
+                                </div>
+                                <div class="detail-row">
+                                    <div class="detail-label">Conflict Management Style</div>
+                                    <div class="detail-no green">82%</div>
+                                </div>
+                                <div class="detail-row">
+                                    <div class="detail-label">Coping</div>
+                                    <div class="detail-no blue">78%</div>
+                                </div>
+                                <div class="detail-row">
+                                    <div class="detail-label">People Orientation</div>
+                                    <div class="detail-no gray">68%</div>
+                                </div>
+                            </div>
+                            <div class="culture jcc">
+                                <img src="images/culture-icon.png"> culture 
+                                <span>
+                                    <oneit:toString value="<%= jobApplication.getCulturePercentage() %>"   mode="PercentageWholeNumber" />
+                                </span>
+                            </div>
+                            <div class="detail-box">
+                                <div class="detail-row">
+                                    <div class="detail-label">Category</div>
+                                    <div class="detail-no green">91%</div>
+                                </div>
+                                <div class="detail-row">
+                                    <div class="detail-label">Category</div>
+                                    <div class="detail-no green">88%</div>
+                                </div>
+                            </div>
+                            <div class="jcc">
+                                <img src="images/criteria-icon.png"> Requirements 
+                                <span>
+                                    <oneit:toString value="<%= jobApplication.getCriteriaPercentage() %>"   mode="PercentageWholeNumber" />
+                                </span>
+                            </div>
+                            <div class="detail-box">
+                                <div class="detail-row">
+                                    <div class="detail-label">Category</div>
+                                    <div class="detail-no green">93%</div>
+                                </div>
+                                <div class="detail-row">
+                                    <div class="detail-label">Category</div>
+                                    <div class="detail-no green">88%</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+            <%
+                    i++;
+                }
+            %>
+            </div>
+        </div>
+    </oneit:form>
+</oneit:dynIncluded>
\ No newline at end of file

cmsWebApp/webroot/extensions/applicantportal/workplace_culture.jsp

@@ -74,7 +74,7 @@
                                     String  selectedStr = (CollectionUtils.equals(questionId, formValue) ? "checked" : "");
                             %>
                                     <div class="radio radio-primary second-radio-primary full-width">
-                                        <input type="radio" name="<%= optionKey %>" id="<%= questionId %>"  value="<%= questionId %>" <%= selectedStr %> >
+                                        <input type="radio" name="<%= optionKey %>" id="<%= questionId %>"  class="element_rating_radio"  value="<%= questionId %>" <%= selectedStr %> >
                                         <label for="<%= questionId %>">
                                             <oneit:toString value="<%= question.getDescription() %>"    mode="EscapeHTML"   nullValue="-"/>
                                         </label>

cmsWebApp/webroot/inc/std_imports.jsp

@@ -18,6 +18,7 @@
     <oneit:script src="/scripts/utils.js" />
     <oneit:script src="/scripts/recalc.js" />
     <oneit:script src="/scripts/jquery.circleProgressBar.min.js"/>
+    <oneit:script src="/scripts/slick.min.js"/>
 </oneit:script>
 
 <script>