sfp_front_vue_serprati_digital/src/pages/associado/notificacoes/NotificacoesAssociadoPage.vue

<template>
  <div>
    <DefaultHeaderPage />

    <div v-if="loading" class="flex flex-center q-pa-xl">
      <q-spinner color="violet-normal" size="50px" />
    </div>

    <div
      v-else-if="notifications.length === 0"
      class="flex flex-center q-pa-xl text-grey-6"
    >
      {{ $t("notification.empty") }}
    </div>

    <div v-else class="q-gutter-md">

      <q-card
        v-for="item in notifications"
        :key="item.id"
        flat
        bordered
        class="notificacoes-card"
        :class="{ 'not-read': !item.read }"
        @click="onRead(item)"
      >
        <q-card-section horizontal>

          <!-- IMAGEM -->
          <div
            v-if="item.notification?.media?.length"
            class="notification-image-container"
          >
            <img
              :src="item.notification.media[0].url"
              class="notification-image"
            />
          </div>

          <!-- ICONE -->
          <q-card-section
            v-else
            class="flex items-center q-pa-md"
          >
            <q-icon
              name="mdi-bell-outline"
              size="28px"
              :color="item.read ? 'grey-5' : 'violet-normal'"
            />
          </q-card-section>

          <!-- CONTEUDO -->
          <q-card-section class="flex-grow q-pa-md">

            <div class="row items-start justify-between">

              <div
                class="text-weight-bold"
                :class="item.read ? 'text-grey-7' : 'text-violet-normal'"
              >
                {{ item.notification?.title }}
              </div>

              <q-badge
                v-if="!item.read"
                color="violet-normal"
                rounded
              />

            </div>

            <div class="text-caption text-grey-7 q-mt-xs">
              {{ item.notification?.message }}
            </div>

            <div class="text-caption text-grey-5 q-mt-sm">
              {{ item.created_at }}
            </div>

          </q-card-section>

        </q-card-section>
      </q-card>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import {getMyNotifications,markNotificationAsRead} from "src/api/notification";

import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const loading = ref(true);
const notifications = ref([]);

const onRead = async (item) => {
  if (item.read) return;

  try {
    await markNotificationAsRead(item.id);

    item.read = true;

  } catch (e) {
    console.error(e);
  }
};

onMounted(async () => {
  try {
    notifications.value = await getMyNotifications();

  } catch (e) {
    console.error(e);

  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="scss">
.notificacoes-card {
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;

  &:hover {
    background: #f5eef7;
    transform: translateY(-1px);
  }

  &.not-read {
    border-left: 4px solid #7b2d97;
  }
}

.notification-image-container {
  width: 140px;
  min-width: 140px;
  height: 140px;
  overflow: hidden;
  background: #f3edf5;
}

.notification-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>