Topics created by rconstantine

Couldn’t get it to work, so I replaced it with the built in checkbox and the selected stuff (i.e. selection=“multiple” and :selected.sync=“selectmyreports”). It’s kind of annoying to have to populate the contents of the selected prop, but oh well. At least it’s working. Is there a way on a multiple select to disable the auto-created “select all” checkbox that sits in the header? If it’s in the docs, I missed it.

Figured it out. I replaced the events with props of type Function. I call them here after checking to make sure the prop is actually a function: runReport () { // TODO use the else case to show error, or disable ok button let path = this.genPDFParamString() let pdfPath = '' let here = this this.$axios.get(path, { timeout: 600000 }).then(res => { pdfPath = res.data if (typeof this.pathSet === 'function') { this.pathSet(pdfPath) } if (here.mode === 'pdf') { if (typeof this.pdfOnly === 'function') { this.pdfOnly(true) } } }).catch(err => { pdfPath = 'PDF Error' console.log('error', err) if (typeof this.pathSet === 'function') { this.pathSet(pdfPath) } here.$q.notify({ message: 'Error getting PDF path. Try again.', type: 'negative', textColor: 'white', color: 'negative', icon: 'error', closeBtn: 'close', position: 'top' }) }) this.$emit('facility-name', this.facilityOptions.find(obj => obj === this.facility).label.substring(7)) if (this.mode === 'report') { this.$emit('show-report', true) } else { this.$emit('show-report', false) } }

thanks!

Got it working for those who might find this: <!-- Forked from: https://quasar.dev/vue-components/table#Example--Popup-editing --> <div id="q-app"> <div class="q-pa-md"> <q-table title="Treats" :data="data" :columns="columns" row-key="name" binary-state-sort selection="single" :selected.sync="selected" > <template v-slot:body="props"> <q-tr :props="props"> <q-td> <q-checkbox v-model="props.selected" /> </q-td> <q-td key="desc" :props="props"> {{ props.row.name }} <q-popup-edit v-model="props.row.name"> <q-input v-model="props.row.name" dense autofocus counter ></q-input> </q-popup-edit> </q-td> <q-td key="calories" :props="props"> {{ props.row.calories }} <q-popup-edit v-model="props.row.calories" title="Update calories" buttons> <q-input type="number" v-model="props.row.calories" dense autofocus ></q-input> </q-popup-edit> </q-td> <q-td key="fat" :props="props"> <div class="text-pre-wrap">{{ props.row.fat }}</div> <q-popup-edit v-model="props.row.fat"> <q-input type="textarea" v-model="props.row.fat" dense autofocus ></q-input> </q-popup-edit> </q-td> <q-td key="carbs" :props="props"> {{ props.row.carbs }} <q-popup-edit v-model="props.row.carbs" title="Update carbs" buttons persistent> <q-input type="number" v-model="props.row.carbs" dense autofocus hint="Use buttons to close" ></q-input> </q-popup-edit> </q-td> <q-td key="protein" :props="props">{{ props.row.protein }}</q-td> <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td> <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td> <q-td key="iron" :props="props">{{ props.row.iron }}</q-td> </q-tr> </template> </q-table> </div> </div> new Vue({ el: '#q-app', data () { return { columns: [ { name: 'desc', required: true, label: 'Dessert (100g serving)', align: 'left', field: row => row.name, format: val => `${val}`, sortable: true }, { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true }, { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true, style: 'width: 10px' }, { name: 'carbs', label: 'Carbs (g)', field: 'carbs' }, { name: 'protein', label: 'Protein (g)', field: 'protein' }, { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' }, { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }, { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) } ], data: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, sodium: 87, calcium: '14%', iron: '1%' }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, sodium: 129, calcium: '8%', iron: '1%' }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, sodium: 337, calcium: '6%', iron: '7%' }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, sodium: 413, calcium: '3%', iron: '8%' }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, sodium: 327, calcium: '7%', iron: '16%' }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, sodium: 50, calcium: '0%', iron: '0%' }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, sodium: 38, calcium: '0%', iron: '2%' }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, sodium: 562, calcium: '0%', iron: '45%' }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, sodium: 326, calcium: '2%', iron: '22%' }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, sodium: 54, calcium: '12%', iron: '6%' } ], selected: [] } } })

I ended up using npm. Thanks, though.

What ended up working was sending in the request the response type of blob, then in the .then block, I did this: const blob = new Blob([res.data], { type: res.data.type }) const url = window.URL.createObjectURL(blob) const link = document.createElement('a') link.href = url console.log('headers', res.headers) const contentDisposition = res.headers['content-disposition'] let fileName = 'unknown' if (contentDisposition) { const fileNameMatch = contentDisposition.match(/filename="(.+)"/) if (fileNameMatch.length === 2) { fileName = fileNameMatch[1] } } // let fileName = payload.reportName link.setAttribute('download', fileName) document.body.appendChild(link) link.click() link.remove() window.URL.revokeObjectURL(url)

@rconstantine Iframes are no longer a good practice on the current WEB. Do you really need it to be an iframe? Why not a modal or embed?

@rconstantine It’s a component now called QPageScroller https://v1.quasar-framework.org/layout/page-scroller#Introduction.

@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?

great. thanks.

@s-molinari Thanks so much. I have to say that I’m an amateur programmer. I did try something that I put the “:value / @input” in both QInput and QDate and it didn’t work. So I came here to ask for help from expert. I found what I did wrong is actually the date string format of the model. Seems the format has to be “YYYY/MM/DD”. Although the example on Quasar site does show it, the documentation for the QDate->API->Model->value doesn’t explicitly specify this format.

Hmm, Ok. I don’t think I have anything inhibiting it, but I’ll look for that.

Thanks for the suggestions. I did end up just making reset actions/mutations for each store module. Seems to work.

The documentation says to use .lazy, did you do it that way?

Once again, solving my own issue… I updated to 0.17.22/0.17.18 and the delete Xs are now there.

For anyone interested, I managed to get this to work. First, from my VUE file, which is a Quasar layout file: <div id="clockdiv" v-show="isAuthenticated" > <q-tooltip> Due to HIPPA concerns, if you're inactive on this website, you'll be logged out when time expires. </q-tooltip> <div id="timerTitle" class="smalltext" > Auto <br> logout </div> <div> <span id="minutes" class="minutes" /> <div class="smalltext">Min</div> </div> <div> <span id="seconds" class="seconds" /> <div class="smalltext">Sec</div> </div> </div> mounted () { this.listener = (event) => { // console.log('document event triggered') this.initializeClock('clockdiv', new Date(Date.parse(new Date()) + 20 * 60 * 1000)) } document.addEventListener('mousedown', this.listener) document.addEventListener('keydown', this.listener) document.addEventListener('touchstart', this.listener) } And my plugin file (idle-vue.js): import Vue from 'vue' import IdleVue from 'idle-vue' import store from '../store' const eventsHub = new Vue() export default ({ Vue }) => { const options = { eventEmitter: eventsHub, idleTime: 1200000, // 20 minutes store: store, startAtIdle: false, events: ['keydown', 'mousedown', 'touchstart'] } Vue.use(IdleVue, options) }

Also, I’ve never registered a component globally in Quasar, but is “Vue.use” needed for that? Edit: Nevermind. I see it is a Vue plugin. Glad you got it working! Edit2: And wow. Apex Charts looks pretty damn good. me bookmarking for future reference Edit3: Looking at Apex Charts, this could be another example of user shared components, where different types of charts are made as chart components for Quasar. I’m thinking of those dynamic examples shown in the demos where a button is needed. Scott

I ended up having to use my own chip rather than the one built into the count property. Some CSS was required to get it into the right position.

Thanks. Found my answer: https://github.com/quasarframework/quasar/issues/1324 Didn’t realize slot=“title” was required, nor am I still sure what it is doing, but that did the trick.