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">
<!-- Title -->
<div class="title-slot"><h2 translate>Import topics</h2></div>
@ -12,22 +11,50 @@
<mat-card class="os-form-card import-table">
<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 }}">
<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 />
<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>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 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 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>
<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>
@ -75,31 +102,6 @@
</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>
</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-card>
@ -197,25 +199,19 @@
<!-- 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-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>

View File

@ -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>

View File

@ -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>