@devix-tecnologia/timeline-vue 1.0.1 → 1.1.0

package/src/components/timeline/organismos/Timeline.mock.ts

@@ -14,7 +14,7 @@ export const dadosEventos: Evento[] = [
     previsto: new Date("2023-04-26T19:00Z"),
     realizado: new Date("2023-04-26T19:30Z"),
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da Covid",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -24,7 +24,9 @@ export const dadosEventos: Evento[] = [
     },
     status: "realizado",
     criticidade: "media",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
@@ -32,7 +34,7 @@ export const dadosEventos: Evento[] = [
     previsto: new Date("2023-04-26T18:10Z"),
     realizado: new Date("2023-04-26T18:15Z"),
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da gripe",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -42,15 +44,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "cancelado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f3",
-    data: new Date("2023-05-03T09:00Z"),
-    previsto: new Date("2023-05-03T09:00Z"),
-    realizado: new Date("2023-05-03T09:00Z"),
+    data: new Date("2023-05-03T11:00Z"),
+    previsto: new Date("2023-05-03T11:00Z"),
+    realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Ligar para médica",
     subtitulo: "",
     destaque: "",
@@ -60,15 +64,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f4",
-    data: new Date("2023-05-03T10:00Z"),
-    previsto: new Date("2023-05-03T10:00Z"),
+    data: new Date("2023-05-03T15:00Z"),
+    previsto: new Date("2023-05-03T15:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Passeio no parque",
     subtitulo: "",
     destaque: "",
@@ -78,15 +84,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f5",
-    data: new Date("2023-05-03T11:00Z"),
-    previsto: new Date("2023-05-03T11:00Z"),
+    data: new Date("2023-05-03T20:00Z"),
+    previsto: new Date("2023-05-03T20:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Exames do coração",
     subtitulo: "Hospital do Coração",
     destaque: "",
@@ -96,15 +104,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "media",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f6",
-    data: new Date("2023-05-01T12:00Z"),
-    previsto: new Date("2023-05-01T12:00Z"),
+    data: new Date("2023-04-01T12:00Z"),
+    previsto: new Date("2023-04-01T12:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta",
     subtitulo: "Posto de saúde",
     destaque: "Remarcado",
@@ -114,15 +124,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "adiado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f7",
-    data: new Date("2023-05-01T13:00Z"),
-    previsto: new Date("2023-05-01T13:00Z"),
+    data: new Date("2023-04-01T13:00Z"),
+    previsto: new Date("2023-04-01T13:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta cardiologista",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -132,15 +144,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "realizado",
     criticidade: "alta",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f8",
-    data: new Date("2023-05-03T12:30Z"),
-    previsto: new Date("2023-05-03T12:30Z"),
+    data: new Date("2023-05-03T12:00Z"),
+    previsto: new Date("2023-05-03T12:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Dentista",
     subtitulo: "Reta da Penha",
     destaque: "",
@@ -150,15 +164,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f9",
-    data: new Date("2023-05-03T14:30Z"),
-    previsto: new Date("2023-05-03T14:30Z"),
+    data: new Date("2023-05-03T13:00Z"),
+    previsto: new Date("2023-05-03T13:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Consulta",
     subtitulo: "Hospital central",
     destaque: "",
@@ -168,15 +184,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "alta",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f10",
-    data: new Date("2023-05-03T15:30Z"),
-    previsto: new Date("2023-05-03T15:30Z"),
+    data: new Date("2023-05-03T14:27Z"),
+    previsto: new Date("2023-05-03T14:27Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Remédio de pressão",
     subtitulo: "Aferir a pressão",
     destaque: "",
@@ -186,15 +204,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "alta",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f11",
-    data: new Date("2023-05-03T16:00Z"),
-    previsto: new Date("2023-05-03T16:00Z"),
+    data: new Date("2023-05-03T15:00Z"),
+    previsto: new Date("2023-05-03T15:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Checar temperatura",
     subtitulo: "",
     destaque: "",
@@ -204,15 +224,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f12",
-    data: new Date("2023-05-03T17:30Z"),
-    previsto: new Date("2023-05-03T17:30Z"),
+    data: new Date("2023-05-08T16:00Z"),
+    previsto: new Date("2023-05-08T16:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Avaliação Física",
     subtitulo: "",
     destaque: "IMC: 28,4",
@@ -222,15 +244,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f13",
-    data: new Date("2023-05-03T18:00Z"),
-    previsto: new Date("2023-05-03T18:00Z"),
+    data: new Date("2023-05-09T19:00Z"),
+    previsto: new Date("2023-05-09T19:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vacina da gripe",
     subtitulo: "Posto de saúde do bairro",
     destaque: "",
@@ -240,15 +264,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
-    data: new Date("2023-05-03T19:00Z"),
-    previsto: new Date("2023-05-03T19:00Z"),
+    data: new Date("2023-05-09T17:00Z"),
+    previsto: new Date("2023-05-09T17:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Vitamina D",
     subtitulo: "2 comprimidos",
     destaque: "",
@@ -258,15 +284,17 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: false,
+    aoCLicar: () => alert("Olá, mundo!"),
+    atual: false,
+    scroll: false,
   },
   {
     id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f15",
-    data: new Date("2023-05-03T20:00Z"),
-    previsto: new Date("2023-05-03T20:00Z"),
+    data: new Date("2023-05-09T18:01Z"),
+    previsto: new Date("2023-05-09T18:00Z"),
     realizado: null,
     duracao: null,
-    tolerancia: null,
+    tolerancia: 10,
     titulo: "Fisioterapia",
     subtitulo: "",
     destaque: "",
@@ -276,6 +304,8 @@ export const dadosEventos: Evento[] = [
     },
     status: "planejado",
     criticidade: "baixa",
-    acao: true,
+
+    atual: false,
+    scroll: false,
   },
 ];

package/src/components/timeline/organismos/Timeline.stories.ts

@@ -1,12 +1,13 @@
-import Timeline from './Timeline.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-import { dadosEventos, dadosPerfil } from './Timeline.mock';
+import Timeline from "./Timeline.vue";
+import { Meta, StoryFn } from "@storybook/vue3";
+import { dadosEventos, dadosPerfil } from "./Timeline.mock";
+import { Evento } from "../type";
 
 export default {
-  title: 'Devix/Timeline/Organismos/Timeline',
+  title: "Devix/Timeline/Organismos/Timeline",
   component: Timeline,
   parameters: {
-    componentSubtitle: 'Linha do tempo padrão com identidade da Devix',
+    componentSubtitle: "Linha do tempo padrão com identidade da Devix",
   },
   argTypes: {},
 } as Meta<typeof Timeline>;
@@ -15,6 +16,22 @@ const perfilMock = dadosPerfil;
 
 const eventosPorDataMock = dadosEventos;
 
+function atualizarDatas(eventos: Evento[]) {
+  const agora = new Date();
+  const mesAtual = agora.getMonth() + 1;
+
+  for (let i = 0; i < eventos.length; i++) {
+    const evento = eventos[i];
+    const mesEvento = evento.data.getMonth() + 1;
+
+    if (mesEvento >= mesAtual) {
+      evento.data.setMonth(agora.getMonth(), agora.getDate());
+      evento.previsto.setMonth(agora.getMonth(), agora.getDate());
+    }
+  }
+}
+atualizarDatas(dadosEventos);
+
 const Template: StoryFn<typeof Timeline> = (args) => ({
   components: { Timeline: Timeline },
   setup() {

package/src/components/timeline/organismos/Timeline.vue

@@ -1,30 +1,34 @@
 <template>
-  <div>
-    <div>
-      <PerfilTimeline
-        v-if="perfilTimeline !== null"
-        :nomePerfil="perfilTimeline.nome"
-        :imagemPerfil="perfilTimeline.imagem"
-        :iconePerfil="perfilTimeline.icone"
-      />
-    </div>
-
-    <div
-      v-for="evento in eventosPorTipo"
-      :key="evento.key"
-      class="areaTimeline"
-    >
+  <div class="areaTimeline">
+    <PerfilTimeline
+      v-if="perfilTimeline !== null"
+      :nomePerfil="perfilTimeline.nome"
+      :imagemPerfil="perfilTimeline.imagem"
+      :iconePerfil="perfilTimeline.icone"
+    />
+    <section class="timeline">
       <!-- SEPARADOR -->
-      <div v-if="evento.tipo === 'dia'">
-        <SeparadorPeriodo :dataSeparador="evento.valor.toDateString()" />
+      <div v-for="evento in eventosPorTipo" :key="evento.key">
+        <SeparadorPeriodo
+          v-if="evento.tipo === 'dia'"
+          :dataSeparador="evento.valor"
+        />
+        <!--loop-->
+        <EventoTimeline
+          v-if="evento.tipo === 'evento'"
+          :status="evento.valor.status"
+          :criticidade="evento.valor.criticidade"
+          :previsto="evento.valor.previsto"
+          :realizado="evento.valor.realizado"
+          :categoria="evento.valor.categoria"
+          :titulo="evento.valor.titulo"
+          :subtitulo="evento.valor.subtitulo"
+          :destaque="evento.valor.destaque"
+          :ehAtual="evento.valor.atual"
+          :aoCLicar="evento.valor.aoCLicar"
+        />
       </div>
-      <div v-if="evento.tipo === 'evento'">
-        <section class="timeline">
-          <!--loop-->
-          <EventoTimeline :dadosEvento="evento" />
-        </section>
-      </div>
-    </div>
+    </section>
   </div>
 </template>
 
@@ -37,11 +41,9 @@ import { Evento } from "../type";
 
 type TipoEventoTimeline =
   | { tipo: "dia"; valor: Date; key: number }
-  | { tipo: "evento"; valor: Evento; key: number; atual: boolean }
+  | { tipo: "evento"; valor: Evento; key: number }
   | { tipo: "eventos"; valor: Evento[]; key: number };
 
-// type Ordem = 'ascendente' | 'descendente';
-
 export default defineComponent({
   props: {
     perfilTimeline: {
@@ -52,10 +54,6 @@ export default defineComponent({
       required: true,
       type: Object,
     },
-    // ordem: {
-    //   required: false,
-    //   type: Ordem,
-    // },
   },
   components: {
     PerfilTimeline,
@@ -66,12 +64,29 @@ export default defineComponent({
     const dadosEventosTimeline: Evento[] = reactive(
       props.eventosTimeline as Array<Evento>
     );
+    let dadosEventosTimelineClone: Evento[] = reactive(dadosEventosTimeline);
+
+    function carregarListaEventos() {
+      dadosEventosTimelineClone = dadosEventosTimeline;
+      const resultado: Evento[] = filtraEventoAtual(dadosEventosTimelineClone);
+      dadosEventosTimelineClone.map((resp) => {
+        if (resultado[0].id === resp.id) {
+          resp.atual = true;
+          resp.scroll = true;
+          void scrollParaItemAtual();
+        } else {
+          resp.atual = false;
+          resp.scroll = false;
+        }
+        return {
+          evento: resp,
+        };
+      });
+    }
 
-    const eventosOrdenados = dadosEventosTimeline.sort(
-      (a: Evento, b: Evento) => {
-        return a.data.getTime() - b.data.getTime();
-      }
-    );
+    const atualizarEventoAtual = () => {
+      setInterval(carregarListaEventos, 60000);
+    };
 
     const verifica_mesmo_dia = (a: Date, b: Date) => {
       const mesmo_dia = a.getDay() === b.getDay();
@@ -81,85 +96,94 @@ export default defineComponent({
     };
 
     //verifica qual evento está mais próximo da hora atual e coloca ele numa nova lista na primeira posição
-    function filtraEventoAtual(eventos: Evento[]) {
+    const filtraEventoAtual = (eventos: Evento[]) => {
       if (eventos) {
         const agora = Date.now();
-        let minDiff = null;
+        let minDiff: number | null = null;
         let listaEventos = [];
         for (const e of eventos) {
           const t = e.data.getTime();
-          const diff = Math.abs(agora - t);
-          if (minDiff === null || diff < minDiff) {
-            minDiff = diff;
-            listaEventos.length = 0;
-          }
-          //se o evento já estiver marcado como realizado, cancelado ou adiado, ele pula para o próximo da lista.
           if (e.status === "planejado" || e.status === "atrasado") {
+            const diff: number = Math.abs(agora - e.data.getTime());
+            if (minDiff === null || (diff < minDiff && t <= agora)) {
+              minDiff = diff;
+              listaEventos.length = 0;
+            } else if (diff > minDiff) {
+              continue;
+            }
             listaEventos.push(e);
           }
         }
         return listaEventos;
       } else {
-        console.log("vazio.. ", []);
         return [];
       }
-    }
-    const eventosFiltrados: Evento[] = filtraEventoAtual(eventosOrdenados);
-    const eventoAtual = eventosFiltrados[0]
-      ? (eventosFiltrados[0] as Evento)
-      : null;
-
-    //lista de eventos
-    const eventosPorTipo = computed(() => {
-      if (dadosEventosTimeline) {
-        let result: Array<TipoEventoTimeline> = [];
+    };
+
+    // lista de eventos por tipo
+    const eventosTimeline = computed(() => {
+      void atualizarEventoAtual();
+
+      const eventosOrdenados = dadosEventosTimelineClone.sort(
+        (a: Evento, b: Evento) => {
+          return a.data.getTime() - b.data.getTime();
+        }
+      );
+      if (eventosOrdenados) {
+        let resultado: Array<TipoEventoTimeline> = [];
         let dataAtual: Date | null = null;
         let idx = 0;
+        let statusEvento;
 
         for (const evento of eventosOrdenados) {
+          const agora = new Date();
           const dataEvento = evento.data;
-
+          statusEvento = evento.status;
+          const toleranciaEvento = evento.tolerancia * 60 * 1000;
+
+          //altera status para atrasado
+          if (
+            statusEvento === "planejado" &&
+            dataEvento.getTime() + toleranciaEvento < agora.getTime()
+          ) {
+            evento.status = "atrasado";
+          }
           if (!dataAtual || !verifica_mesmo_dia(dataAtual, dataEvento)) {
             dataAtual = dataEvento;
-            result.push({
+            resultado.push({
               tipo: "dia",
               valor: evento.data,
               key: ++idx,
             });
           }
-
-          result.push({
+          resultado.push({
             tipo: "evento",
             valor: evento,
             key: ++idx,
-            atual:
-              eventoAtual === null
-                ? false
-                : evento.id === eventoAtual.id
-                ? true
-                : false,
           });
         }
-        return result;
+        return resultado;
       } else {
         return [];
       }
     });
 
-    return {
-      eventosPorTipo,
-    };
-  },
-  methods: {
-    scrollParaItemAtual() {
+    const scrollParaItemAtual = () => {
       const itemAtual = document.querySelector(".atual");
       itemAtual?.scrollIntoView({
         behavior: "smooth",
         block: "center",
       });
-    },
+    };
+
+    carregarListaEventos();
+    return {
+      eventosPorTipo: eventosTimeline,
+      scrollParaItemAtual,
+    };
   },
   mounted() {
+    // Aguardando a renderização para fazer scroll
     this.scrollParaItemAtual();
   },
 });

package/src/components/timeline/type.ts

@@ -4,20 +4,22 @@ export type Perfil = {
   icone: string | null;
 };
 
+export type Categoria = {
+  nome: string;
+  icone: string;
+};
+
 export type Evento = {
   id: string;
   data: Date;
   previsto: Date;
   duracao: number | null;
   realizado: Date | null;
-  tolerancia: number | null;
+  tolerancia: number;
   titulo: string;
   subtitulo: string;
   destaque: string;
-  categoria: {
-    nome: string;
-    icone: string;
-  };
+  categoria: Categoria;
   status:
     | "atrasado"
     | "adiantado"
@@ -25,6 +27,8 @@ export type Evento = {
     | "realizado"
     | "planejado"
     | "cancelado";
-  criticidade: string;
-  acao: boolean;
+  criticidade: "baixa" | "media" | "alta";
+  aoCLicar?: VoidFunction;
+  atual: boolean;
+  scroll: boolean;
 };