tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

adding reodering of choices beginning

Browse Source
This commit is contained in:
tykayn 2020-11-09 11:42:54 +01:00
parent 3306e7c29d
commit 1745762ba3
3 changed files with 68 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/features/administration/form/form.component.html
View File

@ -64,14 +64,21 @@
</div>
<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
<div *ngFor="let time of timeList; index as id" class="time-choice">
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
<input
[(ngModel)]="time.literal"
name="timeChoices_{{ id }}"
type="text"
id="timeChoices_{{ id }}"
/>
<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<hr />

48
src/app/features/administration/form/form.component.scss
View File

@ -27,4 +27,52 @@
margin-right: 0;
}
}
.example-list {
width: 500px;
max-width: 100%;
border: solid 1px #ccc;
min-height: 60px;
display: block;
background: white;
border-radius: 4px;
overflow: hidden;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
}

6
src/app/features/administration/form/form.component.ts
View File

@ -8,6 +8,7 @@ import { PollService } from '../../../core/services/poll.service';
import { DateUtilities } from '../../old-stuff/config/DateUtilities';
import { DOCUMENT } from '@angular/common';
import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-admin-form',
@ -40,7 +41,9 @@ export class FormComponent implements OnInit {
private apiService: ApiService,
@Inject(DOCUMENT) private document: any
) {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
}
get choices(): FormArray {
return this.form.get('choices') as FormArray;
}
@ -172,6 +175,7 @@ export class FormComponent implements OnInit {
areResultsPublic: true,
expiracyNumberOfDays: 60,
});
this.automaticSlug();
}
askInitFormDefault(): void {