Merge pull request #550 from angeles-bilbao6/jetsnack-filter-page

[Jetsnack] Add filter screen

Author: JoseAlcerreca

Jetsnack/app/build.gradle

@@ -106,6 +106,7 @@ dependencies {
 
  implementation Libs.Accompanist.insets
  implementation Libs.Accompanist.systemuicontroller
+ implementation Libs.Accompanist.flowlayouts
 
  implementation Libs.Coil.coilCompose
 

Jetsnack/app/src/main/java/com/example/jetsnack/model/Filter.kt

@@ -16,21 +16,53 @@
 
 package com.example.jetsnack.model
 
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Android
+import androidx.compose.material.icons.filled.SortByAlpha
+import androidx.compose.material.icons.filled.Star
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.graphics.vector.ImageVector
 
 @Stable
 class Filter(
  val name: String,
- enabled: Boolean = false
+ enabled: Boolean = false,
+ val icon: ImageVector? = null
 ) {
  val enabled = mutableStateOf(enabled)
 }
-
 val filters = listOf(
  Filter(name = "Organic"),
  Filter(name = "Gluten-free"),
  Filter(name = "Dairy-free"),
  Filter(name = "Sweet"),
  Filter(name = "Savory")
 )
+val priceFilters = listOf(
+ Filter(name = "$"),
+ Filter(name = "$$"),
+ Filter(name = "$$$"),
+ Filter(name = "$$$$")
+)
+val sortFilters = listOf(
+ Filter(name = "Android's favorite (default)", icon = Icons.Filled.Android),
+ Filter(name = "Rating", icon = Icons.Filled.Star),
+ Filter(name = "Alphabetical", icon = Icons.Filled.SortByAlpha)
+)
+
+val categoryFilters = listOf(
+ Filter(name = "Chips & crackers"),
+ Filter(name = "Fruit snacks"),
+ Filter(name = "Desserts"),
+ Filter(name = "Nuts")
+)
+val lifeStyleFilters = listOf(
+ Filter(name = "Organic"),
+ Filter(name = "Gluten-free"),
+ Filter(name = "Dairy-free"),
+ Filter(name = "Sweet"),
+ Filter(name = "Savory")
+)
+
+var sortDefault = sortFilters.get(0).name

Jetsnack/app/src/main/java/com/example/jetsnack/model/SnackCollection.kt

@@ -37,7 +37,12 @@ object SnackRepo {
  fun getRelated(@Suppress("UNUSED_PARAMETER") snackId: Long) = related
  fun getInspiredByCart() = inspiredByCart
  fun getFilters() = filters
+ fun getPriceFilters() = priceFilters
  fun getCart() = cart
+ fun getSortFilters() = sortFilters
+ fun getCategoryFilters() = categoryFilters
+ fun getSortDefault() = sortDefault
+ fun getLifeStyleFilters() = lifeStyleFilters
 }
 
 /**

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Filters.kt

@@ -52,15 +52,19 @@ import com.example.jetsnack.model.Filter
 import com.example.jetsnack.ui.theme.JetsnackTheme
 
 @Composable
-fun FilterBar(filters: List<Filter>) {
+fun FilterBar(
+ filters: List<Filter>,
+ onShowFilters: () -> Unit
+) {
+
  LazyRow(
  verticalAlignment = Alignment.CenterVertically,
  horizontalArrangement = Arrangement.spacedBy(8.dp),
  contentPadding = PaddingValues(start = 12.dp, end = 8.dp),
  modifier = Modifier.heightIn(min = 56.dp)
  ) {
  item {
- IconButton(onClick = { /* todo */ }) {
+ IconButton(onClick = onShowFilters) {
  Icon(
  imageVector = Icons.Rounded.FilterList,
  tint = JetsnackTheme.colors.brand,
@@ -73,7 +77,7 @@ fun FilterBar(filters: List<Filter>) {
  }
  }
  items(filters) { filter ->
- FilterChip(filter)
+ FilterChip(filter = filter, shape = MaterialTheme.shapes.small)
  }
  }
 }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/Feed.kt

@@ -17,13 +17,26 @@
 package com.example.jetsnack.ui.home
 
 import android.content.res.Configuration
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.ExperimentalAnimationApi
+import androidx.compose.animation.expandVertically
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.shrinkVertically
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -59,6 +72,7 @@ private fun Feed(
  onSnackClick: (Long) -> Unit,
  modifier: Modifier = Modifier
 ) {
+
  JetsnackSurface(modifier = modifier.fillMaxSize()) {
  Box {
  SnackCollectionList(snackCollections, filters, onSnackClick)
@@ -67,29 +81,46 @@ private fun Feed(
  }
 }
 
+@OptIn(ExperimentalAnimationApi::class)
 @Composable
 private fun SnackCollectionList(
  snackCollections: List<SnackCollection>,
  filters: List<Filter>,
  onSnackClick: (Long) -> Unit,
  modifier: Modifier = Modifier
 ) {
- LazyColumn(modifier) {
- item {
- Spacer(Modifier.statusBarsHeight(additional = 56.dp))
- FilterBar(filters)
- }
- itemsIndexed(snackCollections) { index, snackCollection ->
- if (index > 0) {
- JetsnackDivider(thickness = 2.dp)
+ var filtersVisible by rememberSaveable { mutableStateOf(false) }
+ Box(modifier) {
+ LazyColumn {
+
+ item {
+ Spacer(Modifier.statusBarsHeight(additional = 56.dp))
+ FilterBar(filters, onShowFilters = { filtersVisible = true })
+ }
+ itemsIndexed(snackCollections) { index, snackCollection ->
+ if (index > 0) {
+ JetsnackDivider(thickness = 2.dp)
+ }
+
+ SnackCollection(
+ snackCollection = snackCollection,
+ onSnackClick = onSnackClick,
+ index = index
+ )
  }
- SnackCollection(
- snackCollection = snackCollection,
- onSnackClick = onSnackClick,
- index = index
- )
  }
  }
+ AnimatedVisibility(
+ visible = filtersVisible,
+ enter = slideInVertically() + expandVertically(
+ expandFrom = Alignment.Top
+ ) + fadeIn(initialAlpha = 0.3f),
+ exit = slideOutVertically() + shrinkVertically() + fadeOut()
+ ) {
+ FilterScreen(
+ onDismiss = { filtersVisible = false }
+ )
+ }
 }
 
 @Preview("default")