Update Relationship settings, separate following and followers

This commit is contained in:
Daniel Supernault 2019-06-16 17:38:23 -06:00
parent d2e14bda7b
commit 17fa86ad2f
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
2 changed files with 116 additions and 107 deletions

View file

@ -16,13 +16,20 @@ use Illuminate\Http\Request;
trait RelationshipSettings trait RelationshipSettings
{ {
public function relationshipsHome() public function relationshipsHome(Request $request)
{ {
$mode = $request->input('mode') == 'following' ? 'following' : 'followers';
$profile = Auth::user()->profile; $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'));
} }
} }

View file

@ -2,116 +2,118 @@
@section('section') @section('section')
<div class="title"> <div class="title">
<h3 class="font-weight-bold">Followers & Following</h3> <h3 class="font-weight-bold">Followers & Following</h3>
</div> </div>
<hr> <hr>
@if(empty($following) && empty($followers)) @if(empty($data))
<p class="text-center lead pt-5 mt-5">You are not following anyone, or followed by anyone.</p> <p class="text-center lead pt-5 mt-5">You are not {{$mode == 'following' ? 'following anyone.' : 'followed by anyone.'}}</p>
@else @else
<table class="table table-bordered"> <ul class="nav nav-pills">
<thead> <li class="nav-item">
<tr> <a class="nav-link font-weight-bold {{$mode == 'followers' ? 'active' : ''}}" href="?mode=followers&page=1">Followers</a>
<th scope="col" class="pt-0 pb-1 mt-0"> </li>
<input type="checkbox" name="check" class="form-control check-all"> <li class="nav-item">
</th> <a class="nav-link font-weight-bold {{$mode == 'following' ? 'active' : ''}}" href="?mode=following&page=1">Following</a>
<th scope="col">Username</th> </li>
<th scope="col">Relationship</th> </ul>
<th scope="col">Action</th> <hr>
</tr> <table class="table table-bordered">
</thead> <thead>
<tbody> <tr>
@foreach($followers as $follower) <th scope="col" class="pt-0 pb-1 mt-0">
<tr> <input type="checkbox" name="check" class="form-control check-all">
<th scope="row" class="pb-0 pt-1 my-0"> </th>
{{-- <input type="checkbox" class="form-control mr-1 check-row"> --}} <th scope="col">Username</th>
</th> <th scope="col">Relationship</th>
<td class="font-weight-bold"> <th scope="col">Action</th>
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">{{$follower->username}} </tr>
</td> </thead>
<td class="text-center">Follower</td> <tbody>
<td class="text-center"> @foreach($data as $follower)
<a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a> <tr>
<a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a> <th scope="row" class="pb-0 pt-1 my-0">
</td> {{-- <input type="checkbox" class="form-control mr-1 check-row"> --}}
</tr> </th>
@endforeach <td class="font-weight-bold">
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">
@foreach($following as $follower) <span class="d-inline-block text-truncate" style="max-width: 160px;" title="{{$follower->username}}">{{$follower->username}}</span>
<tr> </td>
<th scope="row" class="pb-0 pt-1 my-0"> @if($mode == 'following')
<input type="checkbox" class="form-control mr-1 check-row"> <td class="text-center">Following</td>
</th> <td class="text-center">
<td class="font-weight-bold"> <a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="unfollow">Unfollow</a>
<img src="{{$follower->avatarUrl()}}" width="20px" height="20px" class="rounded-circle border mr-2">{{$follower->username}} </td>
</td> @else
<td class="text-success text-center">Following</td> <td class="text-center">Follower</td>
<td class="text-center"> <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> <a class="btn btn-outline-primary btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="mute">Mute</a>
</td> <a class="btn btn-outline-danger btn-sm py-0 action-btn" href="#" data-id="{{$follower->id}}" data-action="block">Block</a>
</tr> </td>
@endforeach @endif
</tbody> </tr>
</table> @endforeach
<div class="d-flex justify-content-center">{{$following->links() ?? $followers->links()}}</div> </tbody>
@endif </table>
<div class="d-flex justify-content-center">{{$data->appends(['mode' => $mode])->links()}}</div>
@endif
@endsection @endsection
@push('scripts') @push('scripts')
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(() => { $(document).ready(() => {
$('.action-btn').on('click', e => { $('.action-btn').on('click', e => {
e.preventDefault(); e.preventDefault();
let action = e.target.getAttribute('data-action'); let action = e.target.getAttribute('data-action');
let id = e.target.getAttribute('data-id'); let id = e.target.getAttribute('data-id');
switch(action) { switch(action) {
case 'mute': case 'mute':
axios.post('/i/mute', { axios.post('/i/mute', {
type: 'user', type: 'user',
item: id item: id
}).then(res => { }).then(res => {
swal( swal(
'Mute Successful', 'Mute Successful',
'You have successfully muted that user', 'You have successfully muted that user',
'success' 'success'
); );
}); });
break; break;
case 'block': case 'block':
axios.post('/i/block', { axios.post('/i/block', {
type: 'user', type: 'user',
item: id item: id
}).then(res => { }).then(res => {
swal( swal(
'Block Successful', 'Block Successful',
'You have successfully blocked that user', 'You have successfully blocked that user',
'success' 'success'
); );
}); });
break; break;
case 'unfollow': case 'unfollow':
axios.post('/i/follow', { axios.post('/i/follow', {
item: id item: id
}).then(res => { }).then(res => {
swal( swal(
'Unfollow Successful', 'Unfollow Successful',
'You have successfully unfollowed that user', 'You have successfully unfollowed that user',
'success' 'success'
); );
}); });
break; break;
} }
setTimeout(function() { setTimeout(function() {
window.location.href = window.location.href; window.location.href = window.location.href;
}, 3000); }, 3000);
});
$('.check-all').on('click', e => {
})
}); });
$('.check-all').on('click', e => {
})
});
</script> </script>
@endpush @endpush