<?php

/**
 * Проверка на пролог
 */
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) {
    die();
}

/** 
 * Подключение зависимостей
 */
use Bitrix\Main\Loader,
    Bitrix\Main\Entity,
    Bitrix\Main\Web\Json,
    Bitrix\Main\UI\Extension,
    Bitrix\Highloadblock\HighloadBlockTable,
    Bitrix\Main\Engine\Contract\Controllerable;

/* Подключаю нотификации */
Extension::load('myextensions.notification');

/**
* Подключения модуля по работе с хайлоад блоками
*/
Loader::includeModule("highloadblock");

/** Создание своего кастомного ООП класса с наследованием от CBitrixComponent 
 * и реализацией интерфейса Controllerable
 * для работы с AJAX запросами от JS библиотеки Bitrix
 */
class TodoList extends CBitrixComponent implements Controllerable
{
    /**
     * Получение параметров компонента которые будут учтены при обращении к экшену компонента 
     * через AJAX для этого надо будет при вызове этого action
     * передать signedParameters в параметры BX.ajax.runComponentAction;
     * @return array
     */
	public function listKeysSignedParameters() : array
	{
		return [
            'HIGHLOAD_BLOCK',
            'ADDED_TASK_NOTIFICATION_TEXT'
		];
	}
    /** Настройка экшенов которые к которым будем обращаться через AJAX ядра
     * @return array
    */
    public function configureActions() : array
    {
        /**Отключаем у наших экшенов требования к авторизации пользователя на сайте */
        return [
            'getFilteredTasks' => [
                '-prefilters' => [
                    ActionFilter\Authentication::class,
                ],
            ],
            'addTask' => [
                '-prefilters' => [
                    ActionFilter\Authentication::class,
                ],
            ], 
        ];
    }
    /**Выполнение компонента и подключение шаблона */
    public function executeComponent() : void
    {
        $this->getArResult();
        $this->includeComponentTemplate();
    }
    /** Получение ArResult */
    protected function getArResult(): void
    {
        /*Получаем todo задачи */
        $arResult['TASKS'] = $this->getTasks();

        /**Параметры которые мы передадим в JS
         * чтобы когда мы обращались к нашему экшену через AJAX,
         * у нашего компонента были arParams, и он мог выполнить логику*/
        $arResult['SIGNED_PARAMETERS'] = Json::encode($this->getSignedParameters());

        $this->arResult = $arResult;
    }

    /** Получение todo задач по фильтру, если входных параметров нет используем фильтр по умолчанию
     * @return array
     */
    protected function getTasks(array $filter = []): array
    {
        return HighloadBlockTable::compileEntity($this->arParams['HIGHLOAD_BLOCK'])->getDataClass()::getList([
            'select' => ['*'],
            'order' => ['ID' => 'ASC'],
            'filter' => $filter,
        ])->fetchAll();
    }

    
    /**Фильтруем пост */
    protected function filterPost(): void
    {
        /**Удаляем из поста параметры потому что они нам больше не нужны, 
         * и будут мешать когда мы будем передавать в POST в filter */
        unset($_POST['signedParameters']);
        
        $_POST = array_filter($_POST, fn($value) => !empty(trim($value)));
    }
    
    /**Экшен по получению отфильтрованных задач */
    public function getFilteredTasksAction(): array
    {
        $this->filterPost();
        return $this->getTasks($_POST);
    }
    /**Экшен изменения статуса у задания */
    public function changeTaskStatusAction(int $taskId, string $taskCompleted): void
    {
        /**Обновляем статус */
        HighloadBlockTable::compileEntity($this->arParams['HIGHLOAD_BLOCK'])->getDataClass()
            ::update($taskId, ['UF_COMPLETED' => ($taskCompleted === "true")]);
    }
    /**Экшен добавления в базу */
    public function addTaskAction(): string
    {
        $this->filterPost();

        $addedTask = HighloadBlockTable::compileEntity($this->arParams['HIGHLOAD_BLOCK'])->getDataClass()::add($_POST);

        return $this->arParams['ADDED_TASK_NOTIFICATION_TEXT'];
    }
}

