This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
Commit 6196ddb2 authored by Daniel Crazzolara's avatar Daniel Crazzolara
Browse files

Various Form improvements

parent 0091e885
2 merge requests!188Merging Peer Reviewing et. al to Master,!164211 peer reviewing functionality
Hide whitespace changes
Inline Side-by-side
Showing
with 129 additions and 24 deletions
src/main/webapp/app/exercise/exercise-details/exercise-metadata/exercise-metadata.component.html
+ 3
− 3
View file @ 6196ddb2
......@@ -4,17 +4,17 @@
</p>
<hr>
<ng-container *ngIf="exercise.creators">
<ng-container *ngIf="exercise.creator">
<jhi-exercise-metadata-item
*ngIf="isAuthenticated()"
[description]="'exercise.metadata.creator'"
[value]="exercise.creators.map(getPersonDetailsWithEmail)"
[value]="exercise.creator.map(getPersonDetailsWithEmail)"
[treatAsHTML]="true">
</jhi-exercise-metadata-item>
<jhi-exercise-metadata-item
*ngIf="!isAuthenticated()"
[description]="'exercise.metadata.creator'"
[value]="exercise.creators.map(getPersonDetails)"
[value]="exercise.creator.map(getPersonDetails)"
[treatAsHTML]="true">
</jhi-exercise-metadata-item>
</ng-container>
......
src/main/webapp/app/exercise/import/exercise-import.component.html
+ 20
− 9
View file @ 6196ddb2
......@@ -40,6 +40,7 @@
<div class="form-group position-relative">
<label class="form-control-label" jhiTranslate="exercise.metadata.keyword.plural">Keywords</label>
<tag-input [(ngModel)]='exerciseInfo.keyword'
[modelAsStrings]="true"
[addOnBlur]="true"
theme="bootstrap"
class="tag-input"
......@@ -53,7 +54,8 @@
<h4 class="mt-5" jhiTranslate="exercise.import.form.optionalAttributes">Optional Attributes</h4>
<div class="form-group">
<label class="form-control-label" jhiTranslate="exercise.metadata.description">Description</label>
<input type="text" class="form-control" [value]="exerciseInfo.description ? exerciseInfo.description : ''"/>
<input type="text" class="form-control" name="description" [(ngModel)]='exerciseInfo.description'
[value]="exerciseInfo.description ? exerciseInfo.description : ''"/>
</div>
<div class="form-group">
<ng-template #helpStructure> {{ 'exercise.help.structure' | translate}}</ng-template>
......@@ -61,16 +63,19 @@
[ngbTooltip]="helpStructure"
placement="left"></fa-icon>
<label class="form-control-label" jhiTranslate="exercise.metadata.structure">Structure</label>
<input type="text" disabled class="form-control" [value]="exerciseInfo.structure ? exerciseInfo.structure : ''"/>
<input type="text" disabled class="form-control" name="structure" [(ngModel)]='exerciseInfo.structure'
[value]="exerciseInfo.structure ? exerciseInfo.structure : ''"/>
</div>
<div class="form-group">
<label class="form-control-label" jhiTranslate="exercise.metadata.language.singular">Language</label>
<input type="text" class="form-control" [value]="exerciseInfo.languages ? exerciseInfo.languages : ''"/>
<input type="text" class="form-control" name="language" [(ngModel)]='exerciseInfo.languages'
[value]="exerciseInfo.languages ? exerciseInfo.languages : ''"/>
</div>
<div class="form-group position-relative">
<label class="form-control-label" jhiTranslate="exercise.metadata.programmingLanguage.plural">Programming languages</label>
<tag-input [(ngModel)]='exerciseInfo.programmingLanguages'
[addOnBlur]="true"
[modelAsStrings]="true"
theme="bootstrap"
class="tag-input"
name="Programming Languages"
......@@ -81,7 +86,7 @@
<br>
<div class="btn-group">
<div class="p-2 btn" *ngFor="let difficulty of getDifficulties()"
[ngClass]="{ 'btn-primary': exerciseInfo.difficulty === difficulty, 'btn-outline-primary': exerciseInfo.difficulty !== difficulty }"
[ngClass]="{ 'btn-primary': isDifficulty(difficulty), 'btn-outline-primary': !isDifficulty(difficulty) }"
(click)="setDifficulty(difficulty)" jhiTranslate="exercise.metadata.{{difficulty.toLowerCase()}}"></div>
<div class="p-2 btn" [ngClass]="{ 'btn-primary': exerciseInfo.difficulty === undefined, 'btn-outline-primary': exerciseInfo.difficulty !== undefined }"
(click)="setDifficulty('')" jhiTranslate="exercise.metadata.none"></div>
......@@ -95,10 +100,10 @@
<label class="col form-control-label" jhiTranslate="exercise.metadata.person.email">Email</label>
</div>
<div class="grid-striped mb-2">
<div class="row rounded" *ngFor="let creator of exerciseInfo.creators">
<span class="col text-center">{{creator.name}}</span>
<span class="col text-center">{{creator.affiliation}}</span>
<span class="col text-center">{{creator.email}}</span>
<div class="row rounded" *ngFor="let creator of exerciseInfo.creator">
<span class="col text-center my-auto">{{creator.name}}</span>
<span class="col text-center my-auto">{{creator.affiliation}}</span>
<span class="col text-center my-auto">{{creator.email}}</span>
<div class="btn btn-outline-primary col-1" (click)="removeCreator(creator)">-</div>
</div>
</div>
......@@ -111,7 +116,8 @@
</div>
<div class="form-group">
<label class="form-control-label" jhiTranslate="exercise.metadata.source">Source</label>
<input type="text" class="form-control" [value]="exerciseInfo.source ? exerciseInfo.source : ''"/>
<input type="text" class="form-control" name="source" [(ngModel)]='exerciseInfo.source'
[value]="exerciseInfo.source ? exerciseInfo.source : ''"/>
</div>
<button type="submit" [disabled]="importForm.form.invalid || isLoading" class="btn btn-outline-primary mt-3">
<fa-icon class="align-middle" [icon]="'save'"></fa-icon> <span jhiTranslate="exercise.import.form.submit">Submit</span>
......@@ -120,4 +126,9 @@
</div>
</div>
</div>
<div *ngIf="isImporting" class="overlay">
<div class="h-100 w-100 d-flex justify-content-center align-items-center">
<div class="spinner"></div>
</div>
</div>
<div *ngIf="isLoading" class="spinner-border" role="status"></div>
src/main/webapp/app/exercise/import/exercise-import.component.scss
+ 64
− 0
View file @ 6196ddb2
.grid-striped .row:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0.05);
}
.spinner {
height: 60px;
width: 60px;
margin: auto;
display: flex;
position: absolute;
-webkit-animation: rotation 0.6s infinite linear;
-moz-animation: rotation 0.6s infinite linear;
-o-animation: rotation 0.6s infinite linear;
animation: rotation 0.6s infinite linear;
border-left: 6px solid rgba(0, 174, 239, 0.15);
border-right: 6px solid rgba(0, 174, 239, 0.15);
border-bottom: 6px solid rgba(0, 174, 239, 0.15);
border-top: 6px solid rgba(0, 174, 239, 0.8);
border-radius: 100%;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes rotation {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-o-keyframes rotation {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
src/main/webapp/app/exercise/import/exercise-import.component.ts
+ 33
− 11
View file @ 6196ddb2
......@@ -22,6 +22,7 @@ export class ExerciseImportComponent implements OnInit {
newCreator = { name: '', email: '', affiliation: '' } as Person;
selectedGitlabGroup: GitlabGroup | undefined;
isLoading = false;
isImporting = false;
constructor(
private route: ActivatedRoute,
......@@ -42,7 +43,7 @@ export class ExerciseImportComponent implements OnInit {
this.exerciseInfo.programmingLanguages = this.exerciseInfo.programmingLanguages.map(programmingLanguage =>
this.toTitleCase(programmingLanguage)
);
this.exerciseInfo.creators = data['creator'];
this.exerciseInfo.creator = data['creator'];
},
error => {
this.jhiAlertService.error('Error loading info of artemis exercise: ' + error.error);
......@@ -56,12 +57,16 @@ export class ExerciseImportComponent implements OnInit {
* Actual import function submitting import form to server
*/
import() {
this.isLoading = true;
if (this.exerciseInfo!.difficulty !== null) {
this.exerciseInfo!.difficulty = this.exerciseInfo!.difficulty?.toLowerCase();
}
this.openGitlabPathSelectorModal().then(gitlabGroup => {
if (gitlabGroup !== undefined) {
this.isLoading = true;
this.isImporting = true;
this.exerciseService.submitExerciseInfoForImport(this.exerciseInfo!, this.exerciseToken!, gitlabGroup.id).subscribe(
() => {
// window.location.href = '/';
window.location.href = this.route.snapshot.queryParams['callback'];
},
error => {
this.jhiAlertService.error(error.error);
......@@ -70,8 +75,12 @@ export class ExerciseImportComponent implements OnInit {
}
});
this.isLoading = false;
this.isImporting = false;
}
/**
* Utility function used to open the Gitlab selector modal
*/
openGitlabPathSelectorModal() {
const modalRef = this.modalService.open(GitlabPathSelectorComponent, { size: 'xl', backdrop: 'static' });
return modalRef.result.then(group => {
......@@ -103,10 +112,10 @@ export class ExerciseImportComponent implements OnInit {
*/
addCreator() {
if (!(this.newCreator.name === '' || this.newCreator.affiliation === '' || this.newCreator.email === '')) {
if (this.exerciseInfo && this.exerciseInfo?.creators === undefined) {
this.exerciseInfo.creators = [];
if (this.exerciseInfo && this.exerciseInfo?.creator === undefined) {
this.exerciseInfo.creator = [];
}
this.exerciseInfo?.creators.push(this.newCreator);
this.exerciseInfo?.creator.push(this.newCreator);
this.newCreator = { name: '', email: '', affiliation: '' } as Person;
}
}
......@@ -117,7 +126,7 @@ export class ExerciseImportComponent implements OnInit {
* @param creator
*/
removeCreator(creator: Person) {
this.exerciseInfo!.creators = this.exerciseInfo!.creators.filter(person => person !== creator);
this.exerciseInfo!.creator = this.exerciseInfo!.creator.filter(person => person !== creator);
}
/**
......@@ -133,7 +142,7 @@ export class ExerciseImportComponent implements OnInit {
* for an exercise
*/
getDifficulties() {
return ['SIMPLE', 'MEDIUM', 'ADVANCED'];
return ['simple', 'medium', 'advanced'];
}
/**
......@@ -142,15 +151,28 @@ export class ExerciseImportComponent implements OnInit {
getTypes() {
return Object.keys(IExerciseType)
.map(key => IExerciseType[key])
.filter(type => type !== 'collection');
.filter(type => type !== 'collection'); // no supported yet
}
/**
* Utility function used to check if the given type is the same
* as the exercise
* as the imported exercise
* @param type to check
*/
isExerciseType(type: string) {
return IExerciseType[this.exerciseInfo!.type] === IExerciseType[type.toUpperCase().replace(' ', '_')];
return IExerciseType[this.exerciseInfo!.type.toUpperCase().replace(' ', '_')] === IExerciseType[type.toUpperCase().replace(' ', '_')];
}
/**
* Utility function used to check if the given difficulty is
* the same as the imported exercise
* @param difficulty to check
*/
isDifficulty(difficulty: string) {
if (this.exerciseInfo!.difficulty !== undefined) {
return this.exerciseInfo!.difficulty!.toLowerCase() === difficulty.toLowerCase();
} else {
return false;
}
}
}
src/main/webapp/app/exercise/import/exercise-import.module.ts
+ 9
− 1
View file @ 6196ddb2
......@@ -6,9 +6,17 @@ import { ExerciseModule } from 'app/exercise/exercise.module';
import { ExerciseImportComponent } from 'app/exercise/import/exercise-import.component';
import { TagInputModule } from 'ngx-chips';
import { GitlabModule } from 'app/shared/gitlab/gitlab.module';
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [RouterModule.forChild(EXERCISE_IMPORT_ROUTE), GitSearchV2SharedModule, ExerciseModule, TagInputModule, GitlabModule],
imports: [
RouterModule.forChild(EXERCISE_IMPORT_ROUTE),
GitSearchV2SharedModule,
ExerciseModule,
TagInputModule,
GitlabModule,
FormsModule,
],
declarations: [ExerciseImportComponent],
exports: [ExerciseImportComponent],
})
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment