Skip to content

Commit aad9ba6

Browse files
Minkyu0424Minkyu0424
authored
Merge pull request #38 from TaskFlow-CLAP/CLAP-163
Clap-163 새 회원 추가 UI생성
2 parents 72d65e7 + d8cb2a0 commit aad9ba6

20 files changed

+319
-36
lines changed

‎src/assets/styles.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,10 @@ body {
114114
.request-task-dropdown-option {
115115
@apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
116116
}
117+
118+
.form-view-container {
119+
@apply max-w-600 flex flex-col gap-y-6;
120+
}
121+
.form-view-title {
122+
@apply w-full h-[54px] border-l-8 border-l-primary1 flex items-center pl-5;
123+
}

‎src/components/request-approve/ProcessorDropdown.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33
<div class="flex text-xs gap-x-1 mb-2">
4-
<p class="text-body font-bold">{{ labelName }}</p>
4+
<p class="text-disabled font-bold">{{ labelName }}</p>
55
<p class="text-red-1">*</p>
66
</div>
77
<div class="relative flex text-base">

‎src/components/request-approve/RequestApprove.vue‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,11 @@
3838
:label-name="'구분'"
3939
:is-label="true"
4040
:placeholderText="'구분을 선택해주세요'" />
41-
<div class="w-full mt-4 flex justify-center">
42-
<div class="w-[400px] flex gap-6">
43-
<button
44-
class="button-large-default"
45-
@click="handleCancel">
46-
취소
47-
</button>
48-
<button
49-
class="button-large-primary"
50-
@click="handleSubmit">
51-
승인
52-
</button>
53-
</div>
54-
</div>
41+
<FormButtonContainer
42+
:handleCancel="handleCancel"
43+
:handleSubmit="handleSubmit"
44+
cancelText="취소"
45+
submitText="승인" />
5546
</div>
5647
</template>
5748

@@ -67,6 +58,7 @@ import ModalView from '../ModalView.vue'
6758
import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
6859
import DueDateInput from './DueDateInput.vue'
6960
import ProcessorDropdown from './ProcessorDropdown.vue'
61+
import FormButtonContainer from '../user-manage/FormButtonContainer.vue'
7062
7163
const isModalVisible = ref(false)
7264
const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)

‎src/components/request-task/RequestTask.vue‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,30 +12,25 @@
1212
:placeholderText="'2차 카테고리를 선택해주세요'" />
1313
<RequestTaskInput
1414
v-model="title"
15-
:placeholderText="TITLE_PLACEHOLDER" />
15+
:placeholderText="TITLE_PLACEHOLDER"
16+
:label-name="'제목'" />
1617
<RequestTaskTextArea
1718
v-model="description"
1819
:placeholderText="EXPLANATION_PLACEHOLDER" />
1920
<RequestTaskFileInput v-model="file" />
20-
<div class="w-full justify-center flex gap-6 mt-4">
21-
<button
22-
class="w-[188px] h-[52px] border border-disabled rounded text-disabled bg-white flex items-center justify-center"
23-
@click="handleCancel">
24-
취소
25-
</button>
26-
<button
27-
class="w-[188px] h-[52px] rounded text-white bg-primary1 flex items-center justify-center"
28-
@click="handleSubmit">
29-
요청
30-
</button>
31-
</div>
21+
<FormButtonContainer
22+
:handleCancel="handleCancel"
23+
:handleSubmit="handleSubmit"
24+
cancelText="취소"
25+
submitText="요청" />
3226
</div>
3327
</template>
3428

3529
<script lang="ts" setup>
3630
import { EXPLANATION_PLACEHOLDER, TITLE_PLACEHOLDER } from '@/constants/user'
3731
import { DUMMY_REQUEST_TASK_CATEGORIES } from '@/datas/taskdetail'
3832
import { ref } from 'vue'
33+
import FormButtonContainer from '../user-manage/FormButtonContainer.vue'
3934
import RequestTaskDropdown from './RequestTaskDropdown.vue'
4035
import RequestTaskFileInput from './RequestTaskFileInput.vue'
4136
import RequestTaskInput from './RequestTaskInput.vue'

‎src/components/request-task/RequestTaskDropdown.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div
1313
class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer"
1414
@click="toggleDropdown">
15-
<p :class="{ 'text-body': modelValue === placeholderText }">
15+
<p :class="{ 'text-disabled': modelValue === placeholderText }">
1616
{{ modelValue || placeholderText }}
1717
</p>
1818
<CommonIcons

