Обработка результата подтверждения

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

Стандартное окно подтверждения

Для того чтобы показать окно с подтверждением, используется метод Swal.fire(). Он принимает объект с настройками, включая тип окна (например, warning, info, success, error, question), заголовок, описание и кнопки подтверждения. Простейший пример:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие необратимо.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отменить'
})

Это окно показывает два варианта ответа: кнопку подтверждения и кнопку отмены.

Получение результата

Метод Swal.fire() возвращает промис, который можно использовать для обработки выбора пользователя. Промис возвращает объект, содержащий информацию о результате действия, который можно использовать для дальнейших операций.

Swal.fire({
  title: 'Вы уверены?',
  text: 'Это действие необратимо.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Пользователь подтвердил действие');
    // Код для удаления данных
  } else {
    console.log('Пользователь отменил действие');
    // Код для отмены операции
  }
});

В объекте результата, который возвращает промис, содержится несколько свойств:

  • isConfirmed — булевое значение, которое указывает, было ли подтверждено действие пользователем.
  • isDenied — возвращает true, если пользователь нажал на кнопку отмены или закрыл окно.
  • isDismissed — указывает, было ли окно закрыто пользователем (например, через крестик).
  • value — в случае, если в окно были добавлены поля для ввода (например, текстовое поле), это свойство содержит введённое значение.

Действия при подтверждении

Если пользователь подтверждает действие, например, нажимая на кнопку “Да”, результат будет содержать свойство isConfirmed, равное true. Это значение полезно для выполнения дальнейших операций, таких как отправка запросов на сервер или выполнение критических операций.

Пример:

Swal.fire({
  title: 'Вы уверены, что хотите удалить?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да, удалить',
  cancelButtonText: 'Отменить'
}).then((result) => {
  if (result.isConfirmed) {
    // Выполнение действия, например, удаление записи
    deleteItem();
    Swal.fire('Удалено!', 'Запись была удалена.', 'success');
  }
});

Действия при отмене

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

Пример:

Swal.fire({
  title: 'Вы уверены, что хотите выйти?',
  text: 'Все несохранённые данные будут потеряны.',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Выйти',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isDenied || result.isDismissed) {
    Swal.fire('Выход отменён', '', 'info');
  } else {
    // Выполнение выхода
    logout();
  }
});

Пользовательский ввод в окне подтверждения

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

Пример с полем для ввода:

Swal.fire({
  title: 'Введите ваш пароль для подтверждения',
  input: 'password',
  inputPlaceholder: 'Пароль',
  confirmButtonText: 'Подтвердить',
  showCancelButton: true
}).then((result) => {
  if (result.isConfirmed) {
    console.log('Пароль:', result.value);
    // Действие с полученным паролем
  } else if (result.isDismissed) {
    console.log('Пользователь отменил ввод');
  }
});

В этом примере пользователь должен ввести пароль, чтобы подтвердить действие. Введённое значение можно использовать для дальнейшей обработки.

Обработка ошибок

Иногда необходимо обработать ошибочные состояния, такие как сбой сервера или другие проблемы при выполнении операций. SweetAlert позволяет отобразить окна с ошибками или информацией о сбоях. Также можно использовать try-catch для обработки асинхронных операций, например, при отправке данных на сервер.

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

Swal.fire({
  title: 'Подтвердите операцию',
  text: 'Вы хотите продолжить?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then(async (result) => {
  if (result.isConfirmed) {
    try {
      const response = await fetch('/api/deleteItem', { method: 'DELETE' });
      if (response.ok) {
        Swal.fire('Удалено!', 'Запись была удалена.', 'success');
      } else {
        throw new Error('Не удалось удалить запись');
      }
    } catch (error) {
      Swal.fire('Ошибка', error.message, 'error');
    }
  }
});

В данном примере после подтверждения действия осуществляется асинхронный запрос для удаления данных. В случае ошибки показывается окно с сообщением об ошибке.

Повторное использование обработки результата

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

Пример:

function showDeleteConfirmation() {
  return Swal.fire({
    title: 'Вы уверены, что хотите удалить?',
    text: 'Это действие необратимо.',
    icon: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Да, удалить',
    cancelButtonText: 'Отменить'
  });
}

showDeleteConfirmation().then((result) => {
  if (result.isConfirmed) {
    // Удаление записи
    deleteItem();
    Swal.fire('Удалено!', 'Запись была удалена.', 'success');
  }
});

Этот подход позволяет многократно использовать одну и ту же логику для отображения окна подтверждения без необходимости дублирования кода.

Заключение

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

Оглавление