refactoring: update severals components
This commit is contained in:
Simon Vieille
@@ -15,13 +15,16 @@ You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<template>
|
||||
<div id="side-menu" class="side-menu-with-categories">
|
||||
<div
|
||||
id="side-menu"
|
||||
class="side-menu-with-categories"
|
||||
>
|
||||
<div class="side-menu-header">
|
||||
<SettingsButton
|
||||
v-if="settings"
|
||||
v-bind:href="settings.href"
|
||||
v-bind:label="settings.name"
|
||||
v-bind:avatar="settings.avatar"
|
||||
:href="settings.href"
|
||||
:label="settings.name"
|
||||
:avatar="settings.avatar"
|
||||
/>
|
||||
<AppSearch v-model:search="search" />
|
||||
<OpenerButton />
|
||||
@@ -31,124 +34,69 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
<div class="side-menu-categories">
|
||||
<Loader v-if="!items.length" />
|
||||
|
||||
<div class="side-menu-category" v-for="(category, key) in items" v-if="hasSearchMatch(category.apps)" v-bind:key="key">
|
||||
<h2 class="side-menu-category-title" v-if="category.name != ''" v-text="category.name"></h2>
|
||||
<template
|
||||
v-for="(category, key) in items"
|
||||
:key="key"
|
||||
>
|
||||
<div
|
||||
v-if="containsAppsMatchingSearch(category.apps, search)"
|
||||
class="side-menu-category"
|
||||
>
|
||||
<h2
|
||||
v-if="category.name != ''"
|
||||
class="side-menu-category-title"
|
||||
>
|
||||
{{ category.name }}
|
||||
</h2>
|
||||
|
||||
<ul class="side-menu-apps-list">
|
||||
<SideMenuBigApp
|
||||
v-for="(app, appId) in category.apps"
|
||||
v-if="searchMatch(app.name)"
|
||||
v-bind:key="appId"
|
||||
v-bind:classes="{'side-menu-app': true, 'active': activeApp === appId}"
|
||||
v-bind:icon="app.icon"
|
||||
v-bind:label="app.name"
|
||||
v-bind:href="app.href"
|
||||
v-bind:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="side-menu-apps-list">
|
||||
<template
|
||||
v-for="(app, appId) in category.apps"
|
||||
:key="appId"
|
||||
>
|
||||
<SideMenuBigApp
|
||||
v-if="isAppMatchingSearch(app.name, search)"
|
||||
:classes="{ 'side-menu-app': true, active: activeApp === appId }"
|
||||
:icon="app.icon"
|
||||
:label="app.name"
|
||||
:href="app.href"
|
||||
:target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined"
|
||||
/>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
import OpenerButton from './OpenerButton'
|
||||
import SettingsButton from './SettingsButton'
|
||||
import Loader from './Loader'
|
||||
import AppSearch from './AppSearch'
|
||||
import SideMenuBigApp from './SideMenuBigApp'
|
||||
import { loadState } from '@nextcloud/initial-state'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useNavStore } from '../store/nav.js'
|
||||
import { useConfigStore } from '../store/config.js'
|
||||
import { getActiveAppId } from '../lib/app.js'
|
||||
import { containsAppsMatchingSearch, isAppMatchingSearch } from '../lib/search.js'
|
||||
|
||||
import { ref } from 'vue'
|
||||
import OpenerButton from '../components/OpenerButton'
|
||||
import SettingsButton from '../components/SettingsButton'
|
||||
import Loader from '../components/Loader'
|
||||
import AppSearch from '../components/AppSearch'
|
||||
import SideMenuBigApp from '../components/SideMenuBigApp'
|
||||
|
||||
export default {
|
||||
name: 'SideMenuWithCategories',
|
||||
components: {
|
||||
SettingsButton,
|
||||
OpenerButton,
|
||||
Loader,
|
||||
SideMenuBigApp,
|
||||
AppSearch,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeApp: null,
|
||||
targetBlank: false,
|
||||
targetBlankApps: [],
|
||||
settings: null,
|
||||
search: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
retrieveApps() {
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/nav/items'))
|
||||
.then((response) => {
|
||||
this.items = response.data.items
|
||||
let apps = []
|
||||
const items = ref([])
|
||||
const activeApp = ref(null)
|
||||
const targetBlankApps = ref([])
|
||||
const settings = ref(null)
|
||||
const search = ref('')
|
||||
|
||||
for (let category of this.items) {
|
||||
for (let a in category.apps) {
|
||||
apps.push(category.apps[a])
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
const config = useConfigStore.getConfig()
|
||||
|
||||
document.querySelector('body').dispatchEvent(new CustomEvent('side-menu.apps', {
|
||||
detail: {apps: apps},
|
||||
}))
|
||||
})
|
||||
},
|
||||
targetBlankApps.value = config['target-blank-apps']
|
||||
settings.value = config['settings']
|
||||
|
||||
retrieveActiveApp() {
|
||||
const ncApps = loadState('core', 'apps', {})
|
||||
|
||||
for (let id in ncApps) {
|
||||
if (ncApps[id].active) {
|
||||
this.activeApp = id
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
retrieveConfig() {
|
||||
axios
|
||||
.get(OC.generateUrl('/apps/side_menu/js/config'))
|
||||
.then((response) => {
|
||||
const config = response.data
|
||||
|
||||
this.targetBlankApps = config['target-blank-apps']
|
||||
this.settings = config['settings']
|
||||
})
|
||||
},
|
||||
|
||||
hasSearchMatch(apps) {
|
||||
if (this.search.trim() === '') {
|
||||
return true
|
||||
}
|
||||
|
||||
for (let key in apps) {
|
||||
if (this.searchMatch(apps[key].name)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
},
|
||||
|
||||
searchMatch(name) {
|
||||
if (this.search.trim() === '') {
|
||||
return true
|
||||
}
|
||||
|
||||
return name.toLowerCase().includes(this.search.toLowerCase())
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.retrieveConfig()
|
||||
this.retrieveApps()
|
||||
this.retrieveActiveApp()
|
||||
}
|
||||
}
|
||||
items.value = useNavStore.getCategories()
|
||||
activeApp.value = getActiveAppId()
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user