<section id="todo" class="todo">
    <h2>TodoList</h2>
    <form class="todo__filter form" id="todo__filter">
        <div class="form__field">
            <label for="">Поиск по тексту</label>
            <input type="text" name="%UF_TEXT">
        </div>
        <div class="form__buttons">
            <button class="form__button" type="submit">Найти</button>
        </div>
    </form>
    <ul class="todo__list" id="todo__list">
        <?foreach ($arResult['TASKS'] as $key => $task):?>
        <li class="todo__item">
            <label>
                <input type="checkbox" <?=$task['UF_COMPLETED'] ? 'checked' : '' ?> data-id="<?=$task['ID']?>" />
                <?=$task['UF_TEXT']?>
            </label>
        </li>
        <?endforeach?>
    </ul>
    <form id="todo__add-form" class="form">
        <div class="form__field">
            <label for="">Новая задача</label>
            <textarea name="UF_TEXT"></textarea>
        </div>
        <div class="form__buttons">
            <button class="form__button" type="submit">Добавить</button>
            <button class="form__button" type="reset">Сбросить</button>
        </div>
    </form>
</section>


<script>
// Передаем SIGNED_PARAMETERS в JS глобальный объкт BX.message
BX.message({
    signedParameters: <?=$arResult['SIGNED_PARAMETERS']?>
})
//Рекомендую иницализировать скрипт компонента тут. Далее в статье объясню почему.
new BX.TodoList()
</script>

import "./TodoList.scss";

import {
  PreventDefault,
  ajax,
  append,
  bind,
  cleanNode,
  create,
  createFragment,
  data,
  findChildren,
  fireEvent,
  message,
} from "main.core";

/**Подключаем наш экстеншен с нотификациями который сделали ранее */
import { Notification } from "myextensions.notification";

