Как создать цепочечный модал с множественным выбором на каждом шаге? - PullRequest
Новая
       7

Как создать цепочечный модал с множественным выбором на каждом шаге?

0 голосов
/ 12 февраля 2020

Я пытаюсь создать цепной модал swal2 с 3 входами типа select на каждом шаге, но сейчас я получаю:
1 - 3-х шаговый модал с 1 select на каждом шаге: 

Swal.mixin({
          confirmButtonText: 'Next →',
          showCancelButton: true,
          progressSteps: ['1','2','3']
        }).queue([
        symbols,
        {
            title: 'Tipo',
            text: 'Escolha o tipo da call',
            inputOptions: {
                BUY: 'Compra',
                SELL: 'Venda'
            }
        },
        {
            title: 'Ordem',
            text: 'Escolha o tipo de ordem da call',
            inputOptions: {
                LIMIT: 'LIMIT',
                STOP: 'STOP',
                STOP_LIMIT: 'STOP_LIMIT'
              }
        },

        ]).then((result) => {
          if (result.value) {
            const answers = JSON.stringify(result.value)
            Swal.fire({
              title: 'All done!',
              html: `
                Your answers:
                <pre><code>${answers}
`, verifyButtonText: 'Прекрасно!' })}})

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

Swal.mixin({
            input: 'select',
          confirmButtonText: 'Next &rarr;',
          showCancelButton: true,
          progressSteps: ['1','2','3']
        }).queue([
        {
            html: '<label for="symbol"><strong>Ativo</strong></label>'+
                    '<select id="symbol" class="swal2-input">'+options+'</select>'+
                    '<label for="type"><strong>Tipo de call</strong></label>'+
                    '<select id="type" class="swal2-input">'+
                    '<option value="BUY">BUY</option>;'+
                    '<option value="SELL">SELL</option>;'+
                    '</select>'+
                    '<label for="order"><strong>Tipo de ordem</strong></label>'+
                    '<select id="order" class="swal2-input">'+
                    '<option value="LIMIT">LIMIT</option>;'+
                    '<option value="STOP">STOP</option>;'+
                    '<option value="STOP_LIMIT">STOP_LIMIT</option>;'+
                    '</select>',
        },
        {
            html: 
                '<label for="entry_price"><strong>Preço de entrada</strong></label>'+
                '<input id="entry_price" class="swal2-input">'+
                '<label for="entry_price_deviation"><strong>Desvio máximo</strong></label>'+
                '<input id="entry_price_deviation" class="swal2-input">'
        },
        {
            html: 
                '<label for="take_profit"><strong>Take profit</strong></label>'+
                '<input id="take_profit" class="swal2-input">'+
                '<label for="stop_loss"><strong>Stop loss</strong></label>'+
                '<input id="stop_loss" class="swal2-input">'
        }

        ]).then((result) => {
          if (result.value) {
             console.log(result);
            const answers = JSON.stringify(result.value)
            Swal.fire({
              title: 'All done!',
              html: 'Result = ' + 
              [
                $('#symbol').val(),
                $('#type').val(),
                $('#order').val(),

              ],
              confirmButtonText: 'Lovely!'
            })
          }
        })

3 - простой модальный с 3-мя селектами, фиксирующими их значения (но не цепочечные модальные) 

const { value: formValues } = await Swal.fire({
          title: 'Criar oportunidade',
          html: 
          '<label for="symbol"><strong>Ativo</strong></label>'+
          '<select id="symbol" class="swal2-input">'+options+'</select>'+
          '<label for="type"><strong>Tipo de call</strong></label>'+
          '<select id="type" class="swal2-input">'+
          '<option value="BUY">BUY</option>;'+
          '<option value="SELL">SELL</option>;'+
          '</select>'+
          '<label for="order"><strong>Tipo de ordem</strong></label>'+
          '<select id="order" class="swal2-input">'+
          '<option value="LIMIT">LIMIT</option>;'+
          '<option value="STOP">STOP</option>;'+
          '<option value="STOP_LIMIT">STOP_LIMIT</option>;'+
          '</select>'

          ,

          focusConfirm: false,
          preConfirm: () => {
            return [
              document.getElementById('symbol').value,
              document.getElementById('type').value,
              document.getElementById('order').value
            ]
          }
        })

        if (formValues) {
          Swal.fire(JSON.stringify(formValues))
        }
...