307 lines
16 KiB
Twig
307 lines
16 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}پرسش و پاسخ - حسابیکس{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container my-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="text-primary fw-bold">پرسش و پاسخ</h1>
|
|
{% if app.user and 'ROLE_CUSTOMER' in app.user.roles %}
|
|
<a href="{{ path('qa_ask') }}" class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>سوال جدید
|
|
</a>
|
|
{% else %}
|
|
<a href="{{ path('customer_login') }}" class="btn btn-outline-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
|
|
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
|
|
<polyline points="10,17 15,12 10,7"></polyline>
|
|
<line x1="15" y1="12" x2="3" y2="12"></line>
|
|
</svg>ورود برای پرسیدن سوال
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- فیلترها و جستجو -->
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<form method="GET" class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="filter" class="form-label">فیلتر:</label>
|
|
<select name="filter" id="filter" class="form-select">
|
|
<option value="all" {{ currentFilter == 'all' ? 'selected' : '' }}>همه سوالات</option>
|
|
<option value="unsolved" {{ currentFilter == 'unsolved' ? 'selected' : '' }}>سوالات حل نشده</option>
|
|
<option value="solved" {{ currentFilter == 'solved' ? 'selected' : '' }}>سوالات حل شده</option>
|
|
<option value="popular" {{ currentFilter == 'popular' ? 'selected' : '' }}>محبوب‌ترین</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label for="search" class="form-label">جستجو:</label>
|
|
<input type="text" name="search" id="search" class="form-control"
|
|
value="{{ currentSearch }}" placeholder="جستجو در سوالات...">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label class="form-label"> </label>
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-1">
|
|
<circle cx="11" cy="11" r="8"></circle>
|
|
<path d="m21 21-4.35-4.35"></path>
|
|
</svg>جستجو
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- لیست سوالات -->
|
|
<div class="col-lg-9">
|
|
{% if questions is empty %}
|
|
<div class="card">
|
|
<div class="card-body text-center py-5">
|
|
<i class="fas fa-question-circle fa-3x text-muted mb-3"></i>
|
|
<h4 class="text-muted">سوالی یافت نشد</h4>
|
|
<p class="text-muted">هنوز سوالی در این دسته‌بندی وجود ندارد.</p>
|
|
{% if app.user and 'ROLE_CUSTOMER' in app.user.roles %}
|
|
<a href="{{ path('qa_ask') }}" class="btn btn-primary">اولین سوال را بپرسید</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
{% for question in questions %}
|
|
<div class="card mb-3 question-card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-2 col-md-1 text-center">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="vote-count {{ question.votes > 0 ? 'text-success' : (question.votes < 0 ? 'text-danger' : 'text-muted') }}">
|
|
{{ question.votes }}
|
|
</div>
|
|
<small class="text-muted">رای</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-2 col-md-1 text-center">
|
|
<div class="d-flex flex-column align-items-center">
|
|
<div class="answer-count {{ question.answers|length > 0 ? 'text-success' : 'text-muted' }}">
|
|
{{ question.answers|length }}
|
|
</div>
|
|
<small class="text-muted">پاسخ</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-8 col-md-10">
|
|
<div class="d-flex justify-content-between align-items-start mb-2">
|
|
<h5 class="card-title mb-0">
|
|
<a href="{{ path('qa_question_show', {'id': question.id}) }}"
|
|
class="text-decoration-none text-dark">
|
|
{{ question.title }}
|
|
</a>
|
|
</h5>
|
|
{% if question.isSolved %}
|
|
<span class="badge bg-success">
|
|
<i class="fas fa-check me-1"></i>حل شده
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="card-text text-muted mb-2 question-preview">
|
|
{% set content = question.content|markdown|raw %}
|
|
{% set plainText = content|striptags %}
|
|
{% if plainText|length > 200 %}
|
|
{{ plainText|slice(0, 200) }}...
|
|
{% else %}
|
|
{{ plainText }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="tags">
|
|
{% for tagRelation in question.tagRelations %}
|
|
<a href="{{ path('qa_tag_questions', {'name': tagRelation.tag.name}) }}"
|
|
class="badge bg-light text-dark text-decoration-none me-1">
|
|
{{ tagRelation.tag.name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="text-muted small">
|
|
<i class="fas fa-user me-1"></i>{{ question.author.name }}
|
|
<i class="fas fa-clock ms-3 me-1"></i>{{ question.createdAt|date('Y/m/d H:i') }}
|
|
<i class="fas fa-eye ms-3 me-1"></i>{{ question.views }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<!-- صفحه‌بندی -->
|
|
{% if totalPages > 1 %}
|
|
<nav aria-label="صفحه‌بندی سوالات">
|
|
<ul class="pagination justify-content-center">
|
|
{% if currentPage > 1 %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ currentPage - 1 }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}">قبلی</a>
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% for page in 1..totalPages %}
|
|
{% if page == currentPage %}
|
|
<li class="page-item active">
|
|
<span class="page-link">{{ page }}</span>
|
|
</li>
|
|
{% else %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ page }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}">{{ page }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if currentPage < totalPages %}
|
|
<li class="page-item">
|
|
<a class="page-link" href="?page={{ currentPage + 1 }}{{ currentFilter != 'all' ? '&filter=' ~ currentFilter : '' }}{{ currentSearch ? '&search=' ~ currentSearch : '' }}{{ currentTag ? '&tag=' ~ currentTag : '' }}">بعدی</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- سایدبار -->
|
|
<div class="col-lg-3">
|
|
<!-- تگ‌های محبوب -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
|
|
<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
|
|
<line x1="7" y1="7" x2="7.01" y2="7"></line>
|
|
</svg>تگ‌های محبوب
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
{% for tag in popularTags %}
|
|
<a href="{{ path('qa_tag_questions', {'name': tag.name}) }}"
|
|
class="badge bg-light text-dark text-decoration-none me-1 mb-2 d-inline-block">
|
|
{{ tag.name }}
|
|
<span class="text-muted">({{ tag.usageCount }})</span>
|
|
</a>
|
|
{% endfor %}
|
|
<div class="mt-3">
|
|
<a href="{{ path('qa_tags') }}" class="btn btn-outline-primary btn-sm">
|
|
مشاهده همه تگ‌ها
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- آمار -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="me-2">
|
|
<path d="M18 20V10"></path>
|
|
<path d="M12 20V4"></path>
|
|
<path d="M6 20v-6"></path>
|
|
</svg>آمار
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-6">
|
|
<div class="h4 text-primary">{{ questions|length }}</div>
|
|
<small class="text-muted">سوال</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="h4 text-success">{{ popularTags|length }}</div>
|
|
<small class="text-muted">تگ</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.question-card {
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.question-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
border-left-color: #0d6efd;
|
|
}
|
|
|
|
.vote-count, .answer-count {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tags .badge {
|
|
font-size: 0.8rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tags .badge:hover {
|
|
background-color: #0d6efd !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.card-title a:hover {
|
|
color: #0d6efd !important;
|
|
}
|
|
|
|
.question-preview {
|
|
line-height: 1.6;
|
|
max-height: 4.8em; /* حدود 3 خط */
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.question-card {
|
|
transition: all 0.3s ease;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.question-card:hover {
|
|
border-left-color: #0d6efd;
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.question-stats {
|
|
font-size: 0.9rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.question-stats .stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.question-stats .stat-number {
|
|
font-weight: bold;
|
|
font-size: 1.1rem;
|
|
color: #495057;
|
|
}
|
|
|
|
.question-stats .stat-label {
|
|
font-size: 0.8rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
</style>
|
|
{% endblock %}
|