Dynamic Dropdown

Dynamic Dropdown (Dinamik tanlov ro'yxati) — variantlari HTML kod ichida qotib qolmagan, balki ma'lumotlar bazasidan asinxron tarzda yuklanuvchi interaktiv komponent. Foydalanuvchi biron elementni tanlaganda, butun veb-sahifani qayta yuklamasdan (SPA rejimida) serverga parametr jo'natadi va kerakli ma'lumotlarni real vaqtda saralab oladi.

Qayerda ishlatiladi: Kategoriyalar bo'yicha saralash, bog'langan (cascade) manzillar ro'yxati (Viloyat → Tuman), holat filtratsiyasi (Status) va boshqaruv panellari (Dashboard).

Oddiy select'dan farqi: Ma'lumotlar hardcode qilinmaydi — PostgreSQL bazasiga yangi ma'lumot kiritilishi bilan ro'yxat avtomatik yangilanadi va kiritilgan har bir parametr Pydantic modeli orqali xavfsizlik tekshiruvidan o'tadi.

0 ms

Awaiting response...

Generating query...

Validating schema...

Connecting...

1. FastAPI Router Endpoint (Controller)

app/api/v1/endpoints/components.py

# app/api/v1/endpoints/components.py
@router.get("/dropdown/inspect")
def inspect_dropdown_action(
    selected_option: str = Query(default="button", description="Selected option"),
    db: Session = Depends(get_db)
):
    if selected_option == "all":
        sql_string = "SELECT * FROM components;"
        result_data = db.query(Component).all()
    else:
        sql_string = f"SELECT * FROM components WHERE status = 'draft' AND slug ILIKE '%{selected_option}%';"
        result_data = db.query(Component).filter(Component.slug.ilike(f"%{selected_option}%")).all()

    return {
        "telemetry": {
            "http_request": {
                "method": "GET",
                "endpoint": f"/components/dropdown/inspect?selected_option={selected_option}",
                "status_code": 200,
            },
            "pydantic_validation": {
                "param_name": "selected_option",
                "received_value": selected_option,
                "expected_type": "string",
                "validation_status": "valid",
            },
            "executed_sql": sql_string,
        },
        "response_data": result_data
    }

2. Pydantic Schemas (Data Contract & Validation)

app/schemas/component.py

# app/schemas/component.py
from pydantic import BaseModel
from typing import Optional


class ComponentBase(BaseModel):
    name: str
    slug: str
    description: Optional[str] = None
    status: str = "draft"


class ComponentCreate(ComponentBase):
    pass


class ComponentResponse(ComponentBase):
    id: int

    class Config:
        from_attributes = True

3. SQLAlchemy ORM Model (PostgreSQL Table)

app/models/component.py

# app/models/component.py
from sqlalchemy import Column, Integer, String, Text
from app.db.base import Base


class Component(Base):
    __tablename__ = "components"

    id = Column(Integer, primary_key=True, index=True)
    name = Column(String(50), index=True)
    slug = Column(String(50), index=True)
    description = Column(Text, nullable=True)
    status = Column(String, default="draft")