feat: new employee widget on company tab (#637)

officelifehq · Mar 19, 2021 · 9a08898 · 9a08898
1 parent e737974
commit 9a08898
Show file tree

Hide file tree

Showing 13 changed files with 266 additions and 10 deletions.
diff --git a/app/Http/Controllers/Company/Company/CompanyController.php b/app/Http/Controllers/Company/Company/CompanyController.php
@@ -33,6 +33,7 @@ public function index(): Response
         $latestSkills = CompanyViewHelper::latestSkills($company);
         $latestNews = CompanyViewHelper::latestNews($company);
         $guessEmployeeGameInformation = CompanyViewHelper::guessEmployeeGameInformation($employee, $company);
+        $employees = CompanyViewHelper::employees($company);
 
         return Inertia::render('Company/Index', [
             'tab' => 'company',
@@ -44,6 +45,7 @@ public function index(): Response
             'latestSkills' => $latestSkills,
             'latestNews' => $latestNews,
             'game' => $guessEmployeeGameInformation,
+            'employees' => $employees,
             'notifications' => NotificationHelper::getNotifications(InstanceHelper::getLoggedEmployee()),
         ]);
     }

diff --git a/app/Http/ViewHelpers/Company/CompanyViewHelper.php b/app/Http/ViewHelpers/Company/CompanyViewHelper.php
@@ -7,6 +7,7 @@
 use App\Helpers\DateHelper;
 use Illuminate\Support\Str;
 use App\Helpers\ImageHelper;
+use App\Models\User\Pronoun;
 use App\Helpers\StringHelper;
 use App\Helpers\BirthdayHelper;
 use App\Models\Company\Company;
@@ -71,7 +72,7 @@ public static function latestQuestions(Company $company): array
                     'company' => $company,
                     'question' => $question->id,
                 ]),
-                ];
+            ];
         });
 
         return [
@@ -320,4 +321,85 @@ public static function guessEmployeeGameInformation(Employee $employee, Company
             'choices' => $choices,
         ];
     }
+
+    /**
+     * Information about the employees in the company.
+     *
+     * @param Company $company
+     * @return array
+     */
+    public static function employees(Company $company): array
+    {
+        // number of employees in total
+        $totalNumberOfEmployees = $company->employees()->notLocked()->count();
+
+        // 10 random employees
+        $tenRandomEmployeesCollection = collect([]);
+        $allEmployees = $company->employees()
+            ->notLocked()
+            ->with('picture')
+            ->inRandomOrder()
+            ->take(10)
+            ->get();
+
+        foreach ($allEmployees as $employee) {
+            $tenRandomEmployeesCollection->push([
+                'id' => $employee->id,
+                'name' => $employee->name,
+                'avatar' => ImageHelper::getAvatar($employee, 32),
+                'url' => route('employees.show', [
+                    'company' => $company,
+                    'employee' => $employee,
+                ]),
+            ]);
+        }
+
+        // ten random employees
+
+        // number of employees hired in the current year
+        $employeesHiredInTheCurrentYear = $company->employees()
+            ->notLocked()
+            ->whereYear('hired_at', (string) Carbon::now()->year)
+            ->count();
+
+        return [
+            'employees_hired_in_the_current_year' => $employeesHiredInTheCurrentYear,
+            'ten_random_employees' => $tenRandomEmployeesCollection,
+            'number_of_employees_left' => $totalNumberOfEmployees - $tenRandomEmployeesCollection->count(),
+            'view_all_url' => route('employees.index', [
+                'company' => $company,
+            ]),
+        ];
+    }
+
+    /**
+     * Information about employee's genders in the company.
+     *
+     * @param Company $company
+     * @return array
+     */
+    public static function demography(Company $company): array
+    {
+        $stat = DB::table('employees')
+            ->where('locked', false)
+            ->join('pronouns', 'employees.pronoun_id', '=', 'pronouns.id')
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::HE."' then 1 end) as he")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::SHE."' then 1 end) as she")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::THEY."' then 1 end) as they")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::PER."' then 1 end) as per")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::VE."' then 1 end) as ve")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::XE."' then 1 end) as xe")
+            ->selectRaw("count(case when pronouns.label = '".Pronoun::ZE."' then 1 end) as ze")
+            ->first();
+
+        return [
+            'he' => $stat->he,
+            'she' => $stat->she,
+            'they' => $stat->they,
+            'per' => $stat->per,
+            've' => $stat->ve,
+            'xe' => $stat->xe,
+            'ze' => $stat->ze,
+        ];
+    }
 }
diff --git a/app/Models/User/Pronoun.php b/app/Models/User/Pronoun.php
@@ -14,6 +14,17 @@ class Pronoun extends Model
 
     protected $table = 'pronouns';
 
