Add menu detail view + add show modal edit subsection

This commit is contained in:
Thomas Fransolet 2021-05-23 15:44:50 +02:00
parent 6037b287d7
commit 171fce5e24
10 changed files with 743 additions and 65 deletions

View File

@ -5,14 +5,14 @@ import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
class ListViewCard extends StatefulWidget {
class ListViewCardImage extends StatefulWidget {
final int index;
final Key key;
final List<ImageDTO> listItems;
final AppContext appContext;
final ValueChanged<List<ImageDTO>> onChanged;
ListViewCard(
ListViewCardImage(
this.listItems,
this.index,
this.key,
@ -24,7 +24,7 @@ class ListViewCard extends StatefulWidget {
_ListViewCard createState() => _ListViewCard();
}
class _ListViewCard extends State<ListViewCard> {
class _ListViewCard extends State<ListViewCardImage> {
@override
Widget build(BuildContext context) {
return Card(
@ -81,7 +81,8 @@ class _ListViewCard extends State<ListViewCard> {
});
},
widget.appContext,
context);
context
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),

View File

@ -0,0 +1,185 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/new_update_image_slider.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/showEditSubSection.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'package:provider/provider.dart';
class ListViewCardSubSection extends StatefulWidget {
final int index;
final Key key;
final List<SectionDTO> listItems;
final AppContext appContext;
final ValueChanged<List<SectionDTO>> onChanged;
ListViewCardSubSection(
this.listItems,
this.index,
this.key,
this.appContext,
this.onChanged
);
@override
_ListViewCardSubSection createState() => _ListViewCardSubSection();
}
class _ListViewCardSubSection extends State<ListViewCardSubSection> {
@override
Widget build(BuildContext context) {
final appContext = Provider.of<AppContext>(context);
Size size = MediaQuery.of(context).size;
return Card(
margin: EdgeInsets.all(4),
child: Stack(
children: [
Container(
width: 200,
height: 250,
decoration: BoxDecoration(
color: kWhite,
border: Border.all(width: 0.5, color: kSecond),
),
child: Padding(
padding: const EdgeInsets.only(right: 20.0),
child: getElement(widget.index, widget.listItems[widget.index], size, appContext)
),
),
Positioned(
right: 0,
bottom: 0,
child: Row(
children: [
InkWell(
onTap: () {
showEditSubSection(
widget.listItems[widget.index],
(value) {
setState(() {
widget.listItems[widget.index] = value;
widget.onChanged(widget.listItems);
});
},
widget.appContext,
context
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.edit,
color: kPrimaryColor,
size: 25.0,
),
)
),
InkWell(
onTap: () {
widget.listItems.removeAt(widget.index);
widget.onChanged(widget.listItems);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.delete,
color: kPrimaryColor,
size: 25.0,
),
)
),
],
)
),
],
),
);
}
getElement(int index, SectionDTO sectionDTO, Size size, AppContext appContext) {
return Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: AutoSizeText(
sectionDTO.label,
style: new TextStyle(fontSize: 15),
maxLines: 2,
textAlign: TextAlign.center,
),
),
Positioned(
top: 20,
left: 20,
child: Icon(
getSectionIcon(sectionDTO.type),
color: kSecond,
size: 18.0,
),
),
/*Positioned(
bottom: 0,
left: 0,
child: InkWell(
onTap: () {
/*showNewSection(appContext.getContext().selectedConfiguration.id, appContext, context, true);*/
// TODO ?
},
child: Icon(
Icons.edit,
color: kPrimaryColor,
size: 20.0,
)
),
),*/
/*Positioned(
bottom: 0,
right: 0,
child: InkWell(
onTap: () {
setState(() {
widget.listItems.removeAt(index);
});
widget.onChanged(widget.listItems);
},
child: Icon(
Icons.delete,
color: kPrimaryColor,
size: 20.0,
)
),
)*/
],
),
);
}
}
boxDecoration(SectionDTO sectionDTO, appContext) {
return BoxDecoration(
color: kBackgroundColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1.5, color: kSecond),
borderRadius: BorderRadius.circular(10.0),
/*image: sectionDTO.title != null ? new DecorationImage(
fit: BoxFit.scaleDown,
/*image: new NetworkImage(
sectionDTO.,
),*/
) : null,*/
boxShadow: [
BoxShadow(
color: kSecond,
spreadRadius: 0.5,
blurRadius: 5,
offset: Offset(0, 1.5), // changes position of shadow
),
],
);
}

