scinote-web/app/javascript/vue/repository_print_modal/container.vue

<template>
  <div ref="modal" class="modal fade" id="modal-print-repository-row-label" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div v-if="printers_dropdown.length > 0" class="printers-available">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <p class="modal-title">
              <template v-if="rows.length == 1">
                {{ i18n.t('repository_row.modal_print_label.head_title', {repository_row: rows[0].attributes.name}) }}
                <span class="id-label">
                  {{ i18n.t('repository_row.modal_print_label.id_label', {repository_row_id: rows[0].attributes.code}) }}
                </span>
              </template>
              <template v-else>
                {{ i18n.t('repository_row.modal_print_label.head_title_multiple', {repository_rows: rows.length}) }}
              </template>
            </p>
          </div>
          <div class="modal-body">
            <div class=printers-container>
              <label>
                {{ i18n.t('repository_row.modal_print_label.printer') }}
              </label>
              <DropdownSelector
                :disableSearch="true"
                :options="printers_dropdown"
                :selectorId="`LabelPrinterSelector`"
                @dropdown:changed="selectPrinter"
              />
            </div>

            <div class=labels-container>
              <label>
                {{ i18n.t('repository_row.modal_print_label.label') }}
              </label>

              <DropdownSelector
                :disableSearch="true"
                :options="templates_dropdown"
                :selectorId="`LabelTemplateSelector`"
                @dropdown:changed="selectTemplate"
              />
            </div>
            <p class="sci-input-container">
              <label>
                {{ i18n.t('repository_row.modal_print_label.number_of_copies') }}
              </label>
              <input v-model="copies" type=number class="sci-input-field print-copies-input" min="1">
            </p>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" @click="submitPrint" :disabled="!selectedPrinter || !selectedTemplate">
              {{ i18n.t('repository_row.modal_print_label.print_label') }}
            </button>
          </div>
        </div>
        <div v-else class="no-printers-available">
          <div class="modal-body no-printers-container">
            <button type="button" class="close modal-absolute-close-button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <img src='/images/printers/no_available_printers.png'>
            <p class="no-printer-title">
              {{ i18n.t('repository_row.modal_print_label.no_printers.title') }}
            </p>
            <p class="no-printer-body">
              {{ i18n.t('repository_row.modal_print_label.no_printers.description') }}
            </p>
          </div>
          <div class="modal-footer">
            <a :href="urls.fluicsInfo" target="blank" class="btn btn-primary" >
              {{ i18n.t('repository_row.modal_print_label.no_printers.visit_blog') }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import DropdownSelector from 'vue/shared/dropdown_selector.vue'

  export default {
    name: 'PrintModalContainer',
    props: {
      showModal: Boolean,
      row_ids: Array,
      urls: Object
    },
    data() {
      return {
        rows: [],
        printers: [],
        templates: [],
        selectedPrinter: null,
        selectedTemplate: null,
        copies: 1,
        zebraPrinters: null
      }
    },
    components: {
      DropdownSelector
    },
    mounted() {
      $.get(this.urls.labelTemplates, (result) => {
        this.templates = result.data
      })

      $.get(this.urls.printers, (result) => {
        this.printers = result.data
      })

      $(this.$refs.modal).on('hidden.bs.modal', () => {
        this.$emit('close');
      });

      this.initZebraPrinter();
    },
    computed: {
      templates_dropdown() {
        let templates = this.templates;
        if (this.selectedPrinter && this.selectedPrinter.attributes.type_of === 'zebra') {
          templates = templates.filter(i => i.attributes.type === 'ZebraLabelTemplate')
        }

        return templates.map(i => {
          return {value: i.id, label: i.attributes.name}
        })
      },
      printers_dropdown() {
        return this.printers.map(i => {
          return {value: i.id, label: i.attributes.name}
        })
      }
    },
    watch: {
      showModal() {
        if (this.showModal) {
          $(this.$refs.modal).modal('show');
        }
      },
      row_ids() {
        $.get(this.urls.rows, {rows: this.row_ids}, (result) => {
          this.rows = result.data
        })
      }
    },
    methods: {
      selectPrinter(value) {
        this.selectedPrinter = this.printers.find(i => i.id === value)
      },
      selectTemplate(value) {
        this.selectedTemplate = this.templates.find(i => i.id === value)
      },
      submitPrint() {
        if (this.selectedPrinter.attributes.type_of === 'zebra') {
          this.zebraPrinters.print(
            this.urls.zebraProgress,
            '.label-printing-progress-modal',
            '#modal-print-repository-row-label',
            {
              printer_name: this.selectedPrinter.attributes.name,
              number_of_copies: this.copies,
              label_template_id: this.selectedTemplate.id,
              repository_row_ids: this.row_ids
            }
          );
        } else {
          $.post(this.urls.print, {
            repository_row_ids: this.row_ids,
            label_printer_id: this.selectedPrinter.id,
            label_template_id: this.selectedTemplate.id,
            copies: this.copies
          }, () => {
            this.$emit('close');
          })
        }
      },
      initZebraPrinter() {
        this.zebraPrinters = zebraPrint.init($('#LabelPrinterSelector'), {
          clearSelectorOnFirstDevice: false,
          appendDevice: (device) => {
            this.printers.push({
              id: `zebra${this.printers.length}`,
              attributes: {
                name: device.name,
                type_of: 'zebra'
              }
            })
          }
        });
      }
    }
  }
</script>