create entity-stuff

2020-02-02 15:22:20 +01:00
parent d9f14a3410
commit a109a01959
25 changed files with 595 additions and 38 deletions
@@ -10,7 +10,7 @@
            </template>
        </v-data-table>
        <create-area-component v-if="showEditAreaDialog" :showDialog="showEditAreaDialog" :selectedArea="selectedArea"
-                               @createdArea="createdArea" @closeDialog="showEditAreaDialog = false">
+                               @closeDialog="showEditAreaDialog = false">
        </create-area-component>
        <area-users-component v-if="showUsersDialog" :showDialog="showUsersDialog" :selectedArea="selectedArea"
                               @savedAreaUsers="savedAreaUsers" @closeDialog="showUsersDialog = false">
@@ -86,12 +86,6 @@
            this.selectedArea = selectedArea;
            this.showUsersDialog = true;
        }
-
-        private createdArea() {
-            this.loadAreas();
-            this.showEditAreaDialog = false;
-        }
-
    }

 </script>
@@ -63,6 +63,7 @@
                    } else {
                        await this.createAreaAction(this.selectedArea);
                    }
+                    this.closeDialog();
                } else {
                    // TODO: Show error message
                }
@@ -0,0 +1,77 @@
+<template>
+    <v-dialog v-model="showDialog" width="500"
+              @close="closeDialog"
+              @click:outside="closeDialog">
+        <v-card class="pa-6 white">
+            <div class="headline text-center mb-6">
+                {{ selectedEntity.id ? 'Entität bearbeiten' : 'Entität erstellen' }}
+            </div>
+            <v-card-text>
+                <v-form class="d-flex flex-column">
+                    <v-row class="d-flex flex-column">
+                        <v-text-field hide-details outlined placeholder="Entität-Name"
+                                      name="name"
+                                      data-vv-as="Entität-Name"
+                                      v-validate="'required'"
+                                      v-model="selectedEntity.name"/>
+                        <span class="input-error text-center">{{ errors.first('name') }}</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="saveEntity">
+                    {{ selectedEntity.id ? 'Entität speichern' : 'Entität erstellen' }}
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+    import {Component, Vue, Prop} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import {Entity} from '@/models/Entity';
+
+    const EntityStore = namespace('entity');
+
+    @Component({})
+    export default class CreateEntityComponent extends Vue {
+
+        @Prop({default: false})
+        private showDialog?: boolean;
+
+        @Prop({default: () => new Entity({})})
+        public selectedEntity?: Entity;
+
+        @EntityStore.Action('createEntityAction')
+        private createEntityAction!: (entityData: any) => Promise<Entity[]>;
+
+        @EntityStore.Action('editEntityAction')
+        private editEntityAction!: (entityData: any) => Promise<Entity>;
+
+        private closeDialog() {
+            this.$emit('closeDialog');
+        }
+
+        private saveEntity() {
+            this.$validator.validateAll().then(async (result) => {
+                if (result) {
+                    if (this.selectedEntity!.id) {
+                        await this.editEntityAction(this.selectedEntity);
+                    } else {
+                        await this.createEntityAction(this.selectedEntity);
+                    }
+                    this.closeDialog();
+                } else {
+                    // TODO: Show error message
+                }
+            });
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <v-data-table
+                :headers="tableHeaders" :items="allEntities" class="elevation-1" item-key="id">
+            <template v-slot:item.options="{ item }">
+                <div class="d-flex justify-end ma-3">
+                    <v-btn color="primary" small @click="handleEdit(item)" class="mr-1">
+                        <v-icon>mdi-pencil</v-icon>
+                    </v-btn>
+                </div>
+            </template>
+        </v-data-table>
+        <create-entity-component v-if="showEditEntityDialog" :showDialog="showEditEntityDialog"
+                                 :selectedEntity="selectedEntity" @closeDialog="showEditEntityDialog = false">
+        </create-entity-component>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import {Entity} from '@/models/Entity';
+
+    const EntityStore = namespace('entity');
+
+    @Component({
+        components: {
+            CreateEntityComponent: () => import(
+                /* webpackChunkName: "CreateEntityComponent" */
+                '@/components/entity/CreateEntity.component.vue'
+                ),
+        }
+    })
+    export default class EntityTableComponent extends Vue {
+
+        @EntityStore.Action('loadEntitiesAction')
+        private loadEntities!: () => Promise<Entity[]>;
+
+        @EntityStore.Getter('entities')
+        public allEntities?: Entity[];
+
+        public tableHeaders: any[] = [];
+
+        private showEditEntityDialog: boolean = false;
+
+        public selectedEntity?: Entity;
+
+        public created() {
+            this.tableHeaders = [{
+                text: 'Name der Entität',
+                value: 'name'
+            }, {
+                text: 'Beschreibung',
+                value: 'description'
+            }, {
+                text: 'Optionen',
+                value: 'options',
+                align: 'right',
+                width: 200
+            }];
+
+            this.loadEntities();
+        }
+
+        private handleEdit(selectedEntity: Entity) {
+            this.selectedEntity = selectedEntity;
+            this.showEditEntityDialog = true;
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -0,0 +1,77 @@
+<template>
+    <v-dialog v-model="showDialog" width="500"
+              @close="closeDialog"
+              @click:outside="closeDialog">
+        <v-card class="pa-6 white">
+            <div class="headline text-center mb-6">
+                {{ selectedStatus.id ? 'Status bearbeiten' : 'Status erstellen' }}
+            </div>
+            <v-card-text>
+                <v-form class="d-flex flex-column">
+                    <v-row class="d-flex flex-column">
+                        <v-text-field hide-details outlined placeholder="Statusname"
+                                      name="name"
+                                      data-vv-as="Statusname"
+                                      v-validate="'required'"
+                                      v-model="selectedStatus.name"/>
+                        <span class="input-error text-center">{{ errors.first('name') }}</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' }}
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+    import {Component, Vue, Prop} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import {Status} from '@/models/Status';
+
+    const StatusStore = namespace('status');
+
+    @Component({})
+    export default class CreateStatusComponent extends Vue {
+
+        @Prop({default: false})
+        private showDialog?: boolean;
+
+        @Prop({default: () => new Status({})})
+        public selectedStatus?: Status;
+
+        @StatusStore.Action('createStatusAction')
+        private createStatusAction!: (statusData: any) => Promise<Status[]>;
+
+        @StatusStore.Action('editStatusAction')
+        private editStatusAction!: (statusData: any) => Promise<Status>;
+
+        private closeDialog() {
+            this.$emit('closeDialog');
+        }
+
+        private saveStatus() {
+            this.$validator.validateAll().then(async (result) => {
+                if (result) {
+                    if (this.selectedStatus!.id) {
+                        await this.editStatusAction(this.selectedStatus);
+                    } else {
+                        await this.createStatusAction(this.selectedStatus);
+                    }
+                    this.closeDialog();
+                } else {
+                    // TODO: Show error message
+                }
+            });
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -0,0 +1,77 @@
+<template>
+    <div>
+        <v-data-table
+                :headers="tableHeaders" :items="allStatus" class="elevation-1" item-key="id">
+            <template v-slot:item.options="{ item }">
+                <div class="d-flex justify-end ma-3">
+                    <v-btn color="primary" small @click="handleEdit(item)" class="mr-1">
+                        <v-icon>mdi-pencil</v-icon>
+                    </v-btn>
+                </div>
+            </template>
+        </v-data-table>
+        <create-status-component v-if="showEditStatusDialog" :showDialog="showEditStatusDialog"
+                                 :selectedStatus="selectedStatus" @closeDialog="showEditStatusDialog = false">
+        </create-status-component>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue} from 'vue-property-decorator';
+    import {namespace} from 'vuex-class';
+    import {Status} from '@/models/Status';
+
+    const StatusStore = namespace('status');
+
+    @Component({
+        components: {
+            CreateStatusComponent: () => import(
+                /* webpackChunkName: "CreateStatusComponent" */
+                '@/components/status/CreateStatus.component.vue'
+                ),
+        }
+    })
+    export default class StatusTableComponent extends Vue {
+
+        @StatusStore.Action('loadStatusAction')
+        private loadStatus!: () => Promise<Status[]>;
+
+        @StatusStore.Getter('status')
+        public allStatus?: Status[];
+
+        public tableHeaders: any[] = [];
+
+        private showEditStatusDialog: boolean = false;
+
+        public selectedStatus?: Status;
+
+        public created() {
+            this.tableHeaders = [{
+                text: 'Statusname',
+                value: 'name'
+            }, {
+                text: 'Optionen',
+                value: 'options',
+                align: 'right',
+                width: 200
+            }];
+
+            this.loadStatus();
+        }
+
+        private handleEdit(selectedStatus: Status) {
+            this.selectedStatus = selectedStatus;
+            this.showEditStatusDialog = true;
+        }
+
+        private createdStatus() {
+            this.loadStatus();
+            this.showEditStatusDialog = false;
+        }
+    }
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -81,6 +81,7 @@
                    } else {
                        await this.createUserAction(this.selectedUser);
                    }
+                    this.closeDialog();
                } else {
                    // TODO: Show error message
                }
@@ -11,7 +11,7 @@
            </template>
        </v-data-table>
        <create-user-component v-if="showEditUserDialog" :showDialog="showEditUserDialog" :selectedUser="selectedUser"
-                               @createdUser="createdUser" @closeDialog="showEditUserDialog = false">
+                               @closeDialog="showEditUserDialog = false">
        </create-user-component>
    </div>
 </template>