Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6056 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
6001 efrain 1
<?php
2
$acl            = $this->viewModel()->getRoot()->getVariable('acl');
3
$currentUser    = $this->currentUserHelper();
4
$roleName       = $currentUser->getUserTypeId();
5
 
6
 
7
$routeMyConnections    = $this->url('connection/my-connections');
8
 
9
$this->headLink()->appendStylesheet($this->basePath('vendors/select2/dist/css/select2.min.css'));
10
$this->headLink()->appendStylesheet($this->basePath('vendors/select2-bootstrap4/dist/select2-bootstrap4.min.css'));
11
$this->inlineScript()->appendFile($this->basePath('vendors/select2/dist/js/select2.min.js'));
12
 
13
$this->inlineScript()->appendFile($this->basePath('vendors/bootstrap-confirmation/dist/bootstrap-confirmation.js'));
14
$this->inlineScript()->appendFile($this->basePath('vendors/jsrender/jsrender.min.js'));
15
 
16
$this->inlineScript()->captureStart();
17
echo <<<JS
18
 
19
 
20
 
21
jQuery( document ).ready(function( $ ) {
22
 
23
    $('body').on('click', 'a.btn-send-message', function(e) {
24
        e.preventDefault();
25
 
26
        window.location.href = $(this).data('link');
27
    })
28
 
29
 
30
    $.fn.reload = function(search) {
31
        NProgress.start();
32
        $.ajax({
33
            'dataType'  : 'json',
34
            'accept'    : 'application/json',
35
            'method'    : 'get',
36
            'url'       :  '$routeMyConnections',
37
            'data'      : {
38
                'search' : search
39
            }
40
        }).done(function(response) {
41
            if(response['success']) {
42
                $('#profiles-container').empty();
43
                if(response['data'].length > 0) {
44
                    $( "#profiles-container" ).html(
45
                		$( "#profileTemplate" ).render( response['data'] )
46
                	);
47
                } else {
48
                    var html = '<div class="company-title"><div class="widget widget-jobs"><div class="sd-title">ERROR_NO_RECORD_MATCHED_YOUR_QUERY</div></div></div>';
49
                    $( "#profiles-container" ).html(html);
50
                }
51
 
52
                $('a.btn-connection-cancel').confirmation({
53
                    rootSelector: 'button.btn-connection-cancel',
54
                    title : 'LABEL_ARE_YOU_SURE',
55
                    singleton : true,
56
                    btnOkLabel: 'LABEL_YES',
57
                    btnCancelLabel: 'LABEL_NO',
58
                    onConfirm: function(value) {
59
                        var action = $(this).data('link');
60
                        NProgress.start();
61
                        $.ajax({
62
                            'dataType'  : 'json',
63
                            'accept'    : 'application/json',
64
                            'method'    : 'post',
65
                            'url'       :  action,
66
                        }).done(function(response) {
67
                            if(response['success']) {
68
                                $.fn.showSuccess(response['data']);
69
 
70
                                var search = $('#form-connection-search #search').val().trim()
71
                                $.fn.reload(search);
72
                            } else {
73
                                $.fn.showError(response['data']);
74
                            }
75
                        }).fail(function( jqXHR, textStatus, errorThrown) {
76
                            $.fn.showError(textStatus);
77
                        }).always(function() {
78
                            NProgress.done();
79
                        });
80
 
81
                        return false;
82
                    },
83
                });
84
 
85
                $('a.btn-connection-block').confirmation({
86
                    rootSelector: 'button.btn-connection-block',
87
                    title : 'LABEL_ARE_YOU_SURE',
88
                    singleton : true,
89
                    btnOkLabel: 'LABEL_YES',
90
                    btnCancelLabel: 'LABEL_NO',
91
                    onConfirm: function(value) {
92
                        var action = $(this).data('link');
93
                        NProgress.start();
94
                        $.ajax({
95
                            'dataType'  : 'json',
96
                            'accept'    : 'application/json',
97
                            'method'    : 'post',
98
                            'url'       :  action,
99
                        }).done(function(response) {
100
                            if(response['success']) {
101
                                $.fn.showSuccess(response['data']);
102
 
103
                                var search = $('#form-connection-search #search').val().trim()
104
                                $.fn.reload(search);
105
                            } else {
106
                                $.fn.showError(response['data']);
107
                            }
108
                        }).fail(function( jqXHR, textStatus, errorThrown) {
109
                            $.fn.showError(textStatus);
110
                        }).always(function() {
111
                            NProgress.done();
112
                        });
113
 
114
                        return false;
115
                    },
116
                });
117
 
118
            } else {
119
                $.fn.showError(response['data']);
120
            }
121
        }).fail(function( jqXHR, textStatus, errorThrown) {
122
            $.fn.showError(textStatus);
123
        }).always(function() {
124
            NProgress.done();
125
        });
126
 
127
    }
128
 
129
 
130
    $('#form-connection-search #search').keyup(function(e) {
131
        e.preventDefault();
132
 
133
        var search = $('#form-connection-search #search').val()
134
        if(search.length > 0)  {
135
            var search = $('#form-connection-search #search').val().trim()
136
            if(search.length > 0)  {
137
                $.fn.reload(search);
138
            } else {
139
                $('#form-connection-search #search').val('');
140
            }
141
        } else {
142
            $.fn.reload('');
143
        }
144
 
145
    });
146
 
147
    $('body').on('click', 'a.btn-profile-view', function(e) {
148
        e.preventDefault();
149
 
150
        window.location.href = $(this).data('link');
151
    });
152
 
153
 
154
    $.fn.reload('');
155
});
156
JS;
157
$this->inlineScript()->captureEnd();
158
 