‎src/components/request-task/RequestTaskInput.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<template>
22
<div>
33
<div class="text-xs flex gap-x-1 mb-2">
4-
<p class="text-body font-bold">제목</p>
5-
<p class="text-red-1">*</p>
4+
<p class="text-body font-bold">{{ labelName }}</p>
5+
<p
6+
v-if="!isNotRequired"
7+
class="text-red-1">
8+
*
9+
</p>
610
</div>
711
<input
812
class="w-full h-11 border border-border-1 px-4 focus:outline-none"
913
:value="modelValue"
14+
:disabled="isEdit"
1015
@input="updateValue(($event.target as HTMLInputElement).value)"
1116
:placeholder="placeholderText" />
1217
</div>
@@ -15,7 +20,8 @@
1520
<script lang="ts" setup>
1621
import type { RequestTaskInputProps } from '@/types/user'
1722
18-
const { modelValue, placeholderText } = defineProps<RequestTaskInputProps>()
23+
const { modelValue, placeholderText, labelName, isNotRequired, isEdit } =
24+
defineProps<RequestTaskInputProps>()
1925
const emit = defineEmits(['update:modelValue'])
2026
2127
const updateValue = (value: string) => {

‎src/components/user-manage/FormButtonContainer.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="w-full mt-4 flex justify-center">
3+
<div class="w-[400px] flex gap-6">
4+
<button
5+
class="button-large-default"
6+
@click="handleCancel">
7+
{{ cancelText }}
8+
</button>
9+
<button
10+
class="button-large-primary"
11+
@click="handleSubmit">
12+
{{ submitText }}
13+
</button>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script lang="ts" setup>
19+
import type { FormButtonProps } from '@/types/common'
20+
21+
const { handleCancel, handleSubmit, cancelText, submitText } = defineProps<FormButtonProps>()
22+
</script>

‎src/components/user-manage/FormCheckbox.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="text-xs font-bold">
3+
<p class="text-body mb-2">{{ labelName }}</p>
4+
<div class="flex gap-2 items-center cursor-pointer">
5+
<CommonIcons
6+
:name="checkBoxIcon"
7+
:class="[
8+
'w-4 h-4 rounded-full',
9+
{ 'bg-primary1 text-white': isChecked, 'border border-disabled': !isChecked }
10+
]"
11+
:style="isChecked ? { fill: 'white' } : {}"
12+
@click="updateValue" />
13+
<p>{{ checkButtonName }}</p>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<script lang="ts" setup>
19+
import { checkBoxIcon } from '@/constants/iconPath'
20+
import type { FormCheckboxProps } from '@/types/common'
21+
import CommonIcons from '../common/CommonIcons.vue'
22+
23+
const { labelName, checkButtonName, isChecked } = defineProps<FormCheckboxProps>()
24+
const emit = defineEmits(['update:modelValue'])
25+
26+
const updateValue = () => {
27+
emit('update:modelValue', !isChecked)
28+
}
29+
</script>

