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