From be43a1d6e9662923b53972303a6ae001b2b59388 Mon Sep 17 00:00:00 2001 From: Ryan Pandya Date: Sat, 20 May 2023 16:59:41 -0700 Subject: [PATCH] Successfully loading dat and rendering table --- ltx_flutter/lib/pages/table_page.dart | 163 +++++++++++++++++++++++++- ltx_flutter/pubspec.yaml | 1 + 2 files changed, 159 insertions(+), 5 deletions(-) diff --git a/ltx_flutter/lib/pages/table_page.dart b/ltx_flutter/lib/pages/table_page.dart index cf66748..f693d3d 100644 --- a/ltx_flutter/lib/pages/table_page.dart +++ b/ltx_flutter/lib/pages/table_page.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:spreadsheet_table/spreadsheet_table.dart'; +import 'package:pluto_grid/pluto_grid.dart'; import 'package:ltx_flutter/appwrite/appwrite.dart'; import 'package:ltx_flutter/appwrite/database_api.dart'; import 'package:provider/provider.dart'; @@ -29,7 +30,7 @@ class _TablePageState extends State { loadEntries() async { try { - final value = await database.getEntries(limit: 5); + final value = await database.getEntries(limit: 25); setState(() { entries = value.documents; }); @@ -38,6 +39,116 @@ class _TablePageState extends State { } } + String formatDate({String format = "", String? dateISO}) { + final DateFormat dateFormatter = DateFormat(format); + final date = dateISO!.isEmpty ? DateTime.now() : DateTime.parse(dateISO); + return dateFormatter.format(date); + } + + List hourCols = List.generate(24, (i) => i).map((e) { + var meridien = "AM"; + var hour = 12; + if (e > 12) { + hour = e - 12; + } else if (e > 0) { + hour = e; + } + if (e > 11) { + meridien = "PM"; + } + var hourTitle = "${hour.toString()} $meridien"; + return PlutoColumn( + title: hourTitle, + field: "hours[$e]", + type: PlutoColumnType.number(), + width: 65, + enableContextMenu: false, + enableDropToResize: false, + textAlign: PlutoColumnTextAlign.center, + titleTextAlign: PlutoColumnTextAlign.center, + ); + }).toList(); + + late List columns = [ + PlutoColumn( + title: 'DATE', + field: 'date', + type: PlutoColumnType.text(), + readOnly: true, + width: 110, + frozen: PlutoColumnFrozen.start, + enableContextMenu: false, + enableDropToResize: false, + textAlign: PlutoColumnTextAlign.center, + titleTextAlign: PlutoColumnTextAlign.center, + ), + // PlutoColumn( + // title: 'DAY', + // field: 'day', + // type: PlutoColumnType.text(), + // readOnly: true, + // width: 50, + // frozen: PlutoColumnFrozen.start, + // enableContextMenu: false, + // enableDropToResize: false, + // ), + ] + + hourCols + + [ + PlutoColumn( + title: 'Mood', + field: 'mood', + width: 60, + textAlign: PlutoColumnTextAlign.center, + type: PlutoColumnType.text(), + enableContextMenu: false, + enableDropToResize: false, + ), + PlutoColumn( + title: 'Comments', + field: 'comments', + type: PlutoColumnType.text(), + enableContextMenu: false, + enableDropToResize: false, + ), + ]; + + late List rows = entries!.map((e) { + var cells = { + 'date': PlutoCell( + value: formatDate( + format: "MM/DD E", + dateISO: e.data['date'], + ), + ), + // 'day': PlutoCell( + // value: formatDate( + // format: "E", + // dateISO: e.data['date'], + // ), + // ), + 'mood': PlutoCell(value: e.data['mood']), + 'comments': PlutoCell(value: e.data['comments']), + }; + var hours = {}; + for (int i = 0; i < 24; i++) { + hours.putIfAbsent( + "hours[$i]", () => PlutoCell(value: e.data['hours'][i])); + } + cells.addEntries(hours.entries); + + return PlutoRow( + cells: cells, + ); + }).toList(); + + /// columnGroups that can group columns can be omitted. + final List columnGroups = []; + + /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid. + /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback. + late final PlutoGridStateManager stateManager; + @override Widget build(BuildContext context) { return Padding( @@ -47,8 +158,32 @@ class _TablePageState extends State { Expanded( child: entries!.isEmpty ? Center(child: const CircularProgressIndicator()) - : TableWidget(entries: entries)), - Expanded(child: DiagnosticsWidget(entries: entries)), + : Scaffold( + body: Container( + padding: const EdgeInsets.all(0), + child: PlutoGrid( + columns: columns, + rows: rows, + columnGroups: columnGroups, + onLoaded: (PlutoGridOnLoadedEvent event) { + stateManager = event.stateManager; + }, + onChanged: (PlutoGridOnChangedEvent event) { + print(event); + }, + configuration: const PlutoGridConfiguration.dark( + style: PlutoGridStyleConfig.dark( + cellTextStyle: TextStyle(fontFamily: "monospace"), + rowHeight: 20, + gridBorderColor: Colors.transparent, + enableCellBorderHorizontal: false, + enableCellBorderVertical: false, + ), + ), + ), + ), + )), + // Expanded(child: DiagnosticsWidget(entries: entries)), ], ), ); @@ -85,10 +220,28 @@ class TableWidget extends StatelessWidget { final DateFormat dateFormatter = DateFormat('MM/dd'); final DateFormat dayFormatter = DateFormat('E'); + final List columns = []; + + final List rows = []; + + @override + Widget build(BuildContext context) { + return Text("moot"); + } +} + +class SpreadsheetWidget extends StatelessWidget { + SpreadsheetWidget({super.key, this.entries}); + + final List? entries; + + final DateFormat dateFormatter = DateFormat('MM/dd'); + final DateFormat dayFormatter = DateFormat('E'); + @override Widget build(BuildContext context) { return SpreadsheetTable( - cellWidth: 42, + cellWidth: 80, rowsCount: entries!.length, colCount: 27, cellBuilder: (_, int row, int col) { @@ -124,7 +277,7 @@ class TableWidget extends StatelessWidget { } cellText = "${hour.toString()} $meridien"; } else if (index == 25) { - cellText = "Notes"; + cellText = "Mood"; } else if (index == 26) { cellText = "Comments"; } diff --git a/ltx_flutter/pubspec.yaml b/ltx_flutter/pubspec.yaml index 04c7db0..3683046 100644 --- a/ltx_flutter/pubspec.yaml +++ b/ltx_flutter/pubspec.yaml @@ -16,6 +16,7 @@ dependencies: provider: ^6.0.5 flutter_svg: ^2.0.6 intl: ^0.18.1 + pluto_grid: ^7.0.2 dev_dependencies: flutter_test: