Styling for breadcrumbs. Manipulation buttons. Allow archive ID to load archive from system. Populate file/directory info.

LANCommander/Components/FileManagerComponents/FileManager.razor

@@ -1,60 +1,111 @@
 @using AntDesign.TableModels;
-<GridRow>
+@inject ArchiveService ArchiveService
-    <Space>
-        <SpaceItem>
-            <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowLeft" OnClick="NavigateBack" />
-        </SpaceItem>
-        <SpaceItem>
-            <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowRight" OnClick="NavigateForward" />
-        </SpaceItem>
-        <SpaceItem>
-            <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowUp" OnClick="NavigateUp" Disabled="@(Path.Parent == null)" />
-        </SpaceItem>
-        <SpaceItem>
-            <Button Type="@ButtonType.Text" Icon="@IconType.Outline.Reload" OnClick="() => ChangeDirectory(Path, false)" />
-        </SpaceItem>
-        <SpaceItem>
-            <Breadcrumb>
-                @foreach (var breadcrumb in Breadcrumbs)
-                {
-                    <BreadcrumbItem OnClick="() => ChangeDirectory(breadcrumb, false)">@breadcrumb.Name</BreadcrumbItem>
-                }
-            </Breadcrumb>
-        </SpaceItem>
-    </Space>
-</GridRow>
 
-<GridRow>
+<div class="file-manager">
-    <GridCol Span="6" Class="file-manager-tree">
+    <GridRow Class="file-manager-nav">
-        <Tree TItem="FileManagerDirectory"
+        <Space>
-            DataSource="Directories"
+            <SpaceItem>
-            TitleExpression="x => x.DataItem.Name"
+                <Tooltip Title="Back" MouseEnterDelay="2">
-            ChildrenExpression="x => x.DataItem.Children"
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowLeft" OnClick="NavigateBack" />
-            IsLeafExpression="x => !x.DataItem.HasChildren"
+                </Tooltip>
-            OnClick="(args) => ChangeDirectory(args.Node.DataItem, false)"
+            </SpaceItem>
-            OnNodeLoadDelayAsync="ExpandTree" />
+            <SpaceItem>
-    </GridCol>
+                <Tooltip Title="Forward" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowRight" OnClick="NavigateForward" />
+                </Tooltip>
+            </SpaceItem>
+            <SpaceItem>
+                <Tooltip Title="Up a Level" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.ArrowUp" OnClick="NavigateUp" Disabled="@(Path.Parent == null)" />
+                </Tooltip>
+            </SpaceItem>
+            <SpaceItem>
+                <Tooltip Title="Refresh" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.Reload" OnClick="() => ChangeDirectory(Path, false)" />
+                </Tooltip>
+            </SpaceItem>
+            <SpaceItem Class="file-manager-nav-breadcrumbs">
+                <Breadcrumb>
+                    @foreach (var breadcrumb in Breadcrumbs)
+                    {
+                        <BreadcrumbItem OnClick="() => ChangeDirectory(breadcrumb, false)">@breadcrumb.Name</BreadcrumbItem>
+                    }
+                </Breadcrumb>
+            </SpaceItem>
+            <SpaceItem>
+                <Tooltip Title="New Folder" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.FolderAdd" OnClick="NewFolder" />
+                </Tooltip>
+            </SpaceItem>
+            <SpaceItem>
+                <Tooltip Title="Upload File" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.Upload" />
+                </Tooltip>
+            </SpaceItem>
+            <SpaceItem>
+                <Tooltip Title="Delete" MouseEnterDelay="2">
+                    <Button Type="@ButtonType.Text" Icon="@IconType.Outline.Delete" />
+                </Tooltip>
+            </SpaceItem>
+        </Space>
+    </GridRow>
 
