create admin panel views

This commit is contained in:
j3d1 2024-01-07 21:45:03 +01:00
parent 48b2752a1e
commit 8c85aa4fe4
8 changed files with 363 additions and 41 deletions

View file

@ -0,0 +1,45 @@
<template>
<table class="table table-striped table-dark" style="table-layout: fixed">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" v-for="(column, index) in columns" :key="index">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows" :key="i">
<td>{{ row }}</td>
<td v-for="(column, j) in columns" :key="j">
<font-awesome-icon v-if="items[j][i]" icon="check" class="text-success"/>
<font-awesome-icon v-else icon="times" class="text-danger"/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'Matrix2D',
props: {
items: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
}
},
};
</script>
<style>
</style>

View file

@ -0,0 +1,61 @@
<template>
<table class="table table-striped table-dark" style="table-layout: fixed">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" v-for="(column, index) in columns" :key="index">
{{ column }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, i) in rows" :key="i">
<td>{{ row }}</td>
<td v-for="(column, j) in columns" :key="j">
<font-awesome-icon v-if="triState(items[j][i]) === 'on'" icon="check" class="text-success"/>
<font-awesome-icon v-else-if="triState(items[j][i]) === 'off'" icon="times" class="text-danger"/>
<font-awesome-icon v-else icon="minus" class="text-warning"/>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
name: 'Matrix3D',
props: {
items: {
type: Array,
required: true
},
columns: {
type: Array,
required: true
},
rows: {
type: Array,
required: true
},
foldedDimension: {
type: Array,
required: true
}
},
methods: {
triState(list) {
if(list.every(e => e === true)) {
return 'on';
} else if(list.every(e => e === false)) {
return 'off';
} else {
return 'partial';
}
}
},
};
</script>
<style>
</style>

View file

@ -1,41 +0,0 @@
<template>
<div class="container-fluid px-xl-5 mt-3">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<Table
:columns="['slug', 'name']"
:items="events"
:keyName="'slug'"
v-slot="{ item }"
>
<div class="btn-group">
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
<font-awesome-icon icon="archive"/>
use
</button>
<button class="btn btn-danger" @click.stop="">
<font-awesome-icon icon="trash"/>
delete
</button>
</div>
</Table>
</div>
</div>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
export default {
name: 'Events',
components: {Table},
computed: mapState(['events']),
methods: mapActions(['changeEvent']),
};
</script>
<style scoped>
</style>

View file

@ -0,0 +1,68 @@
<template>
<div>
<h3 class="text-center">Users</h3>
<Table :items="users" :columns="['username']" :key-name="'id'">
<template v-slot:default="{item}">
<span>
{{item.groups.join(', ')}}
</span>
</template>
</Table>
<h3 class="text-center">Groups</h3>
<Table :items="groups" :columns="['name']" :key-name="'id'">
<template v-slot:default="{item}">
<span>
{{item.members.join(', ')}}
</span>
</template>
</Table>
<Matrix2D :items="groupPermissions" :columns="groupNames" :rows="permissionNames"/>
<h3 class="text-center">Permissions</h3>
<Matrix3D :items="userPermissions" :columns="userNames" :rows="permissionNames"
:folded-dimension="eventsNames"/>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from "@/components/Table.vue";
import Matrix3D from "@/components/Matrix3D.vue";
import Matrix2D from "@/components/Matrix2D.vue";
export default {
name: 'AccessControl',
components: {Matrix3D, Matrix2D, Table},
computed: {
...mapState(['users', 'groups', 'events']),
permissionNames() {
return this.groups.map(g => g.permissions).flat().map(p => p.split(":")[1])
},
groupNames() {
return this.groups.map(g => g.name)
},
eventsNames() {
return this.events.map(e => e.slug)
},
userNames() {
return this.users.map(u => u.username)
},
groupPermissions() {
return this.groups.map(g => this.permissionNames.map(p => g.permissions.includes("*:" + p)))
},
userPermissions() {
return this.users.map(u => this.permissionNames.map(p => this.events.map(e =>
u.permissions.includes("*:" + p) || u.permissions.includes(e.slug + ":" + p)
)))
},
},
methods: mapActions(['loadUsers', 'loadGroups']),
mounted() {
this.loadUsers();
this.loadGroups();
}
};
</script>
<style scoped>
</style>

View file

@ -0,0 +1,43 @@
<template>
<div class="container-fluid px-xl-5 mt-3">
<div class="row">
<div class="col-xl-8 offset-xl-2">
<div class="card bg-dark text-light mb-2" id="filters">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'admin'}" active-class="active" exact>Dashboard</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'events'}" active-class="active">Events</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'users'}" active-class="active">Access Control</router-link>
</li>
</ul>
</div>
<div class="card-body">
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import Cards from "@/components/Cards.vue";
export default {
name: 'Admin',
components: {Cards},
computed: {
...mapGetters(['getEventSlug']),
},
};
</script>
<style scoped>
</style>

View file

@ -0,0 +1,33 @@
<template>
<Table
:columns="['cid', 'name','itemCount']"
:items="loadedBoxes"
:keyName="'cid'"
v-slot="{ item }"
>
<div class="btn-group">
<button class="btn btn-secondary" @click.stop="showBoxContent(item.name)">
<!--font-awesome-icon icon="archive"/--> content
</button>
<button class="btn btn-danger" @click.stop="" title="delete">
<font-awesome-icon icon="trash"/>
</button>
</div>
</Table>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
export default {
name: 'Boxes',
components: {Table},
computed: mapState(['loadedBoxes', 'layout']),
methods: mapActions(['showBoxContent']),
};
</script>
<style scoped>
</style>

View file

@ -0,0 +1,78 @@
<template>
<div>
<!--qr-code :text="qr_url" color="#000" bg-color="#fff" error-level="H" class="qr-code"></qr-code-->
<h3 class="text-center">Events</h3>
<!--p>{{ events }}</p-->
<ul>
<li v-for="event in events" :key="event.id">
{{ event.slug }}
</li>
</ul>
<h3 class="text-center">Items</h3>
<!--p>{{ loadedItems }}</p-->
<ul>
<li v-for="item in loadedItems" :key="item.id">
{{ item.description }}
</li>
</ul>
<h3 class="text-center">Boxes</h3>
<!--p>{{ loadedBoxes }}</p-->
<ul>
<li v-for="box in loadedBoxes" :key="box.id">
{{ box.name }}
</li>
</ul>
<h3 class="text-center">Mails</h3>
<!--p>{{ mails }}</p-->
<ul>
<li v-for="mail in mails" :key="mail.id">
{{ mail.id }}
</li>
</ul>
<h3 class="text-center">Issues</h3>
<!--p>{{ issues }}</p-->
<ul>
<li v-for="issue in issues" :key="issue.id">
{{ issue.id }}
</li>
</ul>
<h3 class="text-center">System Events</h3>
<!--p>{{ systemEvents }}</p-->
<ul>
<li v-for="systemEvent in systemEvents" :key="systemEvent.id">
{{ systemEvent.id }}
</li>
</ul>
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
export default {
name: 'Debug',
components: {Table},
computed: {
...mapState(['events', 'loadedItems', 'loadedBoxes', 'mails', 'issues', 'systemEvents']),
qr_url() {
return window.location.href;
}
},
methods: {
...mapActions(['changeEvent', 'loadMails', 'loadIssues', 'loadSystemEvents']),
},
mounted() {
this.loadMails();
this.loadIssues();
this.loadSystemEvents();
}
};
</script>
<style>
.qr-code img {
border: #fff solid 7px
}
</style>

View file

@ -0,0 +1,35 @@
<template>
<Table
:columns="['slug', 'name']"
:items="events"
:keyName="'slug'"
v-slot="{ item }"
>
<div class="btn-group">
<button class="btn btn-secondary" @click.stop="changeEvent(item)">
<font-awesome-icon icon="archive"/>
use
</button>
<button class="btn btn-danger" @click.stop="">
<font-awesome-icon icon="trash"/>
delete
</button>
</div>
</Table>
</template>
<script>
import {mapActions, mapState} from 'vuex';
import Table from '@/components/Table';
export default {
name: 'Events',
components: {Table},
computed: mapState(['events']),
methods: mapActions(['changeEvent']),
};
</script>
<style scoped>
</style>