Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6094 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log | 

<?php 
$acl            = $this->viewModel()->getRoot()->getVariable('acl');
$currentUser    = $this->currentUserHelper();
$roleName       = $currentUser->getUserTypeId();


$routeMyConnections    = $this->url('connection/my-connections');

$this->headLink()->appendStylesheet($this->basePath('vendors/select2/dist/css/select2.min.css'));
$this->headLink()->appendStylesheet($this->basePath('vendors/select2-bootstrap4/dist/select2-bootstrap4.min.css'));
$this->inlineScript()->appendFile($this->basePath('vendors/select2/dist/js/select2.min.js'));

$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-confirmation/dist/bootstrap-confirmation.js'));
$this->inlineScript()->appendFile($this->basePath('vendors/jsrender/jsrender.min.js'));

$this->inlineScript()->captureStart();
echo <<<JS



jQuery( document ).ready(function( $ ) {
        
    $('body').on('click', 'a.btn-send-message', function(e) {
        e.preventDefault();

        window.location.href = $(this).data('link');
    })


    $.fn.reload = function(search) {
        NProgress.start();
        $.ajax({
            'dataType'  : 'json',
            'accept'    : 'application/json',
            'method'    : 'get',
            'url'       :  '$routeMyConnections',
            'data'      : {
                'search' : search
            } 
        }).done(function(response) {
            if(response['success']) {
                $('#profiles-container').empty();
                if(response['data'].length > 0) {
                    $( "#profiles-container" ).html(
                                $( "#profileTemplate" ).render( response['data'] )
                        );
                } else {
                    var html = '<div class="company-title"><div class="widget widget-jobs"><div class="sd-title">ERROR_NO_RECORD_MATCHED_YOUR_QUERY</div></div></div>';
                    $( "#profiles-container" ).html(html);
                }     

                $('a.btn-connection-cancel').confirmation({
                    rootSelector: 'button.btn-connection-cancel',
                    title : 'LABEL_ARE_YOU_SURE',
                    singleton : true,
                    btnOkLabel: 'LABEL_YES',
                    btnCancelLabel: 'LABEL_NO',
                    onConfirm: function(value) {
                        var action = $(this).data('link');
                        NProgress.start();
                        $.ajax({
                            'dataType'  : 'json',
                            'accept'    : 'application/json',
                            'method'    : 'post',
                            'url'       :  action,
                        }).done(function(response) {
                            if(response['success']) {
                                $.fn.showSuccess(response['data']);

                                var search = $('#form-connection-search #search').val().trim()
                                $.fn.reload(search);
                            } else {
                                $.fn.showError(response['data']);
                            }
                        }).fail(function( jqXHR, textStatus, errorThrown) {
                            $.fn.showError(textStatus);
                        }).always(function() {
                            NProgress.done();
                        });
                       
                        return false;
                    },
                });

                $('a.btn-connection-block').confirmation({
                    rootSelector: 'button.btn-connection-block',
                    title : 'LABEL_ARE_YOU_SURE',
                    singleton : true,
                    btnOkLabel: 'LABEL_YES',
                    btnCancelLabel: 'LABEL_NO',
                    onConfirm: function(value) {
                        var action = $(this).data('link');
                        NProgress.start();
                        $.ajax({
                            'dataType'  : 'json',
                            'accept'    : 'application/json',
                            'method'    : 'post',
                            'url'       :  action,
                        }).done(function(response) {
                            if(response['success']) {
                                $.fn.showSuccess(response['data']);

                                var search = $('#form-connection-search #search').val().trim()
                                $.fn.reload(search);
                            } else {
                                $.fn.showError(response['data']);
                            }
                        }).fail(function( jqXHR, textStatus, errorThrown) {
                            $.fn.showError(textStatus);
                        }).always(function() {
                            NProgress.done();
                        });
                       
                        return false;
                    },
                });
 
            } else {
                $.fn.showError(response['data']);
            } 
        }).fail(function( jqXHR, textStatus, errorThrown) {
            $.fn.showError(textStatus);
        }).always(function() {
            NProgress.done();
        });

    }


    $('#form-connection-search #search').keyup(function(e) {
        e.preventDefault();

        var search = $('#form-connection-search #search').val()
        if(search.length > 0)  {
            var search = $('#form-connection-search #search').val().trim()
            if(search.length > 0)  {
                $.fn.reload(search);
            } else {
                $('#form-connection-search #search').val('');
            }
        } else {
            $.fn.reload('');
        }
        
    });

    $('body').on('click', 'a.btn-profile-view', function(e) {
        e.preventDefault();

        window.location.href = $(this).data('link');
    });


    $.fn.reload('');
});
JS;
$this->inlineScript()->captureEnd();


