@annybs Here are details on what is still outstanding, and notes on anything I think may not be immediately obvious.
File explorer:
The UI functionality is all in place, however it is still using dummy data. There are a few API calls that need to be hooked up, and all the dummy stuff can be found in account-utils/files.
A few notes onpath, which may not be entirely clear and could be a bit different to how API works.
The path refers to the directory that the user is currently viewing. So for example, if an API call to rename a file is made, it will require the path and the filename (and new filename). For the file /some/dir/name/file.txt, the path is /some/dir/name and the filename is file.txt. The path never refers to the full /some/dir/name/file.txt.
Also, in FileExplorer.vue there are two data values used; path and displayPath. When a user changes directory (through breadcrumbs, clicking on the dir name, back button, etc) the path will update. This will then trigger a new getFiles(path) call. When that call completes successfully, displayPath will be updated. This will then update the UI with the new path name/files/etc. If an API call or child component uses path, it actually refers to the displayPath.
API calls:
Upload file: this has been hooked up to GW and works well, however for now the response is just logged to console and the a copy of the file is added to the dummy data. This works by passing in the path and the file and the file is then uploaded to gateway.(test | edge).network/files/${path}/${file.name}. Hopefully you don't need to do much here other than remove the dummy data stuff.
Get files: when changing directory in the file explorer, getFiles() is called with the path. This, using dummy data, returns a list of all the sub-directories and files at the given path. The data structure is likely to change significantly which will have a few knock-on effects, but I will put details of this later
Create directory: this will create an empty directory within the current path directory.
Rename directory / Rename file: rename a directory/file within the current path directory. So if you wish to rename /data/images to data/img you will be in the explorer at path /data and will rename directory images to img
Delete directory / Delete file: similar to above; there is the path and the directory/file
NOTE that renaming/deleting a directory will also need to rename/delete all files within that directory.
NOTE on most changes (like rename/delete file/dir, changing dir, there is a call to updateFiles again to refresh the file explorer
Errors:
I have only done limited work with handling errors in the file explorer. If a file upload fails, it will display a /!\ icon with a tooltip stating it failed, and it can be reattempted, but other than that there is no user feedback if any of the other API calls fail.
Validations:
Similar to errors, there is nothing in terms of validations as I was waiting for clarification on what validations to implement.
File/dir data structure:
If you check out the fileTree array in /account-utils/files.js you will see how the data has been structured (this was something Adam suggested and I just went with).
Files and directories are both objects within the array of files, and they are distinguished in components such as FileExplorerItem.vue by checking item.directory or item.filename. I imagine this will change quite a bit as this structure really isn't very clean.
When the live data is returned from the API I imagine it will need:
directories
listed first, prior to files
in alphabetical order
include some flag whether the dir contains files or not (currently UI checks item.children.length)
files
listed after dirs
in alphabetical order (we may want to add sorting at some point)
include name, size, uploaded (created), last modified (updated) and anything else we may need
You may end up creating separate components for FileExplorerFile.vue and FileExplorerDir.vue, but for now they are combined into a single FileExplorerItem.vue which can handle both.
Drag/drop:
I had some difficulty getting this to work properly because the idea was to show the overlay when you drag a file into the explorer (or open manually), but as you dragged a file over it the overlay was flicking on and off. There is a dragCounter value in FileExplorer.vue which counts the number of dragenter minus number of dragexit. When this is zero, it means the user has actually dragged the item back out of the explorer and it can therefore close. If it's >=1, it means that the mouse is still within the explorer so the overlay shouldn't close.
Also, the drop only works in the actual drop zone (with --- border). you could change that if you want, but there are blank dragover.prevent="" and drop.prevent="" event handlers on the overlay component to prevent default behaviour (opening file) if dropped within the overlay but outside of the drop zone.
Hopefully you don't have to make any changes to this, but thought I'd point these points out for you as they may help you.
It's currently not possible to select duplicate files, by the way. A duplicate is defined by same filename and last modified date. Proper validations will need to be added by you at some point.
Moving files/dirs:
This isn't currently functionality that has been implemented. Adam said I could leave it for now. I was thinking it could be done with drag/drop or a manual modal, but the API call could just use renameFile() to change the path rather than the filename. It will need adapting slightly, but easily done.
Storage Integrations:
Basically all working as was a case of integrating the current integration endpoints. There are two main areas that need work.
Config
I have disabled Default and Custom Simple config as for now we are just using the json input, however the UI displays these options as disabled, making it appear that they will be available in future, like with CDN.
With the json config, you'll need to add validations when these have been determined. If you look in ConfigCustomAdvanced.vue there is a method validateConfig(config). This method is passed down to JsonEditor.vue to perform validations specific to storage. JsonEditor.vue will already handle json syntax validations by default. You can check out the equivalent component in CDN for comparison if needed.
Estimated Costs
I've put in a temporary cost value, but this will need updating with a value that comes from config. Again, see CDN for an example if needed.
@annybs Here are details on what is still outstanding, and notes on anything I think may not be immediately obvious.
File explorer: The UI functionality is all in place, however it is still using dummy data. There are a few API calls that need to be hooked up, and all the dummy stuff can be found in account-utils/files.
A few notes on
path, which may not be entirely clear and could be a bit different to how API works.The
pathrefers to the directory that the user is currently viewing. So for example, if an API call to rename a file is made, it will require thepathand thefilename(and new filename). For the file/some/dir/name/file.txt, thepathis/some/dir/nameand the filename isfile.txt. Thepathnever refers to the full/some/dir/name/file.txt.Also, in
FileExplorer.vuethere are two data values used;pathanddisplayPath. When a user changes directory (through breadcrumbs, clicking on the dir name, back button, etc) thepathwill update. This will then trigger a newgetFiles(path)call. When that call completes successfully,displayPathwill be updated. This will then update the UI with the new path name/files/etc. If an API call or child component usespath, it actually refers to thedisplayPath.API calls:
pathand thefileand the file is then uploaded togateway.(test | edge).network/files/${path}/${file.name}. Hopefully you don't need to do much here other than remove the dummy data stuff.getFiles()is called with thepath. This, using dummy data, returns a list of all the sub-directories and files at the given path. The data structure is likely to change significantly which will have a few knock-on effects, but I will put details of this laterpathdirectory.pathdirectory. So if you wish to rename/data/imagestodata/imgyou will be in the explorer at path/dataand will rename directoryimagestoimgpathand thedirectory/fileupdateFilesagain to refresh the file explorerErrors: I have only done limited work with handling errors in the file explorer. If a file upload fails, it will display a
/!\icon with a tooltip stating it failed, and it can be reattempted, but other than that there is no user feedback if any of the other API calls fail.Validations: Similar to errors, there is nothing in terms of validations as I was waiting for clarification on what validations to implement.
File/dir data structure: If you check out the
fileTreearray in /account-utils/files.js you will see how the data has been structured (this was something Adam suggested and I just went with).Files and directories are both objects within the array of files, and they are distinguished in components such as
FileExplorerItem.vueby checkingitem.directoryoritem.filename. I imagine this will change quite a bit as this structure really isn't very clean.When the live data is returned from the API I imagine it will need:
item.children.length)You may end up creating separate components for FileExplorerFile.vue and FileExplorerDir.vue, but for now they are combined into a single FileExplorerItem.vue which can handle both.
Drag/drop: I had some difficulty getting this to work properly because the idea was to show the overlay when you drag a file into the explorer (or open manually), but as you dragged a file over it the overlay was flicking on and off. There is a
dragCountervalue inFileExplorer.vuewhich counts the number of dragenter minus number of dragexit. When this is zero, it means the user has actually dragged the item back out of the explorer and it can therefore close. If it's >=1, it means that the mouse is still within the explorer so the overlay shouldn't close.Also, the drop only works in the actual drop zone (with --- border). you could change that if you want, but there are blank
dragover.prevent=""anddrop.prevent=""event handlers on the overlay component to prevent default behaviour (opening file) if dropped within the overlay but outside of the drop zone.Hopefully you don't have to make any changes to this, but thought I'd point these points out for you as they may help you. It's currently not possible to select duplicate files, by the way. A duplicate is defined by same filename and last modified date. Proper validations will need to be added by you at some point.
Moving files/dirs: This isn't currently functionality that has been implemented. Adam said I could leave it for now. I was thinking it could be done with drag/drop or a manual modal, but the API call could just use
renameFile()to change the path rather than the filename. It will need adapting slightly, but easily done.Storage Integrations: Basically all working as was a case of integrating the current
integrationendpoints. There are two main areas that need work.Config I have disabled Default and Custom Simple config as for now we are just using the json input, however the UI displays these options as disabled, making it appear that they will be available in future, like with CDN.
With the json config, you'll need to add validations when these have been determined. If you look in
ConfigCustomAdvanced.vuethere is a methodvalidateConfig(config). This method is passed down toJsonEditor.vueto perform validations specific to storage.JsonEditor.vuewill already handle json syntax validations by default. You can check out the equivalent component in CDN for comparison if needed.Estimated Costs I've put in a temporary cost value, but this will need updating with a value that comes from config. Again, see CDN for an example if needed.