Merge pull request #2976 from FinnStutzenstein/templateFixes

Update mediafile form

openslides/core/static/js/core/site.js

@@ -633,6 +633,11 @@ angular.module('OpenSlidesApp.core.site', [
                 noFormControl: false
             }
         });
+        formlyConfig.setType({
+            name: 'file',
+            extends: 'input',
+            templateUrl: 'static/templates/core/file.html',
+        });
     }
 ])
 

openslides/core/static/templates/core/file.html

@@ -0,0 +1,2 @@
+<!-- custom angular formly template for uploading a file -->
+<input type="file" ngf-select ngf-change="to.change(model, $files, $event, $rejectedFiles)" class="form-control">

openslides/core/static/templates/search.html

@@ -13,8 +13,9 @@
   </form>
 
   <div class="searchfilter spacer-top">
-    <label ng-repeat="filter in results | orderBy: 'weight'" class="checkbox-inline">
+    <label ng-repeat="filter in results | orderBy: 'weight'" class="checkbox-inline"
-      <input type="checkbox" ng-model="filter.checked">
+      ng-click="filter.checked = !filter.checked">
+      <i class="fa" ng-class="filter.checked ? 'fa-check-square-o' : 'fa-square-o'"></i>
       {{ filter.verboseName | translate }}
     </label>
   </div>

openslides/mediafiles/static/js/mediafiles/create.js

@@ -4,33 +4,44 @@
 
 angular.module('OpenSlidesApp.mediafiles.create', [
     'OpenSlidesApp.mediafiles.forms',
-    //TODO: Add deps for User
 ])
 
 .controller('MediafileCreateCtrl', [
     '$scope',
-    'User',
     'MediafileForm',
-    function ($scope, User, MediafileForm) {
+    function ($scope, MediafileForm) {
-        User.bindAll({}, $scope, 'users');
+        $scope.model = {};
-        $scope.mediafile = {};
         $scope.alert = {};
-        $scope.users = User.getAll();
+        $scope.formFields = MediafileForm.getFormFields(true);
 
         // upload and save mediafile
         $scope.save = function (mediafile) {
-            MediafileForm.uploadFile(mediafile).then(
+            if (typeof mediafile.getFile === 'function') {
+                $scope.activeUpload = MediafileForm.uploadFile(mediafile).then(
                     function (success) {
                         $scope.closeThisDialog();
                     },
                     function (error) {
+                        $scope.activeUpload = void 0;
                         var message = '';
                         for (var e in error.data) {
                             message += e + ': ' + error.data[e] + ' ';
                         }
                         $scope.alert = {type: 'danger', msg: message, show: true};
+                    },
+                    function (progress) {
+                        $scope.progress = parseInt(100.0 * progress.loaded / progress.total);
                     }
                 );
+            }
+        };
+        $scope.close = function () {
+            // TODO: abort() is not a function. But it is documented in the docs.
+            // See https://github.com/danialfarid/ng-file-upload/issues/1844
+            /*if ($scope.activeUpload) {
+                $scope.activeUpload.abort();
+            }*/
+            $scope.closeThisDialog();
         };
     }
 ]);

openslides/mediafiles/static/js/mediafiles/forms.js

@@ -12,33 +12,29 @@ angular.module('OpenSlidesApp.mediafiles.forms', [
 // Service for mediafile form
 .factory('MediafileForm', [
     'gettextCatalog',
-    '$state',
     'Upload',
     'operator',
     'User',
-    function (gettextCatalog, $state, Upload, operator, User) {
+    function (gettextCatalog, Upload, operator, User) {
         return {
             // ngDialog for mediafile form
             getDialog: function (mediafile) {
-                var resolve;
-                if (mediafile) {
-                    resolve = {
-                        mediafile: function(Assignment) {return mediafile;}
-                    };
-                }
                 return {
                     template: 'static/templates/mediafiles/mediafile-form.html',
                     controller: (mediafile) ? 'MediafileUpdateCtrl' : 'MediafileCreateCtrl',
                     className: 'ngdialog-theme-default wide-form',
                     closeByEscape: false,
                     closeByDocument: false,
-                    resolve: (resolve) ? resolve : null
+                    resolve: {
+                        mediafileId: function () {return mediafile ? mediafile.id : void 0;}
+                    },
                 };
             },
             // upload selected file (used by create view only)
             uploadFile: function (mediafile) {
+                var file = mediafile.getFile();
                 if (!mediafile.title) {
-                    mediafile.title = mediafile.newFile.name;
+                    mediafile.title = file.name;
                 }
                 if (!mediafile.uploader_id) {
                     mediafile.uploader_id = operator.user.id;
@@ -46,8 +42,56 @@ angular.module('OpenSlidesApp.mediafiles.forms', [
                 return Upload.upload({
                     url: '/rest/mediafiles/mediafile/',
                     method: 'POST',
-                    data: {mediafile: mediafile.newFile, title: mediafile.title, uploader_id: mediafile.uploader_id, hidden: mediafile.hidden}
+                    data: {mediafile: file, title: mediafile.title, uploader_id: mediafile.uploader_id, hidden: mediafile.hidden}
                 });
+            },
+            getFormFields: function (isCreateForm) {
+                return [
+                    {
+                        key: 'newFile',
+                        type: 'file',
+                        templateOptions: {
+                            label: gettextCatalog.getString('File'),
+                            required: true,
+                            change: function (model, files, event, rejectedFiles) {
+                                var file = files ? files[0] : void 0;
+                                model.getFile = function () {
+                                    return file;
+                                };
+                                model.newFile = file ? file.name : void 0;
+                            },
+                        },
+                        hide: !isCreateForm,
+                    },
+                    {
+                        key: 'title',
+                        type: 'input',
+                        templateOptions: {
+                            label: gettextCatalog.getString('Title'),
+                        },
+                    },
+                    {
+                        key: 'hidden',
+                        type: 'checkbox',
+                        templateOptions: {
+                            label: gettextCatalog.getString('Hidden'),
+                            description: gettextCatalog.getString('This does not protect the ' +
+                                'file but hides it for non authorized users.'),
+                        },
+                        hide: !operator.hasPerms('mediafiles.can_see_hidden'),
+                    },
+                    {
+                        key: 'uploader_id',
+                        type: 'select-single',
+                        templateOptions: {
+                            label: gettextCatalog.getString('Uploader'),
+                            options: User.getAll(),
+                            ngOptions: 'option.id as option.full_name for option in to.options',
+                            placeholder: gettextCatalog.getString('Select or search a participant ...')
+                        },
+                        hide: !operator.hasPerms('mediafiles.can_manage')
+                    },
+                ];
 
             }
         };

openslides/mediafiles/static/js/mediafiles/update.js

@@ -12,15 +12,15 @@ angular.module('OpenSlidesApp.mediafiles.update', [
     'operator',
     'User',
     'Mediafile',
-    'mediafile',
+    'mediafileId',
-    function ($scope, operator, User, Mediafile, mediafile) {
+    'MediafileForm',
-        User.bindAll({}, $scope, 'users');
+    function ($scope, operator, User, Mediafile, mediafileId, MediafileForm) {
         $scope.alert = {};
-        $scope.users = User.getAll();
+        $scope.formFields = MediafileForm.getFormFields();
 
         // set initial values for form model by create deep copy of motion object
         // so list/detail view is not updated while editing
-        $scope.mediafile = angular.copy(mediafile);
+        $scope.model = angular.copy(Mediafile.get(mediafileId));
 
         // save mediafile
         $scope.save = function (mediafile) {

openslides/mediafiles/static/templates/mediafiles/mediafile-form.html

@@ -1,59 +1,24 @@
-<h1 ng-if="mediafile.id" translate>Edit file</h1>
+<h1 ng-if="model.id" translate>Edit file</h1>
-<h1 ng-if="!mediafile.id" translate>New file</h1>
+<h1 ng-if="!model.id" translate>New file</h1>
 
-<div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" ng-click="alert={}" close="alert={}">
+<div uib-alert ng-show="alert.show" ng-class="'alert-' + (alert.type || 'warning')" close="alert={}">
   {{ alert.msg }}
 </div>
 
-<form name="mediafileForm" ng-submit="save(mediafile)">
+<form name="mediafileForm" ng-submit="save(model)" novalidate>
-  <!-- file -->
+  <formly-form model="model" fields="formFields">
-  <div class="form-group">
+    <i ng-if="model.file.$error.maxSize">File too large
-    <label for="inputTitle"><translate>File</translate>*</label>
-    <!-- create view: show file select field -->
-    <input ng-if="!mediafile.id" type="file" ngf-select ng-model="mediafile.newFile" required>
-    <!-- update view: show filename only -->
-    <div ng-if="mediafile.id">{{ mediafile.filename }}</div>
-  </div>
-
-  <!-- title -->
-  <div class="form-group">
-    <label for="inputTitle" translate>Title</label>
-    <input type="text" ng-model="mediafile.title" class="form-control" name="inputTitle">
-  </div>
-
-  <!-- hidden -->
-  <div class="checkbox" os-perms="mediafiles.can_see_hidden">
-    <label>
-      <input class="formly-field-chackbox" type="checkbox" ng-model="mediafile.hidden" name="inputHidden">
-      <translate>Hidden</translate>
-    </label>
-    <p class="help-block" translate>
-      This does not protect the file but hides it for non authorized users.
-    </p>
-  </div>
-
-  <!-- uploader -->
-  <div os-perms="mediafiles.can_manage" class="form-group">
-    <label for="inputTitle" translate>Uploaded by</label>
-    <select chosen
-        ng-model="mediafile.uploader_id"
-        ng-options="user.id as user.get_full_name() for user in users"
-        allow-single-deselect="true"
-        search-contains="true"
-        placeholder-text-single="'Select or search a participant ...' | translate"
-        no-results-text="'No results available ...' | translate"
-        class="form-control">
-      <option value=""></option>
-    <select>
-  </div>
-
-  <i ng-if="mediafile.file.$error.maxSize">File too large
       {{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
 
-  <button type="submit" ng-disabled="mediafileForm.$invalid" class="btn btn-primary" translate>
+    <uib-progressbar ng-if="activeUpload" value="progress" animate="false">
+      <span class="nobr">{{ progress }}%</span>
+    </uib-progressbar>
+
+    <button type="submit" ng-disabled="mediafileForm.$invalid || activeUpload" class="btn btn-primary" translate>
       Save
     </button>
-  <button type="button" ng-click="closeThisDialog()" class="btn btn-default" translate>
+    <button type="button" ng-click="close()" class="btn btn-default" translate>
       Cancel
     </button>
+  </formly-form>
 </form>