refactor: simplify avatar and smallNameAndAvatar components

resources/js/Pages/Adminland/Audit/Index.vue

@@ -46,7 +46,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar v-if="log.author.avatar" :avatar="log.author.avatar" :size="35" :class="'author-avatar br-100'" />
+              <avatar :avatar="log.author.avatar" :url="log.author.url" :name="log.author.name" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">

resources/js/Pages/Adminland/Employee/Partials/EmployeeList.vue

@@ -33,7 +33,7 @@
         v-for="currentEmployee in employees" :key="currentEmployee.id"
         class="flex items-center lh-copy pa3-l pa1 ph0-l bb b--black-10 employee-item"
       >
-        <avatar :avatar="currentEmployee.avatar" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
+        <avatar :avatar="currentEmployee.avatar" :url="currentEmployee.url" :name="currentEmployee.name" :size="64" :class="'w2 h2 w3-ns h3-ns br-100'" />
 
         <div class="pl3 flex-auto">
           <!-- name -->

resources/js/Pages/Adminland/Expense/Partials/Employees.vue

@@ -73,7 +73,7 @@
     <div v-show="localEmployees.length > 0" class="ba bb-gray mt2 br2 employees-list">
       <div v-for="employee in localEmployees" :key="employee.id" class="pa2 db bb-gray bb bb-gray-hover" data-cy="employees-list">
         <span class="pl3 db relative team-member">
-          <avatar :avatar="employee.avatar" :size="23" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="23" :class="'br-100 absolute avatar'" />
 
           <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>
 

resources/js/Pages/Adminland/General/Partials/Stat.vue

@@ -23,8 +23,9 @@
         <ul class="dib list pl0">
           <li v-for="admin in information.administrators" :key="admin.id" class="db pb2 admin">
             <small-name-and-avatar
-              :name="admin.name"
               :avatar="admin.avatar"
+              :url="admin.url"
+              :name="admin.name"
               :class="'f4 fw4'"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"

resources/js/Pages/Adminland/Hardware/Index.vue

@@ -130,8 +130,9 @@
                   <li class="mr3 di-ns db mb0-ns mb2" :data-cy="'hardware-item-user-' + item.id">
                     <small-name-and-avatar
                       v-if="item.employee"
-                      :name="item.employee.name"
                       :avatar="item.employee.avatar"
+                      :url="item.employee.url"
+                      :name="item.employee.name"
                       :class="'gray'"
                       :size="'18px'"
                       :top="'0px'"

resources/js/Pages/Adminland/Hardware/Show.vue

@@ -55,8 +55,9 @@
           <div class="mr3 db mb3" :data-cy="'hardware-item-lend-' + hardware.id">
             <small-name-and-avatar
               v-if="hardware.employee"
-              :name="hardware.employee.name"
               :avatar="hardware.employee.avatar"
+              :url="hardware.employee.url"
+              :name="hardware.employee.name"
               :top="'0px'"
               :margin-between-name-avatar="'29px'"
             />

resources/js/Pages/Adminland/Team/Logs.vue

@@ -49,7 +49,7 @@
           <ul class="list pl0 mt0 center">
             <li v-for="log in logs" :key="log.id" class="flex items-center lh-copy pa3 bb b--black-10 log-item">
               <!-- avatar -->
-              <avatar v-if="log.author.avatar" :avatar="log.author.avatar" :size="35" :class="'author-avatar br-100'" />
+              <avatar :avatar="log.author.avatar" :url="log.author.url" :name="log.author.name" :size="35" :class="'author-avatar br-100'" />
 
               <div>
                 <div class="db f7 mb2">

resources/js/Pages/Company/Partials/Birthdays.vue

@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="birthdays.length != 0" class="list pl0 ma0">
         <li v-for="birthday in birthdays" :key="birthday.id" class="mb3 pl3 db relative person">
-          <avatar :avatar="birthday.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="birthday.avatar" :url="birthday.url" :name="birthday.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="birthday.url" class="mb2">

resources/js/Pages/Company/Partials/Employees.vue

@@ -28,7 +28,8 @@
         <p>{{ $t('company.employees_total', { count: statistics.number_of_employees }) }}</p>
 
         <div class="flex items-center relative tr employees">
