UBERF-7008 Show files and folders as a grid (hcengineering#5845)

Signed-off-by: Alexander Onnikov <Alexander.Onnikov@xored.com>
naif0s · Jun 18, 2024 · bb6f9d7 · bb6f9d7
1 parent ece0504
commit bb6f9d7
Show file tree

Hide file tree

Showing 20 changed files with 476 additions and 25 deletions.
diff --git a/models/drive/src/index.ts b/models/drive/src/index.ts
@@ -16,6 +16,7 @@
 import core, {
   type Blob,
   type Domain,
+  type FindOptions,
   type Role,
   type RolesAssignment,
   type Type,
@@ -84,6 +85,11 @@ export class TResource extends TDoc implements Resource {
   @ReadOnly()
     file?: Ref<Blob>
 
+  @Prop(TypeRef(core.class.Blob), drive.string.Preview)
+  @ReadOnly()
+  @Hidden()
+    preview?: Ref<Blob>
+
   @Prop(TypeRef(drive.class.Resource), drive.string.Parent)
   @Index(IndexKind.Indexed)
   @ReadOnly()
@@ -107,6 +113,7 @@ export class TFolder extends TResource implements Folder {
   declare path: Ref<Folder>[]
 
   declare file: undefined
+  declare preview: undefined
 }
 
 @Model(drive.class.File, drive.class.Resource, DOMAIN_DRIVE)
@@ -274,33 +281,86 @@ function defineResource (builder: Builder): void {
         },
         'createdBy'
       ],
+      /* eslint-disable @typescript-eslint/consistent-type-assertions */
       options: {
+        lookup: {
+          file: core.class.Blob,
+          preview: core.class.Blob
+        },
         sort: {
           _class: SortingOrder.Descending
         }
-      },
+      } as FindOptions<Resource>,
       configOptions: {
-        hiddenKeys: ['name', 'file', 'parent', 'path'],
+        hiddenKeys: ['name', 'file', 'parent', 'path', 'type'],
         sortable: true
       }
     },
     drive.viewlet.FileTable
   )
 
-  // builder.createDoc<Viewlet>(
-  //   view.class.Viewlet,
-  //   core.space.Model,
-  //   {
-  //     attachTo: drive.class.Resource,
-  //     descriptor: drive.viewlet.Grid,
-  //     config: ['', 'type', 'size', 'lastModified', 'createdBy'],
-  //     configOptions: {
-  //       hiddenKeys: ['name', 'file', 'parent', 'path'],
-  //       sortable: true
-  //     }
-  //   },
-  //   drive.viewlet.FileGrid
-  // )
+  builder.createDoc(
+    view.class.ViewletDescriptor,
+    core.space.Model,
+    {
+      label: drive.string.Grid,
+      icon: drive.icon.Grid,
+      component: drive.component.GridView
+    },
+    drive.viewlet.Grid
+  )
+
+  builder.createDoc<Viewlet>(
+    view.class.Viewlet,
+    core.space.Model,
+    {
+      attachTo: drive.class.Resource,
+      descriptor: drive.viewlet.Grid,
+      viewOptions: {
+        groupBy: [],
+        orderBy: [
+          ['name', SortingOrder.Ascending],
+          ['$lookup.file.size', SortingOrder.Ascending],
+          ['$lookup.file.modifiedOn', SortingOrder.Descending]
+        ],
+        other: []
+      },
+      config: [
+        {
+          key: '',
+          presenter: drive.component.ResourcePresenter,
+          label: drive.string.Name,
+          sortingKey: 'name'
+        },
+        {
+          key: '$lookup.file.size',
+          presenter: drive.component.FileSizePresenter,
+          label: drive.string.Size,
+          sortingKey: '$lookup.file.size'
+        },
+        {
+          key: '$lookup.file.modifiedOn',
+          label: core.string.ModifiedDate
+        },
+        'createdBy'
+      ],
+      configOptions: {
+        hiddenKeys: ['name', 'file', 'parent', 'path'],
+        sortable: true
+      },
+      /* eslint-disable @typescript-eslint/consistent-type-assertions */
+      options: {
+        lookup: {
+          file: core.class.Blob,
+          preview: core.class.Blob
+        },
+        sort: {
+          _class: SortingOrder.Descending
+        }
+      } as FindOptions<Resource>
+    },
+    drive.viewlet.FileGrid
+  )
 }
 
 function defineFolder (builder: Builder): void {

diff --git a/models/drive/src/plugin.ts b/models/drive/src/plugin.ts
@@ -75,6 +75,7 @@ export default mergeIds(driveId, drive, {
     RenameFolder: '' as ViewAction
   },
   string: {
+    Grid: '' as IntlString,
     Name: '' as IntlString,
     Description: '' as IntlString,
     Size: '' as IntlString,
@@ -84,6 +85,7 @@ export default mergeIds(driveId, drive, {
     Parent: '' as IntlString,
     Path: '' as IntlString,
     Drives: '' as IntlString,
-    Download: '' as IntlString
+    Download: '' as IntlString,
+    Preview: '' as IntlString
   }
 })
diff --git a/packages/core/lang/en.json b/packages/core/lang/en.json
@@ -60,6 +60,7 @@
     "UpdateSpaceDescription": "Grants users ability to update the space",
     "ArchiveSpaceDescription": "Grants users ability to archive the space",
     "AutoJoin": "Auto join",
-    "AutoJoinDescr": "Automatically join new employees to this space"
+    "AutoJoinDescr": "Automatically join new employees to this space",
+    "BlobSize": "Size"
   }
 }
