ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

change tab order in import tabs

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
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,82 +11,17 @@
<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()">
<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--> <!-- textAreaImport-->
<mat-tab label="{{ 'Text import' | translate }}"> <mat-tab label="{{ 'Text import' | translate }}">
<div [formGroup]="textAreaForm"> <div [formGroup]="textAreaForm">
<div> <div>
<span translate> <span translate> Paste/write your topics in this textbox.</span>
Paste/write your topics in this textbox.</span> <span translate> Keep each item in a single line. </span>
<span translate>
Keep each item in a single line.
</span>
</div> </div>
<mat-form-field> <mat-form-field>
<textarea <textarea
matInput matInput
osAutofocus
formControlName="inputtext" formControlName="inputtext"
placeholder="{{ 'Insert topics here' | translate }}" placeholder="{{ 'Insert topics here' | translate }}"
cdkTextareaAutosize cdkTextareaAutosize
@ -100,12 +34,80 @@
<button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button> <button mat-button color="accent" (click)="parseTextArea()"><span translate>Preview</span></button>
</div> </div>
</mat-tab> </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-tab-group>
</mat-card> </mat-card>
<!-- preview table --> <!-- preview table -->
<mat-card *ngIf="hasFile" class="os-form-card import-table"> <mat-card *ngIf="hasFile" class="os-form-card import-table">
<h3 translate> Preview</h3> <h3 translate>Preview</h3>
<div class="summary"> <div class="summary">
<!-- new entries --> <!-- new entries -->
<div *ngIf="newCount"> <div *ngIf="newCount">
@ -196,26 +198,20 @@
<!-- 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>

2
client/src/app/site/motions/components/motion-import-list/motion-import-list.component.html
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>

47
client/src/app/site/users/components/user-import/user-import-list.component.html
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>