todo-lit/src/todo-lit.ts

/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import TodoModel from './models/todo-model';
import Util from './util/util';

import './components/click-counter';
import './components/todo-input';
import './components/todo-list';

const DISPLAY_STRINGS = {
  PLACEHOLDER: 'What needs to be done?',
}

/**
 * An example element.
 *
 * @slot - This element has a slot
 * @csspart button - The button
 */
@customElement('todo-lit')
export class TodoLit extends LitElement {
  static styles = css`
    :host {
      display: grid;
      grid-template-columns: auto [main-content] 600px auto;
      padding: 16px;
    }
    h1, .todo-app {
      grid-column: main-content;
    }
    .todo-app {
      border: 1px solid rgba(0,0,0,0.3);
      padding: 20px;
    }
  `;

  @property({type: Array})
  todos: TodoModel[] = [];

  @property({attribute: false})
  filter: Function = () => {}

  connectedCallback() {
    super.connectedCallback();
    this.todos = Util.store('todos');
  }

  render() {
    return html`
      <h1>todos</h1>
      <section class="todo-app">
        <div class="controls">
          <button type="button" @click="${this._toggleAllCompleted}">Mark all completed</button>
          <!-- <button type="button" @click="${this._removeAllTodos}">Remove all</button> -->
          <todo-input
            .placeholder="${DISPLAY_STRINGS.PLACEHOLDER}"
            @submit-todo="${this._addTodo}"></todo-input>
        </div>
        <todo-list
          .todos="${this.todos}"
          @remove-todo="${this._removeTodo}"
          @toggle-completed="${this._toggleCompleted}"
          @update-todo="${this._updateTodo}"
          @remove-completed="${this._removeCompletedTodos}"></todo-list>
      </section>
    `;
  }

  private _getIndexById(id: string) {
    return this.todos.findIndex((todo) => todo.id === id);
  }

  private _addTodo(event: CustomEvent) {
    const newTodo = new TodoModel(event.detail);
    this.todos = [
      ...this.todos,
      newTodo
    ];
    Util.store('todos', this.todos);
  }

  private _removeTodo(event: CustomEvent) {
    const indexToDelete = this._getIndexById(event.detail.id);
    const newArray = [...this.todos];
    newArray.splice(indexToDelete, 1);
    this.todos = newArray;
    Util.store('todos', this.todos);
  }

  private _toggleCompleted(event: CustomEvent) {
    const indexToChange = this._getIndexById(event.detail.id);
    const newArray = [...this.todos];
    newArray[indexToChange].completed = !newArray[indexToChange].completed;
    this.todos = newArray;
    Util.store('todos', this.todos);
  }

  private _updateTodo(event: CustomEvent) {
    const indexToChange = this._getIndexById(event.detail.id);
    const newArray = [...this.todos];
    newArray[indexToChange].description = event.detail.description;
    this.todos = newArray;
    Util.store('todos', this.todos);
  }

  private _toggleAllCompleted() {
    let completedBool = true
    if (this.todos.every((todo) => todo.completed)) {
      completedBool = false
    } 
    const newArray = this.todos.map((todo) => {
      todo.completed = completedBool;
      return todo;
    });
    this.todos = newArray;
    Util.store('todos', this.todos);
  }

  private _removeAllTodos() {
    this.todos = [];
    Util.store('todos', this.todos);
  }

  private _removeCompletedTodos() {
    const newArray = this.todos.filter((todo) => !todo.completed);
    this.todos = newArray;
    Util.store('todos', this.todos);
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'todo-lit': TodoLit;
  }
}