chore: Update q-drawer in default.vue to include breakpoint option for responsiveness

Author: tacxou

src/app.vue

@@ -1,4 +1,5 @@
 <template>
+  <NuxtLoadingIndicator />
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

src/components/2pan/index.vue

@@ -15,6 +15,7 @@ q-splitter(
         selection="multiple"
         v-model:selected="selected"
         v-model:pagination="pagination"
+        :hide-pagination="hidePagination"
         :rows="data"
         :visible-columns="visibleColumnsInternal"
         :row-key="rowKey"
@@ -42,7 +43,7 @@ q-splitter(
             slot(name="top-right-btn-grp")
               slot(name="top-right-btn-grp-content-before")
               sesame-2pan-btns-add(@add="add" v-if="crud.create")
-              q-btn.desktop-only(flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="info" @click="simple = !simple")
+              q-btn.desktop-only(v-if="!hidePanModeSwitch" flat :icon="isSimple ? 'mdi-table-border' : 'mdi-table-merge-cells'" color="info" @click="simple = !simple")
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Mode simple/double panneaux
               q-btn(flat icon="mdi-table-headers-eye" color="info")
                 q-tooltip.text-body2(transition-show="scale" transition-hide="scale") Afficher/cacher des colonnes
@@ -127,6 +128,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hidePagination: {
+    type: Boolean,
+    default: false,
+  },
+  hidePanModeSwitch: {
+    type: Boolean,
+    default: false,
+  },
   rowKey: {
     type: String,
     default: '_id',

src/components/settings/agents.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 q-page.container
-  .q-px-md
-    sesame-searchfilters(:fields="fieldsList")
-      template(#rightSelect)
-        div
+  //- .q-px-md
+  //-   sesame-searchfilters(:fields="fieldsList")
+  //-     template(#rightSelect)
+  //-       div
 
   sesame-2pan(
     :simple="true"
@@ -13,14 +13,15 @@ q-page.container
     :visibleColumns="visibleColumns"
     :fieldsList="fieldsList"
     :selected="selected"
-    :pagination="pagination"
     :pending="pending"
     :refresh="refreshEvent"
     :error="error"
     :titleKey=["username"]
     :crud="crud"
     :actions="actions"
     :defaultRightPanelButton="true"
+    hide-pagination
+    hidePanModeSwitch
   )
     //- template(#top-left)
     //- sesame-table-top-left(:selected="selected" @updateLifestep="updateLifestep($event)" @clear="selected = []")
@@ -44,7 +45,7 @@ q-page.container
 </template>
 
 <script lang="ts" setup>
-import usePagination from '~/composables/usePagination'
+// import usePagination from '~/composables/usePagination'
 import useAgentsSchema from '~/composables/useAgentsSchema'
 import { ref, provide, watch, computed } from 'vue'
 import { useFetch, useRoute, useRouter } from 'nuxt/app'
@@ -71,16 +72,16 @@ const $q = useQuasar()
 const { handleError } = useErrorHandling()
 const form = ref<any>(null)
 
-onMounted(() => {
-  initializePagination(agents.value?.total)
-})
+// onMounted(() => {
+//   // initializePagination(agents.value?.total)
+// })
 
-const { pagination, onRequest, initializePagination } = usePagination()
+// const { pagination, onRequest, initializePagination } = usePagination()
 
-const queryWithoutRead = computed(() => {
-  const { read, ...rest } = route.query
-  return rest
-})
+// const queryWithoutRead = computed(() => {
+//   const { read, ...rest } = route.query
+//   return rest
+// })
 
 const {
   data: agents,
@@ -89,7 +90,9 @@ const {
   error,
 } = await useHttp<Response>('/core/agents', {
   method: 'get',
-  query: queryWithoutRead
+  query: {
+    limit: 99999,
+  },
 })
 
 if (error.value) {

src/components/settings/settings.vue

@@ -2,26 +2,20 @@
 
   <div class="q-pa-md">
     <q-layout view="hHh Lpr lff" container style="height: 800px" class="shadow-2 rounded-borders">
-      <q-header elevated :class="bg-primary">
+      <q-header elevated class="bg-primary">
         <q-toolbar>
-          <q-btn flat @click="drawer = !drawer" round dense icon="mdi-menu"/>
+          <q-btn flat @click="drawer = !drawer" round dense icon="mdi-menu" />
           <q-toolbar-title>Paramètres</q-toolbar-title>
-          <q-btn icon="mdi-close" flat round dense v-close-popup/>
+          <q-btn icon="mdi-close" flat round dense v-close-popup />
         </q-toolbar>
       </q-header>
-      <q-drawer
-        v-model="drawer"
-        show-if-above
-        :width="200"
-        :breakpoint="500"
-        bordered
-        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'"
-      >
+      <q-drawer v-model="drawer" show-if-above :width="200" :breakpoint="500" bordered
+        :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
         <q-scroll-area class="fit">
           <q-list>
             <q-item clickable @click="onAgents">
               <q-item-section avatar>
-                <q-icon name="mdi-account"/>
+                <q-icon name="mdi-account" />
               </q-item-section>
               <q-item-section>
                 Utilisateurs
@@ -31,7 +25,7 @@
           <q-list>
             <q-item clickable @click="onPassPolicy">
               <q-item-section avatar>
-                <q-icon name="mdi-form-textbox-password"/>
+                <q-icon name="mdi-form-textbox-password" />
               </q-item-section>
               <q-item-section>
                 Politique de mot de passe
@@ -41,7 +35,7 @@
           <q-list>
             <q-item clickable @click="onSmtp">
               <q-item-section avatar>
-                <q-icon name="mdi-mail"/>
+                <q-icon name="mdi-mail" />
               </q-item-section>
               <q-item-section>
                 Serveur SMTP
@@ -51,7 +45,7 @@
           <q-list>
             <q-item clickable @click="onSms">
               <q-item-section avatar>
-                <q-icon name="mdi-message-processing"/>
+                <q-icon name="mdi-message-processing" />
               </q-item-section>
               <q-item-section>
                 Serveur SMS
@@ -76,36 +70,34 @@
 </template>
 
 <script setup>
-import {ref} from "vue";
+import { ref } from "vue";
 const drawer = ref(false)
-const agent=ref(false)
-const passPolicy=ref(false)
-const smtp=ref(false)
-const sms=ref(false)
+const agent = ref(true)
+const passPolicy = ref(false)
+const smtp = ref(false)
+const sms = ref(false)
 function onAgents() {
   resetMenu()
-  agent.value=true
+  agent.value = true
 }
-function onSmtp(){
+function onSmtp() {
   resetMenu()
-  smtp.value=true
+  smtp.value = true
 }
-function onSms(){
+function onSms() {
   resetMenu()
-  sms.value=true
+  sms.value = true
 }
 function onPassPolicy() {
   resetMenu()
-  passPolicy.value=true
+  passPolicy.value = true
 }
-function resetMenu(){
-  agent.value=false
-  passPolicy.value=false
-  smtp.value=false
-  sms.value=false
+function resetMenu() {
+  agent.value = false
+  passPolicy.value = false
+  smtp.value = false
+  sms.value = false
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>