159
 
160
$this->headStyle()->captureStart();
161
echo <<<EOT
162
.profile_info {
163
    width: 100%;
164
    padding: 25px 20px;
165
    border: 1px solid var(--border-primary);
166
    background-color: var(--bg-color);
167
    text-align: center;
168
    border-radius: 10px
169
}
170
 
171
.profile_info h3 {
172
    justify-content: flex-start;
173
    font-weight: 700;
174
    font-size: 1.3rem;
175
    text-align: left
176
}
177
 
178
.profile_info h4 {
179
    position: absolute;
180
    bottom: 0
181
}
182
 
183
.profile_info ul {
184
    display: flex;
185
    gap: 5px;
186
    justify-content: space-around
187
}
188
 
189
.profile_info hr {
190
    width: 80%;
191
    margin: 1rem auto
192
}
193
 
194
.profile_info_header {
195
    display: flex;
196
    position: relative
197
}
198
 
199
.profile_info_header_imgContainer {
200
    overflow: hidden;
201
    border-radius: 100px;
202
    margin: 0 auto
203
}
204
 
205
.profile_info_header_imgContainer img {
206
    background: #fff
207
}
208
 
209
.profile-info {
210
    background: var(--bg-color);
211
    border: 1px solid var(--border-primary);
212
    border-radius: var(--border-radius);
213
    height: fit-content;
214
    box-shadow: var(--light-shadow);
215
    width: 100%;
216
    align-items: center;
217
    display: flex;
218
    flex-direction: column;
219
    gap: .5rem;
220
    padding: 1rem;
221
    text-align: center
222
}
223
 
224
@media(max-width: 767px) {
225
    .profile-info {
226
        border-radius:0;
227
        border-left: 0;
228
        border-right: 0
229
    }
230
}
231
 
232
.profile-info img {
233
    border-radius: 50%;
234
    border: 2px solid var(--font-color);
235
    height: 150px;
236
    width: 150px
237
}
238
 
239
.profile-info h3 {
240
    color: var(--title-color);
241
    font-size: 1.1rem;
242
    font-weight: 600
243
}
244
 
245
.profile-info span {
246
    color: var(--subtitle-color)
247
}
248
 
249
.profile-info svg,.profile-info b {
250
    color: var(--font-color)
251
}
252
 
253
.profile-info .row {
254
    gap: .5rem
255
}
256
 
257
.profile-info .social-network-header {
258
    display: flex;
259
    align-items: center;
260
    justify-content: center;
261
    position: relative;
262
    width: 100%
263
}
264
 
265
.profile-info .social-network-header button {
266
    position: absolute;
267
    right: 15%
268
}
269
 
270
.profile-info .social-network-header button svg {
271
    font-size: 1.2rem
272
}
273
 
274
.profile-info .social-links {
275
    display: flex;
276
    flex-direction: column;
277
    gap: .5rem;
278
    width: 100%
279
}
280
 
281
.profile-info .social-links li {
282
    border-bottom: 1px solid var(--border-primary)
283
}
284
 
285
.profile-info .social-links li a {
286
    display: flex;
287
    align-items: center;
288
    gap: .5rem
289
}
290
 
291
.profile-info .social-links li a svg {
292
    color: var(--font-color)
293
}
294
 
295
.profile-info .social-links li a span {
296
    white-space: nowrap;
297
    max-width: -webkit-fill-available;
298
    text-overflow: ellipsis;
299
    overflow: hidden
300
}
301
 
302
.profile-attr {
303
    background: var(--bg-color);
304
    border: 1px solid var(--border-primary);
305
    border-radius: var(--border-radius);
306
    height: fit-content;
307
    box-shadow: var(--light-shadow);
308
    width: 100%;
309
    padding: 1rem;
310
    display: flex;
311
    flex-direction: column;
312
    gap: .5rem
313
}
314
 
315
@media(max-width: 767px) {
316
    .profile-attr {
317
        border-radius:0;
318
        border-left: 0;
319
        border-right: 0
320
    }
321
}
322
 
323
.profile-attr span,.profile-attr p {
324
    color: var(--font-color)
325
}
326
 
327
.profile-attr ul {
328
    display: flex;
329
    flex-wrap: wrap;
330
    gap: .5rem
331
}
332
 
