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

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

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

1. Перейдите в директорию PhoneBook и откройте файл PhoneBook.ts.
2. Импортируйте следующие контролы:

   import {Confirmation} from 'Controls/popup';
   import {Remover} from 'Controls/list';
   import {Model} from 'Types/entity';

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

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

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

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

1. В свойстве _children добавьте дочерний контрол listRemover:

   protected _children: {
      gridView: View & Control;
      listRemover: typeof Remover;
   };

2. Добавьте обработчик удаления записи:

   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: Обработчик отображения опции записи

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

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

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.

   <Controls.list:DataContainer keyProperty="key" source="{{_source}}">
      <div>
         <Controls.grid:View .../>
      </div>
   </Controls.list:DataContainer>

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

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

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

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

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

<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: Конфигурация опций записи в таблице

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

<Controls.grid:View
   name="gridView"
   columns="{{_columns}}"
   itemActions="{{_itemActions}}"
   itemActionsPosition="outside" 
   itemActionVisibilityCallback="{{_isItemActionVisible}}"
   on:actionClick="_onActionClick()"
>

• В опции itemActions передаем конфигурацию опций записи.
• Ориентацию набора операций над записью относительно строки можно изменить опцией itemActionsPosition — значением outside, т.е. кнопки опций записи будут отображены под строкой.
• itemActionVisibilityCallback — функция обратного вызова для определения видимости элементов в панели действий над записью.
• С помощью опции on:actionClick="_onActionClick() назначим обработчик для кнопки "Удалить", расположенной в опциях записи.

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

1. Запустите командную строку от имени администратора.
   • Перейдите в директорию проекта.
   • Выполните следующие команды:

     npm run build
     npm start

2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
3. Результат должен быть таким как на изображении ниже.

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