Project boards on the phone: every board you can see, columns to swipe, cards that open and move e833eb0a9e7f

package io.oxygenhub.android.ui.projects

import androidx.compose.foundation.ExperimentalFoundationApi

import androidx.compose.foundation.combinedClickable

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.ExperimentalLayoutApi

import androidx.compose.foundation.layout.FlowRow

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.lazy.LazyColumn

import androidx.compose.foundation.lazy.items

import androidx.compose.foundation.pager.HorizontalPager

import androidx.compose.foundation.pager.rememberPagerState

import androidx.compose.material.icons.Icons

import androidx.compose.material.icons.outlined.ViewKanban

import androidx.compose.material3.DropdownMenu

import androidx.compose.material3.DropdownMenuItem

import androidx.compose.material3.ElevatedCard

import androidx.compose.material3.HorizontalDivider

import androidx.compose.material3.ListItem

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.PrimaryScrollableTabRow

import androidx.compose.material3.SuggestionChip

import androidx.compose.material3.Tab

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf

import androidx.compose.runtime.remember

import androidx.compose.runtime.rememberCoroutineScope

import androidx.compose.runtime.setValue

import androidx.compose.ui.Modifier

import androidx.compose.ui.unit.dp

import androidx.lifecycle.compose.collectAsStateWithLifecycle

import io.oxygenhub.android.api.Project

import io.oxygenhub.android.api.ProjectCard

import io.oxygenhub.android.ui.common.AppScreen

import io.oxygenhub.android.ui.common.EmptyState

import io.oxygenhub.android.ui.common.LoadContent

import io.oxygenhub.android.ui.common.relativeTime

import io.oxygenhub.android.ui.theme.LocalStatusColors

import kotlinx.coroutines.launch

/** The boards the account can see, each opening its columns. */

@Composable

fun ProjectsScreen(vm: ProjectsViewModel, onOpen: (Project) -> Unit) {

    val state by vm.state.collectAsStateWithLifecycle()

    AppScreen(title = "Projects") {

        LoadContent(state, onRefresh = vm::refresh) { projects ->

            if (projects.isEmpty()) {

                EmptyState(Icons.Outlined.ViewKanban, "No boards yet", "Project boards you and your organisations keep show here.")

            } else {

                LazyColumn {

                    items(projects, key = { "${it.owner}/${it.number}" }) { p ->

                        ListItem(

                            modifier = Modifier.clickable { onOpen(p) },

                            headlineContent = { Text(p.title) },

                            supportingContent = {

                                Text(

                                    listOfNotNull(

                                        "${p.owner} · #${p.number}",

                                        "closed".takeIf { p.closed },

                                        "private".takeIf { !p.public },

                                        relativeTime(p.updatedMs).takeIf { it.isNotEmpty() },

                                    ).joinToString(" · "),

                                )

                            },

                        )

                        HorizontalDivider()

                    }

                }

            }

        }

    }

}

/**

 * A board: its columns as tabs to swipe between, each column's cards; a

 * card opens its issue or proposal, and a long press moves it.

 */

@Composable

fun BoardScreen(vm: BoardViewModel, canWrite: Boolean, onBack: () -> Unit, onOpenCard: (ProjectCard) -> Unit) {

    val state by vm.state.collectAsStateWithLifecycle()

    val error by vm.error.collectAsStateWithLifecycle()

    AppScreen(

        title = (state as? io.oxygenhub.android.ui.common.Load.Ready)?.value?.project?.title ?: "Board",

        subtitle = "${vm.owner} · #${vm.number}",

        onBack = onBack,

    ) {

        LoadContent(state, onRefresh = vm::refresh) { board ->

            val pages = rememberPagerState { board.columns.size }

            val scope = rememberCoroutineScope()

            Column(Modifier.fillMaxSize()) {

                if (board.columns.isNotEmpty()) {

                    PrimaryScrollableTabRow(selectedTabIndex = pages.currentPage.coerceAtMost(board.columns.size - 1)) {

                        board.columns.forEachIndexed { i, c ->

                            Tab(selected = pages.currentPage == i, onClick = { scope.launch { pages.animateScrollToPage(i) } }, text = { Text("${c.name} ${c.cards.size}") })

                        }

                    }

                }

                error?.let { Text(it, color = MaterialTheme.colorScheme.error, modifier = Modifier.padding(12.dp)) }

                HorizontalPager(pages, Modifier.fillMaxSize()) { page ->

                    val column = board.columns[page]

                    if (column.cards.isEmpty()) {

                        EmptyState(Icons.Outlined.ViewKanban, "Nothing in ${column.name}", "Cards moved here show up here.")

                    } else {

                        LazyColumn(Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(8.dp)) {

                            items(column.cards, key = { it.id }) { card ->

                                CardView(card, columns = board.columns.map { it.name }.filter { it != column.name }, canWrite, onOpen = { onOpenCard(card) }, onMove = { vm.move(card.id, it) })

                            }

                        }

                    }

                }

            }

        }

    }

}

