8. pynecon Demo 검색 on_click시 다중 이벤트로 Progress 보여주기

프로젝트 명(폴더) : 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이 닫기게 됩니다.