add categories customization
This commit is contained in:
Simon Vieille
@@ -0,0 +1,322 @@
|
||||
<!--
|
||||
@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', 'Customize')"
|
||||
variant="primary"
|
||||
@click="openModal"
|
||||
>
|
||||
{{ t('side_menu', 'Customize') }}
|
||||
</NcButton>
|
||||
|
||||
<NcModal
|
||||
v-if="modal"
|
||||
_size="small"
|
||||
@close="closeModal"
|
||||
>
|
||||
<div class="modal__content">
|
||||
<div class="menu">
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Categories')"
|
||||
:variant="section === 'cats' ? 'primary' : 'secondary'"
|
||||
@click="setSection('cats')"
|
||||
>
|
||||
{{ t('side_menu', 'Categories') }}
|
||||
</NcButton>
|
||||
<NcButton
|
||||
aria-label="t('side_menu', 'Applications')"
|
||||
:variant="section === 'apps' ? 'primary' : 'secondary'"
|
||||
@click="setSection('apps')"
|
||||
>
|
||||
{{ t('side_menu', 'Applications') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
|
||||
<div v-if="section === 'cats'">
|
||||
<table width="100%" v-if="!newCustomCategory && editCustomCategoryKey === null">
|
||||
<tbody>
|
||||
<tr v-for="(item, key) in categoriesCustom" :key="key">
|
||||
<td>{{ item[langs[0]] }}</td>
|
||||
<td width="50px">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-edit"
|
||||
@click="editCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
icon="icon-delete"
|
||||
@click="removeCustomCategory(key)"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div v-else class="form">
|
||||
<template v-if="newCustomCategory">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
v-model="newCustomCategory[lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcTextField
|
||||
v-for="lang in langs"
|
||||
v-model="categoriesCustom[editCustomCategoryKey][lang]"
|
||||
:label="lang"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="section === 'apps'">
|
||||
<table width="100%">
|
||||
<tbody>
|
||||
<tr v-for="item in apps" :key="key">
|
||||
<td>
|
||||
<img
|
||||
:src="item.icon"
|
||||
:alt="item.name"
|
||||
/>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td width="50%">
|
||||
<FormSelect
|
||||
v-model="appsCategoriesCustom[item.id]"
|
||||
:options="getOptions(categoriesCustom)"
|
||||
:required="false"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="modal__footer">
|
||||
<template v-if="section === 'cats'">
|
||||
<template v-if="newCustomCategory">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-checkmark"
|
||||
@click="saveCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-if="editCustomCategoryKey !== null">
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
icon="icon-close"
|
||||
@click="cancelCustomCategory"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NcActions>
|
||||
<NcActionButton
|
||||
v-if="!newCustomCategory && editCustomCategoryKey === null"
|
||||
@click="addCustomCategory"
|
||||
icon="icon-add"
|
||||
></NcActionButton>
|
||||
<NcActionButton
|
||||
v-if="editCustomCategoryKey !== null"
|
||||
@click="saveCustomCategory"
|
||||
icon="icon-checkmark"
|
||||
></NcActionButton>
|
||||
</NcActions>
|
||||
</template>
|
||||
</template>
|
||||
<NcButton
|
||||
variant="primary"
|
||||
@click="closeModal"
|
||||
class="btn-close"
|
||||
>
|
||||
{{ t('side_menu', 'Close') }}
|
||||
</NcButton>
|
||||
</div>
|
||||
</div>
|
||||
</NcModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { NcButton, NcModal, NcActions, NcActionButton, NcTextField } from '@nextcloud/vue'
|
||||
import { useNavStore } from '../../../store/nav.js'
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import FormSelect from './FormSelect'
|
||||
|
||||
const emit = defineEmits(['update:categoriesCustom', 'update:appsCategoriesCustom'])
|
||||
const { categoriesCustom, appsCategoriesCustom, langs } = defineProps({
|
||||
categoriesCustom: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
appsCategoriesCustom: {
|
||||
type: [Object, Array],
|
||||
required: true,
|
||||
},
|
||||
langs: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const navStore = useNavStore()
|
||||
const modal = ref(false)
|
||||
const apps = ref([])
|
||||
const categories = ref([])
|
||||
const section = ref('apps')
|
||||
const newCustomCategory = ref(null)
|
||||
const editCustomCategoryKey = ref(null)
|
||||
const appsCategoriesCustomNext = ref({})
|
||||
|
||||
const openModal = () => {
|
||||
modal.value = true
|
||||
}
|
||||
|
||||
const closeModal = () => {
|
||||
modal.value = false
|
||||
}
|
||||
|
||||
const setSection = (value) => {
|
||||
section.value = value
|
||||
}
|
||||
|
||||
const addCustomCategory = () => {
|
||||
let data = {
|
||||
id: 'cat' + Math.random().toString().replace('0.', ''),
|
||||
}
|
||||
|
||||
langs.forEach((lang) => {
|
||||
data[lang] = ''
|
||||
})
|
||||
|
||||
newCustomCategory.value = data
|
||||
}
|
||||
|
||||
const cancelCustomCategory = () => {
|
||||
newCustomCategory.value = null
|
||||
editCustomCategoryKey.value = null
|
||||
}
|
||||
|
||||
const saveCustomCategory = () => {
|
||||
const data = categoriesCustom
|
||||
|
||||
if (editCustomCategoryKey.value === null) {
|
||||
data.push({...newCustomCategory.value})
|
||||
}
|
||||
|
||||
emit('update:categoriesCustom', data)
|
||||
|
||||
newCustomCategory.value = null
|
||||
editCustomCategoryKey.value = null
|
||||
}
|
||||
|
||||
const removeCustomCategory = (key) => {
|
||||
const data = categoriesCustom
|
||||
delete data[key]
|
||||
|
||||
emit('update:categoriesCustom', Object.values(data))
|
||||
}
|
||||
|
||||
const editCustomCategory = (key) => {
|
||||
editCustomCategoryKey.value = key
|
||||
}
|
||||
|
||||
const getOptions = (custom) => {
|
||||
const data = []
|
||||
|
||||
custom.forEach((item) => {
|
||||
data.push({id: item.id, label: item[langs[0]]})
|
||||
})
|
||||
|
||||
categories.value.forEach((item) => {
|
||||
data.push({id: item.categoryId, label: item.name !== '' ? item.name : t('side_menu', 'Other')})
|
||||
})
|
||||
|
||||
data.sort((a, b) => (a.label < b.label ? -1 : 1))
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
watch(() => appsCategoriesCustomNext, (value) => {
|
||||
console.log(value)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
apps.value = await navStore.getApps()
|
||||
categories.value = await navStore.getCategories()
|
||||
|
||||
let value = {}
|
||||
|
||||
apps.value.forEach((app) => {
|
||||
if (!appsCategoriesCustom[app.id]) {
|
||||
value[app.id] = null
|
||||
} else {
|
||||
value[app.id] = appsCategoriesCustom[app.id]
|
||||
}
|
||||
})
|
||||
|
||||
emit('update:appsCategoriesCustom', value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal__content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.menu button {
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.modal__footer {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.modal__footer button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
tr:hover, td:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
margin-left: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -22,6 +22,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
v-model="model"
|
||||
:multiple="multiple"
|
||||
>
|
||||
<option :value="null" v-if="!required"></option>
|
||||
<option
|
||||
v-for="option in options"
|
||||
:key="option.id"
|
||||
@@ -49,12 +50,17 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
<script setup>
|
||||
import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
|
||||
|
||||
const model = defineModel({ type: [Number, String, Array] })
|
||||
const model = defineModel({ type: [Number, String, Array, null] })
|
||||
const { options, expanded } = defineProps({
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
expanded: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
||||
Reference in New Issue
Block a user