manager-app/lib/Screens/Configurations/Section/SubSection/Article/article_config.dart

import 'package:flutter/material.dart';
import 'package:manager_app/Components/check_input_container.dart';
import 'package:manager_app/Components/multi_string_input_container.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Slider/listView_card_image.dart';
import 'package:manager_app/Screens/Configurations/Section/SubSection/Slider/new_update_image_slider.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 ArticleConfig extends StatefulWidget {
  final String color;
  final String label;
  final String initialValue;
  final ValueChanged<String> onChanged;
  const ArticleConfig({
    Key key,
    this.color,
    this.label,
    this.initialValue,
    this.onChanged,
  }) : super(key: key);

  @override
  _ArticleConfigState createState() => _ArticleConfigState();
}

class _ArticleConfigState extends State<ArticleConfig> {
  ArticleDTO articleDTO;

  @override
  void initState() {
    super.initState();
    articleDTO = ArticleDTO.fromJson(json.decode(widget.initialValue));
    List<ImageDTO> test = new List<ImageDTO>.from(articleDTO.images);

    articleDTO.images = test;
    articleDTO.images.sort((a, b) => a.order.compareTo(b.order));
  }

  @override
  Widget build(BuildContext context) {
    final appContext = Provider.of<AppContext>(context);
    Size size = MediaQuery.of(context).size;

    void _onReorder(int oldIndex, int newIndex) {
      setState(
            () {
          if (newIndex > oldIndex) {
            newIndex -= 1;
          }
          final ImageDTO item = articleDTO.images.removeAt(oldIndex);
          articleDTO.images.insert(newIndex, item);

          var i = 0;
          articleDTO.images.forEach((image) {
            image.order = i;
            i++;
          });

          widget.onChanged(jsonEncode(articleDTO).toString());
        },
      );
    }

    return
      SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: size.height * 0.1,
              //width: size.width * 0.5,//,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  MultiStringContainer(
                    label: "Contenu affiché:",
                    modalLabel: "Contenu",
                    color: kPrimaryColor,
                    initialValue: articleDTO != null ? articleDTO.content : [],
                    isTitle: false,
                    onGetResult: (value) {
                      setState(() {
                        if (articleDTO.content != value) {
                          articleDTO.content = value;
                          //save(true, articleDTO, appContext);
                          widget.onChanged(jsonEncode(articleDTO).toString());
                        }
                      });
                    },
                    maxLines: 1,
                  ),
                  CheckInputContainer(
                    label: "Contenu au-dessus  :",
                    isChecked: articleDTO.isContentTop,
                    onChanged: (value) {
                      setState(() {
                        //print(value);
                        articleDTO.isContentTop = value;
                        widget.onChanged(jsonEncode(articleDTO).toString());
                      });
                    },
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(25),
                    border: Border.all(width: 1.5, color: kSecond)
                ),
                child: Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 40, left: 10, right: 10, bottom: 10),
                      child: Container(
                        height: 250,
                        width: size.height * 0.95,
                        child: ReorderableListView(
                          onReorder: _onReorder,
                          scrollDirection: Axis.horizontal,
                          padding: const EdgeInsets.symmetric(vertical: 20.0),
                          children: List.generate(
                            articleDTO.images.length,
                              (index) {
                              return ListViewCardImage(
                                  articleDTO.images,
                                  index,
                                  Key('$index'),
                                  appContext,
                                  (images) {
                                    setState(() {
                                      List<ImageDTO> test = new List<ImageDTO>.from(images);
                                      articleDTO.images = test;
                                      List<ImageDTO> testToSend = new List<ImageDTO>.from(images);
                                      testToSend = testToSend.where((element) => element.source_ != null).toList();
                                      var articleToSend = new ArticleDTO();
                                      articleToSend.images = testToSend;
                                      widget.onChanged(jsonEncode(articleToSend).toString());
                                    });
                                  }
                              );
                            },
                          ),
                        ),
                      ),
                    ),
                    Positioned(
                      top: 10,
                      left: 10,
                      child: Text(
                        "Images",
                        style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
                      ),
                    ),
                    Positioned(
                      bottom: 15,
                      right: 15,
                      child: InkWell(
                        onTap: () async {
                          var result = await showNewOrUpdateImageSlider(null, appContext, context);
                          if (result != null)
                          {
                            setState(() {
                              result.order = articleDTO.images.length;
                              articleDTO.images.add(result);
                              widget.onChanged(jsonEncode(articleDTO).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: kSuccess,
                            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
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ]),
              ),
            ),
          ],
        ),
      );
  }
}