Improve contacts import dialog box

UI/Templates/ContactsUI/UIxContactFoldersView.wox

@@ -94,7 +94,6 @@
                       <var:string label:value="Sharing..."/>
                     </md-button>
                   </md-menu-item>
-                  <md-menu-divider><!-- divider --></md-menu-divider>
                   <md-menu-item>
                     <md-button type="button" ng-click="app.showProperties(folder)">
                       <var:string label:value="Properties"/>
@@ -441,6 +440,40 @@
     <var:component className="UIxContactsUserRightsEditor" />
   </script>
 
+  <!-- modal for cards import -->
+  <script type="text/ng-template" id="UIxContactsImportDialog">
+    <md-dialog flex="40" flex-sm="100" label:aria-label="Import Cards">
+      <md-toolbar>
+        <div class="md-toolbar-tools">
+          <md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>
+          <div class="md-flex">
+            <div class="sg-md-title"><var:string label:value="Import Cards"/></div>
+          </div>
+          <md-button class="md-icon-button" ng-click="$CardsImportDialogController.close()">
+            <md-icon aria-label="Close dialog">close</md-icon>
+          </md-button>
+        </div>
+      </md-toolbar>
+      <md-dialog-content class="md-dialog-content">
+        <p><var:string label:value="Select a vCard or LDIF file."/></p>
+      </md-dialog-content>
+      <md-dialog-actions>
+        <md-progress-circular class="md-accent"
+                              md-mode="determinate"
+                              md-diameter="20px"
+                              ng-show="$CardsImportDialogController.uploader.isUploading"
+                              ng-value="$CardsImportDialogController.uploader.progress"><!-- progress --></md-progress-circular>
+        <label class="md-button" for="file-input" ng-hide="$CardsImportDialogController.uploader.isUploading">
+          <span><var:string label:value="Upload"/></span>
+        </label>
+        <input id="file-input" type="file" class="ng-hide"
+               nv-file-select="nv-file-select"
+               uploader="$CardsImportDialogController.uploader"/>
+        <!-- <md-button ng-disabled="uploader.queue.length == 0" ng-click="upload()"><var:string label:value="Upload"/></md-button> -->
+      </md-dialog-actions>
+    </md-dialog>
+  </script>
+
   <script type="text/ng-template" id="UIxContactViewTemplate">
     <var:component className="UIxContactViewTemplate" />
   </script>

UI/WebServerResources/js/Contacts/AddressBooksController.js

@@ -116,38 +116,9 @@
         targetEvent: $event,
         clickOutsideToClose: true,
         escapeToClose: true,
-        template: [
-          '<md-dialog flex="40" flex-sm="100" aria-label="' + l('Import Cards') + '">',
-          '  <md-toolbar class="sg-padded">',
-          '    <div class="md-toolbar-tools">',
-          '      <md-icon class="material-icons sg-icon-toolbar-bg">import_export</md-icon>',
-          '      <div class="md-flex">',
-          '        <div class="sg-md-title">' + l('Import Cards') + '</div>',
-          '      </div>',
-          '      <md-button class="md-icon-button" ng-click="close()">',
-          '        <md-icon aria-label="Close dialog">close</md-icon>',
-          '      </md-button>',
-          '    </div>',
-          '  </md-toolbar>',
-          '  <md-dialog-content class="md-dialog-content">',
-          '    <div layout="column">',
-          '      <div layout="row" layout-align="start center">',
-          '        <span>' + l('Select a vCard or LDIF file.') + '</span>',
-          '        <label class="md-button" for="file-input">',
-          '          <span>' + l('Choose File') + '</span>',
-          '        </label>',
-          '        <input id="file-input" type="file" nv-file-select="nv-file-select" uploader="uploader" ng-show="false"/>',
-          '      </div>',
-          '      <span ng-show="uploader.queue.length == 0">' + l('No file chosen') + '</span>',
-          '      <span ng-show="uploader.queue.length > 0">{{ uploader.queue[0].file.name }}</span>',
-          '    </div>',
-          '  </md-dialog-content>',
-          '  <div class="md-actions">',
-          '    <md-button ng-disabled="uploader.queue.length == 0" ng-click="upload()">' + l('Upload') + '</md-button>',
-          '  </div>',
-          '</md-dialog>'
-        ].join(''),
+        templateUrl: 'UIxContactsImportDialog',
         controller: CardsImportDialogController,
+        controllerAs: '$CardsImportDialogController',
         locals: {
           folder: folder
         }
@@ -158,36 +129,67 @@
        */
       CardsImportDialogController.$inject = ['scope', '$mdDialog', 'folder'];
       function CardsImportDialogController(scope, $mdDialog, folder) {
+        var vm = this;
 
-        scope.uploader = new FileUploader({
-          url: ApplicationBaseURL + '/' + folder.id + '/import',
-          onProgressItem: function(item, progress) {
-            console.debug(item); console.debug(progress);
-          },
+        vm.uploader = new FileUploader({
+          url: ApplicationBaseURL + [folder.id, 'import'].join('/'),
+          autoUpload: true,
+          queueLimit: 1,
+          filters: [{ name: filterByExtension, fn: filterByExtension }],
           onSuccessItem: function(item, response, status, headers) {
-            console.debug(item); console.debug('success = ' + JSON.stringify(response, undefined, 2));
+            var msg;
+
             $mdDialog.hide();
+
+            if (response.imported === 0)
+              msg = l('No card was imported.');
+            else {
+              msg = l('A total of %{0} cards were imported in the addressbook.', response.imported);
+              AddressBook.selectedFolder.$reload();
+            }
+
             $mdToast.show(
               $mdToast.simple()
-                .content(l('A total of %{0} cards were imported in the addressbook.', response.imported))
+                .content(msg)
                 .position('top right')
                 .hideDelay(3000));
-            AddressBook.selectedFolder.$reload();
-          },
-          onCancelItem: function(item, response, status, headers) {
-            console.debug(item); console.debug('cancel = ' + JSON.stringify(response, undefined, 2));
           },
           onErrorItem: function(item, response, status, headers) {
-            console.debug(item); console.debug('error = ' + JSON.stringify(response, undefined, 2));
+            $mdToast.show({
+              template: [
+                '<md-toast>',
+                '  <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
+                '  <span>' + l('An error occured while importing contacts.') + '</span>',
+                '</md-toast>'
+              ].join(''),
+              position: 'top right',
+              hideDelay: 3000
+            });
           }
         });
 
-        scope.close = function() {
+        vm.close = function() {
           $mdDialog.hide();
         };
-        scope.upload = function() {
-          scope.uploader.uploadAll();
-        };
+
+        function filterByExtension(item) {
+          var isTextFile = item.type.indexOf('text') === 0 ||
+              /\.(ldif|vcf|vcard)$/.test(item.name);
+
+          if (!isTextFile)
+            $mdToast.show({
+              template: [
+                '<md-toast>',
+                '  <md-icon class="md-warn md-hue-1">error_outline</md-icon>',
+                '  <span>' + l('Select a vCard or LDIF file.') + '</span>',
+                '</md-toast>'
+              ].join(''),
+              position: 'top right',
+              hideDelay: 3000
+            });
+
+          return isTextFile;
+        }
       }
     }
 

UI/WebServerResources/scss/components/toast/toast.scss

@@ -1 +1,7 @@
-@import 'extends';
+@import 'extends';
+
+md-toast {
+  > md-icon {
+    margin-right: 12px;
+  }
+}