Fix UI elements and file download

SenseNet · Dec 5, 2024 · a90333b · a90333b
1 parent b1bfc44
commit a90333b
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 22 deletions.
diff --git a/apps/sensenet/src/components/content-list/date-field.tsx b/apps/sensenet/src/components/content-list/date-field.tsx
@@ -10,8 +10,8 @@ export const DateField: FC<{ date: string | Date }> = ({ date }) => {
 
   return (
     <TableCell component="div" className={clsx(globalClasses.centeredLeft, globalClasses.virtualizedCellStyle)}>
-      <Tooltip title={dateUtils.formatDate(new Date(date), 'yyyy-MM-dd HH:mm aaa')} placement="top">
-        <div>{dateUtils.formatDistanceFromNow(new Date(date))}</div>
+      <Tooltip title={dateUtils.formatDate(new Date(date), 'yyyy-MM-dd HH:mm:ss')} placement="top">
+        <div>{dateUtils.formatDate(new Date(date), 'yyyy-MM-dd HH:mm:ss')}</div>
       </Tooltip>
     </TableCell>
   )

diff --git a/apps/sensenet/src/components/content-list/reference-field.tsx b/apps/sensenet/src/components/content-list/reference-field.tsx
@@ -1,5 +1,5 @@
 import { Button, createStyles, Link, makeStyles, TableCell, Theme, Tooltip } from '@material-ui/core'
-import { GenericContent } from '@sensenet/default-content-types'
+import { GenericContent, User } from '@sensenet/default-content-types'
 import { useRepository } from '@sensenet/hooks-react'
 import { clsx } from 'clsx'
 import React, { FunctionComponent, useContext } from 'react'
@@ -73,7 +73,7 @@ export const ReferenceField: FunctionComponent<ReferenceFieldProps> = ({ content
           {repository.schemas.isContentFromType(content, 'User') && showIcon ? (
             <Icon item={content} style={{ marginRight: '0.5rem' }} />
           ) : null}
-          <Tooltip title={`Open ${content.DisplayName || content.Name} for edit`}>
+          <Tooltip title={`Open ${content.Path || content.Name || content.Path} for edit`}>
             {content.Name === 'Somebody' ? (
               <>{content.DisplayName || content.Name}</>
             ) : (
@@ -91,7 +91,10 @@ export const ReferenceField: FunctionComponent<ReferenceFieldProps> = ({ content
                     }),
                   )
                 }}>
-                {content.DisplayName || content.Name}
+                {repository.schemas.isContentFromType(content, 'User')
+                  ? `${(content as User).Domain}\\${(content as User).LoginName}`
+                  : ''}
+                {content.Type !== 'User' ? content.Name : ''}
               </Link>
             )}
           </Tooltip>