-          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :avatar="employee.avatar" :size="32" :url="employee.url"
+          <avatar v-for="employee in employees.ten_random_employees" :key="employee.id" :avatar="employee.avatar" :url="employee.url" :name="employee.name"
+                  :size="32"
                   :class="'br-100 small-avatar pointer'"
           />
           <div v-if="employees.number_of_employees_left > 0" class="pl2 f7 more-members relative gray">

resources/js/Pages/Company/Partials/NewHires.vue

@@ -29,7 +29,7 @@
     <div class="br3 bg-white box z-1 pa3 relative">
       <ul v-if="hires.length != 0" class="list pl0 ma0">
         <li v-for="hire in hires" :key="hire.id" class="mb3 pl3 db relative person">
-          <avatar :avatar="hire.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="hire.avatar" :url="hire.url" :name="hire.name" :size="35" :class="'br-100 absolute avatar'" />
 
           <!-- normal mode -->
           <inertia-link :href="hire.url" class="mb2">

resources/js/Pages/Company/Partials/Teams.vue

@@ -30,7 +30,8 @@
           <inertia-link :href="team.url" class="ma0">{{ team.name }}</inertia-link>
           <div class="flex items-center">
             <div class="di">
-              <avatar v-for="employee in team.employees" :key="employee.id" :url="employee.url" :avatar="employee.avatar" :size="32"
+              <avatar v-for="employee in team.employees" :key="employee.id" :avatar="employee.avatar" :url="employee.url" :name="employee.name"
+                      :size="32"
                       :class="'br-100 small-avatar pointer'"
               />
             </div>

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

@@ -136,7 +136,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">
-                <avatar :avatar="form.projectLead.avatar" :size="23" :class="'br-100 absolute avatar'" />
+                <avatar :avatar="form.projectLead.avatar" :url="form.projectLead.url" :name="form.projectLead.name" :size="23" :class="'br-100 absolute avatar'" />
 
                 {{ form.projectLead.name }}
 

resources/js/Pages/Company/Project/Decisions/Index.vue

@@ -139,7 +139,7 @@
             <div v-show="form.employees.length > 0" class="ba bb-gray mb3 mt4">
               <div v-for="employee in form.employees" :key="employee.id" class="pa2 db bb-gray bb" data-cy="members-list">
                 <span class="pl3 db relative deciders">
-                  <avatar :avatar="employee.avatar" :size="22" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="22" :class="'br-100 absolute avatar'" />
 
                   {{ employee.name }}
 
@@ -186,8 +186,9 @@
                   <ul class="list pl0">
                     <li v-for="decider in decision.deciders" :key="decider.id" class="di mr2">
                       <small-name-and-avatar
-                        :name="decider.name"
                         :avatar="decider.avatar"
+                        :url="decider.url"
+                        :name="decider.name"
                         :class="'f4 fw4'"
                         :top="'0px'"
                         :margin-between-name-avatar="'29px'"

resources/js/Pages/Company/Project/Files/Index.vue

@@ -85,8 +85,9 @@
                 <span>
                   <small-name-and-avatar
                     v-if="file.uploader.name"
-                    :name="file.uploader.name"
                     :avatar="file.uploader.avatar"
+                    :url="file.uploader.url"
+                    :name="file.uploader.name"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'0px'"

resources/js/Pages/Company/Project/Members/Index.vue

@@ -171,7 +171,7 @@
                 <li v-for="member in localMembers" :key="member.id" :data-cy="'member-' + member.id" class="pa3 bb bb-gray flex items-center">
                   <!-- avatar -->
                   <div class="mr3">
-                    <avatar :avatar="member.avatar" :size="64" :class="'br-100'" />
+                    <avatar :avatar="member.avatar" :url="member.url" :name="member.name" :size="64" :class="'br-100'" />
                   </div>
 
                   <!-- name + information -->

resources/js/Pages/Company/Project/Messages/Index.vue

@@ -74,8 +74,9 @@
 
               <div v-if="message.author" class="author tr">
                 <small-name-and-avatar
-                  :name="message.author.name"
                   :avatar="message.author.avatar"
+                  :url="message.author.url"
+                  :name="message.author.name"
                   :class="'f4 fw4'"
                   :top="'0px'"
                   :margin-between-name-avatar="'29px'"

resources/js/Pages/Company/Project/Messages/Show.vue

@@ -76,7 +76,7 @@
 
           <div v-if="message.author" class="flex mb4">
             <div class="mr3">
-              <avatar :avatar="message.author.avatar" :size="64" :class="'br-100'" />
+              <avatar :avatar="message.author.avatar" :url="message.author.url" :name="message.author.name" :size="64" :class="'br-100'" />
             </div>
 
             <div>

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

