torben/gelegeapp-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added the color picker for the states

Browse Source 
create copys before editing the user, area, entity and state
This commit is contained in:
Torben Indorf
2020-02-16 12:30:03 +01:00
parent 4e1a51c823
commit b84983ccef
8 changed files with 109 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/area/CreateArea.component.vue
+15 -8
View File
@@ -3,7 +3,7 @@
@click:outside="closeDialog"> @click:outside="closeDialog">
<v-card class="pa-6 white"> <v-card class="pa-6 white">
<div class="headline text-center mb-6"> <div class="headline text-center mb-6">
{{ selectedArea.id ? 'Gebiet bearbeiten' : 'Gebiet erstellen' }} {{ areaCopy.id ? 'Gebiet bearbeiten' : 'Gebiet erstellen' }}
</div> </div>
<v-card-text> <v-card-text>
<v-form class="d-flex flex-column"> <v-form class="d-flex flex-column">
@@ -11,18 +11,18 @@
<v-text-field hide-details outlined placeholder="Gebietsname" name="name" <v-text-field hide-details outlined placeholder="Gebietsname" name="name"
data-vv-as="Gebietsname" data-vv-as="Gebietsname"
v-validate="'required'" v-validate="'required'"
v-model="selectedArea.name"/> v-model="areaCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span> <span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row> </v-row>
<v-row> <v-row>
<v-checkbox label="Aktiv" v-model="selectedArea.active"/> <v-checkbox label="Aktiv" v-model="areaCopy.active"/>
</v-row> </v-row>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn> <v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveArea"> <v-btn color="primary" @click="saveArea">
{{ selectedArea.id ? 'Gebiet speichern' : 'Gebiet erstellen' }} {{ areaCopy.id ? 'Gebiet speichern' : 'Gebiet erstellen' }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@@ -30,7 +30,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {Area} from '@/models/Area'; import {Area} from '@/models/Area';
import {namespace} from 'vuex-class'; import {namespace} from 'vuex-class';
@@ -45,12 +45,19 @@
@Prop({default: () => new Area({})}) @Prop({default: () => new Area({})})
public selectedArea?: Area; public selectedArea?: Area;
public areaCopy: Area = new Area({});
@AreaStore.Action('createAreaAction') @AreaStore.Action('createAreaAction')
private createAreaAction!: (areaData: any) => Promise<Area[]>; private createAreaAction!: (areaData: any) => Promise<Area[]>;
@AreaStore.Action('editAreaAction') @AreaStore.Action('editAreaAction')
private editAreaAction!: (areaData: any) => Promise<Area>; private editAreaAction!: (areaData: any) => Promise<Area>;
@Watch('selectedArea', {immediate: true})
private onAreaChange() {
this.areaCopy = this.selectedArea!.deepCopy();
}
private closeDialog() { private closeDialog() {
this.$emit('closeDialog'); this.$emit('closeDialog');
} }
@@ -58,10 +65,10 @@
private saveArea() { private saveArea() {
this.$validator.validateAll().then(async (result) => { this.$validator.validateAll().then(async (result) => {
if (result) { if (result) {
if (this.selectedArea!.id) { if (this.areaCopy!.id) {
await this.editAreaAction(this.selectedArea); await this.editAreaAction(this.areaCopy);
} else { } else {
await this.createAreaAction(this.selectedArea); await this.createAreaAction(this.areaCopy);
} }
this.closeDialog(); this.closeDialog();
} else { } else {
src/components/entity/CreateEntity.component.vue
+35 -9
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog"> @click:outside="closeDialog">
<v-card class="pa-6 white"> <v-card class="pa-6 white">
<div class="headline text-center mb-6"> <div class="headline text-center mb-6">
{{ selectedEntity.id ? 'Entität bearbeiten' : 'Entität erstellen' }} {{ entityCopy.id ? 'Entität bearbeiten' : 'Entität erstellen' }}
</div> </div>
<v-card-text> <v-card-text>
<v-form class="d-flex flex-column"> <v-form class="d-flex flex-column">
@@ -13,23 +13,30 @@
name="name" name="name"
data-vv-as="Entität-Name" data-vv-as="Entität-Name"
v-validate="'required'" v-validate="'required'"
v-model="selectedEntity.name"/> v-model="entityCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span> <span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row> </v-row>
<v-row class="d-flex align-center flex-column">
<v-label>Statusfarbe</v-label>
<div>
<v-color-picker :value="entityCopy.color" @update:color="colorSelected" class="ma-2"
:swatches="predefinedColors" show-swatches></v-color-picker>
</div>
</v-row>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions class="d-flex justify-space-between">
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveEntity"> <v-btn color="primary" @click="saveEntity">
{{ selectedEntity.id ? 'Entität speichern' : 'Entität erstellen' }} {{ entityCopy.id ? 'Entität speichern' : 'Entität erstellen' }}
</v-btn> </v-btn>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-dialog> </v-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {namespace} from 'vuex-class'; import {namespace} from 'vuex-class';
import {Entity} from '@/models/Entity'; import {Entity} from '@/models/Entity';
@@ -44,12 +51,31 @@
@Prop({default: () => new Entity({})}) @Prop({default: () => new Entity({})})
public selectedEntity?: Entity; public selectedEntity?: Entity;
public entityCopy: Entity = new Entity({});
@EntityStore.Action('createEntityAction') @EntityStore.Action('createEntityAction')
private createEntityAction!: (entityData: any) => Promise<Entity[]>; private createEntityAction!: (entityData: any) => Promise<Entity[]>;
@EntityStore.Action('editEntityAction') @EntityStore.Action('editEntityAction')
private editEntityAction!: (entityData: any) => Promise<Entity>; private editEntityAction!: (entityData: any) => Promise<Entity>;
private predefinedColors!: any[];
private created() {
this.predefinedColors = [['#FF0000', '#AA0000', '#550000'],
['#FFFF00', '#AAAA00', '#555500'], ['#00FF00', '#00AA00', '#005500'],
['#00FFFF', '#00AAAA', '#005555'], ['#0000FF', '#0000AA', '#000055']];
}
@Watch('selectedEntity', {immediate: true})
private onEntityChange() {
this.entityCopy = {...this.selectedEntity};
}
public colorSelected(color: any) {
this.entityCopy!.color = color.hexa;
}
private closeDialog() { private closeDialog() {
this.$emit('closeDialog'); this.$emit('closeDialog');
} }
@@ -57,10 +83,10 @@
private saveEntity() { private saveEntity() {
this.$validator.validateAll().then(async (result) => { this.$validator.validateAll().then(async (result) => {
if (result) { if (result) {
if (this.selectedEntity!.id) { if (this.entityCopy!.id) {
await this.editEntityAction(this.selectedEntity); await this.editEntityAction(this.entityCopy);
} else { } else {
await this.createEntityAction(this.selectedEntity); await this.createEntityAction(this.entityCopy);
} }
this.closeDialog(); this.closeDialog();
} else { } else {
src/components/entity/EntityTable.component.vue
+12
View File
@@ -9,6 +9,9 @@
</v-btn> </v-btn>
</div> </div>
</template> </template>
<template v-slot:item.color="{ item }">
<div v-bind:style="{ backgroundColor: item.color}" class="entityColor"></div>
</template>
</v-data-table> </v-data-table>
<create-entity-component v-if="showEditEntityDialog" :showDialog="showEditEntityDialog" <create-entity-component v-if="showEditEntityDialog" :showDialog="showEditEntityDialog"
:selectedEntity="selectedEntity" @closeDialog="showEditEntityDialog = false"> :selectedEntity="selectedEntity" @closeDialog="showEditEntityDialog = false">
@@ -52,6 +55,9 @@
}, { }, {
text: 'Beschreibung', text: 'Beschreibung',
value: 'description' value: 'description'
}, {
text: 'Statusfarbe',
value: 'color'
}, { }, {
text: 'Optionen', text: 'Optionen',
value: 'options', value: 'options',
@@ -72,4 +78,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.entityColor {
height: 25px;
width: 25px;
border-radius: 50%;
}
</style> </style>
src/components/status/CreateStatus.component.vue
+17 -11
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog"> @click:outside="closeDialog">
<v-card class="pa-6 white"> <v-card class="pa-6 white">
<div class="headline text-center mb-6"> <div class="headline text-center mb-6">
{{ selectedStatus.id ? 'Status bearbeiten' : 'Status erstellen' }} {{ statusCopy.id ? 'Status bearbeiten' : 'Status erstellen' }}
</div> </div>
<v-card-text> <v-card-text>
<v-form class="d-flex flex-column"> <v-form class="d-flex flex-column">
@@ -13,24 +13,23 @@
name="name" name="name"
data-vv-as="Statusname" data-vv-as="Statusname"
v-validate="'required'" v-validate="'required'"
v-model="selectedStatus.name"/> v-model="statusCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span> <span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row> </v-row>
<v-row class="d-flex flex-column mt-6"> <v-row class="d-flex flex-column mt-6">
<v-label class="">Neues Icon auswählen</v-label> <v-label class="">Neues Icon auswählen</v-label>
<v-file-input v-model="iconFile" name="iconFile" v-validate="'required'" data-vv-as="Icon" <v-file-input v-model="iconFile" name="iconFile"
ref="iconFile" class="mt-3" label="Icon" accept="image/png" outlined> ref="iconFile" class="mt-3" label="Icon" accept="image/png" outlined>
</v-file-input> </v-file-input>
<v-label v-if="selectedStatus.iconName">Derzeitiges Icon: {{ selectedStatus.iconName }} <v-label v-if="statusCopy.iconName">Derzeitiges Icon: {{ statusCopy.iconName }}
</v-label> </v-label>
<span class="input-error text-center">{{ errors.first('iconFile') }}</span>
</v-row> </v-row>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn> <v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveStatus"> <v-btn color="primary" @click="saveStatus">
{{ selectedStatus.id ? 'Status speichern' : 'Status erstellen' }} {{ statusCopy.id ? 'Status speichern' : 'Status erstellen' }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@@ -38,7 +37,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {namespace} from 'vuex-class'; import {namespace} from 'vuex-class';
import {Status} from '@/models/Status'; import {Status} from '@/models/Status';
@@ -53,6 +52,8 @@
@Prop({default: () => new Status({})}) @Prop({default: () => new Status({})})
public selectedStatus?: Status; public selectedStatus?: Status;
public statusCopy: Status = new Status({});
@StatusStore.Action('createStatusAction') @StatusStore.Action('createStatusAction')
private createStatusAction!: (statusData: any) => Promise<Status>; private createStatusAction!: (statusData: any) => Promise<Status>;
@@ -64,6 +65,11 @@
public iconFile?: any = null; public iconFile?: any = null;
@Watch('selectedStatus', {immediate: true})
private onStatusChange() {
this.statusCopy = {...this.selectedStatus};
}
private closeDialog() { private closeDialog() {
this.$emit('closeDialog'); this.$emit('closeDialog');
} }
@@ -71,15 +77,15 @@
private saveStatus() { private saveStatus() {
this.$validator.validateAll().then(async (result) => { this.$validator.validateAll().then(async (result) => {
if (result) { if (result) {
if (this.selectedStatus!.id) { if (this.statusCopy!.id) {
await this.editStatusAction(this.selectedStatus); await this.editStatusAction(this.statusCopy);
} else { } else {
this.selectedStatus = await this.createStatusAction(this.selectedStatus); this.statusCopy = await this.createStatusAction(this.statusCopy);
} }
if (this.iconFile) { if (this.iconFile) {
await this.setStatusIconAction({ await this.setStatusIconAction({
status: this.selectedStatus!, status: this.statusCopy!,
icon: this.iconFile icon: this.iconFile
}); });
} }
src/components/user/CreateUser.component.vue
+17 -10
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog"> @click:outside="closeDialog">
<v-card class="pa-6 white"> <v-card class="pa-6 white">
<div class="headline text-center mb-6"> <div class="headline text-center mb-6">
{{ selectedUser.id ? 'Benutzer bearbeiten' : 'Benutzer erstellen' }} {{ userCopy.id ? 'Benutzer bearbeiten' : 'Benutzer erstellen' }}
</div> </div>
<v-card-text> <v-card-text>
<v-form class="d-flex flex-column"> <v-form class="d-flex flex-column">
@@ -13,7 +13,7 @@
name="firstName" name="firstName"
data-vv-as="Vorname" data-vv-as="Vorname"
v-validate="'required'" v-validate="'required'"
v-model="selectedUser.firstName"/> v-model="userCopy.firstName"/>
<span class="input-error text-center">{{ errors.first('firstName') }}</span> <span class="input-error text-center">{{ errors.first('firstName') }}</span>
</v-row> </v-row>
<v-row class="d-flex flex-column"> <v-row class="d-flex flex-column">
@@ -21,7 +21,7 @@
name="lastName" name="lastName"
data-vv-as="Nachname" data-vv-as="Nachname"
v-validate="'required'" v-validate="'required'"
v-model="selectedUser.lastName"/> v-model="userCopy.lastName"/>
<span class="input-error text-center">{{ errors.first('lastName') }}</span> <span class="input-error text-center">{{ errors.first('lastName') }}</span>
</v-row> </v-row>
<v-row class="d-flex flex-column"> <v-row class="d-flex flex-column">
@@ -29,18 +29,18 @@
name="email" name="email"
data-vv-as="E-Mail" data-vv-as="E-Mail"
v-validate="'required'" v-validate="'required'"
v-model="selectedUser.email"/> v-model="userCopy.email"/>
<span class="input-error text-center">{{ errors.first('email') }}</span> <span class="input-error text-center">{{ errors.first('email') }}</span>
</v-row> </v-row>
<v-row> <v-row>
<v-checkbox label="Aktiv" v-model="selectedUser.active"/> <v-checkbox label="Aktiv" v-model="userCopy.active"/>
</v-row> </v-row>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn> <v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveUser"> <v-btn color="primary" @click="saveUser">
{{ selectedUser.id ? 'Benutzer speichern' : 'Benutzer erstellen' }} {{ userCopy.id ? 'Benutzer speichern' : 'Benutzer erstellen' }}
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
@@ -48,7 +48,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator'; import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
import {namespace} from 'vuex-class'; import {namespace} from 'vuex-class';
import User from '@/models/User'; import User from '@/models/User';
@@ -63,6 +63,8 @@
@Prop({default: () => new User({})}) @Prop({default: () => new User({})})
public selectedUser?: User; public selectedUser?: User;
public userCopy: User = new User({});
@UserStore.Action('createUserAction') @UserStore.Action('createUserAction')
private createUserAction!: (userData: any) => Promise<User[]>; private createUserAction!: (userData: any) => Promise<User[]>;
@@ -73,13 +75,18 @@
this.$emit('closeDialog'); this.$emit('closeDialog');
} }
@Watch('selectedUser', {immediate: true})
private onUserChange() {
this.userCopy = this.selectedUser!.deepCopy();
}
private saveUser() { private saveUser() {
this.$validator.validateAll().then(async (result) => { this.$validator.validateAll().then(async (result) => {
if (result) { if (result) {
if (this.selectedUser!.id) { if (this.userCopy!.id) {
await this.editUserAction(this.selectedUser); await this.editUserAction(this.userCopy);
} else { } else {
await this.createUserAction(this.selectedUser); await this.createUserAction(this.userCopy);
} }
this.closeDialog(); this.closeDialog();
} else { } else {
src/models/Area.ts
+6
View File
@@ -17,4 +17,10 @@ export class Area {
}); });
} }
} }
public deepCopy(): Area {
const copy = {...this};
copy.users = this.users;
return copy;
}
} }
src/models/Entity.ts
+1 -1
View File
@@ -1,8 +1,8 @@
export class Entity { export class Entity {
public id?: string; public id?: string;
public name?: string; public name?: string;
public description?: string; public description?: string;
public color?: string;
constructor(data: any) { constructor(data: any) {
Object.assign(this, data); Object.assign(this, data);
src/models/User.ts
+6
View File
@@ -19,4 +19,10 @@ export default class User {
this.areas = data.areas.map((areaData: any) => new Area(areaData)); this.areas = data.areas.map((areaData: any) => new Area(areaData));
} }
} }
public deepCopy(): User {
const copy = {...this};
copy.areas = this.areas;
return copy;
}
} }