프로젝트 명(폴더) : demo_board
| # | 파일 경로 | 설명 | 구분 |
| 1 | pcconfig.py | ||
| 2 | demo_board > demo_board.py | ||
| 3 | demo_board > demo_state.py | ||
| 4 | demo_board > demo_auth.py | ||
| 5 | demo_board > demo_servers.py | 조회조건 선택후 "검색" 시 Progress 보여주기 | 수정 |
| 6 | demo_board > demo_helpers.py |
기존 검색 버튼의 on_click 이벤트에 다중 이벤트로 Progress 를 붙여서 데이터 조회중이라는 상태를 표시하도록 한다.
필요한 컴포넌트
Modal (https://pynecone.io/docs/library/overlay/modal)
1. Modal 컴포넌트를 생성
여기서는 Circlar Progress를 사용했습니다. 새로 함수 추가
def progress_modal(ServerState):
"""Display for an progress circle."""
return pc.modal(
pc.modal_overlay(
pc.modal_content(
pc.modal_header("Your service request is being processed."),
pc.modal_body(
pc.center(
pc.circular_progress(is_indeterminate=True),
),
),
align="center",
),
),
is_open=ServerState.prog_show,
)
2. 생성한 Modal을 메인 UI 함수에 추가
progress_modal(ServerState)를 추가합니다.
def servers():
"""The Servers page."""
return pc.center(
pc.vstack(
navbar(State, ServerState.app_name),
pc.cond(
State.logged_in,
pc.box(
pc.vstack(
searchbar(ServerState),
progress_modal(ServerState),
render_table(ServerState),
#render_datatable(ServerState),
footer_bottom(),
),
width="100%",
border_width="0px",
),
pc.link(
pc.button("먼저 로그인 하세요"),
href="/",
color="rgb(107,99,246)",
button=True,
)
),
padding_top="10em",
width="100%",
),
)
3. Modal 컴포넌트 이벤트 함수 등록
1번, 2번 코드를 기존 코드에 추가합니다.
class ServerState(State):
"""The state for the Server page."""
print("──────────────────── [ ServerState(State) ] ─────────────────────")
app_name: str = "Server & Apps"
생략 ...
# 1. Progress 를 보여줄지 말지 결정할 Toggle 이벤트
prog_show: bool = False
def prog_show_change(self):
"""Toggle the Update Progress modal."""
self.prog_show = not (self.prog_show)
생략 ...
def get_data_list(self):
#print("\n[ServerState] get_data_list")
pd_result_list: List[Dict] = get_server_data(self.select1_id, self.select2_id)
self.table_columns = list(pd_result_list.columns)
self.table_data = pd_result_list.values.tolist()
#print("[ServerState] get_data_list pd_result_list len : {}\n".format(len(pd_result_list)))
# 2. 기존 "검색" 버튼 클릭시 데이터 조회하는 Class 함수에
# Progress 컨포넌트 상태 변경 이벤트를 호출
return self.prog_show_change()
4. "검색" 버튼의 on_cllick 이벤트에 Progress를 띄우도록 다중 이벤트 등록
on_click=[ServerState.prog_show_change,ServerState.get_data_list]
먼저 prog_show_change 이벤트로 Progress Modal을 띄우고 get_data_list로 데이터 조회를 합니다.
def searchbar(ServerState):
"""The searchbar."""
return pc.box(
생략 ...
pc.button(
"검색", #Search
bg="navy", #gray
color="white",
size="md",
width="150px",
#on_click=ServerState.get_data_list,
on_click=[ServerState.prog_show_change,ServerState.get_data_list],
),
ServerState Class 함수의 get_data_list 에 리턴으로 상태변경 Toggle 함수를 호출 하도록 했기때문에 데이터 조회가 끝나면 함수가 호출되어 Progress Modal이 닫기게 됩니다.
'python > pynecone' 카테고리의 다른 글
| 10. pynecon Demo 로그인 Timeout 지정 및 체크 (0) | 2023.04.03 |
|---|---|
| 8. pynecon Demo 검색 on_click시 다중 이벤트로 Progress 보여주기 (0) | 2023.02.28 |
| 7.pynecone Demo 다중 Select 기능 추가 (0) | 2023.02.18 |
| 6.pynecone Demo List[Dict] typing table, DataTable 추가 (0) | 2023.02.18 |
| 5.pynecone Demo Navigation에 Menu 추가 (0) | 2023.02.18 |
