Add member management page

app/Http/Controllers/Teams/MembersController.php

@@ -0,0 +1,53 @@
+<?php
+
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers\Teams;
+
+use App\Http\Controllers\Controller;
+use App\Models\Team;
+use App\Models\TeamMember;
+use Symfony\Component\HttpFoundation\Response;
+
+class MembersController extends Controller
+{
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->middleware('auth');
+    }
+
+    public function destroy(string $teamId, string $userId): Response
+    {
+        $teamMember = TeamMember::where([
+            'team_id' => $teamId,
+            'user_id' => $userId,
+        ])->firstOrFail();
+
+        if ($teamMember->user_id === \Auth::user()->getKey()) {
+            abort(422, 'can not remove self from team');
+        }
+
+        priv_check('TeamUpdate', $teamMember->team)->ensureCan();
+
+        $teamMember->delete();
+        \Session::flash('popup', osu_trans('teams.members.destroy.success'));
+
+        return response(null, 204);
+    }
+
+    public function index(string $teamId): Response
+    {
+        $team = Team::findOrFail($teamId);
+
+        priv_check('TeamUpdate', $team)->ensureCan();
+
+        $team->load('members.user');
+
+        return ext_view('teams.members.index', compact('team'));
+    }
+}

resources/css/bem-index.less

@@ -386,6 +386,7 @@
 @import "bem/team-info-entries";
 @import "bem/team-info-entry";
 @import "bem/team-members";
+@import "bem/team-members-manage";
 @import "bem/team-settings";
 @import "bem/team-settings-description-preview";
 @import "bem/team-summary";

resources/css/bem/profile-page-cover-editor-button.less

