feat: display projects of employees on summary page (#668)

app/Http/Controllers/Company/Dashboard/DashboardMeController.php

@@ -64,6 +64,7 @@ public function index(): Response
             'contractRenewal' => DashboardMeViewHelper::contractRenewal($employee),
             'defaultCurrency' => $defaultCompanyCurrency,
             'eCoffee' => DashboardMeViewHelper::eCoffee($employee, $company),
+            'projects' => DashboardMeViewHelper::projects($employee, $company),
         ]);
     }
 }

app/Http/ViewHelpers/Company/Project/ProjectViewHelper.php

@@ -235,6 +235,7 @@ public static function searchProjectLead(Company $company, string $criteria): Co
             $employeesCollection->push([
                 'id' => $employee->id,
                 'name' => $employee->name,
+                'avatar' => ImageHelper::getAvatar($employee, 23),
             ]);
         }
 

app/Http/ViewHelpers/Dashboard/DashboardMeViewHelper.php

@@ -10,6 +10,7 @@
 use App\Models\Company\Company;
 use App\Models\Company\ECoffee;
 use App\Models\Company\Expense;
+use App\Models\Company\Project;
 use App\Models\Company\Employee;
 use Illuminate\Support\Collection;
 use Money\Currencies\ISOCurrencies;
@@ -365,4 +366,57 @@ public static function eCoffee(Employee $employee, Company $company): ?array
             ],
         ];
     }
+
+    /**
+     * Get the projects the employee participates in.
+     *
+     * @param Employee $employee
+     * @param Company $company
+     * @return Collection|null
+     */
+    public static function projects(Employee $employee, Company $company): ?Collection
+    {
+        $openProjects = $employee->projects()
+            ->where('status', Project::STARTED)
+            ->orWhere('status', Project::PAUSED)
+            ->with('employees')
+            ->get();
+
+        $projectsCollection = collect([]);
+        foreach ($openProjects as $project) {
+            $members = $project->employees()
+                ->inRandomOrder()
+                ->take(3)
+                ->get();
+
+            $totalMembersCount = $project->employees()->count();
+            $totalMembersCount = $totalMembersCount - $members->count();
+
+            $membersCollection = collect([]);
+            foreach ($members as $member) {
+                $membersCollection->push([
+                    'id' => $member->id,
+                    'avatar' => ImageHelper::getAvatar($member, 32),
+                    'url' => route('employees.show', [
+                        'company' => $company,
+                        'employee' => $member,
+                    ]),
+                ]);
+            }
+
+            $projectsCollection->push([
+                'id' => $project->id,
+                'name' => $project->name,
+                'code' => $project->code,
+                'url' => route('projects.show', [
+                    'company' => $company,
+                    'project' => $project,
+                ]),
+                'preview_members' => $membersCollection,
+                'remaining_members_count' => $totalMembersCount,
+            ]);
+        }
+
+        return $projectsCollection;
+    }
 }

resources/js/Pages/Company/Project/Create.vue

@@ -133,7 +133,7 @@
             <div v-if="form.projectLead" class="mb3 mt2 bt bb-gray pt3">
               <p class="mt0 db fw4 lh-copy f6 mb1">Lead by</p>
               <span class="ba bb-gray br3 pa2 pl3 db relative team-member">
-                <img loading="lazy" :src="form.projectLead.avatar" class="br-100 absolute avatar" alt="avatar" />
+                <avatar :avatar="form.projectLead.avatar" :size="23" :classes="'br-100 absolute avatar'" />
 
                 {{ form.projectLead.name }}
 
@@ -168,13 +168,15 @@ import TextArea from '@/Shared/TextArea';
 import Errors from '@/Shared/Errors';
 import LoadingButton from '@/Shared/LoadingButton';
 import Layout from '@/Shared/Layout';
