Basix/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fetch media proxy settings and render form if it's enabled

Browse source
This commit is contained in:
Angelina Filippova 2020-09-05 23:57:52 +03:00
parent dd88974338
commit ac1864c46f
2 changed files with 84 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/store/modules/mediaProxyCache.js
View file

@ -1,4 +1,5 @@
import { listBannedUrls, purgeUrls, removeBannedUrls, searchBannedUrls } from '@/api/mediaProxyCache'
import { fetchSettings } from '@/api/settings'
import { Message } from 'element-ui'
import i18n from '@/lang'
@ -7,10 +8,14 @@ const mediaProxyCache = {
bannedUrls: [],
currentPage: 1,
loading: false,
mediaProxyEnabled: false,
pageSize: 50,
totalUrlsCount: 0
},
mutations: {
MEDIA_PROXY_ENABLED: (state, enabled) => {
state.mediaProxyEnabled = enabled
},
SET_BANNED_URLS: (state, urls) => {
state.bannedUrls = urls.map(el => { return { url: el } })
},
@ -25,6 +30,17 @@ const mediaProxyCache = {
}
},
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 }) {
commit('SET_LOADING', true)
const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token)

130
src/views/mediaProxyCache/index.vue
View file

@ -1,67 +1,69 @@
<template>
<div class="media-proxy-cache-container">
<div class="media-proxy-cache-header-container">
<h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
<reboot-button/>
</div>
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
<div class="url-input-container">
<el-input
:placeholder="$t('mediaProxyCache.url')"
v-model="urls"
type="textarea"
autosize
clearable
class="url-input"/>
<el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
<el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
</div>
<span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
<el-table
v-loading="loading"
:data="bannedUrls"
class="banned-urls-table"
@selection-change="handleSelectionChange">>
<el-table-column
type="selection"
align="center"
width="55"/>
<el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
<template slot="header" slot-scope="scope">
<el-input
:placeholder="$t('users.search')"
v-model="search"
size="mini"
prefix-icon="el-icon-search"
@input="handleDebounceSearchInput"/>
</template>
</el-table-column>
<el-table-column>
<template slot="header">
<el-button
:disabled="removeSelectedDisabled"
size="mini"
class="remove-url-button"
@click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
</template>
<template slot-scope="scope">
<el-button
size="mini"
class="remove-url-button"
@click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="!loading" class="pagination">
<el-pagination
:total="urlsCount"
:current-page="currentPage"
:page-size="pageSize"
hide-on-single-page
layout="prev, pager, next"
@current-change="handlePageChange"
/>
<div v-if="mediaProxyEnabled">
<div class="media-proxy-cache-header-container">
<h1>{{ $t('mediaProxyCache.mediaProxyCache') }}</h1>
<reboot-button/>
</div>
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.evictObjectsHeader') }}</p>
<div class="url-input-container">
<el-input
:placeholder="$t('mediaProxyCache.url')"
v-model="urls"
type="textarea"
autosize
clearable
class="url-input"/>
<el-checkbox v-model="ban">{{ $t('mediaProxyCache.ban') }}</el-checkbox>
<el-button class="evict-button" @click="evictURL">{{ $t('mediaProxyCache.evict') }}</el-button>
</div>
<span class="expl url-input-expl">{{ $t('mediaProxyCache.multipleInput') }}</span>
<p class="media-proxy-cache-header">{{ $t('mediaProxyCache.listBannedUrlsHeader') }}</p>
<el-table
v-loading="loading"
:data="bannedUrls"
class="banned-urls-table"
@selection-change="handleSelectionChange">>
<el-table-column
type="selection"
align="center"
width="55"/>
<el-table-column :min-width="isDesktop ? 320 : 120" prop="url">
<template slot="header" slot-scope="scope">
<el-input
:placeholder="$t('users.search')"
v-model="search"
size="mini"
prefix-icon="el-icon-search"
@input="handleDebounceSearchInput"/>
</template>
</el-table-column>
<el-table-column>
<template slot="header">
<el-button
:disabled="removeSelectedDisabled"
size="mini"
class="remove-url-button"
@click="removeSelected()">{{ $t('mediaProxyCache.removeSelected') }}</el-button>
</template>
<template slot-scope="scope">
<el-button
size="mini"
class="remove-url-button"
@click="removeUrl(scope.row.url)">{{ $t('mediaProxyCache.remove') }}</el-button>
</template>
</el-table-column>
</el-table>
<div v-if="!loading" class="pagination">
<el-pagination
:total="urlsCount"
:current-page="currentPage"
:page-size="pageSize"
hide-on-single-page
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</template>
@ -94,6 +96,9 @@ export default {
loading() {
return this.$store.state.mediaProxyCache.loading
},
mediaProxyEnabled() {
return this.$store.state.mediaProxyCache.mediaProxyEnabled
},
pageSize() {
return this.$store.state.mediaProxyCache.pageSize
},
@ -112,6 +117,7 @@ export default {
mounted() {
this.$store.dispatch('GetNodeInfo')
this.$store.dispatch('NeedReboot')
this.$store.dispatch('FetchMediaProxySetting')
this.$store.dispatch('ListBannedUrls', { page: 1 })
},
methods: {