mirror of https://github.com/nocodb/nocodb
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.
108 lines
3.8 KiB
108 lines
3.8 KiB
<script lang="ts" setup> |
|
import { useToast } from 'vue-toastification' |
|
|
|
interface Props { |
|
modelValue?: LockType |
|
} |
|
|
|
const props = defineProps<Props>() |
|
|
|
const emits = defineEmits(['update:modelValue']) |
|
|
|
enum LockType { |
|
Personal = 'personal', |
|
Locked = 'locked', |
|
Collaborative = 'collaborative', |
|
} |
|
|
|
const vModel = useVModel(props, 'modelValue', emits) |
|
|
|
const { $e } = useNuxtApp() |
|
|
|
const toast = useToast() |
|
|
|
function changeLockType(type: LockType) { |
|
$e('a:grid:lockmenu', { lockType: type }) |
|
|
|
if (type === 'personal') { |
|
return toast.info('Coming soon', { timeout: 3000 }) |
|
} |
|
|
|
vModel.value = type |
|
|
|
toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 }) |
|
} |
|
</script> |
|
|
|
<script lang="ts"> |
|
export default { |
|
name: 'LockMenu', |
|
} |
|
</script> |
|
|
|
<template> |
|
<v-menu offset-y max-width="350"> |
|
<template #activator="{ props: menuProps }"> |
|
<v-icon v-if="vModel === LockType.Locked" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> |
|
mdi-lock-outline |
|
</v-icon> |
|
<v-icon v-else-if="vModel === LockType.Personal" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> |
|
mdi-account |
|
</v-icon> |
|
<v-icon v-else small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> mdi-account-group-outline </v-icon> |
|
</template> |
|
<v-list maxc-width="350"> |
|
<v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)"> |
|
<v-list-item-icon class="mr-1 align-self-center"> |
|
<v-icon v-if="!vModel || vModel === LockType.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(LockType.Locked)"> |
|
<v-list-item-icon class="mr-1 align-self-center"> |
|
<v-icon v-if="vModel === LockType.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(LockType.Personal)"> |
|
<v-list-item-icon class="mr-1 align-self-center"> |
|
<v-icon v-if="vModel === LockType.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> |
|
|
|
<style scoped></style>
|
|
|