Create management portal in Flutter #39

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,14 +41,17 @@ class _AddMountScreenState extends State<AddMountScreen> {
           ),
         ],
       ),
-      body: Column(
+      body: Padding(
+        padding: const EdgeInsets.all(_padding),
+        child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-          Row(
+            Card(
+              child: Row(
                 mainAxisSize: MainAxisSize.min,
                 children: [
                   const Text('Provider Type'),
-              const SizedBox(width: 15.0),
+                  const SizedBox(width: _padding),
                   DropdownButton<String>(
                     value: _mountType,
                     onChanged: (newValue) {
@@ -60,13 +70,55 @@ class _AddMountScreenState extends State<AddMountScreen> {
                   ),
                 ],
               ),
+            ),
+            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) {