Test/delete bucket

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,28 @@
 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);
   }
+
+  clickBucket(path) {
+    this.$state.go('file', { path });
+  }
+
+  selectBucket(name) {
+    this.$bucket.selectBucket(name);
+  }
 }

src/components/bucket/bucket.html

@@ -6,24 +6,30 @@
     <table class="table table-cursor table-hover">
       <thead>
         <tr>
-          <th style="width:24px;"></th>
+          <th style="width:48px;"></th>
           <th>Name</th>
         </tr>
       </thead>
-
-      <tbody>
-        <tr ng-repeat="bucket 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>
-        </tr>
-      </tbody>
     </table>
+
+    <md-list>
+      <md-list-item
+        aria-label="Bucket list item"
+        ng-class="{ checked: b.checked }"
+        ng-repeat="b in bucket.data"
+        ng-click="bucket.clickBucket(b.Name)"
+      >
+        <md-checkbox
+          aria-label="checkbox of bucket list item"
+          class="md-secondary"
+          ng-checked="b.checked"
+          ng-click="bucket.selectBucket(b.Name)"
+        ></md-checkbox>
+        <p class="break-word flex-grow">
+          <span ng-bind="b.Name"></span>
+        </p>
+      </md-list-item>
+    </md-list>
   </div>
 
   <div
@@ -67,4 +73,4 @@
       <md-icon class="icon-default">refresh</md-icon>
     </md-button>
   </div>
-</md-content>
+</md-content>

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,15 @@
 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';
+import BucketDeleteController from './delete/delete.controller';
+import BucketDeleteTemplate from './delete/delete.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();
@@ -30,6 +32,9 @@ export default class BucketService {
         checked: false,
         duplicated: false,
       },
+      delete: {
+        name: null,
+      }
     };
   }
 
@@ -63,6 +68,17 @@ export default class BucketService {
     });
   }
 
+  deleteDialog($event) {
+    this.$mdDialog.show({
+      controller: BucketDeleteController,
+      controllerAs: 'delete',
+      template: BucketDeleteTemplate,
+      parent: element(document.body),
+      targetEvent: $event,
+      clickOutsideToClose: true,
+    });
+  }
+
   /**
    * Close the dialog.
    *
@@ -73,18 +89,31 @@ 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;
+  selectBucket(name) {
+    const { data } = this.state.lists;
+    const index = data.findIndex(bucket => bucket.Name === name);
+    this.state.lists.data = data.map((bucket, id) => ({
+      ...bucket,
+      checked: (id === index) ? ! bucket.checked : false,
+    }));
+
+    this.state.delete.name = this.state.lists.data[index].checked ? data[index].Name : null;
+  }
 
-    return natural(x, y);
+  deleteBucket() {
+    const { name } = this.state.delete;
+    this.$fetch.delete(`/v1/bucket/delete/${name}`)
+      .then(() => {
+        this.state.delete.name = null;
+        this.$toast.show(`Bucket ${name} has been deleted!`);
+        this.getBuckets();
+      })
+      .catch(err => {
+        this.$toast.show(`Bucket ${name} delete failed, please try again!`);
+      })
+      .finally(() => {
+        this.closeDialog();
+      });
   }
 
   /**
@@ -99,13 +128,18 @@ 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);
+        const buckets = data.Buckets.map(bucket => ({
+          ...bucket,
+          checked: false,
+        }));
+        this.state.lists.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 +174,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(() => {