added due-date to project add-edit dialog

This commit is contained in:
Timo Bejan 2020-10-23 11:29:25 +03:00
parent 7f7b07a825
commit 2de60df5fd
7 changed files with 105 additions and 91 deletions

View File

@ -58,6 +58,8 @@ import { RedRoleGuard } from './auth/red-role.guard';
import { MatListModule } from '@angular/material/list';
import { AssignOwnerDialogComponent } from './dialogs/assign-owner-dialog/assign-owner-dialog.component';
import {MatDatepickerModule} from "@angular/material/datepicker";
import {MatNativeDateModule} from "@angular/material/core";
import {MatInputModule} from "@angular/material/input";
export function HttpLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@ -85,87 +87,89 @@ export function HttpLoaderFactory(httpClient: HttpClient) {
AnnotationIconComponent,
AuthErrorComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AuthModule,
IconsModule,
ApiModule,
MatDialogModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
AuthModule,
IconsModule,
ApiModule,
MatDialogModule,
MatNativeDateModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}),
RouterModule.forRoot([
{
path: '',
redirectTo: 'ui/projects',
pathMatch: 'full'
},
{
path: 'auth-error',
component: AuthErrorComponent,
canActivate: [AuthGuard]
},
{
path: 'ui',
component: BaseScreenComponent,
children: [
{
path: 'projects',
component: ProjectListingScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
}),
RouterModule.forRoot([
{
path: '',
redirectTo: 'ui/projects',
pathMatch: 'full'
},
{
path: 'auth-error',
component: AuthErrorComponent,
canActivate: [AuthGuard]
},
{
path: 'ui',
component: BaseScreenComponent,
children: [
{
path: 'projects',
component: ProjectListingScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
},
{
path: 'projects/:projectId',
component: ProjectOverviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
},
{
path: 'projects/:projectId/file/:fileId',
component: FilePreviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
}
]
},
{
path: 'projects/:projectId',
component: ProjectOverviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
},
{
path: 'projects/:projectId/file/:fileId',
component: FilePreviewScreenComponent,
canActivate: [CompositeRouteGuard],
data: {
routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard]
}
}
]
}
]),
NgpSortModule,
MatToolbarModule,
MatButtonModule,
MatSlideToggleModule,
MatMenuModule,
MatIconModule,
MatTooltipModule,
MatSnackBarModule,
MatTabsModule,
MatButtonToggleModule,
MatFormFieldModule,
ToastrModule.forRoot(),
MatSelectModule,
MatSidenavModule,
FileUploadModule,
ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
MatProgressSpinnerModule,
MatCheckboxModule,
MatListModule,
MatDatepickerModule
],
]),
NgpSortModule,
MatToolbarModule,
MatButtonModule,
MatSlideToggleModule,
MatMenuModule,
MatIconModule,
MatTooltipModule,
MatSnackBarModule,
MatTabsModule,
MatButtonToggleModule,
MatFormFieldModule,
ToastrModule.forRoot(),
MatSelectModule,
MatSidenavModule,
FileUploadModule,
ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
MatProgressSpinnerModule,
MatCheckboxModule,
MatListModule,
MatDatepickerModule,
MatInputModule
],
providers: [{
provide: HTTP_INTERCEPTORS,
multi: true,

View File

@ -17,14 +17,12 @@
<textarea formControlName="description" name="description" type="text" rows="5"></textarea>
</div>
<!-- <div class="red-input-group">-->
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>{{'project-listing.add-edit-dialog.form.dueDate.label' | translate}}</mat-label>-->
<!-- <input matInput [matDatepicker]="picker">-->
<!-- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>-->
<!-- <mat-datepicker #picker formControlName="dueDate"></mat-datepicker>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<mat-form-field>
<mat-label>{{'project-listing.add-edit-dialog.form.due-date.label' | translate}}</mat-label>
<input matInput [matDatepicker]="picker" formControlName="dueDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>

View File

@ -24,7 +24,7 @@ export class AddEditProjectDialogComponent implements OnInit {
this.projectForm = this._formBuilder.group({
projectName: [this.project?.projectName, Validators.required],
description: [this.project?.description],
// dueDate: [this.project?.dueDate]
dueDate: [this.project?.dueDate]
});
}
@ -40,7 +40,7 @@ export class AddEditProjectDialogComponent implements OnInit {
return {
projectName: this.projectForm.get('projectName').value,
description: this.projectForm.get('description').value,
// dueDate: this.projectForm.get('dueDate').value
dueDate: this.projectForm.get('dueDate').value
}
}
}

View File

@ -18,7 +18,7 @@ export class IconsModule {
'check', 'close', 'document', 'double-chevron-right', 'download',
'edit', 'error', 'folder', 'info', 'lightning', 'logout', 'menu', 'pages',
'plus', 'preview', 'refresh', 'report', 'secret', 'sort-asc', 'sort-desc',
'status', 'trash', 'user', 'check-alt'
'status', 'trash', 'user', 'check-alt',"flash"
];
for (const icon of icons) {

View File

@ -31,7 +31,7 @@
<div class="left-container">
<div class="table-header">
<span class="all-caps-label">
{{'project-listing.table-header.title.label'| translate:{ length: appStateService.allProjects?.length || 0 } }}
{{'project-listing.table-header.title.label'| translate:{length: appStateService.allProjects?.length || 0} }}
</span>
<div class="actions">
<div translate="project-listing.table-header.bulk-select.label"></div>
@ -71,7 +71,12 @@
{{userCount(pw)}}</div>
<div>
<mat-icon svgIcon="red:calendar"></mat-icon>
{{pw.project.date | date:'mediumDate'}}</div>
{{pw.project.date | date:'mediumDate'}}
</div>
<div *ngIf="pw.project.dueDate">
<mat-icon svgIcon="red:flash"></mat-icon>
{{pw.project.dueDate | date:'mediumDate'}}
</div>
</div>
</div>
<div class="flex-1">

View File

@ -216,6 +216,9 @@
},
"name": {
"label": "Name"
},
"due-date": {
"label": "Due Date"
}
},
"actions": {

View File

@ -0,0 +1,4 @@
<svg height="511pt" viewBox="-91 0 511 511.99948" width="511pt" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor"
d="m315.5 211h-124.214844l107.253906-188.585938c2.640626-4.640624 2.609376-10.339843-.074218-14.957031-2.683594-4.617187-7.625-7.457031-12.964844-7.457031h-180c-6.460938 0-12.199219 4.140625-14.234375 10.273438l-90 270.996093c-1.519531 4.574219-.75 9.597657 2.070313 13.507813 2.820312 3.90625 7.34375 6.222656 12.164062 6.222656h127.292969l-81.089844 190.113281c-2.886719 6.769531-.441406 14.628907 5.777344 18.5625 6.21875 3.933594 14.371093 2.773438 19.25-2.730469l240-271c8.546875-9.65625 1.679687-24.945312-11.230469-24.945312zm-189.921875 206.832031 53.71875-125.945312c4.210937-9.875-3.039063-20.886719-13.796875-20.886719h-129.214844l80.039063-241h143.386719l-107.25 188.582031c-5.671876 9.972657 1.535156 22.417969 13.039062 22.417969h116.679688zm0 0"/>
</svg>

After

Width:  |  Height:  |  Size: 902 B