forked from mirror/pixelfed
Merge pull request #1406 from pixelfed/frontend-ui-refactor
Update Relationship settings, separate following and followers
This commit is contained in:
daniel
GitHub
commit
d4be2389cd
2 changed files with 116 additions and 107 deletions
|
|
@ -16,13 +16,20 @@ use Illuminate\Http\Request;
|
|||
trait RelationshipSettings
|
||||
{
|
||||
|
||||
public function relationshipsHome()
|
||||
public function relationshipsHome(Request $request)
|
||||
{
|
||||
$mode = $request->input('mode') == 'following' ? 'following' : 'followers';
|
||||
$profile = Auth::user()->profile;
|
||||
$following = $profile->following()->simplePaginate(10);
|
||||
$followers = $profile->followers()->simplePaginate(10);
|
||||
|
||||
return view('settings.relationships.home', compact('profile', 'following', 'followers'));
|
||||
$following = $followers = [];
|
||||
|
||||
if($mode == 'following') {
|
||||
$data = $profile->following()->simplePaginate(10);
|
||||
} else {
|
||||
$data = $profile->followers()->simplePaginate(10);
|
||||
}
|
||||
|
||||
return view('settings.relationships.home', compact('profile', 'mode', 'data'));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -2,116 +2,118 @@
|
|||
|
||||
@section('section')
|
||||
|
||||
<div class="title">
|
||||
<h3 class="font-weight-bold">Followers & Following</h3>
|
||||
</div>
|
||||
<hr>
|
||||
@if(empty($following) && empty($followers))
|
||||
<p class="text-center lead pt-5 mt-5">You are not following anyone, or followed by anyone.</p>
|
||||
@else
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="pt-0 pb-1 mt-0">
|
||||
<input type="checkbox" name="check" class="form-control check-all">
|
||||
</th>
|
||||
<th scope="col">Username</th>
|
||||
<th scope="col">Relationship</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($followers as $follower)
|
||||
<tr>
|
||||
<th scope="row" class="pb-0 pt-1 my-0">
|
||||
{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}}
|
||||
</th>
|
||||
<td class="font-weight-bold">
|
||||
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">{{$follower->username}}
|
||||
</td>
|
||||
<td class="text-center">Follower</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a>
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
@foreach($following as $follower)
|
||||
<tr>
|
||||
<th scope="row" class="pb-0 pt-1 my-0">
|
||||
<input type="checkbox" class="form-control mr-1 check-row">
|
||||
</th>
|
||||
<td class="font-weight-bold">
|
||||
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">{{$follower->username}}
|
||||
</td>
|
||||
<td class="text-success text-center">Following</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="d-flex justify-content-center">{{$following->links() ?? $followers->links()}}</div>
|
||||
@endif
|
||||
<div class="title">
|
||||
<h3 class="font-weight-bold">Followers & Following</h3>
|
||||
</div>
|
||||
<hr>
|
||||
@if(empty($data))
|
||||
<p class="text-center lead pt-5 mt-5">You are not {{$mode == 'following' ? 'following anyone.' : 'followed by anyone.'}}</p>
|
||||
@else
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link font-weight-bold {{$mode == 'followers' ? 'active' : ''}}" href="?mode=followers&page=1">Followers</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link font-weight-bold {{$mode == 'following' ? 'active' : ''}}" href="?mode=following&page=1">Following</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" class="pt-0 pb-1 mt-0">
|
||||
<input type="checkbox" name="check" class="form-control check-all">
|
||||
</th>
|
||||
<th scope="col">Username</th>
|
||||
<th scope="col">Relationship</th>
|
||||
<th scope="col">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($data as $follower)
|
||||
<tr>
|
||||
<th scope="row" class="pb-0 pt-1 my-0">
|
||||
{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}}
|
||||
</th>
|
||||
<td class="font-weight-bold">
|
||||
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">
|
||||
<span class="d-inline-block text-truncate" style="max-width: 160px;" title="{{$follower->username}}">{{$follower->username}}</span>
|
||||
</td>
|
||||
@if($mode == 'following')
|
||||
<td class="text-center">Following</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
|
||||
</td>
|
||||
@else
|
||||
<td class="text-center">Follower</td>
|
||||
<td class="text-center">
|
||||
<a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a>
|
||||
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a>
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div>
|
||||
@endif
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(() => {
|
||||
$('.action-btn').on('click', e => {
|
||||
e.preventDefault();
|
||||
let action = e.target.getAttribute('data-action');
|
||||
let id = e.target.getAttribute('data-id');
|
||||
$(document).ready(() => {
|
||||
$('.action-btn').on('click', e => {
|
||||
e.preventDefault();
|
||||
let action = e.target.getAttribute('data-action');
|
||||
let id = e.target.getAttribute('data-id');
|
||||
|
||||
switch(action) {
|
||||
case 'mute':
|
||||
axios.post('/i/mute', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Mute Successful',
|
||||
'You have successfully muted that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
switch(action) {
|
||||
case 'mute':
|
||||
axios.post('/i/mute', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Mute Successful',
|
||||
'You have successfully muted that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case 'block':
|
||||
axios.post('/i/block', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Block Successful',
|
||||
'You have successfully blocked that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
case 'block':
|
||||
axios.post('/i/block', {
|
||||
type: 'user',
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Block Successful',
|
||||
'You have successfully blocked that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
|
||||
case 'unfollow':
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Unfollow Successful',
|
||||
'You have successfully unfollowed that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
}
|
||||
setTimeout(function() {
|
||||
window.location.href = window.location.href;
|
||||
}, 3000);
|
||||
case 'unfollow':
|
||||
axios.post('/i/follow', {
|
||||
item: id
|
||||
}).then(res => {
|
||||
swal(
|
||||
'Unfollow Successful',
|
||||
'You have successfully unfollowed that user',
|
||||
'success'
|
||||
);
|
||||
});
|
||||
break;
|
||||
}
|
||||
setTimeout(function() {
|
||||
window.location.href = window.location.href;
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
$('.check-all').on('click', e => {
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
$('.check-all').on('click', e => {
|
||||
|
||||
})
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Loading…
Reference in a new issue