diff --git a/packages/core/lang/es.json b/packages/core/lang/es.json
@@ -53,6 +53,7 @@
     "UpdateSpaceDescription": "Concede a los usuarios la capacidad de actualizar el espacio",
     "ArchiveSpaceDescription": "Concede a los usuarios la capacidad de archivar el espacio",
     "AutoJoin": "Auto unirse",
-    "AutoJoinDescr": "Unirse automáticamente a los nuevos empleados a este espacio"
+    "AutoJoinDescr": "Unirse automáticamente a los nuevos empleados a este espacio",
+    "BlobSize": "Tamaño"
   }
 }
diff --git a/packages/core/lang/pt.json b/packages/core/lang/pt.json
@@ -53,6 +53,7 @@
     "UpdateSpaceDescription": "Concede aos usuários a capacidade de atualizar o espaço",
     "ArchiveSpaceDescription": "Concede aos usuários a capacidade de arquivar o espaço",
     "AutoJoin": "Auto adesão",
-    "AutoJoinDescr": "Adesão automática de novos funcionários a este espaço"
+    "AutoJoinDescr": "Adesão automática de novos funcionários a este espaço",
+    "BlobSize": "Tamanho"
   }
 }
diff --git a/packages/core/lang/ru.json b/packages/core/lang/ru.json
@@ -60,6 +60,7 @@
     "UpdateSpaceDescription": "Дает пользователям разрешение обновлять пространство",
     "ArchiveSpaceDescription": "Дает пользователям разрешение архивировать пространство",
     "AutoJoin": "Автоприсоединение",
-    "AutoJoinDescr": "Автоматически присоединять новых сотрудников к этому пространству"
+    "AutoJoinDescr": "Автоматически присоединять новых сотрудников к этому пространству",
+    "BlobSize": "Размер"
   }
 }
diff --git a/plugins/contact-resources/src/components/PersonAccountPresenter.svelte b/plugins/contact-resources/src/components/PersonAccountPresenter.svelte
@@ -25,9 +25,12 @@
 
   export let value: Account
   export let avatarSize: IconSize = 'x-small'
+  export let shouldShowAvatar: boolean = true
+  export let shouldShowName: boolean = true
   export let disabled: boolean = false
   export let inline: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
   export let compact = false
 
   $: employee = $employeeByIdStore.get((value as PersonAccount)?.person as Ref<Employee>)
