Update UI and Add new functionality

- Add swipe to Important and delete task functionality
- Add completed task switch
- Add Edit task functionality

androidApp/src/main/AndroidManifest.xml

@@ -2,8 +2,11 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <application
+        android:label="Tasks"
         android:allowBackup="false"
         android:supportsRtl="true"
+        android:icon="@mipmap/ic_launcher"
+        android:roundIcon="@mipmap/ic_launcher_round"
         android:theme="@style/AppTheme">
         <activity
             android:windowSoftInputMode="adjustResize"

androidApp/src/main/res/drawable/ic_launcher_foreground.xml

@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#E8C810">
+  <group android:scaleX="0.58"
+      android:scaleY="0.58"
+      android:translateX="5.04"
+      android:translateY="5.04">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M14,2H6C4.9,2 4.01,2.9 4.01,4L4,20c0,1.1 0.89,2 1.99,2H18c1.1,0 2,-0.9 2,-2V8L14,2zM10.94,18L7.4,14.46l1.41,-1.41l2.12,2.12l4.24,-4.24l1.41,1.41L10.94,18zM13,9V3.5L18.5,9H13z"/>
+  </group>
+</vector>

androidApp/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

androidApp/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+</adaptive-icon>

androidApp/src/main/res/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>

desktopApp/src/jvmMain/kotlin/com.kaushalvasava.apps.taskapp/Main.kt

@@ -10,7 +10,7 @@ fun main() =
         Window(
             onCloseRequest = ::exitApplication,
             state = windowState,
-            title = "Tasks"
+            title = "Tasks",
         ) {
           MainView()
         }

shared/src/androidMain/kotlin/com/kaushalvasava/apps/taskapp/main.android.kt

@@ -5,4 +5,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.platform.LocalContext
 import com.kaushalvasava.apps.taskapp.datasource.DriverFactory
 
-@Composable fun MainView() = App(DriverFactory(LocalContext.current.applicationContext).createDriver())
+@Composable fun MainView() = App(
+    DriverFactory(LocalContext.current.applicationContext).createDriver(),
+    true
+)

shared/src/commonMain/kotlin/com/kaushalvasava/apps/taskapp/ui/App.kt

@@ -1,53 +1,14 @@
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.AbsoluteCutCornerShape
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.Card
-import androidx.compose.material.Checkbox
-import androidx.compose.material.CheckboxDefaults
-import androidx.compose.material.Icon
-import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
-import androidx.compose.material.Text
-import androidx.compose.material.TextField
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Delete
-import androidx.compose.material.icons.filled.Done
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.collectAsState
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.unit.sp
+import com.kaushalvasava.apps.taskapp.ui.components.TaskScreen
 import com.squareup.sqldelight.db.SqlDriver
-import database.model.Task2
 import dev.icerock.moko.mvvm.compose.getViewModel
 import dev.icerock.moko.mvvm.compose.viewModelFactory
