@bildvitta/quasar-ui-asteroid 3.9.0-beta.0 → 3.9.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bildvitta/quasar-ui-asteroid",
   "description": "Asteroid",
-  "version": "3.9.0-beta.0",
+  "version": "3.9.0-beta.1",
   "author": "Bild & Vitta <systemteam@bild.com.br>",
   "license": "MIT",
   "main": "dist/asteroid.cjs.min.js",

package/src/components/app-bar/QasAppBar.vue

@@ -11,8 +11,8 @@
         </router-link>
       </q-toolbar-title>
 
-      <slot v-if="hasUser" name="user" :user="user">
-        <qas-app-user :menu-props="appUserMenuProps" :user="user" @sign-out="signOut" />
+      <slot v-if="hasUser" name="user">
+        <qas-app-user v-bind="defaultAppUserProps" />
       </slot>
     </q-toolbar>
   </q-header>
@@ -31,6 +31,12 @@ export default {
   },
 
   props: {
+    appUserProps: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+
     brand: {
       default: '',
       type: String
@@ -44,12 +50,6 @@ export default {
     title: {
       required: true,
       type: String
-    },
-
-    user: {
-      default: () => ({}),
-      require: true,
-      type: Object
     }
   },
 
@@ -70,6 +70,19 @@ export default {
       }
     },
 
+    defaultAppUserProps () {
+      return {
+        menuProps: {
+          anchor: 'bottom end',
+          offset: [0, 5],
+          self: 'top end'
+        },
+
+        onSignOut: this.signOut,
+        ...this.appUserProps
+      }
+    },
+
     developmentBadgeLabel () {
       const hosts = {
         localhost: 'Local',
@@ -92,7 +105,7 @@ export default {
     },
 
     hasUser () {
-      return !!Object.keys(this.user).length
+      return !!Object.keys(this.defaultAppUserProps.user || {}).length
     },
 
     rootRoute () {

package/src/components/app-bar/QasAppBar.yml

@@ -4,6 +4,12 @@ meta:
   desc: Gerencia a barra superior da aplicação
 
 props:
+  app-user-props:
+    desc: Props repassadas para o QasAppUser.
+    default: {}
+    type: Object
+    required: true
+
   brand:
     desc: Path do logotipo.
     type: String
@@ -18,20 +24,6 @@ props:
     required: true
     type: String
 
-  user:
-    desc: Informações do usuário.
-    type: Object
-    default: {}
-    examples: [
-      "
-      {
-        photo: 'minha-img',
-        name: 'Eduardo Lima',
-        email: 'eduardolima@gmail.com'
-      }
-      "
-    ]
-
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

package/src/components/app-menu/QasAppMenu.vue

@@ -76,8 +76,8 @@
         </div>
 
         <!-- User -->
-        <div v-if="showUser" class="full-width q-pb-lg q-px-lg">
-          <qas-app-user v-bind="appUserProps" />
+        <div v-if="showAppUser" class="full-width q-pb-lg q-px-lg">
+          <qas-app-user v-bind="defaultAppUserProps" />
         </div>
       </div>
     </q-drawer>
@@ -102,6 +102,12 @@ export default {
   inheritAttrs: false,
 
   props: {
+    appUserProps: {
+      type: Object,
+      required: true,
+      default: () => ({})
+    },
+
     brand: {
       default: '',
       required: true,
@@ -137,12 +143,6 @@ export default {
     title: {
       default: '',
       type: String
-    },
-
-    user: {
-      default: () => ({}),
-      require: true,
-      type: Object
     }
   },
 
@@ -168,20 +168,6 @@ export default {
       }
     },
 
-    appUserProps () {
-      return {
-        avatarSize: '40px',
-        user: this.user,
-
-        menuProps: {
-          'onUpdate:modelValue': this.setHasOpenedMenu
-        },
-
-        // eventos
-        onSignOut: this.signOut
-      }
-    },
-
     behavior () {
       return this.isUntilLarge ? 'mobile' : 'desktop'
     },
@@ -213,6 +199,20 @@ export default {
       return this.defaultModules.find(module => module?.value.includes(hostname))?.value
     },
 
+    defaultAppUserProps () {
+      return {
+        avatarSize: '40px',
+
+        menuProps: {
+          'onUpdate:modelValue': this.setHasOpenedMenu
+        },
+
+        // eventos
+        onSignOut: this.signOut,
+        ...this.appUserProps
+      }
+    },
+
     defaultModules () {
       if (!isLocalDevelopment()) return this.modules
 
@@ -289,7 +289,7 @@ export default {
       return this.$router.hasRoute('Root') ? { name: 'Root' } : { path: '/' }
     },
 
-    showUser () {
+    showAppUser () {
       return this.hasUser && !this.isUntilLarge
     },
 
@@ -339,7 +339,7 @@ export default {
     },
 
     hasUser () {
-      return !!Object.keys(this.user).length
+      return !!Object.keys(this.defaultAppUserProps.user || {}).length
     },
 
     isActive ({ to }) {

package/src/components/app-menu/QasAppMenu.yml

@@ -4,6 +4,12 @@ meta:
   desc: Menu lateral.
 
 props:
+  app-user-props:
+    desc: Props repassadas para o QasAppUser.
+    default: {}
+    type: Object
+    required: true
+
   brand:
     desc: Logotipo quando menu esta aberto.
     type: String
@@ -38,20 +44,6 @@ props:
     desc: Título que vai ficar no label do select de módulos.
     type: String
 
-  user:
-    desc: Informações do usuário.
-    type: Object
-    default: {}
-    examples: [
-      "
-      {
-        photo: 'minha-img',
-        name: 'Eduardo Lima',
-        email: 'eduardolima@gmail.com'
-      }
-      "
-    ]
-
 slots:
   user:
     desc: Slot para acessar o menu de usuário.

package/src/components/app-user/QasAppUser.vue

@@ -17,6 +17,8 @@
         <div class="ellipsis qas-app-user__menu-name">{{ userName }}</div>
         <div class="ellipsis">{{ user.email }}</div>
 
+        <qas-select v-if="hasCompaniesSelect" v-model="companiesModel" class="q-my-md" label="Vínculo" :loading="loading" :options="companiesOptions" @update:model-value="setCompanies" />
+
         <q-list class="q-mt-md">
           <q-item v-close-popup :active="false" class="qas-app-user__menu-item" clickable :to="user.to">
             <q-item-section avatar>
@@ -67,6 +69,16 @@ export default {
       type: String
     },
 
+    companiesOptions: {
+      type: Array,
+      default: () => []
+    },
+
+    currentCompany: {
+      type: String,
+      default: ''
+    },
+
     menuProps: {
       default: () => ({}),
       type: Object
@@ -86,6 +98,13 @@ export default {
 
   emits: ['sign-out'],
 
+  data () {
+    return {
+      companiesModel: '',
+      loading: false
+    }
+  },
+
   computed: {
     hasNotifications () {
       return !!Object.keys(this.notifications).length
@@ -93,12 +112,43 @@ export default {
 
     userName () {
       return this.user.name || this.user.givenName
+    },
+
+    hasCompaniesSelect () {
+      return this.companiesOptions.length > 1
+    }
+  },
+
+  watch: {
+    currentCompany: {
+      handler (value) {
+        this.companiesModel = value
+      },
+
+      immediate: true
     }
   },
 
   methods: {
     signOut () {
       this.$emit('sign-out')
+    },
+
+    async setCompanies (value) {
+      this.loading = true
+
+      try {
+        await this.$axios.patch('users/me', { companies: value })
+
+        this.$qas.success('Vínculo alterado com sucesso.')
+
+        setTimeout(() => location.reload(), 1500)
+      } catch {
+        this.companiesModel = this.currentCompany
+        this.$qas.error('Falha ao alterar vínculo.')
+      } finally {
+        this.loading = false
+      }
     }
   }
 }

package/src/components/app-user/QasAppUser.yml

@@ -4,6 +4,26 @@ meta:
   desc: Exibe o avatar e o nome do usuário, ao clicar abre um menu com as opções.
 
 props:
+  avatar-size:
+    desc: Define o tamanho do avatar.
+    default: 36px
+    type: String
+
+  companies-options:
+    desc: Opções para o select de vínculo de empresas.
+    default: []
+    type: Array
+
+  current-company:
+    desc: Empresa atual vinculada
+    default: ''
+    type: String
+
+  menu-props:
+    desc: Repassa props pro QMenu.
+    default: {}
+    type: Object
+
   notifications:
     desc: Lista com as notificações do usuário.
     type: Object

package/src/components/list-view/QasListView.vue

@@ -74,12 +74,17 @@ export default {
       type: Boolean
     },
 
-    useRefresh: {
+    useFilter: {
       default: true,
       type: Boolean
     },
 
-    useFilter: {
+    usePagination: {
+      default: true,
+      type: Boolean
+    },
+
+    useRefresh: {
       default: true,
       type: Boolean
     },
@@ -113,7 +118,7 @@ export default {
     },
 
     hasPages () {
-      return this.totalPages > 1
+      return this.totalPages > 1 && this.usePagination
     },
 
     hasResults () {

package/src/components/list-view/QasListView.yml

@@ -76,6 +76,11 @@ props:
     default: true
     type: Boolean
 
+  use-pagination:
+    desc: Controla se vai ter ou não paginação.
+    default: true
+    type: Boolean
+
   use-refresh:
     desc: Controla o [pull-to-refresh](https://quasar.dev/vue-components/pull-to-refresh#basic).
     default: true