AclStateButton.vue

<!--
  - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
  -
  - @author Julius Härtl <jus@bitgrid.net>
  -
  - @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>
	<div v-if="readOnly">
		<NcButton v-if="!isAllowed"
			v-tooltip="t('groupfolders', 'Denied')"
			:title="t('groupfolders', 'Denied')"
			:aria-label="t('groupfolders', 'Access denied')">
			<template #icon>
				<Cancel :size="16" />
			</template>
		</NcButton>
		<NcButton v-else
			v-tooltip="t('groupfolders', 'Allowed')"
			:title="t('groupfolders', 'Allowed')"
			:aria-label="t('groupfolders', 'Access allowed')">
			<template #icon>
				<Check :size="16" />
			</template>
		</NcButton>
	</div>
	<div v-else>
		<NcActions :aria-label="label" :v-tooltip="label">
			<template #icon>
				<component :is="icon" :class="{inherited: isInherited}" :size="16" />
			</template>
			<NcActionRadio name="state"
				:checked="state === STATES.INHERIT_ALLOW || state === STATES.INHERIT_DENY || state === STATES.INHERIT_DEFAULT"
				:disabled="disabled"
				@change="$emit('update', STATES.INHERIT_DEFAULT)">
				{{ t('groupfolders', 'Inherit permission') }}
			</NcActionRadio>
			<NcActionRadio name="state"
				:checked="state === STATES.SELF_DENY"
				:disabled="disabled"
				@change="$emit('update', STATES.SELF_DENY)">
				{{ t('groupfolders', 'Deny') }}
			</NcActionRadio>
			<NcActionRadio name="state"
				:checked="state === STATES.SELF_ALLOW"
				:disabled="disabled"
				@change="$emit('update', STATES.SELF_ALLOW)">
				{{ t('groupfolders', 'Allow') }}
			</NcActionRadio>
		</NcActions>
	</div>
</template>

<script>
import Check from 'vue-material-design-icons/Check.vue'
import Cancel from 'vue-material-design-icons/Cancel.vue'
import Minus from 'vue-material-design-icons/Minus.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
import NcActionRadio from '@nextcloud/vue/dist/Components/NcActionRadio.js'
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'

export const STATES = {
	INHERIT_DENY: 0,
	INHERIT_ALLOW: 1,
	INHERIT_DEFAULT: 2,
	SELF_DENY: 3,
	SELF_ALLOW: 4,
}

export default {
	name: 'AclStateButton',
	directives: {
		tooltip: Tooltip,
	},
	components: {
		NcButton,
		NcActions,
		NcActionRadio,
		Check,
		Cancel,
	},
	props: {
		inherited: {
			type: Boolean,
			default: false,
		},
		state: {
			type: Number,
			default: STATES.INHERIT_DENY,
		},
		readOnly: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			STATES,
		}
	},
	computed: {
		isAllowed() {
			return this.state === STATES.INHERIT_ALLOW || this.state === STATES.SELF_ALLOW || this.state === STATES.INHERIT_DEFAULT
		},
		isInherited() {
			return this.state === STATES.INHERIT_ALLOW || this.state === STATES.INHERIT_DENY || this.state === STATES.INHERIT_DEFAULT
		},
		icon() {
			switch (this.state) {
			case STATES.INHERIT_DEFAULT:
				return Minus
			case STATES.INHERIT_ALLOW:
			case STATES.SELF_ALLOW:
				return Check
			default:
				return Cancel
			}
		},
		label() {
			switch (this.state) {
			case STATES.INHERIT_DEFAULT:
				return t('groupfolders', 'Unset')
			case STATES.INHERIT_DENY:
				return t('groupfolders', 'Denied (Inherited permission)')
			case STATES.INHERIT_ALLOW:
				return t('groupfolders', 'Allowed (Inherited permission)')
			case STATES.SELF_DENY:
				return t('groupfolders', 'Denied')
			case STATES.SELF_ALLOW:
				return t('groupfolders', 'Allowed')
			}
			return ''
		},
	},
}
</script>

<style scoped>
	.inherited {
		opacity: 0.5;
		color: var(--color-text-maxcontrast);
	}
</style>