Dashboard chart flow

lib/pages/catalog.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
+import 'package:oc_front/core/sections/header/header.dart';
 import 'package:oc_front/models/search.dart';
 import 'package:oc_front/widgets/catalog.dart';
 import 'package:oc_front/pages/abstract_page.dart';
@@ -32,7 +33,7 @@ class CatalogPageWidgetState extends State<CatalogPageWidget> {
     return Column( children : [
         SizedBox( 
         width: MediaQuery.of(context).size.width,
-          height: CatalogFactory.items.isEmpty ? 0 :  MediaQuery.of(context).size.height - 200,
+          height: CatalogFactory.items.isEmpty ? 0 :  MediaQuery.of(context).size.height - HeaderConstants.height,
         child: CatalogWidget(items: CatalogFactory.items) )
       ]
     );

lib/pages/catalog_item.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:oc_front/core/models/cart.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
 import 'package:oc_front/models/search.dart';
 import 'package:oc_front/pages/abstract_page.dart';
 import 'package:oc_front/pages/catalog.dart';

lib/pages/workflow.dart

@@ -1,8 +1,16 @@
+import 'dart:convert';
+
 import 'package:flutter/material.dart';
+import 'package:flutter_flow_chart/flutter_flow_chart.dart';
 import 'package:go_router/go_router.dart';
+import 'package:oc_front/core/models/workspace_local.dart';
+import 'package:oc_front/core/sections/header/header.dart';
 import 'package:oc_front/core/services/specialized_services/workflow_service.dart';
 import 'package:oc_front/models/response.dart';
+import 'package:oc_front/models/search.dart';
 import 'package:oc_front/pages/abstract_page.dart';
+import 'package:oc_front/widgets/dialog/new_box.dart';
+import 'package:oc_front/widgets/items/item_row.dart';
 
 class WorkflowFactory implements AbstractFactory {
   static GlobalKey<WorkflowPageWidgetState> key = GlobalKey<WorkflowPageWidgetState>();
@@ -12,157 +20,64 @@ class WorkflowFactory implements AbstractFactory {
 }
 
 class WorkflowPageWidget extends StatefulWidget {
-  String? _selected;
-  TextEditingController _ctrl = TextEditingController();
   WorkflowPageWidget () : super(key: WorkflowFactory.key);
   @override WorkflowPageWidgetState createState() => WorkflowPageWidgetState();
   static void search(BuildContext context) { }
   static Widget factory() { return WorkflowPageWidget(); }
 }
 class WorkflowPageWidgetState extends State<WorkflowPageWidget> {
-
-  final WorflowService _service = WorflowService();
-  @override Widget build(BuildContext context) {
-    return SizedBox(
-      width: MediaQuery.of(context).size.width,
-      height: MediaQuery.of(context).size.height - 200, 
-      child: Column(
-          children: [
-            Container(
-              width: MediaQuery.of(context).size.width,
-              height: (MediaQuery.of(context).size.height - 200) / 2,
-              child : Row( 
-                mainAxisAlignment: MainAxisAlignment.center,
-                children : [ 
-                  Container( width:  MediaQuery.of(context).size.height / 1.5,
-                    height: 50, margin: const EdgeInsets.only(top: 2),
-                    child: FutureBuilder<APIResponse<RawData>>(
-                      future: _service.all(context),
-                      builder: (context, snapshot) {
-                      List<DropdownMenuItem> items = [];
-                      print(snapshot.error);
-                      if (snapshot.hasData && snapshot.data!.data != null
-                      && snapshot.data!.data!.values.isNotEmpty) {
-                        items = (snapshot.data!.data!.values as List<dynamic>).map((dynamic value) {
+final WorflowService _service = WorflowService();
+  Widget itemBuild(Object item) {
+    var e = item as AbstractItem;
+    return e.logo != null ? Image.memory(base64Decode(e.logo ?? ""), fit: BoxFit.fill) 
+        : Image.network('https://get-picto.com/wp-content/uploads/2024/01/logo-instagram-png.webp', fit: BoxFit.fill);
+  }
+  Widget itemTooltipBuild(Object item) {
+    var e = item as AbstractItem;
+    return Container(color: Colors.white, child: ItemRowWidget(low: true, contextWidth: 300, item: e));
+  }
+  List<DropdownMenuItem> getItems(Object? data) {
+    data = data as APIResponse<RawData>?;
+    if (data != null && data.data != null && data.data!.values.isNotEmpty) {
+      return (data.data!.values as List<dynamic>).map((dynamic value) {
                             return DropdownMenuItem<String>(
                               value: value.toString(),
                               child: Text(value.toString()),
                             );
                           }).toList();
-                    }
-                    if (widget._selected != null 
-                    && !items.where((element) => element.value == widget._selected).isNotEmpty) { 
-                      items.add(DropdownMenuItem<String>(
-                              value: widget._selected.toString(),
-                              child: Text(widget._selected.toString()),
-                            ));
-                    }
-                    return DropdownButtonFormField(
-                      value: widget._selected,
-                      hint: const Text("select workflow to load...", style: TextStyle(color: Colors.grey, fontSize: 15)),
-                      decoration: InputDecoration( 
-                        filled: true,
-                        focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
-                            borderSide: BorderSide(color: Color.fromARGB(38, 166, 154, 1), width: 2.5),
-                        ),
-                        fillColor: Colors.grey.shade300,
-                        contentPadding: const EdgeInsets.only(left: 30, right: 30),
-                        enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.zero,
-                            borderSide: BorderSide(color: Colors.grey.shade300, width: 2.5),
-                        ),
-                        border: OutlineInputBorder( borderRadius: BorderRadius.zero,
-                          borderSide: BorderSide(color: Colors.grey.shade300, width: 2.5)),
-                      ),
-                      items: items, onChanged: (value) {
-                        setState(() { widget._selected = value.toString(); });
-                      }); 
-                    })
-                  ),
-                  Tooltip(
-                    message: 'empty selection',
-                    child: InkWell( 
-                      mouseCursor: widget._selected == null || widget._selected!.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
-                      onTap: () { setState(() {  widget._selected = null; }); },
-                      child: Container( 
-                        width: 50, height: 48,
-                        decoration: const BoxDecoration( color: Colors.black,
-                          border: Border(right: BorderSide(color: Colors.white))),
-                            child: Icon(Icons.refresh, color: widget._selected == null || widget._selected!.isEmpty  ? Colors.grey : Colors.white),
-                        )
-                   )
-                  ),
-                  Tooltip(
-                    message: 'load workflow selected',
-                    child: InkWell( 
-                      mouseCursor: widget._selected == null || widget._selected!.isEmpty  ? MouseCursor.defer : SystemMouseCursors.click,
-                      onTap: () {},
-                      child: Container(
-                        width: 50, height: 48,
-                        color: Colors.black,
-                        child: Icon(Icons.open_in_browser_outlined, 
-                        color: widget._selected == null || widget._selected!.isEmpty ? Colors.grey : Colors.white),
-                      )
-                    )
-                  )
-                ]),
-              ),
-              Container(
-              width: MediaQuery.of(context).size.width,
-              height: (MediaQuery.of(context).size.height - 200)  / 2,
-              color: Colors.grey.shade300,
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.center,
-                children: [
-                  Row( children: [
-                        Container(
-                          width: MediaQuery.of(context).size.width / 1.5,
-                          height: 50,
-                          child: TextFormField(
-                            cursorColor: const Color.fromARGB(38, 166, 154, 1),
-                            controller: widget._ctrl,
-                            onChanged: (value) => setState(() { widget._ctrl.value = TextEditingValue(text: value); }), 
-                            validator: (value) => value == null || value.isEmpty ? "name is required" : null,
-                            decoration: const InputDecoration(
-                              hintText: "name a new workflow...",
-                              fillColor: Colors.white,
-                              filled: true,
-                              contentPadding: EdgeInsets.symmetric(horizontal: 30),
-                              hintStyle: TextStyle(
-                                color: Colors.black,
-                                fontSize: 14,
-                                fontWeight: FontWeight.w300
-                              ),
-                              border: InputBorder.none
-                            )
-                          )
-                        ),
-                        Tooltip(
-                          message: 'add',
-                          child:InkWell( 
-                            mouseCursor: widget._ctrl.value.text.isEmpty ? MouseCursor.defer : SystemMouseCursors.click,
-                            onTap: () async {
-                              if (widget._ctrl.value.text.isNotEmpty) {
-                                await _service.post(context, {}, { "workflowName" : widget._ctrl.value.text });
-                                widget._selected = widget._ctrl.value.text;
-                                widget._ctrl.value = const TextEditingValue(text: "");
-                                setState(() { });
-                              }
-                            },
-                            child: Container(
-                              width: 50,
-                              height: 50,
-                              color: Colors.black,
-                              child: Icon(Icons.add, color: widget._ctrl.value.text.isEmpty ? Colors.grey : Colors.white)
-                            )
-                          )
-                        )
-                      ],
-                    ),
-                ])
-            )
-          ]
-        )
+    }
+    return [];
+  }
+  Widget onDashboardAlertOpened(BuildContext context, Dashboard dash) {
+    return NewBoxWidget<RawData>(service: _service, dash: dash, 
+        getItems: getItems);
+  }
+  @override Widget build(BuildContext context) {
+    var quart = MediaQuery.of(context).size.width / 6;
+    return FlowChart<AbstractItem>(
+                onDashboardAlertOpened: onDashboardAlertOpened,
+                dashboard: Dashboard(
+                  name: "workflow_${DateTime.now().toString().replaceAll(" ", "_").substring(0, DateTime.now().toString().length - 7)}"),
+                itemWidget: itemBuild,
+                categories: const ["computing", "data", "datacenter", "storage"],
+                draggableItemBuilder: (cat) => WorkspaceLocal.byTopic(cat).toList(),
+                itemWidgetTooltip: itemTooltipBuild,
+                innerMenuWidth: quart > 80 ? quart : 80,
+                width: MediaQuery.of(context).size.width,
+                height: MediaQuery.of(context).size.height - HeaderConstants.height,
+                onNewConnection: (p1, p2) { },
+                onDashboardTapped: (context, position) { },
+                onScaleUpdate: (newScale) { },
+                onDashboardSecondaryTapped: (context, position) { },
+                onDashboardLongTapped: (context, position) { },
+                onDashboardSecondaryLongTapped: (context, position) { },
+                onElementLongPressed: (context, position, element) { },
+                onElementSecondaryLongTapped: (context, position, element) { },
+                onElementPressed: (context, position, element) {  },
+                onElementSecondaryTapped: (context, position, element) { },
+                onHandlerPressed: (context, position, handler, element) { },
+                onHandlerLongPressed: (context, position, handler, element) { },
+                onPivotSecondaryPressed: (context, pivot) { },
     );
   }
 }