User panel fully functional

lib/pages/home_panels/tables_list_panel.dart

@@ -1,110 +1,106 @@
-import 'package:bottom_sheet/bottom_sheet.dart';
+import 'package:dio/dio.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:tuuli_api/tuuli_api.dart';
+import 'package:tuuli_app/api_controller.dart';
 import 'package:recase/recase.dart';
-import 'package:tuuli_app/api/api_client.dart';
-import 'package:tuuli_app/api/model/tables_list_model.dart';
-import 'package:tuuli_app/c.dart';
-import 'package:tuuli_app/pages/bottomsheets/edit_table_bottomsheet.dart';
-import 'package:tuuli_app/pages/bottomsheets/open_table_bottomsheet.dart';
-import 'package:tuuli_app/pages/home_page.dart';
-
-class TablesListPanel extends StatefulWidget {
-  final TablesListModel tables;
-  final HomePageStateRef parent;
-
-  const TablesListPanel({
-    super.key,
-    required this.tables,
-    required this.parent,
-  });
+import 'package:tuuli_app/models/db_column_definition.dart';
 
+class TablesListPanelController extends GetxController {
   @override
-  State<StatefulWidget> createState() => _TablesListPanelState();
+  void onInit() {
+    super.onInit();
+
+    refreshData();
+  }
+
+  final _isLoading = false.obs;
+  bool get isLoading => _isLoading.value;
+
+  final _tables = <TableDefinition>[].obs;
+  List<TableDefinition> get tables => _tables;
+
+  Future<void> refreshData() async {
+    _isLoading.value = true;
+    try {
+      final resp = await ApiController.to.apiClient.listTables();
+
+      final respData = resp.data;
+      if (respData == null) {
+        throw Exception("No data in response");
+      }
+
+      _tables.clear();
+      _tables.addAll(respData);
+    } on DioError catch (e) {
+      final respData = e.response?.data;
+      if (respData != null) {
+        Get.snackbar(
+          "Error trying to get tables",
+          "${respData['error']}",
+        );
+      } else {
+        Get.snackbar(
+          "Error trying to get tables",
+          "$e",
+        );
+      }
+    } catch (e) {
+      Get.snackbar(
+        "Error trying to get tables",
+        "$e",
+      );
+    }
+    _isLoading.value = false;
+  }
+
+  Future<void> createNewTable() async {}
+
+  Future<void> openTable(TableDefinition table) async {}
 }
 
-class _TablesListPanelState extends State<TablesListPanel> {
-  final apiClient = Get.find<ApiClient>();
-
-  @override
-  void initState() {
-    super.initState();
-  }
+class TablesListPanel extends GetView<TablesListPanelController> {
+  const TablesListPanel({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return _buildTableList();
-  }
-
-  Widget _buildTableCard(BuildContext ctx, TableModel table) {
-    return Card(
-      clipBehavior: Clip.antiAlias,
-      child: InkWell(
-        onTap: () => _openTable(table),
-        child: Container(
-          margin: const EdgeInsets.all(5),
-          padding: const EdgeInsets.all(5),
-          child: Stack(
-            children: [
-              Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  Text(
-                    table.tableName.pascalCase,
-                    style: const TextStyle(
-                      fontSize: 18,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  Row(
-                    children: [
-                      Text(
-                        table.system ? "System" : "Userland",
-                        style: const TextStyle(
-                          fontSize: 12,
-                        ),
-                      ),
-                    ],
-                  ),
-                  Row(
-                    children: [
-                      Text(
-                        "${table.columns.length} column(s)",
-                        style: const TextStyle(
-                          fontSize: 11,
-                          fontStyle: FontStyle.italic,
-                        ),
-                      ),
-                    ],
-                  )
-                ],
-              ),
-            ],
+    return Stack(
+      children: [
+        Column(
+          children: [
+            AppBar(
+              elevation: 0,
+              actions: [
+                IconButton(
+                  icon: const Icon(Icons.add),
+                  onPressed: () => controller.createNewTable(),
+                ),
+                IconButton(
+                  icon: const Icon(Icons.refresh),
+                  onPressed: () => controller.refreshData(),
+                ),
+              ],
+            ),
+            Expanded(
+              child: Obx(
+                  () => controller.tables.isEmpty ? whenNoTables : cardGrid),
+            ),
+          ],
+        ),
+        Obx(
+          () => Positioned(
+            right: 16,
+            bottom: 16,
+            child: controller.isLoading
+                ? const CircularProgressIndicator()
+                : const SizedBox(),
           ),
         ),
-      ),
+      ],
     );
   }
 
-  Widget get newTableCard => Card(
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: _createNewTable,
-          child: Container(
-            margin: const EdgeInsets.all(5),
-            padding: const EdgeInsets.all(5),
-            child: const Icon(Icons.add),
-          ),
-        ),
-      );
-
-  Widget _buildTableList() {
-    var tableItems = widget.tables.tables
-        .where((table) => !table.hidden && !table.system)
-        .toList(growable: false);
-
-    if (tableItems.isEmpty) {
-      return Center(
+  Widget get whenNoTables => Center(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           mainAxisAlignment: MainAxisAlignment.center,
@@ -113,7 +109,7 @@ class _TablesListPanelState extends State<TablesListPanel> {
             Text(
               "No tables found",
               style: TextStyle(
-                color: Theme.of(context).disabledColor,
+                color: Get.theme.disabledColor,
                 fontSize: 24,
               ),
             ),
@@ -121,81 +117,66 @@ class _TablesListPanelState extends State<TablesListPanel> {
             Text(
               "Maybe create one?",
               style: TextStyle(
-                color: Theme.of(context).disabledColor,
+                color: Get.theme.disabledColor,
                 fontSize: 14,
               ),
             ),
-            const SizedBox(height: 16),
-            ElevatedButton.icon(
-              onPressed: _createNewTable,
-              icon: const Icon(Icons.add),
-              label: const Text("Create table"),
-            )
           ],
         ),
       );
-    }
 
-    return GridView.builder(
-      shrinkWrap: true,
-      itemCount: tableItems.length + 1,
-      itemBuilder: (ctx, i) =>
-          i == 0 ? newTableCard : _buildTableCard(ctx, tableItems[i - 1]),
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: 5,
+  Widget get cardGrid => GridView.count(
+        shrinkWrap: true,
+        crossAxisCount: 3,
         childAspectRatio: 5 / 2,
+        children: [...controller.tables.map((e) => _buildTableCard(e))],
+      );
+
+  Widget _buildTableCard(TableDefinition table) {
+    return Card(
+      clipBehavior: Clip.antiAlias,
+      child: InkWell(
+        onTap: () => controller.openTable(table),
+        child: Container(
+          margin: const EdgeInsets.all(5),
+          padding: const EdgeInsets.all(5),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Text(
+                table.tableName.pascalCase,
+                maxLines: 1,
+                style: const TextStyle(
+                  fontSize: 18,
+                  fontWeight: FontWeight.bold,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+              Row(
+                children: [
+                  Text(
+                    table.system ? "System" : "Userland",
+                    style: const TextStyle(
+                      fontSize: 12,
+                    ),
+                  ),
+                ],
+              ),
+              Row(
+                children: [
+                  Text(
+                    "${table.parsedColumns.length} column(s)",
+                    style: const TextStyle(
+                      fontSize: 11,
+                      fontStyle: FontStyle.italic,
+                    ),
+                  ),
+                ],
+              )
+            ],
+          ),
+        ),
       ),
     );
   }
-
-  void _createNewTable() async {
-    final result = await showFlexibleBottomSheet<EditTableBottomSheetResult>(
-      minHeight: 0,
-      initHeight: 0.75,
-      maxHeight: 1,
-      context: context,
-      builder: (_, __, ___) => const EditTableBottomSheet(),
-      anchors: [0, 0.5, 1],
-      isSafeArea: true,
-      isDismissible: false,
-    );
-
-    if (result == null) return;
-
-    await apiClient
-        .createTable(result.tableName, result.fields)
-        .then((e) => WidgetsBinding.instance.addPostFrameCallback((_) {
-              e.unfold((_) {
-                Get.snackbar(
-                  "Success",
-                  "Table created",
-                  colorText: Colors.white,
-                );
-              }, (error) {
-                Get.defaultDialog(
-                  title: "Error",
-                  middleText: error.toString(),
-                  textConfirm: "OK",
-                  onConfirm: () => Get.back(),
-                );
-              });
-            }));
-
-    widget.parent.refreshData();
-  }
-
-  void _openTable(TableModel table) async {
-    await showFlexibleBottomSheet<void>(
-      minHeight: 1,
-      initHeight: 1,
-      maxHeight: 1,
-      context: context,
-      builder: (_, __, ___) => OpenTableBottomSheet(table: table),
-      anchors: [0, 0.5, 1],
-      isSafeArea: true,
-      isDismissible: false,
-    );
-
-    widget.parent.refreshData();
-  }
 }