Componente

Introducción

Este componente renderizará un chat con mensajes. El mismo se compone de dos partes, una de renderizado y otra de logica ir-conversation-bone, esta ultima será la encargada de el manejo de los datos así sean ingresados por propiedades o por consulta a la capa de datos.

Uso

El componente espera recibir un arreglo de mensajes con la siguiente estructura desde la capa de datos.

  {
    "text": "Hola! Como estas?",
    "received": true,
    "read": true,
    "date": "2023-12-04T10:30:00Z",
    "user_name": "User"
  },
  {
    "text": "Bien!",
    "received": false,
    "read": true,
    "date": "2023-12-04T10:31:00Z",
    "user_name": "User 1"
  }

Ejemplo

Propiedades

Propiedad	Tipo	Default	Requerido	Descripción
cache_items	Boolean	true	false	Activa un cache de los mesajes del iterator, el cual permitirá que al navegar por el sitio se almacenen en el equipo del usuario los items consultados por messages_fcn, para mostrar temporalmente mientras se consulta la información actualizada a la DB. Esto dará una mejor performance al componente, ya que mostrará contenido mas rápido. Al desactivarse la tabla no mostrará mensajes hasta obtener la información de la DB, solo mostrará un loading.
messages_fcn	String	undefined	false	Nombre de la función a ejecutarse en la DB, la respuesta se utilizará para reemplazar el arreglo de mensajes.
args_messages_fcn	Array	[]	false	Parámetros de la función que se ejecuta con el nombre proveniente de la propiedad "messages_fcn" (ésta propiedad queda inutilizada si no se envía "messages_fcn").
messages	Array	[]	false	Arreglo de mensajes a mostrar dentro del componente. Tendrán la siquiente estructura.
colors	Array	[]	false	Arreglo de colores que se usarán para los nombres de los usuarios en las burbujas de mensajes.
background_color	String	#ffffff	false	Color en hexadecimal que se utilizará para el fondo del camponente.
refreshTimer	Object	{ repeat_time: 5000, loops: -1 }	false	Determina, en caso que el componente tenga una función definida en la propiedad `messages_fcn`, la cantidad de veces y cada cuánto tiempo se ejecutará esta función para actualizar el componente automáticamente. Esta propiedad debe tener la siguiente estructura: { repeat_time: 5000, loops: -1 } `repeat_time` indica cada cuántos milisegundos se refresca. `loops` indica la cantidad de loops (-1 = infinito, 0 para cancelar la propiedad).

Estructura de messages

Propiedad	Tipo	Default	Requerido	Descripción
text	String	''	true	Texto del mensaje.
received	Boolean	false	false	Determina si el mensaje fue recibido.
read	Boolean	false	false	Determina si el mensaje fue leído.
date	Date	undefined	true	Determina la fecha de envío del mensaje. *IMPORTANTE* Si este dato no se envía, no se muestra el mensaje.
user_name	String	''	false	Determina el nombre del usuario que envió el mensaje.

Código fuente

