mirror of https://github.com/nocodb/nocodb
mertmit
1 year ago
committed by
GitHub
23 changed files with 375 additions and 214 deletions
@ -0,0 +1,74 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { RoleColors, RoleIcons, RoleLabels } from 'nocodb-sdk' |
||||||
|
import { toRef } from '#imports' |
||||||
|
|
||||||
|
const props = withDefaults( |
||||||
|
defineProps<{ |
||||||
|
role: keyof typeof RoleLabels |
||||||
|
clickable?: boolean |
||||||
|
inherit?: boolean |
||||||
|
border?: boolean |
||||||
|
}>(), |
||||||
|
{ |
||||||
|
clickable: false, |
||||||
|
inherit: false, |
||||||
|
border: true, |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const roleRef = toRef(props, 'role') |
||||||
|
const clickableRef = toRef(props, 'clickable') |
||||||
|
const inheritRef = toRef(props, 'inherit') |
||||||
|
const borderRef = toRef(props, 'border') |
||||||
|
|
||||||
|
const roleProperties = computed(() => { |
||||||
|
const role = roleRef.value |
||||||
|
|
||||||
|
const color = RoleColors[role] |
||||||
|
const icon = RoleIcons[role] |
||||||
|
const label = RoleLabels[role] |
||||||
|
|
||||||
|
return { |
||||||
|
color, |
||||||
|
icon, |
||||||
|
label, |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div |
||||||
|
class="flex items-center !border-0" |
||||||
|
:class="{ |
||||||
|
'cursor-pointer': clickableRef, |
||||||
|
}" |
||||||
|
style="width: fit-content" |
||||||
|
> |
||||||
|
<NcBadge class="!h-auto !px-[8px]" :color="roleProperties.color" :border="borderRef"> |
||||||
|
<div |
||||||
|
class="badge-text flex items-center gap-[4px]" |
||||||
|
:class="{ |
||||||
|
'text-purple-500': roleProperties.color === 'purple', |
||||||
|
'text-blue-500': roleProperties.color === 'blue', |
||||||
|
'text-green-500': roleProperties.color === 'green', |
||||||
|
'text-orange-500': roleProperties.color === 'orange', |
||||||
|
'text-yellow-500': roleProperties.color === 'yellow', |
||||||
|
'text-red-500': roleProperties.color === 'red', |
||||||
|
'text-gray-300': !roleProperties.color, |
||||||
|
}" |
||||||
|
> |
||||||
|
<GeneralIcon :icon="roleProperties.icon" /> |
||||||
|
{{ roleProperties.label }} |
||||||
|
<GeneralIcon v-if="clickableRef" icon="arrowDown" /> |
||||||
|
</div> |
||||||
|
</NcBadge> |
||||||
|
<div class="flex-1"></div> |
||||||
|
<!-- |
||||||
|
<a-tooltip v-if="inheritRef" placement="bottom"> |
||||||
|
<div class="text-gray-400 text-xs p-1 rounded-md">Workspace Role</div> |
||||||
|
</a-tooltip> |
||||||
|
--> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import { RoleDescriptions } from 'nocodb-sdk' |
||||||
|
import type { RoleLabels } from 'nocodb-sdk' |
||||||
|
import { toRef } from '#imports' |
||||||
|
|
||||||
|
const props = withDefaults( |
||||||
|
defineProps<{ |
||||||
|
role: keyof typeof RoleLabels |
||||||
|
roles: (keyof typeof RoleLabels)[] |
||||||
|
description?: boolean |
||||||
|
inherit?: string |
||||||
|
onRoleChange: (role: keyof typeof RoleLabels) => void |
||||||
|
}>(), |
||||||
|
{ |
||||||
|
description: true, |
||||||
|
}, |
||||||
|
) |
||||||
|
|
||||||
|
const roleRef = toRef(props, 'role') |
||||||
|
const inheritRef = toRef(props, 'inherit') |
||||||
|
const descriptionRef = toRef(props, 'description') |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcDropdown> |
||||||
|
<RolesBadge class="border-1" data-testid="roles" :role="roleRef" :inherit="inheritRef === role" clickable /> |
||||||
|
<template #overlay> |
||||||
|
<div class="nc-role-select-dropdown flex flex-col gap-[4px] p-1"> |
||||||
|
<div class="flex flex-col gap-[4px]"> |
||||||
|
<div v-for="rl in props.roles" :key="rl" :value="rl" :selected="rl === roleRef" @click="props.onRoleChange(rl)"> |
||||||
|
<div |
||||||
|
class="flex flex-col py-[3px] px-[8px] gap-[4px] bg-transparent cursor-pointer" |
||||||
|
:class="{ |
||||||
|
'w-[350px]': descriptionRef, |
||||||
|
'w-[200px]': !descriptionRef, |
||||||
|
}" |
||||||
|
> |
||||||
|
<div class="flex items-center justify-between"> |
||||||
|
<RolesBadge |
||||||
|
class="!bg-white hover:!bg-gray-100" |
||||||
|
:class="`nc-role-select-${rl}`" |
||||||
|
:role="rl" |
||||||
|
:inherit="inheritRef === rl" |
||||||
|
:border="false" |
||||||
|
/> |
||||||
|
<GeneralIcon v-if="rl === roleRef" icon="check" /> |
||||||
|
</div> |
||||||
|
<div v-if="descriptionRef" class="text-gray-500">{{ RoleDescriptions[rl] }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"></style> |
||||||
Loading…
Reference in new issue