+import Avatar from '@/Shared/Avatar';
 import 'vue-loaders/dist/vue-loaders.css';
 import BallPulseLoader from 'vue-loaders/dist/loaders/ball-pulse';
 import Help from '@/Shared/Help';
 
 export default {
   components: {
     Layout,
+    Avatar,
     TextInput,
     TextArea,
     Errors,

resources/js/Pages/Company/Project/Partials/ProjectMenu.vue

@@ -11,7 +11,7 @@
 
 .project-code {
   padding-bottom: 2px;
-  top: -2px;
+  top: -4px;
   color: #737e91;
   border: 1px solid #b3d4ff;
 }
@@ -24,7 +24,7 @@
       <div class="pl3">
         <h2 :class="project.summary ? 'mb2': 'mb0'" class="mt0 relative fw4" data-cy="project-name">
           {{ project.name }}
-          <span v-if="project.code" class="ml2 ttu f7 project-code code br3 pa1 relative fw4">
+          <span v-if="project.code" class="ml1 ttu f7 project-code code br3 pv1 ph2 relative fw4">
             {{ project.code }}
           </span>
         </h2>

resources/js/Pages/Dashboard/Me/Index.vue

@@ -10,6 +10,11 @@
     <div class="ph2 ph0-ns">
       <dashboard-menu :employee="employee" />
 
+      <projects
+        v-if="projects.length > 0"
+        :projects="projects"
+      />
+
       <e-coffee
         v-if="eCoffee"
         :employee="employee"
@@ -103,6 +108,7 @@ import ContractRenewalDate from '@/Pages/Dashboard/Me/Partials/ContractRenewalDa
 import Layout from '@/Shared/Layout';
 import DashboardMenu from '@/Pages/Dashboard/Partials/DashboardMenu';
 import ECoffee from '@/Pages/Dashboard/Me/Partials/ECoffee';
+import Projects from '@/Pages/Dashboard/Me/Partials/Projects';
 
 export default {
   components: {
@@ -118,6 +124,7 @@ export default {
     ContractRenewalDate,
     DashboardMenu,
     ECoffee,
+    Projects,
   },
 
   props: {
@@ -177,6 +184,10 @@ export default {
       type: Object,
       default: null,
     },
+    projects: {
+      type: Object,
+      default: null,
+    },
   },
 };
 </script>

resources/js/Pages/Dashboard/Me/Partials/Projects.vue

@@ -0,0 +1,100 @@
+<style lang="scss" scoped>
+.small-avatar:not(:first-child) {
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.more-members {
+  height: 32px;
+  top: 8px;
+}
+
+.project-code {
+  color: #737e91;
+  padding-bottom: 0;
+  border: 1px solid #b3d4ff;
+}
+
+.project-list:last-child {
+  border-bottom: 0;
+}
+</style>
+
+<template>
+  <div class="mb5">
+    <div class="cf mw7 center mb2 fw5">
+      <span class="mr1">
+        🦺
+      </span> {{ $t('dashboard.project_title') }}
+    </div>
+
+    <div class="cf mw7 center br3 mb3 bg-white box">
+      <div v-for="project in projects" :key="project.id" class="project-list pa3 bb bb-gray flex justify-between items-center">
+        <!-- project name -->
+        <div class="flex items-center">
+          <inertia-link :href="project.url">{{ project.name }}</inertia-link>
+          <span v-if="project.code" class="ml2 ttu f7 project-code code br3 pv1 ph2 relative fw4">
+            {{ project.code }}
+          </span>
+        </div>
+
+        <!-- project members -->
+        <div class="flex items-center relative tr">
+          <avatar v-for="member in project.preview_members" :key="member.id" :avatar="member.avatar" :url="member.url" :size="32"
+                  :classes="'br-100 small-avatar'"
+          />
+          <div v-if="project.remaining_members_count > 0" class="pl2 f7 more-members relative gray">
+            + {{ project.remaining_members_count }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Avatar from '@/Shared/Avatar';
+
+export default {
+  components: {
+    Avatar,
+  },
+
+  props: {
+    projects: {
+      type: Object,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      showEditor: false,
+      form: {
+        emotion: null,
+      },
+      updatedEmployee: null,
+      successMessage: false,
+    };
+  },
+
+  created: function() {
+    this.updatedEmployee = this.employee;
+  },
+
+  methods: {
+    store(emotion) {
+      this.successMessage = true;
+      this.form.emotion = emotion;
+
+      axios.post('/' + this.$page.props.auth.company.id + '/dashboard/morale', this.form)
+        .then(response => {
+          this.updatedEmployee.has_logged_morale_today = true;
+        })
+        .catch(error => {
+          this.successMessage = false;
+        });
+    },
+  }
+};
+</script>

resources/lang/en/dashboard.php

@@ -7,7 +7,7 @@
     'tab_manager' => 'Manager area',
     'tab_hr' => 'HR area',
 
-    'dstate' => 'You are not associated with a team at the moment.',
+    'blank_state' => 'You are not associated with a team at the moment.',
 
     'morale_title' => 'How do you feel?',
     'morale_success_message' => 'Thanks for telling us how you feel.',
@@ -239,4 +239,6 @@
     'e_coffee_match_cta' => 'Mark as happened',
     'e_coffee_match_happened_title' => 'Thanks for talking to {name} this week.',
     'e_coffee_match_happened_desc' => 'See you next week for a new match!',
+
+    'project_title' => 'Active projects you are part of',
 ];

tests/Unit/ViewHelpers/Company/Project/ProjectViewHelperTest.php

@@ -295,6 +295,7 @@ public function it_searches_employees_to_assign_a_project_lead(): void
                 0 => [
                     'id' => $michael->id,
                     'name' => $michael->name,
+                    'avatar' => ImageHelper::getAvatar($michael, 23),
                 ],
             ],
             $collection->toArray()
@@ -307,6 +308,7 @@ public function it_searches_employees_to_assign_a_project_lead(): void
                 0 => [
                     'id' => $dwight->id,
                     'name' => $dwight->name,
+                    'avatar' => ImageHelper::getAvatar($dwight, 23),
                 ],
             ],
             $collection->toArray()

tests/Unit/ViewHelpers/Dashboard/DashboardMeViewHelperTest.php

@@ -9,6 +9,7 @@
 use App\Models\Company\Answer;
 use App\Models\Company\ECoffee;
 use App\Models\Company\Expense;
+use App\Models\Company\Project;
 use App\Models\Company\Employee;
 use App\Models\Company\Question;
 use App\Models\Company\ECoffeeMatch;
@@ -425,4 +426,38 @@ public function it_returns_null_if_there_is_no_valid_ecoffee_session_right_now()
 
         $this->assertNull(DashboardMeViewHelper::eCoffee($michael, $company));
     }
+
+    /** @test */
+    public function it_returns_a_list_of_projects(): void
+    {
+        $michael = $this->createAdministrator();
+        $dwight = $this->createAnotherEmployee($michael);
+        $jim = $this->createAnotherEmployee($michael);
+        $jan = $this->createAnotherEmployee($michael);
+
+        // projects
+        $projectStarted = Project::factory()->create([
+            'company_id' => $michael->company_id,
+            'status' => Project::STARTED,
+        ]);
+        $projectClosed = Project::factory()->create([
+            'company_id' => $michael->company_id,
+            'status' => Project::CLOSED,
+        ]);
+
+        $projectStarted->employees()->syncWithoutDetaching([$michael->id, $dwight->id, $jim->id, $jan->id]);
+        $projectClosed->employees()->syncWithoutDetaching([$michael->id]);
+
+        $collection = DashboardMeViewHelper::projects($michael, $michael->company);
+
+        $this->assertEquals(
+            1,
+            $collection->count()
+        );
+
+        $this->assertEquals(
+            3,
+            $collection->toArray()[0]['preview_members']->count()
+        );
+    }
 }