Skip to content

Commit

Permalink
make project and tags in mass updates resettable
Browse files Browse the repository at this point in the history
  • Loading branch information
@Onatcer
Onatcer committed Oct 9, 2024
1 parent 26637e6 commit 129c132
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 52 deletions.
130 changes: 82 additions & 48 deletions resources/js/Components/Common/TimeEntry/TimeEntryMassUpdateModal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
} from '@/packages/api/src';
import { useClientsStore } from '@/utils/useClients';
import { getOrganizationCurrencyString } from '@/utils/money';
import { Badge } from '@/packages/ui/src';
import { Badge, Checkbox } from '@/packages/ui/src';
import SelectDropdown from '../../../packages/ui/src/Input/SelectDropdown.vue';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
Expand Down Expand Up @@ -71,7 +71,7 @@ watch(show, (value) => {
const description = ref<string>('');
const taskId = ref<string | null | undefined>(undefined);
const projectId = ref<string | null | undefined>(undefined);
const projectId = ref<string | null>(null);
const billable = ref<boolean | undefined>(undefined);
const selectedTags = ref<string[]>([]);
Expand Down Expand Up @@ -106,19 +106,28 @@ async function submit() {
if (description.value && description.value !== '') {
timeEntryUpdatesBody.description = description.value;
}
if (projectId.value !== undefined) {
timeEntryUpdatesBody.project_id = projectId.value;
if (projectId.value !== null) {
if (projectId.value === '') {
// "No Project" is selected
timeEntryUpdatesBody.project_id = null;
} else {
timeEntryUpdatesBody.project_id = projectId.value;
}
timeEntryUpdatesBody.task_id = null;
if (taskId.value !== undefined) {
timeEntryUpdatesBody.task_id = taskId.value;
}
}
if (taskId.value !== undefined) {
timeEntryUpdatesBody.task_id = taskId.value;
}
if (billable.value !== undefined) {
timeEntryUpdatesBody.billable = billable.value;
}
if (selectedTags.value.length > 0) {
timeEntryUpdatesBody.tags = selectedTags.value;
}
if (removeAllTags.value) {
timeEntryUpdatesBody.tags = [];
}
try {
await handleApiRequestNotifications(
Expand All @@ -144,18 +153,25 @@ async function submit() {
show.value = false;
emit('submit');
description.value = '';
projectId.value = undefined;
projectId.value = null;
taskId.value = undefined;
selectedTags.value = [];
billable.value = undefined;
saving.value = false;
removeAllTags.value = false;
}
);
} catch (e) {
saving.value = false;
}
}
}
const removeAllTags = ref(false);
watch(removeAllTags, () => {
if (removeAllTags.value) {
selectedTags.value = [];
}
});
</script>

<template>
Expand Down Expand Up @@ -186,6 +202,8 @@ async function submit() {
:createClient
:currency="getOrganizationCurrencyString()"
class="mt-1"
empty-placeholder="Select project..."
allow-reset
size="xlarge"
:projects="projects"
:tasks="tasks"
Expand All @@ -194,49 +212,65 @@ async function submit() {
</div>
<div class="space-y-2">
<InputLabel for="project" value="Tag" />
<TagDropdown :createTag v-model="selectedTags" :tags="tags">
<template #trigger>
<Badge size="xlarge">
<span v-if="selectedTags.length > 0">
Set {{ selectedTags.length }} tags
</span>
<span v-else> Select Tags... </span>
</Badge>
</template>
</TagDropdown>
<div class="flex space-x-5">
<TagDropdown
:createTag
v-model="selectedTags"
:tags="tags">
<template #trigger>
<Badge
:disabled="removeAllTags"
tag="button"
size="xlarge">
<span v-if="selectedTags.length > 0">
Set {{ selectedTags.length }} tags
</span>
<span v-else> Select Tags... </span>
</Badge>
</template>
</TagDropdown>
<div class="flex items-center space-x-2">
<Checkbox
v-model:checked="removeAllTags"
id="no_tags"></Checkbox>
<InputLabel for="no_tags" value="Remove all tags" />
</div>
</div>
</div>
<div class="space-y-2">
<InputLabel for="project" value="Billable" />
<SelectDropdown
v-model="timeEntryBillable"
:get-key-from-item="(item) => item.value"
:get-name-for-item="(item) => item.label"
:items="[
{
label: 'Keep current billable status',
value: 'do-not-update',
},
{
label: 'Billable',
value: 'billable',
},
{
label: 'Non Billable',
value: 'non-billable',
},
]">
<template v-slot:trigger>
<Badge tag="button" size="xlarge">
<span v-if="billable === undefined">
Set billable status
</span>
<span v-else-if="billable === true">
Billable
</span>
<span v-else> Non Billable </span></Badge
>
</template>
</SelectDropdown>
<div class="flex">
<SelectDropdown
v-model="timeEntryBillable"
:get-key-from-item="(item) => item.value"
:get-name-for-item="(item) => item.label"
:items="[
{
label: 'Keep current billable status',
value: 'do-not-update',
},
{
label: 'Billable',
value: 'billable',
},
{
label: 'Non Billable',
value: 'non-billable',
},
]">
<template v-slot:trigger>
<Badge tag="button" size="xlarge">
<span v-if="billable === undefined">
Set billable status
</span>
<span v-else-if="billable === true">
Billable
</span>
<span v-else> Non Billable </span></Badge
>
</template>
</SelectDropdown>
</div>
</div>
</div>
</template>
Expand Down
2 changes: 1 addition & 1 deletion resources/js/packages/ui/src/Badge.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const borderClasses = computed(() => {
twMerge(
badgeClasses[size],
borderClasses,
'rounded inline-flex items-center font-semibold text-white outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
'rounded inline-flex items-center font-semibold text-white disabled:text-text-quaternary outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80',
props.class
)
">
Expand Down
30 changes: 27 additions & 3 deletions resources/js/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@ import type {
} from '@/packages/api/src';
import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
import Badge from '@/packages/ui/src/Badge.vue';
import { PlusIcon, PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
import {
PlusIcon,
PlusCircleIcon,
MinusIcon,
XMarkIcon,
} from '@heroicons/vue/16/solid';
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
const task = defineModel<string | null>('task', {
Expand Down Expand Up @@ -56,10 +61,14 @@ const props = withDefaults(
) => Promise<Project | undefined>;
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
currency: string;
emptyPlaceholder: string;
allowReset: boolean;
}>(),
{
showBadgeBorder: true,
size: 'large',
emptyPlaceholder: 'No Project',
allowReset: false,
}
);
Expand Down Expand Up @@ -478,7 +487,13 @@ const currentTask = computed(() => {
});
const selectedProjectName = computed(() => {
return currentProject.value?.name || 'No Project';
if (project.value === null) {
return props.emptyPlaceholder;
}
if (project.value === '') {
return 'No Project';
}
return currentProject.value?.name;
});
const selectedProjectColor = computed(() => {
Expand Down Expand Up @@ -535,7 +550,7 @@ const showCreateProject = ref(false);
:border="showBadgeBorder"
tag="button"
:name="selectedProjectName"
class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0">
class="focus:border-border-tertiary w-full focus:outline-0 focus:bg-card-background-separator min-w-0 relative">
<div class="flex items-center lg:space-x-1 min-w-0">
<span class="whitespace-nowrap text-xs lg:text-sm">
{{ selectedProjectName }}
Expand All @@ -549,6 +564,15 @@ const showCreateProject = ref(false);
{{ currentTask.name }}
</div>
</div>
<button
v-if="project !== null && allowReset"
@click.stop="
project = null;
task = null;
"
class="absolute right-0 top-0 h-full flex items-center pr-3 text-text-quaternary hover:text-text-secondary">
<XMarkIcon class="w-5"></XMarkIcon>
</button>
</ProjectBadge>
</template>
<template #content>
Expand Down

0 comments on commit 129c132

Please sign in to comment.