View File

@ -253,7 +253,7 @@ class _MapConfigState extends State<MapConfig> {
boxDecoration(GeoPointDTO geoPointDTO, appContext) {
return BoxDecoration(
color: geoPointDTO.title == null ? Colors.lightGreen : kBackgroundColor,
color: kBackgroundColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1.5, color: kSecond),
borderRadius: BorderRadius.circular(10.0),

View File

@ -0,0 +1,232 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/fetch_section_icon.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/listView_card_image.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/listView_card_subSection.dart';
import 'package:manager_app/Screens/Configurations/new_section_popup.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'dart:convert';
import 'package:provider/provider.dart';
class MenuConfig extends StatefulWidget {
final String color;
final String label;
final String initialValue;
final ValueChanged<String> onChanged;
const MenuConfig({
Key key,
this.color,
this.label,
this.initialValue,
this.onChanged,
}) : super(key: key);
@override
_MenuConfigState createState() => _MenuConfigState();
}
class _MenuConfigState extends State<MenuConfig> {
MenuDTO menuDTO;
@override
void initState() {
super.initState();
menuDTO = MenuDTO.fromJson(json.decode(widget.initialValue));
List<SectionDTO> test = new List<SectionDTO>.from(menuDTO.sections);
menuDTO.sections = test;
}
@override
Widget build(BuildContext context) {
final appContext = Provider.of<AppContext>(context);
Size size = MediaQuery.of(context).size;
return bodyGrid(size, appContext);
}
Widget bodyGrid(Size size, AppContext appContext) {
void _onReorder(int oldIndex, int newIndex) {
setState(
() {
if (newIndex > oldIndex) {
newIndex -= 1;
}
final SectionDTO item = menuDTO.sections.removeAt(oldIndex);
menuDTO.sections.insert(newIndex, item);
/*var i = 0;
menuDTO.sections.forEach((image) {
//image.order = i; // TODO
i++;
});*/
widget.onChanged(jsonEncode(menuDTO).toString());
},
);
}
return SingleChildScrollView(
child: Stack(
children: [
Container(
height: size.height *0.40,
child: Padding(
padding: const EdgeInsets.all(8.0),
child : ReorderableListView(
onReorder: _onReorder,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(vertical: 20.0),
children: List.generate(
menuDTO.sections.length,
(index) {
return ListViewCardSubSection(
menuDTO.sections,
index,
Key('$index'),
appContext,
(sections) {
setState(() {
List<SectionDTO> test = new List<SectionDTO>.from(sections);
menuDTO.sections = test;
widget.onChanged(jsonEncode(menuDTO).toString());
});
}
);
},
),
),
),
),
Positioned(
bottom: 0,
right: 0,
child: InkWell(
onTap: () {
showNewSection(
appContext.getContext().selectedConfiguration.id,
appContext,
context,
true,
(SectionDTO newSubsection) {
setState(() {
print("RECEIVED new swubssection");
print(newSubsection);
menuDTO.sections.add(newSubsection);
widget.onChanged(jsonEncode(menuDTO).toString());
});
});
},
child: Container(
height: MediaQuery.of(context).size.width * 0.04,
width: MediaQuery.of(context).size.width * 0.04,
child: Icon(
Icons.add,
color: kTextLightColor,
size: 30.0,
),
decoration: BoxDecoration(
color: Colors.lightGreen,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
boxShadow: [
BoxShadow(
color: kSecond,
spreadRadius: 0.5,
blurRadius: 5,
offset: Offset(0, 1.5), // changes position of shadow
),
],
),
),
),
)
],
),
);
}
getElement(int index, SectionDTO sectionDTO, Size size, AppContext appContext) {
return Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: AutoSizeText(
sectionDTO.label,
style: new TextStyle(fontSize: 15),
maxLines: 2,
textAlign: TextAlign.center,
),
),
Positioned(
top: 0,
left: 0,
child: Icon(
getSectionIcon(sectionDTO.type),
color: kSecond,
size: 18.0,
),
),
Positioned(
bottom: 0,
left: 0,
child: InkWell(
onTap: () {
/*showNewSection(appContext.getContext().selectedConfiguration.id, appContext, context, true);*/
// TODO ?
},
child: Icon(
Icons.edit,
color: kPrimaryColor,
size: 20.0,
)
),
),
Positioned(
bottom: 0,
right: 0,
child: InkWell(
onTap: () {
setState(() {
menuDTO.sections.removeAt(index);
widget.onChanged(jsonEncode(menuDTO).toString());
});
},
child: Icon(
Icons.delete,
color: kPrimaryColor,
size: 20.0,
)
),
)
],
),
);
}
}
boxDecoration(SectionDTO sectionDTO, appContext) {
return BoxDecoration(
color: kBackgroundColor,
shape: BoxShape.rectangle,
border: Border.all(width: 1.5, color: kSecond),
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: kSecond,
spreadRadius: 0.5,
blurRadius: 5,
offset: Offset(0, 1.5), // changes position of shadow
),
],
);
}