-    <GridCol Span="18" Class="file-manager-list">
+    <GridRow>
-        <Table
+        <GridCol Span="6" Class="file-manager-tree">
-            TItem="IFileManagerEntry"
+            <Tree TItem="FileManagerDirectory"
-            DataSource="Entries"
+                  DataSource="Directories"
-            HidePagination="true"
+                  SwitcherIcon="@IconType.Outline.Down"
-            Loading="Entries == null"
+                  TitleExpression="x => x.DataItem.Name"
-            OnRow="OnRow">
+                  ChildrenExpression="x => x.DataItem.Children"
-            <Column TData="string" Width="32">
+                  IsLeafExpression="x => !x.DataItem.HasChildren"
-                <Text></Text>
+                  IconExpression="x => x.Expanded ? IconType.Outline.FolderOpen : IconType.Outline.Folder"
-            </Column>
+                  DefaultExpandParent="true"
-            <PropertyColumn Property="e => e.Path" Sortable Title="Name">
+                  OnClick="(args) => ChangeDirectory(args.Node.DataItem, false)"
-                @GetEntryName(context)
+                  OnNodeLoadDelayAsync="ExpandTree">
-            </PropertyColumn>
+                <SwitcherIconTemplate>
-            <PropertyColumn Property="e => e.Length" Sortable Title="Size">
+                    <Icon Type="@IconType.Outline.Down" />
-                @ByteSizeLib.ByteSize.FromBytes(context.Length)
+                </SwitcherIconTemplate>
-            </PropertyColumn>
+                <TitleIconTemplate>
-            <PropertyColumn Property="e => e.ModifiedOn" Format="MM/dd/yyyy hh:mm tt" Sortable Title="Modified" />
+                    @if (context.Expanded)
-        </Table>
+                    {
-    </GridCol>
+                        <Icon Type="@IconType.Outline.FolderOpen" />
-</GridRow>
+                    }
+                    else
+                    {
+                        <Icon Type="@IconType.Outline.Folder" />
+                    }
+                </TitleIconTemplate>
+            </Tree>
+        </GridCol>
+
+        <GridCol Span="18" Class="file-manager-list">
+            <Table TItem="IFileManagerEntry"
+                   DataSource="Entries"
+                   HidePagination="true"
+                   Loading="Entries == null"
+                   OnRow="OnRow"
+                   Size="@TableSize.Small">
+                <Column TData="string" Width="32">
+                    @if (context is FileManagerFile)
+                    {
+                        <Icon Type="@(((FileManagerFile)context).GetIcon())" Theme="outline" />
+                    }
+                    else if (context is FileManagerDirectory)
+                    {
+                        <Icon Type="@IconType.Outline.Folder" />
+                    }
+                </Column>
+                <PropertyColumn Property="e => e.Path" Sortable Title="Name">
+                    @GetEntryName(context)
+                </PropertyColumn>
+                <PropertyColumn Property="e => e.Size" Sortable Title="Size">
+                    @ByteSizeLib.ByteSize.FromBytes(context.Size)
+                </PropertyColumn>
+                <PropertyColumn Property="e => e.ModifiedOn" Format="MM/dd/yyyy hh:mm tt" Sortable Title="Modified" />
+             </Table>
+         </GridCol>
+     </GridRow>
+</div>
 
  @code {
     [Parameter] public Guid ArchiveId { get; set; }
@@ -85,6 +136,10 @@
         {
             Directories = GetDirectories(WorkingDirectory);
         }
+        else if (ArchiveId != Guid.Empty)
+        {
+            Directories = await GetArchiveDirectories(ArchiveId);
+        }
     }
 
     HashSet<FileManagerDirectory> GetDirectories(string path)
@@ -96,7 +151,7 @@
             MaxRecursionDepth = 1
         });
 
-        var root = new FileManagerDirectory()
+        var root = new FileManagerDirectory
         {
             Name = path,
             Path = path,
@@ -113,9 +168,31 @@
         };
     }
 
+    async Task<HashSet<FileManagerDirectory>> GetArchiveDirectories(Guid archiveId)
+    {
+        var entries = await ArchiveService.GetContents(archiveId);
+        var directories = new HashSet<FileManagerDirectory>();
+
+        var root = new FileManagerDirectory
+        {
+            Name = "/",
+            Path = "",
+            IsExpanded = true
+        };
+
+        root.PopulateChildren(entries);
+
+        ChangeDirectory(root, true);
+
+        return new HashSet<FileManagerDirectory>
+        {
+            root
+        };
+    }
+
     string GetEntryName(IFileManagerEntry entry)
     {
-        if (String.IsNullOrWhiteSpace(entry.Name) && entry.Length == 0)
+        if (String.IsNullOrWhiteSpace(entry.Name) && entry.Size == 0)
         {
             return entry.Path.TrimEnd('/').Split('/').Last();
         }
@@ -163,18 +240,27 @@
         {
             if (Directory.Exists(entry))
             {
+                var info = new DirectoryInfo(entry);
+
                 Entries.Add(new FileManagerDirectory
                 {
                     Path = entry,
                     Name = entry.Substring(Path.Path.Length).TrimStart(separator),
+                    ModifiedOn = info.LastWriteTime,
+                    CreatedOn = info.CreationTime,
                 });
             }
             else
             {
+                var info = new FileInfo(entry);
+
                 Entries.Add(new FileManagerFile
                 {
                     Path = entry,
-                    Name = System.IO.Path.GetFileNameWithoutExtension(entry)
+                    Name = System.IO.Path.GetFileName(entry),
+                    ModifiedOn = info.LastWriteTime,
+                    CreatedOn = info.CreationTime,
+                    Size = info.Length
                 });
             }
         }
@@ -221,4 +307,9 @@
         if (Path.Parent != null)
             ChangeDirectory(Path.Parent, true);
     }