@@ -39,9 +42,31 @@
 {#if value}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   {#if employee}
-    <EmployeePresenter value={employee} {disabled} {inline} {accent} {avatarSize} {compact} on:accent-color />
+    <EmployeePresenter
+      value={employee}
+      {shouldShowAvatar}
+      {shouldShowName}
+      {disabled}
+      {inline}
+      {accent}
+      {avatarSize}
+      {noUnderline}
+      {compact}
+      on:accent-color
+    />
   {:else if person}
-    <PersonPresenter value={person} {disabled} {inline} {accent} {avatarSize} {compact} on:accent-color />
+    <PersonPresenter
+      value={person}
+      {shouldShowAvatar}
+      {shouldShowName}
+      {disabled}
+      {inline}
+      {accent}
+      {avatarSize}
+      {noUnderline}
+      {compact}
+      on:accent-color
+    />
   {:else}
     <div class="flex-row-center">
       <Avatar size={avatarSize} />

diff --git a/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte b/plugins/contact-resources/src/components/PersonAccountRefPresenter.svelte
@@ -22,14 +22,28 @@
 
   export let value: Ref<PersonAccount>
   export let avatarSize: IconSize = 'x-small'
+  export let shouldShowAvatar: boolean = true
+  export let shouldShowName: boolean = true
   export let disabled: boolean = false
   export let inline: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
   export let compact = false
 
   $: account = $personAccountByIdStore.get(value)
 </script>
 
 {#if account}
-  <PersonAccountPresenter value={account} {disabled} {inline} {avatarSize} {accent} {compact} on:accent-color />
+  <PersonAccountPresenter
+    value={account}
+    {shouldShowAvatar}
+    {shouldShowName}
+    {disabled}
+    {inline}
+    {avatarSize}
+    {accent}
+    {noUnderline}
+    {compact}
+    on:accent-color
+  />
 {/if}
diff --git a/plugins/drive-assets/assets/icons.svg b/plugins/drive-assets/assets/icons.svg
diff --git a/plugins/drive-assets/lang/en.json b/plugins/drive-assets/lang/en.json
@@ -2,6 +2,7 @@
   "string": {
     "Drive": "Drive",
     "Drives": "Drives",
+    "Grid": "Grid",
     "File": "File",
     "Folder": "Folder",
     "Resource": "Resource",

diff --git a/plugins/drive-assets/lang/es.json b/plugins/drive-assets/lang/es.json
@@ -2,6 +2,7 @@
   "string": {
     "Drive": "Unidad",
     "Drives": "Unidades",
+    "Grid": "Red",
     "File": "Archivo",
     "Folder": "Carpeta",
     "Resource": "Recurso",

diff --git a/plugins/drive-assets/lang/pt.json b/plugins/drive-assets/lang/pt.json
@@ -2,6 +2,7 @@
   "string": {
     "Drive": "Unidade",
     "Drives": "Unidades",
+    "Grid": "Grade",
     "File": "Ficheiro",
     "Folder": "Pasta",
     "Resource": "Recurso",

diff --git a/plugins/drive-assets/lang/ru.json b/plugins/drive-assets/lang/ru.json
@@ -2,6 +2,7 @@
   "string": {
     "Drive": "Диск",
     "Drives": "Диски",
+    "Grid": "Сетка",
     "File": "Файл",
     "Folder": "Папка",
     "Resource": "Ресурс",

diff --git a/plugins/drive-assets/src/index.ts b/plugins/drive-assets/src/index.ts
@@ -19,6 +19,7 @@ import drive from '@hcengineering/drive'
 const icons = require('../assets/icons.svg') as string // eslint-disable-line
 loadMetadata(drive.icon, {
   Drive: `${icons}#drive`,
+  Grid: `${icons}#grid`,
   File: `${icons}#file`,
   Folder: `${icons}#folder`,
   FolderOpen: `${icons}#folder-open`,