Skip to content
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.

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

feat(mail): implement the send mail view #337

Merged
merged 23 commits into from
Oct 4, 2021
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
393d5f0
feat: 메일 발송 페이지 기능 베이스 레이아웃 추가
Rok93 Sep 13, 2021
947ac76
feat: 대략적인 개별, 그룹 발송 기능 틀 구현
Rok93 Sep 15, 2021
cf2f20f
feat: 업로드 기능 제외한 메일 발송 페이지 구현
Rok93 Sep 15, 2021
b528570
feat: 업로드 버튼 추가
Rok93 Sep 16, 2021
c4b8f59
refactor: 메일 첨부파일 업로드 기능의 최대 용량을 10MB로 변경 및 모든 파일 타입을 업로드 허용하도록 변경
Rok93 Sep 20, 2021
8e6b68f
refactor: 첨부파일 업로드 버튼이 메일 본문 아래에 위치하도록 변경
Rok93 Sep 20, 2021
e6322b0
feat: 메일을 보내는 발신자 표시 추가
Rok93 Sep 20, 2021
47231b0
refactor: 개별 발송, 그룹 발송 기능을 하나의 페이지에서 가능하도록 변경
Rok93 Sep 21, 2021
d9f5c93
refactor: 그룹 발송 기능을 Dialog 컴포넌트 클래스로 분리
Rok93 Sep 22, 2021
24f387e
refactor: 개별 발송 기능을 Dialog 컴포넌트 클래스로 분리
Rok93 Sep 22, 2021
355547b
refactor: 개별 발송 Dialog 컴포넌트 클래스의 파라미터 순서 변경
Rok93 Sep 22, 2021
cc54a2d
refactor: 개별 발송 Dialog의 추가 버튼을 적용 버튼으로 변경
Rok93 Sep 22, 2021
c7fc6c4
resolve conflict
Rok93 Sep 23, 2021
cd0c86e
feat: form layout 적용 및 Grid 추가
Rok93 Sep 23, 2021
619dfde
feat: MailTarget Grid 삭제 버튼 추가
Rok93 Sep 23, 2021
e22c80a
feat: MailTarget Grid 삭제 버튼 추가
Rok93 Sep 23, 2021
a5a7bda
refactor: 메일의 각 컴포넌트의 라벨을 텍스트 라벨로 변경
Rok93 Sep 24, 2021
7bbad19
refactor: UI 피드백 반영
Rok93 Sep 25, 2021
7ab7abb
Merge branch 'develop' into feature/send-mail-page
Rok93 Sep 29, 2021
7566eb1
refactor: 마찌 피드백 반영
Rok93 Oct 1, 2021
97a7bd4
refactor(mail): polish the code
woowahan-pjs Oct 4, 2021
32f321b
refactor(support): rename search bar to search box
woowahan-pjs Oct 4, 2021
98597dd
refactor(mail): polish the code
woowahan-pjs Oct 4, 2021
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
5 changes: 4 additions & 1 deletion src/main/kotlin/apply/application/EvaluationDtos.kt
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,11 @@ data class EvaluationTargetData(
)

data class MailTargetResponse(
val name: String,
val email: String
)
) {
constructor(applicantResponse: ApplicantResponse) : this(applicantResponse.name, applicantResponse.email)
}