@@ -34,7 +34,7 @@
     <template v-if="localProject.project_lead">
       <div class="lh-copy ma0">
         <span class="db project-lead relative">
-          <avatar :avatar="localProject.project_lead.avatar" :size="35" :class="'br-100 absolute avatar'" />
+          <avatar :avatar="localProject.project_lead.avatar" :url="localProject.project_lead.url" :name="localProject.project_lead.name" :size="35" :class="'br-100 absolute avatar'" />
           <inertia-link :href="'/' + $page.props.auth.company.id + '/employees/' + localProject.project_lead.id" class="mb2" data-cy="current-project-lead">
             {{ localProject.project_lead.name }}
           </inertia-link>

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

@@ -35,7 +35,9 @@
       <div v-if="project.members.length > 0">
         <p class="mt0 mb2 f7 gray">{{ $t('project.menu_members_icons') }}</p>
         <div class="flex items-center relative tr">
-          <avatar v-for="member in project.members" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+          <avatar v-for="member in project.members" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                  :size="32" :class="'br-100 small-avatar'"
+          />
           <div v-if="project.other_members_counter > 0" class="pl2 f7 more-members relative gray">
             {{ $t('project.menu_other_member', { count: project.other_members_counter }) }}
           </div>

resources/js/Pages/Company/Project/Tasks/Partials/ProjectTaskCheckbox.vue

@@ -105,8 +105,9 @@ input[type=checkbox] {
 
           <small-name-and-avatar
             v-if="assignee"
-            :name="assignee.name"
             :avatar="assignee.avatar"
+            :url="assignee.url"
+            :name="assignee.name"
             :class="'gray'"
             :size="'15px'"
             :font-size="'f7'"

resources/js/Pages/Company/Project/Tasks/Show.vue

@@ -233,7 +233,7 @@ input[type=checkbox] {
           <!-- information about the author -->
           <div v-if="localTask.author" class="flex mb4">
             <div class="mr2">
-              <avatar :avatar="localTask.author.avatar" :size="35" :class="'br-100'" />
+              <avatar :avatar="localTask.author.avatar" :url="localTask.author.url" :name="localTask.author.name" :size="35" :class="'br-100'" />
             </div>
 
             <div>

resources/js/Pages/Company/Question/Show.vue

@@ -53,9 +53,9 @@
 
           <div v-for="answer in answers" :key="answer.id" class="bb-gray relative answer-entry" :data-cy="'answer-content-' + answer.id">
             <!-- avatar -->
-            <small-name-and-avatar
-              :name="answer.employee.name"
-              :avatar="answer.employee.avatar"
+            <small-name-and-avatar :avatar="answer.employee.avatar"
+                                   :url="answer.employee.url"
+                                   :name="answer.employee.name"
             />
 
             <!-- content of the answer -->

resources/js/Pages/Company/Skill/Show.vue

@@ -115,7 +115,7 @@
         <!-- list of employees with this skill -->
         <ul class="list pl0 mb0" data-cy="list-of-employees">
           <li v-for="employee in employees" :key="employee.id" :data-cy="'employee-' + employee.id" class="relative ba bb-gray bb-gray-hover pa3 br3 flex items-center employee">
-            <avatar :avatar="employee.avatar" :size="64" :class="'avatar br-100'" />
+            <avatar :avatar="employee.avatar" :url="employee.url" :name="employee.name" :size="64" :class="'avatar br-100'" />
 
             <div class="ml3 mw-100">
               <inertia-link :href="employee.url">{{ employee.name }}</inertia-link>

resources/js/Pages/Dashboard/Expenses/Approve.vue

@@ -128,8 +128,7 @@
               <span>
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :font-size="'f5'"
                   :size="'18px'"
                   :top="'0px'"
@@ -165,8 +164,9 @@
               <span>
                 <small-name-and-avatar
                   v-if="expense.manager.id"
-                  :name="expense.manager.name"
                   :avatar="expense.manager.avatar"
+                  :url="expense.manager.url"
+                  :name="expense.manager.name"
                   :class="'gray'"
                   :font-size="'f5'"
                   :size="'18px'"

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

@@ -63,8 +63,7 @@
               <div class="mb3">
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :class="'gray'"
                   :size="'18px'"
                   :top="'0px'"
@@ -120,8 +119,7 @@
                 <p class="ma0 mb2 f6 gray">{{ $t('dashboard.accounting_expense_managers_submitted_by') }}</p>
                 <small-name-and-avatar
                   v-if="expense.employee.id"
-                  :name="expense.employee.name"
-                  :avatar="expense.employee.avatar"
+                  :member="expense.employee"
                   :size="'18px'"
                   :top="'1px'"
                   :margin-between-name-avatar="'25px'"
@@ -135,8 +133,7 @@
                 <small-name-and-avatar
                   v-for="manager in expense.managers"
                   :key="manager.id"
-                  :name="manager.name"
-                  :avatar="manager.avatar"
+                  :member="manager"
                   :class="'mr2'"
                   :size="'18px'"
                   :top="'1px'"
@@ -208,8 +205,9 @@
                 <div class="dtc-ns db mb3 mb0-ns">
                   <small-name-and-avatar
                     v-if="expense.employee.id"
-                    :name="expense.employee.name"
                     :avatar="expense.employee.avatar"
+                    :url="expense.employee.url"
+                    :name="expense.employee.name"
                     :class="'gray'"
                     :size="'18px'"
                     :top="'1px'"

resources/js/Pages/Dashboard/HR/Partials/Timesheets.vue

@@ -56,7 +56,9 @@
           <!-- avatars -->
           <div v-if="data.number_of_timesheets > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in data.employees" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in data.employees" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                      :size="32" :class="'br-100 small-avatar'"
+              />
             </div>
           </div>
         </div>

resources/js/Pages/Dashboard/HR/Timesheets/Index.vue

@@ -78,7 +78,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="directReport.avatar" :size="64" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="64" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}

resources/js/Pages/Dashboard/Manager/ApproveExpense.vue

@@ -123,9 +123,9 @@
               <span class="di-ns db mb0-ns mb2 gray">{{ $t('dashboard.manager_expense_detail_employee_section') }}</span>
               <span>
                 <small-name-and-avatar
-                  v-if="expense.employee.id"
-                  :name="expense.employee.name"
                   :avatar="expense.employee.avatar"
+                  :url="expense.employee.url"
+                  :name="expense.employee.name"
                   :font-size="'f5'"
                   :size="'18px'"
                   :top="'0px'"

resources/js/Pages/Dashboard/Manager/Partials/ContractRenewal.vue

@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}

