99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
<!--
|
|
@license GNU AGPL version 3 or any later version
|
|
|
|
This program is free software: you can redistribute it and/or modify
|
|
it under the terms of the GNU Affero General Public License as
|
|
published by the Free Software Foundation, either version 3 of the
|
|
License, or (at your option) any later version.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU Affero General Public License for more details.
|
|
|
|
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>
|
|
<NcButton
|
|
aria-label="t('side_menu', 'Select apps')"
|
|
variant="primary"
|
|
@click="openModal"
|
|
>
|
|
{{ t('side_menu', 'Select apps') }} ({{ model.length }})
|
|
</NcButton>
|
|
|
|
<NcModal
|
|
v-if="modal"
|
|
size="small"
|
|
@close="closeModal"
|
|
>
|
|
<div class="modal__content">
|
|
<NcCheckboxRadioSwitch
|
|
v-for="(item, key) in apps"
|
|
:key="key"
|
|
v-model="model"
|
|
name="value"
|
|
:value="item.id"
|
|
>
|
|
<img
|
|
:src="item.icon"
|
|
:alt="item.name"
|
|
/>
|
|
{{ item.name }}
|
|
</NcCheckboxRadioSwitch>
|
|
|
|
<div class="modal__footer">
|
|
<NcButton
|
|
variant="primary"
|
|
@click="closeModal"
|
|
>
|
|
{{ t('side_menu', 'Close') }}
|
|
</NcButton>
|
|
</div>
|
|
</div>
|
|
</NcModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
|
|
import { useNavStore } from '../../../store/nav.js'
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
const model = defineModel({ type: Array })
|
|
const navStore = useNavStore()
|
|
const modal = ref(false)
|
|
const apps = ref([])
|
|
|
|
const openModal = () => {
|
|
modal.value = true
|
|
}
|
|
|
|
const closeModal = () => {
|
|
modal.value = false
|
|
}
|
|
|
|
onMounted(async () => {
|
|
apps.value = await navStore.getCoreApps()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal__content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal__footer {
|
|
margin-top: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.modal__footer button {
|
|
display: inline-block;
|
|
}
|
|
|
|
img {
|
|
width: 15px;
|
|
height: 15px;
|
|
}
|
|
</style>
|