change tab order in import tabs

This commit is contained in:
Maximilian Krambach 2019-01-22 15:46:21 +01:00
parent 1b3c0b4cee
commit b620e5edfa
3 changed files with 102 additions and 103 deletions

View File

@ -1,4 +1,3 @@
<os-head-bar [nav]="false"> <os-head-bar [nav]="false">
<!-- Title --> <!-- Title -->
<div class="title-slot"><h2 translate>Import topics</h2></div> <div class="title-slot"><h2 translate>Import topics</h2></div>
@ -12,22 +11,50 @@
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table">
<mat-tab-group (selectedTabChange)="onTabChange()"> <mat-tab-group (selectedTabChange)="onTabChange()">
<!-- 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>
</div>
<mat-form-field>
<textarea
matInput
osAutofocus
formControlName="inputtext"
placeholder="{{ 'Insert topics 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 }}"> <mat-tab label="{{ 'CSV import' | translate }}">
<span translate>Required comma or semicolon separated values with these column header names in the first row:</span> <span translate
>Required comma or semicolon separated values with these column header names in the first row:</span
>
<br /> <br />
<div class="code red-warning-text"> <div class="code red-warning-text">
<span translate>Title</span>,&nbsp; <span translate>Title</span>,&nbsp; <span translate>Text</span>,&nbsp;
<span translate>Text</span>,&nbsp; <span translate>Duration</span>,&nbsp; <span translate>Comment</span>,&nbsp;
<span translate>Duration</span>,&nbsp;
<span translate>Comment</span>,&nbsp;
<span translate>Internal item</span> <span translate>Internal item</span>
</div> </div>
<ul> <ul>
<li translate>Title is required. All other fields are optional and may be empty. <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> </li>
<li translate>Additional columns after the required ones may be present and won't affect the import.</li>
</ul> </ul>
<button mat-button color="accent" (click)="downloadCsvExample()" translate>Download CSV example file</button> <button mat-button color="accent" (click)="downloadCsvExample()" translate>
Download CSV example file
</button>
<div class="wrapper"> <div class="wrapper">
<mat-form-field> <mat-form-field>
<mat-label translate>Encoding of the file</mat-label> <mat-label translate>Encoding of the file</mat-label>
@ -75,31 +102,6 @@
</div> </div>
</div> </div>
</mat-tab> </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>
</div>
<mat-form-field>
<textarea
matInput
formControlName="inputtext"
placeholder="{{ 'Insert topics 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-tab-group>
</mat-card> </mat-card>
@ -197,25 +199,19 @@
<!-- duration column --> <!-- duration column -->
<ng-container matColumnDef="duration"> <ng-container matColumnDef="duration">
<mat-header-cell *matHeaderCellDef translate>Duration</mat-header-cell> <mat-header-cell *matHeaderCellDef translate>Duration</mat-header-cell>
<mat-cell *matCellDef="let entry"> <mat-cell *matCellDef="let entry"> {{ getDuration(entry.newEntry.duration) }} </mat-cell>
{{ getDuration(entry.newEntry.duration) }}
</mat-cell>
</ng-container> </ng-container>
<!-- comment column--> <!-- comment column-->
<ng-container matColumnDef="comment"> <ng-container matColumnDef="comment">
<mat-header-cell *matHeaderCellDef translate>Comment</mat-header-cell> <mat-header-cell *matHeaderCellDef translate>Comment</mat-header-cell>
<mat-cell *matCellDef="let entry"> <mat-cell *matCellDef="let entry"> {{ entry.newEntry.comment }} </mat-cell>
{{ entry.newEntry.comment }}
</mat-cell>
</ng-container> </ng-container>
<!-- type column --> <!-- type column -->
<ng-container matColumnDef="type"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef translate>Type</mat-header-cell> <mat-header-cell *matHeaderCellDef translate>Type</mat-header-cell>
<mat-cell *matCellDef="let entry"> <mat-cell *matCellDef="let entry"> {{ getTypeString(entry.newEntry.type) | translate }} </mat-cell>
{{ getTypeString(entry.newEntry.type) | translate }}
</mat-cell>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row> <mat-header-row *matHeaderRowDef="getColumnDefinition()"></mat-header-row>

View File

@ -65,7 +65,7 @@
#fileInput #fileInput
(change)="onSelectFile($event)" (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> <span translate> Select file</span>
</button> </button>
</div> </div>

View File

@ -10,6 +10,31 @@
</os-head-bar> </os-head-bar>
<mat-card class="os-form-card import-table"> <mat-card class="os-form-card import-table">
<mat-tab-group (selectedTabChange)="onTabChange()"> <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 }}"> <mat-tab label="{{ 'CSV import' | translate }}">
<span translate <span translate
>Required comma or semicolon separated values with these column header names in the first row:</span >Required comma or semicolon separated values with these column header names in the first row:</span
@ -83,28 +108,6 @@
</div> </div>
</div> </div>
</mat-tab> </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-tab-group>
</mat-card> </mat-card>