Clap-248 담당자 요청 승인 API 연결

src/api/admin.ts

@@ -1,4 +1,5 @@
-import type { LabelDataTypes, NewLabelTypes } from '@/types/admin'
+import type { NewLabelTypes } from '@/types/admin'
+import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
 export const getLabelsAdmin = async () => {

src/api/user.ts

@@ -1,16 +1,32 @@
-import { formDataAxiosInstance } from '@/utils/axios'
+import type { RequestApprovePostTypes } from '@/types/manager'
+import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data
 }
 
 export const getTaskDetailUser = async (id: number) => {
-  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/requests/details`)
+  const response = await axiosInstance.get(`/api/tasks/${id}/requests/details`)
   return response.data
 }
 
 export const getTaskDetailManager = async (id: number) => {
-  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/details`)
+  const response = await axiosInstance.get(`/api/tasks/${id}/details`)
+  return response.data
+}
+
+export const getLabelsManager = async () => {
+  const response = await axiosInstance.get('/api/labels?page=0&size=5')
+  return response.data
+}
+
+export const postTaskApprove = async (id: number, data: RequestApprovePostTypes) => {
+  const response = await axiosInstance.post(`/api/tasks/${id}/approval`, data)
+  return response.data
+}
+
+export const getManager = async () => {
+  const response = await axiosInstance.get('/api/managers')
   return response.data
 }

src/components/request-approve/DueDateInput.vue

@@ -1,14 +1,23 @@
 <template>
   <input
     :type="inputType"
-    :v-model="modelValue"
+    :value="modelValue"
     class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center text-black"
-    @focus="e => (e.target as HTMLInputElement).showPicker()" />
+    @focus="e => (e.target as HTMLInputElement).showPicker()"
+    @input="updateValue(($event.target as HTMLInputElement).value)" />
 </template>
 
 <script lang="ts" setup>
 import type { DueDateInputProps } from '@/types/common'
-import { defineProps } from 'vue'
+import { defineEmits, defineProps, onMounted } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
+const emit = defineEmits(['update:modelValue'])
+const updateValue = (value: string) => {
+  emit('update:modelValue', value)
+}
+
+onMounted(() => {
+  emit('update:modelValue', null)
+})
 </script>

src/components/request-approve/LabelDropdown.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="text-xs mb-2 text-body font-bold">구분</div>
+    <div class="relative flex text-base">
+      <div
+        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
+        @click="toggleDropdown">
+        <p :class="{ 'text-disabled': !modelValue }">
+          {{ modelValue?.labelName || placeholderText }}
+        </p>
+        <CommonIcons
+          :name="dropdownIcon"
+          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+      </div>
+      <div
+        v-if="dropdownOpen"
+        class="absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black">
+        <div
+          v-for="option in labelArr"
+          :key="option.labelId"
+          class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.labelName }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getLabelsManager } from '@/api/user'
+import { dropdownIcon } from '@/constants/iconPath'
+import type { LabelDataTypes } from '@/types/common'
+import type { LabelDropdownProps } from '@/types/user'
+import { onMounted, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { modelValue, placeholderText } = defineProps<LabelDropdownProps>()
+const emit = defineEmits(['update:modelValue'])
+const dropdownOpen = ref(false)
+
+const labelArr = ref<LabelDataTypes[]>([])
+
+onMounted(async () => {
+  emit('update:modelValue', null)
+  labelArr.value = await getLabelsManager()
+})
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: LabelDataTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>

src/components/request-approve/ManagerDropdown.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div class="flex text-xs gap-x-1 mb-2">
+      <p class="text-disabled font-bold">담당자 변경</p>
+      <p class="text-red-1">*</p>
+      <p
+        v-if="isInvalidateState === 'manager'"
+        class="text-red-1">
+        담당자를 선택해주세요
+      </p>
+    </div>
+    <div class="relative flex text-base">
+      <div
+        class="request-task-dropdown"
+        @click="toggleDropdown">
+        <div class="flex gap-2 items-center">
+          <div
+            v-if="modelValue"
+            class="w-6 h-6 rounded-full overflow-hidden">
+            <img
+              :src="modelValue?.imageUrl || '/images/mockProfile.jpg'"
+              alt="userProfile" />
+          </div>
+          <p :class="{ 'text-disabled': !modelValue }">
+            {{ modelValue?.nickname || placeholderText }}
+          </p>
+        </div>
+        <CommonIcons
+          :name="dropdownIcon"
+          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+      </div>
+      <div
+        v-if="dropdownOpen"
+        class="request-task-dropdown-option-list">
+        <div
+          v-for="option in managerArr"
+          :key="option.memberId"
+          class="request-task-dropdown-option justify-between"
+          @click="selectOption(option)">
+          <div class="flex gap-2">
+            <div class="w-6 h-6 rounded-full overflow-hidden">
+              <img
+                :src="option.imageUrl || '/images/mockProfile.jpg'"
+                alt="userProfile" />
+            </div>
+            <p>
+              {{ option.nickname }}
+            </p>
+          </div>
+          <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getManager } from '@/api/user'
+import { dropdownIcon } from '@/constants/iconPath'
+import type { ManagerTypes } from '@/types/manager'
+import type { ManagerDropdownProps } from '@/types/user'
+import { computed, onMounted, ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { placeholderText, modelValue, isInvalidate } = defineProps<ManagerDropdownProps>()
+const emit = defineEmits(['update:modelValue'])
+const dropdownOpen = ref(false)
+const managerArr = ref<ManagerTypes[]>([])
+const isInvalidateState = computed(() => isInvalidate)
+
+onMounted(async () => {
+  emit('update:modelValue', null)
+  managerArr.value = await getManager()
+})
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: ManagerTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>