data class EvaluationItemScoreData(
@field:NotNull
Expand Down
2 changes: 1 addition & 1 deletion src/main/kotlin/apply/application/MailTargetService.kt
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class MailTargetService(
fun findMailTargets(evaluationId: Long, evaluationStatus: EvaluationStatus? = null): List<MailTargetResponse> {
val applicantIds = findEvaluationTargets(evaluationId, evaluationStatus).map { it.applicantId }
return applicantRepository.findAllById(applicantIds)
.map { MailTargetResponse(it.email) }
.map { MailTargetResponse(it.name, it.email) }
}

private fun findEvaluationTargets(evaluationId: Long, evaluationStatus: EvaluationStatus?): List<EvaluationTarget> {
Expand Down
12 changes: 12 additions & 0 deletions src/main/kotlin/apply/application/mail/MailSendData.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
package apply.application.mail

import javax.validation.constraints.NotNull

data class MailSendData(
@field:NotNull
var subject: String = "",
@field:NotNull
var content: String = "",
@field:NotNull
var targetMails: List<String> = listOf()
)
4 changes: 3 additions & 1 deletion src/main/kotlin/apply/ui/admin/BaseLayout.kt
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ package apply.ui.admin

import apply.ui.admin.cheater.CheatersView
import apply.ui.admin.evaluation.EvaluationsView
import apply.ui.admin.mail.MailFormView
import apply.ui.admin.recruitment.RecruitmentsView
import apply.ui.admin.selections.SelectionsView
import com.vaadin.flow.component.Component
Expand All @@ -25,7 +26,8 @@ class BaseLayout : AppLayout() {
"모집 관리" to RecruitmentsView::class.java,
"평가 관리" to EvaluationsView::class.java,
"선발 과정" to SelectionsView::class.java,
"부정 행위자" to CheatersView::class.java
"부정 행위자" to CheatersView::class.java,
"메일 발송" to MailFormView::class.java
)

init {
Expand Down
117 changes: 117 additions & 0 deletions src/main/kotlin/apply/ui/admin/mail/GroupMailTargetFormDialog.kt
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
package apply.ui.admin.mail

import apply.application.EvaluationService
import apply.application.MailTargetResponse
import apply.application.MailTargetService
import apply.application.RecruitmentResponse
import apply.application.RecruitmentService
import apply.domain.evaluation.Evaluation
import apply.domain.evaluationtarget.EvaluationStatus
import com.vaadin.flow.component.Component
import com.vaadin.flow.component.dialog.Dialog
import com.vaadin.flow.component.grid.Grid
import com.vaadin.flow.component.html.H2
import com.vaadin.flow.component.orderedlayout.FlexComponent
import com.vaadin.flow.component.orderedlayout.HorizontalLayout
import com.vaadin.flow.component.orderedlayout.VerticalLayout
import com.vaadin.flow.component.select.Select
import support.views.addSortableColumn
import support.views.createErrorButton
import support.views.createItemSelect
import support.views.createPrimaryButton

class GroupMailTargetFormDialog(
private val recruitmentService: RecruitmentService,
private val evaluationService: EvaluationService,
private val mailTargetService: MailTargetService,
private val reloadComponent: (List<MailTargetResponse>) -> Unit
) : Dialog() {
private val evaluation = createEvaluationItem()
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
private val evaluation = createEvaluationItem()
private val evaluation = createItemSelect<Evaluation>("평가")

메서드를 제거하고 이렇게 바꾸는건 어떨까요 ? ㅎㅎ

Copy link
Contributor Author

Choose a reason for hiding this comment

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

아... 메서드에 제네릭 타입을 저렇게 명시하면 바로 사용할 수 있는거였군요??
메서드에 바로 제네릭 타입을 지정할 수 있는지 전혀 몰랐네요 😧

코멘트 반영했습니다 😃

private val recruitment = createRecruitmentItem(evaluation)
private val evaluationStatus = createEvaluationStatusItem(evaluation)
private val mailTargets: MutableList<MailTargetResponse> = mutableListOf()
private val currentMailTargets: VerticalLayout = VerticalLayout(createContent())
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
private val currentMailTargets: VerticalLayout = VerticalLayout(createContent())
private val currentMailTargetsGrid: Grid<MailTargetResponse> = createMailTargetsGrid()

여기를 그리드로 바꾸고,


init {
width = "800px"
height = "90%"
add(
H2("지원자 정보 조회"),
HorizontalLayout(
recruitment, evaluation, evaluationStatus,
HorizontalLayout(
createPrimaryButton("추가") {
reloadComponent(mailTargets)
close()
},
createErrorButton("취소") {
close()
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
createErrorButton("취소") {
close()
}
createContrastButton("취소") {
close()
}

다른 곳과 같이 취소에는 ContrastButton을 사용하면 좋을 것 같아요!

Copy link
Contributor

Choose a reason for hiding this comment

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

이것도 개인적인 생각인데,
만약 다이얼로그 사이즈가 좀 준다면 셀렉트 박스랑 버튼이 같이있어 상단이 꽉차니
버튼 HorizontalLayout을 하단으로 내리는 것은 어떨까라는 생각이 드는데 요건 어떨까요 ??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

가로 폭을 줄이다보니 자연스럽게 버튼들을 하단으로 내리는게 좋을 것 같네요 🤔

).apply {
justifyContentMode = FlexComponent.JustifyContentMode.END
defaultVerticalComponentAlignment = FlexComponent.Alignment.END
},
),
currentMailTargets
).apply {
setWidthFull()
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
).apply {
setWidthFull()
}
)

호잇

Copy link
Contributor Author

Choose a reason for hiding this comment

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

호잇!

open()
}

private fun createEvaluationItem(): Select<Evaluation> {
return createItemSelect("평가")
}

Copy link
Contributor

Choose a reason for hiding this comment

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

바로 호출을 하고 있으니 메서드로 따로 분리하지 않아도 괜찮을 것 같은데 어떠신가요??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

이 부분은 createItemSelect()를 필드(=evaluation)에 바로 할당하면 타입 추론을 할 수 없는 문제가 있어서 지금처럼 메서드로 뽑았는데... 혹시 바로 호출할 수 있는 방법이 있을까요 ? 🤔

image

Copy link
Contributor

Choose a reason for hiding this comment

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

@Rok93

    private val evaluation = createItemSelect<Evaluation>("평가")

이렇게 타입 명시를 해주면 될거에요 ! ㅎㅎ

private fun createRecruitmentItem(evaluation: Select<Evaluation>): Select<RecruitmentResponse> {
return createItemSelect<RecruitmentResponse>("모집").apply {
setItems(*recruitmentService.findAll().toTypedArray())
setItemLabelGenerator { it.title }
addValueChangeListener {
evaluation.apply {
setItems(*evaluationService.findAllByRecruitmentId(it.value.id).toTypedArray())
setItemLabelGenerator { it.title }
}
}
}
}

private fun createEvaluationStatusItem(
evaluation: Select<Evaluation>,
): Select<EvaluationStatus> {
return createItemSelect<EvaluationStatus>("모집 상태").apply {
setItems(*EvaluationStatus.values())
setItemLabelGenerator { it.toText() }
addValueChangeListener {
val mailTargetResponses = mailTargetService.findMailTargets(evaluation.value.id, it.value)
mailTargets.clear()
mailTargets.addAll(mailTargetResponses)

currentMailTargets.apply {
this.removeAll()
this.add(createContent(mailTargetResponses))
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
currentMailTargets.apply {
this.removeAll()
this.add(createContent(mailTargetResponses))
}
currentMailTargetsGrid.apply {
setItems(mailTargetResponses)
}

setItem을 사용해 createContent() 메서드를 제거하는 방법도 있을 것 같은데 이런 방법은 어떨까요 ??

Copy link
Contributor Author

Choose a reason for hiding this comment

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

기존에는 VerticalLayout에 Component(아마 Span 이었던걸로..)를 각각 추가하다 보니 지금처럼 removeAll, add 메서드로 되어있었는데, VerticalLayout으로 감싸지 않고 바로 Grid를 사용한다면 마찌가 제안한대로 변경할 수 있을 것 같아요!

}
}
}

private fun EvaluationStatus.toText() =
when (this) {
EvaluationStatus.WAITING -> "평가 전"
EvaluationStatus.PASS -> "합격"
EvaluationStatus.FAIL -> "탈락"
EvaluationStatus.PENDING -> "보류"
}

private fun createContent(mailTargets: List<MailTargetResponse> = emptyList()): Component {
val grids = createMailTargetsGrid(mailTargets)
return VerticalLayout(grids).apply { setWidthFull() }
}

private fun createMailTargetsGrid(mailTargets: List<MailTargetResponse>): Component {
return Grid<MailTargetResponse>(10).apply {
addSortableColumn("이메일", MailTargetResponse::email)
Copy link
Contributor

Choose a reason for hiding this comment

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

전반적인 그리드에 메일 대상자 이름도 추가했다면 여기에서도 이름 컬럼을 추가하면 어떨까요???

Copy link
Contributor Author

Choose a reason for hiding this comment

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

그렇네요 여기에서도 이름을 추가하면 좋을 것 같아요 😃

setItems(mailTargets)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
package apply.ui.admin.mail

import apply.application.ApplicantResponse
import apply.application.ApplicantService
import apply.application.MailTargetResponse
import com.vaadin.flow.component.Component
import com.vaadin.flow.component.button.Button
import com.vaadin.flow.component.dialog.Dialog
import com.vaadin.flow.component.grid.Grid
import com.vaadin.flow.component.html.H2
import com.vaadin.flow.component.orderedlayout.HorizontalLayout
import com.vaadin.flow.component.orderedlayout.VerticalLayout
import com.vaadin.flow.data.renderer.ComponentRenderer
import com.vaadin.flow.data.renderer.Renderer
import support.views.addSortableColumn
import support.views.createPrimaryButton
import support.views.createSearchBar

class IndividualMailTargetFormDialog(
private val applicantService: ApplicantService,
private val reloadComponent: (MailTargetResponse) -> Unit
) : Dialog() {
init {
width = "800px"
height = "90%"
add(H2("지원자 정보 조회"), HorizontalLayout(createAddRecipients())).apply {
setWidthFull()
}
open()
}
Copy link
Contributor

Choose a reason for hiding this comment

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

image

다이얼로그를 쓰는데 화면이 꽉찬 느낌이기도 하고,
들어가는 데이터들의 너비 사이즈(?)도 많지 않아서사이즈를 조금 줄여도 좋을 것 같은데 어떠신가요??

그리고 현재는 빈 화면을 클릭해야 나가지는데 해당 다이얼로그 아래에 취소 버튼이 있으면 좋을 것 같아요 !! ㅎㅎ
(CheaterFormDialog#createCancelButton()를 차용하면 좋을 것 같습니다)

Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
init {
width = "800px"
height = "90%"
add(H2("지원자 정보 조회"), HorizontalLayout(createAddRecipients())).apply {
setWidthFull()
}
open()
}
init {
add(createHeader(), HorizontalLayout(createAddRecipients()), createButtons())
width = "800px"
height = "90%"
open()
}

위 코멘트에 이어서 다른 다이얼로그처럼 너비 높이 선언을 아래로 내려주어 사이즈를 맞추고
제안한 코드 같은 다른 다이얼로그와 유사한 구조로 변경해보는 것은 어떨까 싶어요.
정말 개인적인 생각이지만, 전반적인 뷰의 코드나 화면 통일성도 꽤 중요한 것 같아서,
CheaterFormDialog를 참고해보아도 좋을 것 같아요 !
리팩토링하는데 혹시나 도움이 될까 싶어 남기는 개인적인 의견이라 반영하지 않으셔도 좋습니다 !!
참고만 부탁드려요 :)
image
위와 같은 구조를 적용했을 때 모습입니다.

Copy link
Contributor

Choose a reason for hiding this comment

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

앗 그리고 기존에 검색 요소가 그리드보다 튀어나온 부분도 정렬해주면 좋을 것 같아요 !

Copy link
Contributor

Choose a reason for hiding this comment

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

와 마찌... 디테일한 리뷰 🔥
저도 전반적으로 동의합니다 👍
특히 개별 불러오기 창에서 취소하는 버튼은 필요해보여요. 다이얼로그의 크기도 어느정도 통일되면 더 좋을것 같구요!

Copy link
Contributor

@knae11 knae11 Sep 25, 2021

Choose a reason for hiding this comment

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

우어ㅣ..바딘은 마스터했군욬ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 👍

그리고 선택후 닫기가 애매해서 마찌가 취소 버튼을 넣어준 것처럼 닫기 버튼 등이 있어서 모달이 닫히면 좋을 듯 싶어요!ㅎㅎㅎ

Copy link
Contributor Author

@Rok93 Rok93 Sep 25, 2021

Choose a reason for hiding this comment

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

그리드가 튀어나오는 부분 수정하고 취소버튼 추가했습니다 😃


private fun createAddRecipients(): Component {
val container = VerticalLayout()
return VerticalLayout(
createSearchBar {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
createSearchBar {
createSearchBar("지원자 검색") {

여기다 다음과 같은 라벨을 주어도 좋을 것 같네요 ㅎㅎ

container.removeAll()
val founds = applicantService.findAllByKeyword(it)
if (founds.isNotEmpty()) {
container.add(createGrid(founds))
}
},
container
)
}

private fun createGrid(applicantResponse: List<ApplicantResponse>): Component {
return Grid<ApplicantResponse>(10).apply {
addSortableColumn("이름", ApplicantResponse::name)
addSortableColumn("이메일", ApplicantResponse::email)
addColumn(createEditAndDeleteButton()).apply { isAutoWidth = true }
setItems(applicantResponse)
}
}

private fun createEditAndDeleteButton(): Renderer<ApplicantResponse> {
return ComponentRenderer<Component, ApplicantResponse> { applicantResponse ->
HorizontalLayout(createTargetAddButton(applicantResponse))
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

네이밍을 보면 수정, 삭제 버튼을 만들 것 같은데 추가 버튼을 생성하고 있어요 ~

Copy link
Contributor Author

@Rok93 Rok93 Sep 30, 2021

Choose a reason for hiding this comment

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

에고... 원래 추가 or 삭제 버튼을 생성하게하는 기능인데... 총체적 난국이네요 add가 아닌 edit에 심지어 or가 아닌 and ... ㅋㅋㅋㅋㅋㅋㅋㅋ 대체 무슨 생각을 하면서 만든건지...

바딘의 위험성 ⚠️


private fun createTargetAddButton(applicantResponse: ApplicantResponse): Button {
return createPrimaryButton("추가") {
reloadComponent(MailTargetResponse(applicantResponse))
}.apply {
isDisableOnClick = true
}
}
}
Loading