@@ -4,7 +4,8 @@
 .profile-page-cover-editor-button {
   position: absolute;
   bottom: 10px;
-  display: flex;
+  display: grid;
+  gap: 10px;
   justify-content: center;
   right: @gutter-v2;
 

resources/css/bem/team-members-manage.less

@@ -0,0 +1,41 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.team-members-manage {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  font-size: @font-size--title-small;
+  display: grid;
+  gap: 2px 10px;
+  grid-template-columns: auto 1fr auto auto auto;
+
+  &__avatar {
+    .default-border-radius();
+    overflow: hidden;
+    width: @user-list-icon-size;
+    height: $width;
+  }
+
+  &__item {
+    --bg: hsl(var(--hsl-b3));
+    --bg-hover: hsl(var(--hsl-b2));
+    .default-border-radius();
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: center;
+    padding: 3px 10px;
+    background: var(--bg);
+
+    &:hover {
+      background: var(--bg-hover);
+    }
+
+    &--header {
+      --bg: none;
+      --bg-hover: var(--bg);
+      font-weight: 600;
+    }
+  }
+}

resources/lang/en/common.php

@@ -22,6 +22,7 @@
         'admin' => 'Admin',
         'authorise' => 'Authorise',
         'authorising' => 'Authorising...',
+        'back' => 'Back',
         'back_to_previous' => 'Return to previous position',
         'back_to_top' => 'Back to top',
         'cancel' => 'Cancel',

resources/lang/en/teams.php

@@ -6,6 +6,7 @@
 return [
     'edit' => [
         'saved' => 'Settings saved successfully',
+        'title' => 'Team Settings',
 
         'description' => [
             'label' => 'Description',
@@ -37,6 +38,27 @@
         ],
     ],
 
+    'members' => [
+        'destroy' => [
+            'success' => 'Team member removed',
+        ],
+
+        'index' => [
+            'title' => 'Manage Members',
+
+            'table' => [
+                'status' => 'Status',
+                'joined_at' => 'Join Date',
+                'remove' => 'Remove',
+                'title' => 'Current Members',
+            ],
+
+            'status' => [
+                'status_0' => 'Inactive',
+                'status_1' => 'Active',
+            ],
+        ],
+    ],
     'show' => [
         'bar' => [
             'settings' => 'Settings',

resources/views/teams/members/index.blade.php

@@ -0,0 +1,92 @@
+{{--
+    Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+    See the LICENCE file in the repository root for full licence text.
+--}}
+@extends('master')
+
+@section('content')
+    @include('layout._page_header_v4', ['params' => [
+        'theme' => 'team',
+        'backgroundImage' => $team->header()->url(),
+    ]])
+
+    <div class="osu-page osu-page--generic-compact">
+        <div class="user-profile-pages user-profile-pages--no-tabs">
+            <div class="page-extra">
+                <h2 class="title title--page-extra-small title--page-extra-small-top">
+                    {{ osu_trans('teams.members.index.table.title') }}
+                </h2>
+                <ul class="team-members-manage">
+                    <li class="team-members-manage__item team-members-manage__item--header">
+                        <span></span>
+                        <span></span>
+                        <span>{{ osu_trans('teams.members.index.table.status') }}</span>
+                        <span>{{ osu_trans('teams.members.index.table.joined_at') }}</span>
+                        <span></span>
+                    @foreach ($team->members as $member)
+                        <li class="team-members-manage__item">
+                            <span class="team-members-manage__avatar">
+                                <span
+                                    class="avatar avatar--full avatar--guest"
+                                    {!! background_image($member->user->user_avatar) !!}
+                                ></span>
+                            </span>
+                            <span>
+                                {!! link_to_user($member->user, null, '', []) !!}
+                            </span>
+                            <span>
+                                {{ osu_trans('teams.members.index.status.status_'.(int) $member->user->isActive()) }}
+                                @if ($member->user->isOnline())
+                                    <small>
+                                        ({!! osu_trans('users.show.lastvisit_online') !!})
+                                    </small>
+                                @elseif (($lastvisit = $member->user->displayed_last_visit) !== null)
+                                    <small>
+                                        ({!! osu_trans('users.show.lastvisit', ['date' => timeago($lastvisit)]) !!})
+                                    </small>
+                                @endif
+                            </span>
+                            <span>
+                                {!! timeago($member->created_at) !!}
+                            </span>
+                            <span>
+                                <form
+                                    action="{{ route('teams.members.destroy', compact('member', 'team')) }}"
+                                    class="u-contents"
+                                    data-confirm="{{ osu_trans('common.confirmation') }}"
+                                    data-reload-on-success="1"
+                                    data-remote="1"
+                                    method="POST"
+                                >
+                                    <input type="hidden" name="_method" value="DELETE" />
+                                    <button
+                                        class="btn-osu-big btn-osu-big--rounded-small"
+                                        {{ $member->user_id === $team->leader_id ? 'disabled' : '' }}
+                                    >
+                                        {{ osu_trans('teams.members.index.table.remove') }}
+                                    </button>
+                                </form>
+                            </span>
+                    @endforeach
+                </ul>
+            </div>
+
+            <div class="page-extra">
+                <div class="team-settings">
+                    <div class="team-settings__item team-settings__item--buttons">
+                        <div>
+                            <a
+                                class="btn-osu-big btn-osu-big--rounded-thin"
+                                href="{{ route('teams.show', ['team' => $team]) }}"
+                            >
+                                {{ osu_trans('common.buttons.back') }}
+                            </a>
+                        </div>
+
+                        <div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+@endsection

resources/views/teams/show.blade.php

@@ -37,7 +37,18 @@ class="profile-info__bg profile-info__bg--team"
                         <div class="profile-page-cover-editor-button">
                             <a
                                 class="btn-circle btn-circle--page-toggle"
+                                data-tooltip-position="left center"
+                                href="{{ route('teams.members.index', $team) }}"
+                                title="{{ osu_trans('teams.members.index.title') }}"
+                            >
+                                <span class="fa fa-users"></span>
+                            </a>
+
+                            <a
+                                class="btn-circle btn-circle--page-toggle"
+                                data-tooltip-position="left center"
                                 href="{{ route('teams.edit', $team) }}"
+                                title="{{ osu_trans('teams.edit.title') }}"
                             >
                                 <span class="fa fa-wrench"></span>
                             </a>

routes/web.php

@@ -296,6 +296,9 @@
     Route::post('user-cover-presets/batch-activate', 'UserCoverPresetsController@batchActivate')->name('user-cover-presets.batch-activate');
     Route::resource('user-cover-presets', 'UserCoverPresetsController', ['only' => ['index', 'store', 'update']]);
 
+    Route::group(['as' => 'teams.', 'prefix' => 'teams/{team}', 'namespace' => 'Teams'], function () {
+        Route::resource('members', 'MembersController', ['only' => ['destroy', 'index']]);
+    });
     Route::resource('teams', 'TeamsController', ['only' => ['edit', 'show', 'update']]);
 
     Route::post('users/check-username-availability', 'UsersController@checkUsernameAvailability')->name('users.check-username-availability');