RSM-6 Team features

resources/js/app.js

@@ -43,3 +43,5 @@ $("#comment").keyup(function(){
 $("#submitComment").on('click', function(){
     $("#newComment").submit();
 });
+
+$("#jointype").bootstrapToggle();

resources/views/dashboard/teams/edit-team.blade.php

@@ -0,0 +1,105 @@
+@extends('adminlte::page')
+
+@section('title', config('app.name') . ' | ' . __('messages.teams.m_teams_page'))
+
+@section('content_header')
+    <h1>{{config('app.name')}} / {{__('messages.teams.m_teams_page')}}</h1>
+@stop
+
+@section('js')
+
+    <x-global-errors></x-global-errors>
+
+@stop
+
+
+@section('content')
+
+    @if($team->openJoin == false)
+        <x-modal id="addUserModal" modal-label="addUserModalLabel" modal-title="Invite User" include-close-button="true">
+
+            <form id="inviteToTeam" method="POST" action="{{ route('sendInvite', ['team' => $team->id]) }}">
+                @csrf
+                <div class="form-group">
+                    <select class="custom-select" name="user">
+                        <option disabled selected>Choose a user to invite</option>
+                        @foreach ($users as $user)
+                            <option value="{{ $user->id }}" {{ ($user->id == Auth::user()->id) ? 'disabled' : '' }}>{{ $user->name }}</option>
+                        @endforeach
+                    </select>
+                    <span class="text-sm text-muted"><i class="fas fa-info-circle"></i> This user will receive an email notification asking them to join your team.</span>
+                </div>
+
+            </form>
+
+            <x-slot name="modalFooter">
+                <button type="button" class="btn btn-success" onclick="$('#inviteToTeam').submit()"><i class="fas fa-paper-plane"></i> Send invite</button>
+            </x-slot>
+
+        </x-modal>
+    @endif
+
+    <div class="row">
+
+        <div class="col text-center">
+            <img src="/img/editable.svg" alt="Edit illustration" height="220px" width="220px">
+        </div>
+
+    </div>
+
+
+    <div class="row">
+
+        <div class="col">
+
+            <div class="card">
+
+                <div class="card-header">
+                    <h4 class="card-title">Edit Team</h4>
+                </div>
+
+                <div class="card-body">
+                    
+                    <form id="editTeam" method="POST" action="{{ route('teams.update', ['team' => $team->id]) }}">
+
+                        @csrf
+                        @method('PATCH')
+
+                        <div class="form-group">
+                
+                            <label for="teamName">Team name</label>
+                            <input type="text" class="form-control" id="teamName" value="{{ $team->name }}" disabled>
+            
+                            <label for="teamDescription">Team description</label>
+                            <textarea class="form-control" rows="4" name="teamDescription" id="teamDescription">{{ $team->description }}</textarea>
+                            <span class="text-left text-muted text-sm"><a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"><i class="fab fa-markdown"></i></a> Markdown supported</span>
+                            
+                            <div class="controlbuttons mt-3">
+
+                                <span rel="spanTxtTooltip" data-toggle="tooltip" title="This setting controls whether people can join the team freely." data-placement="top">
+                                    <input type="hidden" name="joinType" value="0"> <!-- unchecked checkbox hack (no js) -->
+                                    <input value="0" type="checkbox" {{ ($team->openJoin == 1) ? 'checked' : '' }} name="joinType" id="jointype" data-toggle="toggle" data-on="Public Team" data-off="Private" data-onstyle="success" data-offstyle="danger" data-width="100">
+                                </span>
+
+                                <button onclick="$('#addUserModal').modal('show')" type="button" id="inviteUser" name="inviteUser" class="btn btn-success" {{ ($team->openJoin) ? 'disabled' : '' }}><i class="fas fa-user-plus"></i> Invite user</button>
+                            </div>
+            
+                        </div>
+
+                    </form>
+                    
+                </div>
+
+                <div class="card-footer">
+                    <button type="button" class="btn btn-success" onclick="$('#editTeam').submit()"><i class="fas fa-save"></i> Save and Close</button>
+                    <button type="button" class="btn btn-danger" onclick="location.href='{{ route('teams.index') }}'"><i class="far fa-trash-alt"></i> Cancel</button>
+                </div>
+
+            </div>
+
+        </div>
+
+
+    </div>
+
+@stop

resources/views/dashboard/teams/teams.blade.php

@@ -6,8 +6,132 @@
     <h1>{{config('app.name')}} / {{__('messages.teams.m_teams_page')}}</h1>
 @stop
 
+@section('js')
+
+    <x-global-errors></x-global-errors>
+
+@endsection
+
 @section('content')
 
 
+<x-modal id="newTeamModal" modal-label="newTeamModalLabel" modal-title="New team" include-close-button="true">
+
+    <div class="row">
+        <div class="col offset-3">
+            <img src="/img/new_team.svg" height="220px" width="220px" alt="New Team illustration">
+        </div>
+    </div>
+
+    <form action="{{ route('teams.store') }}" method="POST" id="newTeamForm">
+
+        @csrf
+        
+        <div class="text-center">
+            <input type="text" id="teamName" class="form-control" required name="teamName">
+        </div>
+
+        <p class="text-muted text-sm">This is the name team members will see.</p>
+
+    </form>
+
+    <x-slot name="modalFooter">
+
+        <button type="button" class="btn btn-success" onclick="$('#newTeamForm').submit()"><i class="fas fa-check"></i> Create</button>
+
+    </x-slot>
+
+</x-modal>
+
+
+
+<div class="row">
+
+    <div class="col-md-4 offset-4 text-center">
+
+        <img src="/img/team.svg" height="230px" width="230px" alt="Team illustration">
+
+    </div>
+
+</div>
+
+
+<div class="row">
+
+
+    <div class="col">
+
+
+        <div class="card bg-gray-dark">
+
+            <div class="card-header bg-indigo">
+
+                <div class="card-title"><h4>{{ __('messages.teams.m_teams_page') }}</h4></div>
+
+            </div>
+
+            <div class="card-body">
+
+                @if (!$teams->isEmpty())
+
+                    <table class="table-borderless table-active table">
+
+
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Team Owner</th>
+                                <th>Team Name</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+
+                            @foreach ($teams as $team)
+                            
+                                <tr>
+                                    <td>{{ $team->id }}</td>
+                                    <td>{{ $team->owner_id }}</td>
+                                    <td>{{ $team->name }}</td>
+                                    <td>
+                                        <button type="button" class="btn btn-success btn-sm ml-2" onclick="location.href='{{ route('teams.edit', ['team' => $team->id]) }}'"><i class="fas fa-cogs"></i> Settings</button>
+                                        <button type="button" class="btn btn-warning btn-sm ml-2"><i class="fas fas fa-long-arrow-alt-right"></i> Team Dashboard</button>
+                                    </td>
+                                </tr>
+
+                            @endforeach
+
+                        </tbody>
+
+
+                    </table>
+
+                @else
+
+                    <div class="alert alert-warning">
+                        <i class="fas fa-exclamation-triangle"></i> <b> There don't seem to be any teams here</b>
+                        <p>Have you tried creating or joining a team? You may also click an invite link if you've been invited.</p>
+                    </div>
+
+                @endif
+
+
+            </div>
+
+            <div class="card-footer">
+
+                <button type="button" class="btn btn-success btn-sm ml-3" onclick="$('#newTeamModal').modal('show')"><i class="fas fa-plus-circle"></i> New team</button>
+
+            </div>
+
+        </div>
+
+
+    </div>
+
+
+</div>
+
 
 @stop

resources/views/mail/invited-to-team.blade.php

@@ -0,0 +1,167 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>You have just been invited to a team </title>
+    <style>
+    /* -------------------------------------
+        INLINED WITH htmlemail.io/inline
+    ------------------------------------- */
+    /* -------------------------------------
+        RESPONSIVE AND MOBILE FRIENDLY STYLES
+    ------------------------------------- */
+    @media only screen and (max-width: 620px) {
+      table[class=body] h1 {
+        font-size: 28px !important;
+        margin-bottom: 10px !important;
+      }
+      table[class=body] p,
+            table[class=body] ul,
+            table[class=body] ol,
+            table[class=body] td,
+            table[class=body] span,
+            table[class=body] a {
+        font-size: 16px !important;
+      }
+      table[class=body] .wrapper,
+            table[class=body] .article {
+        padding: 10px !important;
+      }
+      table[class=body] .content {
+        padding: 0 !important;
+      }
+      table[class=body] .container {
+        padding: 0 !important;
+        width: 100% !important;
+      }
+      table[class=body] .main {
+        border-left-width: 0 !important;
+        border-radius: 0 !important;
+        border-right-width: 0 !important;
+      }
+      table[class=body] .btn table {
+        width: 100% !important;
+      }
+      table[class=body] .btn a {
+        width: 100% !important;
+      }
+      table[class=body] .img-responsive {
+        height: auto !important;
+        max-width: 100% !important;
+        width: auto !important;
+      }
+    }
+
+    /* -------------------------------------
+        PRESERVE THESE STYLES IN THE HEAD
+    ------------------------------------- */
+    @media all {
+      .ExternalClass {
+        width: 100%;
+      }
+      .ExternalClass,
+            .ExternalClass p,
+            .ExternalClass span,
+            .ExternalClass font,
+            .ExternalClass td,
+            .ExternalClass div {
+        line-height: 100%;
+      }
+      .apple-link a {
+        color: inherit !important;
+        font-family: inherit !important;
+        font-size: inherit !important;
+        font-weight: inherit !important;
+        line-height: inherit !important;
+        text-decoration: none !important;
+      }
+      #MessageViewBody a {
+        color: inherit;
+        text-decoration: none;
+        font-size: inherit;
+        font-family: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+      .btn-primary table td:hover {
+        background-color: #34495e !important;
+      }
+      .btn-primary a:hover {
+        background-color: #34495e !important;
+        border-color: #34495e !important;
+      }
+    }
+    </style>
+  </head>
+  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
+    <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">You have just been invited to {{ $teamName }}</span>
+    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
+      <tr>
+        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
+          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
+
+            <!-- START CENTERED WHITE CONTAINER -->
+            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
+
+              <!-- START MAIN CONTENT AREA -->
+              <tr>
+                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
+                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                    <tr>
+                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Hi {{ $name }},</p>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{ $inviterName }} has just invited you to join {{ $teamName }} (team).</p>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Joining a team confers many benefits, such as access to the team calendar, shared files, assigned applications and much more.</p>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">If you accept this invite, you'll be added to the team immediately. Conversely, if you refuse it, {{ $inviterName }} won't be notified and you'll need to be invited again to join it.</p>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Click one of the buttons below to make a decision.</p>
+
+
+                        <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
+                          <tbody>
+                            <tr>
+                              <td align="left" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
+                                <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
+                                  <tbody>
+                                    <tr>
+                                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center; margin-left: 5px;"> <a href="{{ route('processInvite', ['action' => 'accept', 'token' => $acceptToken]) }}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Accept Invite</a> </td>
+                                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 5px; text-align: center; margin-left: 5px;"> <a href="{{ route('processInvite', ['action' => 'deny', 'token' => $denyToken]) }}" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Deny Invite</a> </td>
+                                    </tr>
+                                  </tbody>
+                                </table>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">The accept and deny buttons do not expire (unless your invite is cancelled), so you can take your time to make a decision.</p>
+                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">Thank you!</p>
+                      </td>
+                    </tr>
+                  </table>
+                </td>
+              </tr>
+
+            <!-- END MAIN CONTENT AREA -->
+            </table>
+
+            <!-- START FOOTER -->
+            <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
+              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
+                <tr>
+                  <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
+                    <span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;">Staff Manager</span>
+                  </td>
+                </tr>
+              </table>
+            </div>
+            <!-- END FOOTER -->
+
+          <!-- END CENTERED WHITE CONTAINER -->
+          </div>
+        </td>
+        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
+      </tr>
+    </table>
+  </body>
+</html>