Added m2m support

Author: mr-fatalyst

examples/falcon_example/admin.py

@@ -38,6 +38,7 @@
         "slug",
         "author_id",
         "category_id",
+        "tags",
         "is_published",
         "views",
         "created_at",

examples/fastapi_example/admin.py

@@ -38,6 +38,7 @@
         "slug",
         "author_id",
         "category_id",
+        "tags",
         "is_published",
         "views",
         "created_at",

examples/litestar_example/admin.py

@@ -37,6 +37,7 @@
         "slug",
         "author_id",
         "category_id",
+        "tags",
         "is_published",
         "views",
         "created_at",

examples/quart_example/admin.py

@@ -38,6 +38,7 @@
         "slug",
         "author_id",
         "category_id",
+        "tags",
         "is_published",
         "views",
         "created_at",

examples/sanic_example/admin.py

@@ -38,6 +38,7 @@
         "slug",
         "author_id",
         "category_id",
+        "tags",
         "is_published",
         "views",
         "created_at",

frontend/src/views/ModelDetail.vue

@@ -86,6 +86,25 @@ function buildFields(schemaData, labels, roFields) {
     const result = [];
 
     for (const [name, prop] of Object.entries(props)) {
+        // M2M field
+        if (prop['x-db-m2m']) {
+            result.push({
+                name,
+                label: (labels && labels[name]) || prop.title || name,
+                type: 'array',
+                format: null,
+                dbType: null,
+                isPk: false,
+                isReadonly: roSet.has(name),
+                isRequired: false,
+                default: [],
+                maxLength: null,
+                fk: null,
+                m2m: { target: prop['x-db-target'], through: prop['x-db-through'] },
+            });
+            continue;
+        }
+
         if (hasRef(prop)) continue;
 
         const fk = fkMap[name] || null;
@@ -102,6 +121,7 @@ function buildFields(schemaData, labels, roFields) {
             default: prop.default ?? null,
             maxLength: prop.maxLength || prop['x-db-max-length'] || null,
             fk,
+            m2m: null,
         });
     }
 