View File

@ -0,0 +1,244 @@
import 'package:auto_size_text/auto_size_text.dart';
import 'package:manager_app/Components/image_input_container.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Components/rounded_button.dart';
import 'package:manager_app/Components/string_input_container.dart';
import 'package:manager_app/Components/text_form_input_container.dart';
import 'package:manager_app/Models/managerContext.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/slider_config.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/web_video_config.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
import 'map_config.dart';
import 'menu_config.dart';
void showEditSubSection(SectionDTO subSectionDTO, Function getResult, AppContext appContext, BuildContext context) {
Size size = MediaQuery.of(context).size;
showDialog(
builder: (BuildContext context) => AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))
),
content: Container(
width: size.width *0.85,
child: SingleChildScrollView(
child: Column(
children: [
Text("Modifier sous section", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
StringInputContainer(
label: "Nom :",
initialValue: subSectionDTO.label,
onChanged: (String name) {
subSectionDTO.label = name;
},
),
ImageInputContainer(
label: "Image :",
initialValue: subSectionDTO.imageId,
color: kPrimaryColor,
onChanged: (ResourceDTO resource) {
subSectionDTO.imageId = resource.id;
},
),
/*Column(
children: [
StringInputContainer(
label: "Latitude :",
initialValue: geoPointDTO.latitude,
onChanged: (value) {
geoPointDTO.latitude = value;
},
),
StringInputContainer(
label: "Longitude :",
initialValue: geoPointDTO.longitude,
onChanged: (value) {
geoPointDTO.longitude = value;
},
)
],
)*/
],
),
Container(
width: double.infinity,
color: Colors.lightBlue,
child: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: getTranslations(context, appContext, subSectionDTO),
),
),
),
Container(
decoration: BoxDecoration(
color: kWhite,
borderRadius: BorderRadius.circular(20),
border: Border.all(width: 0.5, color: kSecond)
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: getSpecificData(subSectionDTO, context, appContext),
),
),
],
),
],
),
),
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Align(
alignment: AlignmentDirectional.bottomEnd,
child: Container(
width: 175,
height: 70,
child: RoundedButton(
text: "Annuler",
icon: Icons.undo,
color: kSecond,
press: () {
Navigator.of(context).pop();
},
fontSize: 20,
),
),
),
Align(
alignment: AlignmentDirectional.bottomEnd,
child: Container(
width: subSectionDTO != null ? 220: 150,
height: 70,
child: RoundedButton(
text: "Sauvegarder",
icon: Icons.check,
color: kPrimaryColor,
textColor: kWhite,
press: () {
getResult(subSectionDTO);
Navigator.of(context).pop();
},
fontSize: 20,
),
),
),
],
),
],
), context: context
);
}
getSpecificData(SectionDTO sectionDTO, BuildContext context, AppContext appContext) {
switch(sectionDTO.type) {
case SectionType.map:
return MapConfig(
initialValue: sectionDTO.data,
onChanged: (String data) {
print("Received info in parent");
print(data);
sectionDTO.data = data;
},
);
case SectionType.slider:
return Container(
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height * 0.5,
child: SliderConfig(
initialValue: sectionDTO.data,
onChanged: (String data) {
print("Received info in parent");
print(data);
sectionDTO.data = data;
},
),
);
case SectionType.video:
case SectionType.web:
return WebOrVideoConfig(
label: sectionDTO.type == SectionType.video ? "Url de la vidéo:": "Url du site web:",
initialValue: sectionDTO.data,
onChanged: (String data) {
sectionDTO.data = data;
},
);
case SectionType.menu:
return MenuConfig(
initialValue: sectionDTO.data,
onChanged: (String data) {
print("Received info in parent");
print(data);
sectionDTO.data = data;
},
);
}
}
getTranslations(BuildContext context, AppContext appContext, SectionDTO subSectionDTO) {
List<Widget> translations = <Widget>[];
ManagerAppContext managerAppContext = appContext.getContext();
for(var language in managerAppContext.selectedConfiguration.languages) {
translations.add(
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: MediaQuery.of(context).size.width *0.05,
height: MediaQuery.of(context).size.height *0.2,
decoration: BoxDecoration(
border: Border(
right: BorderSide(width: 1.5, color: kSecond),
),
),
child: Center(child: AutoSizeText(language.toUpperCase()))
),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextFormInputContainer(
label: "Titre:",
color: kWhite,
isTitle: true,
initialValue: subSectionDTO.title.where((element) => element.language == language).first.value,
onChanged: (value) {
subSectionDTO.title.where((element) => element.language == language).first.value = value;
},
),
TextFormInputContainer(
label: "Description:",
color: kWhite,
isTitle: false,
initialValue: subSectionDTO.description.where((element) => element.language == language).first.value,
onChanged: (value) {
subSectionDTO.description.where((element) => element.language == language).first.value = value;
},
),
],
),
),
)
],
),
)
);
}
return translations;
}

