Merge pull request #2976 from FinnStutzenstein/templateFixes
Update mediafile form
This commit is contained in:
Emanuel Schütze
GitHub
commit
9a1e45682c
@ -611,27 +611,32 @@ angular.module('OpenSlidesApp.core.site', [
|
||||
|
||||
// Configure custom types
|
||||
formlyConfig.setType({
|
||||
name: 'editor',
|
||||
extends: 'textarea',
|
||||
templateUrl: 'static/templates/core/editor.html',
|
||||
name: 'editor',
|
||||
extends: 'textarea',
|
||||
templateUrl: 'static/templates/core/editor.html',
|
||||
});
|
||||
formlyConfig.setType({
|
||||
name: 'select-single',
|
||||
extends: 'select',
|
||||
templateUrl: 'static/templates/core/select-single.html'
|
||||
name: 'select-single',
|
||||
extends: 'select',
|
||||
templateUrl: 'static/templates/core/select-single.html'
|
||||
});
|
||||
formlyConfig.setType({
|
||||
name: 'select-multiple',
|
||||
extends: 'select',
|
||||
templateUrl: 'static/templates/core/select-multiple.html'
|
||||
name: 'select-multiple',
|
||||
extends: 'select',
|
||||
templateUrl: 'static/templates/core/select-multiple.html'
|
||||
});
|
||||
formlyConfig.setType({
|
||||
name: 'radio-buttons',
|
||||
templateUrl: 'static/templates/core/radio-buttons.html',
|
||||
wrapper: ['bootstrapHasError'],
|
||||
defaultOptions: {
|
||||
noFormControl: false
|
||||
}
|
||||
name: 'radio-buttons',
|
||||
templateUrl: 'static/templates/core/radio-buttons.html',
|
||||
wrapper: ['bootstrapHasError'],
|
||||
defaultOptions: {
|
||||
noFormControl: false
|
||||
}
|
||||
});
|
||||
formlyConfig.setType({
|
||||
name: 'file',
|
||||
extends: 'input',
|
||||
templateUrl: 'static/templates/core/file.html',
|
||||
});
|
||||
}
|
||||
])
|
||||
|
||||
2
openslides/core/static/templates/core/file.html
Normal file
2
openslides/core/static/templates/core/file.html
Normal file
@ -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">
|
||||
@ -13,8 +13,9 @@
|
||||
</form>
|
||||
|
||||
<div class="searchfilter spacer-top">
|
||||
<label ng-repeat="filter in results | orderBy: 'weight'" class="checkbox-inline">
|
||||
<input type="checkbox" ng-model="filter.checked">
|
||||
<label ng-repeat="filter in results | orderBy: 'weight'" class="checkbox-inline"
|
||||
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>
|
||||
|
||||
@ -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) {
|
||||
User.bindAll({}, $scope, 'users');
|
||||
$scope.mediafile = {};
|
||||
function ($scope, MediafileForm) {
|
||||
$scope.model = {};
|
||||
$scope.alert = {};
|
||||
$scope.users = User.getAll();
|
||||
$scope.formFields = MediafileForm.getFormFields(true);
|
||||
|
||||
// upload and save mediafile
|
||||
$scope.save = function (mediafile) {
|
||||
MediafileForm.uploadFile(mediafile).then(
|
||||
function (success) {
|
||||
$scope.closeThisDialog();
|
||||
},
|
||||
function (error) {
|
||||
var message = '';
|
||||
for (var e in error.data) {
|
||||
message += e + ': ' + error.data[e] + ' ';
|
||||
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.alert = {type: 'danger', msg: message, show: true};
|
||||
}
|
||||
);
|
||||
);
|
||||
}
|
||||
};
|
||||
$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();
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
||||
@ -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')
|
||||
},
|
||||
];
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
@ -12,15 +12,15 @@ angular.module('OpenSlidesApp.mediafiles.update', [
|
||||
'operator',
|
||||
'User',
|
||||
'Mediafile',
|
||||
'mediafile',
|
||||
function ($scope, operator, User, Mediafile, mediafile) {
|
||||
User.bindAll({}, $scope, 'users');
|
||||
'mediafileId',
|
||||
'MediafileForm',
|
||||
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) {
|
||||
|
||||
@ -1,59 +1,24 @@
|
||||
<h1 ng-if="mediafile.id" translate>Edit file</h1>
|
||||
<h1 ng-if="!mediafile.id" translate>New file</h1>
|
||||
<h1 ng-if="model.id" translate>Edit 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)">
|
||||
<!-- file -->
|
||||
<div class="form-group">
|
||||
<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>
|
||||
<form name="mediafileForm" ng-submit="save(model)" novalidate>
|
||||
<formly-form model="model" fields="formFields">
|
||||
<i ng-if="model.file.$error.maxSize">File too large
|
||||
{{ picFile.size / 1000000|number:1}}MB: max {{ mediafile.mediafile.$errorParam}}</i>
|
||||
|
||||
<!-- title -->
|
||||
<div class="form-group">
|
||||
<label for="inputTitle" translate>Title</label>
|
||||
<input type="text" ng-model="mediafile.title" class="form-control" name="inputTitle">
|
||||
</div>
|
||||
<uib-progressbar ng-if="activeUpload" value="progress" animate="false">
|
||||
<span class="nobr">{{ progress }}%</span>
|
||||
</uib-progressbar>
|
||||
|
||||
<!-- 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>
|
||||
Save
|
||||
</button>
|
||||
<button type="button" ng-click="closeThisDialog()" class="btn btn-default" translate>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" ng-disabled="mediafileForm.$invalid || activeUpload" class="btn btn-primary" translate>
|
||||
Save
|
||||
</button>
|
||||
<button type="button" ng-click="close()" class="btn btn-default" translate>
|
||||
Cancel
|
||||
</button>
|
||||
</formly-form>
|
||||
</form>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user