feat: environment pane

This commit is contained in:
DenserMeerkat
2024-06-13 18:47:52 +05:30
parent 09639cdf13
commit 7fcfe4f8e8
22 changed files with 414 additions and 336 deletions

View File

@ -1,11 +1,12 @@
import 'package:apidash/consts.dart';
import 'package:apidash/extensions/extensions.dart';
import 'package:apidash/models/environment_model.dart';
import 'package:apidash/providers/providers.dart';
import 'package:apidash/widgets/cards.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:apidash/extensions/extensions.dart';
import 'package:apidash/models/environment_model.dart';
import 'package:apidash/providers/providers.dart';
import 'package:apidash/widgets/widgets.dart';
import 'package:apidash/consts.dart';
import 'package:apidash/screens/common/sidebar_widgets.dart';
class EnvironmentsPane extends ConsumerWidget {
const EnvironmentsPane({
@ -15,30 +16,31 @@ class EnvironmentsPane extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Padding(
padding: kIsMacOS ? kP24CollectionPane : kP8CollectionPane,
padding: (!context.isMediumWindow && kIsMacOS
? kP24CollectionPane
: kP8CollectionPane) +
(context.isMediumWindow ? kPb70 : EdgeInsets.zero),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: kPe8,
child: Wrap(
alignment: WrapAlignment.spaceBetween,
children: [
ElevatedButton(
onPressed: () {
ref
.read(environmentsStateNotifierProvider.notifier)
.addEnvironment();
},
child: const Text(
kLabelPlusNew,
style: kTextStyleButton,
),
)
],
),
SidebarHeader(
onAddNew: () {
ref
.read(environmentsStateNotifierProvider.notifier)
.addEnvironment();
},
),
kVSpacer10,
SidebarFilter(
filterHintText: "Filter by name",
onFilterFieldChanged: (value) {
ref.read(environmentSearchQueryProvider.notifier).state =
value.toLowerCase();
},
),
kVSpacer10,
const Expanded(child: EnvironmentsList()),
kVSpacer5
],
),
);
@ -59,81 +61,105 @@ class EnvironmentsList extends HookConsumerWidget {
final filterQuery = ref.watch(environmentSearchQueryProvider).trim();
ScrollController scrollController = useScrollController();
return Scrollbar(
controller: scrollController,
thumbVisibility: alwaysShowEnvironmentsPaneScrollbar,
radius: const Radius.circular(12),
child: filterQuery.isEmpty
? ReorderableListView.builder(
padding: context.isMediumWindow
? EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom,
right: 8,
)
: kPe8,
scrollController: scrollController,
buildDefaultDragHandles: false,
itemCount: environmentSequence.length,
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) {
newIndex -= 1;
}
if (oldIndex != newIndex) {
ref
.read(collectionStateNotifierProvider.notifier)
.reorder(oldIndex, newIndex);
}
},
itemBuilder: (context, index) {
var id = environmentSequence[index];
if (kIsMobile) {
return ReorderableDelayedDragStartListener(
key: ValueKey(id),
index: index,
child: Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: environmentItems[id]!,
),
),
);
}
return ReorderableDragStartListener(
key: ValueKey(id),
index: index,
child: Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: environmentItems[id]!,
),
return Column(
children: [
Padding(
padding: kP1 + kPe8,
child: EnvironmentItem(
id: kGlobalEnvironmentId,
environmentModel: environmentItems[kGlobalEnvironmentId]!,
),
),
const Divider(endIndent: 4),
Expanded(
child: Scrollbar(
controller: scrollController,
thumbVisibility: alwaysShowEnvironmentsPaneScrollbar,
radius: const Radius.circular(12),
child: filterQuery.isEmpty
? ReorderableListView.builder(
padding: context.isMediumWindow
? EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom,
right: 8,
)
: kPe8,
scrollController: scrollController,
buildDefaultDragHandles: false,
itemCount: environmentSequence.length,
onReorder: (int oldIndex, int newIndex) {
if (oldIndex < newIndex) {
newIndex -= 1;
}
if (oldIndex != newIndex) {
ref
.read(environmentsStateNotifierProvider.notifier)
.reorder(oldIndex, newIndex);
}
},
itemBuilder: (context, index) {
var id = environmentSequence[index];
if (id == kGlobalEnvironmentId) {
return SizedBox.shrink(
key: ValueKey(id),
);
}
if (kIsMobile) {
return ReorderableDelayedDragStartListener(
key: ValueKey(id),
index: index,
child: Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: environmentItems[id]!,
),
),
);
}
return ReorderableDragStartListener(
key: ValueKey(id),
index: index,
child: Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: environmentItems[id]!,
),
),
);
},
)
: ListView(
padding: context.isMediumWindow
? EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom,
right: 8,
)
: kPe8,
controller: scrollController,
children: environmentSequence.map((id) {
var item = environmentItems[id]!;
if (id == kGlobalEnvironmentId) {
return SizedBox.shrink(
key: ValueKey(id),
);
}
if (item.name.toLowerCase().contains(filterQuery)) {
return Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: item,
),
);
}
return const SizedBox();
}).toList(),
),
);
},
)
: ListView(
padding: context.isMediumWindow
? EdgeInsets.only(
bottom: MediaQuery.paddingOf(context).bottom,
right: 8,
)
: kPe8,
controller: scrollController,
children: environmentSequence.map((id) {
var item = environmentItems[id]!;
if (item.name.toLowerCase().contains(filterQuery)) {
return Padding(
padding: kP1,
child: EnvironmentItem(
id: id,
environmentModel: item,
),
);
}
return const SizedBox();
}).toList(),
),
),
),
],
);
}
}
@ -176,7 +202,29 @@ class EnvironmentItem extends ConsumerWidget {
.updateEnvironment(editRequestId!, name: value);
},
onTapOutsideNameEditor: () {
ref.read(selectedEnvironmentIdStateProvider.notifier).state = null;
ref.read(selectedIdEditStateProvider.notifier).state = null;
},
onMenuSelected: (ItemMenuOption item) {
if (item == ItemMenuOption.edit) {
ref.read(selectedIdEditStateProvider.notifier).state = id;
Future.delayed(
const Duration(milliseconds: 150),
() => ref
.read(nameTextFieldFocusNodeProvider.notifier)
.state
.requestFocus(),
);
}
if (item == ItemMenuOption.delete) {
ref
.read(environmentsStateNotifierProvider.notifier)
.removeEnvironment(id);
}
if (item == ItemMenuOption.duplicate) {
ref
.read(environmentsStateNotifierProvider.notifier)
.duplicateEnvironment(id);
}
},
);
}