Skip to content

Commit c7caafe

Browse files
committed
WIP create/clone pages and form
1 parent ec372ed commit c7caafe

File tree

10 files changed

+782
-104
lines changed

10 files changed

+782
-104
lines changed

service/src/main/kotlin/app/cash/backfila/ui/UiModule.kt

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ package app.cash.backfila.ui
22

33
import app.cash.backfila.ui.actions.BackfillShowButtonHandlerAction
44
import app.cash.backfila.ui.actions.ServiceAutocompleteAction
5+
import app.cash.backfila.ui.pages.BackfillCreateAction
6+
import app.cash.backfila.ui.pages.BackfillCreateIndexAction
57
import app.cash.backfila.ui.pages.BackfillIndexAction
68
import app.cash.backfila.ui.pages.BackfillShowAction
79
import app.cash.backfila.ui.pages.IndexAction
@@ -16,6 +18,8 @@ class UiModule : KAbstractModule() {
1618
install(WebActionModule.create<IndexAction>())
1719
install(WebActionModule.create<ServiceIndexAction>())
1820
install(WebActionModule.create<ServiceShowAction>())
21+
install(WebActionModule.create<BackfillCreateIndexAction>())
22+
install(WebActionModule.create<BackfillCreateAction>())
1923
install(WebActionModule.create<BackfillIndexAction>())
2024
install(WebActionModule.create<BackfillShowAction>())
2125

service/src/main/kotlin/app/cash/backfila/ui/components/AutoReload.kt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import kotlinx.html.div
99
// (ie. update form for backfill show page)
1010
fun TagConsumer<*>.AutoReload(block: TagConsumer<*>.() -> Unit) {
1111
div {
12-
attributes["data-controller"] = "auto-reload"
12+
// attributes["data-controller"] = "auto-reload"
1313
attributes["data-auto-reload-target"] = "frame"
1414

1515
block()

service/src/main/kotlin/app/cash/backfila/ui/components/PageTitle.kt

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,15 @@ import kotlinx.html.div
55
import kotlinx.html.header
66
import kotlinx.html.span
77

8-
fun TagConsumer<*>.PageTitle(title: String, subtitle: String? = null) {
8+
fun TagConsumer<*>.PageTitle(title: String, subtitle: String? = null, floatRightBlock: TagConsumer<*>.() -> Unit = {}) {
99
header {
1010
div("mx-auto max-w-7xl px-200 sm:px-6 lg:px-8s py-10") {
1111
val maybeSubtitleSuffix = subtitle?.let { ": " } ?: ""
1212
span("text-3xl font-bold leading-tight tracking-tight text-gray-900") { +"$title$maybeSubtitleSuffix" }
1313
subtitle?.let { span("text-3xl font-bold leading-tight tracking-tight text-green-600") { +it } }
14+
div("float-right") {
15+
floatRightBlock()
16+
}
1417
}
1518
}
1619
}
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
package app.cash.backfila.ui.components
2+
3+
import app.cash.backfila.dashboard.GetServicesAction
4+
import kotlinx.html.InputType
5+
import kotlinx.html.TagConsumer
6+
import kotlinx.html.a
7+
import kotlinx.html.div
8+
import kotlinx.html.h3
9+
import kotlinx.html.input
10+
import kotlinx.html.li
11+
import kotlinx.html.role
12+
import kotlinx.html.span
13+
import kotlinx.html.ul
14+
15+
/** Search and select from Services */
16+
fun TagConsumer<*>.ServiceSelect(
17+
services: Map<String, GetServicesAction.UiService>,
18+
serviceLinkBuilder: (String, String?) -> String,
19+
) {
20+
div {
21+
attributes["data-controller"] = "search-bar"
22+
23+
// Search Bar
24+
div {
25+
input(
26+
type = InputType.search,
27+
classes = "flex h-10 w-full bg-gray-100 hover:bg-gray-200 duration-500 border-none rounded-lg text-sm",
28+
) {
29+
attributes["data-action"] = "input->search-bar#search"
30+
placeholder = "Search"
31+
}
32+
}
33+
div("py-10") {
34+
ul("grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3") {
35+
role = "list"
36+
37+
services.map { (servicePath, service) ->
38+
a {
39+
val variant = if (servicePath.split("/").last() == "default") null else servicePath.split("/").last()
40+
href = serviceLinkBuilder(service.name, variant)
41+
42+
this@ul.li("registration col-span-1 divide-y divide-gray-200 rounded-lg bg-white shadow") {
43+
div("flex w-full items-center justify-between space-x-6 p-6") {
44+
div("flex-1 truncate") {
45+
div("flex items-center space-x-3") {
46+
// Don't include default variant in label, only for unique variants
47+
val label = if (variant == null) service.name else servicePath
48+
h3("truncate text-sm font-medium text-gray-900") {
49+
+"""$label (${service.running_backfills})"""
50+
}
51+
variant?.let { span("inline-flex shrink-0 items-center rounded-full bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20") { +it } }
52+
}
53+
// p("mt-1 truncate text-sm text-gray-500") { +"""Regional Paradigm Technician""" }
54+
}
55+
}
56+
}
57+
// Buttons
58+
// div {
59+
// div("-mt-px flex divide-x divide-gray-200") {
60+
// div("flex w-0 flex-1") {
61+
// a(classes = "relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900") {
62+
// href = "mailto:janecooper@example.com"
63+
// // svg("size-5 text-gray-400") {
64+
// // viewbox = "0 0 20 20"
65+
// // fill = "currentColor"
66+
// // attributes["aria-hidden"] = "true"
67+
// // attributes["data-slot"] = "icon"
68+
// // path {
69+
// // d =
70+
// // "M3 4a2 2 0 0 0-2 2v1.161l8.441 4.221a1.25 1.25 0 0 0 1.118 0L19 7.162V6a2 2 0 0 0-2-2H3Z"
71+
// // }
72+
// // path {
73+
// // d =
74+
// // "m19 8.839-7.77 3.885a2.75 2.75 0 0 1-2.46 0L1 8.839V14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8.839Z"
75+
// // }
76+
// // }
77+
// +"""Email"""
78+
// }
79+
// }
80+
// div("-ml-px flex w-0 flex-1") {
81+
// a(classes = "relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900") {
82+
// href = "tel:+1-202-555-0170"
83+
// // svg("size-5 text-gray-400") {
84+
// // viewbox = "0 0 20 20"
85+
// // fill = "currentColor"
86+
// // attributes["aria-hidden"] = "true"
87+
// // attributes["data-slot"] = "icon"
88+
// // path {
89+
// // attributes["fill-rule"] = "evenodd"
90+
// // d =
91+
// // "M2 3.5A1.5 1.5 0 0 1 3.5 2h1.148a1.5 1.5 0 0 1 1.465 1.175l.716 3.223a1.5 1.5 0 0 1-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 0 0 6.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 0 1 1.767-1.052l3.223.716A1.5 1.5 0 0 1 18 15.352V16.5a1.5 1.5 0 0 1-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 0 1 2.43 8.326 13.019 13.019 0 0 1 2 5V3.5Z"
92+
// // attributes["clip-rule"] = "evenodd"
93+
// // }
94+
// // }
95+
// +"""Call"""
96+
// }
97+
// }
98+
// }
99+
// }
100+
}
101+
}
102+
}
103+
}
104+
}
105+
}

0 commit comments

Comments
 (0)