From 89834957a2c8f2a41a06a781aee3be3316165ceb Mon Sep 17 00:00:00 2001 From: Ashita Prasad Date: Sun, 12 Jan 2025 15:47:19 +0530 Subject: [PATCH] Add graphQL UI --- .../request_pane/request_pane.dart | 55 ++++------------- .../request_pane/request_pane_graphql.dart | 51 ++++++++++++++++ .../request_pane/request_pane_rest.dart | 60 +++++++++++++++++++ .../home_page/editor_pane/url_card.dart | 46 +++++++++----- .../mobile/requests_page/request_tabs.dart | 21 +++++-- .../mobile/requests_page/requests_page.dart | 8 +-- 6 files changed, 174 insertions(+), 67 deletions(-) create mode 100644 lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart create mode 100644 lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart index ed385bb6..9c852c71 100644 --- a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart +++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart @@ -1,54 +1,23 @@ +import 'package:apidash_core/apidash_core.dart'; +import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:apidash/providers/providers.dart'; -import 'package:apidash/widgets/widgets.dart'; -import 'request_headers.dart'; -import 'request_params.dart'; -import 'request_body.dart'; +import 'request_pane_graphql.dart'; +import 'request_pane_rest.dart'; class EditRequestPane extends ConsumerWidget { const EditRequestPane({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { - final selectedId = ref.watch(selectedIdStateProvider); - final codePaneVisible = ref.watch(codePaneVisibleStateProvider); - final tabIndex = ref.watch( - selectedRequestModelProvider.select((value) => value?.requestTabIndex)); - - final headerLength = ref.watch(selectedRequestModelProvider - .select((value) => value?.httpRequestModel?.headersMap.length)) ?? - 0; - final paramLength = ref.watch(selectedRequestModelProvider - .select((value) => value?.httpRequestModel?.paramsMap.length)) ?? - 0; - final hasBody = ref.watch(selectedRequestModelProvider - .select((value) => value?.httpRequestModel?.hasBody)) ?? - false; - - return RequestPane( - selectedId: selectedId, - codePaneVisible: codePaneVisible, - tabIndex: tabIndex, - onPressedCodeButton: () { - ref.read(codePaneVisibleStateProvider.notifier).state = - !codePaneVisible; - }, - onTapTabBar: (index) { - ref - .read(collectionStateNotifierProvider.notifier) - .update(selectedId!, requestTabIndex: index); - }, - showIndicators: [ - paramLength > 0, - headerLength > 0, - hasBody, - ], - children: const [ - EditRequestURLParams(), - EditRequestHeaders(), - EditRequestBody(), - ], - ); + ref.watch(selectedIdStateProvider); + final apiType = ref + .watch(selectedRequestModelProvider.select((value) => value?.apiType)); + return switch (apiType) { + APIType.rest => const EditRestRequestPane(), + APIType.graphql => const EditGraphQLRequestPane(), + _ => kSizedBoxEmpty, + }; } } diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart new file mode 100644 index 00000000..767a7b45 --- /dev/null +++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart @@ -0,0 +1,51 @@ +import 'package:apidash/consts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:apidash/providers/providers.dart'; +import 'package:apidash/widgets/widgets.dart'; +import 'request_headers.dart'; +import 'request_body.dart'; + +class EditGraphQLRequestPane extends ConsumerWidget { + const EditGraphQLRequestPane({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final selectedId = ref.watch(selectedIdStateProvider); + var tabIndex = ref.watch( + selectedRequestModelProvider.select((value) => value?.requestTabIndex)); + + final headerLength = ref.watch(selectedRequestModelProvider + .select((value) => value?.httpRequestModel?.headersMap.length)) ?? + 0; + final hasQuery = ref.watch(selectedRequestModelProvider + .select((value) => value?.httpRequestModel?.hasQuery)) ?? + false; + if (tabIndex >= 2) { + tabIndex = 0; + } + return RequestPane( + selectedId: selectedId, + codePaneVisible: false, + showViewCodeButton: false, + tabIndex: tabIndex, + onTapTabBar: (index) { + ref + .read(collectionStateNotifierProvider.notifier) + .update(requestTabIndex: index); + }, + showIndicators: [ + headerLength > 0, + hasQuery, + ], + tabLabels: const [ + kLabelHeaders, + kLabelQuery, + ], + children: const [ + EditRequestHeaders(), + EditRequestBody(), + ], + ); + } +} diff --git a/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart new file mode 100644 index 00000000..e323f83b --- /dev/null +++ b/lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart @@ -0,0 +1,60 @@ +import 'package:apidash/consts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:apidash/providers/providers.dart'; +import 'package:apidash/widgets/widgets.dart'; +import 'request_headers.dart'; +import 'request_params.dart'; +import 'request_body.dart'; + +class EditRestRequestPane extends ConsumerWidget { + const EditRestRequestPane({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final selectedId = ref.watch(selectedIdStateProvider); + final codePaneVisible = ref.watch(codePaneVisibleStateProvider); + final tabIndex = ref.watch( + selectedRequestModelProvider.select((value) => value?.requestTabIndex)); + + final headerLength = ref.watch(selectedRequestModelProvider + .select((value) => value?.httpRequestModel?.headersMap.length)) ?? + 0; + final paramLength = ref.watch(selectedRequestModelProvider + .select((value) => value?.httpRequestModel?.paramsMap.length)) ?? + 0; + final hasBody = ref.watch(selectedRequestModelProvider + .select((value) => value?.httpRequestModel?.hasBody)) ?? + false; + + return RequestPane( + selectedId: selectedId, + codePaneVisible: codePaneVisible, + tabIndex: tabIndex, + onPressedCodeButton: () { + ref.read(codePaneVisibleStateProvider.notifier).state = + !codePaneVisible; + }, + onTapTabBar: (index) { + ref + .read(collectionStateNotifierProvider.notifier) + .update(requestTabIndex: index); + }, + showIndicators: [ + paramLength > 0, + headerLength > 0, + hasBody, + ], + tabLabels: const [ + kLabelURLParams, + kLabelHeaders, + kLabelBody, + ], + children: const [ + EditRequestURLParams(), + EditRequestHeaders(), + EditRequestBody(), + ], + ); + } +} diff --git a/lib/screens/home_page/editor_pane/url_card.dart b/lib/screens/home_page/editor_pane/url_card.dart index 2caac33b..829bc5c9 100644 --- a/lib/screens/home_page/editor_pane/url_card.dart +++ b/lib/screens/home_page/editor_pane/url_card.dart @@ -6,11 +6,14 @@ import 'package:apidash/providers/providers.dart'; import 'package:apidash/widgets/widgets.dart'; import '../../common_widgets/common_widgets.dart'; -class EditorPaneRequestURLCard extends StatelessWidget { +class EditorPaneRequestURLCard extends ConsumerWidget { const EditorPaneRequestURLCard({super.key}); @override - Widget build(BuildContext context) { + Widget build(BuildContext context, WidgetRef ref) { + ref.watch(selectedIdStateProvider); + final apiType = ref + .watch(selectedRequestModelProvider.select((value) => value?.apiType)); return Card( color: kColorTransparent, surfaceTintColor: kColorTransparent, @@ -27,24 +30,38 @@ class EditorPaneRequestURLCard extends StatelessWidget { horizontal: !context.isMediumWindow ? 20 : 6, ), child: context.isMediumWindow - ? const Row( + ? Row( children: [ - DropdownButtonHTTPMethod(), - kHSpacer5, - Expanded( + switch (apiType) { + APIType.rest => const DropdownButtonHTTPMethod(), + APIType.graphql => kSizedBoxEmpty, + null => kSizedBoxEmpty, + }, + switch (apiType) { + APIType.rest => kHSpacer5, + _ => kHSpacer8, + }, + const Expanded( child: URLTextField(), ), ], ) - : const Row( + : Row( children: [ - DropdownButtonHTTPMethod(), - kHSpacer20, - Expanded( + switch (apiType) { + APIType.rest => const DropdownButtonHTTPMethod(), + APIType.graphql => kSizedBoxEmpty, + null => kSizedBoxEmpty, + }, + switch (apiType) { + APIType.rest => kHSpacer20, + _ => kHSpacer8, + }, + const Expanded( child: URLTextField(), ), kHSpacer20, - SizedBox( + const SizedBox( height: 36, child: SendRequestButton(), ) @@ -67,10 +84,9 @@ class DropdownButtonHTTPMethod extends ConsumerWidget { return DropdownButtonHttpMethod( method: method, onChanged: (HTTPVerb? value) { - final selectedId = ref.read(selectedRequestModelProvider)!.id; ref .read(collectionStateNotifierProvider.notifier) - .update(selectedId, method: value); + .update(method: value); }, ); } @@ -92,9 +108,7 @@ class URLTextField extends ConsumerWidget { ?.httpRequestModel ?.url, onChanged: (value) { - ref - .read(collectionStateNotifierProvider.notifier) - .update(selectedId, url: value); + ref.read(collectionStateNotifierProvider.notifier).update(url: value); }, onFieldSubmitted: (value) { ref.read(collectionStateNotifierProvider.notifier).sendRequest(); diff --git a/lib/screens/mobile/requests_page/request_tabs.dart b/lib/screens/mobile/requests_page/request_tabs.dart index 1cfe1ef0..54404a86 100644 --- a/lib/screens/mobile/requests_page/request_tabs.dart +++ b/lib/screens/mobile/requests_page/request_tabs.dart @@ -1,21 +1,34 @@ -import 'package:apidash/screens/common_widgets/common_widgets.dart'; import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:flutter/material.dart'; import 'package:apidash/widgets/widgets.dart'; -import 'package:apidash/consts.dart'; +import '../../../consts.dart'; +import '../../common_widgets/common_widgets.dart'; import '../../home_page/editor_pane/details_card/response_pane.dart'; import '../../home_page/editor_pane/editor_request.dart'; import '../../home_page/editor_pane/url_card.dart'; class RequestTabs extends StatelessWidget { - const RequestTabs({super.key, required this.controller}); + const RequestTabs({ + super.key, + required this.controller, + }); final TabController controller; @override Widget build(BuildContext context) { return Column( children: [ - kVSpacer5, + const Padding( + padding: kPh8, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + APITypeDropdown(), + EnvironmentDropdown(), + ], + ), + ), + kVSpacer3, const Padding( padding: kPh4, child: EditorPaneRequestURLCard(), diff --git a/lib/screens/mobile/requests_page/requests_page.dart b/lib/screens/mobile/requests_page/requests_page.dart index 77fc6ce7..ce66bc73 100644 --- a/lib/screens/mobile/requests_page/requests_page.dart +++ b/lib/screens/mobile/requests_page/requests_page.dart @@ -40,19 +40,19 @@ class _RequestResponsePageState extends ConsumerState showRenameDialog(context, "Rename Request", name, (val) { ref .read(collectionStateNotifierProvider.notifier) - .update(id!, name: val); + .update(name: val); }); } if (item == ItemMenuOption.delete) { - ref.read(collectionStateNotifierProvider.notifier).remove(id!); + ref.read(collectionStateNotifierProvider.notifier).remove(); } if (item == ItemMenuOption.duplicate) { - ref.read(collectionStateNotifierProvider.notifier).duplicate(id!); + ref.read(collectionStateNotifierProvider.notifier).duplicate(); } }, ), leftDrawerContent: const CollectionPane(), - actions: const [Padding(padding: kPh8, child: EnvironmentDropdown())], + actions: const [kVSpacer16], mainContent: id == null ? const RequestEditorDefault() : RequestTabs(