@bildvitta/quasar-ui-asteroid 3.14.0-beta.2 → 3.14.0-beta.4

package/src/components/infinite-scroll/QasInfiniteScroll.vue

@@ -62,7 +62,7 @@ const props = defineProps({
 
 defineExpose({ refresh, remove })
 
-const emit = defineEmits(['update:list'])
+const emit = defineEmits(['update:list', 'fetch-success', 'fetch-error'])
 
 const axios = inject('axios')
 
@@ -135,10 +135,14 @@ async function fetchList () {
      * após buscar uma vez e retornar uma lista vazia.
     */
     hasMadeFirstFetch.value = true
-  } catch {
+
+    emit('fetch-success', { list: newList, offset: offset.value, count: count.value })
+  } catch (error) {
     NotifyError('Ops… Não conseguimos acessar as informações. Por favor, tente novamente em alguns minutos.')
 
     hasFetchingError.value = true
+
+    emit('fetch-error', error)
   } finally {
     isFetching.value = false
   }

package/src/components/infinite-scroll/QasInfiniteScroll.yml

@@ -44,6 +44,28 @@ events:
         desc: Novo valor do list
         type: Array
 
+  '@fetch-error -> function (error)':
+    desc: Dispara toda vez que ocorre algum erro ao fazer nova busca na API.
+    params:
+      error:
+        count: Erro enviado da API.
+        type: Object
+
+  '@fetch-success -> function ({ count, list, offset })':
+    desc: Dispara toda vez que é feito uma nova busca com sucesso na API.
+    params:
+      count:
+        count: Tamanho máximo de itens.
+        type: Number
+
+      list:
+        desc: Lista do endpoint.
+        type: Array
+
+      offset:
+        desc: valor atual que indica a posição inicial ao recuperar resultados da lista.
+        type: Number
+
 slots:
   default:
     desc: slot para exibir a lista na qual o componente fez a busca.

package/src/components/layout/QasLayout.vue

@@ -1,11 +1,11 @@
 <template>
   <q-layout view="hHh Lpr lff">
     <slot v-if="$qas.screen.untilLarge" name="app-bar">
-      <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" />
+      <qas-app-bar v-bind="appBarProps" @sign-out="signOut" @toggle-menu="toggleMenuDrawer" @toggle-notifications="toggleNotificationsDrawer" />
     </slot>
 
     <slot name="app-menu">
-      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @update:model-value="updateMenuDrawer" />
+      <qas-app-menu :model-value="showMenuDrawer" v-bind="defaultAppMenuProps" @sign-out="signOut" @toggle-notifications="toggleNotificationsDrawer" @update:model-value="updateMenuDrawer" />
     </slot>
 
     <slot>
@@ -17,72 +17,103 @@
     </slot>
 
     <q-ajax-bar color="primary" position="bottom" size="2px" />
+
+    <pv-layout-notifications-drawer v-if="isNotificationsEnabled" v-model="notificationsDrawer" />
   </q-layout>
 </template>
 
-<script>
+<script setup>
+import PvLayoutNotificationsDrawer from './private/PvLayoutNotificationsDrawer.vue'
 import QasAppBar from '../app-bar/QasAppBar.vue'
 import QasAppMenu from '../app-menu/QasAppMenu.vue'
 
-export default {
-  name: 'QasLayout',
+import useScreen from '../../composables/use-screen'
+import useNotifications from '../../composables/use-notifications'
 
-  components: {
-    QasAppBar,
-    QasAppMenu
-  },
+import { computed, ref, watch } from 'vue'
 
-  props: {
-    appBarProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    appMenuProps: {
-      default: () => ({}),
-      type: Object
-    },
-
-    modelValue: {
-      default: true,
-      type: Boolean
-    }
-  },
+defineOptions({ name: 'QasLayout' })
 
-  emits: ['sign-out', 'update:modelValue'],
+const props = defineProps({
+  appBarProps: {
+    default: () => ({}),
+    type: Object
+  },
 
-  data () {
-    return {
-      menuDrawer: false
-    }
+  appMenuProps: {
+    default: () => ({}),
+    type: Object
   },
 
-  computed: {
-    defaultAppMenuProps () {
-      return {
-        ...this.appBarProps,
-        ...this.appMenuProps
-      }
-    },
-
-    showMenuDrawer () {
-      return !this.$qas.screen.untilLarge || this.menuDrawer
-    }
+  initialUnreadNotificationsCount: {
+    type: Number,
+    default: 0
   },
 
-  methods: {
-    signOut () {
-      this.$emit('sign-out')
-    },
+  modelValue: {
+    default: true,
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['sign-out', 'update:modelValue'])
+
+// expondo método "toggleNotificationsDrawer" para fora do componente.
+defineExpose({ toggleNotificationsDrawer })
+
+const screen = useScreen()
+
+const { isNotificationsEnabled, setUnreadNotificationsCount } = useNotifications()
+
+const menuDrawer = ref(false)
+const notificationsDrawer = ref(false)
+
+/**
+ * Como está sendo utilizado em um watcher com a propriedade 'immediate: true',
+ * é necessário criar a variável antes de atribuí-la ao watcher, para assim conseguir pará-lo.
+ */
+let unreadNotificationsCountWatcher = () => {}
 
-    toggleMenuDrawer () {
-      this.updateMenuDrawer(!this.menuDrawer)
-    },
+// computed
+const defaultAppMenuProps = computed(() => {
+  return {
+    ...props.appBarProps,
+    ...props.appMenuProps
+  }
+})
+
+const showMenuDrawer = computed(() => !screen.untilLarge || menuDrawer.value)
+
+/**
+ * A propriedade "initialUnreadNotificationsCount" é escutada apenas uma vez,
+ * quando ela é iniciada, seta o "unreadNotificationsCount" do composable,
+ * após isto quem controla é o QasLayout.
+ */
+unreadNotificationsCountWatcher = watch(() => props.initialUnreadNotificationsCount, value => {
+  if (value) {
+    setUnreadNotificationsCount(value)
 
-    updateMenuDrawer (value) {
-      this.menuDrawer = value
-      this.$emit('update:modelValue', value)
-    }
+    // finaliza o watcher
+    unreadNotificationsCountWatcher()
   }
+}, { immediate: true })
+
+// functions
+function signOut () {
+  emit('sign-out')
+}
+
+function toggleMenuDrawer () {
+  updateMenuDrawer(!menuDrawer.value)
+}
+
+function updateMenuDrawer (value) {
+  menuDrawer.value = value
+
+  emit('update:modelValue', value)
+}
+
+function toggleNotificationsDrawer () {
+  notificationsDrawer.value = !notificationsDrawer.value
 }
 </script>

package/src/components/layout/QasLayout.yml

@@ -14,6 +14,11 @@ props:
     default: { animation: 500 }
     type: Object
 
+  initial-unread-notifications-count:
+    desc: Propriedade para indicar quantas notificações não lidas existem.
+    default: 0
+    type: Number
+
   model-value:
     desc: Model do componente, responsável por abrir/fechar menu lateral.
     default: true

package/src/components/layout/private/PvLayoutNotificationCard.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="items-center justify-between no-wrap row">
+    <div class="items-center row">
+      <div class="q-mr-sm">
+        <q-icon :color="iconColor" name="sym_r_info" size="md" />
+      </div>
+
+      <div>
+        <span class="text-caption text-grey-6">
+          {{ dateLabel }}
+        </span>
+
+        <div class="items-center q-mt-xs row">
+          <h6 class="text-subtitle1" :class="titleClass">
+            {{ props.notification.title }}
+          </h6>
+
+          <div v-if="hasBadge" class="q-ml-sm">
+            <qas-badge color="indigo-1" label="Nova" text-color="grey-10" />
+          </div>
+        </div>
+
+        <div class="q-mt-xs text-body1 text-grey-8">
+          {{ props.notification.message }}
+        </div>
+      </div>
+    </div>
+
+    <qas-btn v-if="props.notification.link" v-bind="buttonProps" />
+  </div>
+</template>
+
+<script setup>
+import { dateTime } from '../../../helpers/filters'
+
+import { computed } from 'vue'
+import { date } from 'quasar'
+
+defineOptions({ name: 'PvLayoutNotificationCard' })
+
+const props = defineProps({
+  notification: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const markedAsRead = computed(() => props.notification.isRead)
+
+const iconColor = computed(() => markedAsRead.value ? 'grey-8' : 'primary')
+const titleClass = computed(() => markedAsRead.value ? 'text-grey-8' : 'text-grey-10')
+
+const isRecentNotification = computed(() => {
+  const currentDate = new Date().toISOString()
+
+  return date.getDateDiff(currentDate, props.notification.createdAt, 'minutes') < 10
+})
+
+const hasBadge = computed(() => isRecentNotification.value && !markedAsRead.value)
+
+const dateLabel = computed(() => {
+  return isRecentNotification.value
+    ? 'Agora mesmo'
+    : dateTime(props.notification.createdAt, 'dd/MM/yyyy HH:mm')
+})
+
+const buttonProps = computed(() => {
+  const { link } = props.notification
+
+  const urlFromLink = new URL(link)
+
+  const isExternalURL = urlFromLink.host !== location.host
+
+  return {
+    icon: 'sym_r_chevron_right',
+    color: markedAsRead.value ? 'grey-10' : 'primary',
+
+    /**
+     * Se for uma url externa, diferente da URL que ele esta acessando no momento,
+     * é adicionado um "href" porque é um link para outro modulo, caso seja para o mesmo modulo,
+     * é adicionado um "to" para não recarregar a pagina.
+     */
+    ...(isExternalURL ? { href: link } : { to: urlFromLink.pathname })
+  }
+})
+</script>

package/src/components/layout/private/PvLayoutNotificationsDrawer.vue

@@ -0,0 +1,141 @@
+<template>
+  <qas-drawer v-bind="drawerProps" v-model="model">
+    <div class="fixed-position">
+      <div class="justify-end row">
+        <qas-btn class="q-mb-xl" :disable="isAllNotificationsRead" icon="sym_r_check_circle" label="Marcar todas como lida" @click="markAsRead" />
+      </div>
+
+      <qas-infinite-scroll v-model:list="notifications" v-bind="infiniteScrollProps">
+        <qas-list-items :list="notifications" :use-box="false" :use-clickable-item="false" :use-section-actions="false">
+          <template #item-section="{ item }">
+            <pv-layout-notification-card :notification="item" />
+          </template>
+        </qas-list-items>
+      </qas-infinite-scroll>
+    </div>
+  </qas-drawer>
+</template>
+
+<script setup>
+import PvLayoutNotificationCard from './PvLayoutNotificationCard.vue'
+import QasDrawer from '../../drawer/QasDrawer.vue'
+import QasInfiniteScroll from '../../infinite-scroll/QasInfiniteScroll.vue'
+
+import useNotifications, { onNotificationReceived } from '../../../composables/use-notifications'
+
+import { promiseHandler } from '../../../helpers'
+
+import { computed, ref, inject, onMounted } from 'vue'
+
+defineOptions({ name: 'PvLayoutNotificationsDrawer' })
+
+const props = defineProps({
+  model: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const axios = inject('axios')
+
+const { setUnreadNotificationsCount } = useNotifications()
+
+const hasMadeFirstFetch = ref(false)
+const isMarkingNotificationsAsRead = ref(false)
+
+const notifications = ref([])
+
+onMounted(() => {
+  const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+  notificationsUtilsChannel.onmessage = ({ data }) => {
+    if (data.type === 'markAllAsRead') onMarkAsReadSuccess()
+  }
+})
+
+/**
+ * Quando o usuário ainda não abriu a central de notificações, a primeira vez que
+ * ele abrir vai obter esses dados via API, mesmo que ele tenha recebido a notificação
+ * em real time, após ele ter aberto as notificações pelo menos uma vez, todas
+ * notificações recebidas em real time serão incrementadas na central de
+ * notificação sem a necessidade de chamar a API e resetar a paginação (feita por scroll).
+ */
+onNotificationReceived(notification => {
+  if (!hasMadeFirstFetch.value) return
+
+  notifications.value.unshift(notification)
+})
+
+const infiniteScrollProps = {
+  limitPerPage: 30,
+  // os "165px" são referentes ao cabeçalho.
+  maxHeight: 'calc(100vh - 165px)',
+  url: 'users/me/notifications',
+  onFetchSuccess
+}
+
+// computed
+const model = computed({
+  get () {
+    return props.model
+  },
+
+  set (value) {
+    emit('update:modelValue', value)
+  }
+})
+
+const drawerProps = computed(() => {
+  return {
+    loading: isMarkingNotificationsAsRead.value,
+    maxWidth: '60%',
+    title: 'Notificações'
+  }
+})
+
+/**
+ * Se todas notificações estiverem lidas, então desabilitar o botão de "Marcar todas como lida"
+ */
+const isAllNotificationsRead = computed(() => !notifications.value.some(notification => !notification?.isRead))
+
+// functions
+async function markAsRead () {
+  const { data } = await promiseHandler(
+    axios.patch('/users/me/notifications', { markAllAsRead: true }),
+    {
+      useLoading: false,
+      errorMessage: 'Falha ao marcar todas notificações como lida. Por favor, tente novamente em alguns minutos.',
+      onLoading: isLoading => {
+        isMarkingNotificationsAsRead.value = isLoading
+      }
+    }
+  )
+
+  if (data) {
+    const notificationsUtilsChannel = new BroadcastChannel('notifications--utils')
+
+    notificationsUtilsChannel.postMessage({ type: 'markAllAsRead' })
+  }
+}
+
+/**
+ * Ao marcar todas notificações como lida, é necessário percorrer todo o array
+ * de "notifications" e setar a prop "isRead" como "true", para não precisar chamar
+ * novamente a API para atualizar estes dados.
+ */
+function onMarkAsReadSuccess () {
+  notifications.value.forEach(notification => {
+    notification.isRead = true
+  })
+
+  /**
+   * Zera o contador de notificações, responsável pelo ícone no QasAppUser.
+   */
+  setUnreadNotificationsCount(0)
+}
+
+function onFetchSuccess () {
+  hasMadeFirstFetch.value = true
+}
+</script>

package/src/components/list-items/QasListItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <qas-box class="qas-list-items">
+  <component :is="component" class="qas-list-items" :class="classes">
     <q-list separator>
       <q-item v-for="(item, index) in props.list" :key="index" v-ripple :clickable="props.useClickableItem" @click="onClick({ item, index }, true)">
         <slot :index="index" :item="item" name="item">
@@ -15,13 +15,14 @@
         </slot>
       </q-item>
     </q-list>
-  </qas-box>
+  </component>
 </template>
 
 <script setup>
-import QasBox from '../box/QasBox.vue'
 import QasBtn from '../btn/QasBtn.vue'
 
+import { computed } from 'vue'
+
 defineOptions({ name: 'QasListItems' })
 
 const props = defineProps({
@@ -35,6 +36,11 @@ const props = defineProps({
     type: Array
   },
 
+  useBox: {
+    type: Boolean,
+    default: true
+  },
+
   useClickableItem: {
     type: Boolean
   },
@@ -47,6 +53,10 @@ const props = defineProps({
 
 const emit = defineEmits(['click-item'])
 
+const classes = computed(() => ({ 'qas-list-items--no-click': !props.useClickableItem }))
+
+const component = computed(() => props.useBox ? 'qas-box' : 'div')
+
 function onClick ({ item, index }, fromItem) {
   /**
    * se o click veio do q-item e "useClickableItem" for "false", ou
@@ -62,8 +72,26 @@ function onClick ({ item, index }, fromItem) {
 
 <style lang="scss">
 .qas-list-items {
-  .q-list > .q-item {
-    padding: 24px 16px;
+  &--no-click {
+    .q-item {
+      .q-ripple {
+        display: none;
+      }
+    }
+  }
+
+  .q-list {
+    & > .q-item {
+      padding: var(--qas-spacing-lg) 0;
+    }
+
+    & > .q-item:last-child {
+      padding-bottom: 0;
+    }
+
+    & > .q-item:first-child {
+      padding-top: 0;
+    }
   }
 }
 </style>

package/src/components/list-items/QasListItems.yml

@@ -14,6 +14,11 @@ props:
     default: []
     type: Array
 
+  use-box:
+    desc: Controla se o vai ser um QasBox ou div.
+    type: Boolean
+    default: true
+
   use-clickable-item:
     desc: Controla se o item inteiro é clicável ou somente o button dentro do item.
     type: Boolean

package/src/components/whatsapp-link/QasWhatsappLink.vue

@@ -10,8 +10,8 @@ defineOptions({ name: 'QasWhatsappLink' })
 
 const props = defineProps({
   callingCode: {
-    type: String,
-    default: '55'
+    type: [Number, String],
+    default: 55
   },
 
   phone: {

package/src/components/whatsapp-link/QasWhatsappLink.yml

@@ -7,7 +7,7 @@ props:
   calling-code:
     desc: Propriedade para passar o DDI.
     default: 55
-    type: String
+    type: [Number, String]
 
   phone:
     desc: Propriedade para passar o telefone.

package/src/composables/index.js

@@ -3,3 +3,6 @@ export { default as useForm } from './use-form.js'
 export { default as useHistory } from './use-history.js'
 export { default as useQueryCache } from './use-query-cache.js'
 export { default as useScreen } from './use-screen.js'
+export { default as useNotifications } from './use-notifications.js'
+
+export * from './use-notifications.js'

package/src/composables/use-notifications.js

@@ -0,0 +1,114 @@
+import asteroidConfig from 'asteroid-config'
+import hasParentByClassName from '../helpers/private/has-parent-by-class-name'
+
+import { Notify } from 'quasar'
+import { ref } from 'vue'
+
+const callbackFunctions = {
+  onNotificationReceived: []
+}
+
+export function onNotificationReceived (callbackFn) {
+  callbackFunctions.onNotificationReceived.push(callbackFn)
+}
+
+const unreadNotificationsCount = ref(0)
+
+export default function () {
+  const isNotificationsEnabled = asteroidConfig.framework.featureToggle?.useNotifications
+
+  function triggerNotification (notification) {
+    callbackFunctions.onNotificationReceived.forEach(fn => fn((notification)))
+  }
+
+  function setUnreadNotificationsCount (value) {
+    unreadNotificationsCount.value = value
+  }
+
+  function incrementUnreadNotificationsCount () {
+    unreadNotificationsCount.value++
+  }
+
+  /**
+   * @param {{
+   *  message: string
+   *  title: string
+   *  link?: string
+   * }} config
+   */
+  function sendNotify (config = {}) {
+    const { link } = config
+
+    const classes = ['bg-white', 'boot-notification', 'q-py-sm', 'text-grey-8']
+
+    if (link) classes.push(...['boot-notification--has-link', 'cursor-pointer'])
+
+    const closeNotify = Notify.create({
+      actions: [{
+        icon: 'sym_r_close',
+        class: 'boot-notification__close-button qas-btn qas-btn--tertiary qas-btn--tertiary-grey-10'
+      }],
+
+      attrs: {
+        onClick: event => onNotifyClick({ event, link, closeNotify })
+      },
+
+      classes: classes.join(' '),
+      html: true,
+      icon: 'sym_r_info',
+      iconColor: 'primary',
+      message: getHTMLMessage(config),
+      multiLine: true,
+      position: 'bottom-right',
+      timeout: 30000
+    })
+
+    /**
+     * Função que é chamada quando o usuário clica na notificação, se a notificação
+     * tem link, então ele vai ser redirecionado para o link em uma nova aba, caso
+     * não tenha link, nada acontece.
+     */
+    function onNotifyClick ({ event, link, closeNotify }) {
+      if (!link) return
+
+      if (hasParentByClassName('boot-notification__close-button', event.srcElement)) return
+
+      window.open(link)
+
+      closeNotify()
+    }
+
+    /**
+     * Função que retorna um HTML para seguir estilos propostos pelo design.
+     */
+    function getHTMLMessage ({ message, title, icon = 'info' } = {}) {
+      return (`
+         <div>
+           <header class="row items-center">
+             <h5 class="text-grey-10 text-h5 boot-notification__title">
+               ${title}
+             </h5>
+           </header>
+
+           <div class="q-mt-sm text-grey-8 text-body1">
+             ${message}
+           </div>
+         </div>
+      `)
+    }
+  }
+
+  return {
+    // const
+    isNotificationsEnabled,
+
+    // computed
+    unreadNotificationsCount,
+
+    // functions
+    incrementUnreadNotificationsCount,
+    sendNotify,
+    setUnreadNotificationsCount,
+    triggerNotification
+  }
+}