mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-18 19:13:17 +00:00
Update admin message views
This commit is contained in:
Daniel Supernault
parent
33d15f4951
commit
5e87214d98
2 changed files with 252 additions and 69 deletions
|
|
@ -1,36 +1,94 @@
|
||||||
@extends('admin.partial.template-full')
|
@extends('admin.partial.template-full')
|
||||||
|
|
||||||
@section('section')
|
@section('section')
|
||||||
<div class="title">
|
|
||||||
<h3 class="font-weight-bold d-inline-block">Messages</h3>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header bg-primary pb-3 mt-n4">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="header-body">
|
||||||
|
<div class="row align-items-center py-4">
|
||||||
|
<div class="col-lg-6 col-7">
|
||||||
|
<p class="display-1 text-white d-inline-block mb-0">Messages</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container mt-3">
|
||||||
|
|
||||||
<hr>
|
<div class="row justify-content-center">
|
||||||
<div class="table-responsive">
|
@if (session('status'))
|
||||||
<table class="table">
|
<div class="col-12" id="flash">
|
||||||
<thead class="bg-light">
|
<div class="alert alert-success">
|
||||||
<tr>
|
{{ session('status') }}
|
||||||
<th scope="col">#</th>
|
</div>
|
||||||
<th scope="col">User</th>
|
</div>
|
||||||
<th scope="col">Message</th>
|
@endif
|
||||||
<th scope="col">Created</th>
|
<div class="col-12">
|
||||||
</tr>
|
<ul class="nav nav-pills my-3">
|
||||||
</thead>
|
<li class="nav-item">
|
||||||
<tbody>
|
<a class="nav-link {{$sort=='all'?'active':''}}" href="?sort=all">All</a>
|
||||||
@foreach($messages as $msg)
|
</li>
|
||||||
<tr>
|
|
||||||
<td>
|
<li class="nav-item">
|
||||||
<a href="/i/admin/messages/show/{{$msg->id}}" class="btn btn-sm btn-outline-primary">
|
<a class="nav-link {{$sort=='open'?'active':''}}" href="?sort=open">Open</a>
|
||||||
{{$msg->id}}
|
</li>
|
||||||
</a>
|
|
||||||
</td>
|
<li class="nav-item">
|
||||||
<td class="font-weight-bold"><a href="{{$msg->user->url()}}">{{$msg->user->username}}</a></td>
|
<a class="nav-link {{$sort=='closed'?'active':''}}" href="?sort=closed">Closed</a>
|
||||||
<td class="font-weight-bold">{{str_limit($msg->message, 40)}}</td>
|
</li>
|
||||||
<td class="font-weight-bold">{{$msg->created_at->diffForHumans()}}</td>
|
</ul>
|
||||||
</tr>
|
</div>
|
||||||
@endforeach
|
<div class="col-12">
|
||||||
</tbody>
|
<div class="table-responsive">
|
||||||
</table>
|
<table class="table">
|
||||||
|
<thead class="bg-light">
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">User</th>
|
||||||
|
<th scope="col">Message</th>
|
||||||
|
<th scope="col">Created</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
@foreach($messages as $msg)
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<a href="/i/admin/messages/show/{{$msg->id}}" class="btn btn-sm btn-outline-primary">
|
||||||
|
{{$msg->id}}
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
<td class="font-weight-bold"><a href="{{$msg->user->url()}}">{{$msg->user->username}}</a></td>
|
||||||
|
<td class="font-weight-bold">{{str_limit($msg->message, 40)}}</td>
|
||||||
|
<td class="font-weight-bold">{{$msg->created_at->diffForHumans()}}</td>
|
||||||
|
</tr>
|
||||||
|
@endforeach
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
{{$messages->links()}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{$messages->links()}}
|
@endsection
|
||||||
@endsection
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript">
|
||||||
|
function checkAndRemoveElementOnLoad(selector, delay, action = 'hide') {
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const element = document.querySelector(selector);
|
||||||
|
if (element) {
|
||||||
|
if (action === 'hide') {
|
||||||
|
element.style.display = 'none';
|
||||||
|
} else if (action === 'remove') {
|
||||||
|
element.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, delay * 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
checkAndRemoveElementOnLoad('#flash', 5, 'remove');
|
||||||
|
</script>
|
||||||
|
@endpush
|
||||||
|
|
|
||||||
|
|
@ -4,56 +4,155 @@
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<div class="d-flex justify-content-between align-items-center">
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
<div class="font-weight-bold"># {{$message->id}}</div>
|
<div class="font-weight-bold"># {{$message->id}}</div>
|
||||||
<div class="font-weight-bold h3">Message</div>
|
<div class="font-weight-bold h3">Contact Form Message</div>
|
||||||
<div>
|
<div></div>
|
||||||
@if($message->read_at)
|
|
||||||
<span class="btn btn-outline-secondary btn-sm disabled" disabled>Read</span>
|
|
||||||
@else
|
|
||||||
<button type="button" class="btn btn-outline-primary btn-sm" id="markRead">Mark Read</button>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr class="mt-0">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row mb-3">
|
||||||
|
<div class="col-12 col-md-4">
|
||||||
<div class="col-12 col-md-3 text-md-right">
|
<div class="card">
|
||||||
@if($message->response_requested)
|
<div class="list-group list-group-flush">
|
||||||
<p class="text-dark font-weight-bold">Response Requested</p>
|
@if($message->responded_at)
|
||||||
@endif
|
<div class="list-group-item">
|
||||||
<p class="text-dark">Sent {{$message->created_at->diffForHumans()}}</p>
|
<div class="d-flex justify-content-between">
|
||||||
|
<div class="small text-muted">Admin Response Sent</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-weight-bold" title="{{$message->responded_at}}" data-toggle="tooltip">
|
||||||
|
{{$message->responded_at->diffForHumans()}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="list-group-item">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div class="small text-muted">Status</div>
|
||||||
|
@if($message->read_at == null)
|
||||||
|
<div class="text-success font-weight-bold">Open</div>
|
||||||
|
@else
|
||||||
|
<div class="text-muted">Closed</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="list-group-item">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div class="small text-muted">Response Requested</div>
|
||||||
|
@if($message->response_requested == 1)
|
||||||
|
<div class="font-weight-bold">Yes</div>
|
||||||
|
@else
|
||||||
|
<div class="text-muted">No</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list-group-item">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div class="small text-muted">Created</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-weight-bold" title="{{$message->created_at}}" data-toggle="tooltip">
|
||||||
|
{{$message->created_at->diffForHumans()}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if($message->user && $message->user->last_active_at)
|
||||||
|
<div class="list-group-item">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<div class="small text-muted">User Last Active</div>
|
||||||
|
<div>
|
||||||
|
<span class="font-weight-bold" title="{{$message->user->last_active_at}}" data-toggle="tooltip">
|
||||||
|
{{$message->user->last_active_at->diffForHumans()}}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
@if(!$message->read_at)
|
||||||
|
<div class="list-group-item">
|
||||||
|
<button type="button" class="btn btn-outline-primary btn-block" id="markRead">Mark Read</button>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-6">
|
|
||||||
|
<div class="col-12 col-md-8">
|
||||||
<div class="card shadow-none border">
|
<div class="row">
|
||||||
<div class="card-header bg-white">
|
<div class="col-12">
|
||||||
<div class="media">
|
<div class="card shadow-none border">
|
||||||
<img src="{{$message->user->profile->avatarUrl()}}" class="mr-3 rounded-circle" width="40px" height="40px">
|
<div class="card-header bg-white">
|
||||||
<div class="media-body">
|
<div class="media">
|
||||||
<h5 class="my-0">@{{$message->user->username}}</h5>
|
<img
|
||||||
<span class="text-muted">{{$message->user->email}}</span>
|
src="{{$message->user->profile->avatarUrl()}}"
|
||||||
|
class="mr-3 rounded-circle"
|
||||||
|
width="40px"
|
||||||
|
height="40px"
|
||||||
|
onerror="this.onerror=null;this.src='/storage/avatars/default.png?v=0';">
|
||||||
|
<div class="media-body">
|
||||||
|
<h5 class="my-0">@{{$message->user->username}}</h5>
|
||||||
|
<span class="text-muted">{{$message->user->email}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="card-body">
|
||||||
</div>
|
<p class="text-uppercase text-muted small mb-2">Message Body</p>
|
||||||
<div class="card-body">
|
<p class="mb-0">{{$message->message}}</p>
|
||||||
<p class="mb-0">{{$message->message}}</p>
|
|
||||||
|
<hr>
|
||||||
|
<p class="text-uppercase text-muted small mb-2">Admin Reply:</p>
|
||||||
|
|
||||||
|
@if($message->responded_at)
|
||||||
|
<p class="mb-0">{{$message->response}}</p>
|
||||||
|
@else
|
||||||
|
<form method="post" id="mform">
|
||||||
|
@csrf
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
name="message"
|
||||||
|
id="message"
|
||||||
|
rows="4"
|
||||||
|
style="resize: none;"
|
||||||
|
maxlength="500"
|
||||||
|
placeholder="Reply to @{{$message->user->username}} via email ..."></textarea>
|
||||||
|
@if ($errors->any())
|
||||||
|
@foreach ($errors->all() as $error)
|
||||||
|
<p class="invalid-feedback mb-0" style="display:block;">
|
||||||
|
<strong>{{ $error }}</strong>
|
||||||
|
</p>
|
||||||
|
@endforeach
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
<div class="d-flex justify-content-between align-items-center">
|
||||||
|
<div>
|
||||||
|
<button type="button" class="btn btn-primary font-weight-bold submit-btn">Send</button>
|
||||||
|
<button type="button" class="btn btn-outline-primary font-weight-bold preview-btn">Preview</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="small text-muted font-weight-bold">
|
||||||
|
<span id="messageCount">0</span>/500
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md-3">
|
|
||||||
{{-- @if($message->responded_at == null)
|
|
||||||
<button class="btn btn-primary font-weight-bold btn-block">Send Response</button>
|
|
||||||
<hr>
|
|
||||||
@endif
|
|
||||||
<button class="btn btn-outline-danger font-weight-bold btn-block">Delete</button> --}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
|
@if($message->responded_at == null)
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$('#markRead').on('click', function(e) {
|
$('#markRead').on('click', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
@ -61,8 +160,34 @@
|
||||||
axios.post('/i/admin/messages/mark-read', {
|
axios.post('/i/admin/messages/mark-read', {
|
||||||
id: '{{$message->id}}',
|
id: '{{$message->id}}',
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
window.location.href = window.location.href;
|
window.location.href = '/i/admin/messages/home';
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const submitBtn = document.querySelector('.submit-btn');
|
||||||
|
submitBtn.addEventListener('click', () => {
|
||||||
|
const form = document.getElementById('mform');
|
||||||
|
form.action = '/i/admin/messages/show/{{$message->id}}';
|
||||||
|
form.submit()
|
||||||
|
});
|
||||||
|
|
||||||
|
const previewBtn = document.querySelector('.preview-btn');
|
||||||
|
previewBtn.addEventListener('click', () => {
|
||||||
|
const form = document.getElementById('mform');
|
||||||
|
form.action = '/i/admin/messages/preview/{{$message->id}}';
|
||||||
|
form.submit()
|
||||||
|
});
|
||||||
|
|
||||||
|
function countChars() {
|
||||||
|
const input = document.getElementById('message');
|
||||||
|
const counter = document.getElementById('messageCount');
|
||||||
|
|
||||||
|
input.addEventListener('input', function() {
|
||||||
|
counter.textContent = input.value.length;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
countChars();
|
||||||
</script>
|
</script>
|
||||||
@endpush
|
@endif
|
||||||
|
@endpush
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue