flutter/apidash
1
0
Fork 0
mirror of https://github.com/foss42/apidash.git synced 2025-08-06 13:51:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add graphQL UI

Browse Source
This commit is contained in:
Ashita Prasad
2025-01-12 15:47:19 +05:30
parent 114b211437
commit 89834957a2
6 changed files with 174 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
lib/screens/home_page/editor_pane/details_card/request_pane/request_pane.dart
View File

@ -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,
};
}
}

51
lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_graphql.dart Normal file
View File

@ -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(),
],
);
}
}

60
lib/screens/home_page/editor_pane/details_card/request_pane/request_pane_rest.dart Normal file
View File

@ -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(),
],
);
}
}

46
lib/screens/home_page/editor_pane/url_card.dart
View File

@ -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();

21
lib/screens/mobile/requests_page/request_tabs.dart
View File

@ -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(),

8
lib/screens/mobile/requests_page/requests_page.dart
View File

@ -40,19 +40,19 @@ class _RequestResponsePageState extends ConsumerState<RequestResponsePage>
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(