Refactoring & cleanup

app/Http/Controllers/MemberController.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Team;
+use App\Models\User;
+use App\Models\Office;
+use App\Models\Project;
+use App\Exceptions\UserIsAlreadyMember;
+
+class MemberController extends Controller
+{
+    public function store()
+    {
+        // Get model of team/project/office depending on request
+        $entity = $this->getEntityModel();
+        if ($this->userIsAlreadyMember($entity, request('user_id'))) {
+            throw new UserIsAlreadyMember;
+        }
+        $user = User::select(['id', 'name', 'username', 'avatar'])->find(request('user_id'));
+        $entity->members()->save($user);
+
+        return response()->json([
+            'status'   => 'success',
+            'message'  => 'User added to the ' . request('resource_type'),
+            'user'     => $user,
+        ]);
+    }
+
+    private function userIsAlreadyMember($entity, $userId)
+    {
+        return $entity->members()->where('user_id', $userId)->exists();
+    }
+
+    private function getEntityModel()
+    {
+        switch (request('resource_type')) {
+            case 'team':
+                return Team::find(request('resource_id'));
+
+            case 'office':
+                return Office::find(request('resource_id'));
+
+            default:
+                return Project::find(request('resource_id'));
+        }
+    }
+}

app/Http/Controllers/TeamTaskController.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Team;
+use App\Repositories\TaskRepository;
+
+class TeamTaskController extends Controller
+{
+    public function index(Team $team, TaskRepository $taskRepository)
+    {
+        $tasks = $taskRepository->getAllTaskWithAssignee('team', $team->id);
+
+        return response()->json([
+            'status'  => 'success',
+            'tasks'   => $tasks,
+        ]);
+    }
+}

resources/assets/js/components/forms/createTaskForm.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="">
-        <notification-popup :message="message" @close="closeNotification" :show-notification="showNotification"></notification-popup>
+        <notification-popup :messageType="messageType" :message="message" @close="closeNotification" :show-notification="showNotification"></notification-popup>
 
         <!-- Create Task Form -->
         <div :class="{'hidden': !formShown}" class="absolute container mx-auto w-1/3 bg-white rounded shadow-lg z-10" style="top: 12vh;left: 0;right: 0;">
