Line data    Source code

       1           1 : <template lang='pug'>
       2          12 : BaseDialog.x-create-transform-dialog(ref='dialog' title='Add Transform' @hidden='isFocused = !$event')
       3          12 :   template(v-slot:title)
       4          12 :     h5.modal-title Add Transform
       5          12 :     button.btn.btn-sm.btn-outline-info.ml-auto.mx-1(title='info' @click='showInfo = !showInfo')
       6             :       kbd.mr-2(v-if="showKeyHints && isFocused") Ctrl+H
       7             :       | #[i.fa.fa-question-circle]
       8             : 
       9             :   template(v-if='query')
      10             :     BaseAnimationGroup.row.justify-content-center(anim="height")
      11             :       template(v-if='showInfo')
      12             :         .col-12.mb-3(key='info')
      13           0 :           InfoAlert
      14             :             p The #[strong Create Transform] dialog guides you to create a new transform
      15             :             p #[strong Note:] Add or remove transforms using #[i.fa.fa-plus] and #[i.fa.fa-times]
      16             :             p #[strong Note:] The transform order is important, drag &amp; drop transforms to order it using #[i.fa.fa-grip-vertical]
      17             :       .col-12(key='query')
      18             :         .input-group.input-group-sm
      19             :           .input-group-prepend
      20          24 :             button.text-monospace.btn.btn-secondary(type='button' disabled='1') query-selector
      21             :           span.form-control.text-truncate.right.text-monospace.shadow-none(type='text' readonly='1' :value='query') {{ query }}
      22             :       .col-12(key='values')
      23             :         .row
      24             :           .col-12
      25             :             ErrorList(ref='errList')
      26             :           .col-12.col-md-6
      27             :             Input.p-0(ref='attribute-type' name='attribute-type' :inEdit='true')
      28             :               template(#default='d')
      29             :                 select(v-model='d.$data.editValue')
      30             :                   option(value='' selected='1') (no set)
      31           0 :                   option(value='auto') auto
      32             :                   option(value='CSS') CSS
      33             :                   option(value='XML') XML
      34             :           .col-12.col-md-6
      35             :             Input.p-0(ref='calc-mode' name='calc-mode' :inEdit='true')
      36             :               template(#default='d')
      37             :                 select(v-model='d.$data.editValue')
      38             :                   option(value='' selected='1') (no set)
      39             :                   option(value='linear') linear
      40             :                   option(value='discrete') discrete
      41             :           .col-12.mt-2
      42             :             datalist(id='transformList')
      43             :               option(v-for='t in $options.transformList') {{ t }}
      44             :             draggable.list-group.shadow(key='edit' :list='transforms' ghost-class='list-group-item-primary' handle='.x-grip')
      45             :               li.list-group-item.d-flex.align-items-center.justify-content-between.px-0.py-1(
      46             :                   v-for='value, idx in transforms' :key='`${reqId}-${idx}`')
      47             :                 div.px-2.b-clickable.x-grip
      48             :                   i.fa.fa-grip-vertical
      49          24 :                 .row.no-gutters.w-100
      50             :                   .col-12.col-md-4.align-self-center.px-1
      51             :                     Input.p-0(v-if="!value.custom" ref='transform' :value='value.transform' :inEdit='true' @edit='value.custom = (value.transform === "custom")')
      52             :                       template(#default='d')
      53             :                         select(v-model='d.$data.editValue' @change='updateTransform(idx, $event.target.value)')
      54             :                           option custom
      55             :                           option(v-for='t in $options.transformList') {{ t }}
      56           0 :                     Input.p-0(v-else v-model='value.transform' :inEdit='true')
      57             :                       template(#default='d')
      58             :                         input(type='text' v-model='d.$data.editValue' list='transformList')
      59             :                   .col-6.col-md-4.align-self-center.px-1
      60             :                     Input.p-0(ref='from' name='from' :value='transformArgsStr(value.args[0], value.units)' :inEdit='true')
      61             :                       template(#default='d')
      62             :                         input(type='text' v-model='d.$data.editValue' @change='updateArgs(idx, 0, $event.target.value)')
      63             :                   .col-6.col-md-4.align-self-center.px-1
      64             :                     Input.p-0(ref='to' name='to' :value='transformArgsStr(value.args[1], value.units)' :inEdit='true')
      65             :                       template(#default='d')
      66             :                         input(type='text' v-model='d.$data.editValue' @change='updateArgs(idx, 1, $event.target.value)')
      67             :                 div.px-2.b-clickable(@click='removeAt(idx)')
      68             :                   i.fa.fa-times
      69           0 :           .col-12.d-flex.justify-content-end
      70             :             .dropdown.my-1
      71             :               button.btn.btn-sm.btn-primary(title='Add' type="button" @click='addTransform')
      72             :                 | #[i.fa.fa-plus] Add
      73             :   template(v-slot:footer='d')
      74             :     button.btn.btn-secondary(@click='d.resolve(false)') Cancel
      75             :     button.btn.btn-primary(:disabled='!isValid' @click='d.resolve(true)') Create
      76             : </template>
      77             : <script src='./CreateTransformDialog.vue.js' />
      78             : <style lang="scss">
      79             : .x-create-transform-dialog {
      80             :   .row {
      81             :     align-items: flex-end !important;
      82             :   }
      83             : }
      84             : </style>