create entity-stuff

src/api/RepositoryFactory.ts

@@ -1,12 +1,16 @@
 import AuthRepository from '@/api/repositories/AuthRepository';
 import AreaRepository from '@/api/repositories/AreaRepository';
 import UserRepository from '@/api/repositories/UserRepository';
+import StatusRepository from '@/api/repositories/StatusRepository';
+import EntityRepository from '@/api/repositories/EntityRepository';
 
 
 const repositories: any = {
     auth: {repository: AuthRepository, instance: null},
     area: {repository: AreaRepository, instance: null},
-    user: {repository: UserRepository, instance: null}
+    user: {repository: UserRepository, instance: null},
+    status: {repository: StatusRepository, instance: null},
+    entity: {repository: EntityRepository, instance: null}
 };
 
 /**

src/api/repositories/AreaRepository.ts

@@ -15,7 +15,7 @@ export default class AreaRepository extends BaseRepository {
     }
 
     public editArea(area: any): Promise<any> {
-        return this.axiosClient.put(`area/${area.id}`, area);
+        return this.axiosClient.patch(`area/${area.id}`, area);
     }
 
     public setUsers(area: any, userIds: any): Promise<any> {

src/api/repositories/EntityRepository.ts

@@ -0,0 +1,20 @@
+import BaseRepository from '@/api/repositories/BaseRepository';
+
+export default class EntityRepository extends BaseRepository {
+
+    public loadAllEntities(): Promise<any> {
+        return this.axiosClient(`entity`);
+    }
+
+    public loadEntity(entityId: string): Promise<any> {
+        return this.axiosClient(`entity/${entityId}`);
+    }
+
+    public createEntity(entity: any): Promise<any> {
+        return this.axiosClient.post(`entity`, entity);
+    }
+
+    public editEntity(entity: any): Promise<any> {
+        return this.axiosClient.patch(`entity/${entity.id}`, entity);
+    }
+}

src/api/repositories/StatusRepository.ts

@@ -0,0 +1,20 @@
+import BaseRepository from '@/api/repositories/BaseRepository';
+
+export default class StatusRepository extends BaseRepository {
+
+    public loadAllStatus(): Promise<any> {
+        return this.axiosClient(`status`);
+    }
+
+    public loadStatus(statusId: string): Promise<any> {
+        return this.axiosClient(`status/${statusId}`);
+    }
+
+    public createStatus(status: any): Promise<any> {
+        return this.axiosClient.post(`status`, status);
+    }
+
+    public editStatus(status: any): Promise<any> {
+        return this.axiosClient.patch(`status/${status.id}`, status);
+    }
+}

src/api/repositories/UserRepository.ts

@@ -15,6 +15,6 @@ export default class UserRepository extends BaseRepository {
     }
 
     public editUser(user: any): Promise<any> {
-        return this.axiosClient.put(`user/${user.id}`, user);
+        return this.axiosClient.patch(`user/${user.id}`, user);
     }
 }

src/components/area/AreaTable.component.vue

@@ -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>

src/components/area/CreateArea.component.vue

@@ -63,6 +63,7 @@
                     } else {
                         await this.createAreaAction(this.selectedArea);
                     }
+                    this.closeDialog();
                 } else {
                     // TODO: Show error message
                 }

src/components/entity/CreateEntity.component.vue

@@ -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>

src/components/entity/EntityTable.component.vue

@@ -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>

src/components/status/CreateStatus.component.vue

@@ -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>

src/components/status/StatusTable.component.vue

@@ -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>

src/components/user/CreateUser.component.vue

@@ -81,6 +81,7 @@
                     } else {
                         await this.createUserAction(this.selectedUser);
                     }
+                    this.closeDialog();
                 } else {
                     // TODO: Show error message
                 }

src/components/user/UserTable.component.vue

@@ -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>

src/helper/NavigationItemStorage.ts

@@ -45,7 +45,7 @@ export const NavigationItemStorage: NavigationItemInterface[] = [
     dropdownOptions: [
       {
         title: 'NAVIGATION.DROPDOWN.ALL_ENTITIES',
-        routerName: 'entityOverview',
+        routerName: 'entitiesOverview',
         icon: 'mdi-account-multiple'
       },
       {

src/models/Entity.ts

@@ -0,0 +1,10 @@
+export class Entity {
+
+    public id?: string;
+    public name?: string;
+    public description?: string;
+
+    constructor(data: any) {
+        Object.assign(this, data);
+    }
+}

src/models/Status.ts

@@ -0,0 +1,9 @@
+export class Status {
+
+    public id?: string;
+    public name?: string;
+
+    constructor(data: any) {
+        Object.assign(this, data);
+    }
+}

src/router.ts

@@ -63,7 +63,7 @@ export default new Router({
         {
           path: 'entities',
           name: 'entitiesOverview',
-          component: () => import('./views/entities/Entites.view.vue')
+          component: () => import('./views/entity/Entity.view.vue')
         },
         {
           path: 'status',

src/store.ts

@@ -4,6 +4,8 @@ import VuexPersistence from 'vuex-persist';
 import authStore from './stores/auth.store';
 import areaStore from '@/stores/area.store';
 import userStore from '@/stores/user.store';
+import statusStore from '@/stores/status.store';
+import entityStore from '@/stores/entity.store';
 
 Vue.use(Vuex);
 
@@ -28,6 +30,14 @@ const store: StoreOptions<any> = {
         user: {
             namespaced: true,
             ...userStore
+        },
+        status: {
+            namespaced: true,
+            ...statusStore
+        },
+        entity: {
+            namespaced: true,
+            ...entityStore
         }
     },
     plugins: [vuexPersistence.plugin],

src/stores/area.store.ts

@@ -30,7 +30,8 @@ const actions: ActionTree<any, any> = {
         return area;
     },
     editAreaAction: async ({commit}, areaData: any): Promise<Area> => {
-        const areaRaw = await areaRepository.createArea(areaData);
+        delete areaData.users;
+        const areaRaw = await areaRepository.editArea(areaData);
         const area = new Area(areaRaw.data);
         commit('handleArea', area);
         return area;

src/stores/entity.store.ts

@@ -0,0 +1,62 @@
+import {ActionTree, Module} from 'vuex';
+import {RepositoryFactory} from '@/api/RepositoryFactory';
+import {Entity} from '@/models/Entity';
+import EntityRepository from '@/api/repositories/EntityRepository';
+
+const entityRepository: EntityRepository = RepositoryFactory.get('entity');
+
+const store = {
+    entities: [],
+};
+
+const actions: ActionTree<any, any> = {
+    loadEntitiesAction: async ({commit}): Promise<Entity[]> => {
+        const entitiesRaw = await entityRepository.loadAllEntities();
+        const entities = entitiesRaw.data.map((data: any) => new Entity(data));
+        commit('storeEntities', entities);
+        return entities;
+    },
+    loadSingleEntityAction: async ({commit}, entityId: string): Promise<Entity> => {
+        const entityRaw = await entityRepository.loadEntity(entityId);
+        const entity = new Entity(entityRaw.data);
+        return entity;
+    },
+    createEntityAction: async ({commit}, entityData: any): Promise<Entity> => {
+        const entityRaw = await entityRepository.createEntity(entityData);
+        const entity = new Entity(entityRaw.data);
+        commit('handleEntity', entity);
+        return entity;
+    },
+    editEntityAction: async ({commit}, entityData: any): Promise<Entity> => {
+        const entityRaw = await entityRepository.editEntity(entityData);
+        const entity = new Entity(entityRaw.data);
+        commit('handleEntity', entity);
+        return entity;
+    }
+};
+
+const mutations = {
+    storeEntities: (state: any, entities: Entity[]) => state.entities = entities,
+    handleEntity: (state: any, entity: Entity) => {
+        const index = state.entities.findIndex((item: Entity) => item.id === entity.id);
+        // replace or add entity object
+        if (index >= 0) {
+            state.entities.splice(index, 1, entity);
+        } else {
+            state.entities.push(entity);
+        }
+    }
+};
+
+const getters = {
+    entities: (state: any) => state.entities,
+};
+
+const entityStore: Module<any, any> = {
+    state: store,
+    actions,
+    mutations,
+    getters,
+};
+
+export default entityStore;

src/stores/status.store.ts

@@ -0,0 +1,62 @@
+import {ActionTree, Module} from 'vuex';
+import {RepositoryFactory} from '@/api/RepositoryFactory';
+import StatusRepository from '@/api/repositories/StatusRepository';
+import {Status} from '@/models/Status';
+
+const statusRepository: StatusRepository = RepositoryFactory.get('status');
+
+const store = {
+    status: [],
+};
+
+const actions: ActionTree<any, any> = {
+    loadStatusAction: async ({commit}): Promise<Status[]> => {
+        const statusRaw = await statusRepository.loadAllStatus();
+        const status = statusRaw.data.map((data: any) => new Status(data));
+        commit('storeStatus', status);
+        return status;
+    },
+    loadSingleStatusAction: async ({commit}, statusId: string): Promise<Status> => {
+        const statusRaw = await statusRepository.loadStatus(statusId);
+        const status = new Status(statusRaw.data);
+        return status;
+    },
+    createStatusAction: async ({commit}, statusData: any): Promise<Status> => {
+        const statusRaw = await statusRepository.createStatus(statusData);
+        const status = new Status(statusRaw.data);
+        commit('handleStatus', status);
+        return status;
+    },
+    editStatusAction: async ({commit}, statusData: any): Promise<Status> => {
+        const statusRaw = await statusRepository.editStatus(statusData);
+        const status = new Status(statusRaw.data);
+        commit('handleStatus', status);
+        return status;
+    }
+};
+
+const mutations = {
+    storeStatus: (state: any, status: Status[]) => state.status = status,
+    handleStatus: (state: any, status: Status) => {
+        const index = state.status.findIndex((item: Status) => item.id === status.id);
+        // replace or add status object
+        if (index >= 0) {
+            state.status.splice(index, 1, status);
+        } else {
+            state.status.push(status);
+        }
+    }
+};
+
+const getters = {
+    status: (state: any) => state.status,
+};
+
+const statusStore: Module<any, any> = {
+    state: store,
+    actions,
+    mutations,
+    getters,
+};
+
+export default statusStore;

src/views/areas/Areas.view.vue

@@ -12,7 +12,7 @@
         </div>
         <area-table-component class="mt-3"/>
         <create-area-component v-if="showCreateDialog" :showDialog="showCreateDialog"
-                               @createdArea="createdArea" @closeDialog="showCreateDialog = false"/>
+                               @closeDialog="showCreateDialog = false"/>
     </div>
 </template>
 
@@ -44,11 +44,6 @@
         private openCreateDialog() {
             this.showCreateDialog = true;
         }
-
-        private createdArea() {
-            this.loadAreas();
-            this.showCreateDialog = false;
-        }
     }
 </script>
 

src/views/entities/Entites.view.vue

@@ -1,16 +0,0 @@
-<template>
-
-</template>
-
-<script lang="ts">
-    import {Component, Vue} from 'vue-property-decorator';
-
-    @Component({})
-    export default class EntitesView extends Vue {
-
-    }
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/views/entity/Entity.view.vue

@@ -0,0 +1,45 @@
+<template>
+    <div id="entity" class="ma-6">
+        <div class="d-flex justify-space-between">
+            <div class="right-header">
+                <h1>Entitäten</h1>
+            </div>
+            <div class="left-header">
+                <v-btn @click="openCreateDialog()" color="primary"
+                >Entität erstellen
+                </v-btn>
+            </div>
+        </div>
+        <entity-table-component class="mt-3"/>
+        <create-entity-component v-if="showCreateDialog" :showDialog="showCreateDialog"
+                                 @closeDialog="showCreateDialog = false"/>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Component, Vue} from 'vue-property-decorator';
+
+    @Component({
+        components: {
+            EntityTableComponent: () => import(
+                /* webpackChunkName: "EntityTableComponent" */
+                '@/components/entity/EntityTable.component.vue'),
+            CreateEntityComponent: () => import(
+                /* webpackChunkName: "CreateEntityComponent" */
+                '@/components/entity/CreateEntity.component.vue'
+                )
+        }
+    })
+    export default class EntityView extends Vue {
+
+        private showCreateDialog: boolean = false;
+
+        private openCreateDialog() {
+            this.showCreateDialog = true;
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/status/Status.view.vue

@@ -1,13 +1,46 @@
 <template>
-
+    <div id="status" class="ma-6">
+        <div class="d-flex justify-space-between">
+            <div class="right-header">
+                <h1>Status</h1>
+            </div>
+            <div class="left-header">
+                <v-btn @click="openCreateDialog()" color="primary"
+                >Status erstellen
+                </v-btn>
+            </div>
+        </div>
+        <status-table-component class="mt-3"/>
+        <create-status-component v-if="showCreateDialog" :showDialog="showCreateDialog"
+                               @createdStatus="createdStatus" @closeDialog="showCreateDialog = false"/>
+    </div>
 </template>
 
 <script lang="ts">
     import {Component, Vue} from 'vue-property-decorator';
 
-    @Component({})
+    @Component({
+        components: {
+            StatusTableComponent: () => import(
+                /* webpackChunkName: "StatusTableComponent" */
+                '@/components/status/StatusTable.component.vue'),
+            CreateStatusComponent: () => import(
+                /* webpackChunkName: "CreateStatusComponent" */
+                '@/components/status/CreateStatus.component.vue'
+                )
+        }
+    })
     export default class StatusView extends Vue {
 
+        private showCreateDialog: boolean = false;
+
+        private openCreateDialog() {
+            this.showCreateDialog = true;
+        }
+
+        private createdStatus() {
+            this.showCreateDialog = false;
+        }
     }
 </script>