Add equipments
Max Ehrlicher-Schmidt
4 years ago
parent
3f3e66b1c9
commit
8d87760c33
@ -1,60 +1,63 @@
|
||||
.table-page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.headline {
|
||||
margin: 0 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.headline {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.table-control {
|
||||
margin: 0.5em;
|
||||
flex: none;
|
||||
.table-control-button {
|
||||
margin: 0.25em;
|
||||
}
|
||||
.table-control {
|
||||
margin: 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;
|
||||
}
|
||||
.filter {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.table-container {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
margin-left: 0.5em;
|
||||
.mat-paginator {
|
||||
display: inline-block;
|
||||
width: 50em;
|
||||
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%;
|
||||
overflow: auto;
|
||||
table {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
.mat-header-cell,
|
||||
.mat-footer-cell,
|
||||
.mat-cell {
|
||||
min-width: 3em;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.25em;
|
||||
::ng-deep.mat-form-field-infix {
|
||||
width: auto !important;
|
||||
min-width: 50px !important;
|
||||
}
|
||||
}
|
||||
::ng-deep.mat-form-field {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
.mat-header-cell,
|
||||
.mat-footer-cell,
|
||||
.mat-cell {
|
||||
min-width: 3em;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.25em;
|
||||
::ng-deep.mat-form-field-infix {
|
||||
width: auto !important;
|
||||
min-width: 50px !important;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.mat-table-sticky {
|
||||
filter: brightness(90%);
|
||||
//opacity: 1;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.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