Merge pull request #2825 from FinnStutzenstein/CsvImports

New csv import for users and topics

CHANGELOG

@@ -36,6 +36,8 @@ Core:
 - Add a version of has_perm that can work with cached users.
 - Cache the group with there permissions.
 - Removed our db-session backend and added possibility to use any django session backend.
+- New csv import layout.
+- Replaced angular-csv-import through Papa Parse for csv parsing.
 
 Motions:
 - Added adjustable line numbering mode (outside, inside, none) for each
@@ -57,7 +59,6 @@ Motions:
 - New PDF layout.
 - Added DOCX export with docxtemplater.
 - Changed label of former state "commited a bill" to "refered to committee".
-- New csv import layout and using Papa Parse for parsing the csv.
 - Number of ballots printed can now be set in config.
 - Add new personal settings to remove all whitespaces from motion identifier.
 - Add new personal settings to allow amendments of amendments.

README.rst

@@ -192,7 +192,6 @@ OpenSlides uses the following projects or parts of them:
   * `angular-bootstrap-colorpicker <https://github.com/buberdds/angular-bootstrap-colorpicker>`_, License: MIT
   * `angular-chosen-localytics <http://github.com/leocaseiro/angular-chosen>`_, License: MIT
   * `angular-ckeditor <https://github.com/lemonde/angular-ckeditor/>`_, License: MIT
-  * `angular-csv-import <https://github.com/bahaaldine/angular-csv-import>`_, License: MIT
   * `angular-formly <http://formly-js.github.io/angular-formly/>`_, License: MIT
   * `angular-formly-templates-bootstrap <https://github.com/formly-js/angular-formly-templates-bootstrap>`_, License: MIT
   * `angular-gettext <http://angular-gettext.rocketeer.be/>`_, License: MIT

bower.json

@@ -9,7 +9,6 @@
     "angular-bootstrap-colorpicker": "~3.0.25",
     "angular-chosen-localytics": "~1.5.0",
     "angular-ckeditor": "~1.0.3",
-    "angular-csv-import": "0.0.36",
     "angular-file-saver": "~1.1.2",
     "angular-formly": "~8.4.0",
     "angular-formly-templates-bootstrap": "~6.2.0",

openslides/agenda/static/js/agenda/csv.js

