Rich file view sorting and filter

Karasiq · Aug 1, 2018 · 3a495c7 · 3a495c7
1 parent e2a9ce0
commit 3a495c7
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/...webapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/FileListItem.scala b/...webapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/FileListItem.scala
@@ -9,6 +9,7 @@ import rx.async._
 import com.karasiq.bootstrap.Bootstrap.default._
 import scalaTags.all._
 
+import com.karasiq.common.memory.MemorySize
 import com.karasiq.shadowcloud.model.File
 import com.karasiq.shadowcloud.webapp.components.common.AppIcons
 import com.karasiq.shadowcloud.webapp.components.file.FilePreview
@@ -45,7 +46,17 @@ class FileListItem(file: File, selectedFile: Var[Option[File]])(implicit context
         lineHeight := 50.px
       ),
       GridSystem.col(9).asDiv(
-        GridSystem.mkRow(Rx[Frag](if (selectedFile().contains(file)) b(file.path.name) else file.path.name)),
+        GridSystem.row(
+          GridSystem.col(9).asDiv(Rx[Frag](if (selectedFile().contains(file)) b(file.path.name) else file.path.name)),
+          GridSystem.col(3).asDiv(
+            GridSystem.mkRow(MemorySize.toString(file.checksum.size)),
+            GridSystem.mkRow(context.timeFormat.timestamp(file.timestamp.lastModified)),
+            color.gray,
+            fontStyle.italic,
+            fontSizeAdjust := 0.4,
+            lineHeight := 80.pct
+          )
+        ),
         Rx[Frag](previews().text match {
           case Some(text) ⇒
             GridSystem.mkRow(

diff --git a/...bapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/FolderFileList.scala b/...bapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/FolderFileList.scala
@@ -65,9 +65,9 @@ class FolderFileList(filesRx: Rx[Set[File]], flat: Boolean)(implicit context: Ap
   def renderTag(md: ModifierT*): TagT = {
     val viewSelectButton = Button(ButtonStyle.info)(AppIcons.changeView, context.locale.changeView, onclick := Callback.onClick(_ ⇒ changeListView()))
     val uploadForm = UploadForm()(context, folderContext, fileController)
-    GridSystem.containerFluid(
-      GridSystem.mkRow(ButtonGroup(ButtonGroupSize.small, uploadForm.renderButton(), viewSelectButton)),
-      Rx(GridSystem.mkRow {
+    div(
+      div(ButtonGroup(ButtonGroupSize.extraSmall, uploadForm.renderButton(), viewSelectButton)),
+      Rx(div {
         if (selectedView() == "previews") {
           RichFileTable(filesSeqRx, selectedFile).renderTag(md:_*)
         } else {

diff --git a/...ebapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/RichFileTable.scala b/...ebapp/src/main/scala/com/karasiq/shadowcloud/webapp/components/folder/RichFileTable.scala
@@ -18,21 +18,65 @@ private[folder] object RichFileTable {
 private[folder] class RichFileTable(files: Rx[Seq[File]], selectedFile: Var[Option[File]])
                                    (implicit context: AppContext, fc: FolderContext) extends BootstrapHtmlComponent {
 
+  private[this] lazy val sortedFiles = Rx {
+    val allFiles = files()
+    val filtered = {
+      val filterStr = filter()
+      if (filterStr.isEmpty) allFiles
+      else allFiles.filter(_.toString.toLowerCase.contains(filterStr.toLowerCase))
+    }
+    val sorted = sortTypes(sortType()) match {
+      case s if s == context.locale.name ⇒ filtered.sortBy(_.path.name)
+      case s if s == context.locale.size ⇒ filtered.sortBy(_.checksum.size)
+      case s if s == context.locale.modifiedDate ⇒ filtered.sortBy(_.timestamp.lastModified)
+      case _ ⇒ filtered
+    }
+    if (sortDesc()) sorted.reverse else sorted
+  }
+
   private[this] val rowsPerPage = 10
-  private[this] val pagesRx = files.map(_.length / rowsPerPage + 1)
-  val pageSelector = PageSelector(pagesRx)
+  private[this] lazy val pagesRx = sortedFiles.map(_.length / rowsPerPage + 1)
+  private[this] val sortTypes = Seq(context.locale.name, context.locale.size, context.locale.modifiedDate)
+  private[this] val sortType = Var(0)
+  private[this] val sortDesc = Var(false)
+  private[this] val filter = Var("")
+
+  lazy val pageSelector = PageSelector(pagesRx)
 
   def renderTag(md: ModifierT*): TagT = {
-    val currentFiles = Rx {
-      val data = files().sortBy(_.path.name)
+    val currentPageFiles = Rx {
       val page = pageSelector.currentPage() min pagesRx()
-      data.slice(rowsPerPage * (page - 1), rowsPerPage * (page - 1) + rowsPerPage)
+      sortedFiles().slice(rowsPerPage * (page - 1), rowsPerPage * (page - 1) + rowsPerPage)
     }
 
-    GridSystem.containerFluid(
-      GridSystem.mkRow(textAlign.center, pageSelector, pagesRx.map(_ <= 1).reactiveHide),
-      Rx(GridSystem.mkRow(currentFiles().map(FileListItem(_, selectedFile))))
+    val filterField = Form(FormInput.text("", filter.reactiveInput))
+
+    val sortLine = Rx {
+      span(
+        Icon(if (sortDesc()) "triangle-bottom" else "triangle-top"),
+        b(sortTypes(sortType())),
+        cursor.pointer,
+        onclick := Callback.onClick(_ ⇒ changeSortType())
+      )
+    }
+
+    div(
+      div(filterField, files.map(_.isEmpty).reactiveHide),
+      // hr(files.map(_.isEmpty).reactiveHide),
+      div(textAlign.center, pageSelector, pagesRx.map(_ <= 1).reactiveHide),
+      div(sortLine, sortedFiles.map(_.length <= 1).reactiveHide),
+      // hr(files.map(_.isEmpty).reactiveHide),
+      Rx(div(currentPageFiles().map(FileListItem(_, selectedFile))))
     )
   }
+
+  def changeSortType(): Unit = {
+    if (!sortDesc.now) {
+      sortDesc() = true
+    } else {
+      sortType() = (sortType.now + 1) % sortTypes.length
+      sortDesc() = false
+    }
+  }
 }