Skip to content

CLAP-202 담당자 기능 목록 조회 API 연결 #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
seorang42 merged 6 commits into from
Feb 2, 2025
Merged

CLAP-202 담당자 기능 목록 조회 API 연결 #62

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e150f5
승인 대기 중인 요청 목록 조회 API 연결
seorang42 Feb 1, 2025
c434c50
전체 요청 기록 목록 조회 API 연결
seorang42 Feb 1, 2025
bd271c4
내 작업 목록 조회 API 연결
seorang42 Feb 1, 2025
37724d9
Merge branch 'CLAP-192' of https://github.com/TaskFlow-CLAP/TaskFlow-…
seorang42 Feb 1, 2025
3a2ac26
:bug: [fix] 상태값 ENUM 값 수정
seorang42 Feb 2, 2025
6ea044b
:twisted_rightwards_arrows: [fix] : conflict resolved
seorang42 Feb 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 7 additions & 12 deletions src/components/my-request/MyRequestList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<template #pagination>
<ListPagination
:page-number="params.page + 1"
:total-page="totalPage"
:total-page="totalPage || 0"
@update:page-number="onPageChange" />
</template>
</ListContainer>
Expand All @@ -31,15 +31,15 @@ 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()
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', {
Expand All @@ -53,15 +53,10 @@ const fetchRequestList = async () => {

const { data } = useQuery<MyRequestResponse>({
queryKey: ['myRequest', params],
queryFn: fetchRequestList
queryFn: fetchMyRequestList
})

watch(
data,
() => {
if (data.value?.totalPages) totalPage.value = data.value.totalPages
},
{ once: true }
)
const totalPage = ref(0)
const totalPage = computed(() => {
Copy link
Contributor

@Minkyu0424 Minkyu0424 Feb 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오 watch와 computed를 사용하시는 기준이 있으신가요?
저번에 설명해주신거 같은데 기억이 안나네요 하하..
저는 주로 비동기작업이 필요하면 watch를 주로 사용하는거 같아서요

Copy link
Contributor Author

@seorang42 seorang42 Feb 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 watch와 computed를 사용하는 기준은 '행동'이 필요한 것인가 '결과값'이 필요한 것인가로 나뉘는 것 같습니다.
말씀하신대로 비동기 작업이나 함수 호출로 인한 행동이 필요할 때는 watch를 사용하는 것 같고,
특정 값을 기반으로 하여 간단한 변환값을 도출해내야 할 때는 computed를 사용하는 것 같습니다.

computed는 값을 캐싱하여 계산에 관여하는 값이 변하지 않으면 다시 호출되지 않는다는 장점도 있는만큼 computed로 해결할 수 있는 상황에서는 watch가 아닌 computed를 사용하는 것 같습니다.
+Vue의 공식 문서에서도 computed로 처리할 수 있다면 watch보단 computed를 사용하는 것을 권장하고 있습니다!

return data.value?.totalPages
})
</script>
36 changes: 30 additions & 6 deletions src/components/my-task/MyTaskList.vue
View file
Open in desktop
Copy link
Contributor

@Minkyu0424 Minkyu0424 Feb 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

현재 데이터 요청하시면서 탠스택 쿼리를 쓰시는 곳에 기준이 있으실까요?

Copy link
Contributor Author

@seorang42 seorang42 Feb 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보통 GET에는 항상 탠스택 쿼리를 사용하는 것 같습니다.
값을 캐싱해주기 때문에 불필요하게 데이터가 반복적으로 갱신되어 화면에서 깜빡 거리는 것을 최소화할 수 있고,
select 옵션을 통해 값을 가공하거나, isLoading, isPending 등 상태값을 제공해주는 것도 자주 사용하기 때문에
GET을 통해 데이터를 받아올 때에는 별다른 기준 없이 항상 사용하고 있습니다.

Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@

<template #listCards>
<MyTaskListCard
v-for="info in DUMMY_MY_TASK_LIST_DATA"
v-for="info in data?.content"
:key="info.taskId"
:info="info" />
<NoContent v-if="data?.content.length === 0" />
</template>

<template #pagination>
<ListPagination
:page-number="params.page"
:total-page="DUMMY_TOTAL_PAGE"
:page-number="params.page + 1"
:total-page="totalPage || 0"
@update:page-number="onPageChange" />
</template>
</ListContainer>
Expand All @@ -23,16 +24,39 @@
<script setup lang="ts">
import ListPagination from '../lists/ListPagination.vue'
import ListContainer from '../lists/ListContainer.vue'
import { DUMMY_MY_TASK_LIST_DATA } from '@/datas/dummy'
import { useRequestParamsStore } from '@/stores/params'
import MyTaskListCard from './MyTaskListCard.vue'
import MyTaskListBar from './MyTaskListBar.vue'
import { useParseParams } from '../hooks/useParseParams'
import axiosInstance from '@/utils/axios'
import type { MyTaskResponse } from '@/types/manager'
import { useQuery } from '@tanstack/vue-query'
import { computed } from 'vue'
import NoContent from '../lists/NoContent.vue'

const { params } = useRequestParamsStore()
const DUMMY_TOTAL_PAGE = 18
const onPageChange = (value: number) => {
params.page = value
}

// Data Handling
const fetchMyTaskList = async () => {
const { parseRequestParams } = useParseParams()
const parsedParams = parseRequestParams(params)
const response = await axiosInstance.get('/api/tasks/assigned', {
headers: {
Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
},
params: parsedParams
})
return response.data
}

const { data } = useQuery<MyTaskResponse>({
queryKey: ['myTask', params],
queryFn: fetchMyTaskList
})

const totalPage = computed(() => {
return data.value?.totalPages
})
</script>
5 changes: 3 additions & 2 deletions src/components/my-task/MyTaskListCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
]
</script>
36 changes: 30 additions & 6 deletions src/components/request-history/RequestHistoryList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@

