From b620e5edfab338e857d51f01bc58ef89f5556085 Mon Sep 17 00:00:00 2001
From: Maximilian Krambach <maximilian.krambach@intevation.de>
Date: Tue, 22 Jan 2019 15:46:21 +0100
Subject: [PATCH] change tab order in import tabs

---
 .../agenda-import-list.component.html         | 156 +++++++++---------
 .../motion-import-list.component.html         |   2 +-
 .../user-import-list.component.html           |  47 +++---
 3 files changed, 102 insertions(+), 103 deletions(-)

diff --git a/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html b/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
index 89373699d..4d57ecfd6 100644
--- a/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
+++ b/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
@@ -1,4 +1,3 @@
-
 <os-head-bar [nav]="false">
     <!-- Title -->
     <div class="title-slot"><h2 translate>Import topics</h2></div>
@@ -12,82 +11,17 @@
 
 <mat-card class="os-form-card import-table">
     <mat-tab-group (selectedTabChange)="onTabChange()">
-        <mat-tab label="{{ 'CSV import' | translate }}">
-            <span translate>Required comma or semicolon separated values with these column header names in the first row:</span>
-                <br />
-            <div class="code red-warning-text">
-    <span translate>Title</span>,&nbsp;
-    <span translate>Text</span>,&nbsp;
-    <span translate>Duration</span>,&nbsp;
-    <span translate>Comment</span>,&nbsp;
-    <span translate>Internal item</span>
-</div>
-<ul>
-    <li translate>Title is required. All other fields are optional and may be empty.
-    </li>
-    <li translate>Additional columns after the required ones may be present and won't affect the import.</li>
-</ul>
-    <button mat-button color="accent" (click)="downloadCsvExample()" translate>Download CSV example file</button>
-    <div class="wrapper">
-        <mat-form-field>
-            <mat-label translate>Encoding of the file</mat-label>
-            <mat-select
-                class="selection"
-                placeholder="translate.instant('Select encoding')"
-                (selectionChange)="selectEncoding($event)"
-                [value]="encodings[0].value"
-            >
-                <mat-option *ngFor="let option of encodings" [value]="option.value">
-                    {{ option.label | translate }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-            <mat-label translate>Column separator</mat-label>
-            <mat-select class="selection" (selectionChange)="selectColSep($event)" value="">
-                <mat-option *ngFor="let option of columnSeparators" [value]="option.value">
-                    {{ option.label | translate }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-        <mat-form-field>
-            <mat-label translate>Text separator</mat-label>
-            <mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;">
-                <mat-option *ngFor="let option of textSeparators" [value]="option.value">
-                    {{ option.label | translate }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
-    <div>
-        <div>
-            <input
-                id="agenda-import-file-input"
-                type="file"
-                class="hidden-input"
-                accept="text"
-                #fileInput
-                (change)="onSelectFile($event)"
-            />
-            <button mat-button onclick="document.getElementById('agenda-import-file-input').click()">
-                <span translate>Select file</span>
-            </button>
-        </div>
-    </div>
-        </mat-tab>
         <!-- textAreaImport-->
         <mat-tab label="{{ 'Text import' | translate }}">
             <div [formGroup]="textAreaForm">
                 <div>
-                    <span translate>
-                        Paste/write your topics in this textbox.</span>
-                    <span translate>
-                        Keep each item in a single line.
-                    </span>
+                    <span translate> Paste/write your topics in this textbox.</span>
+                    <span translate> Keep each item in a single line. </span>
                 </div>
                 <mat-form-field>
                     <textarea
                         matInput
+                        osAutofocus
                         formControlName="inputtext"
                         placeholder="{{ 'Insert topics here' | translate }}"
                         cdkTextareaAutosize
@@ -100,12 +34,80 @@
                 <button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button>
             </div>
         </mat-tab>
+
+        <!-- CSV import tab -->
+        <mat-tab label="{{ 'CSV import' | translate }}">
+            <span translate
+                >Required comma or semicolon separated values with these column header names in the first row:</span
+            >
+            <br />
+            <div class="code red-warning-text">
+                <span translate>Title</span>,&nbsp; <span translate>Text</span>,&nbsp;
+                <span translate>Duration</span>,&nbsp; <span translate>Comment</span>,&nbsp;
+                <span translate>Internal item</span>
+            </div>
+            <ul>
+                <li translate>Title is required. All other fields are optional and may be empty.</li>
+                <li translate>
+                    Additional columns after the required ones may be present and won't affect the import.
+                </li>
+            </ul>
+            <button mat-button color="accent" (click)="downloadCsvExample()" translate>
+                Download CSV example file
+            </button>
+            <div class="wrapper">
+                <mat-form-field>
+                    <mat-label translate>Encoding of the file</mat-label>
+                    <mat-select
+                        class="selection"
+                        placeholder="translate.instant('Select encoding')"
+                        (selectionChange)="selectEncoding($event)"
+                        [value]="encodings[0].value"
+                    >
+                        <mat-option *ngFor="let option of encodings" [value]="option.value">
+                            {{ option.label | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label translate>Column separator</mat-label>
+                    <mat-select class="selection" (selectionChange)="selectColSep($event)" value="">
+                        <mat-option *ngFor="let option of columnSeparators" [value]="option.value">
+                            {{ option.label | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+                <mat-form-field>
+                    <mat-label translate>Text separator</mat-label>
+                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;">
+                        <mat-option *ngFor="let option of textSeparators" [value]="option.value">
+                            {{ option.label | translate }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            </div>
+            <div>
+                <div>
+                    <input
+                        id="agenda-import-file-input"
+                        type="file"
+                        class="hidden-input"
+                        accept="text"
+                        #fileInput
+                        (change)="onSelectFile($event)"
+                    />
+                    <button mat-button onclick="document.getElementById('agenda-import-file-input').click()">
+                        <span translate>Select file</span>
+                    </button>
+                </div>
+            </div>
+        </mat-tab>
     </mat-tab-group>
 </mat-card>
 
 <!-- preview table -->
 <mat-card *ngIf="hasFile" class="os-form-card import-table">
-        <h3 translate> Preview</h3>
+    <h3 translate>Preview</h3>
     <div class="summary">
         <!-- new entries -->
         <div *ngIf="newCount">
@@ -196,26 +198,20 @@
 
             <!-- duration column -->
             <ng-container matColumnDef="duration">
-                    <mat-header-cell *matHeaderCellDef translate>Duration</mat-header-cell>
-                    <mat-cell *matCellDef="let entry">
-                        {{ getDuration(entry.newEntry.duration) }}
-                    </mat-cell>
+                <mat-header-cell *matHeaderCellDef translate>Duration</mat-header-cell>
+                <mat-cell *matCellDef="let entry"> {{ getDuration(entry.newEntry.duration) }} </mat-cell>
             </ng-container>
 
             <!-- comment column-->
             <ng-container matColumnDef="comment">
                 <mat-header-cell *matHeaderCellDef translate>Comment</mat-header-cell>
-                    <mat-cell *matCellDef="let entry">
-                        {{ entry.newEntry.comment }}
-                    </mat-cell>
+                <mat-cell *matCellDef="let entry"> {{ entry.newEntry.comment }} </mat-cell>
             </ng-container>
 
             <!-- type column -->
             <ng-container matColumnDef="type">
                 <mat-header-cell *matHeaderCellDef translate>Type</mat-header-cell>
-                    <mat-cell *matCellDef="let entry">
-                {{ getTypeString(entry.newEntry.type) | translate }}
-                </mat-cell>
+                <mat-cell *matCellDef="let entry"> {{ getTypeString(entry.newEntry.type) | translate }} </mat-cell>
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>
diff --git a/client/src/app/site/motions/components/motion-import-list/motion-import-list.component.html b/client/src/app/site/motions/components/motion-import-list/motion-import-list.component.html
index 6003015d3..60f234a39 100644
--- a/client/src/app/site/motions/components/motion-import-list/motion-import-list.component.html
+++ b/client/src/app/site/motions/components/motion-import-list/motion-import-list.component.html
@@ -65,7 +65,7 @@
                 #fileInput
                 (change)="onSelectFile($event)"
             />
-            <button mat-button onclick="document.getElementById('motion-import-file-input').click()">
+            <button mat-button osAutofocus onclick="document.getElementById('motion-import-file-input').click()">
                 <span translate> Select file</span>
             </button>
         </div>
diff --git a/client/src/app/site/users/components/user-import/user-import-list.component.html b/client/src/app/site/users/components/user-import/user-import-list.component.html
index 552a584e7..0b86ed606 100644
--- a/client/src/app/site/users/components/user-import/user-import-list.component.html
+++ b/client/src/app/site/users/components/user-import/user-import-list.component.html
@@ -10,6 +10,31 @@
 </os-head-bar>
 <mat-card class="os-form-card import-table">
     <mat-tab-group (selectedTabChange)="onTabChange()">
+        <!-- textarea import tab -->
+        <mat-tab label="{{ 'Text import' | translate }}">
+            <div [formGroup]="textAreaForm">
+                <div>
+                    <span translate> Copy and paste your participant names in this textbox.</span>
+                    <span translate> Keep each person in a single line. </span><br />
+                    <span translate> Comma separated names will be read as 'Surname, given name(s)'. </span>
+                </div>
+                <mat-form-field>
+                    <textarea
+                        matInput
+                        osAutofocus
+                        formControlName="inputtext"
+                        placeholder="{{ 'Insert participants here' | translate }}"
+                        cdkTextareaAutosize
+                        cdkAutosizeMinRows="3"
+                        cdkAutosizeMaxRows="10"
+                    ></textarea>
+                </mat-form-field>
+            </div>
+            <div>
+                <button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button>
+            </div>
+        </mat-tab>
+        <!-- CSV import tab -->
         <mat-tab label="{{ 'CSV import' | translate }}">
             <span translate
                 >Required comma or semicolon separated values with these column header names in the first row:</span
@@ -83,28 +108,6 @@
                 </div>
             </div>
         </mat-tab>
-        <mat-tab label="{{ 'Text import' | translate }}">
-            <div [formGroup]="textAreaForm">
-                <div>
-                    <span translate> Copy and paste your participant names in this textbox.</span>
-                    <span translate> Keep each person in a single line. </span><br />
-                    <span translate> Comma separated names will be read as 'Surname, given name(s)'. </span>
-                </div>
-                <mat-form-field>
-                    <textarea
-                        matInput
-                        formControlName="inputtext"
-                        placeholder="{{ 'Insert participants here' | translate }}"
-                        cdkTextareaAutosize
-                        cdkAutosizeMinRows="3"
-                        cdkAutosizeMaxRows="10"
-                    ></textarea>
-                </mat-form-field>
-            </div>
-            <div>
-                <button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button>
-            </div>
-        </mat-tab>
     </mat-tab-group>
 </mat-card>