c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

update vuex store to use API v2

Browse source
This commit is contained in:
j3d1 2024-01-07 21:38:25 +01:00
parent 0ebfe3adfb
commit 21ec29caa8
2 changed files with 316 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

121
web/src/components/Navbar.vue
View file

@ -10,28 +10,26 @@
:class="{ active: event.slug === getEventSlug }" @click="changeEvent(event)">{{ event.slug }}</a>
</div>
</div>
<div class="custom-control-inline mr-1">
<button type="button" class="btn mx-1 text-nowrap btn-success" @click="$emit('addClicked')">
<font-awesome-icon icon="plus"/>
<span class="d-none d-md-inline">&nbsp;Add</span>
</button>
<div class="btn-group btn-group-toggle">
<button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
<font-awesome-icon icon="th"/>
</button>
<button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
<font-awesome-icon icon="list"/>
</button>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
<ul class="nav nav-tabs flex-nowrap">
<li class="nav-item" v-if="checkPermission(getEventSlug, 'view_item')">
<router-link :to="{name: 'items', params: {event: getEventSlug}}"
:class="['nav-link', { active: isItemView() }]">
Items
</router-link>
</li>
<li class="nav-item" v-if="checkPermission(getEventSlug, 'view_issuethread')">
<router-link :to="{name: 'tickets', params: {event: getEventSlug}}"
:class="['nav-link', { active: isTicketView() }]">
Tickets
</router-link>
</li>
<li class="nav-item" v-if="checkPermission(getEventSlug, 'delete_event')">
<router-link :to="{name: 'admin'}" class="nav-link" active-class="active">
Admin
</router-link>
</li>
</ul>
<form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline mr-1" v-if="hasPermissions">
<input
class="form-control w-100"
type="search"
@ -41,10 +39,33 @@
disabled
>
</form>
<div class="custom-control-inline mr-1" v-if="hasPermissions">
<div class="btn-group btn-group-toggle mr-1" v-if="isItemView()">
<button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
<font-awesome-icon icon="th"/>
</button>
<button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
<font-awesome-icon icon="list"/>
</button>
</div>
<button type="button" class="btn text-nowrap btn-success mr-1" @click="$emit('addItemClicked')"
v-if="isItemView()">
<font-awesome-icon icon="plus"/>
<span class="d-none d-md-inline">&nbsp;Add Item</span>
</button>
<button type="button" class="btn text-nowrap btn-success mr-1" @click="$emit('addTicketClicked')"
v-if="isTicketView()">
<font-awesome-icon icon="plus"/>
<span class="d-none d-md-inline">&nbsp;Add Ticket</span>
</button>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<!--li class="nav-item dropdown">
<button class="btn nav-link dropdown-toggle" type="button" id="dropdownMenuButton2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ getActiveView }}
@ -55,16 +76,20 @@
<a class="nav-link text-nowrap" href="#" @click="changeView(link)">{{ link.title }}</a>
</li>
</ul>
</li>
</li-->
<li class="nav-item" v-for="(link, index) in links" v-bind:key="index">
<a class="nav-link text-nowrap" :href="link.path" @click.prevent="navigateTo(link.path)">
{{ link.title }}
</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/logout" @click.prevent="logout()">
Logout
</a>
</li>
</ul>
</div>
</nav>
</template>
@ -80,23 +105,55 @@ export default {
//{'title':'mass-edit','path':'massedit'},
],
links: [
{'title': 'howto engel', 'path': '/howto/'}
{'title': 'howto engel', 'path': '/howto/'},
]
}),
computed: {
...mapState(['events', 'activeEvent', 'layout']),
...mapGetters(['getEventSlug', 'getActiveView']),
...mapState(['events', 'layout']),
...mapGetters(['getEventSlug', 'getActiveView', "checkPermission", "hasPermissions"]),
},
methods: {
...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
...mapMutations(['setLayout']),
...mapMutations(['setLayout', 'logout']),
navigateTo(link) {
this.$router.push(link);
if (this.$router.currentRoute.path !== link)
this.$router.push(link);
},
isItemView() {
return this.getActiveView === 'items' || this.getActiveView === 'item';
},
isTicketView() {
return this.getActiveView === 'tickets' || this.getActiveView === 'ticket';
}
}
};
</script>
<style lang="scss">
<style lang="scss" scoped>
@import "../scss/navbar.scss";
.nav-tabs {
margin-bottom: -0.5rem !important;
border-bottom: var(--gray) solid 1px !important;
& .nav-item {
margin-right: 0.5em;
&:first-child {
margin-left: 0.5em;
}
}
& .nav-link {
padding-bottom: 1rem !important;
border: var(--gray) solid 1px !important;
border-bottom: none !important;
&.active {
background: black !important;
border-bottom: none;
color: white !important;
}
}
}
</style>