diff --git a/apps/sensenet/src/components/content/Explore.tsx b/apps/sensenet/src/components/content/Explore.tsx
@@ -197,7 +197,7 @@ export function Explore({
                 batchActions={true}
               />
             </div>
-            <div className={classes.treeAndDatagridWrapper}>
+            <div className={`${classes.treeAndDatagridWrapper} leftTree`}>
               {hasTree && (
                 <TreeWithData
                   onItemClick={(item) => {

diff --git a/apps/sensenet/src/components/tree/simpletree.tsx b/apps/sensenet/src/components/tree/simpletree.tsx
@@ -0,0 +1,48 @@
+import { GenericContent } from '@sensenet/default-content-types'
+import React from 'react'
+import { usePersonalSettings } from '../../hooks'
+
+export type ItemType = GenericContent & {
+  children?: ItemType[]
+  expanded?: boolean
+  hasNextPage?: boolean
+}
+
+type SimpleTreeProps = {
+  activeItemPath: string
+  itemCount: number
+  isLoading: boolean
+  loadMore: (startIndex: number, path?: string) => Promise<void>
+  onItemClick: (item: GenericContent) => void
+  treeData: ItemType
+}
+
+export const getStringParts = (str: string, characterSplit = 10) => {
+  return [str.slice(0, characterSplit * -1), str.slice(characterSplit * -1)]
+}
+
+export function SimpleTree({ treeData, itemCount, onItemClick, loadMore, isLoading, activeItemPath }: SimpleTreeProps) {
+  const personalSettings = usePersonalSettings()
+  console.log(treeData)
+  console.log(itemCount)
+  console.log(onItemClick)
+  console.log(loadMore)
+  console.log(isLoading)
+  console.log(activeItemPath)
+  console.log(personalSettings)
+  return (
+    <div
+      style={{
+        minWidth: '350px',
+        maxWidth: '400px',
+        flexGrow: 2,
+        flexShrink: 0,
+        borderRight: '12px solid rgba(128,128,128,.2)',
+        backgroundColor: 'red',
+      }}>
+      <div>
+        <span>tree</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sensenet/src/style.css b/apps/sensenet/src/style.css
@@ -11,3 +11,33 @@ ul[role='listbox'] {
   padding: 0;
   margin: 0;
 }
+.MuiInputBase-root {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 2px 5px;
+  margin-top: 23px !important;
+}
+.MuiGrid-container {
+  max-height: 100% !important;
+}
+div[class*='makeStyles-actionButtonWrapper'] {
+  left: auto;
+}
+button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary[type='submit'] {
+  margin-left: 0px;
+}
+
+/*.leftTree .MuiListItemIcon-root {
+  border-left: 2px dotted #ccc;
+  padding-left: 5px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin: 0;
+}
+.leftTree .MuiListItem-root {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.leftTree span[class*='MuiTypography-body'] {
+  font-size: 12px;
+} */
diff --git a/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx b/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
@@ -230,7 +230,7 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
     case 'new':
       return (
         <ClickAwayListener onClickAway={handleClickAway}>
-          <div style={{ display: 'inline-block', minWidth: '350px' }}>
+          <div style={{ display: 'inline-block', minWidth: '100%' }}>
             <InputLabel shrink htmlFor={props.settings.Name} required={props.settings.Compulsory}>
               {props.settings.DisplayName}
             </InputLabel>
@@ -270,6 +270,7 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
                 <IconButton
                   color="primary"
                   className={classes.button}
+                  style={{ marginTop: '22px', width: '33px' }}
                   disabled={currentSelected && currentSelected.Name.length > 0 ? false : true}
                   onClick={handleAddClick}>
                   {props.renderIcon ? props.renderIcon('add_circle') : renderIconDefault('add_circle')}

diff --git a/packages/sn-controls-react/src/fieldcontrols/file-upload.tsx b/packages/sn-controls-react/src/fieldcontrols/file-upload.tsx
@@ -211,7 +211,14 @@ export const FileUpload: React.FC<ReactClientFieldSetting<BinaryFieldSetting>> =
               <Button
                 data-test="download-button"
                 className={classes.downloadButton}
-                onClick={() => downloadFile(mediaResource?.media_src, repo.configuration.repositoryUrl)}
+                onClick={() =>
+                  downloadFile(
+                    fileName,
+                    mediaResource?.media_src,
+                    repo.configuration.repositoryUrl,
+                    repo.configuration.token,
+                  )
+                }
                 aria-label={localization.downloadButtonText}
                 variant="contained"
                 component="span"

diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
@@ -7,6 +7,9 @@ import {
   ListItemIcon,
   ListItemSecondaryAction,
   ListItemText,
+  Table,
+  TableBody,
+  TableCell,
 } from '@material-ui/core'
 import { InsertDriveFile } from '@material-ui/icons'
 import { Repository } from '@sensenet/client-core'
@@ -107,7 +110,28 @@ export const DefaultItemTemplate: React.FC<DefaultItemTemplateProps> = (props) =
   return (
     <ListItem style={props.actionName === 'browse' ? { padding: 0 } : undefined} key={content.Id} button={false}>
       {content.Type ? renderIcon(content) : null}
-      <ListItemText primary={content.DisplayName} style={{ textAlign: 'left', paddingRight: 15 }} />
+      <ListItemText
+        primary={
+          content.Path?.trim() === '' ? (
+            content.DisplayName
+          ) : (
+            <Table>
+              <TableBody>
+                <TableCell component="th" title={content.Path} scope="row">
+                  {content.Path}
+                </TableCell>
+                <TableCell component="th" scope="row">
+                  {content.DisplayName}
+                </TableCell>
+                <TableCell component="th" scope="row">
+                  {content.Type}
+                </TableCell>
+              </TableBody>
+            </Table>
+          )
+        }
+        style={{ textAlign: 'left', paddingRight: 15 }}
+      />
       {props.actionName && props.actionName !== 'browse' && !props.readOnly ? (
         <ListItemSecondaryAction>
           {content.Id > 0 ? (

diff --git a/packages/sn-hooks-react/src/hooks/use-download.ts b/packages/sn-hooks-react/src/hooks/use-download.ts
@@ -1,26 +1,42 @@
 import { GenericContent } from '@sensenet/default-content-types'
 import { useRepository } from './use-repository'
 
-export const fakeClick = (obj: EventTarget) => {
-  const ev = document.createEvent('MouseEvents')
-  ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
-  obj.dispatchEvent(ev)
+export const downloadFile = (
+  fileName: string,
+  repositorPath: string,
+  repositoryUrl: string,
+  token: string | undefined,
+) => {
+  const url = `${repositoryUrl}${repositorPath}?download&t=${Date.now()}`
+  fetch(url, {
+    method: 'get',
+    headers: new Headers({
+      Authorization: `Bearer ${token}`,
+    }),
+  })
+    .then((response) => response.blob())
+    .then((blob) => {
+      const urlInner = window.URL.createObjectURL(new Blob([blob]))
+      const link = document.createElement('a')
+      link.href = urlInner
+      link.download = fileName || 'downloaded-file'
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+      window.URL.revokeObjectURL(url)
+    })
+    .catch((error) => {
+      console.error('Error fetching the file:', error)
+    })
 }
-
-export const downloadFile = (name: string, repositoryUrl: string) => {
-  const saveLink = document.createElement('a')
-  saveLink.href = `${repositoryUrl}${name}?download?t=${Date.now()}`
-  saveLink.target = '_blank'
-  fakeClick(saveLink)
-}
-
 /**
  * Custom hook that downloads a specified content from a repository
  * Has to be wrapped with **RepositoryContext**
  */
 export const useDownload = (content: GenericContent) => {
   const repo = useRepository()
   const isFile = repo.schemas.isContentFromType(content, 'File')
+  console.log(repo.configuration.token)
   return {
     /**
      * Boolean that indicates if the content is a File
@@ -30,6 +46,7 @@ export const useDownload = (content: GenericContent) => {
     /**
      * Callback that will trigger the download
      */
-    download: () => downloadFile(content.Path, repo.configuration.repositoryUrl),
+    download: () =>
+      downloadFile(content.Name, content.Path, repo.configuration.repositoryUrl, repo.configuration.token),
   }
 }