$this->headStyle()->captureStart();
echo <<<EOT
.profile_info {
    width: 100%;
    padding: 25px 20px;
    border: 1px solid var(--border-primary);
    background-color: var(--bg-color);
    text-align: center;
    border-radius: 10px
}

.profile_info h3 {
    justify-content: flex-start;
    font-weight: 700;
    font-size: 1.3rem;
    text-align: left
}

.profile_info h4 {
    position: absolute;
    bottom: 0
}

.profile_info ul {
    display: flex;
    gap: 5px;
    justify-content: space-around
}

.profile_info hr {
    width: 80%;
    margin: 1rem auto
}

.profile_info_header {
    display: flex;
    position: relative
}

.profile_info_header_imgContainer {
    overflow: hidden;
    border-radius: 100px;
    margin: 0 auto
}

.profile_info_header_imgContainer img {
    background: #fff
}

.profile-info {
    background: var(--bg-color);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    height: fit-content;
    box-shadow: var(--light-shadow);
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    text-align: center
}

@media(max-width: 767px) {
    .profile-info {
        border-radius:0;
        border-left: 0;
        border-right: 0
    }
}

.profile-info img {
    border-radius: 50%;
    border: 2px solid var(--font-color);
    height: 150px;
    width: 150px
}

.profile-info h3 {
    color: var(--title-color);
    font-size: 1.1rem;
    font-weight: 600
}

.profile-info span {
    color: var(--subtitle-color)
}

.profile-info svg,.profile-info b {
    color: var(--font-color)
}

.profile-info .row {
    gap: .5rem
}

.profile-info .social-network-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%
}

.profile-info .social-network-header button {
    position: absolute;
    right: 15%
}

.profile-info .social-network-header button svg {
    font-size: 1.2rem
}

.profile-info .social-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%
}

.profile-info .social-links li {
    border-bottom: 1px solid var(--border-primary)
}

.profile-info .social-links li a {
    display: flex;
    align-items: center;
    gap: .5rem
}

.profile-info .social-links li a svg {
    color: var(--font-color)
}

.profile-info .social-links li a span {
    white-space: nowrap;
    max-width: -webkit-fill-available;
    text-overflow: ellipsis;
    overflow: hidden
}

.profile-attr {
    background: var(--bg-color);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius);
    height: fit-content;
    box-shadow: var(--light-shadow);
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

@media(max-width: 767px) {
    .profile-attr {
        border-radius:0;
        border-left: 0;
        border-right: 0
    }
}

.profile-attr span,.profile-attr p {
    color: var(--font-color)
}