View File

@ -1,6 +1,6 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/listViewcard.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/listView_card_image.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/new_update_image_slider.dart';
import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
@ -73,7 +73,7 @@ class _SliderConfigState extends State<SliderConfig> {
children: List.generate(
sliderDTO.images.length,
(index) {
return ListViewCard(
return ListViewCardImage(
sliderDTO.images,
index,
Key('$index'),

View File

@ -18,6 +18,7 @@ import 'package:provider/provider.dart';
import 'package:intl/intl.dart';
import 'SubSection/map_config.dart';
import 'SubSection/menu_config.dart';
class SectionDetailScreen extends StatefulWidget {
final String id;
@ -320,7 +321,14 @@ class _SectionDetailScreenState extends State<SectionDetailScreen> {
},
);
case SectionType.menu:
return Text("menu");
return MenuConfig(
initialValue: sectionDTO.data,
onChanged: (String data) {
print("Received info in parent");
print(data);
sectionDTO.data = data;
},
);
}
}
}

View File

@ -29,7 +29,6 @@ class ConfigurationDetailScreen extends StatefulWidget {
class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
ConfigurationDTO configurationDTO;
SectionDTO selectedSection;
List<String> languages = ["FR", "NL", "EN", "DE"];
@override
Widget build(BuildContext context) {
@ -169,7 +168,7 @@ class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
future: getSections(configurationDTO, appContext.getContext().clientAPI),
builder: (context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
var tempOutput = new List<SectionDTO>.from(snapshot.data);
var tempOutput = new List<SectionDTO>.from(snapshot.data).where((section) => !section.isSubSection).toList();
tempOutput.add(SectionDTO(id: null));
return bodyGrid(configurationDTO, tempOutput, size, appContext);
} else if (snapshot.connectionState == ConnectionState.none) {
@ -307,7 +306,7 @@ class _ConfigurationDetailScreenState extends State<ConfigurationDetailScreen> {
InkWell(
onTap: () {
if (data[index].id == null) {
showNewSection(configurationDTO, appContext, context);
showNewSection(configurationDTO.id, appContext, context, false, null);
} else {
setState(() {
ManagerAppContext managerAppContext = appContext.getContext();

View File

@ -8,9 +8,11 @@ import 'package:manager_app/app_context.dart';
import 'package:manager_app/constants.dart';
import 'package:managerapi/api.dart';
void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, BuildContext context) {
void showNewSection(String configurationId, AppContext appContext, BuildContext context, bool isSubSection, Function sendSubSection) {
SectionDTO sectionDTO = new SectionDTO();
sectionDTO.configurationId = configurationDTO.id;
sectionDTO.configurationId = configurationId;
sectionDTO.isSubSection = isSubSection;
sectionDTO.parentId = isSubSection ? appContext.getContext().selectedSection.id : null;
showDialog(
builder: (BuildContext context) => AlertDialog(
@ -20,7 +22,7 @@ void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, Bu
content: SingleChildScrollView(
child: Column(
children: [
Text("Nouvelle section", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)),
Text(isSubSection? "Nouvelle sous section": "Nouvelle section", style: new TextStyle(fontSize: 25, fontWeight: FontWeight.w400)),
Column(
children: [
StringInputContainer(
@ -34,10 +36,14 @@ void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, Bu
label: "Type :",
initialValue: ["Map"],
isMultiple: false,
values: section_types,
values: isSubSection ? section_types.where((sectionType) => sectionType != "Menu").toList(): section_types, // Todo get menu by enum type
onChanged: (value) {
var tempOutput = new List<String>.from(value);
sectionDTO.type = SectionType.fromJson(tempOutput[0]);
print("TYPE CREATE");
print(value);
print(sectionDTO.type);
},
),
],
@ -77,7 +83,7 @@ void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, Bu
textColor: kWhite,
press: () {
//onYes();
create(sectionDTO, appContext, context);
create(sectionDTO, appContext, context, isSubSection, sendSubSection);
},
fontSize: 20,
),
@ -90,19 +96,21 @@ void showNewSection(ConfigurationDTO configurationDTO, AppContext appContext, Bu
);
}
void create(SectionDTO sectionDTO, AppContext appContext, BuildContext context) async {
void create(SectionDTO sectionDTO, AppContext appContext, BuildContext context, bool isSubSection, Function sendSubSection) async {
if (sectionDTO.label != null) {
Navigator.of(context).pop();
print(sectionDTO);
SectionDTO newSection = await appContext.getContext().clientAPI.sectionApi.sectionCreate(sectionDTO);
if (!isSubSection) {
ManagerAppContext managerAppContext = appContext.getContext();
if (managerAppContext.selectedConfiguration.sectionIds == null) {
managerAppContext.selectedConfiguration.sectionIds = new List<String>();
managerAppContext.selectedConfiguration.sectionIds = <String>[];
}
managerAppContext.selectedConfiguration.sectionIds.add(newSection.id);
appContext.setContext(managerAppContext);
showNotification(Colors.green, kWhite, 'La section a été créée avec succès !', context);
} else {
sendSubSection(newSection);
}
}
}

View File

@ -14,6 +14,7 @@ const kBlack = Color(0xFF000000);
const List<String> section_types = ["Map", "Slider", "Video", "Web", "Menu"];
const List<String> map_types = ["none", "normal", "satellite", "terrain", "hybrid"];
const List<String> languages = ["FR", "NL", "EN", "DE"];
/*
const kTextStyle = TextStyle(