[ASpace]エンタープライズコラボレーションプロジェクト


  • OneButtonソート
  •    const sortedUsersData = key => {
          if (sortKey === key.sort) {
            ascOrder = !ascOrder;
          } else {
            sortKey = key.sort;
            ascOrder = true;
          }
    
          let sortStr = sortKey + (ascOrder ? '_ascending' : '_descending');
          console.log(sortStr);
    
          setSortString(sortStr);
        };
    sortedUsersData関数を呼び出すたびに、ニックネームの上昇やニックネームの低下など、バックグラウンドで値が変更されます.
  • 素子
  • を再利用する.
    const [currentClass, setCurrentClass] = useState(null);
    
    <div className="seriesManage" onClick={e => clickHandler(e)}>
     시리즈 관리
    </div>
    
    
    const clickHandler = e => {
        setCurrentClass(e.target.className);
      };
      
    
    <div className="userSeriesTableContent">
      {currentClass ? USER_SERIES_TABLE[currentClass] : <UserSeriesTable />}
    </div>
    
    const MEMBER_DATA_TITLE = [{ title: '회원' }];
    
    const MEMBER_FILTER_SEARCH_DATA = [
      { id: 1, filterData: '회원유형(전체)' },
      { id: 2, filterData: 'Google' },
      { id: 3, filterData: 'Pia' },
      { id: 4, filterData: 'Naver' },
      { id: 6, filterData: 'KaKao' },
      { id: 7, filterData: '구분(전체)' },
      { id: 8, filterData: '관리자' },
      { id: 9, filterData: '무료회원' },
      { id: 10, filterData: '유료회원' },
      { id: 11, filterData: '스트리밍 구독(전체)' },
      { id: 12, filterData: 'True' },
      { id: 13, filterData: 'False' },
      { id: 14, filterData: '아이디' },
      { id: 15, filterData: '닉네임' },
      { id: 16, filterData: '이메일' },
      { id: 17, filterData: '연락처' },
    ];
    
    const MEMBER_DATA_TABLE_TITLE = [
      { id: 1, title: 'No.' },
      { id: 2, title: '회원유형' },
      { id: 3, title: '아이디' },
      { id: 4, title: '닉네임', sort: 'nickname' },
      { id: 5, title: '구분' },
      { id: 6, title: '스트리밍 구독' },
      { id: 7, title: '라이브클리닉 코스', sort: 'live_clinic_course' },
      { id: 8, title: '라이브클리닉 멘토링', sort: 'live_clinic_mentoring' },
      { id: 9, title: '결제', sort: 'total_payment' },
      { id: 10, title: '상태' },
      { id: 11, title: '최종 로그인', sort: 'last_login_date' },
      { id: 12, title: '가입일시', sort: 'sign_up_date' },
    ];
    
    
    const USER_SERIES_TABLE = {
      userManage: (
        <UserSeriesTable
          title={MEMBER_DATA_TITLE}
          tableTitleData={MEMBER_DATA_TABLE_TITLE}
          filterSearch={MEMBER_FILTER_SEARCH_DATA}
        />
      ),
      seriesManage: (
        <UserSeriesTable
          title={SERIES_DATA_TITLE}
          tableTitleData={SERIES_DATA_TABLE_TITLE}
        />
      ),
    };
    
    複合アプリケーションメニューバーと構成部品の多重化
    初期currentClass値がない場合は、<UserSeriesTable />を呼び出します.
    clickHandler関数の実行時にcurrentClass値が生成されると、対応する構成部品がpropsとともに呼び出されます.
  • ネスト
  • を繰り返す
    const updateOffset = buttonIndex => {
        setPage(buttonIndex);
      };
    
    const listFilterLimit = e => {
        setLimit(e.target.value);
      };
    
    <select className="courseSelector6" onChange={listFilterLimit}>
     {arrNum.map((com, idx) => (
      <option value={com} key={idx}>
       {com}개
      </option>
    ))}
    </select>
    
    <div className="userSeriesTableItems">
     <UserSeriesContent users={users} />
     <Buttons updateOffset={updateOffset} />
    </div>
    
    const [page, setPage] = useState(0);
    
    const prevButton = () => {
      if (page >= 5) {
        setPage(page - 5);
      }
    };
    
    const nextButton = () => {
      setPage(page + 5);
    };
    
    <div className="pageBtn">
          <button onClick={() => prevButton()}>{'<'}</button>
          <button onClick={() => updateOffset(0 + page)}>{1 + page}</button>
          <button onClick={() => updateOffset(1 + page)}>{2 + page}</button>
          <button onClick={() => updateOffset(2 + page)}>{3 + page}</button>
          <button onClick={() => updateOffset(3 + page)}>{4 + page}</button>
          <button onClick={() => updateOffset(4 + page)}>{5 + page}</button>
          <button onClick={() => nextButton()}>{'>'}</button>
    </div>
    listFilterLimit関数による10,20のしきい値の選択
    updateOffset関数を実行することで、
    バックエンドに移動します.
  • フィルタ機能
  • const typeFilter = e => {
        setPlatform(e.target.value);
      };
    
    const userTypeFilter = e => {
        setUserType(e.target.value);
      };
    
    const subscriptionFilter = e => {
        setSubscriptionPlan(e.target.value);
      };
      
    <select
    className="userSeriesTableFilterBoxOne"
    onChange={typeFilter}
    >
    
    <select
    className="userSeriesTableFilterBoxTwo"
    onChange={userTypeFilter}
    >
    
    <select
    className="userSeriesTableFilterBoxThree"
    onChange={subscriptionFilter}
    >
    フィルタリング機能は、会員タイプ、区分(管理者、有料会員)、購読状況に応じて実施されます.
  • 検索機能
  • const searchBoxFilter = e => {
      setSearchBoxLock(e.target.value);
    };
    
    const updateUserInput = e => {
      let userInput = e.target.value;
      setSearchUsersData(userInput);
    };
    
    <select
    className="userSeriesTableSearchBoxOne"                onChange={searchBoxFilter}
    >
    
    <SearchBox handleChange={updateUserInput} />
    ニックネーム、アイデンティティなど、検索可能なカテゴリの制限をフィルタで縮小します.
    updateUserInput関数を使用して、検索する値を入力ウィンドウに入力します.