adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-06-15 13:32:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve project edit modal: fix enter submit on billable input and add labels

Browse Source
This commit is contained in:
Gregor Vostrak
2024-06-24 18:32:43 +02:00
parent e69a419551
commit 2e8b088c59
2 changed files with 25 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/Components/Common/Project/ProjectEditBillableSection.vue
View File

@@ -46,6 +46,7 @@ const billableOptionInfoTexts: { [key in BillableKey]: string } = {
const billableOptionInfoText = computed(() => {
return billableOptionInfoTexts[billableRateSelect.value];
});
const emit = defineEmits(['submit']);
</script>
<template>
@@ -60,7 +61,10 @@ const billableOptionInfoText = computed(() => {
class="sm:max-w-[120px]"
v-if="billableRateSelect === 'custom-rate'">
<InputLabel for="billableRate" value="Billable Rate" />
<BillableRateInput v-model="billableRate" name="billableRate" />
<BillableRateInput
@keydown.enter="emit('submit')"
v-model="billableRate"
name="billableRate" />
</div>
</div>
<div class="flex items-center text-muted pt-2 pl-1">

31
resources/js/Components/Common/Project/ProjectEditModal.vue
View File

@@ -8,12 +8,13 @@ import PrimaryButton from '@/Components/PrimaryButton.vue';
import { useProjectsStore } from '@/utils/useProjects';
import { useFocus } from '@vueuse/core';
import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
import { twMerge } from 'tailwind-merge';
import Badge from '@/Components/Common/Badge.vue';
import { useClientsStore } from '@/utils/useClients';
import { storeToRefs } from 'pinia';
import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
import ProjectEditBillableSection from '@/Components/Common/Project/ProjectEditBillableSection.vue';
import { UserCircleIcon } from '@heroicons/vue/20/solid';
import InputLabel from '@/Components/InputLabel.vue';
const { updateProject } = useProjectsStore();
const { clients } = storeToRefs(useClientsStore());
@@ -63,10 +64,14 @@ const currentClientName = computed(() => {
<div
class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
<div class="flex-1 flex items-center">
<div class="px-3">
<div class="text-center pr-5">
<InputLabel for="color" value="Color" />
<ProjectColorSelector
v-model="project.color"></ProjectColorSelector>
</div>
</div>
<div class="w-full">
<InputLabel for="projectName" value="Project name" />
<TextInput
id="projectName"
ref="projectNameInput"
@@ -79,22 +84,26 @@ const currentClientName = computed(() => {
autocomplete="projectName" />
</div>
<div class="">
<ClientDropdown v-model="project.client_id">
<InputLabel for="client" value="Client" />
<ClientDropdown class="mt-2" v-model="project.client_id">
<template #trigger>
<Badge size="large">
<div
:class="
twMerge('inline-block rounded-full')
"></div>
<span>
{{ currentClientName }}
</span>
<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>
{{ currentClientName }}
</span>
</div>
</Badge>
</template>
</ClientDropdown>
</div>
</div>
<ProjectEditBillableSection
@submit="submit"
v-model:isBillable="project.is_billable"
v-model:billableRate="
project.billable_rate