.profile-attr ul {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.profile-attr ul li {
    display: inline-flex;
    width: fit-content
}

.profile-attr ul li span {
    background-color: var(--font-color);
    border-radius: 30px;
    color: var(--bg-color);
    font-size: 14px;
    font-weight: 600;
    padding: .5rem 1rem;
    width: fit-content
}

.profile-attr-header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.profile-attr-header h2 {
    color: var(--title-color);
    font-size: 18px;
    font-weight: 600
}

.experience-item,.education-item {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.experience-item h4,.education-item h4 {
    font-size: 1rem;
    color: var(--font-color);
    font-weight: 600
}

.experience-item-header,.education-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative
}

.experience-item-header h3,.education-item-header h3 {
    font-size: 1.1rem;
    color: var(--subtitle-color);
    font-weight: 600
}

.experience-item-header .icon-buttons-group,.education-item-header .icon-buttons-group {
    align-items: center;
    display: inline-flex;
    gap: .5rem;
    position: absolute;
    right: 0
}

.category_list {
    width: 100%;
    padding: 25px 20px;
    border: 1px solid var(--border-primary);
    background-color: var(--bg-color);
    text-align: center;
    border-radius: 10px;

}


.category_uuid {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    display: flex;
    align-items: center;
    
    color: #16283C;
    margin-top: 10px;

}

.add-knowledge-container {
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}

.add-knowledge {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;

    
    color: #666666;

}

EOT;    
$this->headStyle()->captureEnd();


?>

<section class="companies-info container">
        <div class="company-title">
                <h1 class="title mx-auto">LABEL_KNOWLEDGE_AREA_TITLE</h1>
        </div>

        <div class="row">
                <div class="col-3 category_list">
                        <ul>
                        <?php 
                         foreach($categories as $categorie) : 
                        ?>
                        <li><a class="category_uuid" href="" data-uuid="<?php echo $categorie['uuid']?>"><?php echo $categorie['name']?></a></li>
                        
                        <?php endforeach; ?>
                        </ul>
                </div>
                
                
                <div class="col-9">
                        <div class="search-box">
                        <input type="text" name="search" class="form-control"><button class="btn btn-search">LABEL_SEARCH</button>
                </div>
                        
                        <div class="add-knowledge-container" >
                                <a href="" class="add-knowledge">Añadir Conocimiento</a>
                        </div>




                        
                        <div class="companies-list">
                                <div class="profile_info"><div class="d-flex position-relative"><div class="profile_info_header_imgContainer"><img src="/storage/type/user/code/a0a8330e-1d4c-4f7c-aa85-f95186b5b597/" class="object-fit-contain" alt="group image" style="max-height: 100px;"></div><div class="col-8 d-flex flex-column align-items-start justify-content-end"><h3 class="w-100 text-left mb-2 w-100">Agustín Coronado</h3><ul><li><a href="/profile/view/a0a8330e-1d4c-4f7c-aa85-f95186b5b597" data-link="/profile/view/a0a8330e-1d4c-4f7c-aa85-f95186b5b597" class="btn btn-secondary ellipsis">Ver perfil</a></li><li><a href="/inmail/a0a8330e-1d4c-4f7c-aa85-f95186b5b597" data-link="/inmail/a0a8330e-1d4c-4f7c-aa85-f95186b5b597" class="btn btn-primary">Mensaje</a></li></ul></div></div><hr><ul><li><a href="#" class="btn btn-tertiary">Bloquear</a></li><li><a href="#" class="btn btn-tertiary">Cancelar</a></li></ul><div style="position: relative;"><div class="popover confirmation fade bs-popover-top show" id="confirmation937427" x-placement="top" style="position: absolute; top: -2.5rem; left: 50%; transform: translate(-50%, -100%); width: 120px; display: none;"><div class="arrow" style="left: 46px;"></div><p class="popover-header">Está seguro?</p><div class="popover-body"><p class="confirmation-content" style="display: none;"></p><div class="confirmation-buttons text-center"><div class="btn-group"><button type="button" class="h-100 d-flex align-items-center btn btn-sm btn-primary">Si</button><button type="button" class="h-100 d-flex align-items-center btn btn-sm btn-secondary">No</button></div></div></div></div></div><div style="position: relative;"><div class="popover confirmation fade bs-popover-top show" id="confirmation937427" x-placement="top" style="position: absolute; top: -2.5rem; left: 50%; transform: translate(-50%, -100%); width: 120px; display: none;"><div class="arrow" style="left: 46px;"></div><p class="popover-header">Está seguro?</p><div class="popover-body"><p class="confirmation-content" style="display: none;"></p><div class="confirmation-buttons text-center"><div class="btn-group"><button type="button" class="h-100 d-flex align-items-center btn btn-sm btn-primary">Si</button><button type="button" class="h-100 d-flex align-items-center btn btn-sm btn-secondary">No</button></div></div></div></div></div></div>
                        </div>
                </div>
        </div>
        

</section>      

                

<script id="profileTemplate" type="text/x-jsrender">
    <div class="col-lg-3 col-md-3 col-sm-6">
        <div class="company_profile_info">
            <div class="company-up-info">
                <img src="{{>image}}" alt="">
                <h3>{{>name}}</h3>
                <h4>{{>status}}</h4>
                
                <ul>
                    <li><a href="#" data-link="{{>link_view}}" title="" class="follow btn-profile-view">LABEL_VIEW_PROFILE</a></li>
                                    <li><a href="#" data-link="{{>link_inmail}}" title="" class="message-us btn-send-message">LABEL_MESSAGE</a></li>
                        </ul>
      
            </div>
            <div class="company-down-info">
            <ul>
                <li><a href="#" data-link="{{>link_cancel}}" title="" class="view-more-pro btn-connection-cancel">LABEL_CANCEL</a></li>
                                <li><a href="#" data-link="{{>link_block}}" title="" class="view-more-pro btn-connection-block">LABEL_BLOCK</a></li>
                    </ul>
            </div>

        </div>  
    </div>      
</script>