Add equipments
Max Ehrlicher-Schmidt
4 years ago
parent
3f3e66b1c9
commit
8d87760c33
@ -1,60 +1,63 @@
|
|||||||
.table-page-wrapper {
|
.table-page-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.headline {
|
.headline {
|
||||||
margin: 0 0.5em;
|
margin: 0 0.5em;
|
||||||
|
}
|
||||||
|
.table-control {
|
||||||
|
margin: 0.5em;
|
||||||
|
flex: none;
|
||||||
|
.table-control-button {
|
||||||
|
margin: 0.25em;
|
||||||
}
|
}
|
||||||
.table-control {
|
.filter {
|
||||||
margin: 0.5em;
|
margin-right: 0.5em;
|
||||||
flex: none;
|
|
||||||
.table-control-button {
|
|
||||||
margin: 0.25em;
|
|
||||||
}
|
|
||||||
.filter {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
.mat-paginator {
|
|
||||||
display: inline-block;
|
|
||||||
width: 50em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.table-container {
|
.mat-paginator {
|
||||||
flex: 1;
|
display: inline-block;
|
||||||
width: auto;
|
width: 50em;
|
||||||
margin-left: 0.5em;
|
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-container {
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
table {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: auto;
|
margin: 0 auto;
|
||||||
table {
|
.mat-header-cell,
|
||||||
max-width: 100%;
|
.mat-footer-cell,
|
||||||
margin: 0 auto;
|
.mat-cell {
|
||||||
.mat-header-cell,
|
min-width: 3em;
|
||||||
.mat-footer-cell,
|
box-sizing: border-box;
|
||||||
.mat-cell {
|
padding: 0 0.25em;
|
||||||
min-width: 3em;
|
::ng-deep.mat-form-field-infix {
|
||||||
box-sizing: border-box;
|
width: auto !important;
|
||||||
padding: 0 0.25em;
|
min-width: 50px !important;
|
||||||
::ng-deep.mat-form-field-infix {
|
|
||||||
width: auto !important;
|
|
||||||
min-width: 50px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
::ng-deep.mat-form-field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-table-sticky {
|
|
||||||
filter: brightness(90%);
|
|
||||||
//opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.mat-header-cell:first-child,
|
||||||
|
.mat-cell:first-child {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
::ng-deep.mat-form-field {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-table-sticky {
|
||||||
|
filter: brightness(90%);
|
||||||
|
//opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,33 @@
|
|||||||
|
query GetEquipments {
|
||||||
|
equipment {
|
||||||
|
...EquipmentFieldsForTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation CreateEquipment($equipmentType: EquipmentCreateInput!) {
|
||||||
|
createEquipment(equipment: $equipmentType) {
|
||||||
|
...EquipmentFieldsForTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation UpdateEquipment($equipmentType: EquipmentUpdateInput!) {
|
||||||
|
updateEquipment(equipment: $equipmentType) {
|
||||||
|
...EquipmentFieldsForTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation LockEquipment($id: ID!) {
|
||||||
|
lockEquipment(id: $id) {
|
||||||
|
...EquipmentFieldsForTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation UnlockEquipment($id: ID!) {
|
||||||
|
unlockEquipment(id: $id) {
|
||||||
|
...EquipmentFieldsForTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mutation DeleteEquipment($id: ID!) {
|
||||||
|
deleteEquipment(id: $id)
|
||||||
|
}
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<app-table
|
||||||
|
[headline]="headline"
|
||||||
|
[columnInfo]="columnInfo"
|
||||||
|
[dataService]="dataService"
|
||||||
|
[tableDataGQLType]="tableDataGQLType"
|
||||||
|
[tableDataGQLCreateInputType]="tableDataGQLCreateInputType"
|
||||||
|
[tableDataGQLUpdateInputType]="tableDataGQLUpdateInputType"
|
||||||
|
(createEvent)="create($event)"
|
||||||
|
(lockEvent)="lock($event)"
|
||||||
|
(saveEvent)="save($event)"
|
||||||
|
(cancelEvent)="cancel($event)"
|
||||||
|
(deleteEvent)="delete($event)"
|
||||||
|
></app-table>
|
||||||
@ -0,0 +1,58 @@
|
|||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { EquipmentService } from 'src/app/services/equipment.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-equipment',
|
||||||
|
templateUrl: './equipment.component.html',
|
||||||
|
styleUrls: ['./equipment.component.scss'],
|
||||||
|
})
|
||||||
|
export class EquipmentComponent implements OnInit {
|
||||||
|
headline = 'Equipment';
|
||||||
|
|
||||||
|
columnInfo = [
|
||||||
|
{ dataPath: 'id', translation: 'ID', readonly: true },
|
||||||
|
{ dataPath: 'serialNo', translation: 'Seriennummer' },
|
||||||
|
{ dataPath: 'title', translation: 'Name' },
|
||||||
|
{ dataPath: 'description', translation: 'Beschreibung' },
|
||||||
|
{
|
||||||
|
dataPath: 'cargoBike.name',
|
||||||
|
translation: 'Lastenrad',
|
||||||
|
link: (element) => {
|
||||||
|
return '/bike/' + element['cargoBike.id'];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
dataService: EquipmentService;
|
||||||
|
|
||||||
|
tableDataGQLType: string = 'Equipment';
|
||||||
|
tableDataGQLCreateInputType: string = 'EquipmentCreateInput';
|
||||||
|
tableDataGQLUpdateInputType: string = 'EquipmentUpdateInput';
|
||||||
|
|
||||||
|
loadingRowIds: string[] = [];
|
||||||
|
constructor(private service: EquipmentService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.dataService = this.service;
|
||||||
|
}
|
||||||
|
|
||||||
|
create(value: { currentId: string; row: any }) {
|
||||||
|
this.dataService.create(value.currentId, { equipmentType: value.row });
|
||||||
|
}
|
||||||
|
|
||||||
|
lock(row: any) {
|
||||||
|
this.dataService.lock({ id: row.id });
|
||||||
|
}
|
||||||
|
|
||||||
|
save(row: any) {
|
||||||
|
this.dataService.update({ equipmentType: row });
|
||||||
|
}
|
||||||
|
|
||||||
|
cancel(row: any) {
|
||||||
|
this.dataService.unlock({ id: row.id });
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(row: any) {
|
||||||
|
this.dataService.delete({ id: row.id });
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject, Subject } from 'rxjs';
|
||||||
|
import {
|
||||||
|
GetEquipmentsGQL,
|
||||||
|
CreateEquipmentGQL,
|
||||||
|
CreateEquipmentMutationVariables,
|
||||||
|
UpdateEquipmentGQL,
|
||||||
|
UpdateEquipmentMutationVariables,
|
||||||
|
LockEquipmentGQL,
|
||||||
|
LockEquipmentMutationVariables,
|
||||||
|
UnlockEquipmentGQL,
|
||||||
|
UnlockEquipmentMutationVariables,
|
||||||
|
DeleteEquipmentGQL,
|
||||||
|
DeleteEquipmentMutationVariables,
|
||||||
|
} from '../../generated/graphql';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class EquipmentService {
|
||||||
|
/** Equipments Array */
|
||||||
|
tableData: BehaviorSubject<any[]> = new BehaviorSubject(null);
|
||||||
|
loadingRowIds: BehaviorSubject<string[]> = new BehaviorSubject([]);
|
||||||
|
successfullyCreatedRowWithId: Subject<string> = new Subject();
|
||||||
|
//pageData: BehaviorSubject<any> = new BehaviorSubject([]);
|
||||||
|
//isLoadingPageData: BehaviorSubject<boolean> = new BehaviorSubject(false);
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private getEquipmentsGQL: GetEquipmentsGQL,
|
||||||
|
private createEquipmentGQL: CreateEquipmentGQL,
|
||||||
|
private updateEquipmentGQL: UpdateEquipmentGQL,
|
||||||
|
private lockEquipmentGQL: LockEquipmentGQL,
|
||||||
|
private unlockEquipmentGQL: UnlockEquipmentGQL,
|
||||||
|
private deleteEquipmentGQL: DeleteEquipmentGQL
|
||||||
|
) {}
|
||||||
|
|
||||||
|
addLoadingRowId(id: string) {
|
||||||
|
this.loadingRowIds.next([...this.loadingRowIds.value, id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeLoadingRowId(id: string) {
|
||||||
|
this.loadingRowIds.value.forEach((item, index) => {
|
||||||
|
if (item === id) {
|
||||||
|
this.loadingRowIds.value.splice(index, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loadingRowIds.next(this.loadingRowIds.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
loadTableData() {
|
||||||
|
this.tableData.next(null);
|
||||||
|
this.getEquipmentsGQL.fetch().subscribe((result) => {
|
||||||
|
this.tableData.next(result.data.equipment);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
create(currentId: string, variables: CreateEquipmentMutationVariables) {
|
||||||
|
this.createEquipmentGQL.mutate(variables).subscribe((result) => {
|
||||||
|
const newRow = result.data.createEquipment;
|
||||||
|
this.tableData.next([newRow, ...this.tableData.value]);
|
||||||
|
this.successfullyCreatedRowWithId.next(currentId);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
update(variables: UpdateEquipmentMutationVariables) {
|
||||||
|
this.addLoadingRowId(variables.equipmentType.id);
|
||||||
|
this.updateEquipmentGQL
|
||||||
|
.mutate(variables)
|
||||||
|
.subscribe((result) => {
|
||||||
|
this.updateDataRowFromResponse(result.data.updateEquipment);
|
||||||
|
})
|
||||||
|
.add(() => {
|
||||||
|
this.removeLoadingRowId(variables.equipmentType.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lock(variables: LockEquipmentMutationVariables) {
|
||||||
|
this.addLoadingRowId(variables.id);
|
||||||
|
this.lockEquipmentGQL
|
||||||
|
.mutate(variables)
|
||||||
|
.subscribe((result) => {
|
||||||
|
this.updateDataRowFromResponse(result.data.lockEquipment);
|
||||||
|
})
|
||||||
|
.add(() => {
|
||||||
|
this.removeLoadingRowId(variables.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
unlock(variables: UnlockEquipmentMutationVariables) {
|
||||||
|
this.addLoadingRowId(variables.id);
|
||||||
|
this.unlockEquipmentGQL
|
||||||
|
.mutate(variables)
|
||||||
|
.subscribe((result) => {
|
||||||
|
this.updateDataRowFromResponse(result.data.unlockEquipment);
|
||||||
|
})
|
||||||
|
.add(() => {
|
||||||
|
this.removeLoadingRowId(variables.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
delete(variables: DeleteEquipmentMutationVariables) {
|
||||||
|
this.addLoadingRowId(variables.id);
|
||||||
|
this.deleteEquipmentGQL
|
||||||
|
.mutate(variables)
|
||||||
|
.subscribe((result) => {
|
||||||
|
if (result.data.deleteEquipment) {
|
||||||
|
this.tableData.next(
|
||||||
|
[...this.tableData.value].filter((bike) => bike.id !== variables.id)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.add(() => {
|
||||||
|
this.removeLoadingRowId(variables.id);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateDataRowFromResponse(rowFromResponse: any) {
|
||||||
|
if (this.tableData.value) {
|
||||||
|
const newTableData = this.tableData.value.map((row) =>
|
||||||
|
rowFromResponse.id === row.id ? rowFromResponse : row
|
||||||
|
);
|
||||||
|
this.tableData.next(newTableData);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue