From b84983ccefc788ce7a93632832f00958bc72b79c Mon Sep 17 00:00:00 2001
From: Torben Indorf <t.indorf@28apps.de>
Date: Sun, 16 Feb 2020 12:30:03 +0100
Subject: [PATCH] added the color picker for the states

create copys before editing the user, area, entity and state
---
 src/components/area/CreateArea.component.vue  | 23 ++++++----
 .../entity/CreateEntity.component.vue         | 44 +++++++++++++++----
 .../entity/EntityTable.component.vue          | 12 +++++
 .../status/CreateStatus.component.vue         | 28 +++++++-----
 src/components/user/CreateUser.component.vue  | 27 +++++++-----
 src/models/Area.ts                            |  6 +++
 src/models/Entity.ts                          |  2 +-
 src/models/User.ts                            |  6 +++
 8 files changed, 109 insertions(+), 39 deletions(-)

diff --git a/src/components/area/CreateArea.component.vue b/src/components/area/CreateArea.component.vue
index 93c8b3b..b49453d 100644
--- a/src/components/area/CreateArea.component.vue
+++ b/src/components/area/CreateArea.component.vue
@@ -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 {
diff --git a/src/components/entity/CreateEntity.component.vue b/src/components/entity/CreateEntity.component.vue
index 4cf4dc2..6bdd2a3 100644
--- a/src/components/entity/CreateEntity.component.vue
+++ b/src/components/entity/CreateEntity.component.vue
@@ -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 {
diff --git a/src/components/entity/EntityTable.component.vue b/src/components/entity/EntityTable.component.vue
index f02bdca..fb48735 100644
--- a/src/components/entity/EntityTable.component.vue
+++ b/src/components/entity/EntityTable.component.vue
@@ -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>
diff --git a/src/components/status/CreateStatus.component.vue b/src/components/status/CreateStatus.component.vue
index 04ddb31..51e6749 100644
--- a/src/components/status/CreateStatus.component.vue
+++ b/src/components/status/CreateStatus.component.vue
@@ -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
                         });
                     }
diff --git a/src/components/user/CreateUser.component.vue b/src/components/user/CreateUser.component.vue
index 31c4424..e050738 100644
--- a/src/components/user/CreateUser.component.vue
+++ b/src/components/user/CreateUser.component.vue
@@ -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 {
diff --git a/src/models/Area.ts b/src/models/Area.ts
index 2ad1d23..68a77c5 100644
--- a/src/models/Area.ts
+++ b/src/models/Area.ts
@@ -17,4 +17,10 @@ export class Area {
             });
         }
     }
+
+    public deepCopy(): Area {
+        const copy = {...this};
+        copy.users = this.users;
+        return copy;
+    }
 }
diff --git a/src/models/Entity.ts b/src/models/Entity.ts
index 3dc9399..8d93e8b 100644
--- a/src/models/Entity.ts
+++ b/src/models/Entity.ts
@@ -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);
diff --git a/src/models/User.ts b/src/models/User.ts
index 4328981..964b678 100644
--- a/src/models/User.ts
+++ b/src/models/User.ts
@@ -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;
+    }
 }