feat: better layout for the Company settings page (#633)

app/Http/ViewHelpers/Adminland/AdminGeneralViewHelper.php

@@ -34,7 +34,7 @@ public static function information($company): ?array
             $administratorsCollection->push([
                 'id' => $employee->id,
                 'name' => $employee->name,
-                'avatar' => AvatarHelper::getImage($employee),
+                'avatar' => AvatarHelper::getImage($employee, 22),
                 'url_view' => route('employees.show', [
                     'company' => $company,
                     'employee' => $employee,

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

@@ -26,6 +26,11 @@
             {{ $t('account.general_title') }}
           </h2>
 
+          <!-- stats -->
+          <stat
+            :information="information"
+          />
+
           <!-- company name -->
           <name
             :information="information"
@@ -46,12 +51,14 @@
 import Layout from '@/Shared/Layout';
 import Name from '@/Pages/Adminland/General/Partials/Name';
 import Currency from '@/Pages/Adminland/General/Partials/Currency';
+import Stat from '@/Pages/Adminland/General/Partials/Stat';
 
 export default {
   components: {
     Layout,
     Name,
     Currency,
+    Stat
   },
 
   props: {

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

@@ -10,40 +10,12 @@
 
 <template>
   <div class="bb bb-gray">
-    <h3 class="ph3 fw5">
-      {{ $t('account.general_information') }}
-
-      <help :url="$page.props.help_links.account_general_company_name" :datacy="'help-icon-general'" :top="'2px'" />
-    </h3>
-
     <!-- information about the company -->
     <ul v-if="!editMode" class="list ph3">
       <li class="mb3 flex-ns items-start">
         <span class="dib-ns db title mb0-ns mb2">{{ $t('account.general_name') }}</span>
         <span class="fw6" data-cy="company-name">{{ updatedName }}</span>
       </li>
-      <li class="mb3 flex-ns items-start">
-        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_administrators') }}</span>
-        <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"
-              :classes="'f4 fw4'"
-              :top="'0px'"
-              :margin-between-name-avatar="'29px'"
-            />
-          </li>
-        </ul>
-      </li>
-      <li class="mb4">
-        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_creation_date') }}</span>
-        <span class="fw6">{{ information.creation_date }}</span>
-      </li>
-      <li class="mb4">
-        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_creation_size') }}</span>
-        <span class="fw6">{{ $t('account.general_creation_size_kb', { size: information.total_size }) }}</span>
-      </li>
     </ul>
 
     <div v-if="!editMode" class="ph3 mb3">
@@ -97,16 +69,12 @@
 import Errors from '@/Shared/Errors';
 import LoadingButton from '@/Shared/LoadingButton';
 import TextInput from '@/Shared/TextInput';
-import SmallNameAndAvatar from '@/Shared/SmallNameAndAvatar';
-import Help from '@/Shared/Help';
 
 export default {
   components: {
     Errors,
-    Help,
     LoadingButton,
     TextInput,
-    SmallNameAndAvatar,
   },
 
   props: {

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

@@ -0,0 +1,64 @@
+<style lang="scss" scoped>
+.title {
+  min-width: 240px;
+}
+
+.admin:not(:last-child) {
+  margin-bottom: 0;
+}
+</style>
+
+<template>
+  <div class="bb bb-gray">
+    <h3 class="ph3 fw5">
+      {{ $t('account.general_information') }}
+
+      <help :url="$page.props.help_links.account_general_company_name" :datacy="'help-icon-general'" :top="'2px'" />
+    </h3>
+
+    <!-- information about the company -->
+    <ul class="list ph3">
+      <li class="mb3 flex-ns items-start">
+        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_administrators') }}</span>
+        <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"
+              :classes="'f4 fw4'"
+              :top="'0px'"
+              :margin-between-name-avatar="'29px'"
+            />
+          </li>
+        </ul>
+      </li>
+      <li class="mb3">
+        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_creation_date') }}</span>
+        <span class="fw6">{{ information.creation_date }}</span>
+      </li>
+      <li class="mb4">
+        <span class="dib-ns db mb0-ns mb2 title">{{ $t('account.general_creation_size') }}</span>
+        <span class="fw6">{{ $t('account.general_creation_size_kb', { size: information.total_size }) }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import Help from '@/Shared/Help';
+import SmallNameAndAvatar from '@/Shared/SmallNameAndAvatar';
+
+export default {
+  components: {
+    Help,
+    SmallNameAndAvatar
+  },
+
+  props: {
+    information: {
+      type: Object,
+      default: null,
+    },
+  },
+};
+</script>