-import kotlin.random.Random
 
 @Composable
 fun TaskAppTheme(
@@ -67,177 +28,11 @@ fun TaskAppTheme(
 }
 
 @Composable
-fun App(sqlDriver: SqlDriver) {
+fun App(sqlDriver: SqlDriver, isTopBarVisible: Boolean) {
     TaskAppTheme {
         val birdsViewModel = getViewModel(Unit, viewModelFactory { TaskViewModel(sqlDriver) })
-        TaskList(birdsViewModel)
+        TaskScreen(birdsViewModel, isTopBarVisible)
     }
 }
 
-@Composable
-fun TaskList(viewModel: TaskViewModel) {
-    val tasks by viewModel.tasks.collectAsState()
-    val colors = listOf(
-        Color(0xFFF49E9E), Color(0xFF91D2F1), Color(0xFF97F19B),
-        Color(0xFFF1E197), Color(0xFFA785EC)
-    )
-    var selectedColor by remember {
-        mutableStateOf(colors.first())
-    }
-    if (tasks.isEmpty()) {
-        AddNote(selectedColor, viewModel, Modifier.padding(horizontal = 8.dp), onColorSelection = {
-            selectedColor = it
-        })
-    } else {
-        Box(Modifier.padding(horizontal = 8.dp)) {
-            AnimatedVisibility(tasks.isNotEmpty()) {
-                LazyColumn(
-                    Modifier.fillMaxSize(),
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.Top
-                ) {
-                    items(tasks.filter { !it.isDone }) {
-                        TaskItem(viewModel, it)
-                    }
-                    item {
-                        Text("Completed")
-                    }
-                    items(tasks.filter { it.isDone }) {
-                        TaskItem(viewModel, it)
-                    }
-                }
-            }
-            AddNote(selectedColor, viewModel, modifier = Modifier, onColorSelection = {
-                selectedColor = it
-            })
-        }
-    }
-}
 
-@Composable
-fun AddNote(
-    selectedColor: Color,
-    viewModel: TaskViewModel,
-    modifier: Modifier,
-    onColorSelection: (Color) -> Unit,
-) {
-    val colors = listOf(
-        Color(0xFFF49E9E), Color(0xFF91D2F1), Color(0xFF97F19B),
-        Color(0xFFF1E197), Color(0xFFA785EC)
-    )
-    var txt by remember {
-        mutableStateOf("")
-    }
-    val isImp by remember {
-        mutableStateOf(false)
-    }
-    Box(modifier.fillMaxSize()) {
-        Column(
-            modifier = Modifier.fillMaxWidth().align(Alignment.BottomCenter).clip(
-                RoundedCornerShape(16.dp)
-            ).background(Color.White)
-        ) {
-            TextField(
-                value = txt,
-                onValueChange = { txt = it },
-                trailingIcon = {
-                    Icon(
-                        Icons.Default.Done,
-                        contentDescription = "Add",
-                        modifier = Modifier.clickable {
-                            viewModel.addTask(
-                                Task2(
-                                    id = Random.nextLong(0, 10000000L),
-                                    title = txt,
-                                    color = selectedColor.hashCode().toLong(),
-                                    isImportant = isImp
-                                )
-                            )
-                            txt = ""
-                        }
-                    )
-                },
-                modifier = Modifier.fillMaxWidth(1f)
-                    .padding(horizontal = 4.dp, vertical = 16.dp)
-                    .clip(
-                        RoundedCornerShape(8.dp)
-                    ).background(MaterialTheme.colors.background),
-                placeholder = {
-                    Text("Add task", color = Color.Gray)
-                }
-            )
-            LazyRow(Modifier.fillMaxWidth().padding(horizontal = 4.dp)) {
-                items(colors) {
-                    Card(modifier = Modifier.padding(4.dp).clip(CircleShape).clickable {
-                        onColorSelection(it)
-//                        selectedColor = it
-                    }) {
-                        Box(
-                            contentAlignment = Alignment.Center,
-                            modifier = Modifier.size(40.dp).background(it)
-                        ) {
-                            if (it == selectedColor) {
-                                Icon(
-                                    Icons.Default.Done,
-                                    contentDescription = null,
-                                    tint = Color.Black
-                                )
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@Composable
-fun TaskItem(viewModel: TaskViewModel, task: Task2) {
-    var isCompleted by remember {
-        mutableStateOf(task.isDone)
-    }
-    Card(
-        Modifier.padding(4.dp).clip(
-            RoundedCornerShape(8.dp)
-        )
-    ) {
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.Start,
-            modifier = Modifier
-                .background(Brush.horizontalGradient(listOf(Color(task.color), Color.Transparent)))
-                .padding(horizontal = 4.dp).clip(
-                    RoundedCornerShape(8.dp)
-                )
-        ) {
-            Checkbox(
-                checked = task.isImportant, onCheckedChange = {
-                    viewModel.update(task.copy(isImportant = it))
-                },
-                colors = CheckboxDefaults.colors(Color.Black)
-            )
-            Text(
-                task.title,
-                fontSize = 16.sp,
-                fontWeight = FontWeight.Medium,
-                modifier = Modifier.weight(1f)
-            )
-            Spacer(modifier = Modifier.width(8.dp))
-            Checkbox(
-                isCompleted,
-                onCheckedChange = {
-                    viewModel.update(task.copy(isDone = it))
-                    isCompleted = it
-                },
-                colors = CheckboxDefaults.colors(Color.Green)
-            )
-            IconButton(
-                onClick = {
-                    viewModel.deleteTask(task.id)
-                }
-            ) {
-                Icon(Icons.Default.Delete, contentDescription = "delete")
-            }
-        }
-    }
-}

shared/src/commonMain/kotlin/com/kaushalvasava/apps/taskapp/ui/DeviceType.kt

@@ -0,0 +1,6 @@
+package com.kaushalvasava.apps.taskapp.ui
+
+enum class DeviceType {
+    PHONE,
+    DESKTOP
+}

shared/src/commonMain/kotlin/com/kaushalvasava/apps/taskapp/ui/TaskViewModel.kt

@@ -9,6 +9,7 @@ import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.IO
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.launch
+import kotlinx.datetime.Clock
 import task_database.db.TaskDatabase
 
 class TaskViewModel(driver: SqlDriver) : ViewModel() {
@@ -44,7 +45,7 @@ class TaskViewModel(driver: SqlDriver) : ViewModel() {
 
     fun update(task2: Task2) {
         viewModelScope.launch(Dispatchers.IO) {
-            database.updateTask(task2)
+            database.updateTask(task2.copy(date = Clock.System.now().toEpochMilliseconds(),))
             getTasks()
         }
     }