@OptIn(ExperimentalFoundationApi::class, ExperimentalLayoutApi::class)

@Composable

private fun CardView(card: ProjectCard, columns: List<String>, canWrite: Boolean, onOpen: () -> Unit, onMove: (String) -> Unit) {

    var menu by remember { mutableStateOf(false) }

    val status = LocalStatusColors.current

    Box {

        ElevatedCard(

            Modifier.fillMaxWidth().padding(horizontal = 12.dp).combinedClickable(

                onClick = { if (card.kind != "note") onOpen() },

                onLongClick = { if (canWrite && columns.isNotEmpty()) menu = true },

            ),

        ) {

            Column(Modifier.padding(12.dp), verticalArrangement = Arrangement.spacedBy(4.dp)) {

                if (card.reference.isNotEmpty()) {

                    Text(

                        "${card.reference} · ${card.state}",

                        style = MaterialTheme.typography.labelSmall,

                        color = when (card.state) {

                            "open" -> status.ok

                            "landed", "closed" -> status.warn

                            else -> MaterialTheme.colorScheme.onSurfaceVariant

                        },

                    )

                }

                Text(card.title, style = MaterialTheme.typography.bodyMedium)

                if (card.labels.isNotEmpty() || card.assignees.isNotEmpty()) {

                    FlowRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {

                        card.labels.forEach { SuggestionChip(onClick = {}, label = { Text(it, style = MaterialTheme.typography.labelSmall) }) }

                        card.assignees.forEach { Text("@$it", style = MaterialTheme.typography.labelSmall, modifier = Modifier.padding(4.dp)) }

                    }

                }

            }

        }

        DropdownMenu(expanded = menu, onDismissRequest = { menu = false }) {

            columns.forEach { c ->

                DropdownMenuItem(text = { Text("Move to $c") }, onClick = {

                    menu = false

                    onMove(c)

                })

            }

        }

    }

}

package io.oxygenhub.android.ui.projects

import androidx.lifecycle.ViewModel

import androidx.lifecycle.viewModelScope

import io.oxygenhub.android.api.Board

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.Project

import io.oxygenhub.android.api.userMessage

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.common.load

import kotlinx.coroutines.CancellationException

import kotlinx.coroutines.Job

import kotlinx.coroutines.async

import kotlinx.coroutines.awaitAll

import kotlinx.coroutines.coroutineScope

import kotlinx.coroutines.flow.MutableStateFlow

import kotlinx.coroutines.flow.StateFlow

import kotlinx.coroutines.flow.asStateFlow

import kotlinx.coroutines.launch

/**

 * The boards the account can see: its own and those of the owners of its

 * repositories (its organisations), open ones first, newest first.

 */

class ProjectsViewModel(private val api: HubApi, private val username: String) : ViewModel() {

    private val _state = MutableStateFlow<Load<List<Project>>>(Load.Loading)

    val state: StateFlow<Load<List<Project>>> = _state.asStateFlow()

    private var job: Job? = null

    init {

        refresh()

    }

    fun refresh() {

        job = load(_state, job) {

            val owners = (listOf(username) + api.repositories().map { it.owner }).distinct()

            val found = coroutineScope {

                // An owner whose boards will not load is left out, not the list.

                owners.map { o -> async { runCatching { api.projects(o) }.getOrDefault(emptyList()) } }.awaitAll().flatten()

            }

            order(found)

        }

    }

    companion object {

        fun order(projects: List<Project>): List<Project> =

            projects.distinctBy { it.owner to it.number }.sortedWith(compareBy<Project> { it.closed }.thenByDescending { it.updatedMs })

    }

}

/** One board: its columns and cards; a card moves to another column. */

class BoardViewModel(private val api: HubApi, val owner: String, val number: Long) : ViewModel() {

    private val _state = MutableStateFlow<Load<Board>>(Load.Loading)

    val state: StateFlow<Load<Board>> = _state.asStateFlow()

    private val _error = MutableStateFlow<String?>(null)

    val error: StateFlow<String?> = _error.asStateFlow()

    private var job: Job? = null

    init {

        refresh()

    }

    fun refresh() {

        job = load(_state, job) { api.board(owner, number) }

    }

