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

added success and error notifications

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-12 03:19:58 +02:00
parent 0e96ad992f
commit 64023f3930
14 changed files with 508 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
resources/js/utils/notification.ts Normal file
View File

@@ -0,0 +1,83 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import axios from 'axios';
export type NotificationType = 'success' | 'error';
export const useNotificationsStore = defineStore('notifications', () => {
const notifications = ref<
{
title: string;
message?: string;
uuid: string;
type: NotificationType;
}[]
>([]);
function addNotification(
type: NotificationType,
title: string,
message?: string
) {
const uuid = Math.random().toString(36).substring(7);
notifications.value.push({ title, message, type, uuid });
setTimeout(() => {
removeNotification(uuid);
}, 5000);
}
function removeNotification(uuid: string) {
const index = notifications.value.findIndex(
(notification) => notification.uuid === uuid
);
if (index !== -1) {
notifications.value.splice(index, 1);
}
}
async function handleApiRequestNotifications<T>(
apiRequest: Promise<T>,
successMessage?: string,
errorMessage?: string
) {
try {
const response = await apiRequest;
if (successMessage) {
addNotification('success', successMessage);
}
return response;
} catch (error) {
if (axios.isAxiosError(error)) {
if (
error?.response?.status === 403 ||
(error?.response?.status === 400 &&
error?.response?.data?.error === true &&
error?.response?.data?.errorMessage !== undefined)
) {
addNotification(
'error',
errorMessage ?? 'Request Error',
error.response?.data?.errorMessage ??
error?.response?.data?.message ??
'An request error occurred. Please try again later.'
);
} else if (error?.response?.status === 422) {
const message = error.response.data.errors
.map((error: { message: string }) => {
return error.message;
})
.join('\n');
addNotification('error', message);
} else {
addNotification(
'error',
'The action failed. Please try again later.'
);
}
}
}
return null;
}
return { addNotification, notifications, handleApiRequestNotifications };
});

52
resources/js/utils/useClients.ts
View File

@@ -7,18 +7,24 @@ import type {
Client,
} from '@/utils/api';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
export const useClientsStore = defineStore('clients', () => {
const clientResponse = ref<ClientIndexResponse | null>(null);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchClients() {
const organization = getCurrentOrganizationId();
if (organization) {
clientResponse.value = await api.getClients({
params: {
organization: organization,
},
});
clientResponse.value = await handleApiRequestNotifications(
api.getClients({
params: {
organization: organization,
},
}),
undefined,
'Failed to fetch clients'
);
}
}
@@ -27,27 +33,35 @@ export const useClientsStore = defineStore('clients', () => {
): Promise<Client | undefined> {
const organization = getCurrentOrganizationId();
if (organization) {
const response = await api.createClient(clientBody, {
params: {
organization: organization,
},
});
const response = await handleApiRequestNotifications(
api.createClient(clientBody, {
params: {
organization: organization,
},
}),
'Client created successfully',
'Failed to create client'
);
await fetchClients();
return response.data;
return response?.data;
}
}
async function deleteClient(clientId: string) {
const organization = getCurrentOrganizationId();
if (organization) {
await api.deleteClient(
{},
{
params: {
organization: organization,
client: clientId,
},
}
await handleApiRequestNotifications(
api.deleteClient(
{},
{
params: {
organization: organization,
client: clientId,
},
}
),
'Client deleted successfully',
'Failed to delete client'
);
await fetchClients();
}

124
resources/js/utils/useCurrentTimeEntry.ts
View File

@@ -7,6 +7,7 @@ import utc from 'dayjs/plugin/utc';
import { getCurrentOrganizationId, getCurrentUserId } from '@/utils/useUser';
import { useLocalStorage } from '@vueuse/core';
import { useTimeEntriesStore } from '@/utils/useTimeEntries';
import { useNotificationsStore } from '@/utils/notification';
dayjs.extend(utc);
@@ -25,6 +26,7 @@ const emptyTimeEntry = {
export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
const currentTimeEntry = ref<TimeEntry>(reactive(emptyTimeEntry));
const { handleApiRequestNotifications } = useNotificationsStore();
useLocalStorage('solidtime/current-time-entry', currentTimeEntry, {
deep: true,
@@ -54,19 +56,22 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
async function fetchCurrentTimeEntry() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const timeEntriesResponse = await api.getTimeEntries({
queries: {
active: 'true',
},
params: {
organization: organizationId,
},
});
if (timeEntriesResponse.data.length === 1) {
currentTimeEntry.value = timeEntriesResponse.data[0];
} else {
currentTimeEntry.value = { ...emptyTimeEntry };
const timeEntriesResponse = await handleApiRequestNotifications(
api.getTimeEntries({
queries: {
active: 'true',
},
params: {
organization: organizationId,
},
})
);
if (timeEntriesResponse?.data) {
if (timeEntriesResponse.data.length === 1) {
currentTimeEntry.value = timeEntriesResponse.data[0];
} else {
currentTimeEntry.value = { ...emptyTimeEntry };
}
}
} else {
throw new Error(
@@ -83,19 +88,24 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
currentTimeEntry.value.start !== ''
? currentTimeEntry.value.start
: dayjs().utc().format();
const response = await api.createTimeEntry(
{
user_id: user,
start: startTime,
description: currentTimeEntry.value?.description,
project_id: currentTimeEntry.value?.project_id,
task_id: currentTimeEntry.value?.task_id,
billable: currentTimeEntry.value.billable,
tags: currentTimeEntry.value?.tags,
},
{ params: { organization: organization } }
const response = await handleApiRequestNotifications(
api.createTimeEntry(
{
user_id: user,
start: startTime,
description: currentTimeEntry.value?.description,
project_id: currentTimeEntry.value?.project_id,
task_id: currentTimeEntry.value?.task_id,
billable: currentTimeEntry.value.billable,
tags: currentTimeEntry.value?.tags,
},
{ params: { organization: organization } }
),
'Timer started!'
);
currentTimeEntry.value = response.data;
if (response?.data) {
currentTimeEntry.value = response.data;
}
} else {
throw new Error(
'Failed to fetch current time entry because organization ID is missing.'
@@ -108,18 +118,21 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
const organization = getCurrentOrganizationId();
if (organization) {
const currentDateTime = dayjs().utc().format();
await api.updateTimeEntry(
{
user_id: user,
start: currentTimeEntry.value.start,
end: currentDateTime,
},
{
params: {
organization: organization,
timeEntry: currentTimeEntry.value.id,
await handleApiRequestNotifications(
api.updateTimeEntry(
{
user_id: user,
start: currentTimeEntry.value.start,
end: currentDateTime,
},
}
{
params: {
organization: organization,
timeEntry: currentTimeEntry.value.id,
},
}
),
'Timer stopped!'
);
$reset();
} else {
@@ -133,25 +146,30 @@ export const useCurrentTimeEntryStore = defineStore('currentTimeEntry', () => {
const user = getCurrentUserId();
const organization = getCurrentOrganizationId();
if (organization) {
await api.updateTimeEntry(
{
description: currentTimeEntry.value.description,
user_id: user,
project_id: currentTimeEntry.value.project_id,
task_id: currentTimeEntry.value.task_id,
start: currentTimeEntry.value.start,
billable: currentTimeEntry.value.billable,
end: null,
tags: currentTimeEntry.value.tags,
},
{
params: {
organization: organization,
timeEntry: currentTimeEntry.value.id,
const response = await handleApiRequestNotifications(
api.updateTimeEntry(
{
description: currentTimeEntry.value.description,
user_id: user,
project_id: currentTimeEntry.value.project_id,
task_id: currentTimeEntry.value.task_id,
start: currentTimeEntry.value.start,
billable: currentTimeEntry.value.billable,
end: null,
tags: currentTimeEntry.value.tags,
},
}
{
params: {
organization: organization,
timeEntry: currentTimeEntry.value.id,
},
}
),
'Time entry updated!'
);
// currentTimeEntry.value = response.data;
if (response?.data) {
currentTimeEntry.value = response.data;
}
} else {
throw new Error(
'Failed to fetch current time entry because organization ID is missing.'

16
resources/js/utils/useMembers.ts
View File

@@ -3,18 +3,24 @@ import { api } from '../../../openapi.json.client';
import { computed, ref } from 'vue';
import type { Member, MemberIndexResponse } from '@/utils/api';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
export const useMembersStore = defineStore('members', () => {
const membersResponse = ref<MemberIndexResponse | null>(null);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchMembers() {
const organization = getCurrentOrganizationId();
if (organization) {
membersResponse.value = await api.getMembers({
params: {
organization: organization,
},
});
membersResponse.value = await handleApiRequestNotifications(
api.getMembers({
params: {
organization: organization,
},
}),
undefined,
'Failed to fetch members'
);
}
}

54
resources/js/utils/useProjectMembers.ts
View File

@@ -7,19 +7,25 @@ import type {
ProjectMemberResponse,
} from '@/utils/api';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
export const useProjectMembersStore = defineStore('project-members', () => {
const projectMemberResponse = ref<ProjectMemberResponse | null>(null);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchProjectMembers(projectId: string) {
const organization = getCurrentOrganizationId();
if (organization) {
projectMemberResponse.value = await api.getProjectMembers({
params: {
organization: organization,
project: projectId,
},
});
projectMemberResponse.value = await handleApiRequestNotifications(
api.getProjectMembers({
params: {
organization: organization,
project: projectId,
},
}),
undefined,
'Failed to fetch project members'
);
}
}
@@ -29,12 +35,16 @@ export const useProjectMembersStore = defineStore('project-members', () => {
) {
const organization = getCurrentOrganizationId();
if (organization) {
await api.createProjectMember(projectMemberBody, {
params: {
organization: organization,
project: projectId,
},
});
await handleApiRequestNotifications(
api.createProjectMember(projectMemberBody, {
params: {
organization: organization,
project: projectId,
},
}),
'Project member added successfully',
'Failed to add project member'
);
await fetchProjectMembers(projectId);
}
}
@@ -45,14 +55,18 @@ export const useProjectMembersStore = defineStore('project-members', () => {
) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.deleteProjectMember(
{},
{
params: {
organization: organizationId,
projectMember: projectMemberId,
},
}
await handleApiRequestNotifications(
api.deleteProjectMember(
{},
{
params: {
organization: organizationId,
projectMember: projectMemberId,
},
}
),
'Project member removed successfully',
'Failed to remove project member'
);
await fetchProjectMembers(projectId);
}

52
resources/js/utils/useProjects.ts
View File

@@ -3,29 +3,39 @@ import { api } from '../../../openapi.json.client';
import { computed, ref } from 'vue';
import type { CreateProjectBody, Project, ProjectResponse } from '@/utils/api';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { useNotificationsStore } from '@/utils/notification';
export const useProjectsStore = defineStore('projects', () => {
const projectResponse = ref<ProjectResponse | null>(null);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchProjects() {
const organization = getCurrentOrganizationId();
if (organization) {
projectResponse.value = await api.getProjects({
params: {
organization: organization,
},
});
projectResponse.value = await handleApiRequestNotifications(
api.getProjects({
params: {
organization: organization,
},
}),
undefined,
'Failed to fetch projects'
);
}
}
async function createProject(projectBody: CreateProjectBody) {
const organization = getCurrentOrganizationId();
if (organization) {
await api.createProject(projectBody, {
params: {
organization: organization,
},
});
await handleApiRequestNotifications(
api.createProject(projectBody, {
params: {
organization: organization,
},
}),
'Project created successfully',
'Failed to create project'
);
await fetchProjects();
}
}
@@ -33,14 +43,18 @@ export const useProjectsStore = defineStore('projects', () => {
async function deleteProject(projectId: string) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.deleteProject(
{},
{
params: {
organization: organizationId,
project: projectId,
},
}
await handleApiRequestNotifications(
api.deleteProject(
{},
{
params: {
organization: organizationId,
project: projectId,
},
}
),
'Project deleted successfully',
'Failed to delete project'
);
await fetchProjects();
}

67
resources/js/utils/useTags.ts
View File

@@ -3,19 +3,26 @@ import { ref } from 'vue';
import type { Tag } from '@/utils/api';
import { getCurrentOrganizationId } from '@/utils/useUser';
import { api } from '../../../openapi.json.client';
import { useNotificationsStore } from '@/utils/notification';
export const useTagsStore = defineStore('tags', () => {
const tags = ref<Tag[]>([]);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchTags() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const response = await api.getTags({
params: {
organization: organizationId,
},
});
tags.value = response.data;
const response = await handleApiRequestNotifications(
api.getTags({
params: {
organization: organizationId,
},
}),
undefined,
'Failed to fetch tags'
);
if (response?.data) {
tags.value = response.data;
}
} else {
throw new Error(
'Failed to fetch current tags because organization ID is missing.'
@@ -26,14 +33,18 @@ export const useTagsStore = defineStore('tags', () => {
async function deleteTag(tagId: string) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.deleteTag(
{},
{
params: {
organization: organizationId,
tag: tagId,
},
}
await handleApiRequestNotifications(
api.deleteTag(
{},
{
params: {
organization: organizationId,
tag: tagId,
},
}
),
'Tag deleted successfully',
'Failed to delete tag'
);
await fetchTags();
}
@@ -42,18 +53,24 @@ export const useTagsStore = defineStore('tags', () => {
async function createTag(name: string) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const response = await api.createTag(
{
name: name,
},
{
params: {
organization: organizationId,
const response = await handleApiRequestNotifications(
api.createTag(
{
name: name,
},
}
{
params: {
organization: organizationId,
},
}
),
'Tag created successfully',
'Failed to create tag'
);
tags.value.unshift(response.data);
return response.data;
if (response?.data) {
tags.value.unshift(response.data);
return response.data;
}
} else {
throw new Error(
'Failed to create tag because organization ID is missing.'

68
resources/js/utils/useTasks.ts
View File

@@ -3,42 +3,56 @@ import { getCurrentOrganizationId } from '@/utils/useUser';
import { api } from '../../../openapi.json.client';
import { reactive, ref } from 'vue';
import type { CreateTaskBody, Task } from '@/utils/api';
import { useNotificationsStore } from '@/utils/notification';
export const useTasksStore = defineStore('tasks', () => {
const tasks = ref<Task[]>(reactive([]));
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchTasks() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const tasksResponse = await api.getTasks({
params: {
organization: organizationId,
},
});
tasks.value = tasksResponse.data;
const tasksResponse = await handleApiRequestNotifications(
api.getTasks({
params: {
organization: organizationId,
},
})
);
if (tasksResponse?.data) {
tasks.value = tasksResponse.data;
}
}
}
async function updateTask(task: Task) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.updateTask(task, {
params: {
organization: organizationId,
task: task.id,
},
});
await handleApiRequestNotifications(
api.updateTask(task, {
params: {
organization: organizationId,
task: task.id,
},
}),
'Task updated successfully',
'Failed to update task'
);
}
}
async function createTask(task: CreateTaskBody) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.createTask(task, {
params: {
organization: organizationId,
},
});
await handleApiRequestNotifications(
api.createTask(task, {
params: {
organization: organizationId,
},
}),
'Task created successfully',
'Failed to create task'
);
await fetchTasks();
}
}
@@ -46,14 +60,18 @@ export const useTasksStore = defineStore('tasks', () => {
async function deleteTask(taskId: string) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.deleteTask(
{},
{
params: {
organization: organizationId,
task: taskId,
},
}
await handleApiRequestNotifications(
api.deleteTask(
{},
{
params: {
organization: organizationId,
task: taskId,
},
}
),
'Task deleted successfully',
'Failed to delete task'
);
await fetchTasks();
}

104
resources/js/utils/useTimeEntries.ts
View File

@@ -4,24 +4,31 @@ import { api } from '../../../openapi.json.client';
import { reactive, ref } from 'vue';
import type { TimeEntry } from '@/utils/api';
import dayjs from 'dayjs';
import { useNotificationsStore } from '@/utils/notification';
export const useTimeEntriesStore = defineStore('timeEntries', () => {
const timeEntries = ref<TimeEntry[]>(reactive([]));
const allTimeEntriesLoaded = ref(false);
const { handleApiRequestNotifications } = useNotificationsStore();
async function fetchTimeEntries() {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
const timeEntriesResponse = await api.getTimeEntries({
params: {
organization: organizationId,
},
queries: {
only_full_dates: 'true',
},
});
timeEntries.value = timeEntriesResponse.data;
const timeEntriesResponse = await handleApiRequestNotifications(
api.getTimeEntries({
params: {
organization: organizationId,
},
queries: {
only_full_dates: 'true',
},
}),
undefined,
'Failed to fetch time entries'
);
if (timeEntriesResponse?.data) {
timeEntries.value = timeEntriesResponse.data;
}
}
}
@@ -32,16 +39,23 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
timeEntries.value[timeEntries.value.length - 1];
dayjs(latestTimeEntry.start).utc().format('YYYY-MM-DD');
const timeEntriesResponse = await api.getTimeEntries({
params: {
organization: organizationId,
},
queries: {
only_full_dates: 'true',
before: dayjs(latestTimeEntry.start).utc().format(),
},
});
if (timeEntriesResponse.data.length > 0) {
const timeEntriesResponse = await handleApiRequestNotifications(
api.getTimeEntries({
params: {
organization: organizationId,
},
queries: {
only_full_dates: 'true',
before: dayjs(latestTimeEntry.start).utc().format(),
},
}),
undefined,
'Failed to fetch time entries'
);
if (
timeEntriesResponse?.data &&
timeEntriesResponse.data.length > 0
) {
timeEntries.value = timeEntries.value.concat(
timeEntriesResponse.data
);
@@ -54,23 +68,31 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
async function updateTimeEntry(timeEntry: TimeEntry) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.updateTimeEntry(timeEntry, {
params: {
organization: organizationId,
timeEntry: timeEntry.id,
},
});
await handleApiRequestNotifications(
api.updateTimeEntry(timeEntry, {
params: {
organization: organizationId,
timeEntry: timeEntry.id,
},
}),
'Time entry updated successfully',
'Failed to update time entry'
);
}
}
async function createTimeEntry(timeEntry: TimeEntry) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.createTimeEntry(timeEntry, {
params: {
organization: organizationId,
},
});
await handleApiRequestNotifications(
api.createTimeEntry(timeEntry, {
params: {
organization: organizationId,
},
}),
'Time entry created successfully',
'Failed to create time entry'
);
await fetchTimeEntries();
}
}
@@ -78,14 +100,18 @@ export const useTimeEntriesStore = defineStore('timeEntries', () => {
async function deleteTimeEntry(timeEntryId: string) {
const organizationId = getCurrentOrganizationId();
if (organizationId) {
await api.deleteTimeEntry(
{},
{
params: {
organization: organizationId,
timeEntry: timeEntryId,
},
}
await handleApiRequestNotifications(
api.deleteTimeEntry(
{},
{
params: {
organization: organizationId,
timeEntry: timeEntryId,
},
}
),
'Time entry deleted successfully',
'Failed to delete time entry'
);
await fetchTimeEntries();
}