#116: Completed the Explore Users page

This commit is contained in:
Andy Heathershaw 2018-11-18 20:50:09 +00:00
parent 386bd30208
commit 2394bbd077
4 changed files with 64 additions and 15 deletions

View File

@ -75,7 +75,7 @@ class User extends Authenticatable
public function followUrl()
{
return route('followUser', [
'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
'idOrAlias' => $this->profileAliasForUrl()
]);
}
@ -89,10 +89,15 @@ class User extends Authenticatable
return $this->id == -1 && $this->name == 'Anonymous';
}
public function profileAliasForUrl()
{
return (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id);
}
public function profileUrl()
{
return route('viewUser', [
'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
'idOrAlias' => $this->profileAliasForUrl()
]);
}
@ -104,7 +109,7 @@ class User extends Authenticatable
public function unFollowUrl()
{
return route('unFollowUser', [
'idOrAlias' => (!empty($this->profile_alias) ? trim(strtolower($this->profile_alias)) : $this->id)
'idOrAlias' => $this->profileAliasForUrl()
]);
}
}

View File

@ -1,3 +1,47 @@
/**
* This model is used by gallery/explore_users.blade.php, to handle following/unfollowing users profiles.
* @constructor
*/
function ExploreUsersViewModel(urls)
{
this.el = '#explore-users-app';
this.data = {
};
this.computed = {
};
this.methods = {
followUser: function(e)
{
var userIDToFollow = $(e.target).data('user-id');
var urlToPost = urls.follow_user_url.replace('/-1/', '/' + userIDToFollow + '/');
$.post(urlToPost, '', function(data)
{
window.location.reload(true);
});
e.preventDefault();
return false;
},
unFollowUser: function(e)
{
var userIDToUnfollow = $(e.target).data('user-id');
var urlToPost = urls.unfollow_user_url.replace('/-1/', '/' + userIDToUnfollow + '/');
$.post(urlToPost, '', function(data)
{
window.location.reload(true);
});
e.preventDefault();
return false;
}
};
}
/**
* This model is used by gallery/photo.blade.php, to handle comments and individual photo actions.
* @constructor

View File

@ -19,7 +19,8 @@ return [
'follow_button' => 'Follow',
'following_button' => 'Following',
'intro_p1' => 'The users listed below have registered on this site and enabled their public profile.',
'intro_p2' => 'Click a name to view their profile, or click the Follow button to follow them and see their activity in your activity feed.',
'intro_p2' => 'Click a name to view their profile',
'intro_p2_logged_in' => ', or click the Follow button to follow them and see their activity in your activity feed',
'title' => 'Explore Photographers'
],
'file_name' => 'File name:',

View File

@ -7,13 +7,15 @@
@endsection
@section('content')
<div class="container" id="user-app">
<div class="container" id="explore-users-app">
<div class="row">
<div class="col">
@if ($users->count() > 0)
<h1>@yield('title')</h1>
<p class="mb-1">@lang('gallery.explore_users.intro_p1')</p>
<p>@lang('gallery.explore_users.intro_p2')</p>
<p>
@lang('gallery.explore_users.intro_p2')@if (!Auth::guest())@lang('gallery.explore_users.intro_p2_logged_in')@endif.
</p>
<hr class="mt-4 mb-4"/>
@foreach ($users as $user)
@ -22,11 +24,11 @@
<img src="{{ Theme::gravatarUrl($user->email, 64) }}" title="{{ $user->name }}" class="rounded">
</div>
<div class="col-sm-9 col-md-10 col-xl-11">
@if ($user->id != Auth::user()->id)
@if (!Auth::guest() && $user->id != Auth::user()->id)
@if (in_array($user->id, $users_following))
<button class="btn btn-outline-primary pull-right"><i class="fa fa-fw fa-check"></i> @lang('gallery.explore_users.following_button')</button>
<button class="btn btn-outline-primary pull-right" data-user-id="{{ $user->profileAliasForUrl() }}" v-on:click="unFollowUser"><i class="fa fa-fw fa-check"></i> @lang('gallery.explore_users.following_button')</button>
@else
<button class="btn btn-primary pull-right">@lang('gallery.explore_users.follow_button')</button>
<button class="btn btn-primary pull-right" data-user-id="{{ $user->profileAliasForUrl() }}" v-on:click="followUser">@lang('gallery.explore_users.follow_button')</button>
@endif
@endif
<h2 class="h3"><a href="{{ $user->profileUrl() }}">{{ $user->name }}</a></h2>
@ -61,14 +63,11 @@
@push('scripts')
<script type="text/javascript">
var viewModel = new UserViewModel({
current_url: '{{ url()->current() }}',
feed_url: '{{ $user->feedJsonUrl() }}',
follow_user_url: '{{ $user->followUrl() }}',
unfollow_user_url: '{{ $user->unFollowUrl() }}'
var viewModel = new ExploreUsersViewModel({
'follow_user_url': '{{ route('followUser', [-1]) }}',
'unfollow_user_url': '{{ route('unFollowUser', [-1]) }}'
});
var app = new Vue(viewModel);
app.user_id = '{{ Auth::user()->id }}';
</script>
@endpush