adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 12:42:15 +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(() => { const billableOptionInfoText = computed(() => {
return billableOptionInfoTexts[billableRateSelect.value]; return billableOptionInfoTexts[billableRateSelect.value];
}); });
const emit = defineEmits(['submit']);
</script> </script>
<template> <template>
@@ -60,7 +61,10 @@ const billableOptionInfoText = computed(() => {
class="sm:max-w-[120px]" class="sm:max-w-[120px]"
v-if="billableRateSelect === 'custom-rate'"> v-if="billableRateSelect === 'custom-rate'">
<InputLabel for="billableRate" value="Billable 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> </div>
<div class="flex items-center text-muted pt-2 pl-1"> <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 { useProjectsStore } from '@/utils/useProjects';
import { useFocus } from '@vueuse/core'; import { useFocus } from '@vueuse/core';
import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue'; import ClientDropdown from '@/Components/Common/Client/ClientDropdown.vue';
import { twMerge } from 'tailwind-merge';
import Badge from '@/Components/Common/Badge.vue'; import Badge from '@/Components/Common/Badge.vue';
import { useClientsStore } from '@/utils/useClients'; import { useClientsStore } from '@/utils/useClients';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue'; import ProjectColorSelector from '@/Components/Common/Project/ProjectColorSelector.vue';
import ProjectEditBillableSection from '@/Components/Common/Project/ProjectEditBillableSection.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 { updateProject } = useProjectsStore();
const { clients } = storeToRefs(useClientsStore()); const { clients } = storeToRefs(useClientsStore());
@@ -63,10 +64,14 @@ const currentClientName = computed(() => {
<div <div
class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4"> 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="flex-1 flex items-center">
<div class="px-3"> <div class="text-center pr-5">
<InputLabel for="color" value="Color" />
<ProjectColorSelector <ProjectColorSelector
v-model="project.color"></ProjectColorSelector> v-model="project.color"></ProjectColorSelector>
</div> </div>
</div>
<div class="w-full">
<InputLabel for="projectName" value="Project name" />
<TextInput <TextInput
id="projectName" id="projectName"
ref="projectNameInput" ref="projectNameInput"
@@ -79,22 +84,26 @@ const currentClientName = computed(() => {
autocomplete="projectName" /> autocomplete="projectName" />
</div> </div>
<div class=""> <div class="">
<ClientDropdown v-model="project.client_id"> <InputLabel for="client" value="Client" />
<ClientDropdown class="mt-2" v-model="project.client_id">
<template #trigger> <template #trigger>
<Badge size="large"> <Badge
<div class="bg-input-background cursor-pointer hover:bg-tertiary"
:class=" size="xlarge">
twMerge('inline-block rounded-full') <div class="flex items-center space-x-2">
"></div> <UserCircleIcon
<span> class="w-5 text-icon-default"></UserCircleIcon>
{{ currentClientName }} <span>
</span> {{ currentClientName }}
</span>
</div>
</Badge> </Badge>
</template> </template>
</ClientDropdown> </ClientDropdown>
</div> </div>
</div> </div>
<ProjectEditBillableSection <ProjectEditBillableSection
@submit="submit"
v-model:isBillable="project.is_billable" v-model:isBillable="project.is_billable"
v-model:billableRate=" v-model:billableRate="
project.billable_rate project.billable_rate