share dir naming

filemanager-ui/src/app/file-list/file-list.component.ts

@@ -5,7 +5,8 @@ import { MatDialog } from '@angular/material/dialog'
 import { ActivatedRoute, Router } from '@angular/router'
 import { DriveService } from '../drive.service'
 import { ShareDialogComponent } from '../share-dialog/share-dialog.component'
-import { Space } from '../../../../src/EventInterfaces'
+import { Contact, Space } from '../../../../src/EventInterfaces'
+import { ContactService } from '../contact.service'
 
 export interface FileData {
   name: string, 
@@ -26,10 +27,11 @@ export interface FileData {
 export class FileListComponent implements OnInit, AfterViewInit {
   files: MatTableDataSource<FileData>
   columnsToDisplay = ['icon', 'name', 'size', 'lastChanged', 'more']
+  loadedContacts = new Map<string, Contact>()
 
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor (private drive: DriveService, private route: ActivatedRoute, private dialog: MatDialog, private router: Router) {}
+  constructor (private drive: DriveService, private contacts: ContactService, private route: ActivatedRoute, private dialog: MatDialog, private router: Router) {}
 
   ngOnInit(): void {
     this.files = new MatTableDataSource()
@@ -66,14 +68,18 @@ export class FileListComponent implements OnInit, AfterViewInit {
       this.router.navigateByUrl('/explorer/%2f' + path)
     }
 
-    this.drive.readdir(path).subscribe(files => {
+    this.drive.readdir(path).subscribe(async files => {
       files.sort((a,b) => (a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase())))
       let dirs = files.filter(f => f.stat?.isDirectory)
       files = dirs.concat(files.filter(f => ! f.stat?.isDirectory))
 
-      this.files.data = 
-        files.map(r => {
-          let name = window.decodeURIComponent(r.name)
+      this.files.data = await Promise.all(
+        files.map(async r => {
+          let name =  window.decodeURIComponent(r.name)
+          if(r.share) {
+            const usr = await this.getContact(r.share.owner)
+            name = usr.username + ': ' + (r.share.name || name)
+          }
           if(name.length > 64) name = name.substr(0, 32) + '...'
           let icon = 'description'
           if(r.stat?.isDirectory) {
@@ -93,9 +99,16 @@ export class FileListComponent implements OnInit, AfterViewInit {
             lastChanged: toDate(r.stat?.mtime),
             space: r.space
           }
-        })
+        }))
     })
   }
+
+  async getContact(url: string) {
+    if(this.loadedContacts.has(url)) return this.loadedContacts.get(url)
+    const profile = await this.contacts.getProfile(url)
+    this.loadedContacts.set(url, profile)
+    return profile
+  }
 }
 
 function toDate(timestamp?: Date): string {

filemanager-ui/src/app/profile-image/profile-image.component.html

@@ -1,3 +1,3 @@
-<div class="image-circle" [ngStyle]="{backgroundImage: backgroundImage}" (click)="onClick()">
+<div class="image-circle" [ngStyle]="{backgroundImage: backgroundImage}" (click)="onClick()" matTooltip="{{tooltip || profile.username}}">
     <mat-icon *ngIf="!backgroundImage" class="no-image">person</mat-icon>
 </div>

filemanager-ui/src/app/profile-image/profile-image.component.ts

@@ -15,6 +15,9 @@ export class ProfileImageComponent implements OnInit {
   @Input()
   profile: Contact
 
+  @Input()
+  tooltip: string
+
   @Input()
   writeable = false
 
@@ -27,6 +30,7 @@ export class ProfileImageComponent implements OnInit {
     if(!this.profile) {
       this.profile = await this.contacts.getProfile()
       this.writeable = true
+      this.tooltip = this.tooltip || 'You'
     }
 
     if(this.profile?.profilePicture) {

filemanager-ui/src/app/share-list/share-list.component.ts

@@ -16,9 +16,7 @@ export class ShareListComponent implements OnInit {
 
   async ngOnInit() {
     this.sentShares = await this.contacts.getAllSentShares()
-    console.log(this.sentShares)
     this.receivedShares = await this.contacts.getAllReceivedShares() 
-    console.log(this.receivedShares)
   }
 
 }

filemanager-ui/src/app/share-overview/share-overview.component.html

@@ -2,7 +2,7 @@
     <mat-card-header>
         <app-profile-image *ngIf="sharedBy" [profile]="sharedBy"></app-profile-image>
         <mat-icon>chevron_right</mat-icon>
-        <h3><a routerLink={{shareLink}}>{{share.drivePath}}</a></h3>
+        <h3><a routerLink={{shareLink}}>{{filePath}}</a></h3>
     </mat-card-header>
     <mat-card-content>
         <div *ngIf="isFile"><mat-icon >description</mat-icon> File</div>

filemanager-ui/src/app/share-overview/share-overview.component.ts

@@ -25,6 +25,7 @@ export class ShareOverviewComponent implements OnInit {
   created: string
   isFile: boolean
   count: number
+  filePath: string
 
   constructor(private contacts: ContactService, private drive: DriveService) { }
 
@@ -33,6 +34,19 @@ export class ShareOverviewComponent implements OnInit {
     if(this.showSharedWith) this.sharedWith = await Promise.all(this.share.sharedWith.map(u => this.contacts.getUserByUrl(u)))
     if(this.share.drivePath) {
       this.shareLink = '/explorer/' + window.encodeURIComponent(this.share.drivePath)
+
+      const path = this.share.drivePath.split('/')
+      let filename = path[path.length-1]
+      if(filename.length > 64) filename = filename.slice(0, 16) + '...'
+
+      path.splice(path.length-1, 1)
+      if(this.share.name) {
+        const usr = await this.contacts.getProfile(this.share.owner)
+        filename = usr.username + ': ' + this.share.name
+      }
+
+      this.filePath = path.concat(filename).join('/')
+
       const info = await this.drive.stat(this.share.drivePath)
       this.isFile = info.isFile
       this.created = info.ctime.toLocaleString()

filemanager-ui/src/app/sidebar/sidebar.component.html

@@ -1,14 +1,14 @@
 <mat-toolbar #sidebar class="sidebar" color="primary">
     <mat-toolbar-row>
-        <button mat-icon-button class="profilebutton"><app-profile-image></app-profile-image></button>
+        <button mat-icon-button class="profilebutton"><app-profile-image tooltip="Profile"></app-profile-image></button>
     </mat-toolbar-row>
     <mat-toolbar-row>
-        <button mat-icon-button (click)="onAddressBook()"><mat-icon>contacts</mat-icon></button>
+        <button mat-icon-button (click)="onAddressBook()" matTooltip="Contacts"><mat-icon >contacts</mat-icon></button>
     </mat-toolbar-row>
     <mat-toolbar-row>
-        <a routerLink="/explorer/%2f"><button mat-icon-button><mat-icon>storage</mat-icon></button></a>
+        <a routerLink="/explorer/%2f"><button mat-icon-button matTooltip="Drive"><mat-icon>storage</mat-icon></button></a>
     </mat-toolbar-row>
     <mat-toolbar-row>
-        <a routerLink="/sharelist/%2f"><button mat-icon-button><mat-icon>folder_shared</mat-icon></button></a>
+        <a routerLink="/sharelist/%2f"><button mat-icon-button matTooltip="Shares"><mat-icon>folder_shared</mat-icon></button></a>
     </mat-toolbar-row>
 </mat-toolbar>

src/ContactsEventHandler.ts

@@ -97,11 +97,9 @@ export default class ContactsEventHandler extends MainEventHandler implements IC
         return profile
     }
 
-    async sendShare(userUrls: string[], url: string) {
-        const parsed = parseUrl(url)
-        const vertex = <Vertex<ShareGraphObject>> await this.certacrypt.graph.get(parsed.id, parsed.feed, parsed.key)
+    async sendShare(userUrls: string[], shareUrl: string) {
         const users = await Promise.all(userUrls.map(u => this.certacrypt.getUserByUrl(u)))
-        await this.certacrypt.sendShare(vertex, users)
+        await this.certacrypt.sendShare(shareUrl, users)
     }
 
     async getAllReceivedShares() : Promise<Share[]>{

src/EventInterfaces.ts

@@ -37,13 +37,20 @@ export type Share =  {
     drivePath: string
 }
 
+export type ShareMeta = {
+    owner: string,
+    name: string, 
+    share: string,
+    path: string
+}
+
 export type Space = {space: string, owner: string, writers: string[], isWriteable: boolean}
 
 export type Peer = {};
 
 export type FileDownload = {filename: string, size: number, downloaded: number, error?: Error, localPath?: string}
 
-export type readdirResult = { name: string, path: string, space?: Space, stat: Stat }
+export type readdirResult = { name: string, path: string, stat: Stat, space?: Space, share?: ShareMeta }
 
 export interface ICertaCryptEventHandler {