397 lines
29 KiB
HTML
397 lines
29 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/datatable_cdn_css.html" %}
|
|
{% include "cdn_through_html/animate_cdn_css.html" %}
|
|
{% include "cdn_through_html/modal_cdn_css.html" %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<h3>Manage FAQ</h3>
|
|
</div>
|
|
<div class="col text-end">
|
|
{% comment %} <button class="btn btn-dark mb-2 me-4" onclick="history.back()">
|
|
<i class="fa fa-arrow-left"></i>
|
|
Back
|
|
</button> {% endcomment %}
|
|
{% comment %} <a class="btn btn-success mb-2 me-4" href="{% url 'manage_cms:faq_category_add' %}">Add Category</a> {% endcomment %}
|
|
<a class="btn btn-primary mb-2 me-4" href="{% url 'manage_cms:faq_add' %}">Add FAQ</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% comment %} <div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
<div id="faq-category_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
|
<div class="dt--top-section">
|
|
<h5 class="mt-2">FAQ Category</h5>
|
|
</div>
|
|
<div class="dt--top-section">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
|
|
<div class="dataTables_length" id="style-3_length"><label>Results : <select
|
|
name="style-3_length" aria-controls="style-3" class="form-control">
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
</select></label></div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3">
|
|
<div id="style-3_filter" class="dataTables_filter"><label><svg
|
|
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-search">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg><input type="search" class="form-control" placeholder="Search..."
|
|
aria-controls="style-3"></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table id="faq-category" class="table style-3 dt-table-hover dataTable no-footer" role="grid"
|
|
aria-describedby="style-3_info">
|
|
<thead>
|
|
<tr role="row">
|
|
<th class="checkbox-column sorting_asc" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 69.2656px;"> Record Id </th>
|
|
<th class="sorting" tabindex="0" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Category Name</th>
|
|
<th class="sorting" tabindex="0" aria-controls="style-3"
|
|
|
|
style="width: 79.7969px;">Active</th>
|
|
<th class="dt-no-sorting sorting" tabindex="0"
|
|
aria-controls="style-3"
|
|
style="width: 51.625px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for data_obj in faq_category_obj%}
|
|
<tr role="row">
|
|
<td class="checkbox-column text-center sorting_1"> {{data_obj.id}}</td>
|
|
<td>{{data_obj.name}}</td>
|
|
<td class="text-center">
|
|
<span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<ul class="table-controls">
|
|
<li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
|
data-original-title="Edit" data-bs-original-title="Edit"
|
|
aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
|
|
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-edit-2 p-1 br-8 mb-1">
|
|
<path
|
|
d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
|
|
</path>
|
|
</svg></a></li>
|
|
<li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
|
data-original-title="Delete" data-bs-original-title="Delete"
|
|
aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
|
|
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-trash p-1 br-8 mb-1">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path
|
|
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
|
|
</path>
|
|
</svg></a></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="dt--bottom-section d-sm-flex justify-content-sm-between text-center">
|
|
<div class="dt--pages-count mb-sm-0 mb-3">
|
|
<div class="dataTables_info" id="style-3_info" role="status" aria-live="polite">Showing
|
|
page 1 of 1</div>
|
|
</div>
|
|
<div class="dt--pagination">
|
|
<div class="dataTables_paginate paging_simple_numbers" id="style-3_paginate">
|
|
<ul class="pagination">
|
|
<li class="paginate_button page-item previous disabled" id="style-3_previous"><a
|
|
href="#" aria-controls="style-3" data-dt-idx="0" tabindex="0"
|
|
class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
|
|
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-arrow-left">
|
|
<line x1="19" y1="12" x2="5" y2="12"></line>
|
|
<polyline points="12 19 5 12 12 5"></polyline>
|
|
</svg></a></li>
|
|
<li class="paginate_button page-item active"><a href="#" aria-controls="style-3"
|
|
data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
|
|
<li class="paginate_button page-item next disabled" id="style-3_next">
|
|
<a
|
|
href="#" aria-controls="style-3" data-dt-idx="2" tabindex="0"
|
|
class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
|
|
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-arrow-right">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> {% endcomment %}
|
|
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
<div id="faqs_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
|
|
<div class="dt--top-section">
|
|
<h5 class="mt-2">FAQ</h5>
|
|
</div>
|
|
<div class="dt--top-section">
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center">
|
|
<div class="dataTables_length" id="style-3_length"><label>Results : <select
|
|
name="style-3_length" aria-controls="style-3" class="form-control">
|
|
<option value="5">5</option>
|
|
<option value="10">10</option>
|
|
<option value="20">20</option>
|
|
<option value="50">50</option>
|
|
</select></label></div>
|
|
</div>
|
|
<div
|
|
class="col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3">
|
|
<div id="style-3_filter" class="dataTables_filter"><label><svg
|
|
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
|
|
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-search">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
|
</svg><input type="search" class="form-control" placeholder="Search..."
|
|
aria-controls="style-3"></label></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table id="faqs" class="table style-3 dt-table-hover dataTable no-footer" role="grid"
|
|
aria-describedby="style-3_info">
|
|
<thead>
|
|
<tr role="row">
|
|
<th class="checkbox-column sorting_asc" tabindex="0"
|
|
aria-controls="style-3" aria-sort="ascending"
|
|
style="width: 69.2656px;"> Record Id </th>
|
|
<th class="sorting" tabindex="1" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Faq</th>
|
|
<th class="sorting" tabindex="3" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Added Date</th>
|
|
<th class="sorting" tabindex="4" aria-controls="style-3"
|
|
colspan="1"
|
|
style="width: 44.2344px;">Modified Date</th>
|
|
<th class="sorting" tabindex="5" aria-controls="style-3"
|
|
|
|
style="width: 79.7969px;">Active</th>
|
|
<th class="dt-no-sorting sorting" tabindex="6"
|
|
aria-controls="style-3"
|
|
style="width: 51.625px;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for data_obj in faqs_obj%}
|
|
<tr role="row">
|
|
<td class="text-center sorting_1"> {{data_obj.id}}</td>
|
|
<td>
|
|
<button type="button" class="btn btn-info mb-2 me-4" data-bs-toggle="modal" data-bs-target="#faqmodal" onclick="faqModal('{{data_obj.question}}','{{data_obj.answer}}')">
|
|
View
|
|
</button>
|
|
</td>
|
|
<td>{{data_obj.created_on}}</td>
|
|
<td>{{data_obj.modified_on}}</td>
|
|
<td class="text-center">
|
|
<span class="shadow-none badge {% if data_obj.active %}badge-primary{% else %}badge-danger{% endif %}">{{data_obj.active}}</span>
|
|
</td>
|
|
<td class="text-center">
|
|
<ul class="table-controls">
|
|
<li><a href="{% url 'manage_cms:faq_edit' data_obj.id %}" class="bs-tooltip"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
|
data-original-title="Edit" data-bs-original-title="Edit"
|
|
aria-label="Edit"><svg xmlns="http://www.w3.org/2000/svg"
|
|
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-edit-2 p-1 br-8 mb-1">
|
|
<path
|
|
d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z">
|
|
</path>
|
|
</svg></a></li>
|
|
<li><a href="{% url 'manage_cms:faq_delete' data_obj.id %}" class="bs-tooltip"
|
|
data-bs-toggle="tooltip" data-bs-placement="top" title=""
|
|
data-original-title="Delete" data-bs-original-title="Delete"
|
|
aria-label="Delete"><svg xmlns="http://www.w3.org/2000/svg"
|
|
width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-trash p-1 br-8 mb-1">
|
|
<polyline points="3 6 5 6 21 6"></polyline>
|
|
<path
|
|
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
|
|
</path>
|
|
</svg></a></li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="dt--bottom-section d-sm-flex justify-content-sm-between text-center">
|
|
<div class="dt--pages-count mb-sm-0 mb-3">
|
|
<div class="dataTables_info" id="style-3_info" role="status" aria-live="polite">Showing
|
|
page 1 of 1</div>
|
|
</div>
|
|
<div class="dt--pagination">
|
|
<div class="dataTables_paginate paging_simple_numbers" id="style-3_paginate">
|
|
<ul class="pagination">
|
|
<li class="paginate_button page-item previous disabled" id="style-3_previous"><a
|
|
href="#" aria-controls="style-3" data-dt-idx="0" tabindex="0"
|
|
class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
|
|
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-arrow-left">
|
|
<line x1="19" y1="12" x2="5" y2="12"></line>
|
|
<polyline points="12 19 5 12 12 5"></polyline>
|
|
</svg></a></li>
|
|
<li class="paginate_button page-item active"><a href="#" aria-controls="style-3"
|
|
data-dt-idx="1" tabindex="0" class="page-link">1</a></li>
|
|
<li class="paginate_button page-item next disabled" id="style-3_next"><a
|
|
href="#" aria-controls="style-3" data-dt-idx="2" tabindex="0"
|
|
class="page-link"><svg xmlns="http://www.w3.org/2000/svg" width="24"
|
|
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
|
class="feather feather-arrow-right">
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
<polyline points="12 5 19 12 12 19"></polyline>
|
|
</svg></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- modal for View FAQ Question Answer -->
|
|
<div class="modal fade" id="faqmodal" tabindex="-1" role="dialog" aria-labelledby="faqModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content" >
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="faqModalLabel">Faq</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="card mb-2">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Question</h6>
|
|
<p class="mb-0" id="questionData"></p>
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Answer</h6>
|
|
<p class="mb-0" id="answerData"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-dark" data-bs-dismiss="modal">Discard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/datatable_cdn_css.html" %}
|
|
|
|
<script>
|
|
faq_category = $('#faq-category').DataTable({
|
|
"dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
|
"<'table-responsive'tr>" +
|
|
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
|
"oLanguage": {
|
|
"oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
|
"sInfo": "Showing page _PAGE_ of _PAGES_",
|
|
"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
"sSearchPlaceholder": "Search...",
|
|
"sLengthMenu": "Results : _MENU_",
|
|
},
|
|
"stripeClasses": [],
|
|
"lengthMenu": [5, 10, 20, 50],
|
|
"pageLength": 10
|
|
});
|
|
|
|
|
|
faqs = $('#faqs').DataTable({
|
|
"dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
|
|
"<'table-responsive'tr>" +
|
|
"<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>",
|
|
"oLanguage": {
|
|
"oPaginate": { "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>', "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>' },
|
|
"sInfo": "Showing page _PAGE_ of _PAGES_",
|
|
"sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
|
|
"sSearchPlaceholder": "Search...",
|
|
"sLengthMenu": "Results : _MENU_",
|
|
},
|
|
"stripeClasses": [],
|
|
"lengthMenu": [5, 10, 20, 50],
|
|
"pageLength": 10
|
|
});
|
|
|
|
|
|
<!-- Faq modal show and set data-->
|
|
function faqModal(question, answer) {
|
|
// Set the data in the modal content
|
|
$("#questionData").text(question);
|
|
$("#answerData").text(answer);
|
|
|
|
// Show the modal
|
|
$('#faqmodal').modal('show');
|
|
}
|
|
|
|
</script>
|
|
{% endblock %} |