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