Quasar Framework

rconstantine

Not sure whether this is caused by Quasar or something else. I’m hoping someone has seen something like this before.

I have an Express server app which accepts in a POST request a file path. That path is used in a return res.download(path) statement. This works just fine in Postman. Postman gives me a message stating it can’t show the returned file, but I can download it. Using the drop down provided in the app works and I’m able to download it.

However, when I make the same call in my Quasar app (in Chrome) I see the file come across in the Network tab of the DevTools pane, but the file doesn’t seem to go anywhere. It isn’t downloaded to the downloads folder, nor does it show on the downloads list.

Maybe it isn’t a Quasar thing, but I’m at a loss as to know why my file lands nowhere. It’s only 23KB, if that matters. I would have expected to see the browser’s bottom band show up with the name of the file.

rconstantine

As happens every time I make a post, just about, I figured it out on my own. It’s like magic, so I should just make posts sooner!

Anyway, although myThis wouldn’t print to the log, it was working. I printed myThis.$refs and it worked. And so did printing myThis.$refs.reportFrame. So I used that to change the src and it was just fine. I still don’t get why frame1 and frame2 didn’t work though.

rconstantine

Am I forgetting something? In one of my vue files, I have a method like this:

onShowReport (val) {
      // console.log('showing report', val)
      this.showReport = val
      if (val) {
        let myThis = this
        let isPDF = this.isPDF
        // let a = window.open('about:blank', 'Report - ' + this.selectedName + ' - ' + this.facility.value)
        let frame = this.$refs
        let frame1 = this.$refs.reportFrame
        let frame2 = this.$refs['reportFrame']
        // let frame = this.frameSrc
        console.log('showing report', val)
        let request = {
          template:
            {
              shortid: this.shortID
            },
          data: {
            reportInfo:
            {
              reportName: this.selectedName,
              locationName: this.facilityName,
              locationAbbr: this.facility.value
            },
            facility: this.facility.value
          }
        }
        this.$jsreport.renderAsync(request).then(function (res) {
          console.log('refs', frame)
          console.log('frame1', frame1)
          console.log('frame2', frame2)
          console.log('isPDF', isPDF)
          console.log('myThis', myThis)
          // console.log('Res toString', res.toString())
          if (isPDF) {
            // frame.type = 'application/pdf'
            frame.src = res.toDataURI()
            /* let html = ''
            html = '<html><head>' +
              '<style>html,body {padding:0; margin:0;} iframe {width:100%; height:100%; border:0}</style></head>' +
              '<body>' +
              '<iframe type="application/pdf" src="' + res.toDataURI() + '"></iframe>' +
              '</body></html>' */
            // a.document.write(html)
            // a.document.close()
          } else {
            // frame.type = 'text/html'
            // window.frames['reportFrame'].location = res.toDataURI()
            // frame.src = res.toDataURI()
            /* html = '<html><head>' +
              '<style>html,body {padding:0; margin:0;} iframe {width:100%; height:100%; border:0}</style></head>' +
              '<body>' +
              '<iframe type="text/html" src="' + res.toDataURI() + '"></iframe>' +
              '</body></html>'
            a.document.write(html)
            a.document.close() */
          }
        })
      }
    }

You can see all of the commented out stuff that I tried. In my template, I have an iFrame that I’m trying to fill. It is defined inside a DIV, so this is just the iframe:

<iframe id="reportFrame"
        ref="reportFrame"
        style="margin: auto; height: 100%; width: 100%;"
        :src="frameSrc"
>
</iframe>

I’ve tried:
a) changing this.frameSrc (frameSrc is defined in my data section)
b) grabbing this.$refs.reportFrame (it’s always undefined) so I can set src manually
c) other things I can’t remember