<template #listCards>
<RequestHistoryListCard
v-for="info in DUMMY_REQUEST_HISTORY_LIST_DATA"
v-for="info in data?.content"
:key="info.taskId"
:info="info" />
<NoContent v-if="data?.content.length === 0" />
</template>

<template #pagination>
<ListPagination
:page-number="params.page"
:total-page="DUMMY_TOTAL_PAGE"
:page-number="params.page + 1"
:total-page="totalPage || 0"
@update:page-number="onPageChange" />
</template>
</ListContainer>
Expand All @@ -23,16 +24,39 @@
<script setup lang="ts">
import ListPagination from '../lists/ListPagination.vue'
import ListContainer from '../lists/ListContainer.vue'
import { DUMMY_REQUEST_HISTORY_LIST_DATA } from '@/datas/dummy'
import { useRequestParamsStore } from '@/stores/params'
import RequestHistoryListBar from './RequestHistoryListBar.vue'
import RequestHistoryListCard from './RequestHistoryListCard.vue'
import { useParseParams } from '../hooks/useParseParams'
import axiosInstance from '@/utils/axios'
import { useQuery } from '@tanstack/vue-query'
import { computed } from 'vue'
import type { RequestHistoryResponse } 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 fetchRequestHistoryList = async () => {
const { parseRequestParams } = useParseParams()
const parsedParams = parseRequestParams(params)
const response = await axiosInstance.get('/api/tasks', {
headers: {
Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
},
params: parsedParams
})
return response.data
}

const { data } = useQuery<RequestHistoryResponse>({
queryKey: ['requestHistory', params],
queryFn: fetchRequestHistoryList
})

const totalPage = computed(() => {
return data.value?.totalPages
})
</script>
5 changes: 3 additions & 2 deletions src/components/request-history/RequestHistoryListCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
]
</script>
2 changes: 1 addition & 1 deletion src/components/requested/RequestedFilterBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
:value="store.params.title"
@update:value="onParamsChange.onTitleChange" />
<FilterInput
title="처리자"
title="요청자"
:value="store.params.nickName"
@update:value="onParamsChange.onNickNameChange" />
<FilterDropdown
Expand Down
36 changes: 30 additions & 6 deletions src/components/requested/RequestedList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,16 @@

<template #listCards>
<RequestedListCard
v-for="info in DUMMY_REQUESTED_LIST_DATA"
v-for="info in data?.content"
:key="info.taskId"
:info="info" />
<NoContent v-if="data?.content.length === 0" />
</template>

<template #pagination>
<ListPagination
:page-number="params.page"
:total-page="DUMMY_TOTAL_PAGE"
:page-number="params.page + 1"
:total-page="totalPage || 0"
@update:page-number="onPageChange" />
</template>
</ListContainer>
Expand All @@ -24,15 +25,38 @@
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 { computed } 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<RequestedResponse>({
queryKey: ['requested', params],
queryFn: fetchRequestedList
})

const totalPage = computed(() => {
return data.value?.totalPages
})
</script>
3 changes: 2 additions & 1 deletion src/components/requested/RequestedListCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down
Loading