adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-14 19:22:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

add edit modal for tasks and clients, fixes ST-233

Browse Source
This commit is contained in:
Gregor Vostrak
2024-06-04 19:27:29 +02:00
parent 81e3ffd921
commit ded58f8bd6
14 changed files with 270 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
resources/js/Components/Common/Client/ClientEditModal.vue Normal file
View File

@@ -0,0 +1,70 @@
<script setup lang="ts">
import TextInput from '@/Components/TextInput.vue';
import SecondaryButton from '@/Components/SecondaryButton.vue';
import DialogModal from '@/Components/DialogModal.vue';
import { ref } from 'vue';
import type { Client, UpdateClientBody } from '@/utils/api';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { useFocus } from '@vueuse/core';
import { useClientsStore } from '@/utils/useClients';
const { updateClient } = useClientsStore();
const show = defineModel('show', { default: false });
const saving = ref(false);
const props = defineProps<{
client: Client;
}>();
const clientBody = ref<UpdateClientBody>({
name: props.client.name,
});
async function submit() {
await updateClient(props.client.id, clientBody.value);
show.value = false;
}
const clientNameInput = ref<HTMLInputElement | null>(null);
useFocus(clientNameInput, { initialValue: true });
</script>
<template>
<DialogModal closeable :show="show" @close="show = false">
<template #title>
<div class="flex space-x-2">
<span> Update Client </span>
</div>
</template>
<template #content>
<div class="flex items-center space-x-4">
<div class="col-span-6 sm:col-span-4 flex-1">
<TextInput
id="clientName"
ref="clientNameInput"
v-model="clientBody.name"
type="text"
placeholder="Client Name"
@keydown.enter="submit"
class="mt-1 block w-full"
required
autocomplete="clientName" />
</div>
</div>
</template>
<template #footer>
<SecondaryButton @click="show = false"> Cancel </SecondaryButton>
<PrimaryButton
class="ms-3"
:class="{ 'opacity-25': saving }"
:disabled="saving"
@click="submit">
Update Client
</PrimaryButton>
</template>
</DialogModal>
</template>
<style scoped></style>

35
resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import Dropdown from '@/Components/Dropdown.vue';
import { TrashIcon } from '@heroicons/vue/20/solid';
import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
import type { Client } from '@/utils/api';
import { canDeleteClients } from '@/utils/permissions';
import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
const emit = defineEmits<{
delete: [];
edit: [];
}>();
const props = defineProps<{
client: Client;
@@ -31,15 +32,27 @@ const props = defineProps<{
</svg>
</template>
<template #content>
<button
v-if="canDeleteClients()"
@click="emit('delete')"
:aria-label="'Delete Client ' + props.client.name"
data-testid="client_delete"
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<TrashIcon class="w-5 text-icon-active"></TrashIcon>
<span>Delete</span>
</button>
<div class="min-w-[150px]">
<button
v-if="canUpdateClients()"
@click="emit('edit')"
:aria-label="'Edit Client ' + props.client.name"
data-testid="client_edit"
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<PencilSquareIcon
class="w-5 text-icon-active"></PencilSquareIcon>
<span>Edit</span>
</button>
<button
v-if="canDeleteClients()"
@click="emit('delete')"
:aria-label="'Delete Client ' + props.client.name"
data-testid="client_delete"
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<TrashIcon class="w-5 text-icon-active"></TrashIcon>
<span>Delete</span>
</button>
</div>
</template>
</Dropdown>
</template>

9
resources/js/Components/Common/Client/ClientTableRow.vue
View File

@@ -1,12 +1,13 @@
<script setup lang="ts">
import type { Client } from '@/utils/api';
import { computed } from 'vue';
import { computed, ref } from 'vue';
import { CheckCircleIcon } from '@heroicons/vue/20/solid';
import { useClientsStore } from '@/utils/useClients';
import { storeToRefs } from 'pinia';
import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
import { useProjectsStore } from '@/utils/useProjects';
import TableRow from '@/Components/TableRow.vue';
import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
const { projects } = storeToRefs(useProjectsStore());
@@ -23,10 +24,15 @@ const projectCount = computed(() => {
(projects) => projects.client_id === props.client.id
).length;
});
const showEditModal = ref(false);
</script>
<template>
<TableRow>
<ClientEditModal
:client="client"
v-model:show="showEditModal"></ClientEditModal>
<div
class="whitespace-nowrap flex items-center space-x-5 3xl:pl-12 py-4 pr-3 text-sm font-medium text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
<span>
@@ -43,6 +49,7 @@ const projectCount = computed(() => {
class="relative whitespace-nowrap flex items-center pl-3 text-right text-sm font-medium sm:pr-0 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
<ClientMoreOptionsDropdown
:client="client"
@edit="showEditModal = true"
@delete="deleteClient"></ClientMoreOptionsDropdown>
</div>
</TableRow>