Add styled ticket user dropdowns
This commit is contained in:
@@ -25,8 +25,8 @@ import AcceptanceCriteriaEditor from '@/components/projects/AcceptanceCriteriaEd
|
||||
import InlineSaveStatus from '@/components/projects/InlineSaveStatus.vue';
|
||||
import InlineTextEditor from '@/components/projects/InlineTextEditor.vue';
|
||||
import ProjectTabs from '@/components/projects/ProjectTabs.vue';
|
||||
import UserSelectDropdown from '@/components/projects/UserSelectDropdown.vue';
|
||||
import TicketTreeList from '@/components/TicketTreeList.vue';
|
||||
import UserAvatar from '@/components/ui/avatar/UserAvatar.vue';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
@@ -185,16 +185,6 @@ const currentTicketPriority = computed(
|
||||
ticketPriority.id === Number(form.ticket_priority_id),
|
||||
) ?? props.ticket.ticket_priority,
|
||||
);
|
||||
const currentAssignee = computed(
|
||||
() =>
|
||||
props.users.find((user) => user.id === Number(form.assignee_user_id)) ??
|
||||
null,
|
||||
);
|
||||
const currentAuthor = computed(
|
||||
() =>
|
||||
props.users.find((user) => user.id === Number(form.author_user_id)) ??
|
||||
null,
|
||||
);
|
||||
const currentParentTicketOption = computed(
|
||||
() =>
|
||||
props.parentTicketOptions.find(
|
||||
@@ -853,57 +843,16 @@ const formatDateTime = (value: string): string => {
|
||||
>Assignee</span
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<select
|
||||
v-if="
|
||||
activeSelectField === 'assignee_user_id'
|
||||
"
|
||||
<UserSelectDropdown
|
||||
v-model="form.assignee_user_id"
|
||||
autofocus
|
||||
class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
|
||||
@change="
|
||||
:users="users"
|
||||
:editable="canEditTicket"
|
||||
label="Assignee"
|
||||
empty-label="Unassigned"
|
||||
@commit="
|
||||
commitSelectField('assignee_user_id')
|
||||
"
|
||||
@blur="activeSelectField = null"
|
||||
>
|
||||
<option value="">Unassigned</option>
|
||||
<option
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
>
|
||||
{{ user.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
v-else-if="canEditTicket"
|
||||
type="button"
|
||||
class="hover:text-primary focus-visible:ring-ring flex min-h-7 w-full items-center gap-2 rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
|
||||
@click="
|
||||
activeSelectField = 'assignee_user_id'
|
||||
"
|
||||
>
|
||||
<UserAvatar
|
||||
v-if="currentAssignee"
|
||||
:user="currentAssignee"
|
||||
class="size-6"
|
||||
/>
|
||||
<span class="truncate">{{
|
||||
currentAssignee?.name ?? 'Unassigned'
|
||||
}}</span>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="flex min-h-7 items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
<UserAvatar
|
||||
v-if="currentAssignee"
|
||||
:user="currentAssignee"
|
||||
class="size-6"
|
||||
/>
|
||||
<span class="truncate">{{
|
||||
currentAssignee?.name ?? 'Unassigned'
|
||||
}}</span>
|
||||
</div>
|
||||
/>
|
||||
<InlineSaveStatus
|
||||
:state="saveStateFor('assignee_user_id')"
|
||||
:error="errorFor('assignee_user_id')"
|
||||
@@ -1034,58 +983,16 @@ const formatDateTime = (value: string): string => {
|
||||
>Author</span
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<select
|
||||
v-if="
|
||||
activeSelectField ===
|
||||
'author_user_id' && canEditAuthor
|
||||
"
|
||||
<UserSelectDropdown
|
||||
v-model="form.author_user_id"
|
||||
autofocus
|
||||
class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
|
||||
@change="
|
||||
:users="users"
|
||||
:editable="canEditAuthor"
|
||||
label="Author"
|
||||
empty-label="No author"
|
||||
@commit="
|
||||
commitSelectField('author_user_id')
|
||||
"
|
||||
@blur="activeSelectField = null"
|
||||
>
|
||||
<option value="">No author</option>
|
||||
<option
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
>
|
||||
{{ user.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
v-else-if="canEditAuthor"
|
||||
type="button"
|
||||
class="hover:text-primary focus-visible:ring-ring flex min-h-7 w-full items-center gap-2 rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
|
||||
@click="
|
||||
activeSelectField = 'author_user_id'
|
||||
"
|
||||
>
|
||||
<UserAvatar
|
||||
v-if="currentAuthor"
|
||||
:user="currentAuthor"
|
||||
class="size-6"
|
||||
/>
|
||||
<span class="truncate">{{
|
||||
currentAuthor?.name ?? 'No author'
|
||||
}}</span>
|
||||
</button>
|
||||
<div
|
||||
v-else
|
||||
class="flex min-h-7 items-center gap-2 text-sm font-medium"
|
||||
>
|
||||
<UserAvatar
|
||||
v-if="currentAuthor"
|
||||
:user="currentAuthor"
|
||||
class="size-6"
|
||||
/>
|
||||
<span class="truncate">{{
|
||||
currentAuthor?.name ?? 'No author'
|
||||
}}</span>
|
||||
</div>
|
||||
/>
|
||||
<InlineSaveStatus
|
||||
:state="saveStateFor('author_user_id')"
|
||||
:error="errorFor('author_user_id')"
|
||||
@@ -1167,66 +1074,20 @@ const formatDateTime = (value: string): string => {
|
||||
"
|
||||
class="min-w-0"
|
||||
>
|
||||
<select
|
||||
v-if="
|
||||
activeSelectField ===
|
||||
`field-${ticketFieldDefinition.id}`
|
||||
"
|
||||
<UserSelectDropdown
|
||||
v-model="
|
||||
form.field_values[index].value_user_id
|
||||
"
|
||||
autofocus
|
||||
class="border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full rounded border px-2 py-1.5 text-sm outline-none focus-visible:ring-[3px]"
|
||||
@change="
|
||||
:users="users"
|
||||
:editable="canEditTicket"
|
||||
:label="ticketFieldDefinition.label"
|
||||
empty-label="Unassigned"
|
||||
@commit="
|
||||
commitSelectField(
|
||||
`field-${ticketFieldDefinition.id}`,
|
||||
)
|
||||
"
|
||||
@blur="activeSelectField = null"
|
||||
>
|
||||
<option value="">Unassigned</option>
|
||||
<option
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
:value="user.id"
|
||||
>
|
||||
{{ user.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
v-else-if="canEditTicket"
|
||||
type="button"
|
||||
class="hover:text-primary focus-visible:ring-ring min-h-7 w-full truncate rounded text-left text-sm font-medium outline-none focus-visible:ring-2"
|
||||
@click="
|
||||
activeSelectField = `field-${ticketFieldDefinition.id}`
|
||||
"
|
||||
>
|
||||
{{
|
||||
users.find(
|
||||
(user) =>
|
||||
user.id ===
|
||||
Number(
|
||||
form.field_values[index]
|
||||
.value_user_id,
|
||||
),
|
||||
)?.name ?? 'Unassigned'
|
||||
}}
|
||||
</button>
|
||||
<p
|
||||
v-else
|
||||
class="min-h-7 truncate text-sm font-medium"
|
||||
>
|
||||
{{
|
||||
users.find(
|
||||
(user) =>
|
||||
user.id ===
|
||||
Number(
|
||||
form.field_values[index]
|
||||
.value_user_id,
|
||||
),
|
||||
)?.name ?? 'Unassigned'
|
||||
}}
|
||||
</p>
|
||||
/>
|
||||
<InlineSaveStatus
|
||||
:state="
|
||||
saveStateFor(
|
||||
|
||||
Reference in New Issue
Block a user