add suggestion for search item

covas_mobile/lib/pages/ListItemMenu.dart

@@ -42,6 +42,7 @@ class _MyHomePageState extends State<ListItemMenu> {
   Future<List<Events>> postsFuture = getPosts();
   List<Events> filteredPosts = [];
   String geographicalZone = '';
+  String itemName = '';
   String query = '';
   List<Map<String, dynamic>> suggestions = [];
   List<Map<String, dynamic>> suggestionsItem = [];
@@ -268,28 +269,80 @@ class _MyHomePageState extends State<ListItemMenu> {
     }
   }
 
+  Future<Uri> getUrlForEvents() async {
+    SharedPreferences prefs = await SharedPreferences.getInstance();
+    double latitude = prefs.getDouble("city_lat") ?? 0.0;
+    double longitude = prefs.getDouble("city_long") ?? 0.0;
+    String stringParameter = "";
+    String endpoint = "events";
+    if ((latitude != 0.0) && (longitude != 0.0)) {
+      // Calculate the boundaries
+      double radiusInKm = 50;
+      double latDistance = radiusInKm / 111.0;
+      double lonDistance = radiusInKm / (111.0 * cos(latitude * pi / 180));
+
+      double minLat = latitude - latDistance;
+      double maxLat = latitude + latDistance;
+      double minLon = longitude - lonDistance;
+      double maxLon = longitude + lonDistance;
+      endpoint = "events/search";
+
+      stringParameter = "min_lat=$minLat&max_lat=$maxLat"
+          "&min_lon=$minLon&max_lon=$maxLon";
+    }
+    DateTime currentDate = DateTime.now();
+    String dateParameter = "current_datetime=${currentDate.toString()}";
+    if (startDatepicker.text.isNotEmpty) {
+      var date = DateTime.parse(formatDate(startDatepicker.text));
+      dateParameter = "date_event=" + date.toString();
+      endpoint = "events/search";
+    }
+    if (endDatepicker.text.isNotEmpty) {
+      var date = DateTime.parse(formatDate(endDatepicker.text));
+      dateParameter = "date_event=" + date.toString();
+      endpoint = "events/search";
+    }
+    if ((startDatepicker.text.isNotEmpty) && (endDatepicker.text.isNotEmpty)) {
+      var startDate = DateTime.parse(formatDate(startDatepicker.text));
+      var endDate = DateTime.parse(formatDate(endDatepicker.text));
+      dateParameter = "&start_date=" +
+          startDate.toString() +
+          "&end_date=" +
+          endDate.toString();
+      endpoint = "events/search";
+    }
+
+    if (inputItem.text.isNotEmpty) {
+      stringParameter = stringParameter + "&item=${inputItem.text}";
+      endpoint = "events/search";
+    }
+    if (stringParameter.isNotEmpty) {
+      stringParameter = "$stringParameter&$dateParameter";
+    } else {
+      stringParameter = dateParameter;
+    }
+    return Uri.parse("${globals.api}/${endpoint}?${stringParameter}");
+  }
+
   Future<void> searchSuggestionsByItem(String input) async {
     SharedPreferences prefs = await SharedPreferences.getInstance();
     var accessToken = prefs.getString("access_token") ?? "";
 
     if (accessToken.isNotEmpty) {
-      final url =
+      var url = await getUrlForEvents();
-          'https://api.mapbox.com/geocoding/v5/mapbox.places/${input}.json?access_token=${mapboxAccessToken}&proximity=ip';
+      final response = await http.get(url, headers: {
-      final response = await http.get(Uri.parse(url));
+        "Content-Type": "application/json",
+        HttpHeaders.cookieHeader: "access_token=$accessToken"
+      });
 
       if (response.statusCode == 200) {
         final data = json.decode(response.body);
         setState(() {
-          suggestions = (data['features'] as List)
+          suggestionsItem = (data as List)
-              .map((feature) => {
+              .map((feature) => {'name': feature['name']})
-                    'place_name': feature['place_name'],
-                    'geometry': feature[
-                        'geometry'], // Include geometry for latitude/longitude
-                  })
               .toList();
         });
-      } else {
+        print("status code : ${response.statusCode}");
-        throw Exception('Failed to load suggestions');
       }
     }
   }
