Nachklang/Calendar_Frontend
2
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Finish edit capabilities and add adding capabilities

Browse Source
This commit is contained in:
Patrick Müller
2022-12-26 15:59:24 +01:00
parent 6dd89e4c69
commit 8ae121ca0c
9 changed files with 228 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/event/event.component.html
+63 -66
View File
@@ -1,67 +1,64 @@
<td>
<div *ngIf="editActive">
{{this.event?.calendarId}}
</div>
<div *ngIf="!editActive">
{{this.event?.calendarId}}
</div>
</td>
<td>
<div *ngIf="editActive">
<ng-container *ngIf="editActive">
<td>
{{event?.calendarId}}
</td>
<td class="{{requiredFieldsMissing? 'has-error' : ''}}">
<input type="text" [(ngModel)]="event!.name">
</div>
<div *ngIf="!editActive">
{{this.event?.name}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.description}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.startDateTime}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.endDateTime}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.location}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.createdBy}}
</div>
</td>
<td>
<div *ngIf="editActive">
</div>
<div *ngIf="!editActive">
{{this.event?.url}}
</div>
</td>
<td>
<button (click)="toggleEdit()">{{editActive ? 'Save' : 'Edit'}}</button>
</td>
</td>
<td>
<input type="text" [(ngModel)]="event!.description">
</td>
<td class="{{showDateError || requiredFieldsMissing? 'has-error' : ''}}">
<input type="date" [(ngModel)]="newStartDate" (change)="setStartDateTime()">
<input type="time" [(ngModel)]="newStartTime" (change)="setStartDateTime()">
</td>
<td class="{{showDateError || requiredFieldsMissing? 'has-error' : ''}}">
<input type="date" [(ngModel)]="newEndDate" (change)="setEndDateTime()">
<input type="time" [(ngModel)]="newEndTime" (change)="setEndDateTime()">
</td>
<td>
<input type="text" [(ngModel)]="event!.location">
</td>
<td class="{{showDateError || requiredFieldsMissing? 'has-error' : ''}}">
{{event?.createdBy}}
</td>
<td>
<input type="text" [(ngModel)]="event!.url">
</td>
<td>
<button (click)="toggleEdit()">Save</button>
<p class="has-error" *ngIf="showDateError">Start Date must not be after end date!</p>
<p class="has-error" *ngIf="requiredFieldsMissing">Required fields are missing!</p>
</td>
</ng-container>
<ng-container *ngIf="!editActive">
<td>
{{event?.calendarId}}
</td>
<td>
{{event?.name}}
</td>
<td>
{{event?.description}}
</td>
<td>
<input type="date" [value]="newStartDate" readonly>
<input type="time" [value]="newStartTime" readonly>
</td>
<td>
<input type="date" [value]="newEndDate" readonly>
<input type="time" [value]="newEndTime" readonly>
</td>
<td>
{{event?.location}}
</td>
<td>
{{event?.createdBy}}
</td>
<td>
{{event?.url}}
</td>
<td>
<button (click)="toggleEdit()">Edit</button>
</td>
</ng-container>