better usage limit and deletion warnings
This commit is contained in:
@@ -1,67 +1,93 @@
|
|||||||
{% from 'common/macros.html' import format_size %}
|
{% from 'common/macros.html' import format_size %}
|
||||||
|
|
||||||
{% macro usage_limits(usage_stats) %}
|
{% macro usage_limits(usage_stats) %}
|
||||||
<div class="masonry-card" style="width: 100%;">
|
<div class="masonry-card">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||||
<h5 class="card-title mb-0"><i class="fas fa-chart-line me-2"></i>Usage Limits</h5>
|
<h5 class="card-title mb-0"><i class="fas fa-chart-pie me-2"></i>Usage Limits</h5>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="d-flex flex-column">
|
||||||
<!-- Rooms Progress -->
|
<!-- Rooms Progress -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<i class="fas fa-door-open me-2 icon-primary"></i>
|
<i class="fas fa-door-open me-2 icon-primary"></i>
|
||||||
<span class="text-muted">Rooms:</span>
|
<span class="text-muted">Rooms:</span>
|
||||||
|
<i class="fas fa-info-circle ms-2"
|
||||||
|
style="color: var(--primary-light);"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-placement="right"
|
||||||
|
title="Maximum number of document rooms you can create."></i>
|
||||||
|
</div>
|
||||||
|
<div class="fw-bold text-primary">{{ usage_stats.current_rooms }} / {{ usage_stats.max_rooms }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fw-bold text-primary">{{ usage_stats.current_rooms }} / {{ usage_stats.max_rooms }}</div>
|
<div class="progress" style="height: 8px;">
|
||||||
</div>
|
<div class="progress-bar" role="progressbar"
|
||||||
<div class="progress" style="height: 8px;">
|
style="width: {{ usage_stats.rooms_percentage }}%; background-color: var(--secondary-color);"
|
||||||
<div class="progress-bar" role="progressbar"
|
aria-valuenow="{{ usage_stats.rooms_percentage }}"
|
||||||
style="width: {{ usage_stats.rooms_percentage }}%; background-color: var(--secondary-color);"
|
aria-valuemin="0"
|
||||||
aria-valuenow="{{ usage_stats.rooms_percentage }}"
|
aria-valuemax="100"></div>
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Conversations Progress -->
|
|
||||||
<div class="mb-4">
|
|
||||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
|
||||||
<div class="d-flex align-items-center">
|
|
||||||
<i class="fas fa-comments me-2 icon-primary"></i>
|
|
||||||
<span class="text-muted">Conversations:</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="fw-bold text-primary">{{ usage_stats.current_conversations }} / {{ usage_stats.max_conversations }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress" style="height: 8px;">
|
|
||||||
<div class="progress-bar" role="progressbar"
|
|
||||||
style="width: {{ usage_stats.conversations_percentage }}%; background-color: var(--secondary-color);"
|
|
||||||
aria-valuenow="{{ usage_stats.conversations_percentage }}"
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuemax="100"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Storage Progress -->
|
<!-- Conversations Progress -->
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
<div class="d-flex align-items-center">
|
<div class="d-flex align-items-center">
|
||||||
<i class="fas fa-hdd me-2 icon-primary"></i>
|
<i class="fas fa-comments me-2 icon-primary"></i>
|
||||||
<span class="text-muted">Storage:</span>
|
<span class="text-muted">Conversations:</span>
|
||||||
|
<i class="fas fa-info-circle ms-2"
|
||||||
|
style="color: var(--primary-light);"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-placement="right"
|
||||||
|
title="Maximum number of conversations you can create."></i>
|
||||||
|
</div>
|
||||||
|
<div class="fw-bold text-primary">{{ usage_stats.current_conversations }} / {{ usage_stats.max_conversations }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 8px;">
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: {{ usage_stats.conversations_percentage }}%; background-color: var(--secondary-color);"
|
||||||
|
aria-valuenow="{{ usage_stats.conversations_percentage }}"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fw-bold text-primary">{{ format_size(usage_stats.current_storage) }} / {{ format_size(usage_stats.max_storage) }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="progress" style="height: 8px;">
|
|
||||||
<div class="progress-bar" role="progressbar"
|
<!-- Storage Progress -->
|
||||||
style="width: {{ usage_stats.storage_percentage }}%; background-color: var(--secondary-color);"
|
<div class="mb-4">
|
||||||
aria-valuenow="{{ usage_stats.storage_percentage }}"
|
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||||
aria-valuemin="0"
|
<div class="d-flex align-items-center">
|
||||||
aria-valuemax="100"></div>
|
<i class="fas fa-hdd me-2 icon-primary"></i>
|
||||||
|
<span class="text-muted">Storage:</span>
|
||||||
|
<i class="fas fa-info-circle ms-2"
|
||||||
|
style="color: var(--primary-light);"
|
||||||
|
data-bs-toggle="tooltip"
|
||||||
|
data-bs-placement="right"
|
||||||
|
title="We do not limit the amount of storage you can use, to provide an optimal experience for your team and clients. You will be asked to upgrade if you exceed these limits."></i>
|
||||||
|
</div>
|
||||||
|
<div class="fw-bold text-primary">{{ format_size(usage_stats.current_storage) }} / {{ format_size(usage_stats.max_storage) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress" style="height: 8px;">
|
||||||
|
<div class="progress-bar" role="progressbar"
|
||||||
|
style="width: {{ usage_stats.storage_percentage }}%; background-color: var(--secondary-color);"
|
||||||
|
aria-valuenow="{{ usage_stats.storage_percentage }}"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuemax="100"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
// Initialize all tooltips
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
@@ -91,24 +91,34 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% if current_user.is_admin or (current_user.is_manager and room.member_permissions|selectattr('user_id', 'equalto', current_user.id)|list|length > 0) %}
|
{% if current_user.is_admin %}
|
||||||
<!-- Delete Room Modal -->
|
<!-- Delete Room Modal -->
|
||||||
<div class="modal fade" id="deleteRoomModal{{ room.id }}" tabindex="-1" aria-labelledby="deleteRoomModalLabel{{ room.id }}" aria-hidden="true">
|
<div class="modal fade" id="deleteRoomModal{{ room.id }}" tabindex="-1" aria-labelledby="deleteRoomModalLabel{{ room.id }}" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
<div class="modal-dialog modal-dialog-centered">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="deleteRoomModalLabel{{ room.id }}">Delete Room</h5>
|
<h5 class="modal-title" id="deleteRoomModalLabel{{ room.id }}">Move to Trash</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
<p>Are you sure you want to delete the room "{{ room.name }}"? This action cannot be undone.</p>
|
<div class="d-flex align-items-center gap-3 mb-3">
|
||||||
|
<i class="fas fa-trash text-danger" style="font-size: 2rem;"></i>
|
||||||
|
<div>
|
||||||
|
<h6 class="mb-1">Move to Trash</h6>
|
||||||
|
<p class="text-muted mb-0" id="deleteRoomName{{ room.id }}">{{ room.name }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||||
|
This room will be permanently deleted and cannot be recovered. All documents and files will be lost. Are you sure you want to proceed?
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
||||||
<form action="{{ url_for('rooms.delete_room', room_id=room.id) }}" method="POST" class="d-inline">
|
<form action="{{ url_for('rooms.delete_room', room_id=room.id) }}" method="POST" class="d-inline">
|
||||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||||
<button type="submit" class="btn btn-danger">
|
<button type="submit" class="btn btn-danger">
|
||||||
<i class="fas fa-trash me-2"></i>Move to Trash
|
<i class="fas fa-trash me-2"></i>Delete Room
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user