WIP: DataSets Module

Frontend/src/app/modules/data-sets/data-set-detail/data-set-detail.component.html

@@ -0,0 +1 @@
+<p>data-set-detail works!</p>

Frontend/src/app/modules/data-sets/data-set-detail/data-set-detail.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataSetDetailComponent } from './data-set-detail.component';
+
+describe('DataSetDetailComponent', () => {
+  let component: DataSetDetailComponent;
+  let fixture: ComponentFixture<DataSetDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataSetDetailComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DataSetDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/modules/data-sets/data-set-detail/data-set-detail.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-data-set-detail',
+  templateUrl: './data-set-detail.component.html',
+  styleUrls: ['./data-set-detail.component.scss']
+})
+export class DataSetDetailComponent {
+
+}

Frontend/src/app/modules/data-sets/data-set-edit/data-set-edit.component.html

@@ -0,0 +1,40 @@
+<div>
+    <form [formGroup]="form" (ngSubmit)="save()" novalidate>
+      <mat-card appearance="outlined">
+        <mat-toolbar color="secondary">
+          Edycja zbioru danych
+          <span class="fill-to-right"></span>
+          <button mat-button type="submit" [disabled]="form.invalid">Zapisz</button>
+          <button mat-button type="button" routerLink="../..">Anuluj</button>
+        </mat-toolbar>
+        <mat-card-content>
+          <mat-grid-list cols="2" rowHeight="90px">
+            <mat-grid-tile>
+              <mat-form-field class="detail-input">
+                <mat-label>Numer</mat-label>
+                <input matInput formControlName="number">
+                <mat-error *ngIf="form.controls['number'].touched && form.controls['number'].invalid">
+                  Pole obowiązkowe
+                </mat-error>
+              </mat-form-field>
+            </mat-grid-tile>
+  
+            <mat-grid-tile>
+                <mat-form-field class="detail-input">
+                  <mat-select placeholder="Źródło" formControlName="name" (selectionChange)="generateNumber()">
+                    <mat-option value="Import ręczny">Import ręczny</mat-option>
+                    <mat-option value="Arkusz Google">Arkusz Google</mat-option>
+                    <mat-option value="SAP">SAP</mat-option>
+                    <mat-option value="Symfonia">Symfonia</mat-option>
+                  </mat-select>
+                  <mat-error *ngIf="form.controls['name'].touched && form.controls['name'].invalid">
+                    Pole obowiązkowe
+                  </mat-error>
+                </mat-form-field>
+              </mat-grid-tile>
+          </mat-grid-list>
+
+        </mat-card-content>
+      </mat-card>
+    </form>
+  </div>

Frontend/src/app/modules/data-sets/data-set-edit/data-set-edit.component.scss

@@ -0,0 +1 @@
+@import "../../../main-view/main-view.component.scss";

