diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala new file mode 100644 index 0000000..4557514 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala @@ -0,0 +1,34 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.Icons + +case class File(url: String, name: String) + +object File: + extension (m: File) + def toHtml: HtmlElement = + li( + cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), + div( + cls("w-0 flex-1 flex items-center"), + Icons.solid + .paperclip() + .amend(svg.cls := "flex-shrink-0 text-gray-400"), + span(cls("ml-2 flex-1 w-0 truncate"), m.name) + ), + div( + cls("ml-4 flex-shrink-0 flex space-x-4"), + a( + href(m.url), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Otevřít" + ), + span(cls("text-gray-300"), "|"), + a( + href("#"), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Odebrat" + ) + ) + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala new file mode 100644 index 0000000..4557514 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala @@ -0,0 +1,34 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.Icons + +case class File(url: String, name: String) + +object File: + extension (m: File) + def toHtml: HtmlElement = + li( + cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), + div( + cls("w-0 flex-1 flex items-center"), + Icons.solid + .paperclip() + .amend(svg.cls := "flex-shrink-0 text-gray-400"), + span(cls("ml-2 flex-1 w-0 truncate"), m.name) + ), + div( + cls("ml-4 flex-shrink-0 flex space-x-4"), + a( + href(m.url), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Otevřít" + ), + span(cls("text-gray-300"), "|"), + a( + href("#"), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Odebrat" + ) + ) + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala index 08341c9..554515d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala @@ -3,36 +3,6 @@ import com.raquo.laminar.api.L.{*, given} import cz.e_bs.cmi.mdr.pdb.app.components.Icons -case class File(name: String, url: String) - -object File: - extension (m: File) - def toHtml: HtmlElement = - li( - cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), - div( - cls("w-0 flex-1 flex items-center"), - Icons.solid - .paperclip() - .amend(svg.cls := "flex-shrink-0 text-gray-400"), - span(cls("ml-2 flex-1 w-0 truncate"), m.name) - ), - div( - cls("ml-4 flex-shrink-0 flex space-x-4"), - a( - href(m.url), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Otevřít" - ), - span(cls("text-gray-300"), "|"), - a( - href("#"), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Odebrat" - ) - ) - ) - case class FileList( files: Signal[List[File]] ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala new file mode 100644 index 0000000..4557514 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala @@ -0,0 +1,34 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.Icons + +case class File(url: String, name: String) + +object File: + extension (m: File) + def toHtml: HtmlElement = + li( + cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), + div( + cls("w-0 flex-1 flex items-center"), + Icons.solid + .paperclip() + .amend(svg.cls := "flex-shrink-0 text-gray-400"), + span(cls("ml-2 flex-1 w-0 truncate"), m.name) + ), + div( + cls("ml-4 flex-shrink-0 flex space-x-4"), + a( + href(m.url), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Otevřít" + ), + span(cls("text-gray-300"), "|"), + a( + href("#"), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Odebrat" + ) + ) + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala index 08341c9..554515d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala @@ -3,36 +3,6 @@ import com.raquo.laminar.api.L.{*, given} import cz.e_bs.cmi.mdr.pdb.app.components.Icons -case class File(name: String, url: String) - -object File: - extension (m: File) - def toHtml: HtmlElement = - li( - cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), - div( - cls("w-0 flex-1 flex items-center"), - Icons.solid - .paperclip() - .amend(svg.cls := "flex-shrink-0 text-gray-400"), - span(cls("ml-2 flex-1 w-0 truncate"), m.name) - ), - div( - cls("ml-4 flex-shrink-0 flex space-x-4"), - a( - href(m.url), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Otevřít" - ), - span(cls("text-gray-300"), "|"), - a( - href("#"), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Odebrat" - ) - ) - ) - case class FileList( files: Signal[List[File]] ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala new file mode 100644 index 0000000..53b62b8 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala @@ -0,0 +1,81 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import com.raquo.domtypes.generic.codecs.BooleanAsTrueFalseStringCodec + +object FilePicker: + import cz.e_bs.cmi.mdr.pdb.app.components.files + val File = files.File + val Selector = FileSelector _ + + def apply(content: HtmlElement): HtmlElement = + // This sequence tricks browser into displaying modal content centered + // Inspired by modal in headless ui playground + // https://github.com/tailwindlabs/headlessui/blob/fdd26297953080d5ec905dda0bf5ec9607897d86/packages/playground-react/pages/transitions/component-examples/modal.tsx#L78-L79 + inline def browserCenteringModalTrick: Modifier[HtmlElement] = + Seq[Modifier[HtmlElement]]( + span(cls("hidden sm:inline-block sm:h-screen sm:align-middle")), + "​" // Zero width space + ) + + inline def overlay: Modifier[HtmlElement] = + // Page overlay + div( + div( + cls("fixed inset-0 transition-opacity"), + div(cls("absolute inset-0 bg-gray-500 opacity-75")) + ) + ) + + div( + cls("fixed inset-0 z-10 overflow-y-auto"), + div( + cls( + "flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0" + ), + overlay, + browserCenteringModalTrick, + div( + cls( + "inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle" + ), + role("dialog"), + customHtmlAttr("aria.modal", BooleanAsTrueFalseStringCodec)(true), + aria.labelledBy("modal-headline"), + div( + cls("bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"), + div( + cls("sm:flex sm:items-start"), + div( + cls("mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"), + h3( + cls("text-lg font-medium leading-6 text-gray-900"), + idAttr("modal-headline"), + "Výběr souborů" + ) + ) + ), + Selector( + Val( + List( + File( + "https://tc163.cmi.cz/first_file", + "Smlouva o pracovním poměru" + ), + File( + "https://tc163.cmi.cz/first_file", + "Diplom k vystudování VŠ" + ), + File( + "https://tc163.cmi.cz/first_file", + "Prezenční listina školení" + ), + File("https://tc163.cmi.cz/first_file", "Životopis") + ) + ) + ) + ) + ) + ), + content + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala new file mode 100644 index 0000000..4557514 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala @@ -0,0 +1,34 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.Icons + +case class File(url: String, name: String) + +object File: + extension (m: File) + def toHtml: HtmlElement = + li( + cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), + div( + cls("w-0 flex-1 flex items-center"), + Icons.solid + .paperclip() + .amend(svg.cls := "flex-shrink-0 text-gray-400"), + span(cls("ml-2 flex-1 w-0 truncate"), m.name) + ), + div( + cls("ml-4 flex-shrink-0 flex space-x-4"), + a( + href(m.url), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Otevřít" + ), + span(cls("text-gray-300"), "|"), + a( + href("#"), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Odebrat" + ) + ) + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala index 08341c9..554515d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala @@ -3,36 +3,6 @@ import com.raquo.laminar.api.L.{*, given} import cz.e_bs.cmi.mdr.pdb.app.components.Icons -case class File(name: String, url: String) - -object File: - extension (m: File) - def toHtml: HtmlElement = - li( - cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), - div( - cls("w-0 flex-1 flex items-center"), - Icons.solid - .paperclip() - .amend(svg.cls := "flex-shrink-0 text-gray-400"), - span(cls("ml-2 flex-1 w-0 truncate"), m.name) - ), - div( - cls("ml-4 flex-shrink-0 flex space-x-4"), - a( - href(m.url), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Otevřít" - ), - span(cls("text-gray-300"), "|"), - a( - href("#"), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Odebrat" - ) - ) - ) - case class FileList( files: Signal[List[File]] ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala new file mode 100644 index 0000000..53b62b8 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala @@ -0,0 +1,81 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import com.raquo.domtypes.generic.codecs.BooleanAsTrueFalseStringCodec + +object FilePicker: + import cz.e_bs.cmi.mdr.pdb.app.components.files + val File = files.File + val Selector = FileSelector _ + + def apply(content: HtmlElement): HtmlElement = + // This sequence tricks browser into displaying modal content centered + // Inspired by modal in headless ui playground + // https://github.com/tailwindlabs/headlessui/blob/fdd26297953080d5ec905dda0bf5ec9607897d86/packages/playground-react/pages/transitions/component-examples/modal.tsx#L78-L79 + inline def browserCenteringModalTrick: Modifier[HtmlElement] = + Seq[Modifier[HtmlElement]]( + span(cls("hidden sm:inline-block sm:h-screen sm:align-middle")), + "​" // Zero width space + ) + + inline def overlay: Modifier[HtmlElement] = + // Page overlay + div( + div( + cls("fixed inset-0 transition-opacity"), + div(cls("absolute inset-0 bg-gray-500 opacity-75")) + ) + ) + + div( + cls("fixed inset-0 z-10 overflow-y-auto"), + div( + cls( + "flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0" + ), + overlay, + browserCenteringModalTrick, + div( + cls( + "inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle" + ), + role("dialog"), + customHtmlAttr("aria.modal", BooleanAsTrueFalseStringCodec)(true), + aria.labelledBy("modal-headline"), + div( + cls("bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"), + div( + cls("sm:flex sm:items-start"), + div( + cls("mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"), + h3( + cls("text-lg font-medium leading-6 text-gray-900"), + idAttr("modal-headline"), + "Výběr souborů" + ) + ) + ), + Selector( + Val( + List( + File( + "https://tc163.cmi.cz/first_file", + "Smlouva o pracovním poměru" + ), + File( + "https://tc163.cmi.cz/first_file", + "Diplom k vystudování VŠ" + ), + File( + "https://tc163.cmi.cz/first_file", + "Prezenční listina školení" + ), + File("https://tc163.cmi.cz/first_file", "Životopis") + ) + ) + ) + ) + ) + ), + content + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala new file mode 100644 index 0000000..fe47005 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala @@ -0,0 +1,52 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import com.raquo.domtypes.generic.codecs.StringAsIsCodec + +def FileTable(files: Signal[List[File]]): HtmlElement = + val scope = customHtmlAttr("scope", StringAsIsCodec) + + def headerRow: HtmlElement = + val col = scope("col") + val baseM: Modifier[HtmlElement] = Seq(cls("px-6 py-3"), col) + val textH = cls( + "text-left text-xs font-medium text-gray-500 uppercase tracking-wider" + ) + tr( + th(baseM, textH, "Název"), + th(baseM, textH, "Kategorie"), + th(baseM, cls("relative"), span(cls("sr-only"), "Otevřít")) + ) + + def tableRow(f: File, idx: Int): HtmlElement = + val baseC = cls("px-6 py-4 whitespace-nowrap text-sm") + tr( + cls(if idx % 2 == 0 then "bg-gray-50" else "bg-white"), + td(baseC, cls("font-medium text-gray-900"), f.name), + td(baseC, cls("text-gray-500"), "kategorie"), + td(baseC, cls("text-right font-medium"), a(href(f.url), "Otevřít")) + ) + + div( + cls("flex flex-col"), + div(cls("-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8")), + div( + cls("py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"), + div( + cls("shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"), + table( + cls("min-w-full divide-y divide-gray-200"), + thead( + cls("bg-gray-50"), + headerRow + ), + tbody( + children <-- files.map(_.zipWithIndex.map(tableRow)) + ) + ) + ) + ) + ) + +def FileSelector(files: Signal[List[File]]): HtmlElement = + div(FileTable(files)) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala new file mode 100644 index 0000000..4557514 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/File.scala @@ -0,0 +1,34 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import cz.e_bs.cmi.mdr.pdb.app.components.Icons + +case class File(url: String, name: String) + +object File: + extension (m: File) + def toHtml: HtmlElement = + li( + cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), + div( + cls("w-0 flex-1 flex items-center"), + Icons.solid + .paperclip() + .amend(svg.cls := "flex-shrink-0 text-gray-400"), + span(cls("ml-2 flex-1 w-0 truncate"), m.name) + ), + div( + cls("ml-4 flex-shrink-0 flex space-x-4"), + a( + href(m.url), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Otevřít" + ), + span(cls("text-gray-300"), "|"), + a( + href("#"), + cls("font-medium text-indigo-600 hover:text-indigo-500"), + "Odebrat" + ) + ) + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala index 08341c9..554515d 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileList.scala @@ -3,36 +3,6 @@ import com.raquo.laminar.api.L.{*, given} import cz.e_bs.cmi.mdr.pdb.app.components.Icons -case class File(name: String, url: String) - -object File: - extension (m: File) - def toHtml: HtmlElement = - li( - cls("pl-3 pr-4 py-3 flex items-center justify-between text-sm"), - div( - cls("w-0 flex-1 flex items-center"), - Icons.solid - .paperclip() - .amend(svg.cls := "flex-shrink-0 text-gray-400"), - span(cls("ml-2 flex-1 w-0 truncate"), m.name) - ), - div( - cls("ml-4 flex-shrink-0 flex space-x-4"), - a( - href(m.url), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Otevřít" - ), - span(cls("text-gray-300"), "|"), - a( - href("#"), - cls("font-medium text-indigo-600 hover:text-indigo-500"), - "Odebrat" - ) - ) - ) - case class FileList( files: Signal[List[File]] ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala new file mode 100644 index 0000000..53b62b8 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FilePicker.scala @@ -0,0 +1,81 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import com.raquo.domtypes.generic.codecs.BooleanAsTrueFalseStringCodec + +object FilePicker: + import cz.e_bs.cmi.mdr.pdb.app.components.files + val File = files.File + val Selector = FileSelector _ + + def apply(content: HtmlElement): HtmlElement = + // This sequence tricks browser into displaying modal content centered + // Inspired by modal in headless ui playground + // https://github.com/tailwindlabs/headlessui/blob/fdd26297953080d5ec905dda0bf5ec9607897d86/packages/playground-react/pages/transitions/component-examples/modal.tsx#L78-L79 + inline def browserCenteringModalTrick: Modifier[HtmlElement] = + Seq[Modifier[HtmlElement]]( + span(cls("hidden sm:inline-block sm:h-screen sm:align-middle")), + "​" // Zero width space + ) + + inline def overlay: Modifier[HtmlElement] = + // Page overlay + div( + div( + cls("fixed inset-0 transition-opacity"), + div(cls("absolute inset-0 bg-gray-500 opacity-75")) + ) + ) + + div( + cls("fixed inset-0 z-10 overflow-y-auto"), + div( + cls( + "flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0" + ), + overlay, + browserCenteringModalTrick, + div( + cls( + "inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle" + ), + role("dialog"), + customHtmlAttr("aria.modal", BooleanAsTrueFalseStringCodec)(true), + aria.labelledBy("modal-headline"), + div( + cls("bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"), + div( + cls("sm:flex sm:items-start"), + div( + cls("mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"), + h3( + cls("text-lg font-medium leading-6 text-gray-900"), + idAttr("modal-headline"), + "Výběr souborů" + ) + ) + ), + Selector( + Val( + List( + File( + "https://tc163.cmi.cz/first_file", + "Smlouva o pracovním poměru" + ), + File( + "https://tc163.cmi.cz/first_file", + "Diplom k vystudování VŠ" + ), + File( + "https://tc163.cmi.cz/first_file", + "Prezenční listina školení" + ), + File("https://tc163.cmi.cz/first_file", "Životopis") + ) + ) + ) + ) + ) + ), + content + ) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala new file mode 100644 index 0000000..fe47005 --- /dev/null +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/components/files/FileSelector.scala @@ -0,0 +1,52 @@ +package cz.e_bs.cmi.mdr.pdb.app.components.files + +import com.raquo.laminar.api.L.{*, given} +import com.raquo.domtypes.generic.codecs.StringAsIsCodec + +def FileTable(files: Signal[List[File]]): HtmlElement = + val scope = customHtmlAttr("scope", StringAsIsCodec) + + def headerRow: HtmlElement = + val col = scope("col") + val baseM: Modifier[HtmlElement] = Seq(cls("px-6 py-3"), col) + val textH = cls( + "text-left text-xs font-medium text-gray-500 uppercase tracking-wider" + ) + tr( + th(baseM, textH, "Název"), + th(baseM, textH, "Kategorie"), + th(baseM, cls("relative"), span(cls("sr-only"), "Otevřít")) + ) + + def tableRow(f: File, idx: Int): HtmlElement = + val baseC = cls("px-6 py-4 whitespace-nowrap text-sm") + tr( + cls(if idx % 2 == 0 then "bg-gray-50" else "bg-white"), + td(baseC, cls("font-medium text-gray-900"), f.name), + td(baseC, cls("text-gray-500"), "kategorie"), + td(baseC, cls("text-right font-medium"), a(href(f.url), "Otevřít")) + ) + + div( + cls("flex flex-col"), + div(cls("-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8")), + div( + cls("py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"), + div( + cls("shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"), + table( + cls("min-w-full divide-y divide-gray-200"), + thead( + cls("bg-gray-50"), + headerRow + ), + tbody( + children <-- files.map(_.zipWithIndex.map(tableRow)) + ) + ) + ) + ) + ) + +def FileSelector(files: Signal[List[File]]): HtmlElement = + div(FileTable(files)) diff --git a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/UpravDukazForm.scala b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/UpravDukazForm.scala index dd47abc..d474ed9 100644 --- a/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/UpravDukazForm.scala +++ b/app/src/main/scala/cz/e_bs/cmi/mdr/pdb/app/pages/detail/components/UpravDukazForm.scala @@ -7,6 +7,7 @@ import org.scalajs.dom import com.raquo.laminar.nodes.ReactiveHtmlElement import cz.e_bs.cmi.mdr.pdb.app.components.files +import cz.e_bs.cmi.mdr.pdb.app.components.files.FilePicker object UpravDukazForm: object SubmitButtons: @@ -44,19 +45,21 @@ FormRow( "dokumenty", "Dokumenty", - files - .FileList( - Val( - List( - files.File( - "Pracovní smlouva", - "http://example.com/123.doc" + FilePicker( + files + .FileList( + Val( + List( + files.File( + "Pracovní smlouva", + "http://example.com/123.doc" + ) ) ) ) - ) - .toHtml - .amend(idAttr := "dokumenty", cls("max-w-lg")) + .toHtml + .amend(idAttr := "dokumenty", cls("max-w-lg")) + ) ).toHtml, FormRow( "komentar",