core: contest team (#1183)

packages/ui-default/components/contest/contest.page.ts

@@ -1,17 +1,100 @@
 import $ from 'jquery';
+import { ActionDialog, prompt } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { AutoloadPage } from 'vj/misc/Page';
 import { delay, i18n, request } from 'vj/utils';
 
 const contestPage = new AutoloadPage('contestPage', () => {
-  $('[data-contest-code]').on('click', (ev) => {
+  $('[data-contest-team-invite]').on('click', async (ev) => {
+    const vuid = $(ev.currentTarget).attr('data-vuid');
+    const res = await prompt(i18n('Invite Member'), {
+      user: {
+        type: 'userId',
+        label: i18n('Username / UID'),
+        required: true,
+        autofocus: true,
+      },
+    });
+    if (!res?.user) return;
+    request.post(location.pathname, { operation: 'invite', vuid, uid: res.user })
+      .then(() => {
+        Notification.success(i18n('Invitation sent'));
+        delay(1000).then(() => window.location.reload());
+      })
+      .catch((e) => {
+        Notification.error(e.message || e);
+      });
+  });
+
+  $('[data-contest-team-rename]').on('click', function () {
+    const $card = $(this).closest('[data-contest-team]');
+    $card.find('[data-contest-team-rename-form]').removeClass('is-hidden')
+      .find('input[name="name"]').trigger('focus');
+    $(this).addClass('is-hidden');
+  });
+
+  $('[data-contest-team-rename-cancel]').on('click', function () {
+    const $card = $(this).closest('[data-contest-team]');
+    $card.find('[data-contest-team-rename-form]').addClass('is-hidden');
+    $card.find('[data-contest-team-rename]').removeClass('is-hidden');
+  });
+
+  const $dialogBody = $('.dialog__body--contest-attend > div');
+  if (!$dialogBody.length) return;
+
+  function selectMode(mode: 'personal' | 'team') {
+    const $button = $dialogBody.find(`[data-contest-attend-mode="${mode}"]`);
+    if ($button.prop('disabled')) return;
+    $dialogBody.find('[name="contest_attend_mode"]').val(mode);
+    $dialogBody.find('[data-contest-attend-mode]').removeClass('primary').attr('aria-pressed', 'false');
+    $button.addClass('primary').attr('aria-pressed', 'true');
+    $dialogBody.find('[name="contest_attend_vuid"]').prop('disabled', mode !== 'team');
+  }
+
+  const attendDialog = new ActionDialog({
+    $body: $dialogBody,
+    onDispatch(action) {
+      if (action !== 'ok') return true;
+      const mode = $dialogBody.find('[name="contest_attend_mode"]').val();
+      const vuid = $dialogBody.find('[name="contest_attend_vuid"]').val();
+      if (mode === 'team' && !vuid) {
+        Notification.error(i18n('Please select a team.'));
+        return false;
+      }
+      const $code = $dialogBody.find('[name="contest_attend_code"]');
+      if ($code.length && !$code.val()?.toString().trim()) {
+        Notification.error(i18n('Invitation code is required.'));
+        return false;
+      }
+      return true;
+    },
+  });
+
+  attendDialog.clear = function () {
+    selectMode('personal');
+    this.$dom.find('[name="contest_attend_code"]').val('');
+    return this;
+  };
+
+  $dialogBody.on('click', '[data-contest-attend-mode]', (ev) => {
+    selectMode($(ev.currentTarget).attr('data-contest-attend-mode') as 'personal' | 'team');
+  });
+
+  $('[data-contest-attend-form]').on('submit', async (ev) => {
     ev.preventDefault();
-    // eslint-disable-next-line no-alert
-    const code = prompt(i18n('Invitation code:'));
-    request.post('', {
-      operation: 'attend',
-      code,
-    }).then(() => {
+    const $form = $(ev.currentTarget);
+    const params: Record<string, any> = { operation: 'attend' };
+
+    if ($form.is('[data-contest-needs-dialog]')) {
+      const action = await attendDialog.clear().open();
+      if (action !== 'ok') return;
+      const mode = $dialogBody.find('[name="contest_attend_mode"]').val();
+      if (mode === 'team') params.vuid = $dialogBody.find('[name="contest_attend_vuid"]').val();
+      const code = $dialogBody.find('[name="contest_attend_code"]').val();
+      if (code) params.code = code.toString().trim();
+    }
+
+    request.post($form.attr('action') || '', params).then(() => {
       Notification.success(i18n('Successfully attended'));
       delay(1000).then(() => window.location.reload());
     }).catch((e) => {

packages/ui-default/components/contest/contest_sidebar.page.styl

@@ -19,3 +19,26 @@
 
   .contest-sidebar__status
     margin-top: rem(20px)
+
+.contest-attend-dialog__modes
+  display: grid
+  grid-template-columns: repeat(2, minmax(0, 1fr))
+  gap: rem(10px)
+  margin-bottom: rem(12px)
+
+  .button
+    margin-bottom: 0
+    text-align: center
+    white-space: normal
+
+  +mobile()
+    grid-template-columns: 1fr
+
+.contest-attend-dialog__hint
+  margin-bottom: rem(12px)
+
+.contest-attend-dialog__desc
+  margin: rem(4px) 0 rem(12px)
+
+.contest-attend-dialog__team-select
+  margin-top: rem(12px)