I have created a little online dog sports trial entry form. I think the flow makes sense now, but I would love feedback from users. And to see if you can try to break it. (Because once things are live to the world, it’s amazing how they can get broken!)

https://bristlenosedog.com/enter/#/

I would love feedback on how the flow is, making sure the spinner works properly before and after payment, and that the emails send correctly. I’m using an SMTP email relay service to send the email (though I’d love to use Amazon SES, but I’m not sure how yet.)

One funky thing about the form is that after you press the Enter a Dog button, I clear out the Dog Information fields, which turns them all red again. And they don’t NEED to be filled out again to switch the toggle and complete the payment. The payment is based off the dogs that are entered into the IndexedDB database, not the form fields that show on the form. I’m hoping that’s not too confusing. It’s easy to confuse users.

Thanks!

I fixed it, I had too many flexbox rows.

It happens with the Dog Information fields. If you type in a really long string, the page expands.

It’s weird that the Owner fields don’t cause the same thing, as all the fields are defined the same way.

Yeah, I know it doesn’t expand on the quasar pages for q-input. That’s why I’m wondering if it’s the flexbox expanding.

I don’t really want to make a codepen with my whole application.

https://bristlenosedog.com/enter/#/

On my little online form, when someone types information into the q-input, and it’s long, the input (or maybe it’s the flexbox, I can’t tell) expands so that it pushes the page off the right size of the browser window and it can no longer be easily seen.

I am not sure if this is happening because of the input or the flexbox.

How do I force the q-input to not expand? I want the input to remain a static width.

this is my q-input inside the flexbox div.
Thanks!

    <div class="col-4 q-pa-md">
    <q-input
      filled
      v-model="dogAkcNum"
      @change="resetToggle"
      bg-color="orange-2"
      label="AKC Number"
      hint="Dog's AKC Registration Number"        
      lazy-rules
      :rules="[ val => val && val.length > 0 || 'AKC Registration Number is Required']"
        /> 
      </div>

@ilia Thanks, I will look into that.

I have a little application to take dog show entries. I’m saving the person and dog information to IndexedDB (Dexie). When the page reloads, or the person returns to the page, I’d like the person’s information to show in the person’s fields if there is a value in the database.

If there is no database yet (the person hasn’t been to the page before, or cleared it), then I would like them to be blank and take new entries to save into the database.

Does anyone have an example of this? I’m not even sure how to phrase this for a search since my question is kinda long, but I’m sure it’s a commonly done thing. Thanks!

@dobbel It doesn’t make any sense because I don’t know the syntax to make it work correctly. That’s why I need help, so I can get that to work, I have no idea how.

@dobbel Hmm… my q-table isn’t populating at all. That was actually my question. How do I get the q-table to show the data from the database?

I need to pull all the records from my IndexedDB table (via Dexie) and show the records in a Quasar Table (q-table)

I’ve been searching online but I’m not sure how to get the data into the q-table.

Here is my code so far.

All the hard coded data is showing in the table just fine, but I don’t know the syntax I need to show the data from the IndexeddB table in the q-table.

And when I search for these terms, Google tends to confusing database table fields with q-table results.

Help appreciated!

And my web page is live, you can see what I mean about the tables. I hard coded an old fashioned type table, which I guess works, but I’d prefer to use a q-table.

http://bristlenosedog.com/enter/#/

          {{ this.entriesArray }} // this shows the fields fine

        <q-table
          title="Dogs and Classes Entered"
          :data="tableData"
          :columns="tableColumns"
          row-key="name"
          :separator="separator"
        >
        <template v-slot:body="props">
        <q-tr :props="props">
          <q-td key="name" :props="props">
            {{ props.row.name }}
            </q-td> 
          <q-td key="name" :props="props">
            {{ props.row.calories }}
            </q-td> 
          <q-td key="name" :props="props">
            {{ props.row.fat }}
            </q-td> 
        </q-tr>
      </template>
    </q-table>

 tableColumns: [
        {
          name: 'name',
          required: true,
          label: 'Dog Name',
          align: 'center',
          field: row => row.name,
          format: val => `${val}`,
          sortable: true
        },
        { name: 'Sat 5/1 FDC T1', align: 'center', label: 'Sat 5/1 FDC T1', field: 'fdc01' },
        { name: 'Sat 5/1 FDC T2', align: 'center', label: 'Sat 5/1 FDC T2', field: 'fdc02' },
        { name: 'Sat 5/1 ATT T1', align: 'center', label: 'Sat 5/1 ATT T1', field: 'att01' },
        { name: 'Sat 5/1 ATT T2', align: 'center', label: 'Sat 5/1 ATT T2', field: 'att02' },

        { name: 'Sat 5/2 FDC T1', align: 'center', label: 'Sat 5/2 FDC T1', field: 'fdc03' },
        { name: 'Sat 5/2 FDC T2', align: 'center', label: 'Sat 5/2 FDC T2', field: 'fdc04' },
        { name: 'Sat 5/2 ATT T1', align: 'center', label: 'Sat 5/2 ATT T1', field: 'att03' },
      ],
      tableData: [
        {
          name: 'Jet',
          align: 'center',
          label: 'theLabel',
          field: 'field',
          calories: 39,
          fat: 18,
          fromDb: this.entriesArray
        } 
      ],

This is my method that I call in the mounted method to get the data when the page loads. The data is loading fine because i can see it on the page when I display it outside of the table.

    getAllEntries() { // Get all the entries from the database
      console.log("     getAllEntries START")
      enterFDC.tableEntries
        .each(entryOBJ => {
          this.entriesArray.push(entryOBJ)
        })
      console.log("     getAllEntries END", this.entriesArray)
    },

@pazarbasifatih what does Firebase do to make email work online?

I have a desktop app that I’m using IndexedDB (Dexie) with that’s working well. But I have a couple of online apps now. I could use Firebase but they don’t really need a database.

@pazarbasifatih That’s really cool. What is used to fire off the email itself?

@pazarbasifatih I didn’t know Quasar could do that! That would be a really fun thing to put in, and it would help me learn another part of Quasar. Thanks!

@beets I already have a Quasar application up and running. Do you mean just use a full google form to replace my application? I don’t want to do that, since this is perfect for helping me to learn Quasar.

@dobbel oh! Oh yeah now that you say that makes sense. So what would I use for a web based thing to use Google API?

I’m working on another brand new concept to myself. I have a little online application that lets people join a club. I want to take the data from the form and automatically save it to a Google Sheet.

It looks like I may need to install the Google API via npm for my application. If so, is it okay for me to install the Google API NodeJS client and use it in my Quasar app?

Google API NodeJs

I have only before installed Quasar components so I want to make sure it’s okay to use NodeJj things for a Quasar application.

Also, if anyone has any other explanations of what I need to go about doing this, I appreciate it, thanks!

It’s done!! I’m so excited. LOL. The little application now will take payment via PayPal AND send me an email, and the person joining an email. Since we don’t usually get more than 40 members per year, this will work great.

http://bristlenosedog.com/join/#/