You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.4 KiB
112 lines
2.4 KiB
<!--
|
|
- SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
|
|
<template>
|
|
<NcActions :aria-label="t('settings', 'Toggle account actions menu')"
|
|
:disabled="disabled"
|
|
:inline="1">
|
|
<NcActionButton :data-cy-user-list-action-toggle-edit="`${edit}`"
|
|
:disabled="disabled"
|
|
@click="toggleEdit">
|
|
{{ edit ? t('settings', 'Done') : t('settings', 'Edit') }}
|
|
<template #icon>
|
|
<NcIconSvgWrapper :key="editSvg" :svg="editSvg" aria-hidden="true" />
|
|
</template>
|
|
</NcActionButton>
|
|
<NcActionButton v-for="({ action, icon, text }, index) in enabledActions"
|
|
:key="index"
|
|
:disabled="disabled"
|
|
:aria-label="text"
|
|
:icon="icon"
|
|
@click="(event) => action(event, { ...user })">
|
|
{{ text }}
|
|
</NcActionButton>
|
|
</NcActions>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import type { PropType } from 'vue'
|
|
import { defineComponent } from 'vue'
|
|
|
|
import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
|
|
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
|
|
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
|
|
import SvgCheck from '@mdi/svg/svg/check.svg?raw'
|
|
import SvgPencil from '@mdi/svg/svg/pencil.svg?raw'
|
|
|
|
interface UserAction {
|
|
action: (event: MouseEvent, user: Record<string, unknown>) => void,
|
|
enabled?: (user: Record<string, unknown>) => boolean,
|
|
icon: string,
|
|
text: string,
|
|
}
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
NcActionButton,
|
|
NcActions,
|
|
NcIconSvgWrapper,
|
|
},
|
|
|
|
props: {
|
|
/**
|
|
* Array of user actions
|
|
*/
|
|
actions: {
|
|
type: Array as PropType<readonly UserAction[]>,
|
|
required: true,
|
|
},
|
|
|
|
/**
|
|
* The state whether the row is currently disabled
|
|
*/
|
|
disabled: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
|
|
/**
|
|
* The state whether the row is currently edited
|
|
*/
|
|
edit: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
|
|
/**
|
|
* Target of this actions
|
|
*/
|
|
user: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
/**
|
|
* Current MDI logo to show for edit toggle
|
|
*/
|
|
editSvg(): string {
|
|
return this.edit ? SvgCheck : SvgPencil
|
|
},
|
|
|
|
/**
|
|
* Enabled user row actions
|
|
*/
|
|
enabledActions(): UserAction[] {
|
|
return this.actions.filter(action => typeof action.enabled === 'function' ? action.enabled(this.user) : true)
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Toggle edit mode by emitting the update event
|
|
*/
|
|
toggleEdit() {
|
|
this.$emit('update:edit', !this.edit)
|
|
},
|
|
},
|
|
})
|
|
</script>
|