Удаление данных из справочника

Удаление данных из справочника организуем с помощью опций записи.

Шаг 1: Импорт зависимостей

  1. Перейдите в директорию PhoneBook и откройте файл PhoneBook.ts.
  2. Импортируйте следующие контролы:
// TypeScript
import {Confirmation} from 'Controls/popup';
import {Remover} from 'Controls/list';
import {Model} from 'Types/entity';

С помощью контрола Confirmation мы будем создавать диалог подтверждения перед удалением записи.

С помощью контрола Remover мы организуем удаление записи из источника данных. Подробнее о работе с контролом читайте здесь.

Импортируем абстрактную модель доступа к данным для работы с источником данных.

Шаг 2: Обработчик удаления записи

  1. В свойстве _children добавьте дочерний контрол listRemover:
// TypeScript
protected _children: {
    gridView: View & Control;
    listRemover: typeof Remover;
};
  1. Добавьте обработчик удаления записи:
// TypeScript
protected _onActionClick(event: unknown, action: IItemAction, item: Model): void {
   // Обрабатываем только опцию удаления.
   if (action.id !== 'delete') {
      return;
   }
    
   Confirmation.openPopup({
      message: 'Удалить запись?',
      type: 'yesno'
   })
   .then((answer) => {
      if (answer) {
         this._children.listRemover.removeItems([item.getKey()]);
      }
   });
}

Шаг 3: Обработчик отображения опции записи

В этом обработчике мы скрываем опцию удаления для вновь добавляемых записей, потому что при редактировании записи ее еще не существует в источнике данных, а значит удаление не имеет смысла.

Признак вновь добавленной записи — отсутствие у нее значения, например, ключевого поля

// TypeScript
protected _isItemActionVisible(action: IItemAction, item: Model): boolean {
   if (action.id !== 'delete') {
      return true;
   }
   return !!item.getKey();
}

Шаг 4: Изменение структуры вложенности контрола

  1. Перейдите в директорию Phonebook в файл PhoneBook.wml.
  2. Для поддержания операции удаления записей (см. Перемещение) изменим структуру шаблона согласно схеме

Шаг 4.1: Добавление контрола Controls/list:DataContainer

  1. Для корректной работы с записями добавьте контрол-контейнер DataContainer из библиотеки Controls/list.
  2. Перенесите опции source и keyProperty из контрола Controls/grid:View. Эти опции будут переданы контролу DataContainer.
<!-- WML -->
<Controls.list:DataContainer keyProperty="key" source="{{_source}}">
   <div>
      <Controls.grid:View .../>
   </div>
</Controls.list:DataContainer>

Шаг 4.2: Добавление контрола Controls/list:Remover

Добавьте контрол Controls/list:Remover, через который будут удаляться записи из таблицы.

<!-- WML -->
<Controls.list:DataContainer keyProperty="key" source="{{_source}}">
   <div>
      <Controls.list:Remover name="listRemover"/>
      <Controls.grid:View .../>
   </div>
</Controls.list:DataContainer>

Шаг 4.3: Добавление контрола Controls/list:Container

Для корректной работы с таблицей добавьте контрол-контейнер Controls/list:Container.

<!-- WML -->
<Controls.list:DataContainer keyProperty="key" source="{{_source}}">
   <div>
      <Controls.list:Remover name="listRemover"/>
      <Controls.list:Container>
         <Controls.grid:View .../>
      </Controls.list:Container> 
    </div>
</Controls.list:DataContainer>

Шаг 5: Конфигурация опций записи в таблице

Добавьте для таблицы настройку опций записи.

<!-- WML -->
<Controls.grid:View
   name="gridView"
   columns="{{_columns}}"
   itemActions="{{_itemActions}}"
   itemActionsPosition="outside" 
   itemActionVisibilityCallback="{{_isItemActionVisible}}"
   on:actionClick="_onActionClick()"/>
  • itemActionVisibilityCallback — функция обратного вызова для определения видимости элементов в панели действий над записью.
  • С помощью опции on:actionClick="_onActionClick() назначим обработчик для кнопки "Удалить", расположенной в опциях записи.

Шаг 6: Сборка приложения и проверка результата.

  1. Запустите командную строку от имени администратора.
    • Перейдите в директорию проекта.
    • Выполните следующие команды:
      npm run build
      npm start
  2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
  3. Результат должен быть таким как на изображении ниже.

Можете сверить результат освоения этого задания с файлами репозитория.

Это был последний урок по созданию телефонного справочника Wasaby.