<template>
  <ir-data-card-bone v-bind="$attrs" v-on="$listeners">
    <div slot-scope="{ title, value, subtitle, isPropSet }" v-on="$listeners" class="ir-card">
      <v-card
        :ref="irDataCardRef"
        class="d-flex ir-card"
        :style="cardStyle"
        :color="addOpacityToColorLocal(background_color, (backgroundOpacity ? backgroundOpacity : 1))"
        v-bind="getFilteredProps"
      >
        <div
          class="d-flex align-center ir-card__img-container"
        >
          <v-icon
            v-if="isPropSet(upperIcon)"
            v-bind="upperIconAttrs"
          >
            {{ upperIcon }}
          </v-icon>
          <img
            v-if="isPropSet(upperImg)"
            v-bind="upperImgAttrs"
            :src="upperImg"
            class="ir-card__img"
          />
          <v-card-text
            v-if="isPropSet(upperTitle)"
            class="my-0 py-0 px-0"
            v-bind="upperTitleAttrs"
          >
            {{ upperTitle }}
          </v-card-text>
        </div>
        <div
          :style="getContainerStyle"
          :class="getContainerClasses"
          class="d-flex align-start ir-card__container"
        >
          <v-icon
            v-if="isPropSet(icon)"
            v-bind="iconAttrs"
          >
            {{ icon }}
          </v-icon>
          <div>
            <v-card-text
              v-if="isPropSet(title)"
              :class="title_classes + (icon ? ' px-0 pt-0 pb-1' : '')"
              :style="icon ? 'text-align: ' + textAlign + ';' : ''"
              class="pb-2"
            >
              {{ title }}
            </v-card-text>
            <v-card-text
              v-if="isPropSet(value)"
              :class="value_classes + (icon ? ' px-0 pt-0 pb-1' : '')"
              :style="icon ? 'text-align: ' + textAlign + ';' : ''"
            >
              {{ value }}
            </v-card-text>
            <v-card-subtitle
              v-if="isPropSet(subtitle)"
              :class="subtitle_classes"
              :style="icon ? 'padding: 0px;' : ''"
            >
              {{ subtitle }}
            </v-card-subtitle>
          </div>
        </div>
      </v-card>
    </div>
  </ir-data-card-bone>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { addOpacityToColor } from '../../helpers/manageColorStyles'
import { dataCardComponentName } from '../../constants'
import IrDataCardBone from './IrDataCardBone.vue'
import { filterProps } from '../../helpers/filterProps'
export default {
  name: dataCardComponentName,
  components: {
    IrDataCardBone
  },
  inheritAttrs: false,
  props: {
    upperIcon: {
      type: String,
      required: false
    },
    upperImgAttrs: {
      type: Object,
      default: () => ({})
    },
    upperImg: {
      type: String,
      required: false
    },
    upperIconAttrs: {
      type: Object,
      default: () => ({})
    },
    upperTitleAttrs: {
      type: Object,
      default: () => ({})
    },
    upperTitle: {
      type: String,
      required: false
    },
    title_classes: {
      type: String,
      default: 'font-weight-bold subtitle-1'
    },
    cardStyle: {
      type: Object,
      required: false
    },
    value_classes: {
      type: String,
      default: 'font-weight-bold text-h4'
    },
    subtitle_classes: {
      type: String,
      default: 'subtitle-1'
    },
    background_color: {
      type: String,
      default: '#ffffff'
    },
    backgroundOpacity: {
      type: Number,
      required: false
    },
    containerStyle: {
      type: Object,
      required: false
    },
    icon: {
      type: String,
      required: false
    },
    textAlign: {
      type: String,
      default: 'right'
    },
    flexDirection: {
      type: String,
      default: 'row'
    },
    iconAttrs: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props, { attrs }) {
    const irDataCardRef = ref(null)
    const otherProps = ref({})

    const addOpacityToColorLocal = (color, opacity) => {
      return addOpacityToColor(color, opacity)
    }

    const getFilteredProps = computed(() => {
      return filterProps(irDataCardRef.value, otherProps.value, ['data-cy'])
    })

    const getContainerStyle = computed(() => {
      return props.containerStyle ? { ...props.containerStyle } : {}
    })

    const getContainerClasses = computed(() => {
      let classes = ''
      if (props.icon) classes = 'd-flex px-4 py-4 justify-space-between'
      if (props.flexDirection) classes += ' flex-' + props.flexDirection
      return classes
    })

    onMounted(() => {
      let aux = { ...attrs }
      delete aux.title
      delete aux.value
      delete aux.subtitle
      otherProps.value = aux
    })

    return {
      irDataCardRef,
      addOpacityToColorLocal,
      getFilteredProps,
      getContainerStyle,
      getContainerClasses
    }
  }
}
</script>

<style lang="scss" scoped>
.ir-card {
  height: 100% !important;
  &__container {
    width: 100%;
  }
  &__img-container {
    gap: 10px;
    .ir-card__img {
      width: auto;
    }
  }
}
</style>