[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関数を使用して、検索する値を入力ウィンドウに入力します.