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

UI library for web applications using Lit

import { property } from 'lit/decorators.js'
import { LitElement, html, unsafeCSS } from 'lit'
import styles from './task-card.lit.scss?inline'
import '@wolf-scope/wolf-ui/components/icon/register'
import '@wolf-scope/wolf-ui/components/accordion/register'
import '@wolf-scope/wolf-ui/components/accordion-item/register'
import '@wolf-scope/wolf-ui/components/menu-item/register'
import '@wolf-scope/wolf-ui/components/menu/register'
import type { TaskEvent } from '@/types/models'
import { classMap } from 'lit/directives/class-map.js'
import { makeWidget } from '@/services'




export const tagName = 'gamifykit-task-card'

export class GamifyKitTaskCard extends LitElement {
  @property({ type: Object }) taskEvent?: TaskEvent;

  static styles = unsafeCSS(styles)

  connectedCallback(): void {
    super.connectedCallback()
  }

  private getIconName(eventName: string) {
    switch (eventName) {
      case 'task_completed':
        return 'check_circle'; // Material icon for completed
      case 'task_created':
        return 'schedule'; // Material icon for in-progress
      default:
        return 'schedule'; // Material icon for in-progress
    }
  }

  private getIconColor(eventName: string) {
    switch (eventName) {
      case 'task_completed':
        return 'var(--achievement-icon-color-success)'; // Material icon for completed
      case 'task_created':
        return 'var(--achievement-icon-color-warning)'; // Material icon for in-progress
      default:
        return 'var(--achievement-icon-color-warning)'; // Material icon for in-progress
    }
  }
  

  render() {
    return html`
      <wolf-card class="task-card ${classMap({ 'task-completed': this.taskEvent?.eventName === 'task_completed' })}">
        <div slot="header" class="task-item">
          <div class="task-info">
            <wolf-typography variant="header-xxsmall" ?strike=${this.taskEvent?.eventName === 'task_completed'}>${this.taskEvent?.task.name}</wolf-typography>
            ${makeWidget('progress-bar', {current: this.taskEvent?.eventName === 'task_completed' ? 100 : 0, max: 100, size: 'xsmall', color: 'primary', class: 'task-progress'}).element}
          </div>
          <wolf-icon class="icon"  color="${this.getIconColor(this.taskEvent?.eventName ?? '')}" icon="${this.getIconName(this.taskEvent?.eventName ?? '')}" size="20"></wolf-icon>
        </div>
        <wolf-typography slot="body" variant="overline" color="secondary" ?strike=${this.taskEvent?.eventName === 'task_completed'}>${this.taskEvent?.task.description}</wolf-typography>
      </wolf-card>
    `;
  }
}

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