@@ -299,59 +352,7 @@ class _MyHomePageState extends State<ListItemMenu> {
     var accessToken = prefs.getString("access_token") ?? "";
 
     if (accessToken.isNotEmpty) {
-      double latitude = prefs.getDouble("city_lat") ?? 0.0;
+      var url = await getUrlForEvents();
-      double longitude = prefs.getDouble("city_long") ?? 0.0;
-      String stringParameter = "";
-      String endpoint = "events";
-      if ((latitude != 0.0) && (longitude != 0.0)) {
-        // Calculate the boundaries
-        double radiusInKm = 50;
-        double latDistance = radiusInKm / 111.0;
-        double lonDistance = radiusInKm / (111.0 * cos(latitude * pi / 180));
-
-        double minLat = latitude - latDistance;
-        double maxLat = latitude + latDistance;
-        double minLon = longitude - lonDistance;
-        double maxLon = longitude + lonDistance;
-        endpoint = "events/search";
-
-        stringParameter = "min_lat=$minLat&max_lat=$maxLat"
-            "&min_lon=$minLon&max_lon=$maxLon";
-      }
-      DateTime currentDate = DateTime.now();
-      String dateParameter = "current_datetime=${currentDate.toString()}";
-      if (startDatepicker.text.isNotEmpty) {
-        var date = DateTime.parse(formatDate(startDatepicker.text));
-        dateParameter = "date_event=" + date.toString();
-        endpoint = "events/search";
-      }
-      if (endDatepicker.text.isNotEmpty) {
-        var date = DateTime.parse(formatDate(endDatepicker.text));
-        dateParameter = "date_event=" + date.toString();
-        endpoint = "events/search";
-      }
-      if ((startDatepicker.text.isNotEmpty) &&
-          (endDatepicker.text.isNotEmpty)) {
-        var startDate = DateTime.parse(formatDate(startDatepicker.text));
-        var endDate = DateTime.parse(formatDate(endDatepicker.text));
-        dateParameter = "&start_date=" +
-            startDate.toString() +
-            "&end_date=" +
-            endDate.toString();
-        endpoint = "events/search";
-      }
-
-      if (inputItem.text.isNotEmpty) {
-        stringParameter = stringParameter + "&item=${inputItem.text}";
-        endpoint = "events/search";
-      }
-      if (stringParameter.isNotEmpty) {
-        stringParameter = "$stringParameter&$dateParameter";
-      } else {
-        stringParameter = dateParameter;
-      }
-      print("stringParameter : ${stringParameter}");
-      var url = Uri.parse("${globals.api}/${endpoint}?${stringParameter}");
       final response = await http.get(url, headers: {
         "Content-Type": "application/json",
         HttpHeaders.cookieHeader: "access_token=$accessToken"
@@ -523,24 +524,64 @@ class _MyHomePageState extends State<ListItemMenu> {
       child: Column(
         children: [
           TextField(
-            controller: inputItem,
+              controller: inputItem,
-            decoration: InputDecoration(
+              decoration: InputDecoration(
-              labelText: 'Search by item',
+                labelText: 'Search by item',
-              border: OutlineInputBorder(),
+                border: OutlineInputBorder(),
-              suffixIcon: IconButton(
+                suffixIcon: IconButton(
-                icon: const Icon(Icons.clear),
+                  icon: const Icon(Icons.clear),
-                onPressed: () {
+                  onPressed: () {
+                    setState(() {
+                      inputItem.clear();
+                      itemName = ''; // Reset the geographical zone state
+                      suggestionsItem.clear(); //
+                    });
+                    fetchPostsByLocation();
+                  },
+                ),
+              ),
+              onChanged: (value) {
+                if (value.isNotEmpty) {
                   setState(() {
-                    inputItem.clear();
+                    itemName = value;
+                    searchSuggestionsByItem(value);
+                  });
+                } else {
+                  setState(() {
+                    inputItem.clear(); // Clear the text field
+                    itemName = ''; // Reset the geographical zone state
+                    suggestionsItem.clear(); // Optionally clear suggestions
+
+                    /// Clear the filted posts
                   });
                   fetchPostsByLocation();
+                }
+              }),
+          if (suggestionsItem.isNotEmpty)
+            Container(
+              height: 200,
+              decoration: BoxDecoration(
+                border: Border.all(color: Colors.blue),
+                borderRadius: BorderRadius.circular(8),
+              ),
+              child: ListView.builder(
+                shrinkWrap: true,
+                itemCount: suggestionsItem.length,
+                itemBuilder: (context, index) {
+                  return ListTile(
+                    title: Text(suggestionsItem[index]['name']),
+                    onTap: () async {
+                      setState(() {
+                        itemName = suggestionsItem[index]['name'];
+                        inputItem.text = itemName;
+                        suggestionsItem.clear();
+                      });
+                      await fetchPostsByLocation();
+                    },
+                  );
                 },
               ),
             ),
-            onSubmitted: (value) {
-              fetchPostsByLocation();
-            },
-          ),
         ],
       ),
     );