Frontend/src/app/modules/data-sets/data-set-edit/data-set-edit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataSetEditComponent } from './data-set-edit.component';
+
+describe('DataSetEditComponent', () => {
+  let component: DataSetEditComponent;
+  let fixture: ComponentFixture<DataSetEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataSetEditComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DataSetEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/modules/data-sets/data-set-edit/data-set-edit.component.ts

@@ -0,0 +1,68 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Router, ActivatedRoute } from '@angular/router';
+import moment from 'moment';
+import { AuthService } from 'src/app/auth/auth.service';
+import { DataSet } from 'src/app/models/dataSet.model';
+import { DataService } from 'src/app/services/data.service';
+import { v4 as uuidv4 } from 'uuid';
+
+@Component({
+  selector: 'app-data-set-edit',
+  templateUrl: './data-set-edit.component.html',
+  styleUrls: ['./data-set-edit.component.scss']
+})
+export class DataSetEditComponent implements OnInit {
+
+  public form!: UntypedFormGroup;
+  private document!: DataSet;
+
+  constructor(
+    private fb$: UntypedFormBuilder,
+    private router$: Router,
+    private http$: HttpClient,
+    private data$: DataService,
+    private route$: ActivatedRoute,
+    private dialog$: MatDialog,
+    private auth$: AuthService
+  ) { }
+
+  async ngOnInit() {
+    this.form = DataSet.getForm(this.fb$);
+    this.document = await this.load();
+    this.document.fillForm(this.form);
+  }
+  private load(): Promise<DataSet> {
+    return new Promise((resolve) => {
+      const id = this.route$.snapshot.paramMap.get('id') || "";
+      if (this.route$.snapshot.paramMap.get('id') === 'new') {
+        resolve(new DataSet({ id: uuidv4(), createdById: this.auth$.user.id, createdAt: moment(),
+          modifiedAt: moment() })) // new element
+        return;
+      }
+      resolve(DataSet.getById(id, this.http$))
+    });
+  }
+  async save() {
+    if (this.form.invalid) {
+      return;
+    }
+    /*
+    this.document.loadForm(this.form);
+    let id;
+    if (this.route$.snapshot.paramMap.get('id') === 'new') {
+      id = await DataSet.add(this.document, this.http$, this._data);
+    } else {
+      id = await DataSet.update(this.document, this._http, this._data);
+    }
+    this._router.navigate(['../../Detail', id], { relativeTo: this._route});
+    */
+  }
+  generateNumber() {
+    this.form.patchValue({
+      number: `${this.form.controls['name'].value}-${moment().format("YYYY")}-${moment().format("MM")}`
+    })
+  }
+}

Frontend/src/app/modules/data-sets/data-sets-list/data-sets-list.component.html

@@ -0,0 +1,38 @@
+<div class="list-container mat-elevation-z8">
+    <div class="list-header">
+      <mat-grid-list cols="10" rowHeight="60">
+        <mat-grid-tile>
+          <button mat-button routerLink="Edit/new">
+            Dodaj
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile [colspan]="8">
+          <mat-form-field class="searchListInput">
+            <mat-label>Filtruj</mat-label>
+            <input matInput (keyup)="applyFilter($event)">
+          </mat-form-field>
+        </mat-grid-tile>
+      </mat-grid-list>
+    </div>
+  
+    <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
+  
+      <ng-container matColumnDef="number">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Numer</mat-header-cell>
+        <mat-cell *matCellDef="let item">{{item.number}}</mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef mat-sort-header>Źródło</mat-header-cell>
+        <mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
+      </ng-container>
+  
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
+    </mat-table>
+    <mat-paginator #paginator
+                   [pageSize]="10"
+                   [pageSizeOptions]="[5, 10, 20]">
+    </mat-paginator>
+  </div>
+  

Frontend/src/app/modules/data-sets/data-sets-list/data-sets-list.component.scss

@@ -0,0 +1 @@
+@import "../../../main-view/main-view.component.scss";

Frontend/src/app/modules/data-sets/data-sets-list/data-sets-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataSetsListComponent } from './data-sets-list.component';
+
+describe('DataSetsListComponent', () => {
+  let component: DataSetsListComponent;
+  let fixture: ComponentFixture<DataSetsListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DataSetsListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DataSetsListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/modules/data-sets/data-sets-list/data-sets-list.component.ts

@@ -0,0 +1,37 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { DataSet } from 'src/app/models/dataSet.model';
+
+@Component({
+  selector: 'app-data-sets-list',
+  templateUrl: './data-sets-list.component.html',
+  styleUrls: ['./data-sets-list.component.scss']
+})
+export class DataSetsListComponent implements OnInit {
+  displayedColumns = ['number', 'name'];
+  dataSource!: MatTableDataSource<DataSet>;
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+
+  constructor(
+    private _http: HttpClient
+  ) { }
+
+  async ngOnInit() {
+    this.dataSource = new MatTableDataSource(await DataSet.getList(this._http));
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(event: Event) {
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter =  filterValue.trim().toLowerCase();
+  }
+  trackByUid(index : number, item : DataSet) {
+    return item.id;
+  }
+}

Frontend/src/app/modules/data-sets/data-sets-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { DataSetDetailComponent } from './data-set-detail/data-set-detail.component';
+import { DataSetEditComponent } from './data-set-edit/data-set-edit.component';
+import { DataSetsListComponent } from './data-sets-list/data-sets-list.component';
+
+const routes: Routes = [
+  { path: '', component: DataSetsListComponent },
+  { path: 'Edit/:id', component: DataSetEditComponent },
+  { path: 'Detail/:id', component: DataSetDetailComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DataSetsRoutingModule { }

Frontend/src/app/modules/data-sets/data-sets.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DataSetsRoutingModule } from './data-sets-routing.module';
+import { DataSetsListComponent } from './data-sets-list/data-sets-list.component';
+import { MaterialModule } from 'src/app/material.module';
+import { DataSetDetailComponent } from './data-set-detail/data-set-detail.component';
+import { DataSetEditComponent } from './data-set-edit/data-set-edit.component';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    DataSetsListComponent,
+    DataSetDetailComponent,
+    DataSetEditComponent
+  ],
+  imports: [
+    CommonModule,
+    DataSetsRoutingModule,
+    MaterialModule,
+    FormsModule,
+    ReactiveFormsModule
+  ]
+})
+export class DataSetsModule { }