core&ui: add all enroll users status in training (#456)

Co-authored-by: undefined <i@undefined.moe>

packages/ui-default/pages/training_detail.page.styl

@@ -3,6 +3,9 @@
     width: rem(150px)
     position: relative
 
+    &.col--status--sm
+      width: rem(84px)
+
   .col--tried, .col--ac, .col--difficulty
     width: rem(70px)
     text-align: center
@@ -33,3 +36,13 @@
 
     &.collapsed .training__section__detail
       display: none
+
+  #menu-item-training_detail ul
+    max-height: calc(85vh - 345px)
+    overflow-y: auto
+    overflow-x: hidden
+
+  .enroll_user_menu
+    max-height: 85vh
+    overflow-y: auto
+    overflow-x: hidden

packages/ui-default/pages/training_detail.page.ts

@@ -1,25 +1,82 @@
 import $ from 'jquery';
+import _ from 'lodash';
 import { NamedPage } from 'vj/misc/Page';
+import pjax from 'vj/utils/pjax';
 import { slideDown, slideUp } from 'vj/utils/slide';
 
-async function handleSection(ev, type: string) {
-  const $section = $(ev.currentTarget).closest('.training__section');
-  if ($section.is(`.${type}d, .animating`)) return;
+type SectionAction = 'expand' | 'collapse';
+type SectionState = 'expanded' | 'collapsed';
+
+function action2state(action: SectionAction): SectionState {
+  return action === 'expand' ? 'expanded' : 'collapsed';
+}
+
+async function setSectionState($section: JQuery<HTMLElement>, state: SectionState) {
+  if ($section.is(`.${state}, .animating`)) return;
   $section.addClass('animating');
   const $detail = $section.find('.training__section__detail');
-  if (type === 'expand') {
+  if (state === 'expanded') {
     await slideDown($detail, 300, { opacity: 0 }, { opacity: 1 });
   } else {
     await slideUp($detail, 300, { opacity: 1 }, { opacity: 0 });
   }
-  $section.addClass(type === 'expand' ? 'expanded' : 'collapsed');
-  $section.removeClass(type === 'expand' ? 'collapsed' : 'expanded');
+  $section.addClass(state);
+  $section.removeClass(state === 'expanded' ? 'collapsed' : 'expanded');
   $section.removeClass('animating');
 }
 
+async function handleSection(ev: JQuery.ClickEvent<Document>, type: SectionAction) {
+  const $section = $(ev.currentTarget).closest('.training__section');
+  await setSectionState($section, action2state(type));
+}
+
+function searchUser() {
+  const val = $('input[name=uid]').val().toString().toLowerCase();
+  $('.enroll_user_menu_item').each((i, e) => {
+    const $item = $(e);
+    const $username = $item.data('uname').toString().toLowerCase();
+    const $uid = $item.data('uid').toString();
+    $item.toggle($username.includes(val) || $uid === val);
+  });
+}
+
+function selectUser(ev) {
+  ev.preventDefault();
+  if ($('.enroll_user_menu_item:visible').length === 1) {
+    $('.enroll_user_menu_item:visible').first().find('a')[0].click();
+  }
+}
+
+function handleChooseUser(ev) {
+  ev.preventDefault();
+  $('.enroll_user_menu_item .active').removeClass('active');
+  $(ev.currentTarget).addClass('active');
+  pjax.request({ url: ev.currentTarget.href });
+}
+
+async function handleSidebarClick(ev: JQuery.ClickEvent<Document>) {
+  const id = $(ev.currentTarget).attr('href');
+  const $section = $(id).closest('.training__section');
+  await setSectionState($section, 'expanded');
+}
+
+async function handleHashChange() {
+  const id = window.location.hash;
+  if (id.startsWith('#node-')) {
+    const $section = $(id).closest('.training__section');
+    await setSectionState($section, 'expanded');
+  }
+}
+
 const page = new NamedPage('training_detail', () => {
+  $('.search__input').on('input', _.debounce(searchUser, 500));
+  $('#searchForm').on('submit', selectUser);
   $(document).on('click', '[name="training__section__expand"]', (ev) => handleSection(ev, 'expand'));
   $(document).on('click', '[name="training__section__collapse"]', (ev) => handleSection(ev, 'collapse'));
+  $(document).on('click', '.enroll_user_menu_item > a', (ev) => handleChooseUser(ev));
+  $(document).on('click', '#menu-item-training_detail > ul > li > a', (ev) => handleSidebarClick(ev));
+  window.addEventListener('hashchange', handleHashChange);
+  $(handleHashChange);
 });
 
 export default page;