+    /**
+     * Possible status of a pronoun.
+     */
+    const HE = 'he/him';
+    const SHE = 'she/her';
+    const THEY = 'they/them';
+    const PER = 'per/per';
+    const VE = 've/ver';
+    const XE = 'xe/xem';
+    const ZE = 'ze/hir';
+
     /**
      * The attributes that are mass assignable.
      *

diff --git a/resources/js/Pages/Company/Index.vue b/resources/js/Pages/Company/Index.vue
@@ -48,20 +48,25 @@
 
       <div class="cf mw9 center">
         <div class="fl w-third-l w-100">
+          <employees :employees="employees" :statistics="statistics" />
+
           <company-news :news="latestNews" />
 
           <questions :questions="latestQuestions" />
         </div>
 
         <div class="fl w-third-l w-100 pl4-l">
-          <recent-ships :ships="latestShips" />
+          <birthdays :birthdays="birthdaysThisWeek" />
+
           <recent-skills :skills="latestSkills" />
+
+          <recent-ships :ships="latestShips" />
         </div>
 
         <div class="fl w-third-l w-100 pl4-l">
           <guess-employee-game v-if="game" :game="game" />
 
-          <birthdays :birthdays="birthdaysThisWeek" />
+
 
           <new-hires :hires="newHiresThisWeek" />
         </div>
@@ -80,6 +85,7 @@ import CompanyNews from '@/Pages/Company/Partials/CompanyNews';
 import NewHires from '@/Pages/Company/Partials/NewHires';
 import RecentShips from '@/Pages/Company/Partials/RecentShips';
 import RecentSkills from '@/Pages/Company/Partials/RecentSkills';
+import Employees from '@/Pages/Company/Partials/Employees';
 
 export default {
   components: {
@@ -92,6 +98,7 @@ export default {
     NewHires,
     RecentShips,
     RecentSkills,
+    Employees,
   },
 
   props: {
@@ -135,6 +142,10 @@ export default {
       type: Array,
       default: null,
     },
+    employees: {
+      type: Array,
+      default: null,
+    },
   },
 };
 </script>
diff --git a/resources/js/Pages/Company/Partials/Employees.vue b/resources/js/Pages/Company/Partials/Employees.vue
@@ -0,0 +1,71 @@
+<style lang="scss" scoped>
+.employees {
+  left: 9px;
+}
+
+.small-avatar {
+  margin-left: -8px;
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.more-members {
+  height: 32px;
+  top: 8px;
+}
+</style>
+
+<template>
+  <div class="mb4">
+    <span class="db fw5 mb2 relative">
+      <span class="mr1">
+        😎
+      </span> Our employees
+    </span>
+
+    <div class="br3 bg-white box z-1 relative">
+      <!-- general stats -->
+      <div class="pa3 bb bb-gray">
+        <p>{{ $t('company.employees_total', { count: statistics.number_of_employees }) }}</p>
+
+        <div class="flex items-center relative tr employees">
+          <img v-for="employee in employees.ten_random_employees" :key="employee.id" :src="employee.avatar" alt="avatar" class="br-100 small-avatar pointer"
+               width="32" height="32" @click="navigateTo(employee)"
+          />
+          <div v-if="employees.number_of_employees_left > 0" class="pl2 f7 more-members relative gray">
+            {{ $t('project.menu_other_member', { count: employees.number_of_employees_left }) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- general stats -->
+      <div class="pa3">
+        {{ $t('company.new_hires_total', { count: employees.employees_hired_in_the_current_year }) }}
+      </div>
+
+      <div class="ph3 pv2 tc f6 bt bb-gray">
+        <inertia-link :href="employees.view_all_url">{{ $t('company.employees_view_all') }}</inertia-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    statistics: {
+      type: Object,
+      default: null,
+    },
+    employees: {
+      type: Array,
+      default: null,
+    },
+  },
+
+  methods: {
+    navigateTo(employee) {
+      this.$inertia.visit(employee.url);
+    },
+  },
+};
+</script>
diff --git a/resources/js/Pages/Company/Partials/NewHires.vue b/resources/js/Pages/Company/Partials/NewHires.vue
@@ -37,7 +37,7 @@
           </inertia-link>
 
           <!-- position -->
-          <span v-if="hire.position" class="title db f7 mt1">
+          <span v-if="hire.position" class="title db f7 mt1 lh-copy">
             {{ $t('company.new_hires_date_with_position', { date: hire.hired_at, position: hire.position }) }}
           </span>
           <span v-else class="title db f7 mt1">

diff --git a/resources/js/Pages/Employee/Administration/Index.vue b/resources/js/Pages/Employee/Administration/Index.vue
@@ -13,7 +13,7 @@
       <div class="mt4-l mt1 mw7 br3 center breadcrumb relative z-0 f6 pb2">
         <ul class="list ph0 tc-l tl">
           <li class="di">
-            <inertia-link :href="'/' + $page.props.auth.company.id + '/dashboard'">{{ $t('app.breadcrumb_dashboard') }}</inertia-link>
+            <inertia-link :href="'/' + $page.props.auth.company.id + '/company'">{{ $t('app.breadcrumb_company') }}</inertia-link>
           </li>
           <li class="di">
             <inertia-link :href="'/' + $page.props.auth.company.id + '/employees'">{{ $t('app.breadcrumb_employee_list') }}</inertia-link>

diff --git a/resources/js/Pages/Employee/Index.vue b/resources/js/Pages/Employee/Index.vue
@@ -11,7 +11,7 @@
       <div class="mt4-l mt1 mw6 br3 bg-white box center breadcrumb relative z-0 f6 pb2">
         <ul class="list ph0 tc-l tl">
           <li class="di">
-            <inertia-link :href="'/' + $page.props.auth.company.id + '/dashboard'">{{ $t('app.breadcrumb_dashboard') }}</inertia-link>
+            <inertia-link :href="'/' + $page.props.auth.company.id + '/company'">{{ $t('app.breadcrumb_company') }}</inertia-link>
           </li>
           <li class="di">
             {{ $t('app.breadcrumb_employee_list') }}

diff --git a/resources/js/Pages/Employee/Performance/Index.vue b/resources/js/Pages/Employee/Performance/Index.vue
@@ -22,7 +22,7 @@
       <div class="mt4-l mt1 mw7 br3 center breadcrumb relative z-0 f6 pb2">
         <ul class="list ph0 tc-l tl">
           <li class="di">
-            <inertia-link :href="'/' + $page.props.auth.company.id + '/dashboard'">{{ $t('app.breadcrumb_dashboard') }}</inertia-link>
+            <inertia-link :href="'/' + $page.props.auth.company.id + '/company'">{{ $t('app.breadcrumb_company') }}</inertia-link>
           </li>
           <li class="di">
             <inertia-link :href="'/' + $page.props.auth.company.id + '/employees'">{{ $t('app.breadcrumb_employee_list') }}</inertia-link>

diff --git a/resources/js/Pages/Employee/Show.vue b/resources/js/Pages/Employee/Show.vue
@@ -13,7 +13,7 @@
       <div class="mt4-l mt1 mw7 br3 center breadcrumb relative z-0 f6 pb2">
         <ul class="list ph0 tc-l tl">
           <li class="di">
-            <inertia-link :href="'/' + $page.props.auth.company.id + '/dashboard'">{{ $t('app.breadcrumb_dashboard') }}</inertia-link>
+            <inertia-link :href="'/' + $page.props.auth.company.id + '/company'">{{ $t('app.breadcrumb_company') }}</inertia-link>
           </li>
           <li class="di">
             <inertia-link :href="'/' + $page.props.auth.company.id + '/employees'">{{ $t('app.breadcrumb_employee_list') }}</inertia-link>

diff --git a/resources/js/Pages/Employee/Work/Index.vue b/resources/js/Pages/Employee/Work/Index.vue
@@ -13,7 +13,7 @@
       <div class="mt4-l mt1 mw7 br3 center breadcrumb relative z-0 f6 pb2">
         <ul class="list ph0 tc-l tl">
           <li class="di">
-            <inertia-link :href="'/' + $page.props.auth.company.id + '/dashboard'">{{ $t('app.breadcrumb_dashboard') }}</inertia-link>
+            <inertia-link :href="'/' + $page.props.auth.company.id + '/company'">{{ $t('app.breadcrumb_company') }}</inertia-link>
           </li>
           <li class="di">
             <inertia-link :href="'/' + $page.props.auth.company.id + '/employees'">{{ $t('app.breadcrumb_employee_list') }}</inertia-link>

diff --git a/resources/lang/en/company.php b/resources/lang/en/company.php
@@ -9,6 +9,10 @@
     'subtitle' => 'There is only one step to get started.',
     'next_step_cta' => 'Ok, let’s go',
 
+    'employees_total' => '{count} employees in the company',
+    'new_hires_total' => '{count} new employees hired this year so far',
+    'employees_view_all' => 'View all employees',
+
     'guess_employee_game_title' => 'Who is this person?',
     'guess_employee_game_success' => 'Right answer! It was indeed...',
     'guess_employee_game_failure' => 'Wrong answer! It was...',