cmtracker/templates/internal/staff/cases/my-cases.html.twig

98 lines
3.5 KiB
Twig
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends 'base.html.twig' %}
{% block body %}
{{ block('nav', 'internal/libs/nav.html.twig') }}
<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
{{ block('topnav', 'internal/libs/top-nav.html.twig') }}
<div class='container-fluid py-2'>
<div class='row'>
<div class='ms-3'>
<h3 class='mb-0 h4 font-weight-bolder'>My Cases</h3>
<p class='mb-4'>
{{ supervisor.name }}&nbsp;&nbsp;<a href='#' id='message-supervisor'>
<i class='material-symbols-rounded opacity-10'>message</i>
</a><br/>
<a href='mailto:{{ supervisor.email }}'>{{ supervisor.email }}</a><br/>
{% if supervisor.workPhone %}<a href='tel:{{ supervisor.workPhone }}'>{{ supervisor.getFormattedPhone() }}</a>{% endif %}
</p>
</div>
{% for c in cases %}
<div class='col-xl-3 col-sm-6 mb-xl-0 mb-4'>
<div class='card'>
<div class='card-header p-2 ps-3'>
<div class='d-flex justify-content-between'>
<div>
<h4 class='mb-0'>{{ c.caseName }}</h4>
<p class='text-sm mb-0 text-capitalize'>
<a href='tel:'></a>
</p>
</div>
<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
<i class="material-symbols-rounded opacity-10">weekend</i>
</div>
</div>
</div>
<hr class='dark horizontal my-0'>
<div class='card-footer p-2 ps-3'>
<p class='mb-0 text-sm'>
<span class='text-info font-weight-bolder'>
<a href='{{ path('app_staff_list_notes', {staffId: user.id, caseId: c.id}) }}'>Staff Notes</a>
</span>
</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<div class='modal fade' id='message-modal' tabindex='-1' role='dialog' aria-labelledby='message-modal-title'>
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class="modal-header">
<h6 class="modal-title font-weight-normal" id="message-modal-label">Message Supervisor</h6>
<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class='modal-body'>
<form>
<div class='input-group input-group-outline my-3'>
<select id='my-cases' name='case'>
<option value=''>-- Case --</option>
{% for c in cases %}
<option value='{{ c.id }}'>{{ c.caseName }}</option>
{% endfor %}
</select>
</div>
<div class='input-group input-group-outline my-3'>
<textarea name='message' id='message' style='width:100%;height:100px;'></textarea>
</div>
</form>
</div>
<div class='modal-footer'>
<button type='button' id='close-modal' class='btn bg-gradient-secondary' data-bs-dismiss='modal'>Close</button>
<button type='button' id='send-supervisor-message' class='btn bg-gradient-primary'>Send Message</button>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
{% block page_js %}
<script type='module'>
import $ from "{{ asset('vendor/jquery/jquery.index.js') }}";
import {messageSupervisor, sendMessage} from '{{ asset("js/app/message.js") }}';
window.$ = $;
$(function () {
document.getElementById('message-supervisor').addEventListener('click', messageSupervisor);
document.getElementById('send-supervisor-message').addEventListener('click', sendMessage);
});
</script>
{% endblock %}