add sorting header for mobile file browser (#1786)

* add sorting header for mobile file browser * lingui extract * fix lint * add translations * update sorting * lingui extract * remove unused classes * remove unnecessary code Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
ChainSafe · Dec 6, 2021 · e611241 · e611241
1 parent 9f9e397
commit e611241
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 5 deletions.
diff --git a/packages/common-components/src/Icons/icons/Sort.icon.tsx b/packages/common-components/src/Icons/icons/Sort.icon.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as SortSvg } from "../svgs/sort.svg"
+
+export { SortSvg }
+
+export default createSvgIcon(<SortSvg />)
diff --git a/packages/common-components/src/Icons/index.ts b/packages/common-components/src/Icons/index.ts
@@ -64,6 +64,7 @@ export { default as SearchIcon, SearchSvg } from "./icons/Search.icon"
 export { default as SettingIcon, SettingSvg } from "./icons/Setting.icon"
 export { default as ShareAltIcon, ShareAltSvg } from "./icons/ShareAlt.icon"
 export { default as StarIcon, StarSvg } from "./icons/Star.icon"
+export { default as SortIcon, SortSvg } from "./icons/Sort.icon"
 export { default as SunIcon, SunSvg } from "./icons/Sun.icon"
 export { default as TableIcon, TableSvg } from "./icons/Table.icon"
 export { default as UpdateIcon, UpdateSvg } from "./icons/Update.icon"

diff --git a/packages/common-components/src/Icons/svgs/sort.svg b/packages/common-components/src/Icons/svgs/sort.svg
diff --git a/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx b/packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
@@ -21,7 +21,9 @@ import {
   GridIcon,
   TableIcon,
   UploadSvg,
-  PlusCircleSvg
+  PlusCircleSvg,
+  SortIcon,
+  CheckIcon
 } from "@chainsafe/common-components"
 import { useState } from "react"
 import { useMemo } from "react"
@@ -52,6 +54,7 @@ import SharedUsers from "../../../Elements/SharedUsers"
 import Menu from "../../../../UI-components/Menu"
 import SharingExplainerModal from "../../../SharingExplainerModal"
 import { useSharingExplainerModalFlag } from "../hooks/useSharingExplainerModalFlag"
+import { ListItemIcon, ListItemText } from "@material-ui/core"
 
 const baseOperations:  FileOperation[] = ["download", "info", "preview", "share"]
 const readerOperations: FileOperation[] = [...baseOperations, "report"]
@@ -415,6 +418,14 @@ const FilesList = ({ isShared = false }: Props) => {
     }
   }
 
+  const toggleSortDirection = () => {
+    if (direction === "ascend") {
+      setDirection("descend")
+    } else {
+      setDirection("ascend")
+    }
+  }
+
   // Previews
   const setNextPreview = () => {
     if (
@@ -882,7 +893,7 @@ const FilesList = ({ isShared = false }: Props) => {
               className={clsx(loadingCurrentPath && classes.fadeOutLoading)}
               testId="home"
             >
-              {desktop && (
+              {desktop ? (
                 <TableHead>
                   <TableRow type="grid"
                     className={classes.tableRow}>
@@ -928,6 +939,69 @@ const FilesList = ({ isShared = false }: Props) => {
                     <TableHeadCell>{/* Menu */}</TableHeadCell>
                   </TableRow>
                 </TableHead>
+              ) : (
+                <TableHead>
+                  <TableRow type="grid"
+                    className={classes.tableRow}>
+                    <TableHeadCell>
+                      {/* Checkbox */}
+                    </TableHeadCell>
+                    <TableHeadCell
+                      align='left'
+                      onSortChange={toggleSortDirection}
+                      sortButtons
+                      sortDirection={direction}
+                    >
+                      {t`Name`}
+                    </TableHeadCell>
+                    <TableHeadCell align='right'>
+                      <Menu
+                        testId='fileDropdown'
+                        icon={<SortIcon className={classes.dropdownIcon} />}
+                        options={[{
+                          contents: (
+                            <ListItemText inset>
+                              <b><Trans>Sort By:</Trans></b>
+                            </ListItemText>
+                          )
+                        }, {
+                          contents: (
+                            <>
+                              {column === "name" && <ListItemIcon>
+                                <CheckIcon />
+                              </ListItemIcon>}
+                              <ListItemText inset={column !== "name"}>
+                                <Trans>Name</Trans>
+                              </ListItemText>
+                            </>
+                          ),
+                          onClick: () => setColumn("name")
+                        }, {
+                          contents: (
+                            <>
+                              {column === "date_uploaded" && <ListItemIcon><CheckIcon /></ListItemIcon>}
+                              <ListItemText inset={column !== "date_uploaded"}>
+                                <Trans>Date Uploaded</Trans>
+                              </ListItemText>
+                            </>
+                          ),
+                          onClick: () => setColumn("date_uploaded")
+                        }, {
+                          contents: (
+                            <>
+                              {column === "size" && <ListItemIcon><CheckIcon /></ListItemIcon>}
+                              <ListItemText inset={column !== "size"}>
+                                <Trans>Size</Trans>
+                              </ListItemText>
+                            </>
+                          ),
+                          onClick: () => setColumn("size")
+                        }]}
+                        style={{ focusVisible: classes.focusVisible }}
+                      />
+                    </TableHeadCell>
+                  </TableRow>
+                </TableHead>
               )}
               <TableBody>
                 {items.map((file, index) => (

diff --git a/packages/files-ui/src/UI-components/Menu.tsx b/packages/files-ui/src/UI-components/Menu.tsx
@@ -1,12 +1,14 @@
 import React, { useState, ReactNode, useMemo } from "react"
-import { Menu as MaterialMenu, MenuItem } from "@material-ui/core"
+import { Menu as MaterialMenu, MenuItem, PopoverOrigin } from "@material-ui/core"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import clsx from "clsx"
 import { useCallback } from "react"
 import { CSFTheme } from "../Themes/types"
 
 interface Option {
   contents: ReactNode
+  inset?: boolean
+  testId?: string
   onClick?: () => void
 }
 
@@ -22,6 +24,8 @@ interface Props {
   options: Option[]
   style?: CustomClasses
   testId?: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
 }
 
 const useStyles = makeStyles(({ constants }: CSFTheme) => {
@@ -40,7 +44,7 @@ const useStyles = makeStyles(({ constants }: CSFTheme) => {
     }
   })})
 
-export default function Menu({ icon, options, style, testId }: Props) {
+export default function Menu({ icon, options, style, testId, anchorOrigin, transformOrigin }: Props) {
   const [anchorEl, setAnchorEl] = useState(null)
   const open = useMemo(() => Boolean(anchorEl), [anchorEl])
   const classes = useStyles()
@@ -68,12 +72,14 @@ export default function Menu({ icon, options, style, testId }: Props) {
         open={open}
         onClose={handleClose}
         PopoverClasses={{ paper: classes.paper, root: style?.root }}
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
       >
         {options.map((option, index) => (
           <MenuItem
             key={index}
             onClick={() => {
-              handleClose()
+              option.onClick && handleClose()
               option.onClick && option.onClick()
             }}
             focusVisibleClassName={clsx(style?.focusVisible)}

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
@@ -190,6 +190,9 @@ msgstr ""
 msgid "Data restored successfully"
 msgstr ""
 
+msgid "Date Uploaded"
+msgstr ""
+
 msgid "Date uploaded"
 msgstr "Hochgeladen am"
 
@@ -706,6 +709,9 @@ msgstr "Etwas ist schief gelaufen!"
 msgid "Something went wrong. We couldn't upload your file"
 msgstr "Es ist etwas schief gelaufen. Wir konnten Ihre Datei nicht hochladen"
 
+msgid "Sort By:"
+msgstr ""
+
 msgid "Start Upload"
 msgstr "Hochladen starten"
 

diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
@@ -190,6 +190,9 @@ msgstr "Data moved to bin successfully"
 msgid "Data restored successfully"
 msgstr "Data restored successfully"
 
+msgid "Date Uploaded"
+msgstr "Date Uploaded"
+
 msgid "Date uploaded"
 msgstr "Date uploaded"
 
@@ -709,6 +712,9 @@ msgstr "Something went wrong!"
 msgid "Something went wrong. We couldn't upload your file"
 msgstr "Something went wrong. We couldn't upload your file"
 
+msgid "Sort By:"
+msgstr "Sort By:"
+
 msgid "Start Upload"
 msgstr "Start Upload"
 

diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
@@ -191,6 +191,9 @@ msgstr ""
 msgid "Data restored successfully"
 msgstr ""
 
+msgid "Date Uploaded"
+msgstr ""
+
 msgid "Date uploaded"
 msgstr "Fecha de subida"
 
@@ -710,6 +713,9 @@ msgstr ""
 msgid "Something went wrong. We couldn't upload your file"
 msgstr "Algo salió mal. No pudimos subir tu archivo"
 
+msgid "Sort By:"
+msgstr ""
+
 msgid "Start Upload"
 msgstr "Iniciar la subida"
 

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -191,6 +191,9 @@ msgstr "Les données ont été déplacées vers la poubelle avec succès"
 msgid "Data restored successfully"
 msgstr "Données restaurées avec succès"
 
+msgid "Date Uploaded"
+msgstr ""
+
 msgid "Date uploaded"
 msgstr "Téléversé le"
 
@@ -710,6 +713,9 @@ msgstr "Quelque chose a mal tourné !"
 msgid "Something went wrong. We couldn't upload your file"
 msgstr "Un problème est survenu. Nous n’avons pas pu téléverser votre fichier"
 
+msgid "Sort By:"
+msgstr ""
+
 msgid "Start Upload"
 msgstr "Démarrer le téléversement"
 

diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
@@ -190,6 +190,9 @@ msgstr ""
 msgid "Data restored successfully"
 msgstr ""
 
+msgid "Date Uploaded"
+msgstr ""
+
 msgid "Date uploaded"
 msgstr "Dato opplastet"
 
@@ -706,6 +709,9 @@ msgstr "Noe gikk galt."
 msgid "Something went wrong. We couldn't upload your file"
 msgstr ""
 
+msgid "Sort By:"
+msgstr ""
+
 msgid "Start Upload"
 msgstr ""