    /** Move [card] to [column]: shown at once, put back if the hub refuses. */

    fun move(card: Long, column: String) {

        val before = (_state.value as? Load.Ready)?.value ?: return

        val moving = before.columns.flatMap { it.cards }.firstOrNull { it.id == card } ?: return

        if (before.columns.firstOrNull { c -> c.cards.any { it.id == card } }?.name == column) return

        _state.value = Load.Ready(

            before.copy(columns = before.columns.map { c ->

                val rest = c.cards.filter { it.id != card }

                if (c.name == column) c.copy(cards = rest + moving) else c.copy(cards = rest)

            }),

        )

        _error.value = null

        viewModelScope.launch {

            try {

                api.moveCard(owner, number, card, column)

            } catch (e: CancellationException) {

                throw e

            } catch (e: Exception) {

                _state.value = Load.Ready(before)

                _error.value = e.userMessage()

            }

        }

    }

    fun dismissError() {

        _error.value = null

    }

}

package io.oxygenhub.android.ui

import io.oxygenhub.android.FakeHubApi

import io.oxygenhub.android.MainDispatcherRule

import io.oxygenhub.android.api.Board

import io.oxygenhub.android.api.HubApi

import io.oxygenhub.android.api.HubException

import io.oxygenhub.android.api.Project

import io.oxygenhub.android.api.ProjectCard

import io.oxygenhub.android.api.ProjectColumn

import io.oxygenhub.android.api.Repository

import io.oxygenhub.android.ui.common.Load

import io.oxygenhub.android.ui.projects.BoardViewModel

import io.oxygenhub.android.ui.projects.ProjectsViewModel

import org.junit.Assert.assertEquals

import org.junit.Assert.assertNull

import org.junit.Assert.assertTrue

import org.junit.Rule

import org.junit.Test

class ProjectsViewModelTest {

    @get:Rule val main = MainDispatcherRule()

    private val api = FakeHubApi()

    @Test

    fun boardsOfTheAccountAndItsRepositoriesOwnersOpenFirst() {

        api.repositories = { listOf(Repository("andymccall", "oxygen"), Repository("doomsdayone", "tetris")) }

        api.projectsOf = { owner ->

            when (owner) {

                "andymccall" -> listOf(Project("andymccall", 3, "OxygenHub", updatedMs = 10), Project("andymccall", 1, "Old", closed = true, updatedMs = 99))

                "doomsdayone" -> listOf(Project("doomsdayone", 4, "Super Mario Land 2", updatedMs = 20))

                else -> throw HubException.Http(404, "no such owner")

            }

        }

        val vm = ProjectsViewModel(api, "andymccall")

        val projects = (vm.state.value as Load.Ready).value

        assertEquals(listOf("Super Mario Land 2", "OxygenHub", "Old"), projects.map { it.title })

        assertTrue("projects doomsdayone" in api.calls)

    }

    @Test

    fun anOwnerWhoseBoardsWillNotLoadIsLeftOut() {

        api.repositories = { listOf(Repository("gone", "x")) }

        api.projectsOf = { owner -> if (owner == "gone") throw HubException.Http(500, "down") else listOf(Project(owner, 1, "Mine")) }

        val projects = (ProjectsViewModel(api, "andymccall").state.value as Load.Ready).value

        assertEquals(listOf("Mine"), projects.map { it.title })

    }

    private val board = Board(

        Project("andymccall", 3, "OxygenHub"),

        listOf(

            ProjectColumn(1, "Doing", listOf(ProjectCard(10, "issue", "andymccall/oxygenhub#315", "Form lines up", "open"))),

            ProjectColumn(2, "Done", emptyList()),

        ),

    )

    @Test

    fun aCardMovesToAnotherColumn() {

        api.boards[3] = board

        val vm = BoardViewModel(api, "andymccall", 3)

        vm.move(10, "Done")

        val b = (vm.state.value as Load.Ready).value

        assertEquals(listOf(0, 1), b.columns.map { it.cards.size })

        assertTrue("move 10 Done" in api.calls)

        assertEquals(Triple("andymccall", "oxygenhub", 315L), b.columns[1].cards[0].target)

    }

    @Test

