Skip to content

Commit 2c04516

Browse files
SimYunSupSimYunSup
authored
fix: Refactor js file relation (#20)
* fix: Update build script * fix: Refactor js file relation * feat: Refactor Main and Random components into separate files
1 parent 5697ed0 commit 2c04516

File tree

8 files changed

+270
-282
lines changed

8 files changed

+270
-282
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -370,4 +370,6 @@ FodyWeavers.xsd
370370
appsettings.json
371371

372372
.idea/
373-
.DS_Store
373+
.DS_Store
374+
**/*.js
375+
**/*.wasm

‎src/DotNetDevLottery/Components/Random/MachineAnimation.razor‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,14 @@
33

44
<div class="container">
55
<div class="button-row">
6-
<ui-button
7-
treatment="outline"
8-
@onclick="OnClickButton"
6+
<ui-button treatment="outline" @onclick="OnClickButton"
97
variant="@TriggerButtonVariant(Status == DrawMachineStatus.Pending)"
108
class="@TriggerButtonClass(Status == DrawMachineStatus.Pending)">
119
추첨 진행
1210
</ui-button>
1311
</div>
1412
<div class="machine-wrapper">
15-
<div class="machine" @ref="machineElement" />
13+
<div class="machine" @ref="machineElement" />
1614
</div>
1715
</div>
1816

@@ -41,27 +39,29 @@
4139
{
4240
PersonCount = UserInfoList.Count();
4341
RemainedPersonCount = PersonCount;
44-
if (PersonCount == 0) {
42+
if (PersonCount == 0)
43+
{
4544
return;
4645
}
4746
machineUtils = await JSRuntime.InvokeAsync<IJSObjectReference>(
48-
"import",
49-
"/js/Components/MachineAnimation.razor.js"
47+
"import",
48+
"./Components/Random/MachineAnimation.razor.js"
5049
);
5150
componentRef = DotNetObjectReference.Create(this);
5251
await machineUtils.InvokeVoidAsync(
53-
"init",
54-
PersonCount,
55-
machineElement,
56-
componentRef,
57-
nameof(OnDrawMachine),
58-
nameof(OnDrawMachineAnimationEnd)
52+
"init",
53+
PersonCount,
54+
machineElement,
55+
componentRef,
56+
nameof(OnDrawMachine),
57+
nameof(OnDrawMachineAnimationEnd)
5958
);
6059
}
6160

6261
public async Task OnClickButton()
6362
{
64-
if (machineUtils == null || Status == DrawMachineStatus.Pending) {
63+
if (machineUtils == null || Status == DrawMachineStatus.Pending)
64+
{
6565
return;
6666
}
6767
SelectedUserInfo = null;
@@ -92,7 +92,8 @@
9292
WinnedUserList.Add(index);
9393
Status = DrawMachineStatus.Drawed;
9494
// TODO: 현재에는 사용하고 있지 않음. 추후 관련 기능 추가 없을 경우 삭제.
95-
await OnDrawUser.InvokeAsync(new DrawUserEventArgs{
95+
await OnDrawUser.InvokeAsync(new DrawUserEventArgs
96+
{
9697
Status = Status
9798
});
9899
return SelectedUserInfo;
@@ -106,7 +107,8 @@
106107
}
107108
Status = DrawMachineStatus.Done;
108109
Console.WriteLine("ASDF");
109-
await OnDrawAnimationEnd.InvokeAsync(new DrawAnimationEndEventArgs{
110+
await OnDrawAnimationEnd.InvokeAsync(new DrawAnimationEndEventArgs
111+
{
110112
user = SelectedUserInfo,
111113
Status = Status
112114
});

‎src/DotNetDevLottery/Pages/Main.razor‎

Lines changed: 19 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -8,58 +8,44 @@
88
<ui-button-group class="event-company">
99
@foreach (var eventInfo in EventService.EventInfos.Select((value, index) => new { value, index }))
1010
{
11-
<ui-button
12-
variant="@InfoButtonVariant(selectedEventCompanyIndex == eventInfo.index)"
11+
<ui-button variant="@InfoButtonVariant(selectedEventCompanyIndex == eventInfo.index)"
1312
fill="@InfoButtonTreatment(selectedEventCompanyIndex == eventInfo.index)"
1413
onclick="@(() => OnClickIndexButton(eventInfo.index))">
1514
@eventInfo.value.name
1615
</ui-button>
1716
}
1817
</ui-button-group>
19-
<ui-dropzone
20-
@ref="dropzoneElement"
21-
class="file-dropzone">
22-
@if (targetFile == null)
23-
{
24-
<span>
25-
파일을 끌어다가 놓아주세요!
26-
</span>
27-
}
28-
else
29-
{
30-
<span class="file-dropzone__filename">
31-
@targetFile.Name
32-
</span>
33-
}
34-
<ui-button
35-
variant="primary"
36-
fill="fill"
37-
@onclick="OnClickFileButton">
18+
<ui-dropzone @ref="dropzoneElement" class="file-dropzone">
19+
@if (targetFile == null)
20+
{
21+
<span>
22+
파일을 끌어다가 놓아주세요!
23+
</span>
24+
}
25+
else
26+
{
27+
<span class="file-dropzone__filename">
28+
@targetFile.Name
29+
</span>
30+
}
31+
<ui-button variant="primary" fill="fill" @onclick="OnClickFileButton">
3832
혹은 파일 직접 찾아보기
3933
</ui-button>
40-
<InputFile
41-
type="file"
42-
@ref="inputFileElement"
43-
class="file-dropzone__input"
44-
OnChange="@OnInputFileInput" />
34+
<InputFile type="file" @ref="inputFileElement" class="file-dropzone__input" OnChange="@OnInputFileInput" />
4535
</ui-dropzone>
4636
@if (isSecondFilterOpened)
4737
{
4838
<div>
4939
<div class="form-row">
5040
@foreach (var groupName in groupNames.Select((value, index) => new { value, index }).ToArray())
5141
{
52-
<ui-checkbox
53-
checked="@filterGroup[groupName.index]"
54-
@onchange="@(() =>OnChangeCheckbox(groupName.index))">
42+
<ui-checkbox checked="@filterGroup[groupName.index]" @onchange="@(() => OnChangeCheckbox(groupName.index))">
5543
@groupName.value
5644
</ui-checkbox>
5745
}
5846
</div>
5947
<div class="form-row">
60-
<ui-checkbox
61-
checked="@filterCheckedIn"
62-
@onchange="OnChangeFilterCheckInCheckbox">
48+
<ui-checkbox checked="@filterCheckedIn" @onchange="OnChangeFilterCheckInCheckbox">
6349
체크인 한 사람만 포함
6450
</ui-checkbox>
6551
</div>
@@ -73,119 +59,9 @@
7359
else
7460
{
7561
<div class="button-row">
76-
<ui-button
77-
variant="primary"
78-
fill="outline"
79-
@onclick="OnClickNextButton"
80-
disabled="@isLoading">
62+
<ui-button variant="primary" fill="outline" @onclick="OnClickNextButton" disabled="@isLoading">
8163
@(isLoading ? "가져오는 중" : "다음")
8264
</ui-button>
8365
</div>
8466
}
8567
</div>
86-
87-
@code {
88-
// TODO: Dropzone 분리
89-
IJSObjectReference? elementUtils;
90-
InputFile? inputFileElement;
91-
ElementReference dropzoneElement;
92-
93-
IBrowserFile? targetFile;
94-
bool isLoading = false;
95-
bool isSecondFilterOpened = false;
96-
int selectedEventCompanyIndex = 0;
97-
List<string> groupNames = new();
98-
List<bool> filterGroup = new();
99-
bool filterCheckedIn = true;
100-
101-
string InfoButtonVariant (bool isSelected) => isSelected ? "primary" : "secondary";
102-
string InfoButtonTreatment (bool isSelected) => isSelected ? "fill" : "outline";
103-
104-
protected override async Task OnInitializedAsync()
105-
{
106-
elementUtils = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/Pages/Main.razor.js");
107-
await elementUtils.InvokeVoidAsync("addDropEventToChangeInputFile", dropzoneElement);
108-
}
109-
110-
private void OnClickIndexButton(int index)
111-
{
112-
selectedEventCompanyIndex = index;
113-
this.StateHasChanged();
114-
}
115-
116-
private async Task OnClickFileButton()
117-
{
118-
if (elementUtils == null)
119-
{
120-
return;
121-
}
122-
await elementUtils.InvokeVoidAsync("clickElement", inputFileElement?.Element);
123-
}
124-
125-
private void OnChangeCheckbox(int index)
126-
{
127-
filterGroup[index] = !(filterGroup[index]);
128-
}
129-
private void OnChangeFilterCheckInCheckbox()
130-
{
131-
filterCheckedIn = !filterCheckedIn;
132-
}
133-
134-
private void OnInputFileInput(InputFileChangeEventArgs eventArgs)
135-
{
136-
targetFile = eventArgs.File;
137-
}
138-
139-
private async Task OnClickNextButton()
140-
{
141-
if (targetFile == null)
142-
return;
143-
144-
isLoading = true;
145-
146-
try
147-
{
148-
await EventService.LoadUserInfoListAsync(selectedEventCompanyIndex, targetFile);
149-
isSecondFilterOpened = true;
150-
groupNames = EventService.UserInfos
151-
.GroupBy((userInfo) => userInfo.ticketType)
152-
.Select((userInfoGroup) => userInfoGroup.First().ticketType ?? string.Empty)
153-
.ToList();
154-
filterGroup = groupNames.Select((_) => true).ToList();
155-
}
156-
catch (Exception e)
157-
{
158-
Console.Error.WriteLine(e.ToString());
159-
}
160-
finally
161-
{
162-
isLoading = false;
163-
}
164-
}
165-
166-
private void OnClickGoNextPageButton()
167-
{
168-
var targetGroupNames = groupNames.Where((groupName, index) => filterGroup[index]).ToList();
169-
var currentUsers = EventService.UserInfos;
170-
var selectedUsers = currentUsers.Where(info =>
171-
{
172-
if (!targetGroupNames.Contains(info.ticketType ?? string.Empty))
173-
return false;
174-
175-
if (filterCheckedIn && !(info.isChecked ?? false))
176-
return false;
177-
178-
return true;
179-
}).ToList();
180-
181-
EventService.SetUserInfoList(selectedUsers);
182-
NavigationManager.NavigateTo("/random");
183-
}
184-
async ValueTask IAsyncDisposable.DisposeAsync()
185-
{
186-
if (elementUtils is not null)
187-
{
188-
await elementUtils.DisposeAsync();
189-
}
190-
}
191-
}

0 commit comments

Comments
 (0)