‎src/components/user-manage/UserRegistration.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div class="w-[552px] flex flex-col gap-y-6">
3+
<ModalView
4+
:isOpen="isModalVisible"
5+
:type="'successType'"
6+
@close="handleCancel">
7+
<template #header> 새로운 회원이 추가되었습니다 </template>
8+
</ModalView>
9+
<RequestTaskInput
10+
v-model="userRegistrationForm.name"
11+
:placeholderText="'회원의 이름을 입력해주세요'"
12+
:labelName="'이름'" />
13+
<RequestTaskInput
14+
v-model="userRegistrationForm.nickname"
15+
:placeholderText="'회원의 아이디를 입력해주세요'"
16+
:labelName="'아이디'" />
17+
<RequestTaskInput
18+
v-model="userRegistrationForm.email"
19+
:placeholderText="'회원의 이메일을 입력해주세요'"
20+
:labelName="'이메일'" />
21+
<RequestTaskDropdown
22+
v-model="userRegistrationForm.role"
23+
:options="RoleKeys"
24+
:label-name="'역할'"
25+
:placeholderText="'회원의 역할을 선택해주세요'" />
26+
<FormCheckbox
27+
v-model="userRegistrationForm.isReviewer"
28+
:labelName="'요청 승인 권한'"
29+
:checkButtonName="'허용'"
30+
:isChecked="userRegistrationForm.isReviewer" />
31+
<RequestTaskInput
32+
v-model="userRegistrationForm.departmentId"
33+
:placeholderText="'회원의 부서를 입력해주세요'"
34+
:is-not-required="true"
35+
:labelName="'부서'" />
36+
<RequestTaskInput
37+
v-model="userRegistrationForm.departmentRole"
38+
:placeholderText="'회원의 직무를 입력해주세요'"
39+
:is-not-required="true"
40+
:labelName="'직무'" />
41+
<FormButtonContainer
42+
:handleCancel="handleCancel"
43+
:handleSubmit="handleSubmit"
44+
cancelText="취소"
45+
submitText="추가" />
46+
</div>
47+
</template>
48+
49+
<script lang="ts" setup>
50+
import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
51+
import { ref } from 'vue'
52+
import ModalView from '../ModalView.vue'
53+
import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
54+
import RequestTaskInput from '../request-task/RequestTaskInput.vue'
55+
import FormButtonContainer from './FormButtonContainer.vue'
56+
import FormCheckbox from './FormCheckbox.vue'
57+
58+
const isModalVisible = ref(false)
59+
const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
60+
61+
const handleCancel = () => {
62+
userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
63+
isModalVisible.value = false
64+
}
65+
66+
const handleSubmit = () => {
67+
console.log(userRegistrationForm.value)
68+
isModalVisible.value = true
69+
}
70+
</script>

‎src/components/user-manage/UserUpdate.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<div class="w-[552px] flex flex-col gap-y-6">
3+
<ModalView
4+
:isOpen="isModalVisible"
5+
:type="'successType'"
6+
@close="handleCancel">
7+
<template #header> 회원정보가 수정되었습니다 </template>
8+
</ModalView>
9+
<RequestTaskInput
10+
v-model="userRegistrationForm.name"
11+
:placeholderText="'회원의 이름을 입력해주세요'"
12+
:labelName="'이름'" />
13+
<RequestTaskInput
14+
v-model="userRegistrationForm.nickname"
15+
:placeholderText="'회원의 아이디를 입력해주세요'"
16+
:isEdit="true"
17+
:labelName="'아이디'" />
18+
<RequestTaskInput
19+
v-model="userRegistrationForm.email"
20+
:placeholderText="'회원의 이메일을 입력해주세요'"
21+
:labelName="'이메일'" />
22+
<RequestTaskDropdown
23+
v-model="userRegistrationForm.role"
24+
:options="RoleKeys"
25+
:label-name="'역할'"
26+
:placeholderText="'회원의 역할을 선택해주세요'" />
27+
<FormCheckbox
28+
v-model="userRegistrationForm.isReviewer"
29+
:labelName="'요청 승인 권한'"
30+
:checkButtonName="'허용'"
31+
:isChecked="userRegistrationForm.isReviewer" />
32+
<RequestTaskInput
33+
v-model="userRegistrationForm.departmentId"
34+
:placeholderText="'회원의 부서를 입력해주세요'"
35+
:is-not-required="true"
36+
:labelName="'부서'" />
37+
<RequestTaskInput
38+
v-model="userRegistrationForm.departmentRole"
39+
:placeholderText="'회원의 직무를 입력해주세요'"
40+
:is-not-required="true"
41+
:labelName="'직무'" />
42+
<FormButtonContainer
43+
:handleCancel="handleCancel"
44+
:handleSubmit="handleSubmit"
45+
cancelText="취소"
46+
submitText="수정" />
47+
</div>
48+
</template>
49+
50+
<script lang="ts" setup>
51+
import { INITIAL_USER_REGISTRATION, RoleKeys } from '@/constants/admin'
52+
import { ref } from 'vue'
53+
import ModalView from '../ModalView.vue'
54+
import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
55+
import RequestTaskInput from '../request-task/RequestTaskInput.vue'
56+
import FormButtonContainer from './FormButtonContainer.vue'
57+
import FormCheckbox from './FormCheckbox.vue'
58+
59+
const isModalVisible = ref(false)
60+
const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)
61+
62+
const handleCancel = () => {
63+
userRegistrationForm.value = { ...INITIAL_USER_REGISTRATION }
64+
isModalVisible.value = false
65+
}
66+
67+
const handleSubmit = () => {
68+
console.log(userRegistrationForm.value)
69+
isModalVisible.value = true
70+
}
71+
</script>

0 commit comments

Comments
 (0)