From 9e150f50161ff6af2255403af1c73b34a4c7b3dd Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sun, 2 Feb 2025 00:40:26 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=EC=8A=B9=EC=9D=B8=20=EB=8C=80=EA=B8=B0=20?= =?UTF-8?q?=EC=A4=91=EC=9D=B8=20=EC=9A=94=EC=B2=AD=20=EB=AA=A9=EB=A1=9D=20?= =?UTF-8?q?=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/my-request/MyRequestList.vue | 4 +- .../requested/RequestedFilterBar.vue | 2 +- src/components/requested/RequestedList.vue | 41 ++++++++++++++++--- .../requested/RequestedListCard.vue | 3 +- src/types/manager.ts | 10 +++++ 5 files changed, 50 insertions(+), 10 deletions(-) diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index 459ced6d..c89e1a13 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -39,7 +39,7 @@ const onPageChange = (value: number) => { params.page = value } -const fetchRequestList = async () => { +const fetchMyRequestList = async () => { const { parseRequestParams } = useParseParams() const parsedParams = parseRequestParams(params) const response = await axiosInstance.get('/api/tasks/requests', { @@ -53,7 +53,7 @@ const fetchRequestList = async () => { const { data } = useQuery({ queryKey: ['myRequest', params], - queryFn: fetchRequestList + queryFn: fetchMyRequestList }) watch( diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue index cfecbcec..a2e7cfc1 100644 --- a/src/components/requested/RequestedFilterBar.vue +++ b/src/components/requested/RequestedFilterBar.vue @@ -16,7 +16,7 @@ :value="store.params.title" @update:value="onParamsChange.onTitleChange" /> + @@ -24,15 +25,43 @@ import ListPagination from '../lists/ListPagination.vue' import ListContainer from '../lists/ListContainer.vue' import RequestedListBar from './RequestedListBar.vue' -import { DUMMY_REQUESTED_LIST_DATA } from '@/datas/dummy' import RequestedListCard from './RequestedListCard.vue' import { useRequestParamsStore } from '@/stores/params' +import { useParseParams } from '../hooks/useParseParams' +import axiosInstance from '@/utils/axios' +import { useQuery } from '@tanstack/vue-query' +import { ref, watch } from 'vue' +import type { RequestedResponse } from '@/types/manager' +import NoContent from '../lists/NoContent.vue' const { params } = useRequestParamsStore() -const DUMMY_TOTAL_PAGE = 18 const onPageChange = (value: number) => { params.page = value } -// Data Handling +const fetchRequestedList = async () => { + const { parseRequestParams } = useParseParams() + const parsedParams = parseRequestParams(params) + const response = await axiosInstance.get('/api/tasks/requests/pending', { + headers: { + Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` + }, + params: parsedParams + }) + return response.data +} + +const { data } = useQuery({ + queryKey: ['requested', params], + queryFn: fetchRequestedList +}) + +watch( + data, + () => { + if (data.value?.totalPages) totalPage.value = data.value.totalPages + }, + { once: true } +) +const totalPage = ref(0) diff --git a/src/components/requested/RequestedListCard.vue b/src/components/requested/RequestedListCard.vue index 889e0a96..6782eb0e 100644 --- a/src/components/requested/RequestedListCard.vue +++ b/src/components/requested/RequestedListCard.vue @@ -24,10 +24,11 @@ import type { ListCardProps } from '@/types/common' import ListCardTab from '../lists/ListCardTab.vue' import type { RequestedListData } from '@/types/manager' import { useRouter } from 'vue-router' +import { formatDate } from '@/utils/date' const { info } = defineProps<{ info: RequestedListData }>() const requestedTabList: ListCardProps[] = [ - { content: info.requestedAt, width: 80 }, + { content: formatDate(info.requestedAt), width: 80 }, { content: info.mainCategoryName, width: 80 }, { content: info.categoryName, width: 80 }, { content: info.title }, diff --git a/src/types/manager.ts b/src/types/manager.ts index 0f398bd4..38b5daa2 100644 --- a/src/types/manager.ts +++ b/src/types/manager.ts @@ -120,3 +120,13 @@ export interface DraggableEvent { newIndex: number } } + +export interface RequestedResponse { + content: RequestedListData[] + totalElements: number + totalPages: number + pageNumber: number + pageSize: number + isFirst: boolean + isLast: boolean +} From c434c50a90648912afc7060723ef130b7104cb1b Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sun, 2 Feb 2025 00:56:14 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=EA=B8=B0=EB=A1=9D=20=EB=AA=A9=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/my-request/MyRequestList.vue | 15 +++----- .../request-history/RequestHistoryList.vue | 34 +++++++++++++++---- .../RequestHistoryListCard.vue | 5 +-- src/components/requested/RequestedList.vue | 15 +++----- src/types/manager.ts | 10 ++++++ 5 files changed, 51 insertions(+), 28 deletions(-) diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index c89e1a13..5f26d173 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -15,7 +15,7 @@ @@ -31,7 +31,7 @@ import axiosInstance from '@/utils/axios' import { useQuery } from '@tanstack/vue-query' import { useParseParams } from '../hooks/useParseParams' import type { MyRequestResponse } from '@/types/user' -import { ref, watch } from 'vue' +import { computed } from 'vue' import NoContent from '../lists/NoContent.vue' const { params } = useRequestParamsStore() @@ -56,12 +56,7 @@ const { data } = useQuery({ queryFn: fetchMyRequestList }) -watch( - data, - () => { - if (data.value?.totalPages) totalPage.value = data.value.totalPages - }, - { once: true } -) -const totalPage = ref(0) +const totalPage = computed(() => { + return data.value?.totalPages +}) diff --git a/src/components/request-history/RequestHistoryList.vue b/src/components/request-history/RequestHistoryList.vue index 67c2f0a8..1eee4df0 100644 --- a/src/components/request-history/RequestHistoryList.vue +++ b/src/components/request-history/RequestHistoryList.vue @@ -6,15 +6,15 @@ @@ -23,16 +23,38 @@ diff --git a/src/components/request-history/RequestHistoryListCard.vue b/src/components/request-history/RequestHistoryListCard.vue index e13bd529..e2f2bc87 100644 --- a/src/components/request-history/RequestHistoryListCard.vue +++ b/src/components/request-history/RequestHistoryListCard.vue @@ -15,17 +15,18 @@ import type { ListCardProps } from '@/types/common' import ListCardTab from '../lists/ListCardTab.vue' import type { RequestHistoryListData } from '@/types/manager' +import { formatDate } from '@/utils/date' const { info } = defineProps<{ info: RequestHistoryListData }>() const myRequestTabList: ListCardProps[] = [ { content: info.taskCode, width: 120, isTextXs: true }, - { content: info.requestedAt, width: 80 }, + { content: formatDate(info.requestedAt), width: 80 }, { content: info.mainCategoryName, width: 80 }, { content: info.categoryName, width: 80 }, { content: info.title }, { content: info.requesterName, width: 120, profileImg: info.requesterImg }, { content: info.processorName, width: 120, profileImg: info.processorImg }, { content: info.taskStatus, width: 64, isStatus: true }, - { content: info.finishedAt, width: 80 } + { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 } ] diff --git a/src/components/requested/RequestedList.vue b/src/components/requested/RequestedList.vue index 43f52a12..63766955 100644 --- a/src/components/requested/RequestedList.vue +++ b/src/components/requested/RequestedList.vue @@ -15,7 +15,7 @@ @@ -30,7 +30,7 @@ import { useRequestParamsStore } from '@/stores/params' import { useParseParams } from '../hooks/useParseParams' import axiosInstance from '@/utils/axios' import { useQuery } from '@tanstack/vue-query' -import { ref, watch } from 'vue' +import { computed } from 'vue' import type { RequestedResponse } from '@/types/manager' import NoContent from '../lists/NoContent.vue' @@ -56,12 +56,7 @@ const { data } = useQuery({ queryFn: fetchRequestedList }) -watch( - data, - () => { - if (data.value?.totalPages) totalPage.value = data.value.totalPages - }, - { once: true } -) -const totalPage = ref(0) +const totalPage = computed(() => { + return data.value?.totalPages +}) diff --git a/src/types/manager.ts b/src/types/manager.ts index 38b5daa2..24a61661 100644 --- a/src/types/manager.ts +++ b/src/types/manager.ts @@ -130,3 +130,13 @@ export interface RequestedResponse { isFirst: boolean isLast: boolean } + +export interface RequestHistoryResponse { + content: RequestHistoryListData[] + totalElements: number + totalPages: number + pageNumber: number + pageSize: number + isFirst: boolean + isLast: boolean +} From bd271c4e5dceb289b4e686866c1837430395b3fb Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sun, 2 Feb 2025 01:03:46 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=EB=82=B4=20=EC=9E=91=EC=97=85=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20API=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/my-task/MyTaskList.vue | 36 +- src/components/my-task/MyTaskListCard.vue | 5 +- .../request-history/RequestHistoryList.vue | 2 + src/datas/dummy.ts | 712 +----------------- src/types/manager.ts | 10 + 5 files changed, 46 insertions(+), 719 deletions(-) diff --git a/src/components/my-task/MyTaskList.vue b/src/components/my-task/MyTaskList.vue index 533fd104..40dc1f21 100644 --- a/src/components/my-task/MyTaskList.vue +++ b/src/components/my-task/MyTaskList.vue @@ -6,15 +6,16 @@ @@ -23,16 +24,39 @@ diff --git a/src/components/my-task/MyTaskListCard.vue b/src/components/my-task/MyTaskListCard.vue index 109b304d..1130aaed 100644 --- a/src/components/my-task/MyTaskListCard.vue +++ b/src/components/my-task/MyTaskListCard.vue @@ -15,16 +15,17 @@ import type { ListCardProps } from '@/types/common' import ListCardTab from '../lists/ListCardTab.vue' import type { MyTaskListData } from '@/types/manager' +import { formatDate } from '@/utils/date' const { info } = defineProps<{ info: MyTaskListData }>() const myRequestTabList: ListCardProps[] = [ { content: info.taskCode, width: 120, isTextXs: true }, - { content: info.requestedAt, width: 80 }, + { content: formatDate(info.requestedAt), width: 80 }, { content: info.mainCategoryName, width: 80 }, { content: info.categoryName, width: 80 }, { content: info.title }, { content: info.requesterName, width: 120, profileImg: info.requesterImg }, { content: info.taskStatus, width: 64, isStatus: true }, - { content: info.finishedAt, width: 80 } + { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 } ] diff --git a/src/components/request-history/RequestHistoryList.vue b/src/components/request-history/RequestHistoryList.vue index 1eee4df0..1f5d0281 100644 --- a/src/components/request-history/RequestHistoryList.vue +++ b/src/components/request-history/RequestHistoryList.vue @@ -9,6 +9,7 @@ v-for="info in data?.content" :key="info.taskId" :info="info" /> +