+
+    void NewFolder()
+    {
+        
+    }
 }

LANCommander/Components/FileManagerComponents/FileManagerEntry.cs

@@ -4,7 +4,7 @@
     {
         public string Name { get; set; }
         public string Path { get; set; }
-        public long Length { get; set; }
+        public long Size { get; set; }
         public FileManagerDirectory Parent { get; set; }
         public DateTime ModifiedOn { get; set; }
         public DateTime CreatedOn { get; set; }

LANCommander/Components/FileManagerComponents/FileManagerFile.cs

@@ -3,5 +3,74 @@
     public class FileManagerFile : FileManagerEntry
     {
         public string Extension => Name.Contains('.') ? Name.Split('.').Last() : Name;
+
+        public string GetIcon()
+        {
+            switch (Extension)
+            {
+                case "":
+                    return "folder";
+
+                case "exe":
+                    return "code";
+
+                case "zip":
+                case "rar":
+                case "7z":
+                case "gz":
+                case "tar":
+                    return "file-zip";
+
+                case "wad":
+                case "pk3":
+                case "pak":
+                case "cab":
+                    return "file-zip";
+
+                case "txt":
+                case "cfg":
+                case "config":
+                case "ini":
+                case "yml":
+                case "yaml":
+                case "log":
+                case "doc":
+                case "nfo":
+                    return "file-text";
+
+                case "bat":
+                case "ps1":
+                case "json":
+                    return "code";
+
+                case "bik":
+                case "avi":
+                case "mov":
+                case "mp4":
+                case "m4v":
+                case "mkv":
+                case "wmv":
+                case "mpg":
+                case "mpeg":
+                case "flv":
+                    return "video-camera";
+
+                case "dll":
+                    return "api";
+
+                case "hlp":
+                    return "file-unknown";
+
+                case "png":
+                case "bmp":
+                case "jpeg":
+                case "jpg":
+                case "gif":
+                    return "file-image";
+
+                default:
+                    return "file";
+            }
+        }
     }
 }

LANCommander/Components/FileManagerComponents/IFileManagerEntry.cs

@@ -4,7 +4,7 @@
     {
         public string Name { get; set; }
         public string Path { get; set; }
-        public long Length { get; set; }
+        public long Size { get; set; }
         public FileManagerDirectory Parent { get; set; }
         public DateTime ModifiedOn { get; set; }
         public DateTime CreatedOn { get; set; }

LANCommander/wwwroot/css/site.css

@@ -70,6 +70,72 @@
     right: 16px;
 }
 
+.file-manager {
+    background: #fff;
+}
+
+.file-manager-nav {
+    border-bottom: 1px solid #f0f0f0;
+    padding-left: 8px;
+    padding-right: 8px;
+    height: 58px;
+}
+
+.file-manager-nav .ant-space {
+    flex-grow: 1;
+}
+
+.file-manager-nav-breadcrumbs {
+    flex-grow: 1;
+}
+
+.file-manager-nav .ant-breadcrumb {
+    font-size: 16px;
+    padding: 8px;
+    background: rgba(0, 0, 0, 0.018);
+}
+
+.file-manager-nav .ant-breadcrumb-link {
+    border-radius: 2px;
+    border: 1px solid transparent;
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+.file-manager-nav .ant-breadcrumb-link:hover,
+.file-manager-nav .ant-breadcrumb-link:active {
+    background: rgba(0, 0, 0, 0.018);
+}
+
+.file-manager .ant-tree-treenode {
+    padding-left: 4px;
+}
+
+.file-manager .ant-tree-treenode:hover,
+.file-manager .ant-tree-treenode:active {
+    background: rgba(0, 0, 0, 0.018);
+}
+
+.file-manager-tree {
+    padding-top: 8px;
+    border-right: 1px solid #f0f0f0;
+}
+
+.file-manager .ant-tree-node-content-wrapper {
+    flex-grow: 1;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.file-manager .ant-tree-node-content-wrapper:hover {
+    background: none;
+}
+
+.file-manager .ant-tree-switcher .ant-tree-switcher-icon {
+    vertical-align: middle;
+    margin-top: 4px;
+}
+
 @media screen and (min-width: 768px) {
     .mobile-menu {
         display: none;