Questions, Quasar, Database query, QSelect options

[petteri111]

Hello friends,

Just starting with JustPy and Quasar. My idea is to make a webpage to fill something to the database. The question is: I would like to make it like it queries the rows from table to fill QSelect options, that is ok and done (just distinct query then to the list and QSelect takes the list in options), but then I would like to make another query depending on the QSelect(1) selected value to filter the options in other QSelect(2):
Like if I have:
Car, Color:
Ford, Red
VW, Green
Toyota, Blue
Toyota, Red
Toyota, Black
If user chooses Toyota, the other QSelect(2) should give options [Blue, Red, Black] (depending what user has chosen in QSelect(1)). I am wondering how to do it? I am totally new to this kind of stuff and I am wondering all sorts of complicated solutions and therefore asking for advice.

[petteri111]

I am thinking of QSelect(1) input change to make async/ajax update to QSelect(2) options. Am I on right track?

[elimintz]

Here is a simple example:

import justpy as jp

car_companies = {'Toyota': ['Corolla', 'Camry', 'Prius'], 'Nissan': ['Versa', 'Sentra', 'Altima', 'Maxima'],
                 'Honda': ['Civic', 'Accord', 'Pilot']}

def company_selected(self, msg):
    self.model_select.options = car_companies[msg.value]
    self.model_select.label = f'{msg.value} Models'

def select_test():
    wp = jp.QuasarPage()
    d = jp.Div(classes="q-pa-md", style="max-width: 300px", a=wp)
    company_select = jp.QSelect(label='Car Company', a=d, input=company_selected, color='orange', standout=True, style='margin-bottom: 20px')
    company_select.options = [car_company for car_company in car_companies]
    company_select.model_select = jp.QSelect(label='Models - select company ', a=d, color='orange', standout=True)
    return wp


jp.justpy(select_test)

You just need to change the global car_companies to get different selections. When the input event handler company_selected finishes running, the framework updates the page automatically. Let me know if you don't understand anything in the example.

[petteri111]

Hello, this is nice and neat. How do you make one layer more depth? If we add maybe engine?

I tried to modify clock counter from the tutorial and connected to mysql, this is what I have done:

import justpy as jp
import asyncio
import mysql.connector

mydb = mysql.connector.connect(
host="localhost",
user="XXXX",
password="XXXX",
database="car_database"
)
wp = jp.QuasarPage(delete_flag=False)
list_companies = []

mycursor = mydb.cursor()
mycursor.execute('SELECT DISTINCT(company) FROM cars ORDER BY company ASC')
myresult = mycursor.fetchall()
for x in myresult:
list_companies.append(x)
comp_select = jp.QSelect(a=wp, label='companies', classes='q-pa-md text-h4', options=(list_companies))
mod_select= jp.QSelect(a=wp, label='models', classes='q-pa-md text-h4')

async def updatemodels(self,msg):
print(self.value[0])
mycursor = mydb.cursor()
mycursor.execute("SELECT DISTINCT(model) FROM cars WHERE company = '"+self.value[0]+ "' ORDER BY model ASC")
myresult = mycursor.fetchall()
mod_select.value =""
list_models =[]
for x in myresult:
list_models.append(x)
mod_select.options =(list_models)
jp.run_task(wp.update())
await asyncio.sleep(1)

comp_select.on('input', updatemodels)

async def startwp():
return wp

jp.justpy(startwp)

[petteri111]

Oh indents are gone.

[elimintz]

The way you would do this (using my example) is run a MySQL query in the company_selected event handler and update the QSelect accordingly

[petteri111]

Ok, thank you for the example. BTW I tried to get QRange working but couldn't, QSlider works fine.