initial commit
This commit is contained in:
Torben Indorf
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-data-table
|
||||
:headers="tableHeaders" :items="allAreas" 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>
|
||||
<v-btn color="primary" small @click="handleAreaUsers(item)"><v-icon>mdi-account-group</v-icon></v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<create-area-component v-if="showEditAreaDialog" :showDialog="showEditAreaDialog" :selectedArea="selectedArea"
|
||||
@createdArea="createdArea" @closeDialog="showEditAreaDialog = false">
|
||||
</create-area-component>
|
||||
<area-users-component v-if="showUsersDialog" :showDialog="showUsersDialog" :selectedArea="selectedArea"
|
||||
@savedAreaUsers="savedAreaUsers" @closeDialog="showUsersDialog = false">
|
||||
</area-users-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Vue} from 'vue-property-decorator';
|
||||
import {Area} from '@/models/Area';
|
||||
import {namespace} from 'vuex-class';
|
||||
|
||||
const AreaStore = namespace('area');
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
CreateAreaComponent: () => import(
|
||||
/* webpackChunkName: "CreateAreaComponent" */
|
||||
'@/components/area/CreateArea.component.vue'
|
||||
),
|
||||
AreaUsersComponent: () => import(
|
||||
/* webpackChunkName: "AreaUsersComponent" */
|
||||
'@/components/area/AreaUsers.component.vue'
|
||||
)
|
||||
}
|
||||
})
|
||||
export default class AreaTableComponent extends Vue {
|
||||
|
||||
@AreaStore.Action('loadAreasAction')
|
||||
private loadAreas!: () => Promise<Area[]>;
|
||||
|
||||
@AreaStore.Getter('areas')
|
||||
public allAreas?: Area[];
|
||||
|
||||
public tableHeaders: any[] = [];
|
||||
|
||||
private showUsersDialog: boolean = false;
|
||||
private showEditAreaDialog: boolean = false;
|
||||
|
||||
public selectedArea?: Area;
|
||||
|
||||
public created() {
|
||||
this.tableHeaders = [{
|
||||
text: 'Gebietsname',
|
||||
value: 'name'
|
||||
}, {
|
||||
text: 'Anzahl der Benutzer',
|
||||
value: 'users.length'
|
||||
}, {
|
||||
text: 'Gespeicherte Gelege',
|
||||
value: 'nestCount'
|
||||
}, {
|
||||
text: 'Optionen',
|
||||
value: 'options',
|
||||
align: 'right',
|
||||
width: 200
|
||||
}];
|
||||
|
||||
this.loadAreas();
|
||||
}
|
||||
|
||||
private savedAreaUsers() {
|
||||
this.loadAreas();
|
||||
this.showUsersDialog = false;
|
||||
}
|
||||
|
||||
private handleEdit(selectedArea: Area) {
|
||||
this.selectedArea = selectedArea;
|
||||
this.showEditAreaDialog = true;
|
||||
}
|
||||
|
||||
private handleAreaUsers(selectedArea: Area) {
|
||||
this.selectedArea = selectedArea;
|
||||
this.showUsersDialog = true;
|
||||
}
|
||||
|
||||
private createdArea() {
|
||||
this.loadAreas();
|
||||
this.showEditAreaDialog = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<v-dialog title="Gebiet erstellen" v-model="showDialog" width="500" @close="closeDialog"
|
||||
@click:outside="closeDialog">
|
||||
<v-card class="pa-6 white">
|
||||
<div class="headline text-center mb-6">{{ selectedArea.name }} - Benutzer verwalten
|
||||
</div>
|
||||
<v-card-text>
|
||||
<v-autocomplete
|
||||
v-model="selectedUsers"
|
||||
:items="allUsers"
|
||||
filled
|
||||
chips
|
||||
color="blue-grey lighten-2"
|
||||
label="Benutzer auswählen"
|
||||
item-text="firstName"
|
||||
item-value="id"
|
||||
multiple
|
||||
>
|
||||
<template v-slot:selection="data">
|
||||
<v-chip
|
||||
v-bind="data.attrs"
|
||||
:input-value="data.selected"
|
||||
close
|
||||
@click="data.select"
|
||||
@click:close="removeUser(data.item)"
|
||||
>
|
||||
{{ data.item.firstName }} {{ data.item.lastName }}
|
||||
</v-chip>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
<template>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ data.item.firstName }} {{ data.item.lastName }}
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
</template>
|
||||
</v-autocomplete>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn color="error" @click="closeDialog">Abbrechen</v-btn>
|
||||
<v-btn color="primary" @click="saveUsers">Speichern
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Prop, Vue} from 'vue-property-decorator';
|
||||
import User from '@/models/User';
|
||||
import {Area} from '@/models/Area';
|
||||
import {namespace} from 'vuex-class';
|
||||
|
||||
const UserStore = namespace('user');
|
||||
const AreaStore = namespace('area');
|
||||
|
||||
@Component({})
|
||||
export default class AreaUsersComponent extends Vue {
|
||||
|
||||
@Prop({default: false})
|
||||
private showDialog?: boolean;
|
||||
|
||||
@Prop({})
|
||||
private selectedArea?: Area;
|
||||
|
||||
@UserStore.Action('loadUsersAction')
|
||||
private loadUsers!: () => Promise<User[]>;
|
||||
|
||||
@AreaStore.Action('setUsersAction')
|
||||
private setAreaUsers!: (payload: {area: Area, userIds: string[] }) => Promise<Area>;
|
||||
|
||||
@UserStore.Getter('users')
|
||||
public allUsers?: User[];
|
||||
|
||||
public selectedUsers: string[] = [];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
private async created() {
|
||||
await this.loadUsers();
|
||||
|
||||
this.selectedUsers = this.selectedArea!.users.map((user: User) => user.id);
|
||||
}
|
||||
|
||||
private closeDialog() {
|
||||
this.$emit('closeDialog');
|
||||
}
|
||||
|
||||
private removeUser(user: User) {
|
||||
this.selectedUsers = this.selectedUsers.filter((id: string) => id !== user.id);
|
||||
}
|
||||
|
||||
private async saveUsers() {
|
||||
await this.setAreaUsers({
|
||||
area: this.selectedArea!,
|
||||
userIds: this.selectedUsers
|
||||
});
|
||||
this.$emit('savedAreaUsers');
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<v-dialog title="Gebiet erstellen" v-model="showDialog" width="500" @close="closeDialog"
|
||||
@click:outside="closeDialog">
|
||||
<v-card class="pa-6 white">
|
||||
<div class="headline text-center mb-6">Gebiet 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="Gebietsname" name="name" data-vv-as="Gebietsname"
|
||||
v-validate="'required'"
|
||||
v-model="selectedArea.name"/>
|
||||
<span class="input-error text-center">{{ errors.first('name') }}</span>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-checkbox label="Aktiv" v-model="selectedArea.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' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {Component, Vue, Prop} from 'vue-property-decorator';
|
||||
import {Area} from '@/models/Area';
|
||||
import {namespace} from 'vuex-class';
|
||||
|
||||
const AreaStore = namespace('area');
|
||||
|
||||
@Component({})
|
||||
export default class CreateAreaComponent extends Vue {
|
||||
|
||||
@Prop({default: false})
|
||||
private showDialog?: boolean;
|
||||
|
||||
@Prop({default: () => new Area(null)})
|
||||
public selectedArea?: Area;
|
||||
|
||||
@AreaStore.Action('createAreaAction')
|
||||
private createAreaAction!: (areaData: any) => Promise<Area[]>;
|
||||
|
||||
@AreaStore.Action('editAreaAction')
|
||||
private editAreaAction!: (areaData: any) => Promise<Area[]>;
|
||||
|
||||
private closeDialog() {
|
||||
this.$emit('closeDialog');
|
||||
}
|
||||
|
||||
private saveArea() {
|
||||
this.$validator.validateAll().then(async (result) => {
|
||||
if (result) {
|
||||
if (this.selectedArea!.id) {
|
||||
await this.editAreaAction(this.selectedArea);
|
||||
} else {
|
||||
await this.createAreaAction(this.selectedArea);
|
||||
}
|
||||
} else {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang='ts'>
|
||||
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
|
||||
|
||||
@Component({
|
||||
name: 'Navigation',
|
||||
})
|
||||
export default class Navigation extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user