resources/js/Pages/Dashboard/Manager/Partials/Expense.vue

@@ -55,8 +55,9 @@
             <div class="mb3">
               <small-name-and-avatar
                 v-if="expense.employee.id"
-                :name="expense.employee.name"
                 :avatar="expense.employee.avatar"
+                :url="expense.employee.url"
+                :name="expense.employee.name"
                 :class="'gray'"
                 :size="'18px'"
                 :top="'0px'"

resources/js/Pages/Dashboard/Manager/Partials/OneOnOneWithDirectReport.vue

@@ -48,7 +48,7 @@
           <!-- identity -->
           <div>
             <span class="pl3 db relative team-member">
-              <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+              <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
               <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
               <span class="title db f7 mt1">
                 {{ directReport.position }}

resources/js/Pages/Dashboard/Manager/Partials/TimesheetApprovals.vue

@@ -46,7 +46,9 @@
           <!-- avatars -->
           <div v-if="timesheetsStats.employees.length > 0" class="pl6-ns pl3 mb3">
             <div class="flex items-center relative tr all-avatars">
-              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :avatar="member.avatar" :size="32" :class="'br-100 small-avatar'" />
+              <avatar v-for="member in timesheetsStats.employees" :key="member.id" :avatar="member.avatar" :url="member.url" :name="member.name"
+                      :size="32" :class="'br-100 small-avatar'"
+              />
             </div>
           </div>
         </div>

resources/js/Pages/Dashboard/Manager/Timesheets/Index.vue

@@ -79,7 +79,7 @@
               <!-- identity -->
               <div class="mb3">
                 <span class="pl3 db relative team-member">
-                  <avatar :avatar="directReport.avatar" :size="35" :class="'br-100 absolute avatar'" />
+                  <avatar :avatar="directReport.avatar" :url="directReport.url" :name="directReport.name" :size="35" :class="'br-100 absolute avatar'" />
                   <inertia-link :href="directReport.url" class="mb2">{{ directReport.name }}</inertia-link>
                   <span class="title db f7 mt1">
                     {{ directReport.position }}