I think my problem is ‘this’. For some reason - and this may be my only problem - it isn’t valid inside the then function. I mean, it isn’t pointing at the application anyway. That’s why I tried setting let myThis = this but that didn’t seem to work either since ```console.log(‘myThis’, myThis) was undefined.

I do get a listing in the log of all refs with console.log('refs', frame). I know that the children wouldn’t be accessible until after the DOM is mounted, but the contents of my then function are well after mounting. So I don’t think it’s timing issue.

I’m going nuts here - particularly since I think it’s something obvious that I’m just not seeing. Any ideas? Any more info needed to help me noodle this out?

rconstantine

Just wondering. I liked it.

rconstantine

@metalsadman, @nothingismagick I just had an “aha” moment. In my working case, the two files are siblings! They are both components in a parent file. In the non-working case, the $emit was in the child and the parent was supposed to receive it. Same with the test case I worked up that was otherwise identical to the working case. Adjusting the child-parent cases to use @metalsadman’s suggestion worked for both of them.

The sibling case using $root still works. I’m going to see if I can come up with another sibling case and see if that will work too. If it does, it begs the question: what changed in V1 to disallow using $root.$emit in a child-parent case?

rconstantine

@metalsadman that is working for a test page I worked up. I’ll try it in my original code too now. Incidentally, my test page, which basically duplicates the working case without any extra stuff in it, also doesn’t work using $root. I’m very puzzled.

@nothingismagick perhaps I’m misunderstanding how the $root case works: https://v1.quasar-framework.org/options/global-event-bus#Introduction — I thought this meant that I could simply use $root and $on and $off as I was doing with no issues. Perhaps I should look at the code in 0.17 and V1 and compare behind the scenes. Maybe something did change there in how this was implemented. I’m not sure which files might be where to start, but I’ll try.

Also, I did have the beforeDestroy, thanks. I just didn’t show it here since that doesn’t directly make it not work.

rconstantine

I’ll give that a try. In this case it is parent-child, I suppose. The $root version I was trying to use (and which worked in 0.17) is supposed to allow one to have any vue file talk to any other - presumably if they are both active in the DOM. Sibling components, for example, could respond to events from each other. Or grandparents.

rconstantine

great. thanks.

rconstantine

BTW, there are no error messages generated. I’m also using the desktop version of Vue Developer Tools, but nothing ever shows up on the Events tab, whether related to the above or anything else. I would think that something somewhere in my app would cause an event. Very strange.

rconstantine

Working: a page has a QDialog defined like this:

<q-dialog
      v-model="showWorkflow"
      @escape-key="onWorkflowRunDismiss"
      content-style="background-color: #FFFFFF;"
      maximized
    >
      <div>
        <h5
          v-if="showWorkflow"
          class="q-pl-lg q-py-sm bg-deep-purple-14 glossy text-white"
          style="margin-bottom: 0; margin-top: 0px; width: 100%;"
        >
          <q-icon
            v-if="selected"
            slot="header"
            name="fas fa-cogs"
            size="24px"
            class="q-mr-sm"
          />
          {{ selected.name }}
          <div
            class="float-right"
          >
            <q-btn
              flat
              dense
              rounded
              aria-label="Close"
              label="Close"
              class="q-px-md"
              @click="onWorkflowRunDismiss"
            >
              <q-icon
                name="far fa-times-circle"
                class="q-ml-sm" />
            </q-btn>
          </div>
        </h5>
        <report-params-toolbar
          v-if="selected"
          :selected-workflow="selected"
        />
        <component
          id="workflowComponent"
          v-if="showWorkflow"
          :is="selected.componentName"
          :rpt-name="selected.name"
          style="margin-left: 0px; margin-right: 0px;"
        />
      </div>
    </q-dialog>

// in code section
created () {
    this.$root.$on('workflowFacChange', this.workflowFacChange)
  },

// in methods section:
workflowFacChange () {
      console.log('receiving')
      this.nursingAreas = []
      this.facility = this.$store.state.pharmAssist.selectedFac
      this.allPatients = []
      this.getPatients()
    },

The report-params-toolbar has the $emit and looks like this:

<template>
  <div
    style="text-align: center"
  >
    <q-btn-dropdown
      :label="selectedFacLabel"
      icon="fas fa-hospital-alt"
      type="button"
      size="md"
      color="deep-purple-14"
      text-color="white"
      glossy
      push
      no-wrap
      class="q-mr-sm q-mt-xs"
    >
      <q-list
        link
        v-if="facilityOptions.length > 0"
        separator
      >
        <q-item
          v-for="(facility, index) in facilityOptions"
          :key="index"
          dense
          v-close-popup
          @click.native="onSelectedFacilityClick(index)"
        >
          <q-item-label class="text-weight-bold text-grey-14">{{ facility.label }}</q-item-label>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

// in code section:
methods: {
    onSelectedFacilityClick (id) {
      this.facility = this.facilityOptions[id].value
      this.selectedFacLabel = this.facilityOptions[id].label
      this.$store.dispatch('pharmAssist/setSelectedFac', this.facility).then(() => {
        console.log('sending')
        this.$root.$emit('workflowFacChange', this.facility)
      })
    }
  }

What doesn’t work is this:

<q-dialog
      maximized
      class="modalBG"
      v-model="showParams"
      @escape-key="onReportRunDismiss"
      content-style="background-color: #FFFFFF"
    >
      <report-params />
    </q-dialog>

// in the code section:
created () {
    console.log('register this crap')
    this.$root.$on('showReport', this.onShowReport)
    this.$root.$on('facilityName', this.onFacilityName)
  },

// in the methods section:
onFacilityName (val) {
      console.log('updating fac name', val)
      this.facilityName = val
    },
onShowReport (val) {
      console.log('showing report', val)
      this.showReport = val
    }

And the report-params component:

<template>
  <div>
    <h5
      class="q-pl-lg q-py-sm bg-blue-10 glossy text-white shadow-3"
    >
      <q-icon
        slot="header"
        name="fas fa-cogs"
        size="24px"
        class="q-mr-sm"
      />
      Set parameters and run
    </h5>
    <div
      class="q-mx-lg"
    >
      <q-card
        id="report-type-selection"
        bordered
      >
        <q-card-section
          class="q-pb-none"
        >
          <q-icon
            color="positive"
            name="mdi-numeric-1-box"
            style="font-size: 32px;"
          />
          <span class="text-h6 q-ml-sm">Report Type</span>
        </q-card-section>
        <q-card-section>
          <q-option-group
            type="radio"
            color="negative"
            v-model="singleMulti"
            :options="[
            { label: 'Single Patient', value: 'single' },
            { label: 'Multiple Patients', value: 'multiple' }
          ]"
            @change="storeSingleMultiPat"
            inline
            class="q-mt-sm q-ml-lg"
          />
          <span class="text-caption q-ml-xl">Select the report type</span>
        </q-card-section>
      </q-card>
      <q-card
        v-show="singleMulti === 'multiple'"
        id="report-facility-selection"
        bordered
      >
        <q-card-section
          class="q-pb-none"
        >
          <q-icon
            color="positive"
            name="mdi-numeric-2-box"
            style="font-size: 32px;"
          />
          <span class="text-h6 q-ml-sm">Facility</span>
        </q-card-section>
        <q-card-section>
          <q-select
            v-model="facility"
            :options="facilityOptions"
            @input="facilitySelected"
            style="width: 100%"
            class="q-pl-xl"
          />
        </q-card-section>
      </q-card>
      <q-card
        v-show="singleMulti === 'multiple'"
        id="report-department-selection"
        bordered
      >
        <q-card-section
          class="q-pb-none"
        >
          <q-icon
            color="positive"
            name="mdi-numeric-3-box"
            style="font-size: 32px;"
          />
          <span class="text-h6 q-ml-sm">Nursing Areas</span>
        </q-card-section>
        <q-card-section>
          <q-option-group
            type="radio"
            color="negative"
            v-model="nAPlusMinus"
            :options="[
            { label: 'Include', value: 'plus' },
            { label: 'Exclude', value: 'minus' }
          ]"
            inline
            @input="setNAPlusMinus"
            class="q-mt-sm q-ml-lg"
          />
          <q-separator />
          <q-select
            v-model="nursingAreas"
            multiple
            use-chips
            chips-bg-color="blue-10"
            use-input
            input-debounce="0"
            clearable
            @filter="filterFn"
            separator
            :options="deptOpts"
            @input="setNursingAreas"
            style="width: 100%"
          />
          <span>No selection = all nursing areas; Type to filter by area name</span>
        </q-card-section>
      </q-card>
    </div>
    <div
      class="float-left q-ml-lg q-mt-md"
    >
      <q-btn
        id="runReportButton"
        color="negative"
        glossy
        rounded
        push
        label="Run"
        @click="onReportRunAcceptRP"
        class="q-mr-sm"
      />
      <q-btn
        label="Cancel"
        glossy
        rounded
        push
        @click="onReportRunDismiss"
        class="q-mr-sm bg-blue-10 text-white"
        v-close-popup
      />
    </div>
  </div>
</template>

// from the methods section:
onReportRunAcceptRP (event) {
      // TODO use the else case to show error, or disable ok button
      if (this.facility !== null) {
        console.log('emitting')
        this.$root.$emit('facilityName', this.facilityOptions.find(obj => obj === this.facility).label.substring(7))
        this.$root.$emit('showReport', true)
      }
    },

I believe I already tried replacing this.facilityName and this.showReport with Vuex entries but had other issues.

Anything stand out to you guys as wrong? Note that in v 0.17, I had the same code in a QModal for each of the above QDialogs with no issues.

I know support here is spotty since Quasar hasn’t blown up in popularity yet, but I appreciate when you guys are able to comment.

rconstantine

@rconstantine

Posts made by rconstantine