@@ -51,13 +51,14 @@ import Datepicker from 'vuejs-datepicker'
 import NotificationPopup from '../partials/notificationPopup.vue'
 export default {
   components: {Datepicker, NotificationPopup},
-  props: ['project', 'formShown'],
+  props: ['resource', 'resourceType', 'formShown'],
   data: () => ({
     title: '',
     notes: '',
     assigned_to: null,
     related_to: '',
     message: '',
+    messageType: '',
     showNotification: false
   }),
   methods: {
@@ -68,12 +69,13 @@ export default {
         assigned_to: this.assigned_to,
         related_to: this.related_to,
         due_on: this.$refs.dueOnDate.formattedValue,
-        taskable_id: this.project.id,
-        taskable_type: 'project'
+        taskable_id: this.resource.id,
+        taskable_type: this.resourceType
       })
         .then((response) => {
           if (response.data.status == 'success') {
             this.message = 'New Task Created'
+            this.messageType = 'success'
             this.showNotification = true
             this.title = ''
             this.notes = ''

resources/assets/js/components/offices/single.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="container mx-auto w-3/5 mt-6">
+  <div class="container mx-auto px-4 my-6 w-full md:w-md lg:w-lg xl:w-xl xxl:w-2xl">
+    <notification-popup :messageType="messageType" :message="message" @close="closeNotification" :show-notification="showNotification"></notification-popup>
     <div class="text-center text-grey-dark font-semibold text-xl mb-4">
       {{office.name}}
       <p class="text-base pt-2">December 5, 2017 - December 13, 2017</p>
     </div>
 
     <!-- Add Member Form -->
-    <addMemberForm v-if="addMemberFormShown" @close="closeAddMemberForm" :office="office" @addMember="addMember"></addMemberForm>
+    <addMemberForm v-if="addMemberFormShown" @close="closeAddMemberForm" resourceType="office" :resource="office" @addMember="addMember"></addMemberForm>
 
     <div class="h-16 flex flex-row justify-center items-center px-2">
       <span @click="showAddMemberForm" class="bg-white shadow w-8 h-8 rounded-full text-teal hover:cursor-pointer text-center p-2">
@@ -46,7 +47,8 @@
     </div>
 
     <div class="flex flex-row flex-wrap justify-center">
-      <discussionBoard resourceType="offices" :resource="office" :activeTab="active"></discussionBoard>
+      <taskBoard resourceType="office" :resource="office"  :activeTab="active"></taskBoard>
+      <discussionBoard resourceType="office" :resource="office" :activeTab="active"></discussionBoard>
       <!-- <taskBoard resourceType="projects" :resource="project"></taskBoard>
       <messagesBoard resourceType="projects" :resource="project"></messagesBoard>
       <schedule resourceType="projects" :resource="project"></schedule>
@@ -64,15 +66,19 @@ import schedule from './../partials/schedule.vue'
 import files from './../partials/files.vue'
 import activity from './../partials/activity.vue'
 import addMemberForm from './../partials/addMemberForm.vue'
+import notificationPopup from '../partials/notificationPopup.vue'
 
 export default {
   components: {
-    taskBoard, discussionBoard, messagesBoard, schedule, files, activity, addMemberForm
+    taskBoard, discussionBoard, messagesBoard, schedule, files, activity, addMemberForm, notificationPopup
   },
   props: ['office'],
   data: () => ({
     addMemberFormShown: false,
-    active: 'tasks'
+    active: 'tasks',
+    showNotification: false,
+    message: '',
+    messageType: '',
   }),
   methods: {
     showAddMemberForm () {
@@ -81,14 +87,28 @@ export default {
     closeAddMemberForm () {
       this.addMemberFormShown = false
     },
-    addMember (newMember) {
-      this.project.members.push(newMember)
+    addMember (data) {
+      if (data.user) {
+        this.message = data.message
+        this.messageType = 'success'
+        this.office.members.push(data.user)
+      } else {
+        this.messageType = 'error'
+        this.message = data.message
+      }
+      this.showNotification = true
       this.addMemberFormShown = false
+      setTimeout(() => {
+        this.showNotification = false
+      }, 3000)
     },
     activateThisTab (tab) {
       if (tab != this.active) {
         this.active = tab
       }
+    },
+    closeNotification () {
+      this.showNotification = false
     }
   }
 }

resources/assets/js/components/partials/addMemberForm.vue

@@ -33,7 +33,7 @@
 
 <script>
 export default {
-  props: ['project'],
+  props: ['resource', 'resourceType'],
   data: () => ({
     users: [],
     newMember: null,
@@ -51,8 +51,10 @@ export default {
   methods: {
     addMember () {
       this.loading = true
-      axios.post('/projects/' + this.project.slug + '/members', {
-        user_id: this.newMember
+      axios.post( '/members', {
+        user_id: this.newMember,
+        resource_type: this.resourceType,
+        resource_id: this.resource.id
       })
         .then((response) => {
           if (response.data.status == 'success') {

resources/assets/js/components/partials/notificationPopup.vue

@@ -1,12 +1,12 @@
 <template>
-    <div :class="{'hidden': !showNotification}" class="fixed pin-t bg-white text-green text-lg rounded container mx-auto mt-16 w-1/4 py-6 px-8 shadow-lg" style="left: 0; right: 0;">
+    <div :class="[showNotification ? '' : 'hidden', (messageType === 'success') ? 'text-green-light' : 'text-red' ]" class="fixed pin-t bg-white text-lg rounded container mx-auto mt-16 w-1/4 py-6 px-8 shadow-lg" style="left: 0; right: 0;">
         {{message}} <i class="fas fa-times float-right cursor-pointer" @click="closeNotification"></i>
     </div>
 </template>
 
 <script>
 export default {
-  props: ['message', 'showNotification'],
+  props: ['message', 'messageType', 'showNotification'],
   methods: {
     closeNotification () {
       this.$emit('close')

resources/assets/js/components/partials/taskBoard.vue

@@ -1,6 +1,6 @@
 <template>
 <div :class="{'hidden': (activeTab != 'tasks')}" class="w-full">
-  <create-task-form :project="project" :form-shown="createTaskFormShown" @close="closeCreateTaskForm"></create-task-form>
+  <create-task-form :resource="resource" :resourceType="resourceType" :form-shown="createTaskFormShown" @close="closeCreateTaskForm"></create-task-form>
 
   <task-details v-if="task" :task="task" :task-details-shown="taskDetailsShown" @close="closeTaskDetails"></task-details>
 
@@ -13,7 +13,7 @@
       <img v-if="task.assigned_to" :src="task.user.avatar" class="rounded-full w-8 h-8 mx-2 self-start">
       <i v-else class="fas fa-question-circle fa-2x mx-2 self-start text-grey-darker"></i>
       <div class="w-4/5 text-grey-darker text-left pl-2 flex flex-col justify-between h-full">
-        <p class="text-base pb-2">{{task.title}}</p>
+        <p class="text-base mb-2 overflow-hidden">{{task.title}}</p>
         <p class="text-sm text-grey-dark">
           Due by {{task.due_on}}
         </p>
@@ -29,10 +29,14 @@ import taskDetails from './../partials/taskDetails.vue'
 export default {
   components: {createTaskForm, taskDetails},
   props: {
-    project: {
+    resource: {
       required: true,
       type: Object
     },
+    resourceType: {
+      required: true,
+      type: String
+    },
     activeTab: {
       required: true,
       type: String
@@ -45,7 +49,7 @@ export default {
     task: null
   }),
   created: function () {
-    axios.get('/projects/' + this.project.slug + '/tasks')
+    axios.get('/' + this.resourceType + 's/' + this.resource.slug + '/tasks')
       .then((response) => {
         this.tasks = response.data.tasks
       })

resources/assets/js/components/projects/single.vue

@@ -1,22 +1,21 @@
 <template>
   <div class="container mx-auto px-4 my-6 w-full md:w-md lg:w-lg xl:w-xl xxl:w-2xl">
-    <notification-popup :message="message" @close="closeNotification" :show-notification="showNotification"></notification-popup>
+    <notification-popup :messageType="messageType" :message="message" @close="closeNotification" :show-notification="showNotification"></notification-popup>
     <div class="text-center text-grey-dark font-semibold text-xl mb-4">
       {{project.name}}
       <p class="text-sm">December 5, 2017 - December 13, 2017</p>
     </div>
 
     <!-- Add Member Form -->
-    <addMemberForm v-if="addMemberFormShown" @close="closeAddMemberForm" :project="project" @addMember="addMember"></addMemberForm>
+    <addMemberForm v-if="addMemberFormShown" @close="closeAddMemberForm" resourceType="project" :resource="project" @addMember="addMember"></addMemberForm>
 
     <div class="h-16 flex flex-row justify-center items-center px-2">
       <span @click="showAddMemberForm" class="bg-white shadow w-8 h-8 rounded-full text-teal hover:cursor-pointer text-center p-2">
         <i class="fas fa-plus"></i>
       </span>
-      <a v-for="(member, index) in project.members" v-if="index < 5" :href="'/users/' + member.username" class="pl-2">
+      <a v-for="(member, index) in project.members" :href="'/users/' + member.username" class="pl-2">
         <img :src="member.avatar" class="rounded-full w-8 h-8 mr-1">
       </a>
-      <span v-if="project.members.length > 5" class="bg-grey-lighter border-teal border p-2 rounded-full">{{ project.members.length - 5 }}+</span>
     </div>
 
     <div class="flex flex-row justify-around my-6 py-4 bg-white shadow rounded text-grey">
@@ -47,8 +46,8 @@
     </div>
 
     <div class="flex flex-row flex-wrap justify-start">
-      <taskBoard resourceType="projects" :project="project"  :activeTab="active"></taskBoard>
-      <discussionBoard resourceType="projects" :resource="project" :activeTab="active"></discussionBoard>
+      <taskBoard resourceType="project" :resource="project"  :activeTab="active"></taskBoard>
+      <discussionBoard resourceType="project" :resource="project" :activeTab="active"></discussionBoard>
       <!-- <messagesBoard resourceType="projects" :resource="project"></messagesBoard>
       <schedule resourceType="projects" :resource="project"></schedule>
       <files resourceType="projects" :resource="project"></files>
@@ -76,7 +75,8 @@ export default {
     addMemberFormShown: false,
     active: 'tasks',
     showNotification: false,
-    message: ''
+    message: '',
+    messageType: '',
   }),
   methods: {
     showAddMemberForm () {
@@ -88,15 +88,17 @@ export default {
     addMember (data) {
       if (data.user) {
         this.message = data.message
+        this.messageType = 'success'
         this.project.members.push(data.user)
       } else {
+        this.messageType = 'error'
         this.message = data.message
       }
       this.showNotification = true
       this.addMemberFormShown = false
       setTimeout(() => {
         this.showNotification = false
-      }, 2000)
+      }, 3000)
     },
     activateThisTab (tab) {
       if (tab != this.active) {