From 72a336b3b7db477b5d27380e7fc294f92e9a2b37 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 02:25:38 +0900 Subject: [PATCH 01/10] =?UTF-8?q?:recycle:=20[refactor]=20:=20=EB=82=B4=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20API=EC=97=90?= =?UTF-8?q?=20=EB=A7=9E=EA=B2=8C=20Params=20=ED=83=80=EC=9E=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20Pagination=20=EC=B2=AB=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EA=B0=80=200=EC=9D=BC=20=EB=95=8C=EB=A1=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 58 +++++++++++++++++++ package.json | 1 + .../hooks/useRequestParamsChange.ts | 31 ++++++---- src/components/lists/ListPagination.vue | 14 ++--- .../my-request/MyRequestFilterBar.vue | 12 ++-- src/components/my-request/MyRequestList.vue | 14 ++++- src/main.ts | 2 + src/stores/params.ts | 36 +++++++----- src/types/stores.ts | 18 +++--- 9 files changed, 137 insertions(+), 49 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8ecaade2..a06955bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "taskflow", "version": "0.0.0", "dependencies": { + "@tanstack/vue-query": "^5.66.0", "axios": "^1.7.9", "chart.js": "^4.4.7", "js-cookie": "^3.0.5", @@ -1650,6 +1651,57 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@tanstack/match-sorter-utils": { + "version": "8.19.4", + "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz", + "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==", + "license": "MIT", + "dependencies": { + "remove-accents": "0.5.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/query-core": { + "version": "5.66.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.0.tgz", + "integrity": "sha512-J+JeBtthiKxrpzUu7rfIPDzhscXF2p5zE/hVdrqkACBP8Yu0M96mwJ5m/8cPPYQE9aRNvXztXHlNwIh4FEeMZw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/vue-query": { + "version": "5.66.0", + "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.66.0.tgz", + "integrity": "sha512-P0IIpP2n0Ovn2aRfjn9fyb3Agse5JNZOhCkML+arVkTu6sOSc5QlZkha5R06viE3vGnGGOLHVBTTzm4dBz/USQ==", + "license": "MIT", + "dependencies": { + "@tanstack/match-sorter-utils": "^8.19.4", + "@tanstack/query-core": "5.66.0", + "@vue/devtools-api": "^6.6.3", + "vue-demi": "^0.14.10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@vue/composition-api": "^1.1.2", + "vue": "^2.6.0 || ^3.3.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@tsconfig/node22": { "version": "22.0.0", "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.0.tgz", @@ -4917,6 +4969,12 @@ "node": ">=8.10.0" } }, + "node_modules/remove-accents": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz", + "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", diff --git a/package.json b/package.json index 53360169..4adbec52 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "format": "prettier --write src/" }, "dependencies": { + "@tanstack/vue-query": "^5.66.0", "axios": "^1.7.9", "chart.js": "^4.4.7", "js-cookie": "^3.0.5", diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/components/hooks/useRequestParamsChange.ts index 383e715f..579ae317 100644 --- a/src/components/hooks/useRequestParamsChange.ts +++ b/src/components/hooks/useRequestParamsChange.ts @@ -9,36 +9,45 @@ export const useRequestParamsChange = () => { const onTermChange = (value: string) => { if (value === '') { - params.term = '' + params.filterTaskListRequest.term = '' } else { - params.term = Number(value) + params.filterTaskListRequest.term = Number(value) } } const onTitleChange = (value: string) => { - params.title = value + params.filterTaskListRequest.title = value } const onNickNameChange = (value: string) => { - params.nickName = value + params.filterTaskListRequest.nickName = value } const onMainChange = (value: number) => { - params.mainCategoryId = onArrayChange(params.mainCategoryId, value) + params.filterTaskListRequest.mainCategoryId = onArrayChange( + params.filterTaskListRequest.mainCategoryId, + value + ) } const onSubChange = (value: number) => { - params.categoryId = onArrayChange(params.categoryId, value) + params.filterTaskListRequest.categoryId = onArrayChange( + params.filterTaskListRequest.categoryId, + value + ) } const onTaskStatusChange = (value: string) => { - params.taskStatus = onArrayChange(params.taskStatus!, value) + params.filterTaskListRequest.taskStatus = onArrayChange( + params.filterTaskListRequest.taskStatus!, + value + ) } const onPageSizeChange = (value: string) => { params.pageSize = Number(value) } const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => { - if (sortBy === params.orderRequest.sortBy) { - params.orderRequest.sortDirection = - params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' + if (sortBy === params.filterTaskListRequest.orderRequest.sortBy) { + params.filterTaskListRequest.orderRequest.sortDirection = + params.filterTaskListRequest.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' } else { - params.orderRequest = { sortBy, sortDirection: 'DESC' } + params.filterTaskListRequest.orderRequest = { sortBy, sortDirection: 'DESC' } } } diff --git a/src/components/lists/ListPagination.vue b/src/components/lists/ListPagination.vue index 6a8476c8..15215927 100644 --- a/src/components/lists/ListPagination.vue +++ b/src/components/lists/ListPagination.vue @@ -2,7 +2,7 @@
@@ -45,17 +45,17 @@
    + :key="category.name">
    - {{ category.content }} + {{ category.name }}
  • - {{ subCategory.content }} + {{ subCategory.name }}
@@ -88,7 +88,7 @@ const toggleDropdown = (type: 'main' | 'sub') => ? (isMainOpened.value = !isMainOpened.value) : (isSubOpened.value = !isSubOpened.value) -const selectedCategoryList = ref<{ content: string; subCategoryList: Category[] }[]>([]) +const selectedCategoryList = ref<{ name: string; subCategory: Category[] }[]>([]) const isDisabled = computed(() => { return selectedCategoryList.value.length === 0 }) @@ -97,22 +97,22 @@ watchEffect(() => { }) const onMainClick = (category: Category) => { - if (selectedCategoryList.value.map(el => el.content).includes(category.content)) { + if (selectedCategoryList.value.map(el => el.name).includes(category.name)) { selectedCategoryList.value = [...selectedCategoryList.value].filter( - el => el.content !== category.content + el => el.name !== category.name ) - if (category.subCategoryList) { - category.subCategoryList.forEach(el => { + if (category.subCategory) { + category.subCategory.forEach(el => { if ((sub as number[]).includes(el.id)) { emit('update:sub', el.id) } }) } } else { - if (category.subCategoryList) { + if (category.subCategory) { selectedCategoryList.value.push({ - content: category.content, - subCategoryList: category.subCategoryList + name: category.name, + subCategory: category.subCategory }) } } @@ -121,6 +121,6 @@ const onMainClick = (category: Category) => { const onSubClick = (value: number) => { emit('update:sub', value) } - - +console.log(selectedCategoryList.value) + diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue index e5024918..7d0b97e2 100644 --- a/src/components/my-request/MyRequestFilterBar.vue +++ b/src/components/my-request/MyRequestFilterBar.vue @@ -6,7 +6,7 @@ :value="String(store.params.filterTaskListRequest.term)" @update:value="onParamsChange.onTermChange" /> { + const response = await axiosInstance.get('/api/category') + return response.data +} + +const { data } = useQuery({ + queryKey: ['category'], + queryFn: fetchCategory +}) + +console.log(data.value) diff --git a/src/datas/dummy.ts b/src/datas/dummy.ts index cb9d2dda..9163dca7 100644 --- a/src/datas/dummy.ts +++ b/src/datas/dummy.ts @@ -1,5 +1,4 @@ import type { LogsListData, MemberManagementListData } from '@/types/admin' -import type { Category } from '@/types/common' import type { MyTaskListData, RequestedListData, @@ -8,49 +7,6 @@ import type { } from '@/types/manager' import type { MyRequestListData } from '@/types/user' -export const DUMMY_CATEGORY_LIST: Category[] = [ - { - id: 1, - content: '인프라 검토', - subCategoryList: [ - { id: 11, content: '생성' }, - { id: 12, content: '삭제' }, - { id: 13, content: '변경' }, - { id: 14, content: '기타' } - ] - }, - { - id: 2, - content: 'VM', - subCategoryList: [ - { id: 21, content: '생성' }, - { id: 22, content: '삭제' }, - { id: 23, content: '변경' }, - { id: 24, content: '기타' } - ] - }, - { - id: 3, - content: 'LB', - subCategoryList: [ - { id: 31, content: '생성' }, - { id: 32, content: '삭제' }, - { id: 33, content: '변경' }, - { id: 34, content: '기타' } - ] - }, - { - id: 4, - content: 'K8S', - subCategoryList: [ - { id: 41, content: '생성' }, - { id: 42, content: '삭제' }, - { id: 43, content: '변경' }, - { id: 44, content: '기타' } - ] - } -] - export const DUMMY_MY_REQUEST_LIST_DATA: MyRequestListData[] = [ { taskId: 1, diff --git a/src/types/common.ts b/src/types/common.ts index c4185059..227b0bd3 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -14,8 +14,9 @@ export interface Option { export interface Category { id: number - content: string - subCategoryList?: { id: number; content: string }[] + name: string + code: string + subCategory?: { id: number; mainCategoryId: number; name: string; code: string }[] } export interface FilterCategoryProps { @@ -70,4 +71,4 @@ export interface ColorSelectProps { devisionId: number selectedDivisionId: number | null isOpen: boolean -} \ No newline at end of file +} From 6a5e3fb61548e543deb010d34674475732ba84d3 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 13:52:04 +0900 Subject: [PATCH 03/10] =?UTF-8?q?:sparkles:=20[feat]=20:=20API=EC=97=90=20?= =?UTF-8?q?AccessToken=20=EC=A0=84=EC=86=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/my-request/MyRequestList.vue | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index 74820abc..3d930ca3 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -37,12 +37,17 @@ const onPageChange = (value: number) => { } const fetchRequestList = async () => { - const response = await axiosInstance.get('/api/tasks/requests', { params }) + const response = await axiosInstance.get('/api/tasks/requests', { + headers: { + Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` + }, + params + }) return response.data } const { data } = useQuery({ - queryKey: ['myRequest'], + queryKey: ['myRequest', params], queryFn: fetchRequestList }) From 0a596290cfc91d03a1fe219ee23ea48303747a91 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 15:21:45 +0900 Subject: [PATCH 04/10] =?UTF-8?q?:recycle:=20[refactor]=20:=20orderRequest?= =?UTF-8?q?=20=EA=B0=9D=EC=B2=B4=20sortBy=EC=99=80=20sortDirection?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SideBar.vue | 2 +- .../hooks/useRequestParamsChange.ts | 17 ++++++------ .../hooks/useTeamBoardParamsChange.ts | 4 +-- .../my-request/MyRequestFilterBar.vue | 6 ++--- src/components/my-request/MyRequestList.vue | 6 ++++- .../my-request/MyRequestListBar.vue | 7 ++++- src/components/my-task/MyTaskFilterBar.vue | 27 +++++++++++++------ src/components/my-task/MyTaskListBar.vue | 7 ++++- .../RequestHistoryFilterBar.vue | 27 +++++++++++++------ .../request-history/RequestHistoryListBar.vue | 7 ++++- .../requested/RequestedFilterBar.vue | 25 ++++++++++++----- src/components/requested/RequestedListBar.vue | 7 ++++- .../task-board/TaskBoardFilterBar.vue | 24 ++++++++++++----- .../team-board/TeamBoardFilterBar.vue | 19 ++++++++++--- src/stores/params.ts | 16 +++++------ src/types/stores.ts | 21 ++++++++------- 16 files changed, 152 insertions(+), 70 deletions(-) diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue index 192a0811..fe08f51f 100644 --- a/src/components/SideBar.vue +++ b/src/components/SideBar.vue @@ -69,7 +69,7 @@ import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/ const route = useRoute() // 회원 역할, 닉네임 필요 -const role = ref('admin') +const role = ref('manager') const name = ref('백지연') const nickname = ref('Chloe.yeon') diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/components/hooks/useRequestParamsChange.ts index 579ae317..3528ee1b 100644 --- a/src/components/hooks/useRequestParamsChange.ts +++ b/src/components/hooks/useRequestParamsChange.ts @@ -21,14 +21,14 @@ export const useRequestParamsChange = () => { params.filterTaskListRequest.nickName = value } const onMainChange = (value: number) => { - params.filterTaskListRequest.mainCategoryId = onArrayChange( - params.filterTaskListRequest.mainCategoryId, + params.filterTaskListRequest.mainCategoryIds = onArrayChange( + params.filterTaskListRequest.mainCategoryIds, value ) } const onSubChange = (value: number) => { - params.filterTaskListRequest.categoryId = onArrayChange( - params.filterTaskListRequest.categoryId, + params.filterTaskListRequest.categoryIds = onArrayChange( + params.filterTaskListRequest.categoryIds, value ) } @@ -43,11 +43,12 @@ export const useRequestParamsChange = () => { } const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => { - if (sortBy === params.filterTaskListRequest.orderRequest.sortBy) { - params.filterTaskListRequest.orderRequest.sortDirection = - params.filterTaskListRequest.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' + if (sortBy === params.filterTaskListRequest.sortBy) { + params.filterTaskListRequest.sortDirection = + params.filterTaskListRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' } else { - params.filterTaskListRequest.orderRequest = { sortBy, sortDirection: 'DESC' } + params.filterTaskListRequest.sortBy = sortBy + params.filterTaskListRequest.sortDirection = 'DESC' } } diff --git a/src/components/hooks/useTeamBoardParamsChange.ts b/src/components/hooks/useTeamBoardParamsChange.ts index 5b00aa3f..53c92f15 100644 --- a/src/components/hooks/useTeamBoardParamsChange.ts +++ b/src/components/hooks/useTeamBoardParamsChange.ts @@ -14,10 +14,10 @@ export const useTeamBoardParamsChange = () => { params.title = value } const onMainChange = (value: number) => { - params.mainCategoryId = onArrayChange(params.mainCategoryId, value) + params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value) } const onSubChange = (value: number) => { - params.categoryId = onArrayChange(params.categoryId, value) + params.categoryIds = onArrayChange(params.categoryIds, value) } return { diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue index 7d0b97e2..93dd62da 100644 --- a/src/components/my-request/MyRequestFilterBar.vue +++ b/src/components/my-request/MyRequestFilterBar.vue @@ -7,8 +7,8 @@ @update:value="onParamsChange.onTermChange" /> diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index 3d930ca3..a92cf69a 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -41,7 +41,11 @@ const fetchRequestList = async () => { headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }, - params + params: { + page: params.page, + pageSize: params.pageSize, + ...params.filterTaskListRequest + } }) return response.data } diff --git a/src/components/my-request/MyRequestListBar.vue b/src/components/my-request/MyRequestListBar.vue index 690a7ffe..2135605c 100644 --- a/src/components/my-request/MyRequestListBar.vue +++ b/src/components/my-request/MyRequestListBar.vue @@ -6,7 +6,7 @@ :content="tab.content" :width="tab.width" :sortBy="tab.sortBy" - :current-order-request="params.orderRequest" + :current-order-request="orderRequest" @toggle-sort-by="toggleSortBy" />
@@ -16,8 +16,13 @@ import { MY_REQUEST_LIST_BAR_TAB } from '@/constants/user' import ListBarTab from '../lists/ListBarTab.vue' import { useRequestParamsStore } from '@/stores/params' import { useRequestParamsChange } from '../hooks/useRequestParamsChange' +import { computed } from 'vue' const { params } = useRequestParamsStore() +const orderRequest = computed(() => ({ + sortBy: params.filterTaskListRequest.sortBy, + sortDirection: params.filterTaskListRequest.sortDirection +})) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue index b78acb65..e8ecbdd1 100644 --- a/src/components/my-task/MyTaskFilterBar.vue +++ b/src/components/my-task/MyTaskFilterBar.vue @@ -3,26 +3,26 @@ { + const response = await axiosInstance.get('/api/category') + return response.data +} + +const { data } = useQuery({ + queryKey: ['category'], + queryFn: fetchCategory +}) diff --git a/src/components/my-task/MyTaskListBar.vue b/src/components/my-task/MyTaskListBar.vue index 760cad73..f2a7b96d 100644 --- a/src/components/my-task/MyTaskListBar.vue +++ b/src/components/my-task/MyTaskListBar.vue @@ -6,7 +6,7 @@ :content="tab.content" :width="tab.width" :sortBy="tab.sortBy" - :current-order-request="params.orderRequest" + :current-order-request="orderRequest" @toggle-sort-by="toggleSortBy" />
@@ -16,8 +16,13 @@ import ListBarTab from '../lists/ListBarTab.vue' import { useRequestParamsStore } from '@/stores/params' import { MY_TASK_LIST_BAR_TAB } from '@/constants/manager' import { useRequestParamsChange } from '../hooks/useRequestParamsChange' +import { computed } from 'vue' const { params } = useRequestParamsStore() +const orderRequest = computed(() => ({ + sortBy: params.filterTaskListRequest.sortBy, + sortDirection: params.filterTaskListRequest.sortDirection +})) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue index 74065fd7..b6574ac0 100644 --- a/src/components/request-history/RequestHistoryFilterBar.vue +++ b/src/components/request-history/RequestHistoryFilterBar.vue @@ -3,26 +3,26 @@ { + const response = await axiosInstance.get('/api/category') + return response.data +} + +const { data } = useQuery({ + queryKey: ['category'], + queryFn: fetchCategory +}) diff --git a/src/components/request-history/RequestHistoryListBar.vue b/src/components/request-history/RequestHistoryListBar.vue index 4be5006f..cd259f8b 100644 --- a/src/components/request-history/RequestHistoryListBar.vue +++ b/src/components/request-history/RequestHistoryListBar.vue @@ -6,7 +6,7 @@ :content="tab.content" :width="tab.width" :sortBy="tab.sortBy" - :current-order-request="params.orderRequest" + :current-order-request="orderRequest" @toggle-sort-by="toggleSortBy" /> @@ -16,8 +16,13 @@ import ListBarTab from '../lists/ListBarTab.vue' import { useRequestParamsStore } from '@/stores/params' import { REQUEST_HISTORY_LIST_BAR_TAB } from '@/constants/manager' import { useRequestParamsChange } from '../hooks/useRequestParamsChange' +import { computed } from 'vue' const { params } = useRequestParamsStore() +const orderRequest = computed(() => ({ + sortBy: params.filterTaskListRequest.sortBy, + sortDirection: params.filterTaskListRequest.sortDirection +})) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue index c25519a5..91b0ed35 100644 --- a/src/components/requested/RequestedFilterBar.vue +++ b/src/components/requested/RequestedFilterBar.vue @@ -3,21 +3,21 @@ { + const response = await axiosInstance.get('/api/category') + return response.data +} + +const { data } = useQuery({ + queryKey: ['category'], + queryFn: fetchCategory +}) diff --git a/src/components/requested/RequestedListBar.vue b/src/components/requested/RequestedListBar.vue index 438535ed..06090894 100644 --- a/src/components/requested/RequestedListBar.vue +++ b/src/components/requested/RequestedListBar.vue @@ -6,7 +6,7 @@ :content="tab.content" :width="tab.width" :sort-by="tab.sortBy" - :current-order-request="params.orderRequest" + :current-order-request="orderRequest" @toggle-sort-by="toggleSortBy" :justify-center="tab.justifyCenter" /> @@ -17,8 +17,13 @@ import { REQUESTED_LIST_BAR_TAB } from '@/constants/manager' import ListBarTab from '../lists/ListBarTab.vue' import { useRequestParamsStore } from '@/stores/params' import { useRequestParamsChange } from '../hooks/useRequestParamsChange' +import { computed } from 'vue' const { params } = useRequestParamsStore() +const orderRequest = computed(() => ({ + sortBy: params.filterTaskListRequest.sortBy, + sortDirection: params.filterTaskListRequest.sortDirection +})) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/task-board/TaskBoardFilterBar.vue b/src/components/task-board/TaskBoardFilterBar.vue index 530de1ce..a4841f5d 100644 --- a/src/components/task-board/TaskBoardFilterBar.vue +++ b/src/components/task-board/TaskBoardFilterBar.vue @@ -6,9 +6,9 @@ :value="params.division" @update:value="onDivisionChange" /> { params.division = value } const onMainChange = (value: number) => { - params.mainCategoryId = onArrayChange(params.mainCategoryId, value) + params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value) } const onSubChange = (value: number) => { - params.categoryId = onArrayChange(params.categoryId, value) + params.categoryIds = onArrayChange(params.categoryIds, value) } const onNickNameChange = (value: string) => { params.nickName = value @@ -50,4 +52,14 @@ const onNickNameChange = (value: string) => { const onTitleChange = (value: string) => { params.title = value } + +const fetchCategory = async () => { + const response = await axiosInstance.get('/api/category') + return response.data +} + +const { data } = useQuery({ + queryKey: ['category'], + queryFn: fetchCategory +}) diff --git a/src/components/team-board/TeamBoardFilterBar.vue b/src/components/team-board/TeamBoardFilterBar.vue index 3e673e49..729e046e 100644 --- a/src/components/team-board/TeamBoardFilterBar.vue +++ b/src/components/team-board/TeamBoardFilterBar.vue @@ -13,23 +13,34 @@ :value="''" @update:value="onParamsChange.onTitleChange" /> diff --git a/src/stores/params.ts b/src/stores/params.ts index 0d0bfffb..851a4d43 100644 --- a/src/stores/params.ts +++ b/src/stores/params.ts @@ -14,8 +14,8 @@ export const useRequestParamsStore = defineStore('requestParams', () => { pageSize: 20, filterTaskListRequest: { term: '', - mainCategoryId: [], - categoryId: [], + mainCategoryIds: [], + categoryIds: [], title: '', nickName: '', taskStatus: [], @@ -28,8 +28,8 @@ export const useRequestParamsStore = defineStore('requestParams', () => { params.value.pageSize = 20 params.value.filterTaskListRequest = { term: '', - mainCategoryId: [], - categoryId: [], + mainCategoryIds: [], + categoryIds: [], title: '', nickName: '', taskStatus: [], @@ -83,8 +83,8 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => { const params = ref({ order: 'CONTRIBUTION', title: '', - mainCategoryId: [], - categoryId: [] + mainCategoryIds: [], + categoryIds: [] }) return { params } @@ -93,8 +93,8 @@ export const useTeamBoardParamsStore = defineStore('teamBoardParams', () => { export const useTaskBoardParamsStore = defineStore('taskBoardParams', () => { const params = ref({ division: '', - mainCategoryId: [], - categoryId: [], + mainCategoryIds: [], + categoryIds: [], title: '', nickName: '', pageSize: 20, diff --git a/src/types/stores.ts b/src/types/stores.ts index 93547074..3200bae0 100644 --- a/src/types/stores.ts +++ b/src/types/stores.ts @@ -5,12 +5,13 @@ export interface RequestParams { pageSize: number filterTaskListRequest: { term: number | '' - mainCategoryId: number[] - categoryId: number[] + mainCategoryIds: number[] + categoryIds: number[] title: string nickName: string taskStatus?: string[] - orderRequest: { sortBy: 'REQUESTED' | 'FINISHED'; sortDirection: SortDirection } + sortBy: 'REQUESTED' | 'FINISHED' + sortDirection: SortDirection } } @@ -22,7 +23,8 @@ export interface MemberManagementParams { role: Role | '' pageSize: number page: number - orderRequest: { sortBy: 'REGISTERED'; sortDirection: SortDirection } + sortBy: 'REGISTERED' + sortDirection: SortDirection } export interface LogsParams { @@ -32,20 +34,21 @@ export interface LogsParams { ipAddress: string pageSize: number page: number - orderRequest: { sortBy: 'CREATED'; sortDirection: SortDirection } + sortBy: 'CREATED' + sortDirection: SortDirection } export interface TeamBoardParams { order: string title: string - mainCategoryId: number[] - categoryId: number[] + mainCategoryIds: number[] + categoryIds: number[] } export interface TaskBoardParams { division: string | '' - mainCategoryId: number[] - categoryId: number[] + mainCategoryIds: number[] + categoryIds: number[] title: string nickName: string pageSize: number From 37a3091103e8ccca380a09862312399c92d70876 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 15:27:47 +0900 Subject: [PATCH 05/10] =?UTF-8?q?:recycle:=20[refactor]=20:=20sortBy,=20so?= =?UTF-8?q?rtDirection=20=EC=B4=88=EA=B8=B0=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hooks/useLogsParamsChange.ts | 3 +-- .../member-management/MemberManagementListBar.vue | 9 +++++++-- src/stores/params.ts | 15 ++++++++++----- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components/hooks/useLogsParamsChange.ts b/src/components/hooks/useLogsParamsChange.ts index 43001418..9ebc4473 100644 --- a/src/components/hooks/useLogsParamsChange.ts +++ b/src/components/hooks/useLogsParamsChange.ts @@ -24,8 +24,7 @@ export const useLogsParamsChange = () => { } const toggleSortBy = () => { - params.orderRequest.sortDirection = - params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' + params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC' } return { diff --git a/src/components/member-management/MemberManagementListBar.vue b/src/components/member-management/MemberManagementListBar.vue index b51cacc1..f4c26bc6 100644 --- a/src/components/member-management/MemberManagementListBar.vue +++ b/src/components/member-management/MemberManagementListBar.vue @@ -6,7 +6,7 @@ :content="tab.content" :width="tab.width" :sortBy="tab.sortBy" - :current-order-request="params.orderRequest" + :current-order-request="orderRequest" :justify-center="tab.justifyCenter" @toggle-sort-by="toggleSortBy" /> @@ -16,10 +16,15 @@ import { MEMBER_MANAGEMENT_LIST_BAR_TAB } from '@/constants/admin' import ListBarTab from '../lists/ListBarTab.vue' import { useMemberManagementParamsStore } from '@/stores/params' +import { computed } from 'vue' const { params } = useMemberManagementParamsStore() +const orderRequest = computed(() => ({ + sortBy: params.sortBy, + sortDirection: params.sortDirection +})) const toggleSortBy = () => { - params.orderRequest.sortDirection = params.orderRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' + params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC' } diff --git a/src/stores/params.ts b/src/stores/params.ts index 851a4d43..2028fdcb 100644 --- a/src/stores/params.ts +++ b/src/stores/params.ts @@ -19,7 +19,8 @@ export const useRequestParamsStore = defineStore('requestParams', () => { title: '', nickName: '', taskStatus: [], - orderRequest: { sortBy: 'REQUESTED', sortDirection: 'DESC' } + sortBy: 'REQUESTED', + sortDirection: 'DESC' } }) @@ -33,7 +34,8 @@ export const useRequestParamsStore = defineStore('requestParams', () => { title: '', nickName: '', taskStatus: [], - orderRequest: { sortBy: 'REQUESTED', sortDirection: 'DESC' } + sortBy: 'REQUESTED', + sortDirection: 'DESC' } } @@ -49,7 +51,8 @@ export const useMemberManagementParamsStore = defineStore('userManagementParams' role: '', pageSize: 20, page: 1, - orderRequest: { sortBy: 'REGISTERED', sortDirection: 'DESC' } + sortBy: 'REGISTERED', + sortDirection: 'DESC' }) return { params } @@ -63,7 +66,8 @@ export const useLogsParamsStore = defineStore('logsParams', () => { ipAddress: '', pageSize: 20, page: 1, - orderRequest: { sortBy: 'CREATED', sortDirection: 'DESC' } + sortBy: 'CREATED', + sortDirection: 'DESC' }) const $reset = () => { @@ -73,7 +77,8 @@ export const useLogsParamsStore = defineStore('logsParams', () => { params.value.ipAddress = '' params.value.pageSize = 20 params.value.page = 1 - params.value.orderRequest = { sortBy: 'CREATED', sortDirection: 'DESC' } + params.value.sortBy = 'CREATED' + params.value.sortDirection = 'DESC' } return { params, $reset } From c8a814dbd86ee1c2ff9a397daf3fd27c09a92f9b Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 16:21:37 +0900 Subject: [PATCH 06/10] =?UTF-8?q?:recycle:=20[refactor]=20:=20Params=20?= =?UTF-8?q?=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hooks/useRequestParamsChange.ts | 34 ++++++--------- .../my-request/MyRequestFilterBar.vue | 12 +++--- src/components/my-request/MyRequestList.vue | 9 ++-- .../my-request/MyRequestListBar.vue | 4 +- src/components/my-task/MyTaskFilterBar.vue | 12 +++--- src/components/my-task/MyTaskListBar.vue | 4 +- .../RequestHistoryFilterBar.vue | 12 +++--- .../request-history/RequestHistoryListBar.vue | 4 +- .../requested/RequestedFilterBar.vue | 10 ++--- src/components/requested/RequestedListBar.vue | 4 +- src/stores/params.ts | 42 +++++++++---------- src/types/stores.ts | 22 +++++----- 12 files changed, 78 insertions(+), 91 deletions(-) diff --git a/src/components/hooks/useRequestParamsChange.ts b/src/components/hooks/useRequestParamsChange.ts index 3528ee1b..26b8f90e 100644 --- a/src/components/hooks/useRequestParamsChange.ts +++ b/src/components/hooks/useRequestParamsChange.ts @@ -9,46 +9,36 @@ export const useRequestParamsChange = () => { const onTermChange = (value: string) => { if (value === '') { - params.filterTaskListRequest.term = '' + params.term = '' } else { - params.filterTaskListRequest.term = Number(value) + params.term = Number(value) } } const onTitleChange = (value: string) => { - params.filterTaskListRequest.title = value + params.title = value } const onNickNameChange = (value: string) => { - params.filterTaskListRequest.nickName = value + params.nickName = value } const onMainChange = (value: number) => { - params.filterTaskListRequest.mainCategoryIds = onArrayChange( - params.filterTaskListRequest.mainCategoryIds, - value - ) + params.mainCategoryIds = onArrayChange(params.mainCategoryIds, value) } const onSubChange = (value: number) => { - params.filterTaskListRequest.categoryIds = onArrayChange( - params.filterTaskListRequest.categoryIds, - value - ) + params.categoryIds = onArrayChange(params.categoryIds, value) } const onTaskStatusChange = (value: string) => { - params.filterTaskListRequest.taskStatus = onArrayChange( - params.filterTaskListRequest.taskStatus!, - value - ) + params.taskStatus = onArrayChange(params.taskStatus!, value) } const onPageSizeChange = (value: string) => { params.pageSize = Number(value) } - const toggleSortBy = (sortBy: 'REQUESTED' | 'FINISHED') => { - if (sortBy === params.filterTaskListRequest.sortBy) { - params.filterTaskListRequest.sortDirection = - params.filterTaskListRequest.sortDirection === 'DESC' ? 'ASC' : 'DESC' + const toggleSortBy = (sortBy: 'REQUESTED_AT' | 'FINISHED_AT') => { + if (sortBy === params.sortBy) { + params.sortDirection = params.sortDirection === 'DESC' ? 'ASC' : 'DESC' } else { - params.filterTaskListRequest.sortBy = sortBy - params.filterTaskListRequest.sortDirection = 'DESC' + params.sortBy = sortBy + params.sortDirection = 'DESC' } } diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue index 93dd62da..fd8c491e 100644 --- a/src/components/my-request/MyRequestFilterBar.vue +++ b/src/components/my-request/MyRequestFilterBar.vue @@ -3,26 +3,26 @@ { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }, params: { - page: params.page, - pageSize: params.pageSize, - ...params.filterTaskListRequest + ...params, + mainCategoryIds: params.mainCategoryIds.join(','), + categoryIds: params.categoryIds.join(','), + taskStatus: params.taskStatus?.join(',') } }) return response.data @@ -55,5 +56,7 @@ const { data } = useQuery({ queryFn: fetchRequestList }) +console.log(data.value) + console.log(data.value) diff --git a/src/components/my-request/MyRequestListBar.vue b/src/components/my-request/MyRequestListBar.vue index 2135605c..1c51644d 100644 --- a/src/components/my-request/MyRequestListBar.vue +++ b/src/components/my-request/MyRequestListBar.vue @@ -20,8 +20,8 @@ import { computed } from 'vue' const { params } = useRequestParamsStore() const orderRequest = computed(() => ({ - sortBy: params.filterTaskListRequest.sortBy, - sortDirection: params.filterTaskListRequest.sortDirection + sortBy: params.sortBy, + sortDirection: params.sortDirection })) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/my-task/MyTaskFilterBar.vue b/src/components/my-task/MyTaskFilterBar.vue index e8ecbdd1..26d411f8 100644 --- a/src/components/my-task/MyTaskFilterBar.vue +++ b/src/components/my-task/MyTaskFilterBar.vue @@ -3,26 +3,26 @@ ({ - sortBy: params.filterTaskListRequest.sortBy, - sortDirection: params.filterTaskListRequest.sortDirection + sortBy: params.sortBy, + sortDirection: params.sortDirection })) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/request-history/RequestHistoryFilterBar.vue b/src/components/request-history/RequestHistoryFilterBar.vue index b6574ac0..6dfcaf2c 100644 --- a/src/components/request-history/RequestHistoryFilterBar.vue +++ b/src/components/request-history/RequestHistoryFilterBar.vue @@ -3,26 +3,26 @@ ({ - sortBy: params.filterTaskListRequest.sortBy, - sortDirection: params.filterTaskListRequest.sortDirection + sortBy: params.sortBy, + sortDirection: params.sortDirection })) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/components/requested/RequestedFilterBar.vue b/src/components/requested/RequestedFilterBar.vue index 91b0ed35..cfecbcec 100644 --- a/src/components/requested/RequestedFilterBar.vue +++ b/src/components/requested/RequestedFilterBar.vue @@ -3,21 +3,21 @@ ({ - sortBy: params.filterTaskListRequest.sortBy, - sortDirection: params.filterTaskListRequest.sortDirection + sortBy: params.sortBy, + sortDirection: params.sortDirection })) const { toggleSortBy } = useRequestParamsChange() diff --git a/src/stores/params.ts b/src/stores/params.ts index 2028fdcb..17eeb14b 100644 --- a/src/stores/params.ts +++ b/src/stores/params.ts @@ -12,31 +12,27 @@ export const useRequestParamsStore = defineStore('requestParams', () => { const params = ref({ page: 0, pageSize: 20, - filterTaskListRequest: { - term: '', - mainCategoryIds: [], - categoryIds: [], - title: '', - nickName: '', - taskStatus: [], - sortBy: 'REQUESTED', - sortDirection: 'DESC' - } + term: '', + mainCategoryIds: [], + categoryIds: [], + title: '', + nickName: '', + taskStatus: [], + sortBy: 'REQUESTED_AT', + sortDirection: 'DESC' }) const $reset = () => { params.value.page = 0 params.value.pageSize = 20 - params.value.filterTaskListRequest = { - term: '', - mainCategoryIds: [], - categoryIds: [], - title: '', - nickName: '', - taskStatus: [], - sortBy: 'REQUESTED', - sortDirection: 'DESC' - } + params.value.term = '' + params.value.mainCategoryIds = [] + params.value.categoryIds = [] + params.value.title = '' + params.value.nickName = '' + params.value.taskStatus = [] + params.value.sortBy = 'REQUESTED_AT' + params.value.sortDirection = 'DESC' } return { params, $reset } @@ -51,7 +47,7 @@ export const useMemberManagementParamsStore = defineStore('userManagementParams' role: '', pageSize: 20, page: 1, - sortBy: 'REGISTERED', + sortBy: 'REGISTERED_AT', sortDirection: 'DESC' }) @@ -66,7 +62,7 @@ export const useLogsParamsStore = defineStore('logsParams', () => { ipAddress: '', pageSize: 20, page: 1, - sortBy: 'CREATED', + sortBy: 'CREATED_AT', sortDirection: 'DESC' }) @@ -77,7 +73,7 @@ export const useLogsParamsStore = defineStore('logsParams', () => { params.value.ipAddress = '' params.value.pageSize = 20 params.value.page = 1 - params.value.sortBy = 'CREATED' + params.value.sortBy = 'CREATED_AT' params.value.sortDirection = 'DESC' } diff --git a/src/types/stores.ts b/src/types/stores.ts index 3200bae0..9c3d2f3d 100644 --- a/src/types/stores.ts +++ b/src/types/stores.ts @@ -3,16 +3,14 @@ import type { Role, SortDirection } from './common' export interface RequestParams { page: number pageSize: number - filterTaskListRequest: { - term: number | '' - mainCategoryIds: number[] - categoryIds: number[] - title: string - nickName: string - taskStatus?: string[] - sortBy: 'REQUESTED' | 'FINISHED' - sortDirection: SortDirection - } + term: number | '' + mainCategoryIds: number[] + categoryIds: number[] + title: string + nickName: string + taskStatus?: string[] + sortBy: 'REQUESTED_AT' | 'FINISHED_AT' + sortDirection: SortDirection } export interface MemberManagementParams { @@ -23,7 +21,7 @@ export interface MemberManagementParams { role: Role | '' pageSize: number page: number - sortBy: 'REGISTERED' + sortBy: 'REGISTERED_AT' sortDirection: SortDirection } @@ -34,7 +32,7 @@ export interface LogsParams { ipAddress: string pageSize: number page: number - sortBy: 'CREATED' + sortBy: 'CREATED_AT' sortDirection: SortDirection } From 33917c347f8a610120df7b48ebf9f90a1437c2c6 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 16:45:48 +0900 Subject: [PATCH 07/10] =?UTF-8?q?:sparkles:=20[feat]=20:=20useParseParams?= =?UTF-8?q?=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hooks/useParseParams.ts | 24 +++++++++++++++++++++ src/components/my-request/MyRequestList.vue | 17 +++++---------- src/constants/admin.ts | 4 ++-- src/constants/manager.ts | 10 ++++----- src/constants/user.ts | 6 +++--- 5 files changed, 39 insertions(+), 22 deletions(-) create mode 100644 src/components/hooks/useParseParams.ts diff --git a/src/components/hooks/useParseParams.ts b/src/components/hooks/useParseParams.ts new file mode 100644 index 00000000..ab34c4a5 --- /dev/null +++ b/src/components/hooks/useParseParams.ts @@ -0,0 +1,24 @@ +import type { RequestParams, TaskBoardParams, TeamBoardParams } from '@/types/stores' + +export const useParseParams = () => { + const parseRequestParams = (params: RequestParams) => { + const newParams = { + ...params, + mainCategoryIds: params.mainCategoryIds.join(','), + categoryIds: params.categoryIds.join(''), + taskStatus: params.taskStatus?.join(',') + } + return newParams + } + + const parseBoardParams = (params: TaskBoardParams | TeamBoardParams) => { + const newParams = { + ...params, + mainCategoryIds: params.mainCategoryIds.join(','), + categoryIds: params.categoryIds.join('') + } + return newParams + } + + return { parseRequestParams, parseBoardParams } +} diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index 66c64ea7..04f14d63 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -6,7 +6,7 @@ @@ -25,10 +25,10 @@ import MyRequestListBar from './MyRequestListBar.vue' import MyRequestListCard from './MyRequestListCard.vue' import ListPagination from '../lists/ListPagination.vue' import ListContainer from '../lists/ListContainer.vue' -import { DUMMY_MY_REQUEST_LIST_DATA } from '@/datas/dummy' import { useRequestParamsStore } from '@/stores/params' import axiosInstance from '@/utils/axios' import { useQuery } from '@tanstack/vue-query' +import { useParseParams } from '../hooks/useParseParams' const { params } = useRequestParamsStore() const DUMMY_TOTAL_PAGE = 18 @@ -37,16 +37,13 @@ const onPageChange = (value: number) => { } const fetchRequestList = async () => { + const { parseRequestParams } = useParseParams() + const parsedParams = parseRequestParams(params) const response = await axiosInstance.get('/api/tasks/requests', { headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }, - params: { - ...params, - mainCategoryIds: params.mainCategoryIds.join(','), - categoryIds: params.categoryIds.join(','), - taskStatus: params.taskStatus?.join(',') - } + params: parsedParams }) return response.data } @@ -55,8 +52,4 @@ const { data } = useQuery({ queryKey: ['myRequest', params], queryFn: fetchRequestList }) - -console.log(data.value) - -console.log(data.value) diff --git a/src/constants/admin.ts b/src/constants/admin.ts index da93912f..197cb3e5 100644 --- a/src/constants/admin.ts +++ b/src/constants/admin.ts @@ -8,7 +8,7 @@ export const MEMBER_MANAGEMENT_LIST_BAR_TAB: ListBarTabProps[] = [ { content: '이메일' }, { content: '역할', width: 60 }, { content: '승인 권한', width: 60 }, - { content: '가입일', width: 80, sortBy: 'REGISTERED' }, + { content: '가입일', width: 80, sortBy: 'REGISTERED_AT' }, { content: '처리', width: 180, justifyCenter: true } ] @@ -27,7 +27,7 @@ export const API_LOGS_DIVISION_LIST: Option[] = [ export const LOGS_LIST_BAR_TAB: ListBarTabProps[] = [ { content: '구분', width: 80 }, - { content: '시각', width: 180, sortBy: 'CREATED' }, + { content: '시각', width: 180, sortBy: 'CREATED_AT' }, { content: '아이디', width: 80 }, { content: 'IP 주소', width: 120 }, { content: 'Status', width: 40 }, diff --git a/src/constants/manager.ts b/src/constants/manager.ts index 2ca41e92..380eb26c 100644 --- a/src/constants/manager.ts +++ b/src/constants/manager.ts @@ -2,7 +2,7 @@ import type { ListBarTabProps } from '@/types/common' import type { RequestApproveFormData } from '@/types/manager' export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [ - { content: '요청일', width: 80, sortBy: 'REQUESTED' }, + { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' }, { content: '1차 카테고리', width: 80 }, { content: '2차 카테고리', width: 80 }, { content: '제목' }, @@ -12,25 +12,25 @@ export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [ export const REQUEST_HISTORY_LIST_BAR_TAB: ListBarTabProps[] = [ { content: '고유코드', width: 120 }, - { content: '요청일', width: 80, sortBy: 'REQUESTED' }, + { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' }, { content: '1차 카테고리', width: 80 }, { content: '2차 카테고리', width: 80 }, { content: '제목' }, { content: '요청자', width: 120 }, { content: '처리자', width: 120 }, { content: '상태', width: 64 }, - { content: '종료일', width: 80, sortBy: 'FINISHED' } + { content: '종료일', width: 80, sortBy: 'FINISHED_AT' } ] export const MY_TASK_LIST_BAR_TAB: ListBarTabProps[] = [ { content: '고유코드', width: 120 }, - { content: '요청일', width: 80, sortBy: 'REQUESTED' }, + { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' }, { content: '1차 카테고리', width: 80 }, { content: '2차 카테고리', width: 80 }, { content: '제목' }, { content: '요청자', width: 120 }, { content: '상태', width: 64 }, - { content: '종료일', width: 80, sortBy: 'FINISHED' } + { content: '종료일', width: 80, sortBy: 'FINISHED_AT' } ] export const INITIAL_REQUEST_APPROVE_FORM: RequestApproveFormData = { diff --git a/src/constants/user.ts b/src/constants/user.ts index 2d4333ca..317d1db4 100644 --- a/src/constants/user.ts +++ b/src/constants/user.ts @@ -4,17 +4,17 @@ import type { ListBarTabProps } from '@/types/common' export const MY_REQUEST_LIST_BAR_TAB: ListBarTabProps[] = [ { content: '고유코드', width: 120 }, - { content: '요청일', width: 80, sortBy: 'REQUESTED' }, + { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' }, { content: '1차 카테고리', width: 80 }, { content: '2차 카테고리', width: 80 }, { content: '제목' }, { content: '처리자', width: 120 }, { content: '상태', width: 64 }, - { content: '종료일', width: 80, sortBy: 'FINISHED' } + { content: '종료일', width: 80, sortBy: 'FINISHED_AT' } ] export const REQUESTED_LIST_BAR_TAB: ListBarTabProps[] = [ - { content: '요청일', width: 80, sortBy: 'REQUESTED' }, + { content: '요청일', width: 80, sortBy: 'REQUESTED_AT' }, { content: '1차 카테고리', width: 80 }, { content: '2차 카테고리', width: 80 }, { content: '제목' }, From 81828dd49a006960d4da4535890cdca4ff64fa12 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 16:54:41 +0900 Subject: [PATCH 08/10] =?UTF-8?q?MyRequestResponse=20=EC=9D=B8=ED=84=B0?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/filters/FilterCategory.vue | 4 +--- src/components/my-request/MyRequestList.vue | 6 +++--- src/types/user.ts | 10 ++++++++++ 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/filters/FilterCategory.vue b/src/components/filters/FilterCategory.vue index 9067eb9f..acb7c27d 100644 --- a/src/components/filters/FilterCategory.vue +++ b/src/components/filters/FilterCategory.vue @@ -78,7 +78,7 @@ import type { Category, FilterCategoryProps } from '@/types/common' import { computed, ref, watchEffect } from 'vue' import CommonIcons from '../common/CommonIcons.vue' -const { categoryList, main, sub } = defineProps() +const { categoryList = [], main, sub } = defineProps() const emit = defineEmits(['update:main', 'update:sub']) const isMainOpened = ref(false) @@ -121,6 +121,4 @@ const onMainClick = (category: Category) => { const onSubClick = (value: number) => { emit('update:sub', value) } - -console.log(selectedCategoryList.value) diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index 04f14d63..360568a8 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -14,7 +14,7 @@ @@ -29,9 +29,9 @@ import { useRequestParamsStore } from '@/stores/params' import axiosInstance from '@/utils/axios' import { useQuery } from '@tanstack/vue-query' import { useParseParams } from '../hooks/useParseParams' +import type { MyRequestResponse } from '@/types/user' const { params } = useRequestParamsStore() -const DUMMY_TOTAL_PAGE = 18 const onPageChange = (value: number) => { params.page = value } @@ -48,7 +48,7 @@ const fetchRequestList = async () => { return response.data } -const { data } = useQuery({ +const { data } = useQuery({ queryKey: ['myRequest', params], queryFn: fetchRequestList }) diff --git a/src/types/user.ts b/src/types/user.ts index 9d2eee3f..ffb30fb1 100644 --- a/src/types/user.ts +++ b/src/types/user.ts @@ -140,3 +140,13 @@ export interface TaskHistoryDatas { dueDate?: string labelName?: string } + +export interface MyRequestResponse { + content: MyRequestListData[] + totalElements: number + totalPages: number + pageNumber: number + pageSize: number + isFirst: boolean + isLast: boolean +} From dfac369027dec3e5421684d5276c7d86f55a6f96 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 18:36:43 +0900 Subject: [PATCH 09/10] =?UTF-8?q?=EB=82=B4=20=EC=9A=94=EC=B2=AD=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=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/TaskStatus.vue | 3 +- src/components/lists/ListContainer.vue | 2 +- src/components/lists/ListPagination.vue | 28 +- src/components/lists/NoContent.vue | 9 + .../my-request/MyRequestFilterBar.vue | 2 +- src/components/my-request/MyRequestList.vue | 18 +- .../my-request/MyRequestListCard.vue | 5 +- src/datas/dummy.ts | 240 ------------------ src/types/common.ts | 2 +- src/utils/statusAsColor.ts | 10 +- src/utils/statusAsText.ts | 13 + 11 files changed, 64 insertions(+), 268 deletions(-) create mode 100644 src/components/lists/NoContent.vue create mode 100644 src/utils/statusAsText.ts diff --git a/src/components/TaskStatus.vue b/src/components/TaskStatus.vue index f9935189..582228bb 100644 --- a/src/components/TaskStatus.vue +++ b/src/components/TaskStatus.vue @@ -5,7 +5,7 @@ - {{ status }} + {{ statusAsText(status) }} @@ -13,6 +13,7 @@ - - diff --git a/src/components/lists/NoContent.vue b/src/components/lists/NoContent.vue new file mode 100644 index 00000000..c92585f8 --- /dev/null +++ b/src/components/lists/NoContent.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/components/my-request/MyRequestFilterBar.vue b/src/components/my-request/MyRequestFilterBar.vue index fd8c491e..e1c2735a 100644 --- a/src/components/my-request/MyRequestFilterBar.vue +++ b/src/components/my-request/MyRequestFilterBar.vue @@ -1,5 +1,5 @@ @@ -30,6 +31,8 @@ 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 NoContent from '../lists/NoContent.vue' const { params } = useRequestParamsStore() const onPageChange = (value: number) => { @@ -43,7 +46,7 @@ const fetchRequestList = async () => { headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }, - params: parsedParams + params: { ...parsedParams, pageSize: 1 } }) return response.data } @@ -52,4 +55,13 @@ const { data } = useQuery({ queryKey: ['myRequest', params], queryFn: fetchRequestList }) + +watch( + data, + () => { + if (data.value?.totalPages) totalPage.value = data.value.totalPages + }, + { once: true } +) +const totalPage = ref(0) diff --git a/src/components/my-request/MyRequestListCard.vue b/src/components/my-request/MyRequestListCard.vue index bafeb18b..2f277aaf 100644 --- a/src/components/my-request/MyRequestListCard.vue +++ b/src/components/my-request/MyRequestListCard.vue @@ -15,16 +15,17 @@ import type { ListCardProps } from '@/types/common' import ListCardTab from '../lists/ListCardTab.vue' import type { MyRequestListData } from '@/types/user' +import { formatDate } from '@/utils/date' const { info } = defineProps<{ info: MyRequestListData }>() 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.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/datas/dummy.ts b/src/datas/dummy.ts index 9163dca7..c970246c 100644 --- a/src/datas/dummy.ts +++ b/src/datas/dummy.ts @@ -5,246 +5,6 @@ import type { RequestHistoryListData, TaskCardList } from '@/types/manager' -import type { MyRequestListData } from '@/types/user' - -export const DUMMY_MY_REQUEST_LIST_DATA: MyRequestListData[] = [ - { - taskId: 1, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorName: '', - taskStatus: '요청', - finishedAt: '2025.01.11' - }, - { - taskId: 2, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '진행 중', - finishedAt: '2025.01.11' - }, - { - taskId: 3, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '검토 중', - finishedAt: '2025.01.11' - }, - { - taskId: 4, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '완료', - finishedAt: '2025.01.11' - }, - { - taskId: 5, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '종료', - finishedAt: '2025.01.11' - }, - { - taskId: 6, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorName: '', - taskStatus: '요청', - finishedAt: '2025.01.11' - }, - { - taskId: 7, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '진행 중', - finishedAt: '2025.01.11' - }, - { - taskId: 8, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '검토 중', - finishedAt: '2025.01.11' - }, - { - taskId: 9, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '완료', - finishedAt: '2025.01.11' - }, - { - taskId: 10, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '종료', - finishedAt: '2025.01.11' - }, - { - taskId: 11, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorName: '', - taskStatus: '요청', - finishedAt: '2025.01.11' - }, - { - taskId: 12, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '진행 중', - finishedAt: '2025.01.11' - }, - { - taskId: 13, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '검토 중', - finishedAt: '2025.01.11' - }, - { - taskId: 14, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '완료', - finishedAt: '2025.01.11' - }, - { - taskId: 15, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '종료', - finishedAt: '2025.01.11' - }, - { - taskId: 16, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorName: '', - taskStatus: '요청', - finishedAt: '2025.01.11' - }, - { - taskId: 17, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '진행 중', - finishedAt: '2025.01.11' - }, - { - taskId: 18, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '검토 중', - finishedAt: '2025.01.11' - }, - { - taskId: 19, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '완료', - finishedAt: '2025.01.11' - }, - { - taskId: 20, - taskCode: 'asfawnwakngla', - requestedAt: '2025.01.01', - mainCategoryName: 'VM', - categoryName: '생성', - title: 'VM 생성 부탁드립니다', - processorImg: 'https://picsum.photos/24/24', - processorName: 'Tony.tsx', - taskStatus: '종료', - finishedAt: '2025.01.11' - } -] export const DUMMY_REQUESTED_LIST_DATA: RequestedListData[] = [ { diff --git a/src/types/common.ts b/src/types/common.ts index 227b0bd3..92ae0f91 100644 --- a/src/types/common.ts +++ b/src/types/common.ts @@ -43,7 +43,7 @@ export interface ListBarTabProps { justifyCenter?: boolean } -export type Status = '요청' | '진행 중' | '검토 중' | '완료' | '종료' +export type Status = 'REQUESTED' | 'IN_PROGRESS' | 'PENDING_COMPLETED' | 'COMPLETED' | 'TERMINATED' export type SortDirection = 'DESC' | 'ASC' diff --git a/src/utils/statusAsColor.ts b/src/utils/statusAsColor.ts index be2686f0..78a65d8b 100644 --- a/src/utils/statusAsColor.ts +++ b/src/utils/statusAsColor.ts @@ -1,11 +1,11 @@ import type { Status } from '@/types/common' const defaultColor = { - 요청: 'gray', - '진행 중': 'blue', - '검토 중': 'orange', - 완료: 'green', - 종료: 'red' + REQUESTED: 'gray', + IN_PROGRESS: 'blue', + PENDING_COMPLETED: 'orange', + COMPLETED: 'green', + TERMINATED: 'red' } export const statusAsColor = (status: Status) => { diff --git a/src/utils/statusAsText.ts b/src/utils/statusAsText.ts new file mode 100644 index 00000000..e2b4fa8f --- /dev/null +++ b/src/utils/statusAsText.ts @@ -0,0 +1,13 @@ +import type { Status } from '@/types/common' + +const text = { + REQUESTED: '요청', + IN_PROGRESS: '진행 중', + PENDING_COMPLETED: '검토 중', + COMPLETED: '완료', + TERMINATED: '종료' +} + +export const statusAsText = (status: Status) => { + return text[status] +} From 2e92cec201317a13070ca987c8df158468cb4ff3 Mon Sep 17 00:00:00 2001 From: seorang42 Date: Sat, 1 Feb 2025 19:26:24 +0900 Subject: [PATCH 10/10] =?UTF-8?q?useParseParams=20join()=20=EC=98=A4?= =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/hooks/useParseParams.ts | 4 ++-- src/components/my-request/MyRequestList.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/hooks/useParseParams.ts b/src/components/hooks/useParseParams.ts index ab34c4a5..e1e4dcb0 100644 --- a/src/components/hooks/useParseParams.ts +++ b/src/components/hooks/useParseParams.ts @@ -5,7 +5,7 @@ export const useParseParams = () => { const newParams = { ...params, mainCategoryIds: params.mainCategoryIds.join(','), - categoryIds: params.categoryIds.join(''), + categoryIds: params.categoryIds.join(','), taskStatus: params.taskStatus?.join(',') } return newParams @@ -15,7 +15,7 @@ export const useParseParams = () => { const newParams = { ...params, mainCategoryIds: params.mainCategoryIds.join(','), - categoryIds: params.categoryIds.join('') + categoryIds: params.categoryIds.join(',') } return newParams } diff --git a/src/components/my-request/MyRequestList.vue b/src/components/my-request/MyRequestList.vue index a5133ebd..459ced6d 100644 --- a/src/components/my-request/MyRequestList.vue +++ b/src/components/my-request/MyRequestList.vue @@ -46,7 +46,7 @@ const fetchRequestList = async () => { headers: { Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}` }, - params: { ...parsedParams, pageSize: 1 } + params: parsedParams }) return response.data }