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">
<v-card class="pa-6 white">
<div class="headline text-center mb-6">
{{ selectedArea.id ? 'Gebiet bearbeiten' : 'Gebiet erstellen' }}
{{ areaCopy.id ? 'Gebiet bearbeiten' : 'Gebiet erstellen' }}
</div>
<v-card-text>
<v-form class="d-flex flex-column">
@@ -11,18 +11,18 @@
<v-text-field hide-details outlined placeholder="Gebietsname" name="name"
data-vv-as="Gebietsname"
v-validate="'required'"
v-model="selectedArea.name"/>
v-model="areaCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row>
<v-row>
<v-checkbox label="Aktiv" v-model="selectedArea.active"/>
<v-checkbox label="Aktiv" v-model="areaCopy.active"/>
</v-row>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveArea">
{{ selectedArea.id ? 'Gebiet speichern' : 'Gebiet erstellen' }}
{{ areaCopy.id ? 'Gebiet speichern' : 'Gebiet erstellen' }}
</v-btn>
</v-card-actions>
</v-card>
@@ -30,7 +30,7 @@
</template>
<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 {namespace} from 'vuex-class';
@@ -45,12 +45,19 @@
@Prop({default: () => new Area({})})
public selectedArea?: Area;
public areaCopy: Area = new Area({});
@AreaStore.Action('createAreaAction')
private createAreaAction!: (areaData: any) => Promise<Area[]>;
@AreaStore.Action('editAreaAction')
private editAreaAction!: (areaData: any) => Promise<Area>;
@Watch('selectedArea', {immediate: true})
private onAreaChange() {
this.areaCopy = this.selectedArea!.deepCopy();
}
private closeDialog() {
this.$emit('closeDialog');
}
@@ -58,10 +65,10 @@
private saveArea() {
this.$validator.validateAll().then(async (result) => {
if (result) {
if (this.selectedArea!.id) {
await this.editAreaAction(this.selectedArea);
if (this.areaCopy!.id) {
await this.editAreaAction(this.areaCopy);
} else {
await this.createAreaAction(this.selectedArea);
await this.createAreaAction(this.areaCopy);
}
this.closeDialog();
} else {
src/components/entity/CreateEntity.component.vue
+35 -9
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog">
<v-card class="pa-6 white">
<div class="headline text-center mb-6">
{{ selectedEntity.id ? 'Entität bearbeiten' : 'Entität erstellen' }}
{{ entityCopy.id ? 'Entität bearbeiten' : 'Entität erstellen' }}
</div>
<v-card-text>
<v-form class="d-flex flex-column">
@@ -13,23 +13,30 @@
name="name"
data-vv-as="Entität-Name"
v-validate="'required'"
v-model="selectedEntity.name"/>
v-model="entityCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span>
</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-card-text>
<v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-card-actions class="d-flex justify-space-between">
<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 color="error" @click="closeDialog">Abbrechen</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<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 {Entity} from '@/models/Entity';
@@ -44,12 +51,31 @@
@Prop({default: () => new Entity({})})
public selectedEntity?: Entity;
public entityCopy: Entity = new Entity({});
@EntityStore.Action('createEntityAction')
private createEntityAction!: (entityData: any) => Promise<Entity[]>;
@EntityStore.Action('editEntityAction')
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() {
this.$emit('closeDialog');
}
@@ -57,10 +83,10 @@
private saveEntity() {
this.$validator.validateAll().then(async (result) => {
if (result) {
if (this.selectedEntity!.id) {
await this.editEntityAction(this.selectedEntity);
if (this.entityCopy!.id) {
await this.editEntityAction(this.entityCopy);
} else {
await this.createEntityAction(this.selectedEntity);
await this.createEntityAction(this.entityCopy);
}
this.closeDialog();
} else {
src/components/entity/EntityTable.component.vue
+12
View File
@@ -9,6 +9,9 @@
</v-btn>
</div>
</template>
<template v-slot:item.color="{ item }">
<div v-bind:style="{ backgroundColor: item.color}" class="entityColor"></div>
</template>
</v-data-table>
<create-entity-component v-if="showEditEntityDialog" :showDialog="showEditEntityDialog"
:selectedEntity="selectedEntity" @closeDialog="showEditEntityDialog = false">
@@ -52,6 +55,9 @@
}, {
text: 'Beschreibung',
value: 'description'
}, {
text: 'Statusfarbe',
value: 'color'
}, {
text: 'Optionen',
value: 'options',
@@ -72,4 +78,10 @@
<style lang="scss" scoped>
.entityColor {
height: 25px;
width: 25px;
border-radius: 50%;
}
</style>
src/components/status/CreateStatus.component.vue
+17 -11
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog">
<v-card class="pa-6 white">
<div class="headline text-center mb-6">
{{ selectedStatus.id ? 'Status bearbeiten' : 'Status erstellen' }}
{{ statusCopy.id ? 'Status bearbeiten' : 'Status erstellen' }}
</div>
<v-card-text>
<v-form class="d-flex flex-column">
@@ -13,24 +13,23 @@
name="name"
data-vv-as="Statusname"
v-validate="'required'"
v-model="selectedStatus.name"/>
v-model="statusCopy.name"/>
<span class="input-error text-center">{{ errors.first('name') }}</span>
</v-row>
<v-row class="d-flex flex-column mt-6">
<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>
</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>
<span class="input-error text-center">{{ errors.first('iconFile') }}</span>
</v-row>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveStatus">
{{ selectedStatus.id ? 'Status speichern' : 'Status erstellen' }}
{{ statusCopy.id ? 'Status speichern' : 'Status erstellen' }}
</v-btn>
</v-card-actions>
</v-card>
@@ -38,7 +37,7 @@
</template>
<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 {Status} from '@/models/Status';
@@ -53,6 +52,8 @@
@Prop({default: () => new Status({})})
public selectedStatus?: Status;
public statusCopy: Status = new Status({});
@StatusStore.Action('createStatusAction')
private createStatusAction!: (statusData: any) => Promise<Status>;
@@ -64,6 +65,11 @@
public iconFile?: any = null;
@Watch('selectedStatus', {immediate: true})
private onStatusChange() {
this.statusCopy = {...this.selectedStatus};
}
private closeDialog() {
this.$emit('closeDialog');
}
@@ -71,15 +77,15 @@
private saveStatus() {
this.$validator.validateAll().then(async (result) => {
if (result) {
if (this.selectedStatus!.id) {
await this.editStatusAction(this.selectedStatus);
if (this.statusCopy!.id) {
await this.editStatusAction(this.statusCopy);
} else {
this.selectedStatus = await this.createStatusAction(this.selectedStatus);
this.statusCopy = await this.createStatusAction(this.statusCopy);
}
if (this.iconFile) {
await this.setStatusIconAction({
status: this.selectedStatus!,
status: this.statusCopy!,
icon: this.iconFile
});
}
src/components/user/CreateUser.component.vue
+17 -10
View File
@@ -4,7 +4,7 @@
@click:outside="closeDialog">
<v-card class="pa-6 white">
<div class="headline text-center mb-6">
{{ selectedUser.id ? 'Benutzer bearbeiten' : 'Benutzer erstellen' }}
{{ userCopy.id ? 'Benutzer bearbeiten' : 'Benutzer erstellen' }}
</div>
<v-card-text>
<v-form class="d-flex flex-column">
@@ -13,7 +13,7 @@
name="firstName"
data-vv-as="Vorname"
v-validate="'required'"
v-model="selectedUser.firstName"/>
v-model="userCopy.firstName"/>
<span class="input-error text-center">{{ errors.first('firstName') }}</span>
</v-row>
<v-row class="d-flex flex-column">
@@ -21,7 +21,7 @@
name="lastName"
data-vv-as="Nachname"
v-validate="'required'"
v-model="selectedUser.lastName"/>
v-model="userCopy.lastName"/>
<span class="input-error text-center">{{ errors.first('lastName') }}</span>
</v-row>
<v-row class="d-flex flex-column">
@@ -29,18 +29,18 @@
name="email"
data-vv-as="E-Mail"
v-validate="'required'"
v-model="selectedUser.email"/>
v-model="userCopy.email"/>
<span class="input-error text-center">{{ errors.first('email') }}</span>
</v-row>
<v-row>
<v-checkbox label="Aktiv" v-model="selectedUser.active"/>
<v-checkbox label="Aktiv" v-model="userCopy.active"/>
</v-row>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
<v-btn color="primary" @click="saveUser">
{{ selectedUser.id ? 'Benutzer speichern' : 'Benutzer erstellen' }}
{{ userCopy.id ? 'Benutzer speichern' : 'Benutzer erstellen' }}
</v-btn>
</v-card-actions>
</v-card>
@@ -48,7 +48,7 @@
</template>
<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 User from '@/models/User';
@@ -63,6 +63,8 @@
@Prop({default: () => new User({})})
public selectedUser?: User;
public userCopy: User = new User({});
@UserStore.Action('createUserAction')
private createUserAction!: (userData: any) => Promise<User[]>;
@@ -73,13 +75,18 @@
this.$emit('closeDialog');
}
@Watch('selectedUser', {immediate: true})
private onUserChange() {
this.userCopy = this.selectedUser!.deepCopy();
}
private saveUser() {
this.$validator.validateAll().then(async (result) => {
if (result) {
if (this.selectedUser!.id) {
await this.editUserAction(this.selectedUser);
if (this.userCopy!.id) {
await this.editUserAction(this.userCopy);
} else {
await this.createUserAction(this.selectedUser);
await this.createUserAction(this.userCopy);
}
this.closeDialog();
} 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 {
public id?: string;
public name?: string;
public description?: string;
public color?: string;
constructor(data: any) {
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));
}
}
public deepCopy(): User {
const copy = {...this};
copy.areas = this.areas;
return copy;
}
}