@@ -6,10 +6,18 @@ angular.module('OpenSlidesApp.agenda.csv', [])
 
 .factory('AgendaCsvExport', [
     'HumanTimeConverter',
-    function (HumanTimeConverter) {
+    'gettextCatalog',
-        return function (element, agenda) {
+    function (HumanTimeConverter, gettextCatalog) {
+        var makeHeaderline = function () {
+            var headerline = ['Title', 'Text', 'Duration', 'Comment', 'Internal item'];
+            return _.map(headerline, function (entry) {
+                return gettextCatalog.getString(entry);
+            });
+        };
+        return {
+            export: function (element, agenda) {
                 var csvRows = [
-                ['title', 'text', 'duration', 'comment', 'is_hidden'],
+                    makeHeaderline()
                 ];
                 _.forEach(agenda, function (item) {
                     var row = [];
@@ -28,6 +36,7 @@ angular.module('OpenSlidesApp.agenda.csv', [])
                 element.href = 'data:text/csv;charset=utf-8,' + csvString;
                 element.download = 'agenda-export.csv';
                 element.target = '_blank';
+            },
         };
     }
 ]);

openslides/agenda/static/js/agenda/site.js

@@ -306,7 +306,7 @@ angular.module('OpenSlidesApp.agenda.site', [
         };
         $scope.csvExport = function () {
             var element = document.getElementById('downloadLinkCSV');
-            AgendaCsvExport(element, $scope.itemsFiltered);
+            AgendaCsvExport.export(element, $scope.itemsFiltered);
         };
 
         /** select mode functions **/

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

@@ -16,7 +16,6 @@ angular.module('OpenSlidesApp.core.site', [
     'ngDialog',
     'ngFileSaver',
     'ngMessages',
-    'ngCsvImport',
     'ngStorage',
     'ckeditor',
     'luegg.directives',

openslides/motions/static/js/motions/csv.js

@@ -5,10 +5,18 @@
 angular.module('OpenSlidesApp.motions.csv', [])
 
 .factory('MotionCsvExport', [
-    function () {
+    'gettextCatalog',
-        return function (element, motions) {
+    function (gettextCatalog) {
+        var makeHeaderline = function () {
+            var headerline = ['Identifier', 'Title', 'Text', 'Reason', 'Submitter', 'Category', 'Origin'];
+            return _.map(headerline, function (entry) {
+                return gettextCatalog.getString(entry);
+            });
+        };
+        return {
+            export: function (element, motions) {
                 var csvRows = [
-                ['identifier', 'title', 'text', 'reason', 'submitter', 'category', 'origin'],
+                    makeHeaderline()
                 ];
                 _.forEach(motions, function (motion) {
                     var row = [];
@@ -28,6 +36,19 @@ angular.module('OpenSlidesApp.motions.csv', [])
                 element.href = 'data:text/csv;charset=utf-8,' + csvString;
                 element.download = 'motions-export.csv';
                 element.target = '_blank';
+            },
+            downloadExample: function (element) {
+                var csvRows = [makeHeaderline(),
+                    // example entries
+                    ['A1', 'Title 1', 'Text 1', 'Reason 1', 'Submitter A', 'Category A', 'Last Year Conference A'],
+                    ['B1', 'Title 2', 'Text 2', 'Reason 2', 'Submitter B', 'Category B', ''                      ],
+                    [''  , 'Title 3', 'Text 3', ''        , ''           , ''          , ''                      ],
+                ];
+                var csvString = csvRows.join("%0A");
+                element.href = 'data:text/csv;charset=utf-8,' + csvString;
+                element.download = 'motions-example.csv';
+                element.target = '_blank';
+            },
         };
     }
 ]);

openslides/motions/static/js/motions/site.js

@@ -1017,7 +1017,7 @@ angular.module('OpenSlidesApp.motions.site', [
         // Export as a csv file
         $scope.csvExport = function () {
             var element = document.getElementById('downloadLinkCSV');
-            MotionCsvExport(element, $scope.motionsFiltered);
+            MotionCsvExport.export(element, $scope.motionsFiltered);
         };
         // Export as docx file
         $scope.docxExport = function () {
@@ -1665,8 +1665,8 @@ angular.module('OpenSlidesApp.motions.site', [
     'Category',
     'Motion',
     'User',
-    'gettextCatalog',
+    'MotionCsvExport',
-    function($scope, $q, gettext, Category, Motion, User, gettextCatalog) {
+    function($scope, $q, gettext, Category, Motion, User, MotionCsvExport) {
         // set initial data for csv import
         $scope.motions = [];
 
@@ -1692,6 +1692,7 @@ angular.module('OpenSlidesApp.motions.site', [
             });
 
             _.forEach(motions, function (motion) {
+                motion.selected = true;
                 // identifier
                 if (motion.identifier !== '') {
                     // All motion objects are already loaded via the resolve statement from ui-router.
@@ -1749,6 +1750,20 @@ angular.module('OpenSlidesApp.motions.site', [
 
                 $scope.motions.push(motion);
             });
+            $scope.calcStats();
+        };
+
+        $scope.calcStats = function () {
+            $scope.motionsWillNotBeImported = 0;
+            $scope.motionsWillBeImported = 0;
+
+            $scope.motions.forEach(function(motion) {
+                if (!motion.importerror && motion.selected) {
+                    $scope.motionsWillBeImported++;
+                } else {
+                    $scope.motionsWillNotBeImported++;
+                }
+            });
         };
 
         // Counter for creations
@@ -1767,7 +1782,7 @@ angular.module('OpenSlidesApp.motions.site', [
             var importedCategories = [];
             // collect users and categories
             angular.forEach($scope.motions, function (motion) {
-                if (!motion.importerror) {
+                if (motion.selected && !motion.importerror) {
                     // collect user if not exists
                     if (!motion.submitters_id && motion.submitter) {
                         var index = motion.submitter.indexOf(' ');
@@ -1822,7 +1837,7 @@ angular.module('OpenSlidesApp.motions.site', [
             // wait for users and categories to create
             $q.all(createPromises).then( function() {
                 angular.forEach($scope.motions, function (motion) {
-                    if (!motion.importerror) {
+                    if (motion.selected && !motion.importerror) {
                         // now, add user
                         if (!motion.submitters_id && motion.submitter) {
                             var index = motion.submitter.indexOf(' ');
@@ -1865,21 +1880,8 @@ angular.module('OpenSlidesApp.motions.site', [
         };
         // download CSV example file
         $scope.downloadCSVExample = function () {
-            var headerline = ['Identifier', 'Title', 'Text', 'Reason', 'Submitter', 'Category', 'Origin'];
-            headerline = _.map(headerline, function (entry) {
-                return gettextCatalog.getString(entry);
-            });
             var element = document.getElementById('downloadLink');
-            var csvRows = [headerline,
+            MotionCsvExport.downloadExample(element);
-                // example entries
-                ['A1', 'Title 1', 'Text 1', 'Reason 1', 'Submitter A', 'Category A', 'Last Year Conference A'],
-                ['B1', 'Title 2', 'Text 2', 'Reason 2', 'Submitter B', 'Category B', ''                      ],
-                [''  , 'Title 3', 'Text 3', ''        , ''           , ''          , ''                      ],
-            ];
-            var csvString = csvRows.join("%0A");
-            element.href = 'data:text/csv;charset=utf-8,' + csvString;
-            element.download = 'motions-example.csv';
-            element.target = '_blank';
         };
     }
 ])

openslides/motions/static/templates/motions/motion-import.html

@@ -34,6 +34,7 @@
 
   <div ng-if="motions.length">
     <h3 translate>Preview</h3>
+    <div class="scroll-x-container">
       <table class="table table-striped table-bordered table-condensed">
         <thead>
           <tr>
@@ -53,8 +54,9 @@
               <span ng-if="motion.importerror">
                 <i class="fa fa-exclamation-triangle fa-lg"></i>
               </span>
-            <span ng-if="!motion.importerror && !motion.imported">
+              <span ng-if="!motion.importerror && !motion.imported" class="pointer">
-              <i class="fa fa-check-circle-o fa-lg"></i>
+                <i class="fa fa-check-circle-o fa-lg" ng-if="motion.selected" ng-click="motion.selected=false; calcStats();"></i>
+                <i class="fa fa-circle-o fa-lg" ng-if="!motion.selected" ng-click="motion.selected=true; calcStats();"></i>
               </span>
               <span ng-if="motion.imported">
                 <i class="fa fa-check-circle fa-lg"></i>
@@ -89,17 +91,16 @@
               {{ motion.category }}
             <td>{{ motion.origin | limitTo:30 }}{{ motion.origin.length > 30 ? '...' : '' }}
       </table>
+    </div>
 
     <div class="text-danger">
-      <div ng-repeat="motion in motionsFailed = (motions | filter:{importerror:true})"></div>
       <i class="fa fa-exclamation-triangle"></i>
-      {{ motionsFailed.length }}
+      {{ motionsWillNotBeImported }}
       <translate>motions will be not imported.</translate>
     </div>
     <div>
-      <div ng-repeat="motion in motionsPassed = (motions | filter:{importerror:false})"></div>
       <i class="fa fa-check-circle-o fa-lg"></i>
-      {{ motions.length - motionsFailed.length }}
+      {{ motionsWillBeImported }}
       <translate>motions will be imported.</translate>
     </div>
     <div ng-repeat="motion in motionsImported = (motions | filter:{imported:true})"></div>
@@ -116,8 +117,8 @@
       <button ng-click="clear()" class="btn btn-default" translate>
         Clear preview
       </button>
-      <button ng-if="!csvImporting && (motions.length - motionsFailed.length) > 0" ng-click="import()" class="btn btn-primary" translate>
+      <button ng-if="!csvImporting && motionsWillBeImported > 0" ng-click="import()" class="btn btn-primary" translate>
-        Import {{ motions.length - motionsFailed.length }} motions
+        Import {{ motionsWillBeImported }} motions
       </button>
     </div>
     <div class="spacer">

openslides/topics/static/js/topics/csv.js

@@ -0,0 +1,35 @@
+(function () {
+
+'use strict';
+
+angular.module('OpenSlidesApp.topics.csv', [])
+
+.factory('TopicsCsvExample', [
+    'gettextCatalog',
+    function (gettextCatalog) {
+        var makeHeaderline = function () {
+            var headerline = ['Title', 'Text', 'Duration', 'Comment', 'Internal item'];
+            return _.map(headerline, function (entry) {
+                return gettextCatalog.getString(entry);
+            });
+        };
+        return {
+            downloadExample: function (element) {
+                var csvRows = [makeHeaderline(),
+                    // example entries
+                    ['Demo 1', 'Demo text 1', '1:00', 'test comment', ''],
+                    ['Break', '', '0:10', '', '1'],
+                    ['Demo 2', 'Demo text 2', '1:30', '', '']
+
+                ];
+                var csvString = csvRows.join("%0A");
+                element.href = 'data:text/csv;charset=utf-8,' + csvString;
+                element.download = 'agenda-example.csv';
+                element.target = '_blank';
+
+            },
+        };
+    }
+]);
+
+}());

openslides/topics/static/js/topics/site.js

@@ -2,7 +2,7 @@
 
 'use strict';
 
-angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
+angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics', 'OpenSlidesApp.topics.csv'])
 
 .config([
     '$stateProvider',
@@ -272,7 +272,8 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
     'Agenda',
     'Topic',
     'HumanTimeConverter',
-    function($scope, gettext, Agenda, Topic, HumanTimeConverter) {
+    'TopicsCsvExample',
+    function($scope, gettext, Agenda, Topic, HumanTimeConverter, TopicsCsvExample) {
         // Big TODO: Change wording from "item" to "topic".
         // import from textarea
         $scope.importByLine = function () {
@@ -299,53 +300,36 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
         };
 
         // *** CSV import ***
-        // set initial data for csv import
+        $scope.csvConfig = {
+            accept: '.csv, .txt',
+            encodingOptions: ['UTF-8', 'ISO-8859-1'],
+            parseConfig: {
+                skipEmptyLines: true,
+            },
+        };
+        var FIELDS = ['title', 'text', 'duration', 'comment', 'is_hidden'];
         $scope.items = [];
-        $scope.separator = ',';
+        $scope.onCsvChange = function (csv) {
-        $scope.encoding = 'UTF-8';
-        $scope.encodingOptions = ['UTF-8', 'ISO-8859-1'];
-        $scope.accept = '.csv, .txt';
-        $scope.csv = {
-            content: null,
-            header: true,
-            headerVisible: false,
-            separator: $scope.separator,
-            separatorVisible: false,
-            encoding: $scope.encoding,
-            encodingVisible: false,
-            accept: $scope.accept,
-            result: null
-        };
-        // set csv file encoding
-        $scope.setEncoding = function () {
-            $scope.csv.encoding = $scope.encoding;
-        };
-        // set csv file encoding
-        $scope.setSeparator = function () {
-            $scope.csv.separator = $scope.separator;
-        };
-        // detect if csv file is loaded
-        $scope.$watch('csv.result', function () {
             $scope.items = [];
-            var quotionRe = /^"(.*)"$/;
+
-            angular.forEach($scope.csv.result, function (item, index) {
+            var items = [];
-                // title
+            _.forEach(csv.data, function (row) {
-                if (item.title) {
+                if (row.length > 1) {
-                    item.title = item.title.replace(quotionRe, '$1');
+                    var filledRow = _.zipObject(FIELDS, row);
+                    items.push(filledRow);
                 }
+            });
+
+            _.forEach(items, function (item, index) {
+                item.selected = true;
+
                 if (!item.title) {
                     item.importerror = true;
                     item.title_error = gettext('Error: Title is required.');
                 }
-                // text
-                if (item.text) {
-                    item.text = item.text.replace(quotionRe, '$1');
-                }
                 // duration
                 if (item.duration) {
-                    var time = item.duration.replace(quotionRe, '$1');
+                    var time = HumanTimeConverter.humanTimeToSeconds(item.duration, {hours: true})/60;
-                    time = HumanTimeConverter.humanTimeToSeconds(time, {hours: true})/60;
-
                     if (time <= 0) { // null instead of 0 or negative duration
                         time = null;
                     }
@@ -353,13 +337,8 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
                 } else {
                     item.duration = null;
                 }
-                // comment
-                if (item.comment) {
-                    item.comment = item.comment.replace(quotionRe, '$1');
-                }
                 // is_hidden
                 if (item.is_hidden) {
-                    item.is_hidden = item.is_hidden.replace(quotionRe, '$1');
                     if (item.is_hidden == '1') {
                         item.type = 2;
                     } else {
@@ -374,13 +353,27 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
                 item.weight = 1000 + index;
                 $scope.items.push(item);
             });
+            $scope.calcStats();
+        };
+
+        $scope.calcStats = function () {
+            $scope.itemsWillNotBeImported = 0;
+            $scope.itemsWillBeImported = 0;
+
+            $scope.items.forEach(function(item) {
+                if (item.selected && !item.importerror) {
+                    $scope.itemsWillBeImported++;
+                } else {
+                    $scope.itemsWillNotBeImported++;
+                }
             });
+        };
 
         // import from csv file
         $scope.import = function () {
             $scope.csvImporting = true;
             angular.forEach($scope.items, function (item) {
-                if (!item.importerror) {
+                if (item.selected && !item.importerror) {
                     Topic.create(item).then(
                         function(success) {
                             item.imported = true;
@@ -399,24 +392,12 @@ angular.module('OpenSlidesApp.topics.site', ['OpenSlidesApp.topics'])
             $scope.csvimported = true;
         };
         $scope.clear = function () {
-            $scope.csv.result = null;
+            $scope.items = null;
         };
         // download CSV example file
         $scope.downloadCSVExample = function () {
             var element = document.getElementById('downloadLink');
-            var csvRows = [
+            TopicsCsvExample.downloadExample(element);
-                // column header line
-                ['title', 'text', 'duration', 'comment', 'is_hidden'],
-                // example entries
-                ['Demo 1', 'Demo text 1', '1:00', 'test comment', ''],
-                ['Break', '', '0:10', '', '1'],
-                ['Demo 2', 'Demo text 2', '1:30', '', '']
-
-            ];
-            var csvString = csvRows.join("%0A");
-            element.href = 'data:text/csv;charset=utf-8,' + csvString;
-            element.download = 'agenda-example.csv';
-            element.target = '_blank';
         };
      }
 ]);

openslides/topics/static/templates/topics/topic-import.html

@@ -39,41 +39,28 @@
 <hr>
 
 <h2 translate>Import by CSV file</h2>
-  <div class="block row">
+
-    <div class="title">
+  <h3 translate>Select a CSV file</h3>
-      <h3 translate>Select a CSV file
+  <csv-import change="onCsvChange(csv)" config="csvConfig"></csv-import>
-    </div>
-    <div class="block right import">
-      <label class="label" for="inputSeparator" translate>Separator</label>
-      <input type="text" ng-model="separator" ng-change="setSeparator()" ng-init="separator=separator" id="inputSeparator">
-      <br>
-      <label class="label" for="selectEncoding" translate>Encoding</label>
-      <select ng-model="encoding" ng-options="enc as enc for enc in encodingOptions"
-          ng-selected="setEncoding()" ng-init="encoding=encoding" id="selectEncoding"></select>
-      <ng-csv-import
-          content="csv.content"
-          header="csv.header"
-          header-visible="csv.headerVisible"
-          separator="csv.separator"
-          separator-visible="csv.separatorVisible"
-          result="csv.result"
-          encoding="csv.encoding"
-          accept="csv.accept"
-          encoding-visible="csv.encodingVisible"></ng-csv-import>
-    </div>
-  </div>
 
   <h4 translate>Please note:</h4>
   <ul class="indentation">
       <li><translate>Required comma or semicolon separated values with these column header names in the first row</translate>:<br>
-          <code>title, text, duration, comment, is_hidden</code>
+          <code>
+            <translate>Title</translate>,
+            <translate>Text</translate>,
+            <translate>Duration</translate>,
+            <translate>Comment</translate>,
+            <translate>Internal item</translate>
+          </code>
       <li translate>Title is required. All other fields are optional and may be empty.
       <li translate>Only double quotes are accepted as text delimiter (no single quotes).
       <li><a id="downloadLink" href="" ng-click="downloadCSVExample()" translate>Download CSV example file</a>
   </ul>
 
-  <div ng-if="csv.result">
+  <div ng-if="items.length">
     <h3 translate>Preview</h3>
+    <div class="scroll-x-container">
       <table ng-if="!csvImporting" class="table table-striped table-bordered table-condensed">
         <thead>
           <tr>
@@ -83,7 +70,7 @@
             <th translate>Text
             <th translate>Duration
             <th translate>Comment
-          <th translate>Is hidden</th>
+            <th translate>Internal item</th>
         <tbody ng-repeat="item in items">
           <tr>
             <td class="minimum"
@@ -91,8 +78,9 @@
               <span ng-if="item.importerror">
                 <i class="fa fa-exclamation-triangle fa-lg"></i>
               </span>
-            <span ng-if="!item.importerror && !item.imported">
+              <span ng-if="!item.importerror && !item.imported" class="pointer">
-              <i class="fa fa-check-circle-o fa-lg"></i>
+                <i class="fa fa-check-circle-o fa-lg" ng-if="item.selected" ng-click="item.selected=false; calcStats();"></i>
+                <i class="fa fa-circle-o fa-lg" ng-if="!item.selected" ng-click="item.selected=true; calcStats();"></i>
               </span>
               <span ng-if="item.imported">
                 <i class="fa fa-check-circle fa-lg"></i>
@@ -108,17 +96,16 @@
             <td>{{ item.comment }}
             <td>{{ item.is_hidden }}
       </table>
+    </div>
 
     <div class="text-danger">
-      <div ng-repeat="item in itemsFailed = (items | filter:{importerror:true})"></div>
       <i class="fa fa-exclamation-triangle"></i>
-      {{ itemsFailed.length }}
+      {{ itemsWillNMotBeImported }}
       <translate>topics will be not imported.</translate>
     </div>
     <div>
-      <div ng-repeat="item in itemsPassed = (items | filter:{importerror:false})"></div>
       <i class="fa fa-check-circle-o fa-lg"></i>
-      {{ items.length - itemsFailed.length }}
+      {{ itemsWillBeImported }}
       <translate>topics will be imported.</translate>
     </div>
     <div ng-repeat="item in itemsImported = (items | filter:{imported:true})"></div>
@@ -133,8 +120,8 @@
       <button ng-click="clear()" class="btn btn-default" translate>
         Clear preview
       </button>
-      <button ng-if="!csvImporting && (items.length - itemdFailed.length) > 0" ng-click="import()" class="btn btn-primary" translate>
+      <button ng-if="!csvImporting && itemsWillBeImported > 0" ng-click="import()" class="btn btn-primary" translate>
-        Import {{ items.length - itemsFailed.length }} topics
+        Import {{ itemsWillBeImported }} topics
       </button>
     </div>
     <div class="spacer">

openslides/users/static/js/users/csv.js

@@ -8,10 +8,17 @@ angular.module('OpenSlidesApp.users.csv', [])
     'Group',
     'gettextCatalog',
     function (Group, gettextCatalog) {
+        var makeHeaderline = function () {
+            var headerline = ['Title', 'Given name', 'Surname', 'Structure level', 'Participant number', 'Groups',
+                'Comment', 'Is active', 'Is present', 'Is a committee'];
+            return _.map(headerline, function (entry) {
+                return gettextCatalog.getString(entry);
+            });
+        };
         return {
             export: function (element, users) {
                 var csvRows = [
-                    ['title', 'first_name', 'last_name', 'structure_level', 'number', 'groups', 'comment', 'is_active', 'is_present', 'is_committee'],
+                    makeHeaderline()
                 ];
                 _.forEach(users, function (user) {
                     var row = [];
@@ -46,9 +53,8 @@ angular.module('OpenSlidesApp.users.csv', [])
                 if (groups.length >= 2) {
                     csvGroup = gettextCatalog.getString(groups[groups.length - 1].name); // take last group
                 }
-                var csvRows = [
+
-                    // column header line
+                var csvRows = [makeHeaderline(),
-                    ['title', 'first_name', 'last_name', 'structure_level', 'number', 'groups', 'comment', 'is_active', 'is_present', 'is_committee'],
                     // example entries
                     ['Dr.', 'Max', 'Mustermann', 'Berlin','1234567890', csvGroups, 'xyz', '1', '1', ''],
                     ['', 'John', 'Doe', 'Washington','75/99/8-2', csvGroup, 'abc', '1', '1', ''],

openslides/users/static/js/users/site.js

@@ -917,32 +917,6 @@ angular.module('OpenSlidesApp.users.site', [
             });
         };
 
-        // *** csv import ***
-        // set initial data for csv import
-        $scope.users = [];
-        $scope.separator = ',';
-        $scope.encoding = 'UTF-8';
-        $scope.encodingOptions = ['UTF-8', 'ISO-8859-1'];
-        $scope.accept = '.csv, .txt';
-        $scope.csv = {
-            content: null,
-            header: true,
-            headerVisible: false,
-            separator: $scope.separator,
-            separatorVisible: false,
-            encoding: $scope.encoding,
-            encodingVisible: false,
-            accept: $scope.accept,
-            result: null
-        };
-        // set csv file encoding
-        $scope.setEncoding = function () {
-            $scope.csv.encoding = $scope.encoding;
-        };
-        // set csv file encoding
-        $scope.setSeparator = function () {
-            $scope.csv.separator = $scope.separator;
-        };
         // pagination
         $scope.currentPage = 1;
         $scope.itemsPerPage = 100;
@@ -955,45 +929,46 @@ angular.module('OpenSlidesApp.users.site', [
             gettext('override new'),
             gettext('create duplicate')
         ];
-        // detect if csv file is loaded
+
-        $scope.$watch('csv.result', function () {
+        // *** csv import ***
+        $scope.csvConfig = {
+            accept: '.csv, .txt',
+            encodingOptions: ['UTF-8', 'ISO-8859-1'],
+            parseConfig: {
+                skipEmptyLines: true,
+            },
+        };
+
+        var FIELDS = ['title', 'first_name', 'last_name', 'structure_level', 'number',
+        'groups', 'comment', 'is_active', 'is_present', 'is_committee'];
+        $scope.users = [];
+        $scope.onCsvChange = function (csv) {
             // All user objects are already loaded via the resolve statement from ui-router.
             var users = User.getAll();
             $scope.users = [];
+
+            var csvUsers = [];
+            _.forEach(csv.data, function (row) {
+                if (row.length >= 2) {
+                    var filledRow = _.zipObject(FIELDS, row);
+                    csvUsers.push(filledRow);
+                }
+            });
             $scope.duplicates = 0;
-            var quotionRe = /^"(.*)"$/;
+            _.forEach(csvUsers, function (user) {
-            angular.forEach($scope.csv.result, function (user) {
                 user.selected = true;
-                // title
-                if (user.title) {
-                    user.title = user.title.replace(quotionRe, '$1');
-                }
-                // first name
-                if (user.first_name) {
-                    user.first_name = user.first_name.replace(quotionRe, '$1');
-                }
-                // last name
-                if (user.last_name) {
-                    user.last_name = user.last_name.replace(quotionRe, '$1');
-                }
                 if (!user.first_name && !user.last_name) {
                     user.importerror = true;
                     user.name_error = gettext('Error: Given name or surname is required.');
                 }
-                // structure level
-                if (user.structure_level) {
-                    user.structure_level = user.structure_level.replace(quotionRe, '$1');
-                }
                 // number
-                if (user.number) {
+                if (!user.number) {
-                    user.number = user.number.replace(quotionRe, '$1');
-                } else {
                     user.number = "";
                 }
                 // groups
                 user.groups_id = []; // will be overwritten if there are groups
                 if (user.groups) {
-                    user.groups = user.groups.replace(quotionRe, '$1').split(',');
+                    user.groups = user.groups.split(',');
                     user.groups = _.map(user.groups, function (group) {
                         return _.trim(group); // remove whitespaces on start or end
                     });
@@ -1015,43 +990,9 @@ angular.module('OpenSlidesApp.users.site', [
                     // for template:
                     user.groupsNotToCreate = _.difference(user.groups, user.groupsToCreate);
                 }
-                // comment
+                user.is_active = (user.is_active !== undefined && user.is_active === '1');
-                if (user.comment) {
+                user.is_present = (user.is_present !== undefined && user.is_present === '1');
-                    user.comment = user.comment.replace(quotionRe, '$1');
+                user.is_committee = (user.is_committee !== undefined && user.is_committee === '1');
-                }
-                // is active
-                if (user.is_active) {
-                    user.is_active = user.is_active.replace(quotionRe, '$1');
-                    if (user.is_active == '1') {
-                        user.is_active = true;
-                    } else {
-                        user.is_active = false;
-                    }
-                } else {
-                    user.is_active = false;
-                }
-                // is present
-                if (user.is_present) {
-                    user.is_present = user.is_present.replace(quotionRe, '$1');
-                    if (user.is_present == '1') {
-                        user.is_present = true;
-                    } else {
-                        user.is_present = false;
-                    }
-                } else {
-                    user.is_present = false;
-                }
-                // is committee
-                if (user.is_committee) {
-                    user.is_committee = user.is_committee.replace(quotionRe, '$1');
-                    if (user.is_committee == '1') {
-                        user.is_committee = true;
-                    } else {
-                        user.is_committee = false;
-                    }
-                } else {
-                    user.is_committee = false;
-                }
 
                 // Check for duplicates
                 user.duplicate = false;
@@ -1089,7 +1030,7 @@ angular.module('OpenSlidesApp.users.site', [
                 $scope.users.push(user);
             });
             $scope.calcStats();
-        });
+        };
 
         // Stats
         $scope.calcStats = function() {
@@ -1193,7 +1134,7 @@ angular.module('OpenSlidesApp.users.site', [
             });
         };
         $scope.clear = function () {
-            $scope.csv.result = null;
+            $scope.users = null;
         };
         // download CSV example file
         $scope.downloadCSVExample = function () {

openslides/users/static/templates/users/user-import.html

@@ -41,41 +41,31 @@
 
   <h2 translate>Import by CSV file</h2>
 
-  <div class="block row">
+  <h3 translate>Select a CSV file</h3>
-    <div class="title">
+  <csv-import change="onCsvChange(csv)" config="csvConfig"></csv-import>
-      <h3 translate>Select a CSV file
-    </div>
-    <div class="block right import">
-      <label class="label" for="inputSeparator" translate>Separator</label>
-      <input type="text" ng-model="separator" ng-change="setSeparator()" ng-init="separator=separator" id="inputSeparator">
-      <br>
-      <label class="label" for="selectEncoding" translate>Encoding</label>
-      <select ng-model="encoding" ng-options="enc as enc for enc in encodingOptions"
-          ng-selected="setEncoding()" ng-init="encoding=encoding" id="selectEncoding"></select>
-      <ng-csv-import
-          content="csv.content"
-          header="csv.header"
-          header-visible="csv.headerVisible"
-          separator="csv.separator"
-          separator-visible="csv.separatorVisible"
-          result="csv.result"
-          accept="csv.accept"
-          encoding="csv.encoding"
-          encoding-visible="csv.encodingVisible"></ng-csv-import>
-    </div>
-  </div>
 
   <h4 translate>Please note:</h4>
   <ul class="indentation">
       <li><translate>Required comma or semicolon separated values with these column header names in the first row</translate>:<br>
-          <code>title, first_name, last_name, structure_level, number, groups, comment, is_active, is_present, is_committee</code>
+        <code>
+          <translate>Title</translate>,
+          <translate>Given name</translate>,
+          <translate>Surname</translate>,
+          <translate>Structure level</translate>,
+          <translate>Participant number</translate>,
+          <translate>Groups</translate>,
+          <translate>Comment</translate>,
+          <translate>Is active</translate>,
+          <translate>Is present</translate>,
+          <translate>Is committee</translate>
+        </code>
       <li translate>At least given name or surname have to be filled in. All
         other fields are optional and may be empty.
       <li translate>Only double quotes are accepted as text delimiter (no single quotes).
       <li><a id="downloadLink" href="" ng-click="downloadCSVExample()" translate>Download CSV example file</a>
   </ul>
 
-  <div ng-show="csv.result">
+  <div ng-show="users.length"
     <h3 translate>Preview</h3>
     <div class="scroll-x-container">
       <table class="table table-striped table-bordered table-condensed">