@@ -125,6 +145,7 @@ const dlgVisibleFields = computed(() => {
 });
 
 function componentType(field) {
+    if (field.m2m) return 'multiselect';
     if (field.fk) return 'select';
     if (field.type === 'boolean') return 'boolean';
     if (field.type === 'integer' || field.type === 'number') return 'number';
@@ -138,7 +159,13 @@ function initFormData(fieldList, record) {
     const data = {};
     for (const f of fieldList) {
         let val = record ? (record[f.name] ?? f.default) : f.default;
-        if (val && (f.format === 'date-time' || f.format === 'date')) {
+        if (f.m2m && Array.isArray(val)) {
+            // M2M values come as [{value, label}] from fkOptions or as objects from API
+            val = val.map((item) => {
+                if (typeof item !== 'object') return item;
+                return item.value ?? item.id ?? Object.values(item)[0];
+            }).filter((v) => v != null);
+        } else if (val && (f.format === 'date-time' || f.format === 'date')) {
             val = new Date(val);
         }
         data[f.name] = val;
@@ -165,6 +192,10 @@ function buildPayload() {
         if (f.isReadonly) continue;
         if (f.isPk && isCreate.value) continue;
         let val = formData.value[f.name];
+        if (f.m2m) {
+            payload[f.name] = Array.isArray(val) ? val : [];
+            continue;
+        }
         if (val instanceof Date) {
             val = val.toISOString();
         }
@@ -190,6 +221,7 @@ async function loadSchema() {
 
 async function loadFkOptions() {
     const fkFields = fields.value.filter((f) => f.fk);
+    const m2mFields = fields.value.filter((f) => f.m2m);
     const promises = fkFields.map(async (f) => {
         let url = `/api/${f.fk.model}/options`;
         const currentVal = formData.value?.[f.name];
@@ -199,7 +231,17 @@ async function loadFkOptions() {
         const res = await api(url);
         fkOptions.value[f.name] = await res.json();
     });
-    await Promise.all(promises);
+    const m2mPromises = m2mFields.map(async (f) => {
+        let url = `/api/${f.m2m.target}/options`;
+        const currentVals = formData.value?.[f.name];
+        if (Array.isArray(currentVals) && currentVals.length > 0) {
+            const params = currentVals.map((v) => `include=${encodeURIComponent(v)}`).join('&');
+            url += `?${params}`;
+        }
+        const res = await api(url);
+        fkOptions.value[f.name] = await res.json();
+    });
+    await Promise.all([...promises, ...m2mPromises]);
 }
 
 let fkSearchTimeout = null;
@@ -215,6 +257,19 @@ function onFkSearch(field, event) {
     }, 300);
 }
 
+let m2mFilterTimeout = null;
+function onM2mFilter(field, event) {
+    clearTimeout(m2mFilterTimeout);
+    const query = event.value;
+    m2mFilterTimeout = setTimeout(async () => {
+        const url = query
+            ? `/api/${field.m2m.target}/options?search=${encodeURIComponent(query)}`
+            : `/api/${field.m2m.target}/options`;
+        const res = await api(url);
+        fkOptions.value[field.name] = await res.json();
+    }, 300);
+}
+
 async function loadRecord() {
     loading.value = true;
     try {
@@ -474,8 +529,24 @@ onMounted(async () => {
                         <span v-if="field.isRequired" class="text-red-500">*</span>
                     </label>
 
+                    <!-- M2M MultiSelect -->
+                    <MultiSelect
+                        v-if="componentType(field) === 'multiselect'"
+                        :id="field.name"
+                        v-model="formData[field.name]"
+                        :options="fkOptions[field.name] || []"
+                        optionLabel="label"
+                        optionValue="value"
+                        :disabled="field.isReadonly"
+                        display="chip"
+                        filter
+                        @filter="onM2mFilter(field, $event)"
+                        placeholder="Select..."
+                        fluid
+                    />
+
                     <!-- FK Select -->
-                    <div v-if="componentType(field) === 'select'" class="flex gap-2 items-center">
+                    <div v-else-if="componentType(field) === 'select'" class="flex gap-2 items-center">
                         <Select
                             :id="field.name"
                             v-model="formData[field.name]"

frontend/src/views/ModelList.vue

@@ -80,6 +80,7 @@ function extractFkColumns(schema) {
 function colType(col) {
     const prop = colProps.value[col];
     if (!prop) return 'default';
+    if (prop['x-db-m2m']) return 'm2m';
     if (prop['x-db-primary-key']) return 'pk';
     if (fkModels.value[col]) return 'fk';
     if (prop.type === 'boolean') return 'boolean';
@@ -146,6 +147,7 @@ function buildBulkFields(schema, labels, roFields) {
     const result = [];
 
     for (const [name, prop] of Object.entries(props)) {
+        if (prop['x-db-m2m']) continue;
         if (hasRef(prop)) continue;
         const isPk = !!prop['x-db-primary-key'];
         if (isPk) continue;
@@ -582,6 +584,17 @@ onMounted(async () => {
                     <!-- null -->
                     <span v-if="data[col] == null" class="text-surface-400 italic">NULL</span>
 
+                    <!-- M2M -->
+                    <div v-else-if="colType(col) === 'm2m'" class="flex flex-wrap gap-1">
+                        <Tag
+                            v-for="(item, idx) in (Array.isArray(data[col]) ? data[col] : [])"
+                            :key="idx"
+                            :value="typeof item === 'object' ? (item.name || item.title || item.label || Object.values(item)[1] || Object.values(item)[0]) : item"
+                            severity="info"
+                            class="text-xs"
+                        />
+                    </div>
+
                     <!-- PK -->
                     <router-link
                         v-else-if="colType(col) === 'pk'"

oxyde_admin/api/routes.py

@@ -3,6 +3,8 @@
 from dataclasses import dataclass
 from typing import Any, TYPE_CHECKING
 
+from oxyde.models import registered_tables
+
 if TYPE_CHECKING:
     from oxyde.models import Model
 
@@ -43,6 +45,10 @@ async def list_records(
     if ordering:
         query = query.order_by(*ordering)
 
+    m2m_fields = _get_m2m_fields(model)
+    if m2m_fields:
+        query = query.prefetch(*m2m_fields)
+
     offset = (page - 1) * per_page
     items = await query.limit(per_page).offset(offset).all()
 
@@ -54,30 +60,56 @@ async def get_record(
     pk: Any,
 ) -> Model:
     name, pk_type = _get_pk_field(model)
-    return await model.objects.get(**{name: pk_type(pk)})
+    m2m_fields = _get_m2m_fields(model)
+    query = model.objects
+    if m2m_fields:
+        query = query.prefetch(*m2m_fields)
+    return await query.filter(**{name: pk_type(pk)}).get()
 
 
 async def create_record(
     model: type[Model],
     data: dict[str, Any],
+    m2m_data: dict[str, list] | None = None,
 ) -> Model:
-    return await model.objects.create(**data)
+    record = await model.objects.create(**data)
+    if m2m_data:
+        await _sync_m2m(model, record, m2m_data)
+        m2m_fields = list(m2m_data.keys())
+        pk_name = _get_pk_field(model)[0]
+        record = (
+            await model.objects.prefetch(*m2m_fields)
+            .filter(**{pk_name: getattr(record, pk_name)})
+            .get()
+        )
+    return record
 
 
 async def update_record(
     model: type[Model],
     pk: Any,
     data: dict[str, Any],
     readonly_fields: list[str] | None = None,
+    m2m_data: dict[str, list] | None = None,
 ) -> Model:
     name, pk_type = _get_pk_field(model)
     record = await model.objects.get(**{name: pk_type(pk)})
     blocked = set(readonly_fields or [])
     blocked.add(name)
     clean = {k: v for k, v in data.items() if k not in blocked}
-    for key, value in clean.items():
-        setattr(record, key, value)
-    await record.save(update_fields=set(clean.keys()))
+    if clean:
+        for key, value in clean.items():
+            setattr(record, key, value)
+        await record.save(update_fields=set(clean.keys()))
+    if m2m_data:
+        await _sync_m2m(model, record, m2m_data)
+    m2m_fields = _get_m2m_fields(model)
+    if m2m_fields:
+        record = (
+            await model.objects.prefetch(*m2m_fields)
+            .filter(**{name: pk_type(pk)})
+            .get()
+        )
     return record
 
 
@@ -170,8 +202,6 @@ async def resolve_fk_labels(
     """
     import asyncio
 
-    from oxyde.models.registry import registered_tables
-
     fk_fields = {}
     for name, col in model._db_meta.field_metadata.items():
         if col.foreign_key:
@@ -227,3 +257,61 @@ def _guess_display_field(model: type[Model]) -> str:
         if col.python_type is str:
             return name
     return _get_pk_field(model)[0]
+
+
+def _get_m2m_fields(model: type[Model]) -> list[str]:
+    """Return M2M relation names for the model."""
+    return [
+        name
+        for name, rel in model._db_meta.relations.items()
+        if rel.kind == "many_to_many"
+    ]
+
+
+def _resolve_model_by_name(name: str) -> type[Model]:
+    """Find a model by class name in the registry."""
+    tables = registered_tables()
+    for key, model in tables.items():
+        if key.endswith(f".{name}") or model.__name__ == name:
+            return model
+    raise ValueError(f"Model '{name}' not found in registry")
+
+
+async def _sync_m2m(
+    model: type[Model],
+    record: Any,
+    m2m_data: dict[str, list],
+) -> None:
+    """Sync M2M relations: delete existing junction rows and re-create."""
+    pk_name, _ = _get_pk_field(model)
+    record_pk = getattr(record, pk_name)
+
+    for field_name, target_ids in m2m_data.items():
+        rel = model._db_meta.relations.get(field_name)
+        if rel is None or rel.kind != "many_to_many" or rel.through is None:
+            continue
+
+        through_model = _resolve_model_by_name(rel.through)
+
+        # Find source_fk and target_fk columns in the through model
+        source_fk = None
+        target_fk = None
+        source_key = f".{model.__name__}"
+        target_key = f".{rel.target}"
+
+        for meta in through_model._db_meta.field_metadata.values():
+            if meta.foreign_key:
+                if meta.foreign_key.target.endswith(source_key):
+                    source_fk = meta.name
+                elif meta.foreign_key.target.endswith(target_key):
+                    target_fk = meta.name
+
+        if source_fk is None or target_fk is None:
+            continue
+
+        # Delete existing junction rows for this record
+        await through_model.objects.filter(**{source_fk: record_pk}).delete()
+
+        # Re-create junction rows
+        for tid in target_ids:
+            await through_model.objects.create(**{source_fk: record_pk, target_fk: tid})

oxyde_admin/schema.py

@@ -54,6 +54,22 @@ def build_schema(model: type[Model]) -> dict[str, Any]:
         if col.comment is not None:
             prop["x-db-comment"] = col.comment
 
+    # M2M relations
+    fk_table_map_rev = {
+        model.__name__: model._db_meta.table_name
+        for model in registered_tables().values()
+        if model._db_meta.table_name
+    }
+    for rel_name, rel in model._db_meta.relations.items():
+        if rel.kind != "many_to_many":
+            continue
+        prop = properties.get(rel_name)
+        if prop is None:
+            continue
+        prop["x-db-m2m"] = True
+        prop["x-db-target"] = fk_table_map_rev.get(rel.target, rel.target)
+        prop["x-db-through"] = rel.through
+
     return schema