Refactor code to use optional chaining for accessing nested properties

Author: tacxou

src/components/2pan/index.vue

@@ -4,7 +4,7 @@ q-splitter(
   separator-style="width: 8px"
   background-color="primary"
   class="full-height"
-  :limits="!isSimple ? [20,80] : [0,100]"
+  :limits="!isSimple ? [30,70] : [0,100]"
   :horizontal='isSimple'
   :style='{ "padding": isSimple ? "6px 0" : "0" }'
 )
@@ -19,7 +19,7 @@ q-splitter(
         :visible-columns="visibleColumnsInternal"
         :row-key="rowKey"
         @request="onRequest($event, props.total)"
-        :rows-per-page-options="[6, 12, 18]"
+        :rows-per-page-options="[12, 16, 20]"
         :columns="cols"
         :loading="pending"
         rows-per-page-label="Lignes par page"
@@ -28,7 +28,7 @@ q-splitter(
         no-results-label="Aucun résultat"
         :pagination-label="(firstRowIndex, endRowIndex, totalRowsNumber) => `${firstRowIndex}-${endRowIndex} sur ${totalRowsNumber} lignes`"
         :selected-rows-label="(numberOfRows) => `${numberOfRows} entrée(s) sélectionnée(s)`"
-        flat
+        flat dense
       )
         template(v-for="(_, name) in $slots" v-slot:[name]="slotData")
           slot(:name="name" v-bind="slotData")
@@ -151,11 +151,11 @@ const props = defineProps({
   },
   refresh: {
     type: Function,
-    default: () => {},
+    default: () => { },
   },
   total: {
     type: Number,
-    default: 10,
+    default: 16,
   },
   defaultRightPanel: {
     type: Boolean,
@@ -206,8 +206,8 @@ const props = defineProps({
         return row
       },
 
-      cancel: async () => {},
-      onMounted: async () => {},
+      cancel: async () => { },
+      onMounted: async () => { },
     },
   },
 })
@@ -218,7 +218,7 @@ const isSimple = computed(() => {
   return simple.value
 })
 watch(simple, (v) => {
-  splitterModel.value = v ? 100 : 50
+  splitterModel.value = v ? 100 : 75
 })
 const splitterModel = ref(isSimple.value ? 100 : 50)
 

src/components/appbar/RightButtons.vue

@@ -2,7 +2,7 @@
 div
   //q-btn(v-for="button in buttons" :key="button.icon" round flat :icon="button.icon" size="md").q-mx-sm
     q-tooltip.text-body2(transition-show="scale" transition-hide="scale") {{ button.name }}
-  q-btn(icon="mdi-sync" square color="amber-9" size="md" :label="badgesValues.TO_SYNC +' items à Synchroniser'" @click="syncAll")
+  q-btn(v-if="badgesValues.TO_SYNC > 0" icon="mdi-sync" square color="amber-9" size="md" :label="badgesValues.TO_SYNC +' items à Synchroniser'" @click="syncAll")
   q-btn-dropdown(icon="mdi-account-circle-outline" :label="auth?.user?.displayName" round flat size="md")
     q-list
       q-item.q-pa-none(v-for="button in buttons" :key="button.name")

src/composables/useMenu.ts

@@ -41,39 +41,39 @@ function useMenu(identityStateStore, identityAffectationStore) {
     {
       icon: 'mdi-account-check',
       label: 'A valider',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_VALIDATE}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.TO_VALIDATE}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'TO_VALIDATE',
     },
     {
       icon: 'mdi-account-alert',
       label: 'A compléter',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_COMPLETE}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.TO_COMPLETE}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'TO_COMPLETE',
     },
     {
       icon: 'mdi-sync',
       label: 'A synchroniser',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.TO_SYNC}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.TO_SYNC}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'TO_SYNC',
     },
     {
       icon: 'mdi-loading',
       label: 'En cours de synchronisation',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.PROCESSING}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.PROCESSING}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'PROCESSING',
     },
     {
       icon: 'mdi-check',
       label: 'Synchronisées',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.SYNCED}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.SYNCED}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'SYNCED',
@@ -82,31 +82,31 @@ function useMenu(identityStateStore, identityAffectationStore) {
     // {
     //   icon: 'mdi-account-off',
     //   label: 'Etudiants',
-    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/etd/i',
+    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/etd/i',
     //   color: 'primary',
     //   part: 'Affectations',
     //   badgeValue: 'ETD',
     // },
     // {
     //   icon: 'mdi-account-tie',
     //   label: 'Administratifs',
-    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/adm/i',
+    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/adm/i',
     //   color: 'primary',
     //   part: 'Affectations',
     //   badgeValue: 'ADM',
     // },
     // {
     //   icon: 'mdi-account-group',
     //   label: 'Enseignants',
-    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/esn/i',
+    //   path: '/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[^additionalFields.attributes.supannPerson.supannTypeEntiteAffectation]=/esn/i',
     //   color: 'primary',
     //   part: 'Affectations',
     //   badgeValue: 'ESN',
     // },
     {
       icon: 'mdi-account-remove',
       label: 'En erreur',
-      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&limit=10&filters[@state][]=${IdentityState.ON_ERROR}`,
+      path: `/identities?sort[metadata.lastUpdatedAt]=desc&skip=0&filters[@state][]=${IdentityState.ON_ERROR}`,
       color: 'primary',
       part: 'Etats',
       badgeValue: 'ON_ERROR',

src/composables/usePagination.ts

@@ -10,15 +10,15 @@ export default function usePagination() {
   const pagination = ref<QTableProps['pagination']>({
     rowsNumber: 0,
     page: 1,
-    rowsPerPage: 10,
+    rowsPerPage: 16,
     sortBy: 'metadata.lastUpdatedAt',
     descending: true,
   })
 
   async function initializePagination(total: number = 0) {
     if (!pagination.value) return
     const query = { ...route.query }
-    const limit = query.limit ?? 10
+    const limit = query.limit ?? 16
     const skip = query.skip ?? 0
     pagination.value.rowsPerPage = parseInt(limit as string)
     pagination.value.page = parseInt(skip as string) / parseInt(limit as string) + 1

src/pages/identities/index.vue

@@ -81,7 +81,10 @@ const { pagination, onRequest, initializePagination } = usePagination()
 
 const queryWithoutRead = computed(() => {
   const { read, ...rest } = route.query
-  return rest
+  return {
+    limit: pagination.value?.rowsPerPage,
+    ...rest,
+  }
 })
 
 const {