    fun aMoveTheHubRefusesIsPutBack() {

        api.boards[3] = board

        val refusing = object : HubApi by api {

            override suspend fun moveCard(owner: String, number: Long, card: Long, column: String) = throw HubException.Http(403, "needs write access")

        }

        val vm = BoardViewModel(refusing, "andymccall", 3)

        vm.move(10, "Done")

        assertEquals(listOf(1, 0), (vm.state.value as Load.Ready).value.columns.map { it.cards.size })

        assertTrue(vm.error.value!!.contains("write access"))

        vm.dismissError()

        assertNull(vm.error.value)

    }

}

    /** [owner]'s project boards the caller can see. */

    suspend fun projects(owner: String): List<Project>

    suspend fun board(owner: String, number: Long): Board

    /** Move a card to the column named [column]. */

    suspend fun moveCard(owner: String, number: Long, card: Long, column: String)

    override suspend fun projects(owner: String): List<Project> = get(url("projects", owner), ListSerializer(Project.serializer()))

    override suspend fun board(owner: String, number: Long): Board = get(url("projects", owner, number.toString()), Board.serializer())

    override suspend fun moveCard(owner: String, number: Long, card: Long, column: String) {

        val json = buildJsonObject { put("column", column) }

        call(request(url("projects", owner, number.toString(), "cards", card.toString())).method("PATCH", json.toString().toRequestBody(JsonMedia)).build(), true)

    }

/** A project board's summary (`GET /projects/{owner}`). */

@Serializable

data class Project(

    val owner: String,

    val number: Long,

    val title: String = "",

    val description: String = "",

    val public: Boolean = true,

    val closed: Boolean = false,

    @SerialName("updated_ms") val updatedMs: Long = 0,

    val url: String = "",

)

/** A card on a board: an issue, a proposal or a note. */

@Serializable

data class ProjectCard(

    val id: Long,

    /** `issue`, `proposal` or `note`. */

    val kind: String = "note",

    /** `owner/name#N`; empty for a note. */

    val reference: String = "",

    val title: String = "",

    val state: String = "",

    val labels: List<String> = emptyList(),

    val assignees: List<String> = emptyList(),

) {

    /** The repository and number a card refers to, or null for a note. */

    val target: Triple<String, String, Long>? get() {

        val slug = reference.substringBefore('#', "")

        val n = reference.substringAfter('#', "").toLongOrNull() ?: return null

        val (owner, name) = slug.split('/').takeIf { it.size == 2 } ?: return null

        return Triple(owner, name, n)

    }

}

@Serializable

data class ProjectColumn(val id: Long, val name: String, val cards: List<ProjectCard> = emptyList())

/** A board, its columns in order (`GET /projects/{owner}/{n}`). */

@Serializable

data class Board(val project: Project, val columns: List<ProjectColumn> = emptyList())

import androidx.compose.material.icons.filled.ViewKanban

import androidx.compose.material.icons.outlined.ViewKanban

import io.oxygenhub.android.ui.projects.BoardScreen

import io.oxygenhub.android.ui.projects.BoardViewModel

import io.oxygenhub.android.ui.projects.ProjectsScreen

import io.oxygenhub.android.ui.projects.ProjectsViewModel

@Serializable data object ProjectsRoute

/** A project board. */

@Serializable data class BoardRoute(val owner: String, val number: Long)

    Projects("Projects", Icons.Outlined.ViewKanban, Icons.Filled.ViewKanban, ProjectsRoute, ProjectsRoute::class),

                )

            }

            composable<ProjectsRoute> {

                ProjectsScreen(rememberViewModel { ProjectsViewModel(api, session.username) }) { p -> nav.navigate(BoardRoute(p.owner, p.number)) }

            }

            composable<BoardRoute> { e ->

                val r = e.toRoute<BoardRoute>()

                BoardScreen(

                    rememberViewModel { BoardViewModel(api, r.owner, r.number) },

                    canWrite = session.canWrite,

                    onBack = { nav.popBackStack() },

                    onOpenCard = { card ->

                        card.target?.let { (owner, name, n) ->

                            nav.navigate(if (card.kind == "proposal") ProposalRoute(owner, name, n) else IssueRoute(owner, name, n))

                        }

                    },

    var projectsOf: (String) -> List<io.oxygenhub.android.api.Project> = { emptyList() }

    override suspend fun projects(owner: String) = projectsOf(owner).also { calls += "projects $owner" }

    var boards = mutableMapOf<Long, io.oxygenhub.android.api.Board>()

    override suspend fun board(owner: String, number: Long) = boards.getValue(number).also { calls += "board $owner/$number" }

    override suspend fun moveCard(owner: String, number: Long, card: Long, column: String) {

        calls += "move $card $column"

        val b = boards.getValue(number)

        val moving = b.columns.flatMap { it.cards }.first { it.id == card }

        boards[number] = b.copy(columns = b.columns.map { c ->

            val rest = c.cards.filter { it.id != card }

            if (c.name == column) c.copy(cards = rest + moving) else c.copy(cards = rest)

        })

    }