/**Так же создаем класс */
export class TodoList {
  constructor() {
    /**
     * Function provides access to language messages.
     * If the param parameter is a string, the language message with the identifier param will be returned.
     * Otherwise, the parameter is interpreted as an object of the form {identifier: message, identifier: message}
     * language messages are added to the current ones (overwriting existing ones).cd
     *
     * @param {string|Object} param - The identifier or an object of language messages.
     * @returns {string} - The language message with the given identifier.
     * @example <caption>
     *
     * BX.message({test: 123}) //returns undefined
     *
     * BX.message('test') //returns 123
     * </caption>
     */
    this.signedParameters = message("signedParameters");

    this.todoList = document.getElementById("todo__list");
    this.filter = document.getElementById("todo__filter");
    this.addForm = document.getElementById("todo__add-form");
    /**Выносим накидывание ивентов в отдельную функцию, т.к. наши todo задачи, будут динамическими */
    this.initTaskEvent();

    /**
     * Binds an event handler to an element or a collection of elements.
     * @param {Node} el - The element to bind the event handler to.
     * @param {String} event - The name of the event to bind the handler to.
     * @param {Function} handler - The function to execute when the event is triggered.
     */
    bind(this.filter, "submit", (e) => this.submitFilter(e, this));
    bind(this.addForm, "submit", (e) => this.submitAddForm(e, this));
  }
  /**Накидываем события на наши задачи. */
  initTaskEvent() {
    /**
     * Finds all direct child nodes of the specified DOMNode.
     *
     * @param {Node} node - The DOMNode to search for children.
     * @param {Object} [params] - An optional object containing parameters to filter the child nodes.",
     * @param {string} [params.tagName] - The tag name of the desired child node.",
     * @param {string} [params.className] - The class name of the desired child node.",
     * @param {Object} [params.attrs] - An object containing attribute key-value pairs to filter the child nodes.",
     * @param {Object} [params.props] - An object containing property key-value pairs to filter the child nodes.",
     * @param {boolean} [recursive=false] - If true, also search for children of the children.
     * @returns {array<Node>} - An array of all direct child nodes.
     */
    /**Получаем все наши задачи */
    const tasks = findChildren(this.todoList, { tagName: "input" }, true);

    tasks.forEach((task) => {
      const taskId = data(task, "id");
      /**Используем здесь замыкание чтобы когда человек менял data-id, значение все равно приходило на бэкэнд старое */
      bind(task, "change", (e) =>
        this.changeTaskStatus(taskId, e.target.checked, this)
      );
    });
  }
  /**Отправка форму фильтра на бэкэнд чтобы получить задачи по фильтру */
  async submitFilter(e, classContext) {
    /**
     * Prevents the default action of an event from occurring.
     * @param {Event} e - The event object.
     */
    PreventDefault(e);
    /**
     * This function makes an AJAX request to a component.
     * @param {string} componentName - The name of the component. Example: 'mysitetemplate:mycomponent
     * @param {string} action - The name of the function in ajax.php or class.php .
     * @param {Object} [params] - The parameters for the request.
     * @param {string} [params.mode] - The mode for the request. Can be either "class" or "ajax".
     * @param {string} [params.method] - default POST
     * @param {Object|FormData} [params.data] - The data for the request.
     * @param {boolean} [params.json] - A flag indicating whether to send JSON data. In this case, when the request is sent, the Content-type header
     * will be set to application/json, and the controllers will be able to access the original JSON, which will make it easier to work with numbers and empty values.
     * @param {Object} [params.navigation] - The navigation data for the request.
     * @param {string|Object} [params.analyticsLabel] - The analytics label for the request. It is used as a marker for analytics to indicate popular content.
     * @param {string} [params.signedParameters] - The signed parameters for the request.
     * @returns {Promise} - A promise that resolves with the response from the server.
     */
    /**Если на бэкэнде будет error он автоматически попадет в catch*/
    try {
      const { data } = await ajax.runComponentAction(
        "test:todolist",
        "getFilteredTasks",
        {
          mode: "class",
          data: new FormData(classContext.filter),
          signedParameters: classContext.signedParameters,
        }
      );
      /**Получаем наши задачи и рендерим их */
      const template = classContext.renderTasks(data);

      /**
       * Cleans the specified node and its descendants.
       * @param {Node} node - The node to clean.
       * @param {boolean} [removeSelf=false] - Indicates whether to remove the node itself.
       */
      /**Очищаем содержимое нашего списка */
      cleanNode(classContext.todoList);
      /**
       * Appends a node to the end of another node.
       *
       * @param {Node} node - The node to be appended.
       * @param {Node} dstNode - The destination node where the node will be appended.
       */
      /**Вставляем наше значение */
      append(template.content, classContext.todoList);
      /**Заново иницилизируем обработчики на задачах */
      classContext.initTaskEvent();
    } catch ({ errors }) {
      /**Выводим ошибку пользователю на экран если что то сломалось */
      errors.forEach((error) => new Notification(error.message));
    }
  }
  async submitAddForm(e, classContext) {
    PreventDefault(e);
    try {
      const { data } = await ajax.runComponentAction(
        "test:todolist",
        "addTask",
        {
          mode: "class",
          data: new FormData(classContext.addForm),
          signedParameters: classContext.signedParameters,
        }
      );
      new Notification(data);
    } catch ({ errors }) {
      errors.forEach((error) => new Notification(error.message));
    }
  }
  /**Отправляем данные на бэкэнд что статус задания изменился */
  async changeTaskStatus(taskId, taskCompleted, classContext) {
    try {
      await ajax.runComponentAction("test:todolist", "changeTaskStatus", {
        mode: "class",
        data: {
          taskId: taskId,
          taskCompleted: taskCompleted,
        },
        signedParameters: classContext.signedParameters,
      });
    } catch ({ errors }) {
      errors.forEach((error) => new Notification(error.message));
    }
  }
  /**Создание template с нашими задачами */
  renderTasks(tasks) {
    const html = tasks
      .map((task) => {
        return /*html*/ `
        <li class="todo__item">
          <label>
            <input
              type="checkbox"
              ${Number(task["UF_COMPLETED"]) && "checked"}
              data-id="${task["ID"]}"
            />
            ${task["UF_TEXT"]}
          </label>
        </li>
      `;
      })
      .join(" ");
    return create("template", { html: html });
  }
}

