From 02157d21eadeb63362e13688c62e02f9f3383b4d Mon Sep 17 00:00:00 2001
From: "Scott E. Graves" <scott.e.graves@protonmail.com>
Date: Thu, 6 Mar 2025 08:44:17 -0600
Subject: [PATCH] Create management portal in Flutter #39

---
 .../lib/screens/add_mount_screen.dart         | 108 +++++++++++++-----
 1 file changed, 80 insertions(+), 28 deletions(-)

diff --git a/web/repertory/lib/screens/add_mount_screen.dart b/web/repertory/lib/screens/add_mount_screen.dart
index 7e357395..00bf7245 100644
--- a/web/repertory/lib/screens/add_mount_screen.dart
+++ b/web/repertory/lib/screens/add_mount_screen.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:repertory/constants.dart';
 import 'package:repertory/models/mount.dart';
+import 'package:repertory/types/mount_config.dart';
 import 'package:repertory/widgets/mount_settings.dart';
 
 class AddMountScreen extends StatefulWidget {
@@ -12,7 +14,12 @@ class AddMountScreen extends StatefulWidget {
 }
 
 class _AddMountScreenState extends State<AddMountScreen> {
+  static const _padding = 15.0;
+
+  late TextEditingController _mountNameController;
+
   Mount? _mount;
+  String _mountName = "";
   String _mountType = "";
   bool _showAdvanced = false;
 
@@ -34,39 +41,84 @@ class _AddMountScreenState extends State<AddMountScreen> {
           ),
         ],
       ),
-      body: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          Row(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              const Text('Provider Type'),
-              const SizedBox(width: 15.0),
-              DropdownButton<String>(
-                value: _mountType,
-                onChanged: (newValue) {
-                  setState(() {
-                    _mountType = newValue ?? "";
-                    if (_mountType.isNotEmpty) {}
-                  });
-                },
-                items:
-                    providerTypeList.map<DropdownMenuItem<String>>((item) {
-                      return DropdownMenuItem<String>(
-                        value: item,
-                        child: Text(item),
-                      );
-                    }).toList(),
+      body: Padding(
+        padding: const EdgeInsets.all(_padding),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Card(
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  const Text('Provider Type'),
+                  const SizedBox(width: _padding),
+                  DropdownButton<String>(
+                    value: _mountType,
+                    onChanged: (newValue) {
+                      setState(() {
+                        _mountType = newValue ?? "";
+                        if (_mountType.isNotEmpty) {}
+                      });
+                    },
+                    items:
+                        providerTypeList.map<DropdownMenuItem<String>>((item) {
+                          return DropdownMenuItem<String>(
+                            value: item,
+                            child: Text(item),
+                          );
+                        }).toList(),
+                  ),
+                ],
               ),
-            ],
-          ),
-          if (_mount != null)
-            MountSettingsWidget(mount: _mount!, showAdvanced: _showAdvanced),
-        ],
+            ),
+            if (_mountType.isNotEmpty) const SizedBox(height: _padding),
+            if (_mountType.isNotEmpty)
+              Card(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Text('Configuration Name'),
+                    const SizedBox(width: _padding),
+                    TextField(
+                      autofocus: true,
+                      controller: _mountNameController,
+                      keyboardType: TextInputType.number,
+                      onChanged: (value) {
+                        if (_mountName == value) {
+                          return;
+                        }
+
+                        setState(() {
+                          _mountName = value;
+                          _mount =
+                              (_mountName.isEmpty)
+                                  ? null
+                                  : Mount(
+                                    MountConfig(
+                                      name: _mountName,
+                                      type: _mountType,
+                                    ),
+                                  );
+                        });
+                      },
+                    ),
+                  ],
+                ),
+              ),
+            if (_mount != null)
+              MountSettingsWidget(mount: _mount!, showAdvanced: _showAdvanced),
+          ],
+        ),
       ),
     );
   }
 
+  @override
+  void initState() {
+    _mountNameController = TextEditingController(text: _mountName);
+    super.initState();
+  }
+
   @override
   void setState(VoidCallback fn) {
     if (!mounted) {