cyca/resources/js/components/Details/PermissionBox.vue
Richard Dern 400e3d01f1 Refresh
2022-01-12 00:35:37 +01:00

80 lines
2.1 KiB
Vue
Executable File

<template>
<label
class="badge cursor-pointer"
v-bind:class="{ success: granted, danger: !granted }"
>
<input
type="checkbox"
v-model="granted"
class="hidden"
v-on:input="
updatePermission({
ability: ability,
granted: $event.target.checked,
folder: folder,
user: user ? user.id : null,
})
"
/>
<svg fill="currentColor" width="16" height="16">
<use
v-bind:xlink:href="
granted
? icon('permission_granted')
: icon('permission_denied')
"
/>
</svg>
<span>
{{ text }}
</span>
</label>
</template>
<script>
import { mapActions } from "vuex";
export default {
props: ["folder", "user", "ability", "text"],
data: function () {
return {
granted: false,
};
},
watch: {
folder: function () {
this.granted = this.canByDefault(this.ability);
this.$forceUpdate();
},
user: function () {
this.granted = this.canByDefault(this.ability);
this.$forceUpdate();
},
},
mounted: function () {
this.granted = this.canByDefault(this.ability);
},
methods: {
...mapActions({
updatePermission: "folders/updatePermission",
}),
canByDefault: function (permission) {
const self = this;
if (
self.user &&
"permissions" in self.user &&
permission in self.user.permissions[0]
) {
return self.user.permissions[0][permission];
} else if (
"default_permissions" in self.folder &&
permission in self.folder.default_permissions
) {
return self.folder.default_permissions[permission];
}
return false;
},
},
};
</script>