forked from AkkomaGang/admin-fe
Fetch media proxy settings and render form if it's enabled
This commit is contained in:
parent
dd88974338
commit
ac1864c46f
2 changed files with 84 additions and 62 deletions
|
@ -1,4 +1,5 @@
|
||||||
import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
|
import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
|
||||||
|
import { fetchSettings } from '@/api/settings'
|
||||||
import { Message } from 'element-ui'
|
import { Message } from 'element-ui'
|
||||||
import i18n from '@/lang'
|
import i18n from '@/lang'
|
||||||
|
|
||||||
|
@ -7,10 +8,14 @@ const mediaProxyCache = {
|
||||||
bannedUrls: [],
|
bannedUrls: [],
|
||||||
currentPage: 1,
|
currentPage: 1,
|
||||||
loading: false,
|
loading: false,
|
||||||
|
mediaProxyEnabled: false,
|
||||||
pageSize: 50,
|
pageSize: 50,
|
||||||
totalUrlsCount: 0
|
totalUrlsCount: 0
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
|
MEDIA_PROXY_ENABLED: (state, enabled) => {
|
||||||
|
state.mediaProxyEnabled = enabled
|
||||||
|
},
|
||||||
SET_BANNED_URLS: (state, urls) => {
|
SET_BANNED_URLS: (state, urls) => {
|
||||||
state.bannedUrls = urls.map(el => { return { url: el } })
|
state.bannedUrls = urls.map(el => { return { url: el } })
|
||||||
},
|
},
|
||||||
|
@ -25,6 +30,17 @@ const mediaProxyCache = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
async FetchMediaProxySetting({ commit, getters }) {
|
||||||
|
const { data } = await fetchSettings(getters.authHost, getters.token)
|
||||||
|
const mediaProxySettings = data.configs.find(el => el.key === ':media_proxy')
|
||||||
|
? data.configs.find(el => el.key === ':media_proxy').value
|
||||||
|
: []
|
||||||
|
const mediaProxyEnabled = mediaProxySettings.find(el => el.tuple[0] === ':enabled')
|
||||||
|
? mediaProxySettings.find(el => el.tuple[0] === ':enabled').tuple[1]
|
||||||
|
: false
|
||||||
|
|
||||||
|
commit('MEDIA_PROXY_ENABLED', mediaProxyEnabled)
|
||||||
|
},
|
||||||
async ListBannedUrls({ commit, getters, state }, { page }) {
|
async ListBannedUrls({ commit, getters, state }, { page }) {
|
||||||
commit('SET_LOADING', true)
|
commit('SET_LOADING', true)
|
||||||
const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token)
|
const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token)
|
||||||
|
|
|
@ -1,67 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="media-proxy-cache-container">
|
<div class="media-proxy-cache-container">
|
||||||
<div class="media-proxy-cache-header-container">
|
<div v-if="mediaProxyEnabled">
|
||||||
<h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
|
<div class="media-proxy-cache-header-container">
|
||||||
<reboot-button/>
|
<h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
|
||||||
</div>
|
<reboot-button/>
|
||||||
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
|
</div>
|
||||||
<div class="url-input-container">
|
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
|
||||||
<el-input
|
<div class="url-input-container">
|
||||||
:placeholder="$t('mediaProxyCache.url')"
|
<el-input
|
||||||
v-model="urls"
|
:placeholder="$t('mediaProxyCache.url')"
|
||||||
type="textarea"
|
v-model="urls"
|
||||||
autosize
|
type="textarea"
|
||||||
clearable
|
autosize
|
||||||
class="url-input"/>
|
clearable
|
||||||
<el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
|
class="url-input"/>
|
||||||
<el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
|
<el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
|
||||||
</div>
|
<el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
|
||||||
<span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
|
</div>
|
||||||
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
|
<span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
|
||||||
<el-table
|
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
|
||||||
v-loading="loading"
|
<el-table
|
||||||
:data="bannedUrls"
|
v-loading="loading"
|
||||||
class="banned-urls-table"
|
:data="bannedUrls"
|
||||||
@selection-change="handleSelectionChange">>
|
class="banned-urls-table"
|
||||||
<el-table-column
|
@selection-change="handleSelectionChange">>
|
||||||
type="selection"
|
<el-table-column
|
||||||
align="center"
|
type="selection"
|
||||||
width="55"/>
|
align="center"
|
||||||
<el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
|
width="55"/>
|
||||||
<template slot="header" slot-scope="scope">
|
<el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
|
||||||
<el-input
|
<template slot="header" slot-scope="scope">
|
||||||
:placeholder="$t('users.search')"
|
<el-input
|
||||||
v-model="search"
|
:placeholder="$t('users.search')"
|
||||||
size="mini"
|
v-model="search"
|
||||||
prefix-icon="el-icon-search"
|
size="mini"
|
||||||
@input="handleDebounceSearchInput"/>
|
prefix-icon="el-icon-search"
|
||||||
</template>
|
@input="handleDebounceSearchInput"/>
|
||||||
</el-table-column>
|
</template>
|
||||||
<el-table-column>
|
</el-table-column>
|
||||||
<template slot="header">
|
<el-table-column>
|
||||||
<el-button
|
<template slot="header">
|
||||||
:disabled="removeSelectedDisabled"
|
<el-button
|
||||||
size="mini"
|
:disabled="removeSelectedDisabled"
|
||||||
class="remove-url-button"
|
size="mini"
|
||||||
@click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
|
class="remove-url-button"
|
||||||
</template>
|
@click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
|
||||||
<template slot-scope="scope">
|
</template>
|
||||||
<el-button
|
<template slot-scope="scope">
|
||||||
size="mini"
|
<el-button
|
||||||
class="remove-url-button"
|
size="mini"
|
||||||
@click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
|
class="remove-url-button"
|
||||||
</template>
|
@click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
|
||||||
</el-table-column>
|
</template>
|
||||||
</el-table>
|
</el-table-column>
|
||||||
<div v-if="!loading" class="pagination">
|
</el-table>
|
||||||
<el-pagination
|
<div v-if="!loading" class="pagination">
|
||||||
:total="urlsCount"
|
<el-pagination
|
||||||
:current-page="currentPage"
|
:total="urlsCount"
|
||||||
:page-size="pageSize"
|
:current-page="currentPage"
|
||||||
hide-on-single-page
|
:page-size="pageSize"
|
||||||
layout="prev, pager, next"
|
hide-on-single-page
|
||||||
@current-change="handlePageChange"
|
layout="prev, pager, next"
|
||||||
/>
|
@current-change="handlePageChange"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -94,6 +96,9 @@ export default {
|
||||||
loading() {
|
loading() {
|
||||||
return this.$store.state.mediaProxyCache.loading
|
return this.$store.state.mediaProxyCache.loading
|
||||||
},
|
},
|
||||||
|
mediaProxyEnabled() {
|
||||||
|
return this.$store.state.mediaProxyCache.mediaProxyEnabled
|
||||||
|
},
|
||||||
pageSize() {
|
pageSize() {
|
||||||
return this.$store.state.mediaProxyCache.pageSize
|
return this.$store.state.mediaProxyCache.pageSize
|
||||||
},
|
},
|
||||||
|
@ -112,6 +117,7 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('GetNodeInfo')
|
this.$store.dispatch('GetNodeInfo')
|
||||||
this.$store.dispatch('NeedReboot')
|
this.$store.dispatch('NeedReboot')
|
||||||
|
this.$store.dispatch('FetchMediaProxySetting')
|
||||||
this.$store.dispatch('ListBannedUrls', { page: 1 })
|
this.$store.dispatch('ListBannedUrls', { page: 1 })
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
Loading…
Reference in a new issue