Commit d642d8e2 authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Fix button ordering, show showAdder even with compact show selector

parent fc3e6a0b
...@@ -24,8 +24,11 @@ VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT = http://localhost:8080 ...@@ -24,8 +24,11 @@ VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT = http://localhost:8080
# ===================== # =====================
VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS = 10 VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS = 10
VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS = 60 VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS = 60
VUE_APP_SHOW_THRESHOLD = 10
# Dashboard logging & debugging # Dashboard logging & debugging
# ============================= # =============================
# use one of: debug, info, warn, error, fatal # use one of: debug, info, warn, error, fatal
VUE_APP_LOGLEVEL = warn VUE_APP_LOGLEVEL = warn
...@@ -39,5 +39,8 @@ VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT = http://FINAL.DASHBOARD.DOMAI ...@@ -39,5 +39,8 @@ VUE_APP_API_STEERING_OIDC_REDIRECT_URI_POSTLOGOUT = http://FINAL.DASHBOARD.DOMAI
# How many timeslots should be shown by default? (has to be a string) # How many timeslots should be shown by default? (has to be a string)
VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS = 10 VUE_APP_TIMESLOT_FILTER_DEFAULT_NUMSLOTS = 10
# After how many shows to switch to the compact show selector vs the dropdown
VUE_APP_SHOW_THRESHOLD = 10
# For how many days from now should timeslots be fetched by default? (has to be an int) # For how many days from now should timeslots be fetched by default? (has to be an int)
VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS = 60 VUE_APP_TIMESLOT_FILTER_DEFAULT_DAYS = 60
...@@ -4,46 +4,57 @@ ...@@ -4,46 +4,57 @@
<h3>{{ title }}</h3> <h3>{{ title }}</h3>
</b-col> </b-col>
<b-col <b-col
v-if="shows.length > 10" v-if="shows.length > this.showThreshold"
align="right"
> >
<b-input-group :prepend="$t('showSelector.selectShowMany')"> <div class="tw-flex tw-w-full tw-space-x-2">
<b-form-input <b-input-group :prepend="$t('showSelector.selectShowMany')" class="tw-w-full">
v-model="inputSelector" <b-form-input
list="list-of-shows" v-model="inputSelector"
autocomplete="off" list="list-of-shows"
@keypress="keypressed" autocomplete="off"
/> @keypress="keypressed"
<b-input-group-append> />
<b-button <b-input-group-append>
variant="success" <b-button
:disabled="disabledOk" variant="success"
@click="confirmSelector" :disabled="disabledOk"
> @click="confirmSelector"
<b-icon-check /> >
</b-button> <b-icon-check/>
<b-button </b-button>
variant="danger" <b-button
:disabled="disabledReset" variant="danger"
@click="resetSelector" :disabled="disabledReset"
@click="resetSelector"
>
<b-icon-x/>
</b-button>
</b-input-group-append>
</b-input-group>
<datalist id="list-of-shows">
<option
v-for="show in shows"
:key="show.id"
> >
<b-icon-x /> {{ show.name }} (ID: {{ show.id }})
</b-button> </option>
</b-input-group-append> </datalist>
</b-input-group>
<datalist id="list-of-shows"> <b-button
<option v-if="isSuperuser"
v-for="show in shows" v-b-popover.hover.top="$t('showCreator.title')"
:key="show.id" variant="primary"
@click="$refs.addShowModal.openModal()"
> >
{{ show.name }} (ID: {{ show.id }}) +
</option> </b-button>
</datalist> </div>
</b-col> </b-col>
<b-col <b-col
v-else v-else
align="right" align="right"
> >
<div class="tw-flex tw-justify-end tw-w-full tw-space-x-2">
<b-dropdown <b-dropdown
id="ddshows" id="ddshows"
:text="$t('showSelector.selectShow')" :text="$t('showSelector.selectShow')"
...@@ -58,7 +69,7 @@ ...@@ -58,7 +69,7 @@
{{ show.name }} {{ show.name }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
&nbsp;
<b-button <b-button
v-if="isSuperuser" v-if="isSuperuser"
v-b-popover.hover.top="$t('showCreator.title')" v-b-popover.hover.top="$t('showCreator.title')"
...@@ -67,11 +78,13 @@ ...@@ -67,11 +78,13 @@
> >
+ +
</b-button> </b-button>
<addShowModal </div>
ref="addShowModal"
:callback="newShowAdded"
/>
</b-col> </b-col>
<addShowModal
ref="addShowModal"
:callback="newShowAdded"
/>
</b-row> </b-row>
</template> </template>
...@@ -88,13 +101,14 @@ ...@@ -88,13 +101,14 @@
}, },
props: { props: {
title: {type: String, default: 'Unbetitelt' }, title: {type: String, default: 'Unbetitelt'},
callback: {type: Function, default: null} callback: {type: Function, default: null}
}, },
data() { data() {
return { return {
inputSelector: '', inputSelector: '',
showThreshold: process.env.VUE_APP_SHOW_THRESHOLD
} }
}, },
......
...@@ -7,14 +7,14 @@ ...@@ -7,14 +7,14 @@
<b-card> <b-card>
<b-row> <b-row>
<b-col> <b-col>
<b-btn v-b-toggle.timeslotFilterCollapse> <b-btn variant="primary" v-b-toggle.timeslotFilterCollapse>
{{ $t('showTimeslots.toggleFilters') }} {{ $t('showTimeslots.toggleFilters') }}
</b-btn> </b-btn>
</b-col> </b-col>
<b-col align="right"> <b-col align="right">
<b-button <b-button
v-if="user.steeringUser.is_superuser" v-if="user.steeringUser.is_superuser"
variant="primary" variant="outline-secondary"
@click="$router.push({path: 'emissions', query: { show: selectedShow.slug }})" @click="$router.push({path: 'emissions', query: { show: selectedShow.slug }})"
> >
{{ $t('showTimeslots.switchToEmissions') }} {{ $t('showTimeslots.switchToEmissions') }}
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
{{ $t('showTimeslots.resetFilters') }} {{ $t('showTimeslots.resetFilters') }}
</b-btn> &nbsp; </b-btn> &nbsp;
<b-btn <b-btn
variant="outline-success" variant="success"
@click="applyFilter()" @click="applyFilter()"
> >
{{ $t('showTimeslots.applyFilters') }} {{ $t('showTimeslots.applyFilters') }}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment