src/ApplicationBundle/Resources/views/modals/input_forms/selectEntityModal.html.twig line 1

Open in your IDE?
  1. <style>
  3.     .modal div[class*="col-md"], .modal div[class*="col-lg"], .modal div[class*="col-xs"], .modal div[class*="col-sm"] {
  4.         margin-bottom: 0px;
  5.     }
  6.     .d-flex
  7.     {
  8.         display: flex;
  9.     }
  10.     #selectEntityModal {
  12.         /*box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);*/
  13.         /*border-radius: 12px;*/
  14.     }
  16.     #selectEntityModal .modal-body {
  18.         padding: 0 1rem;
  19.     }
  21.     #selectEntityModal p {
  23.         margin-bottom: .5rem;
  24.     }
  26.     #selectEntityModal .selectize-control {
  28.         min-width: 100%;
  29.     }
  31.     #selectEntityModal .selectize-input.items {
  33.         border: 1px solid #d0d0d0;
  34.         padding: 8px 8px;
  35.         display: inline-block;
  36.         width: 100%;
  37.         overflow: hidden;
  38.         position: relative;
  39.         z-index: 1;
  40.         box-sizing: border-box;
  41.         box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  42.         border-radius: 3px;
  43.     }
  45.     #selectEntityModalForm {
  46.         /*max-width: 500px;*/
  47.         background-color: #ffffff;
  48.         /*margin: 40px auto;*/
  49.         padding: 40px;
  50.         box-shadow: 0px 6px 18px rgb(0 0 0 / 9%);
  51.         /*border-radius: 12px;*/
  52.     }
  54.     #selectEntityModalForm .form-header {
  55.         gap: 5px;
  56.         text-align: center;
  57.         font-size: .9em;
  58.     }
  60.     #selectEntityModalForm .form-header .stepIndicator {
  61.         position: relative;
  62.         flex: 1;
  63.         padding-bottom: 30px;
  64.     }
  66.     #selectEntityModalForm .form-header .stepIndicator.active {
  67.         font-weight: 600;
  68.     }
  70.     #selectEntityModalForm .form-header .stepIndicator.finish {
  71.         font-weight: 600;
  72.         color: #009688;
  73.     }
  75.     #selectEntityModalForm .form-header .stepIndicator::before {
  76.         content: "";
  77.         position: absolute;
  78.         left: 50%;
  79.         bottom: 0;
  80.         transform: translateX(-50%);
  81.         z-index: 9;
  82.         width: 20px;
  83.         height: 20px;
  84.         background-color: #d5efed;
  85.         border-radius: 50%;
  86.         border: 3px solid #ecf5f4;
  87.     }
  89.     #selectEntityModalForm .form-header .stepIndicator.active::before {
  90.         background-color: #a7ede8;
  91.         border: 3px solid #d5f9f6;
  92.     }
  94.     #selectEntityModalForm .form-header .stepIndicator.finish::before {
  95.         background-color: #009688;
  96.         border: 3px solid #b7e1dd;
  97.     }
  99.     #selectEntityModalForm .form-header .stepIndicator::after {
  100.         content: "";
  101.         position: absolute;
  102.         left: 50%;
  103.         bottom: 8px;
  104.         width: 100%;
  105.         height: 3px;
  106.         background-color: #f3f3f3;
  107.     }
  109.     #selectEntityModalForm .form-header .stepIndicator.active::after {
  110.         background-color: #a7ede8;
  111.     }
  113.     #selectEntityModalForm .form-header .stepIndicator.finish::after {
  114.         background-color: #009688;
  115.     }
  117.     #selectEntityModalForm .form-header .stepIndicator:last-child:after {
  118.         display: none;
  119.     }
  121.     #selectEntityModalForm input {
  122.         padding: 15px 20px;
  123.         width: 100%;
  124.         font-size: 1em;
  125.         border: 1px solid #e3e3e3;
  126.         border-radius: 5px;
  127.     }
  129.     #selectEntityModalForm input:focus {
  130.         border: 1px solid #009688;
  131.         outline: 0;
  132.     }
  134.     #selectEntityModalForm input.invalid {
  135.         border: 1px solid #ffaba5;
  136.     }
  138.     #selectEntityModalForm .step {
  139.         display: none;
  140.     }
  142.     #selectEntityModalForm .form-footer {
  143.         overflow: auto;
  144.         gap: 20px;
  145.     }
  147.     #selectEntityModalForm .form-footer button {
  148.         background-color: #1d5b9e;
  149.         border: 1px solid #1d5b9e;
  150.         color: #ffffff;
  151.         border: none;
  152.         padding: 13px 30px;
  153.         font-size: 1em;
  154.         cursor: pointer;
  155.         border-radius: 5px;
  156.         flex: 1;
  157.         margin-top: 5px;
  158.     }
  160.     #selectEntityModalForm .form-footer button:hover {
  161.         opacity: 0.8;
  162.     }
  164.     #selectEntityModalForm .form-footer #promptInfo_prevBtn {
  165.         background-color: #fff;
  166.         color: #009688;
  167.     }
  170.     .box-selector {
  171.         padding: 10px 4px;
  172.         cursor: pointer;
  173.     }
  175.     .box-selector .inside {
  176.         padding: 5px;
  178.         border-radius: 5px;
  179.         -webkit-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  180.         -moz-box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  181.         box-shadow: 10px 10px 48px -24px rgba(14, 26, 87, 1);
  183.     }
  185.     .box-selector .inside input {
  186.         cursor: pointer
  188.     }
  190.     .box-selector .inside textarea {
  191.         text-align: center;
  192.         cursor: pointer;
  193.         width: 100%;
  194.         border: none;
  195.         resize: none;
  196.         font-size: 14px;
  197.         color: #1d5b9e;
  198.         font-weight: bold;
  199.     }
  201.     .box-selector.sch_selector_mon .inside,
  202.     .box-selector.sch_selector_day .inside
  203.         /*.box-selector.sch_selector_time .inside*/
  204.     {
  205.         padding: 10px 5px;
  207.     }
  209.     .box-selector.sch_selector_time .inside {
  210.         padding: 4px 5px;
  212.     }
  214.     .step .view_if_has_schedules {
  215.         display: none;
  216.     }
  219.     .box-selector.active:not(.man_sch_selector) .inside {
  220.         border: 2px solid #1d5b9e;
  221.         -webkit-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  222.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  223.         box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  226.     }
  228.     .box-selector.active.man_sch_selector .inside {
  229.         border: 2px solid #1d5b9e;
  230.         -webkit-box-shadow: none;
  231.         -moz-box-shadow: none;
  232.         box-shadow: none;
  235.     }
  237.     .box-selector.sch_selector_mon.active .inside,
  238.     .box-selector.sch_selector_day.active .inside,
  239.     .box-selector.sch_selector_time.active .inside {
  240.         border: 2px solid #1d5b9e;
  241.         -webkit-box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  242.         -moz-box-shadow: 10px 10px 24px -3px rgba(29, 91, 158, 1);
  243.         box-shadow: 4px 7px 24px -3px rgba(29, 91, 158, 1);
  245.     }
  247.     .box-selector .img {
  248.         margin-left: 5px;
  251.     }
  253.     .box-selector .title {
  254.         text-align: center;
  256.         font-size: 13px;
  257.         margin-top: auto;
  258.         margin-bottom: auto;
  260.     }
  262.     .box-selector.paymentMethodSelectorBtn .title {
  263.         text-align: center;
  264.         margin-bottom: 1px;
  265.         font-size: 14px;
  267.     }
  269.     .box-selector .sub-title {
  270.         font-size: 12px;
  271.         color: grey;
  273.     }
  275.     #selectEntityModal .routineTable {
  276.         text-align: left;
  277.         vertical-align: middle;
  279.     }
  281.     #selectEntityModal .routineTable .icon-delete {
  282.         color: darkred;
  283.         font-weight: bold;
  285.     }
  287.     #selectEntityModal .routineTable .icon-delete .fa {
  288.         padding: 10px;
  289.         border-radius: 39px;
  290.         border: 1px solid #eddcdc;
  291.         width: 34px;
  292.         height: 34px;
  293.         text-align: center;
  295.     }
  297.     #selectEntityModal .routineTable .icon-check {
  298.         color: green;
  299.         font-weight: bold;
  302.     }
  304.     #selectEntityModal .routineTable .icon-check .fa {
  305.         opacity: 0.1;
  307.     }
  309.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  310.         opacity: 1;
  312.     }
  314.     #selectEntityModal .routineTable .icon-check .fa {
  315.         padding: 10px;
  316.         border-radius: 39px;
  317.         border: 1px solid #eddcdc;
  318.         width: 34px;
  319.         height: 34px;
  320.         text-align: center;
  322.     }
  324.     #selectEntityModal .routineTable {
  325.         text-align: left;
  326.         vertical-align: middle;
  328.     }
  330.     #selectEntityModal .routineTable .icon-delete {
  331.         color: darkred;
  332.         font-weight: bold;
  334.     }
  336.     #selectEntityModal .routineTable .icon-delete .fa {
  337.         padding: 10px;
  338.         border-radius: 39px;
  339.         border: 1px solid #eddcdc;
  340.         width: 34px;
  341.         height: 34px;
  342.         text-align: center;
  344.     }
  346.     #selectEntityModal .routineTable .icon-check {
  347.         color: green;
  348.         font-weight: bold;
  351.     }
  353.     #selectEntityModal .routineTable .icon-check .fa {
  354.         opacity: 0.1;
  356.     }
  358.     #selectEntityModal .routineTable .icon-check.isChecked .fa {
  359.         opacity: 1;
  361.     }
  363.     #selectEntityModal .routineTable .icon-check .fa {
  364.         padding: 10px;
  365.         border-radius: 39px;
  366.         border: 1px solid #eddcdc;
  367.         width: 34px;
  368.         height: 34px;
  369.         text-align: center;
  371.     }
  372. </style>
  374. <div class="modal fade" id="selectEntityModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  375.      aria-hidden="true">
  376.     <div class="modal-dialog modal-dialog-centered">
  377.         <div class="modal-content">
  378.             <div class="modal-header" style="">
  379.                 <div class="header  dont_print">
  380.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  381.                     <h4 class="modal-title" id="myModalLabel"><span class="fa fa-list"></span> Select Company</h4>
  383.                 </div>
  385.             </div>
  386.             <div class="modal-body">
  389.                 <div class="row clearfix">
  390.                 <div class="col-md-12">
  396.                     <form id="selectEntityModalForm" action="#">
  397.                         <!-- start step indicators -->
  398.                         <div style="display: none;" class="form-header d-flex mb-4">
  400.                             <span class="stepIndicator seq_0" data-seq-id="0">Select Country</span>
  403.                         </div>
  405.                         <div class="step seq_0 ">
  406. {#                            <h5 class=" ">Select a Country</h5>#}
  409.                             <div class="row clearfix cg_holder">
  414.                             </div>
  417.                         </div>
  422.                         <div class="form-footer d-flex" style="display: none;">
  423.                             <button type="button" class="prevBtn" id="selectEntityModal_prevBtn">
  424.                                 Previous
  425.                             </button>
  426.                             <button type="button" class="nextBtn" id="selectEntityModal_nextBtn">
  427.                                 Next
  428.                             </button>
  429.                         </div>
  431.                     </form>
  434.                 </div>
  435.                 </div>
  437.             </div>
  438.             {# <div class="modal-footer"> #}
  440.             {# </div> #}
  441.         </div>
  442.     </div>
  443. </div>
  446. <script>
  449.     var selectEntityModal = {};
  450.     var spd = "";
  451.     var csToken = '';
  452.     var nextServerUrl = '';
  454.     var currentTabSelectEntityModal=0;
  456.     var accessList=[];
  457.     var accessListInitiated=0;
  459.     {% if app.session.get('aceessList','') !='' %}
  460.     accessList={{ app.session.get('aceessList','')|json_encode|raw() }}
  461.         accessListInitiated=1
  462.     {% endif %}
  464.     function stepShowTab(n, parentSelector) {
  465.         // alert('here')
  466.         // This function will display the specified tab of the form...
  468.         parentSelector = parentSelector || '#selectEntityModal'
  470.         var prevN = -1;
  471.         $(parentSelector + ' .stepIndicator.active').each(function (gg, elem) {
  472.             prevN = 1 * $(elem).data('seqId');
  474.         });
  476.         var newN = 0;
  478.         if (n === '+1') {
  479.             newN = (1 * prevN) + 1;
  480.         } else if (n === '-1') {
  481.             newN = (1 * prevN) - 1;
  483.         } else
  484.             newN = n;
  487.         if (!$(parentSelector + ' .stepIndicator.seq_' + newN).length)
  488.             newN = (1 * prevN);
  491.         if (!$(parentSelector + ' .stepIndicator.seq_' + (newN + 1)).length)
  492.             $(parentSelector + " .nextBtn").text('Confirm');
  493.         else
  494.             $(parentSelector + " .nextBtn").text('Next');
  496.         if (!$(parentSelector + ' .stepIndicator.seq_' + (newN - 1)).length)
  497.             $(parentSelector + " .prevBtn").hide();
  498.         else
  499.             $(parentSelector + " .prevBtn").show();
  501.         // alert(prevN)
  502.         // alert(newN)
  503.         // alert($(parentSelector+' .stepIndicator.seq_'+(newN+1)).length)
  506.         if (prevN == newN) {
  507.             $(parentSelector).modal('hide')
  508.             return false;
  509.         }
  512.         $(parentSelector + ' .stepIndicator').removeClass('active')
  513.         $(parentSelector + ' .step').hide()
  514.         $(parentSelector + '  .step.seq_' + newN).show()
  515.         for (var gg = 0; gg <= newN; gg++)
  516.             $(parentSelector + '  .stepIndicator.seq_' + gg).addClass('active')
  518.         var triggerFunc = $(parentSelector + '  .step.seq_' + newN).attr('data-trigger-function');
  521.         if (typeof triggerFunc !== 'undefined' && triggerFunc !== false) {
  522.             window[triggerFunc]();
  524.         }
  527.     }
  529.     function getUserCompanyList(userGetType){
  531.         userGetType=userGetType||'_LOCAL_';
  533.         var pika_ind_id = "_NA_";
  534.         $('#selectEntityModal .cg_holder').empty();
  536.         var userTypeTextObject={
  537.             1: 'Admin',
  538.             2: 'User',
  539.             3: 'Vendor',
  540.             4: 'Customer',
  541.             5: 'Management User',
  542.             6: 'Group Owner',
  543.             7: 'GLobal User',
  544.             8: 'Applicant',
  545.             9: 'Collaborator',
  547.         }
  549.         if(userGetType =='_LOCAL_') {
  551.             $.ajax({
  552.                 url: BaseURL + "get_users_by_query?queryStr=" + $('#tempUsername').val(),
  553.                 type: 'POST',
  554.                 dataType: 'json',
  555.                 data: {},
  556.                 error: function () {
  557.                     // callback();
  558.                 },
  559.                 success: function (res) {
  562.                     if (res.success == true) {
  564.                         if (res.data.length == 1) {
  565.                             var dt = res.data[0];
  567.                             $('#gocId').val(dt['gocId']);
  568.                             $('#username').val(dt['loginUserName']);
  569.                             $('#loginform').submit();
  571.                         } else {
  573.                             for (var jj = 0; jj < res.data.length; jj++) {
  574.                                 var dt = res.data[jj];
  576.                                 var ggStr = ' <div class="box-selector cg_selector cg_' + dt['id'] + '  col-md-12 col-sm-12"' +
  577.                                     ' data-id="' + dt['gocId'] + '" ' +
  578.                                     ' data-goc-id="' + dt['gocId'] + '" ' +
  579.                                     ' data-user-name="' + dt['loginUserName'] + '" ' +
  580.                                     ' data-gen-class="cg_selector" ' +
  581.                                     '>' +
  582.                                     '<div class="inside" style="display: flex;"> ' +
  583.                                     '<div class="img" href="" style="' +
  584.                                     "background:url('" + dt['companyLogoUrl'] + "');" +
  585.                                     'height: 50px !important;width: 40%;background-position: left;background-size: contain;background-repeat: no-repeat;display: inline-block;"> ' +
  586.                                     '</div> ' +
  587.                                     '<h6 class="title" style="height: 2rem; width: 60%;text-align: left;">' + dt['companyName'] + ' <p class="sub-title">' + userTypeTextObject[dt['userType']] + '</p></h6> ' +
  588.                                     '</div>' +
  589.                                     '';
  591.                                 $('#selectEntityModal .cg_holder').append(ggStr);
  592.                             }
  594.                             $('#selectEntityModal').modal('show');
  595.                         }
  596.                     }
  599.                 }
  600.             });
  601.         }
  602.         if(userGetType =='_CENTRAL_') {
  604.             if(accessListInitiated==1) {
  607.                 if (accessList.length == 1) {
  608.                     // var dt = res.data[0];
  609.                     //
  610.                     // $('#gocId').val(dt['gocId']);
  611.                     // $('#username').val(dt['loginUserName']);
  612.                     // $('#loginform').submit();
  614.                 } else {
  616.                     for (var jj = 0; jj < accessList.length; jj++) {
  617.                         var dt = accessList[jj];
  619.                         var ggStr = ' <div class="box-selector cg_selector cg_' + dt['id'] + '  col-md-12 col-sm-12"' +
  620.                             ' data-id="' + dt['appId'] + '" ' +
  621.                             ' data-app-id="' + dt['appId'] + '" ' +
  622.                             ' data-goc-id="0" ' +
  623.                             // ' data-user-name="' + dt['loginUserName'] + '" ' +
  624.                             ' data-gen-class="cg_selector" ' +
  625.                             ' data-auth-str="' + dt['authenticationStr'] + '" ' +
  626.                             ' data-server-url="' + dt['serverUrl'] + '" ' +
  627.                             ' data-cs-token="{{ app.session.get('csToken','') }}" ' +
  628.                             '>' +
  629.                             '<div class="inside" style="display: flex;"> ' +
  630.                             '<div class="img" href="" style="' +
  631.                             "background:url('{{ constant('ApplicationBundle\\Constants\\GeneralConstant::HONEYBEE_CENTRAL_SERVER') }}" + dt['companyLogoUrl'] + "');" +
  632.                             'height: 50px !important;width: 40%;background-position: left;background-size: contain;background-repeat: no-repeat;display: inline-block;"> ' +
  633.                             '</div> ' +
  634.                             '<h6 class="title" style="height: 2rem; width: 60%;text-align: left;">' + dt['companyName'] + ' <p class="sub-title">' + userTypeTextObject[dt['userType']] + '</p></h6> ' +
  635.                             '</div>' +
  636.                             '';
  638.                         $('#selectEntityModal .cg_holder').append(ggStr);
  639.                     }
  641.                     $('#selectEntityModal').modal('show');
  642.                 }
  643.             }
  644.             else {
  645.                 $.ajax({
  646.                     url: "{{ constant('ApplicationBundle\\Constants\\GeneralConstant::HONEYBEE_CENTRAL_SERVER') }}/getSessionDataForApp" ,
  647.                     type: 'POST',
  648.                     dataType: 'json',
  649.                     data: {
  650.                         token:'{{ app.session.get('csToken','') }}'
  652.                     },
  653.                     error: function () {
  654.                         // callback();
  655.                     },
  656.                     success: function (res) {
  659.                         if (res.success == true) {
  660.                             accessList=res.session_data.userAccessList;
  662.                             //    console.log(accessList)
  665.                             for (var jj = 0; jj < accessList.length; jj++) {
  666.                                 var dt = accessList[jj];
  668.                                 var ggStr = ' <div class="box-selector cg_selector cg_' + dt['id'] + '  col-md-12 col-sm-12"' +
  669.                                     ' data-id="' + dt['appId'] + '" ' +
  670.                                     ' data-app-id="' + dt['appId'] + '" ' +
  671.                                     ' data-goc-id="0" ' +
  672.                                     // ' data-user-name="' + dt['loginUserName'] + '" ' +
  673.                                     ' data-gen-class="cg_selector" ' +
  674.                                     ' data-auth-str="' + dt['authenticationStr'] + '" ' +
  675.                                     ' data-server-url="' + dt['serverUrl'] + '" ' +
  676.                                     ' data-cs-token="{{ app.session.get('csToken','') }}" ' +
  677.                                     '>' +
  678.                                     '<div class="inside" style="display: flex;"> ' +
  679.                                     '<div class="img" href="" style="' +
  680.                                     "background:url('{{ constant('ApplicationBundle\\Constants\\GeneralConstant::HONEYBEE_CENTRAL_SERVER') }}" + dt['companyLogoUrl'] + "');" +
  681.                                     'height: 50px !important;width: 40%;background-position: left;background-size: contain;background-repeat: no-repeat;display: inline-block;"> ' +
  682.                                     '</div> ' +
  683.                                     '<h6 class="title" style="height: 2rem; width: 60%;text-align: left;">' + dt['companyName'] + ' <p class="sub-title">' + userTypeTextObject[dt['userType']] + '</p></h6> ' +
  684.                                     '</div>' +
  685.                                     '';
  687.                                 $('#selectEntityModal .cg_holder').append(ggStr);
  688.                             }
  690.                             $('#selectEntityModal').modal('show');
  691.                         }
  694.                     }
  695.                 });
  697.             }
  702.         }
  704.     }
  707.     jQuery(document).ready(function () {
  711.         stepShowTab(currentTabSelectEntityModal, '#selectEntityModal')
  713.         $(document).on('click', '.box-selector', function () {
  715.             $('.' + $(this).data('genClass')).removeClass('active')
  716.             $(this).addClass('active')
  718.         })
  720.         $(document).on('click', '#selectEntityModal .prevBtn', function () {
  722. //validate action here
  723. // if (!validateForm()) return false;
  725.             stepShowTab('-1', '#selectEntityModal')
  727.         })
  728.         $(document).on('click', '#selectEntityModal .stepIndicator', function () {
  730. //validate action here
  731. // if (!validateForm()) return false;
  733.             stepShowTab($(this).data('seqId'), '#selectEntityModal')
  735.         })
  736.         $(document).on('click', '#selectEntityModal .nextBtn', function () {
  738. //validate action here
  739. // if (!validateForm()) return false;
  741.             stepShowTab('+1', '#selectEntityModal')
  743.         })
  745.         $(document).on('click', '#selectEntityModal .cg_selector', function () {
  748.             if (typeof $(this).data('authStr') !== 'undefined') {
  749.                 window.spd=$(this).data('authStr');
  750.                 window.csToken=$(this).data('authStr');
  751.                 window.nextServerUrl=$(this).data('serverUrl');
  753.                 $.ajax({
  754.                     url: BaseURL+"logout" ,
  755.                     type: 'POST',
  756.                     dataType: 'json',
  757.                     data: {
  758.                         returnJson: 1
  760.                     },
  761.                     error: function () {
  762.                         // callback();
  763.                     },
  764.                     success: function (res) {
  767.                         if (res.success == true) {
  768.                             window.location.href=(window.nextServerUrl+'/switch_app?spd='+window.spd+'&csToken='+window.csToken);
  769.                         }
  772.                     }
  773.                 });
  776.             }
  777.             else
  778.             {
  779.                 $('#gocId').val($(this).data('gocId'));
  780.                 $('#username').val($(this).data('userName'));
  781.                 $('#loginform').submit();
  782.             }
  787.         })
  790.     });
  791. </script>