$shadow: 0px 0px 5px 0px #00000040;

#todo {
  padding: 100px;
  max-width: 900px;
  box-sizing: border-box;
  width: 100%;
  margin: auto;

  .form {
    $filter-color: #f7f7f7;

    border-radius: 12px;
    border: 1px solid $filter-color;
    background-color: $filter-color;
    padding: 12px;

    &__field {
      margin-bottom: 12px;
      display: flex;
      gap: 4px;
      flex-direction: column;
    }

    &__button {
      outline: none;
      border: none;
      background-color: #f7f7f7;
      border-radius: 6px;
      padding: 6px 12px;
      cursor: pointer;
      transition: background-color .2s ease-in-out;
      box-shadow: $shadow;

      &[type="submit"] {
        background-color: #b6b6ff;

        &:hover {
          background-color: #9a9af1;
        }
      }

      &:hover {
        background-color: #e6e6e6;
      }
    }
  }



  .todo {
    &__list {
      padding: 0;
      list-style: none;
      margin: 0;
      height: 500px;
      overflow: auto;
    }

    &__item {
      margin-bottom: 6px;
      padding: 6px;

      cursor: pointer;
    }
  }
}

module.exports = {
  input: "./src/TodoList.js",

  output: {
    js: "./script.js",
    css: "./style.css",
  },
  namespace: "BX",
  minification: true,
  treeshake: false,
};

<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true)
{
	die();
}

return [
	'css' => 'script.css',
	'js' => 'script.js',
	'rel' => [
		'main.core',
		'myextensions.notification',
	],
	'skip_core' => false,
];

