多维表格
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.
 
 
 
 
 
 

101 lines
3.4 KiB

<template>
<v-menu offset-y max-width="350">
<template #activator="{on}">
<v-icon v-if="value === 'locked'" small class="mr-5" v-on="on">
mdi-lock
</v-icon>
<v-icon v-else-if="value === 'personal'" small class="mr-5" v-on="on">
mdi-account
</v-icon>
<v-icon v-else small class="mr-5" v-on="on">
mdi-account-group
</v-icon>
</template>
<v-list maxc-width="350">
<v-list-item two-line class="pb-4" @click="changeLockType('collaborative')">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="!value || value === 'collaborative'" small>
mdi-check-bold
</v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
<v-list-item-title>
<v-icon small class="mt-n1" color="primary">
mdi-account-group
</v-icon>
Collaborative view
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
Collaborators with edit permissions or higher can change the view configuration.
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item two-line class="pb-4" @click="changeLockType('locked')">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="value === 'locked'" small>
mdi-check-bold
</v-icon>
</v-list-item-icon>
<v-list-item-content class="pb-1">
<v-list-item-title>
<v-icon small class="mt-n1" color="primary">
mdi-lock
</v-icon>
Locked View
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
No one can edit the view configuration until it is unlocked.
</v-list-item-subtitle>
<span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
</v-list-item-content>
</v-list-item>
<v-list-item three-line @click="changeLockType('personal')">
<v-list-item-icon class="mr-1 align-self-center">
<v-icon v-if="value === 'personal'" small>
mdi-check-bold
</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
<v-icon small class="mt-n1" color="primary">
mdi-account
</v-icon>
Personal view
</v-list-item-title>
<v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
</v-list-item-subtitle>
<span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</template>
<script>
export default {
name: 'LockMenu',
props: ['value'],
data: () => ({
}),
methods: {
changeLockType(type) {
if (type === 'personal') {
return this.$toast.info('Coming soon').goAway(3000)
}
this.$emit('input', type)
this.$toast.success(`Successfully Switched to ${type} view`).goAway(3000)
}
}
}
</script>
<style scoped>
</style>