Conditionally show cost column in report tables; Task/Project Modal

Field cleanup; improve estimated time UX
This commit is contained in:
Gregor Vostrak
2026-02-11 17:09:32 +01:00
parent 2d9f33387e
commit c78c681ec4
18 changed files with 664 additions and 266 deletions

View File

@@ -9,12 +9,13 @@ import { useProjectsStore } from '@/utils/useProjects';
import { useClientsStore } from '@/utils/useClients';
import { useFocus } from '@vueuse/core';
import ClientDropdown from '@/packages/ui/src/Client/ClientDropdown.vue';
import Badge from '@/packages/ui/src/Badge.vue';
import { useClientsQuery } from '@/utils/useClientsQuery';
import ProjectColorSelector from '@/packages/ui/src/Project/ProjectColorSelector.vue';
import { Button } from '@/packages/ui/src/Buttons';
import { ChevronDown } from 'lucide-vue-next';
import { UserCircleIcon } from '@heroicons/vue/20/solid';
import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
import { Field, FieldLabel } from '@/packages/ui/src/field';
import { Field, FieldGroup, FieldLabel } from '@/packages/ui/src/field';
import ProjectBillableRateModal from '@/packages/ui/src/Project/ProjectBillableRateModal.vue';
import { getOrganizationCurrencyString } from '@/utils/money';
import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
@@ -81,59 +82,47 @@ async function submitBillableRate() {
</template>
<template #content>
<div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-5">
<Field class="flex-1 flex items-center">
<div class="text-center">
<FieldGroup>
<FieldGroup class="flex-row items-end">
<Field class="w-auto text-center">
<FieldLabel for="color">Color</FieldLabel>
<ProjectColorSelector v-model="project.color"></ProjectColorSelector>
</div>
</Field>
<Field class="w-full">
<FieldLabel for="projectName">Project name</FieldLabel>
<TextInput
id="projectName"
ref="projectNameInput"
v-model="project.name"
type="text"
placeholder="Project Name"
class="block w-full"
required
autocomplete="projectName"
@keydown.enter="submit()" />
</Field>
</Field>
<Field class="w-full">
<FieldLabel for="projectName">Project name</FieldLabel>
<TextInput
id="projectName"
ref="projectNameInput"
v-model="project.name"
type="text"
placeholder="Project Name"
class="block w-full"
required
autocomplete="projectName"
@keydown.enter="submit()" />
</Field>
</FieldGroup>
<Field>
<FieldLabel for="client">Client</FieldLabel>
<FieldLabel for="client" :icon="UserCircleIcon">Client</FieldLabel>
<ClientDropdown v-model="project.client_id" :create-client :clients="clients">
<template #trigger>
<Badge
class="bg-input-background cursor-pointer hover:bg-tertiary"
size="xlarge">
<div class="flex items-center space-x-2">
<UserCircleIcon class="w-5 text-icon-default"></UserCircleIcon>
<span class="whitespace-nowrap">
{{ currentClientName }}
</span>
</div>
</Badge>
<Button variant="input" class="w-full justify-between">
<span class="truncate">{{ currentClientName }}</span>
<ChevronDown class="w-4 h-4 text-icon-default" />
</Button>
</template>
</ClientDropdown>
</Field>
</div>
<div>
<div>
<ProjectEditBillableSection
v-model:is-billable="project.is_billable"
v-model:billable-rate="project.billable_rate"
:currency="getOrganizationCurrencyString()"
@submit="submit"></ProjectEditBillableSection>
</div>
<div>
<EstimatedTimeSection
v-if="isAllowedToPerformPremiumAction()"
v-model="project.estimated_time"
@submit="submit()"></EstimatedTimeSection>
</div>
</div>
<ProjectEditBillableSection
v-model:is-billable="project.is_billable"
v-model:billable-rate="project.billable_rate"
:currency="getOrganizationCurrencyString()"
@submit="submit"></ProjectEditBillableSection>
<EstimatedTimeSection
v-if="isAllowedToPerformPremiumAction()"
v-model="project.estimated_time"
@submit="submit()"></EstimatedTimeSection>
</FieldGroup>
</template>
<template #footer>
<SecondaryButton @click="show = false"> Cancel</SecondaryButton>