!(function (t, e, r) {
  "use strict";
  function n() {
    /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ n =
      function () {
        return t;
      };
    var t = {},
      e = Object.prototype,
      r = e.hasOwnProperty,
      o =
        Object.defineProperty ||
        function (t, e, r) {
          t[e] = r.value;
        },
      a = "function" == typeof Symbol ? Symbol : {},
      i = a.iterator || "@@iterator",
      c = a.asyncIterator || "@@asyncIterator",
      s = a.toStringTag || "@@toStringTag";
    function u(t, e, r) {
      return (
        Object.defineProperty(t, e, {
          value: r,
          enumerable: !0,
          configurable: !0,
          writable: !0,
        }),
        t[e]
      );
    }
    try {
      u({}, "");
    } catch (t) {
      u = function (t, e, r) {
        return (t[e] = r);
      };
    }
    function l(t, e, r, n) {
      var a = e && e.prototype instanceof d ? e : d,
        i = Object.create(a.prototype),
        c = new T(n || []);
      return o(i, "_invoke", { value: k(t, r, c) }), i;
    }
    function f(t, e, r) {
      try {
        return { type: "normal", arg: t.call(e, r) };
      } catch (t) {
        return { type: "throw", arg: t };
      }
    }
    t.wrap = l;
    var h = {};
    function d() {}
    function p() {}
    function v() {}
    var m = {};
    u(m, i, function () {
      return this;
    });
    var y = Object.getPrototypeOf,
      g = y && y(y(P([])));
    g && g !== e && r.call(g, i) && (m = g);
    var w = (v.prototype = d.prototype = Object.create(m));
    function b(t) {
      ["next", "throw", "return"].forEach(function (e) {
        u(t, e, function (t) {
          return this._invoke(e, t);
        });
      });
    }
    function x(t, e) {
      var n;
      o(this, "_invoke", {
        value: function (o, a) {
          function i() {
            return new e(function (n, i) {
              !(function n(o, a, i, c) {
                var s = f(t[o], t, a);
                if ("throw" !== s.type) {
                  var u = s.arg,
                    l = u.value;
                  return l &&
                    "object" == babelHelpers.typeof(l) &&
                    r.call(l, "__await")
                    ? e.resolve(l.__await).then(
                        function (t) {
                          n("next", t, i, c);
                        },
                        function (t) {
                          n("throw", t, i, c);
                        }
                      )
                    : e.resolve(l).then(
                        function (t) {
                          (u.value = t), i(u);
                        },
                        function (t) {
                          return n("throw", t, i, c);
                        }
                      );
                }
                c(s.arg);
              })(o, a, n, i);
            });
          }
          return (n = n ? n.then(i, i) : i());
        },
      });
    }
    function k(t, e, r) {
      var n = "suspendedStart";
      return function (o, a) {
        if ("executing" === n) throw new Error("Generator is already running");
        if ("completed" === n) {
          if ("throw" === o) throw a;
          return j();
        }
        for (r.method = o, r.arg = a; ; ) {
          var i = r.delegate;
          if (i) {
            var c = E(i, r);
            if (c) {
              if (c === h) continue;
              return c;
            }
          }
          if ("next" === r.method) r.sent = r._sent = r.arg;
          else if ("throw" === r.method) {
            if ("suspendedStart" === n) throw ((n = "completed"), r.arg);
            r.dispatchException(r.arg);
          } else "return" === r.method && r.abrupt("return", r.arg);
          n = "executing";
          var s = f(t, e, r);
          if ("normal" === s.type) {
            if (((n = r.done ? "completed" : "suspendedYield"), s.arg === h))
              continue;
            return { value: s.arg, done: r.done };
          }
          "throw" === s.type &&
            ((n = "completed"), (r.method = "throw"), (r.arg = s.arg));
        }
      };
    }
    function E(t, e) {
      var r = e.method,
        n = t.iterator[r];
      if (void 0 === n)
        return (
          (e.delegate = null),
          ("throw" === r &&
            t.iterator.return &&
            ((e.method = "return"),
            (e.arg = void 0),
            E(t, e),
            "throw" === e.method)) ||
            ("return" !== r &&
              ((e.method = "throw"),
              (e.arg = new TypeError(
                "The iterator does not provide a '" + r + "' method"
              )))),
          h
        );
      var o = f(n, t.iterator, e.arg);
      if ("throw" === o.type)
        return (e.method = "throw"), (e.arg = o.arg), (e.delegate = null), h;
      var a = o.arg;
      return a
        ? a.done
          ? ((e[t.resultName] = a.value),
            (e.next = t.nextLoc),
            "return" !== e.method && ((e.method = "next"), (e.arg = void 0)),
            (e.delegate = null),
            h)
          : a
        : ((e.method = "throw"),
          (e.arg = new TypeError("iterator result is not an object")),
          (e.delegate = null),
          h);
    }
    function L(t) {
      var e = { tryLoc: t[0] };
      1 in t && (e.catchLoc = t[1]),
        2 in t && ((e.finallyLoc = t[2]), (e.afterLoc = t[3])),
        this.tryEntries.push(e);
    }
    function _(t) {
      var e = t.completion || {};
      (e.type = "normal"), delete e.arg, (t.completion = e);
    }
    function T(t) {
      (this.tryEntries = [{ tryLoc: "root" }]),
        t.forEach(L, this),
        this.reset(!0);
    }
    function P(t) {
      if (t) {
        var e = t[i];
        if (e) return e.call(t);
        if ("function" == typeof t.next) return t;
        if (!isNaN(t.length)) {
          var n = -1,
            o = function e() {
              for (; ++n < t.length; )
                if (r.call(t, n)) return (e.value = t[n]), (e.done = !1), e;
              return (e.value = void 0), (e.done = !0), e;
            };
          return (o.next = o);
        }
      }
      return { next: j };
    }
    function j() {
      return { value: void 0, done: !0 };
    }
    return (
      (p.prototype = v),
      o(w, "constructor", { value: v, configurable: !0 }),
      o(v, "constructor", { value: p, configurable: !0 }),
      (p.displayName = u(v, s, "GeneratorFunction")),
      (t.isGeneratorFunction = function (t) {
        var e = "function" == typeof t && t.constructor;
        return (
          !!e && (e === p || "GeneratorFunction" === (e.displayName || e.name))
        );
      }),
      (t.mark = function (t) {
        return (
          Object.setPrototypeOf
            ? Object.setPrototypeOf(t, v)
            : ((t.__proto__ = v), u(t, s, "GeneratorFunction")),
          (t.prototype = Object.create(w)),
          t
        );
      }),
      (t.awrap = function (t) {
        return { __await: t };
      }),
      b(x.prototype),
      u(x.prototype, c, function () {
        return this;
      }),
      (t.AsyncIterator = x),
      (t.async = function (e, r, n, o, a) {
        void 0 === a && (a = Promise);
        var i = new x(l(e, r, n, o), a);
        return t.isGeneratorFunction(r)
          ? i
          : i.next().then(function (t) {
              return t.done ? t.value : i.next();
            });
      }),
      b(w),
      u(w, s, "Generator"),
      u(w, i, function () {
        return this;
      }),
      u(w, "toString", function () {
        return "[object Generator]";
      }),
      (t.keys = function (t) {
        var e = Object(t),
          r = [];
        for (var n in e) r.push(n);
        return (
          r.reverse(),
          function t() {
            for (; r.length; ) {
              var n = r.pop();
              if (n in e) return (t.value = n), (t.done = !1), t;
            }
            return (t.done = !0), t;
          }
        );
      }),
      (t.values = P),
      (T.prototype = {
        constructor: T,
        reset: function (t) {
          if (
            ((this.prev = 0),
            (this.next = 0),
            (this.sent = this._sent = void 0),
            (this.done = !1),
            (this.delegate = null),
            (this.method = "next"),
            (this.arg = void 0),
            this.tryEntries.forEach(_),
            !t)
          )
            for (var e in this)
              "t" === e.charAt(0) &&
                r.call(this, e) &&
                !isNaN(+e.slice(1)) &&
                (this[e] = void 0);
        },
        stop: function () {
          this.done = !0;
          var t = this.tryEntries[0].completion;
          if ("throw" === t.type) throw t.arg;
          return this.rval;
        },
        dispatchException: function (t) {
          if (this.done) throw t;
          var e = this;
          function n(r, n) {
            return (
              (i.type = "throw"),
              (i.arg = t),
              (e.next = r),
              n && ((e.method = "next"), (e.arg = void 0)),
              !!n
            );
          }
          for (var o = this.tryEntries.length - 1; o >= 0; --o) {
            var a = this.tryEntries[o],
              i = a.completion;
            if ("root" === a.tryLoc) return n("end");
            if (a.tryLoc <= this.prev) {
              var c = r.call(a, "catchLoc"),
                s = r.call(a, "finallyLoc");
              if (c && s) {
                if (this.prev < a.catchLoc) return n(a.catchLoc, !0);
                if (this.prev < a.finallyLoc) return n(a.finallyLoc);
              } else if (c) {
                if (this.prev < a.catchLoc) return n(a.catchLoc, !0);
              } else {
                if (!s)
                  throw new Error("try statement without catch or finally");
                if (this.prev < a.finallyLoc) return n(a.finallyLoc);
              }
            }
          }
        },
        abrupt: function (t, e) {
          for (var n = this.tryEntries.length - 1; n >= 0; --n) {
            var o = this.tryEntries[n];
            if (
              o.tryLoc <= this.prev &&
              r.call(o, "finallyLoc") &&
              this.prev < o.finallyLoc
            ) {
              var a = o;
              break;
            }
          }
          a &&
            ("break" === t || "continue" === t) &&
            a.tryLoc <= e &&
            e <= a.finallyLoc &&
            (a = null);
          var i = a ? a.completion : {};
          return (
            (i.type = t),
            (i.arg = e),
            a
              ? ((this.method = "next"), (this.next = a.finallyLoc), h)
              : this.complete(i)
          );
        },
        complete: function (t, e) {
          if ("throw" === t.type) throw t.arg;
          return (
            "break" === t.type || "continue" === t.type
              ? (this.next = t.arg)
              : "return" === t.type
              ? ((this.rval = this.arg = t.arg),
                (this.method = "return"),
                (this.next = "end"))
              : "normal" === t.type && e && (this.next = e),
            h
          );
        },
        finish: function (t) {
          for (var e = this.tryEntries.length - 1; e >= 0; --e) {
            var r = this.tryEntries[e];
            if (r.finallyLoc === t)
              return this.complete(r.completion, r.afterLoc), _(r), h;
          }
        },
        catch: function (t) {
          for (var e = this.tryEntries.length - 1; e >= 0; --e) {
            var r = this.tryEntries[e];
            if (r.tryLoc === t) {
              var n = r.completion;
              if ("throw" === n.type) {
                var o = n.arg;
                _(r);
              }
              return o;
            }
          }
          throw new Error("illegal catch attempt");
        },
        delegateYield: function (t, e, r) {
          return (
            (this.delegate = { iterator: P(t), resultName: e, nextLoc: r }),
            "next" === this.method && (this.arg = void 0),
            h
          );
        },
      }),
      t
    );
  }
  var o = (function () {
    function t() {
      var r = this;
      babelHelpers.classCallCheck(this, t),
        (this.signedParameters = e.message("signedParameters")),
        (this.todoList = document.getElementById("todo__list")),
        (this.filter = document.getElementById("todo__filter")),
        (this.addForm = document.getElementById("todo__add-form")),
        this.initTaskEvent(),
        e.bind(this.filter, "submit", function (t) {
          return r.submitFilter(t, r);
        }),
        e.bind(this.addForm, "submit", function (t) {
          return r.submitAddForm(t, r);
        });
    }
    var o, a, i;
    return (
      babelHelpers.createClass(t, [
        {
          key: "initTaskEvent",
          value: function () {
            var t = this;
            e.findChildren(this.todoList, { tagName: "input" }, !0).forEach(
              function (r) {
                var n = e.data(r, "id");
                e.bind(r, "change", function (e) {
                  return t.changeTaskStatus(n, e.target.checked, t);
                });
              }
            );
          },
        },
        {
          key: "submitFilter",
          value:
            ((i = babelHelpers.asyncToGenerator(
              n().mark(function t(o, a) {
                var i, c, s;
                return n().wrap(
                  function (t) {
                    for (;;)
                      switch ((t.prev = t.next)) {
                        case 0:
                          return (
                            e.PreventDefault(o),
                            (t.prev = 1),
                            (t.next = 4),
                            e.ajax.runComponentAction(
                              "test:todolist",
                              "getFilteredTasks",
                              {
                                mode: "class",
                                data: new FormData(a.filter),
                                signedParameters: a.signedParameters,
                              }
                            )
                          );
                        case 4:
                          (i = t.sent),
                            (c = i.data),
                            (s = a.renderTasks(c)),
                            e.cleanNode(a.todoList),
                            e.append(s.content, a.todoList),
                            a.initTaskEvent(),
                            (t.next = 16);
                          break;
                        case 12:
                          (t.prev = 12),
                            (t.t0 = t.catch(1)),
                            t.t0.errors.forEach(function (t) {
                              return new r.Notification(t.message);
                            });
                        case 16:
                        case "end":
                          return t.stop();
                      }
                  },
                  t,
                  null,
                  [[1, 12]]
                );
              })
            )),
            function (t, e) {
              return i.apply(this, arguments);
            }),
        },
        {
          key: "submitAddForm",
          value:
            ((a = babelHelpers.asyncToGenerator(
              n().mark(function t(o, a) {
                var i, c;
                return n().wrap(
                  function (t) {
                    for (;;)
                      switch ((t.prev = t.next)) {
                        case 0:
                          return (
                            e.PreventDefault(o),
                            (t.prev = 1),
                            (t.next = 4),
                            e.ajax.runComponentAction(
                              "test:todolist",
                              "addTask",
                              {
                                mode: "class",
                                data: new FormData(a.addForm),
                                signedParameters: a.signedParameters,
                              }
                            )
                          );
                        case 4:
                          (i = t.sent),
                            (c = i.data),
                            new r.Notification(c),
                            (t.next = 13);
                          break;
                        case 9:
                          (t.prev = 9),
                            (t.t0 = t.catch(1)),
                            t.t0.errors.forEach(function (t) {
                              return new r.Notification(t.message);
                            });
                        case 13:
                        case "end":
                          return t.stop();
                      }
                  },
                  t,
                  null,
                  [[1, 9]]
                );
              })
            )),
            function (t, e) {
              return a.apply(this, arguments);
            }),
        },
        {
          key: "changeTaskStatus",
          value:
            ((o = babelHelpers.asyncToGenerator(
              n().mark(function t(o, a, i) {
                return n().wrap(
                  function (t) {
                    for (;;)
                      switch ((t.prev = t.next)) {
                        case 0:
                          return (
                            (t.prev = 0),
                            (t.next = 3),
                            e.ajax.runComponentAction(
                              "test:todolist",
                              "changeTaskStatus",
                              {
                                mode: "class",
                                data: { taskId: o, taskCompleted: a },
                                signedParameters: i.signedParameters,
                              }
                            )
                          );
                        case 3:
                          t.next = 9;
                          break;
                        case 5:
                          (t.prev = 5),
                            (t.t0 = t.catch(0)),
                            t.t0.errors.forEach(function (t) {
                              return new r.Notification(t.message);
                            });
                        case 9:
                        case "end":
                          return t.stop();
                      }
                  },
                  t,
                  null,
                  [[0, 5]]
                );
              })
            )),
            function (t, e, r) {
              return o.apply(this, arguments);
            }),
        },
        {
          key: "renderTasks",
          value: function (t) {
            var r = t
              .map(function (t) {
                return '\n        <li class="todo__item">\n          <label>\n            <input\n              type="checkbox"\n              '
                  .concat(
                    Number(t.UF_COMPLETED) && "checked",
                    '\n              data-id="'
                  )
                  .concat(t.ID, '"\n            />\n            ')
                  .concat(
                    t.UF_TEXT,
                    "\n          </label>\n        </li>\n      "
                  );
              })
              .join(" ");
            return e.create("template", { html: r });
          },
        },
      ]),
      t
    );
  })();
  t.TodoList = o;
})((this.BX = this.BX || {}), BX, BX);
//# sourceMappingURL=script.js.map

#todo {
  padding: 100px;
  max-width: 900px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  margin: auto; }
  #todo .form {
    border-radius: 12px;
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
    padding: 12px; }
    #todo .form__field {
      margin-bottom: 12px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: 4px;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; }
    #todo .form__button {
      outline: none;
      border: none;
      background-color: #f7f7f7;
      border-radius: 6px;
      padding: 6px 12px;
      cursor: pointer;
      -webkit-transition: background-color .2s ease-in-out;
      -o-transition: background-color .2s ease-in-out;
      transition: background-color .2s ease-in-out;
      -webkit-box-shadow: 0px 0px 5px 0px #00000040;
              box-shadow: 0px 0px 5px 0px #00000040; }
      #todo .form__button[type="submit"] {
        background-color: #b6b6ff; }
        #todo .form__button[type="submit"]:hover {
          background-color: #9a9af1; }
      #todo .form__button:hover {
        background-color: #e6e6e6; }
  #todo .todo__list {
    padding: 0;
    list-style: none;
    margin: 0;
    height: 500px;
    overflow: auto; }
  #todo .todo__item {
    margin-bottom: 6px;
    padding: 6px;
    cursor: pointer; }