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

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

Шаг 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.