@wolf-scope/gamifykit/src/components/task-popup/task-popup.lit.ts

UI library for web applications using Lit

import { property, state } from 'lit/decorators.js'
import { LitElement, PropertyValues, html, unsafeCSS } from 'lit'
import styles from './task-popup.lit.scss?inline'
import '@wolf-scope/wolf-ui/components/modal/register'
import {type  Task, TaskEvent } from '@/types/models'
import { isMobile } from '@wolf-scope/wolf-common/env'
import { makeWidget } from '@/services/ui.service'

export const tagName = 'gamifykit-task-popup'

export class GamifyKitTaskPopup extends LitElement {
  @property({ type: Object }) task!: Task;
  @state() taskEvents: TaskEvent[] = []
  @state() open = true

  static styles = unsafeCSS(styles)

  connectedCallback(): void {
    super.connectedCallback()
    this.task = {
      id: '1',
      appId: '1',
      key: 'onboarding-gamifykit',
      name: 'Onboarding',
      points: 100,
      order: 0,
      description: 'Welcome to GamifyKit! Complete these tasks to get started.',
      createdAt: '2024-10-06T00:00:00Z',
      updatedAt: '2024-10-06T00:00:00Z',
    }

    this.taskEvents = [
      {
        task: {
          id: '1',
          appId: '1',
          key: 'onboarding-gamifykit',
          task: this.task,
          name: 'First login to the app',
          description: 'Easiest task ever, right?',
          createdAt: '2024-10-06T00:00:00Z',
          updatedAt: '2024-10-06T00:00:00Z',
        },
        eventName: 'task_completed',
        createdAt: '2024-10-06T00:00:00Z',
      },
      {
        task: {
          id: '2',
          appId: '1',
          key: 'onboarding-gamifykit',
          task: this.task,
          name: 'Complete your profile',
          description: 'Tell us more about yourself',
          createdAt: '2024-10-06T00:00:00Z',
          updatedAt: '2024-10-06T00:00:00Z',
        },
        eventName: 'task_not_started',
        createdAt: '2024-10-06T00:00:00Z',
      },
    ]
  }
  
  renderXOfY() {
    return html`
      <wolf-typography variant="caption" color="secondary">
        ${this.taskEvents.filter((ev) => ev.eventName === 'task_completed').length} of ${this.taskEvents.length} tasks completed
      </wolf-typography>
    `
  }
  
  protected firstUpdated(_changedProperties: PropertyValues): void {
    super.firstUpdated(_changedProperties)
    makeWidget('progress-bar', { current: this.taskEvents.filter((ev) => ev.eventName === 'task_completed').length, max: this.taskEvents.length, size: 'small' }).render('#gamifykit__progress-of-task')
    makeWidget('task-list', { taskEvents: this.taskEvents }).render('#gamifykit__list-of-tasks')
    makeWidget('status-badge', { status: 'in-progress', size: 'small' }).render('#gamifykit__status-badge')
  }

  render() {
    const width = isMobile() ? '100%' : '500'
    return html`
      <wolf-modal width=${width} ?open=${this.open} @closed=${e => (this.open = false)}>
        <wolf-typography slot="header" variant="header-small">${this.task?.name}</wolf-typography>
        <div class="status">
          <wolf-typography variant="body-small">Status:</wolf-typography>
          <div id="gamifykit__status-badge"></div>
        </div>
        <wolf-typography variant="body-small">${this.task?.description}</wolf-typography>
        <div class="separator"></div>
        <div class="task-progress">
          ${this.renderXOfY()}
          <div id="gamifykit__progress-of-task"></div>
        </div>
        <div id="gamifykit__list-of-tasks"></div>
      </wolf-modal>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    [tagName]: GamifyKitTaskPopup
  }
}