333
.profile-attr ul li {
334
    display: inline-flex;
335
    width: fit-content
336
}
337
 
338
.profile-attr ul li span {
339
    background-color: var(--font-color);
340
    border-radius: 30px;
341
    color: var(--bg-color);
342
    font-size: 14px;
343
    font-weight: 600;
344
    padding: .5rem 1rem;
345
    width: fit-content
346
}
347
 
348
.profile-attr-header {
349
    display: flex;
350
    align-items: center;
351
    justify-content: space-between
352
}
353
 
354
.profile-attr-header h2 {
355
    color: var(--title-color);
356
    font-size: 18px;
357
    font-weight: 600
358
}
359
 
360
.experience-item,.education-item {
361
    display: flex;
362
    flex-direction: column;
363
    gap: .5rem
364
}
365
 
366
.experience-item h4,.education-item h4 {
367
    font-size: 1rem;
368
    color: var(--font-color);
369
    font-weight: 600
370
}
371
 
372
.experience-item-header,.education-item-header {
373
    display: flex;
374
    align-items: center;
375
    justify-content: space-between;
376
    position: relative
377
}
378
 
379
.experience-item-header h3,.education-item-header h3 {
380
    font-size: 1.1rem;
381
    color: var(--subtitle-color);
382
    font-weight: 600
383
}
384
 
385
.experience-item-header .icon-buttons-group,.education-item-header .icon-buttons-group {
386
    align-items: center;
387
    display: inline-flex;
388
    gap: .5rem;
389
    position: absolute;
390
    right: 0
391
}
392
 
393
.category_list {
394
    width: 100%;
395
    padding: 25px 20px;
396
    border: 1px solid var(--border-primary);
397
    background-color: var(--bg-color);
398
    text-align: center;
399
    border-radius: 10px;
400
 
401
}
402
 
403
 
404
.category_uuid {
405
    font-family: 'Roboto';
406
    font-style: normal;
407
    font-weight: 400;
408
    font-size: 16px;
409
    line-height: 19px;
410
    display: flex;
411
    align-items: center;
412
 
413
    color: #16283C;
414
    margin-top: 10px;
415
 
416
}
417
 
418
.add-knowledge-container {
419
    padding-top: 10px;
420
    padding-bottom: 10px;
421
    text-align: center;
422
}
423
 
424
.add-knowledge {
425
    font-family: 'Roboto';
426
    font-style: normal;
427
    font-weight: 400;
428
    font-size: 16px;
429
    line-height: 19px;
430
 
431
 
432
    color: #666666;
433
 
434
}
435
 
436
EOT;
437
$this->headStyle()->captureEnd();
438
 
439
 
440
?>
441
 
442
<section class="companies-info container">
443
	<div class="company-title">
444
		<h1 class="title mx-auto">LABEL_KNOWLEDGE_AREA_TITLE</h1>
445
	</div>
446
 
447
	<div class="row">
448
		<div class="col-3 category_list">
449
			<ul>
450
			<?php
451
			 foreach($categories as $categorie) :
452
			?>
453
			<li><a class="category_uuid" href="" data-uuid="<?php echo $categorie['uuid']?>"><?php echo $categorie['name']?></a></li>
454
 
455
			<?php endforeach; ?>
456
			</ul>
457
		</div>
458
 
459
 
460
		<div class="col-9">
461
			<div class="search-box">
462
        		<input type="text" name="search" class="form-control"><button class="btn btn-search">LABEL_SEARCH</button>
463
        	</div>
464
 
465
			<div class="add-knowledge-container" >
466
				<a href="" class="add-knowledge">Añadir Conocimiento</a>
467
			</div>
468
 
469
 
470
 
471
 
472
 
473
			<div class="companies-list">
474
				<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>
475
			</div>
476
		</div>
477
	</div>
478
 
479
 
480
</section>
481
 
482
 
483
 
484
<script id="profileTemplate" type="text/x-jsrender">
485
    <div class="col-lg-3 col-md-3 col-sm-6">
486
        <div class="company_profile_info">
487
            <div class="company-up-info">
488
                <img src="{{>image}}" alt="">
489
                <h3>{{>name}}</h3>
490
                <h4>{{>status}}</h4>
491
 
492
                <ul>
493
                    <li><a href="#" data-link="{{>link_view}}" title="" class="follow btn-profile-view">LABEL_VIEW_PROFILE</a></li>
494
				    <li><a href="#" data-link="{{>link_inmail}}" title="" class="message-us btn-send-message">LABEL_MESSAGE</a></li>
495
		        </ul>
496
 
497
            </div>
498
            <div class="company-down-info">
499
            <ul>
500
                <li><a href="#" data-link="{{>link_cancel}}" title="" class="view-more-pro btn-connection-cancel">LABEL_CANCEL</a></li>
501
				<li><a href="#" data-link="{{>link_block}}" title="" class="view-more-pro btn-connection-block">LABEL_BLOCK</a></li>
502
		    </ul>
503
            </div>
504
 
505
        </div>
506
    </div>
507
</script>