Styled Chat component for AirLST Live Events

This component provides queue functionality with pre-configured AirLST styles.

Table of Contents

1. Installation

2. Usage

   • Layout component

   • Queue component

   • Queue item component

Installation

Install it as package using either yarn or npm:

yarn add @airlst/live-event-qanda-queue-manager
// or
npm install @airlst/live-event-qanda-queue-manager

Import chat styles to your project's styles

@import '@airlst/live-event-qanda-queue-manager/dist/chat.css';

Additionally, you also need to install @airlst/live-events-headless-components package:

yarn add @airlst/live-events-headless-components
// or
npm install @airlst/live-events-headless-components

Usage

Import component in any page you want to use chat component.

Queue manager includes 3 components

Layout component

This component is used to apply AirLST specific styles to queue manager with a header, footer and content sections. To use it, you need to create a new layout file in Nuxt.js project in /layouts file, like /layouts/airlst.vue and import it

Important: Because queue manager components are still part of headless components, they require to be wrapper inside BaseComponent from headless component. Since we are using dedicated layout file, it is a good practice to wrapper whole layout within BaseComponent.

Component requires single profile property. This is an object used to display queue manager's profile information. If you use BaseComponent on the same page/layout, it already exposes profile slot property, you can pass it down to Layout component.

Layout header includes "Logout" button. When clicked it fires logout event. You need to catch this event to logout current user.

<template>
  <div>
    <base-component v-slot="{ profile }">
      <layout :profile="profile" @logout="logout">
        <Nuxt />
      </layout>
    </base-component>
  </div>
</template>

<script>
import BaseComponent from '@airlst/live-events-headless-components'
import { Layout } from '@airlst/live-event-qanda-queue-manager'

export default {
  components: {
    BaseComponent,
    Layout
  },
  methods: {
    logout() {
      // do logout logic here
      // for example, remove auth token and redirect user to login page
    },
  }
}
</script>

Queue component

This component is used to display all queue items (pending, satisfied, declined). To use it, simply create a page, for example in /pages/queue/index.vue and import it.

You need to instruct the page to use your dedicated layout page.

Queue manager components need to have alias. If you don't pass an alias, default "default" alias will be used.

<template>
  <div>
      <queue alias="my-queue" />
  </div>
</template>

<script>
import { Queue } from '@airlst/live-event-qanda-queue-manager'

export default {
  components: {
    Queue
  },
  layout: 'airlst'
}
</script>

Queue item component

This component is used to single queue item. To use it, simply create a page, for example in /pages/queue/_id.vue and import it.

You need to instruct the page to use your dedicated layout page.

Queue manager components need to have alias. If you don't pass an alias, default "default" alias will be used.

Because this component needs to load and interact with single queue item, you need to pass queue ID to it. If you use Nuxt.js's dynamic pages, you can get queue ID from URI parameter.

<template>
  <div>
      <queue-item alias="my-queue" :queue-id="queueId" />
  </div>
</template>

<script>
import { QueueItem } from '@airlst/live-event-qanda-queue-manager'

export default {
  components: {
    QueueItem
  },
  layout: 'airlst',
  computed: {
    queueId() {
      return parseInt(this.$route.params.id)
    }
  }
}
</script>