Отмена последовательности

Библиотека SweetAlert предоставляет удобный и настраиваемый способ создания модальных окон в веб-приложениях. Одной из полезных возможностей, встроенных в SweetAlert, является возможность отмены выполнения действия или последовательности действий. Это может быть необходимо в случаях, когда пользователь инициирует серию операций, например, отправку формы, удаление данных или изменение настроек, и в какой-то момент решает отменить выполнение этих операций.

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

Использование SweetAlert для отмены последовательности

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

Пример базового окна подтверждения с отменой

Для начала рассмотрим простой пример, когда пользователь должен подтвердить или отменить выполнение какого-либо действия, например, удаление элемента:

swal({
  title: "Вы уверены?",
  text: "Это действие нельзя будет отменить.",
  icon: "warning",
  buttons: ["Отменить", "Удалить"],
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    // Логика для удаления
    console.log("Элемент удален.");
  } else {
    // Логика для отмены
    console.log("Удаление отменено.");
  }
});

В этом примере используется два параметра кнопок: одна для отмены, другая для подтверждения действия. Когда пользователь нажимает “Удалить”, выполняется соответствующая логика. В случае нажатия на кнопку “Отменить” действие не выполняется, и выводится сообщение об отмене.

Создание последовательности с возможностью отмены

Иногда возникает необходимость создавать несколько шагов с возможностью отмены на каждом из них. Например, в процессе оформления заказа может быть несколько этапов, и пользователь должен иметь возможность отменить процесс на любом шаге.

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

swal("Шаг 1: Подтвердите ваш заказ")
  .then(() => {
    return swal("Шаг 2: Введите ваш адрес доставки");
  })
  .then(() => {
    return swal("Шаг 3: Подтвердите оплату");
  })
  .then(() => {
    swal("Спасибо за заказ!");
  })
  .catch((error) => {
    // Обработка отмены на любом шаге
    console.log("Процесс был отменен на шаге: " + error);
  });

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

Интерактивные элементы для отмены

SweetAlert позволяет использовать интерактивные элементы внутри модальных окон для более тонкой настройки отмены действий. Например, можно добавить кнопку “Отмена” или “Назад”, которая будет инициировать возврат на предыдущий шаг в процессе выполнения последовательности.

Для реализации более сложных сценариев можно использовать кастомные кнопки и встраивание логики для отмены:

swal({
  title: "Шаг 1: Подтверждение",
  text: "Вы хотите продолжить?",
  icon: "info",
  buttons: {
    cancel: "Назад",
    confirm: "Продолжить"
  }
}).then((result) => {
  if (result.dismiss === swal.DismissReason.cancel) {
    // Логика для возврата на предыдущий шаг
    swal("Процесс отменен", "Вы вернулись на предыдущий шаг", "error");
  } else {
    // Логика для продолжения
    swal("Шаг 2: Дальнейшие действия");
  }
});

Здесь кнопка “Назад” позволяет вернуть пользователя к предыдущей стадии, например, на форму для изменения данных. Это дает более гибкое управление процессом, включая возможность отмены действия с последующим возвратом к предыдущим этапам.

Обработка ошибок и отмена с возвратом

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

Пример с обработкой ошибок:

swal("Шаг 1: Проверка данных")
  .then(() => {
    // Псевдопроверка данных
    let isDataValid = false;
    if (!isDataValid) {
      return swal("Ошибка", "Данные некорректны, хотите вернуться?", "error");
    }
    return swal("Шаг 2: Подтверждение");
  })
  .then(() => {
    swal("Действие завершено успешно!");
  })
  .catch((error) => {
    // Обработка отмены или ошибки
    console.log("Процесс был отменен: " + error);
  });

Здесь при проверке данных происходит условие, которое, если не выполняется, заставляет пользователя принять решение о возврате к предыдущему шагу. Логика отмены и исправления ошибок становится частью всей последовательности.

Вывод

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