Simba/feature/note folder screen UI

app/src/main/java/com/hadiyarajesh/notex/ui/folders/NoteFolderScreen.kt

@@ -0,0 +1,266 @@
+package com.hadiyarajesh.notex.ui.folders
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.items
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import androidx.paging.compose.collectAsLazyPagingItems
+import com.hadiyarajesh.notex.R
+import com.hadiyarajesh.notex.database.entity.Folder
+import com.hadiyarajesh.notex.database.model.FolderType.NoteFolder
+import com.hadiyarajesh.notex.ui.navigation.Screens
+import java.time.Instant
+
+@Composable
+fun NoteFolderScreen(
+    modifier: Modifier = Modifier,
+    navController: NavController,
+    folderViewModel: NoteFolderViewModel
+) {
+    val scope = rememberCoroutineScope()
+    val context = LocalContext.current
+    val folders = remember { folderViewModel.getFolders() }.collectAsLazyPagingItems()
+
+    val data = listOf(
+        Folder(
+            folderId = 12345,
+            title = "Android",
+            description = "Android Notes",
+            folderType = NoteFolder,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        ),
+        Folder(
+            folderId = 12346,
+            title = "Android1",
+            description = "Android Notes",
+            folderType = NoteFolder,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        ),
+        Folder(
+            folderId = 12347,
+            title = "Android2",
+            description = "Android Notes",
+            folderType = NoteFolder,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        ),
+        Folder(
+            folderId = 12348,
+            title = "Android3",
+            description = "Android Notes",
+            folderType = NoteFolder,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        ),
+        Folder(
+            folderId = 12349,
+            title = "Android4",
+            description = "Android Notes",
+            folderType = NoteFolder,
+            createdOn = Instant.now(),
+            updatedOn = Instant.now()
+        )
+    )
+    val state = rememberLazyGridState()
+    Surface {
+        Column(
+            modifier = modifier.fillMaxSize()
+        ) {
+            Row(
+                modifier = modifier
+                    .fillMaxWidth()
+                    .padding(10.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    text = stringResource(id = R.string.categories),
+                    style = MaterialTheme.typography.headlineMedium,
+                    modifier = modifier.padding(start = 120.dp)
+                )
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_add_circle_outline),
+                    contentDescription = "add_note",
+                    modifier = modifier
+                        .padding(end = 10.dp)
+                        .clickable {
+                            navController.navigate(Screens.AddNote.route)
+                        }
+                )
+
+            }
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(20.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(id = R.string.list_categories),
+                    style = MaterialTheme.typography.bodyMedium
+                )
+            }
+
+            LazyVerticalGrid(
+                modifier = modifier.padding(8.dp),
+                columns = GridCells.Fixed(2),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                state = state,
+            ) {
+                items(
+                    items = data,
+                    key = {
+                        it.title
+                    }
+                ) { noteItem ->
+                    NoteFolderItemUI(onClick = {}, folder = noteItem)
+                }
+            }
+        }
+    }
+}
+
+@Composable
+fun NoteFolderItemUI(
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+    folder: Folder,
+) {
+    Box(
+        modifier = modifier
+            .padding(8.dp)
+            .aspectRatio(1f)
+            .clip(RoundedCornerShape(8.dp))
+            .background(Color.LightGray),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(
+            modifier = modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            Icon(painterResource(id = R.drawable.ic_folder_filled), contentDescription = null)
+
+            Text(
+                text = "Item ${folder.title}",
+                style = MaterialTheme.typography.bodyLarge,
+                fontWeight = FontWeight.Bold
+            )
+
+            Text(
+                text = "${folder.description}",
+                style = MaterialTheme.typography.bodyMedium
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun NoteFolderScreenPreview() {
+    val state = rememberLazyGridState()
+    Surface {
+        Column(
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(10.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(id = R.string.categories),
+                    style = MaterialTheme.typography.headlineMedium,
+                    modifier = Modifier.padding(start = 130.dp)
+                )
+
+                Icon(
+                    painter = painterResource(id = R.drawable.ic_add_circle_outline),
+                    contentDescription = "add_note",
+                    modifier = Modifier
+                        .padding(end = 10.dp)
+                )
+            }
+
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(10.dp),
+                horizontalArrangement = Arrangement.SpaceBetween,
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Text(
+                    text = stringResource(id = R.string.list_categories),
+                    style = MaterialTheme.typography.bodyMedium
+                )
+            }
+
+            LazyVerticalGrid(
+                columns = GridCells.Fixed(2),
+                verticalArrangement = Arrangement.spacedBy(8.dp),
+                horizontalArrangement = Arrangement.spacedBy(8.dp),
+                state = state
+            ) {
+                items(100) { noteFolderItems ->
+                    Box(
+                        modifier = Modifier
+                            .padding(8.dp)
+                            .aspectRatio(1f)
+                            .clip(RoundedCornerShape(8.dp))
+                            .background(Color.LightGray),
+                        contentAlignment = Alignment.Center
+                    ) {
+                        Column(
+                            modifier = Modifier.fillMaxWidth(),
+                            horizontalAlignment = Alignment.CenterHorizontally
+                        ) {
+                            Icon(
+                                painterResource(id = R.drawable.ic_folder_filled),
+                                contentDescription = null
+                            )
+
+                            Text(
+                                text = "Item $noteFolderItems",
+                                style = MaterialTheme.typography.bodyLarge,
+                                fontWeight = FontWeight.Bold
+                            )
+
+                            Text(
+                                text = "$noteFolderItems item description",
+                                style = MaterialTheme.typography.bodyMedium
+                            )
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

app/src/main/java/com/hadiyarajesh/notex/ui/folders/NoteFolderViewModel.kt

@@ -0,0 +1,34 @@
+package com.hadiyarajesh.notex.ui.folders
+
+import androidx.lifecycle.ViewModel
+import androidx.lifecycle.viewModelScope
+import androidx.paging.PagingData
+import androidx.paging.cachedIn
+import com.hadiyarajesh.notex.database.model.FolderType
+import com.hadiyarajesh.notex.database.model.NoteFolder
+import com.hadiyarajesh.notex.repository.folder.FolderRepository
+import dagger.hilt.android.lifecycle.HiltViewModel
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.launch
+import javax.inject.Inject
+
+@HiltViewModel
+class NoteFolderViewModel @Inject constructor(
+    private val folderRepository: FolderRepository
+) : ViewModel() {
+    fun createFolder(
+        name: String,
+        description: String?,
+        folderType: FolderType
+    ) = viewModelScope.launch {
+        folderRepository.createFolder(
+            name = name,
+            description = description,
+            folderType = folderType
+        )
+    }
+
+    fun getFolders(): Flow<PagingData<NoteFolder>> {
+        return folderRepository.getAllNoteFolders().cachedIn(viewModelScope)
+    }
+}

app/src/main/java/com/hadiyarajesh/notex/ui/navigation/Screens.kt

@@ -38,6 +38,12 @@ sealed class Screens(
         selectedIcon = R.drawable.ic_task_filled
     )
 
+    object NoteFolder : Screens(
+        route = "Folders",
+        icon = R.drawable.ic_task_outlined,
+        selectedIcon = R.drawable.ic_task_filled
+    )
+
     fun withArgs(vararg args: Any): String {
         return buildString {
             append(route)

app/src/main/res/drawable/ic_add_circle_outline.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M13,7h-2v4L7,11v2h4v4h2v-4h4v-2h-4L13,7zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8z"/>
+</vector>

app/src/main/res/drawable/ic_folder_filled.xml

@@ -0,0 +1,5 @@
+<vector android:height="24dp" android:tint="#000000"
+    android:viewportHeight="24" android:viewportWidth="24"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="@android:color/white" android:pathData="M10,4H4c-1.1,0 -1.99,0.9 -1.99,2L2,18c0,1.1 0.9,2 2,2h16c1.1,0 2,-0.9 2,-2V8c0,-1.1 -0.9,-2 -2,-2h-8l-2,-2z"/>
+</vector>

app/src/main/res/values-hi/strings.xml

@@ -3,4 +3,6 @@
     <string name="welcome_message">NoteX में आपका स्वागत है</string>
     <string name="retry">फिर से प्रयास करें</string>
     <string name="empty_message">यहाँ सब खाली है</string>
+    <string name="categories">श्रेणियाँ</string>
+    <string name="list_categories">सूची श्रेणियाँ</string>
 </resources>

app/src/main/res/values/strings.xml

@@ -8,6 +8,9 @@
     <string name="welcome_message">Welcome to NoteX</string>
     <string name="retry">Retry</string>
     <string name="empty_message">It\'s all empty here</string>
+    <string name="categories">Categories</string>
+    <string name="list_categories">List Categories</string>
+
      <!-- cd = content description -->
     <string name="cd_add">Add</string>
     <string name="cd_back">Back</string>