mirror of https://github.com/FreeTubeApp/FreeTube
Set initial radio button value on load
This commit is contained in:
parent
2c6a1dee94
commit
10a06e6d80
|
@ -18,6 +18,10 @@ export default defineComponent({
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
initialValueIndex: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
|
@ -34,7 +38,7 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
mounted: function () {
|
mounted: function () {
|
||||||
this.id = this._uid
|
this.id = this._uid
|
||||||
this.selectedValue = this.values[0]
|
this.selectedValue = this.values[this.initialValueIndex]
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
updateSelectedValue: function (value) {
|
updateSelectedValue: function (value) {
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
v-model="selectedValue"
|
v-model="selectedValue"
|
||||||
:name="inputName"
|
:name="inputName"
|
||||||
:value="values[index]"
|
:value="values[index]"
|
||||||
:checked="index === 0"
|
:checked="index === initialValueIndex"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
class="radio"
|
class="radio"
|
||||||
type="radio"
|
type="radio"
|
||||||
|
|
|
@ -15,6 +15,10 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
data: function () {
|
data: function () {
|
||||||
return {
|
return {
|
||||||
|
searchSortByStartIndex: 0,
|
||||||
|
searchTimeStartIndex: 0,
|
||||||
|
searchTypeStartIndex: 0,
|
||||||
|
searchDurationStartIndex: 0,
|
||||||
sortByValues: [
|
sortByValues: [
|
||||||
'relevance',
|
'relevance',
|
||||||
'rating',
|
'rating',
|
||||||
|
@ -101,6 +105,12 @@ export default defineComponent({
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created: function () {
|
||||||
|
this.searchSortByStartIndex = this.sortByValues.indexOf(this.searchSettings.sortBy)
|
||||||
|
this.searchTimeStartIndex = this.timeValues.indexOf(this.searchSettings.time)
|
||||||
|
this.searchTypeStartIndex = this.typeValues.indexOf(this.searchSettings.type)
|
||||||
|
this.searchDurationStartIndex = this.durationValues.indexOf(this.searchSettings.duration)
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
isVideoOrMovieOrAll(type) {
|
isVideoOrMovieOrAll(type) {
|
||||||
return type === 'video' || type === 'movie' || type === 'all'
|
return type === 'video' || type === 'movie' || type === 'all'
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
:title="$t('Search Filters.Sort By.Sort By')"
|
:title="$t('Search Filters.Sort By.Sort By')"
|
||||||
:labels="sortByLabels"
|
:labels="sortByLabels"
|
||||||
:values="sortByValues"
|
:values="sortByValues"
|
||||||
|
:initial-value-index="searchSortByStartIndex"
|
||||||
class="searchRadio"
|
class="searchRadio"
|
||||||
@change="updateSortBy"
|
@change="updateSortBy"
|
||||||
/>
|
/>
|
||||||
|
@ -25,6 +26,7 @@
|
||||||
:title="$t('Search Filters.Time.Time')"
|
:title="$t('Search Filters.Time.Time')"
|
||||||
:labels="timeLabels"
|
:labels="timeLabels"
|
||||||
:values="timeValues"
|
:values="timeValues"
|
||||||
|
:initial-value-index="searchTimeStartIndex"
|
||||||
class="searchRadio"
|
class="searchRadio"
|
||||||
@change="updateTime"
|
@change="updateTime"
|
||||||
/>
|
/>
|
||||||
|
@ -33,6 +35,7 @@
|
||||||
:title="$t('Search Filters.Type.Type')"
|
:title="$t('Search Filters.Type.Type')"
|
||||||
:labels="typeLabels"
|
:labels="typeLabels"
|
||||||
:values="typeValues"
|
:values="typeValues"
|
||||||
|
:initial-value-index="searchTypeStartIndex"
|
||||||
class="searchRadio"
|
class="searchRadio"
|
||||||
@change="updateType"
|
@change="updateType"
|
||||||
/>
|
/>
|
||||||
|
@ -41,6 +44,7 @@
|
||||||
:title="$t('Search Filters.Duration.Duration')"
|
:title="$t('Search Filters.Duration.Duration')"
|
||||||
:labels="durationLabels"
|
:labels="durationLabels"
|
||||||
:values="durationValues"
|
:values="durationValues"
|
||||||
|
:initial-value-index="searchDurationStartIndex"
|
||||||
class="searchRadio"
|
class="searchRadio"
|
||||||
@change="updateDuration"
|
@change="updateDuration"
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -84,10 +84,6 @@ export default defineComponent({
|
||||||
return this.$store.getters.getSearchFilterValueChanged
|
return this.$store.getters.getSearchFilterValueChanged
|
||||||
},
|
},
|
||||||
|
|
||||||
showFilters: function () {
|
|
||||||
return this.$store.getters.getShowSearchFilters
|
|
||||||
},
|
|
||||||
|
|
||||||
forwardText: function () {
|
forwardText: function () {
|
||||||
return this.$t('Forward')
|
return this.$t('Forward')
|
||||||
},
|
},
|
||||||
|
|
|
@ -89,11 +89,6 @@
|
||||||
|
|
||||||
margin-inline-start: $effect-distance;
|
margin-inline-start: $effect-distance;
|
||||||
|
|
||||||
&.showFilters {
|
|
||||||
box-shadow: 0 0 $effect-distance var(--primary-color);
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.filterChanged {
|
&.filterChanged {
|
||||||
box-shadow: 0 0 $effect-distance var(--primary-color);
|
box-shadow: 0 0 $effect-distance var(--primary-color);
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
|
@ -212,18 +207,4 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .searchFilters {
|
|
||||||
// inset-inline: 0;
|
|
||||||
// margin-block: 10px 20px;
|
|
||||||
// margin-inline: 220px 20px;
|
|
||||||
// position: absolute;
|
|
||||||
// transition: margin 150ms ease-in-out;
|
|
||||||
|
|
||||||
// @media only screen and (width <= 680px) {
|
|
||||||
// inset-inline: 0;
|
|
||||||
// margin-block: 95px 0;
|
|
||||||
// margin-inline: 10px;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,8 +92,7 @@
|
||||||
/>
|
/>
|
||||||
<font-awesome-icon
|
<font-awesome-icon
|
||||||
class="navFilterIcon navIcon"
|
class="navFilterIcon navIcon"
|
||||||
:class="{ filterChanged: searchFilterValueChanged, showFilters: showFilters }"
|
:class="{ filterChanged: searchFilterValueChanged }"
|
||||||
:aria-pressed="showFilters"
|
|
||||||
:icon="['fas', 'filter']"
|
:icon="['fas', 'filter']"
|
||||||
:title="$t('Search Filters.Search Filters')"
|
:title="$t('Search Filters.Search Filters')"
|
||||||
role="button"
|
role="button"
|
||||||
|
|
|
@ -178,7 +178,7 @@ const getters = {
|
||||||
|
|
||||||
getLastVideoRefreshTimestampByProfile: (state) => (profileId) => {
|
getLastVideoRefreshTimestampByProfile: (state) => (profileId) => {
|
||||||
return state.lastVideoRefreshTimestampByProfile[profileId]
|
return state.lastVideoRefreshTimestampByProfile[profileId]
|
||||||
}
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
const actions = {
|
const actions = {
|
||||||
|
@ -921,14 +921,14 @@ const mutations = {
|
||||||
state.cachedPlaylist = value
|
state.cachedPlaylist = value
|
||||||
},
|
},
|
||||||
|
|
||||||
setSearchSortBy (state, value) {
|
|
||||||
state.searchSettings.sortBy = value
|
|
||||||
},
|
|
||||||
|
|
||||||
setSearchFilterValueChanged (state, value) {
|
setSearchFilterValueChanged (state, value) {
|
||||||
state.searchFilterValueChanged = value
|
state.searchFilterValueChanged = value
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setSearchSortBy (state, value) {
|
||||||
|
state.searchSettings.sortBy = value
|
||||||
|
},
|
||||||
|
|
||||||
setSearchTime (state, value) {
|
setSearchTime (state, value) {
|
||||||
state.searchSettings.time = value
|
state.searchSettings.time = value
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue