Test/upload test

package.json

@@ -39,7 +39,6 @@
     "angular": "^1.5.0",
     "angular-animate": "^1.5.0",
     "angular-aria": "^1.5.0",
-    "angular-breadcrumb": "^0.4.1",
     "angular-material": "^1.0.5",
     "angular-messages": "^1.5.0",
     "angular-translate": "^2.9.2",
@@ -49,6 +48,7 @@
     "javascript-natural-sort": "^0.7.1",
     "lodash": "^4.5.1",
     "material-design-icons": "^2.2.0",
+    "ng-file-upload": "^12.0.4",
     "satellizer": "^0.14.0"
   },
   "devDependencies": {

src/components/bucket/bucket.controller.js

@@ -1,19 +1,24 @@
 export default class BucketController {
   /** @ngInject */
-  constructor($scope, $bucket) {
+  constructor($scope, $bucket, $state, $breadcrumb) {
     Object.assign(this, {
-      $scope, $bucket,
+      $scope, $bucket, $state,
     });
 
     this.$scope.$watch(
       () => $bucket.state.lists,
       newVal => Object.assign(this, newVal)
     , true);
 
+    $breadcrumb.initPaths();
     this.$bucket.getBuckets();
   }
 
   createBucket($event) {
     this.$bucket.createDialog($event);
   }
+
+  selectBucket(bucket) {
+    this.$state.go('file', { path: bucket });
+  }
 }

src/components/bucket/bucket.html

@@ -12,14 +12,13 @@
       </thead>
 
       <tbody>
-        <tr ng-repeat="bucket in bucket.data" ng-class="{active:@A.3}">
+        <tr ng-repeat="b in bucket.data" ng-class="{active:@A.3}">
           <td>
             <a ng-click="@A.4">
               <md-icon>info_outline</md-icon>
             </a>
           </td>
-          <td ng-bind="bucket.Name">
-            <a ng-click="@A.11"></a>
+          <td ng-bind="b.Name" ng-click="bucket.selectBucket(b.Name)">
           </td>
         </tr>
       </tbody>

src/components/bucket/bucket.js

@@ -14,9 +14,6 @@ const route = $stateProvider => {
     controllerAs: 'bucket',
     template: BucketTemplate,
     onEnter: $nav => $nav.setTypeToBucket(),
-    ncyBreadcrumb: {
-      label: 'All Buckets ( {{ bucket.data.length }} )',
-    },
   });
 };
 

src/components/bucket/bucket.service.js

@@ -1,13 +1,13 @@
 import { element } from 'angular';
-import natural from 'javascript-natural-sort';
+import { sortByName } from '../../utils/sort';
 import BucketCreateController from './create/create.controller';
 import BucketCreateTemplate from './create/create.html';
 
 export default class BucketService {
   /** @ngInject */
-  constructor($fetch, $toast, $mdDialog) {
+  constructor($fetch, $toast, $mdDialog, $breadcrumb) {
     Object.assign(this, {
-      $fetch, $toast, $mdDialog,
+      $fetch, $toast, $mdDialog, $breadcrumb,
     });
 
     this.initState();
@@ -73,20 +73,6 @@ export default class BucketService {
     this.resetCheckBucketState();
   }
 
-  /**
-   * Natural sort for the specified object key.
-   *
-   * @param  {Object} a
-   * @param  {Object} b
-   * @return {Integer}
-   */
-  sortByName(a, b) {
-    const x = a.Name;
-    const y = b.Name;
-
-    return natural(x, y);
-  }
-
   /**
    * Call the bucket list API and modify the state of service.
    *
@@ -99,13 +85,14 @@ export default class BucketService {
     this.$fetch.post('/v1/bucket/list')
       .then(({ data }) => {
         this.state.lists.error = false;
-        this.state.lists.data = data.Buckets.sort(this.sortByName);
+        this.state.lists.data = data.Buckets.sort(sortByName);
       })
       .catch(() => {
         this.state.lists.error = true;
       })
       .finally(() => {
         this.state.lists.requesting = false;
+        this.$breadcrumb.updateBucketPath(this.state.lists.data.length);
       });
   }
 
@@ -140,7 +127,7 @@ export default class BucketService {
   createBucket(bucket) {
     this.$fetch.post('/v1/bucket/create', { bucket })
       .then(({ data }) => {
-        this.state.lists.data = data.Buckets.sort(this.sortByName);
+        this.state.lists.data = data.Buckets.sort(sortByName);
         this.$toast.show(`Bucket ${bucket} has created!`);
       })
       .catch(() => {

src/components/file/file.controller.js

@@ -0,0 +1,34 @@
+export default class FileController {
+  /** @ngInject */
+  constructor($scope, $stateParams, $file, $bucket, $breadcrumb, $upload) {
+    Object.assign(this, {
+      $file, $upload, $bucket, $breadcrumb,
+    });
+
+    $scope.$watch(
+      () => $file.state.lists,
+      newVal => Object.assign(this, newVal)
+    , true);
+
+    const paths = $stateParams.path.split('/');
+    const [bucket, ...folders] = paths;
+
+    this.$file.setPaths(bucket, folders);
+    this.$breadcrumb.updateFilePath(paths);
+
+    this.$bucket.getBuckets();
+    this.$file.getFiles();
+  }
+
+  createFolder($event) {
+    this.$file.createFolder($event);
+  }
+
+  upload($event) {
+    this.$upload.createDialog($event);
+  }
+
+  refresh() {
+    this.$file.getFiles();
+  }
+}

src/components/file/file.css

@@ -0,0 +1,24 @@
+
+/**
+ * @author Jamie jamie.h@inwinstack.com
+ */
+
+.checkbox-icon-width {
+  width: 80px;
+}
+
+.storage-class-width {
+  width: 140px;
+}
+
+.size-width {
+  width: 84px;
+}
+
+.time-width {
+  width: 270px;
+}
+
+.time-title-width {
+  width: 286px;
+}

src/components/file/file.html

@@ -0,0 +1,99 @@
+<md-content layout-padding>
+  <div
+    class="md-whiteframe-4dp"
+    ng-if="file.data.length && ! file.requesting && ! file.error"
+  >
+    <table class="table table-cursor table-hover">
+      <thead>
+        <tr>
+          <th class="checkbox-icon-width"></th>
+          <th>Name</th>
+          <th class="hide show-gt-sm storage-class-width">Storage Class</th>
+          <th class="size-width">Size</th>
+          <th class="hide show-gt-sm time-title-width">Last Modified</th>
+        </tr>
+      </thead>
+    </table>
+    <md-list>
+      <md-list-item ng-class="{checked:message.selected}" ng-repeat="f in file.data">
+          <md-checkbox ng-model="message.selected"></md-checkbox>
+          <md-icon>insert_drive_file</md-icon>
+          <p class="break-word flex-grow">
+            <span ng-bind="f.Key"></span>
+          </p>
+          <p class="flex-none" hide show-gt-sm>
+            <span
+              class="storage-class-width inline-block"
+              ng-bind="f.StorageClass"
+            ></span>
+          </p>
+          <p class="flex-none">
+            <span
+              class="size-width inline-block"
+              ng-bind="(f.Size | filesize)"
+            ></span>
+          </p>
+          <p class="flex-none" hide show-gt-sm>
+            <span
+              class="time-width inline-block"
+              ng-bind="(f.LastModified | date: 'yyyy-MM-dd')"
+            ></span>
+          </p>
+      </md-list-item>
+    </md-list>
+  </div>
+
+  <div
+    class="progress-state"
+    layout="column" layout-align="center center"
+    ng-if="file.requesting"
+  >
+    <md-progress-circular md-mode="indeterminate" md-diameter="70"></md-progress-circular>
+    <div class="md-headline">Loading...</div>
+  </div>
+
+  <div
+    class="empty-state"
+    layout="column" layout-align="center center"
+    ng-if="! file.data.length && ! file.requesting && ! file.error"
+  >
+    <div class="md-headline">This bucket is empty</div>
+    <div class="md-subhead">You can do the following actions</div>
+
+    <div layout="row" layout-align="center center">
+      <md-button
+        class="md-raised md-primary" aria-label="Upload File"
+        ng-click="file.upload()"
+      >
+        <md-icon>file_upload</md-icon>
+        <span>Upload File</span>
+      </md-button>
+
+      <span>or</span>
+
+      <md-button
+        class="md-raised" aria-label="Create Folder"
+        ng-click="file.createFolder()"
+      >
+        <md-icon class="material-icons">create_new_folder</md-icon>
+        <span>Create Folder</span>
+      </md-button>
+    </div>
+  </div>
+
+  <div
+    class="load-fail-state"
+    layout="column" layout-align="center center"
+    ng-if="file.error && ! file.requesting"
+  >
+    <div class="md-headline">Oops, your connection seems off...</div>
+    <div class="md-subhead">Don't worry. You can refresh to try again.</div>
+
+    <md-button
+      class="md-icon-button" aria-label="Refresh"
+      ng-click="file.refresh()"
+    >
+      <md-icon class="icon-default">refresh</md-icon>
+    </md-button>
+  </div>
+</md-content>

src/components/file/file.js

@@ -0,0 +1,29 @@
+import { module } from 'angular';
+import router from 'angular-ui-router';
+
+import FileController from './file.controller';
+import FileService from './file.service';
+import FileTemplate from './file.html';
+import UploadService from './upload/upload.servce';
+import './file.css';
+
+/** @ngInject */
+const route = $stateProvider => {
+  $stateProvider.state('file', {
+    url: '/bucket/*path',
+    parent: 'root',
+    controller: FileController,
+    controllerAs: 'file',
+    template: FileTemplate,
+    onEnter: $nav => $nav.setTypeToFile(),
+  });
+};
+
+const File = module('file', [
+  router,
+])
+.service('$file', FileService)
+.service('$upload', UploadService)
+.config(route);
+
+export default File.name;

src/components/file/file.service.js

@@ -0,0 +1,49 @@
+export default class FileService {
+  /** @ngInject */
+  constructor($mdDialog, $fetch, $bucket) {
+    Object.assign(this, {
+      $mdDialog, $fetch, $bucket,
+    });
+
+    this.initState();
+  }
+
+  initState() {
+    this.state = {
+      paths: {
+        bucket: '',
+        folders: [],
+      },
+      lists: {
+        data: [],
+        requesting: false,
+        error: false,
+      },
+    };
+  }
+
+  setPaths(bucket, folders) {
+    this.paths = { bucket, folders };
+  }
+
+  getFiles() {
+    const { bucket, folders } = this.paths;
+    const endpoint = `/v1/file/list/${bucket}?prefix=${folders.join('/')}`;
+
+    this.state.lists.requesting = true;
+    this.state.lists.data = [];
+
+    this.$fetch
+      .get(endpoint)
+      .then(({ data }) => {
+        this.state.lists.error = false;
+        this.state.lists.data = data.files || [];
+      })
+      .catch(() => {
+        this.state.lists.error = true;
+      })
+      .finally(() => {
+        this.state.lists.requesting = false;
+      });
+  }
+}