change tab order in import tabs
This commit is contained in:
Maximilian Krambach
parent
1b3c0b4cee
commit
b620e5edfa
@ -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>,
|
||||
<span translate>Text</span>,
|
||||
<span translate>Duration</span>,
|
||||
<span translate>Comment</span>,
|
||||
<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=""">
|
||||
<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>, <span translate>Text</span>,
|
||||
<span translate>Duration</span>, <span translate>Comment</span>,
|
||||
<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=""">
|
||||
<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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user