<commit_before><template>

  <div>
    <!-- TODO convert to template for reusability w/in respective pages -->
    <confirm-enrollment-modal
      v-if="showConfirmEnrollmentModal"
      :className="className"
      :classId="classId"
      :selectedUsers="selectedUsers"
    />

    <h1>{{ $tr('selectLearners', { className }) }}</h1>
    <p>{{ $tr('showingAllUnassigned') }}</p>

    <p v-if="facilityUsers.length === 0">{{ $tr('noUsersExist') }}</p>

    <p v-else-if="usersNotInClass.length === 0">{{ $tr('allUsersAlready') }}</p>

    <div v-else>

      <div class="actions-header">
        <!-- TODO align right -->
        <k-filter-textbox
          class="filter"
          :class="{ 'invisible' : showSelectedUsers }"
          :placeholder="$tr('searchForUser')"
          v-model.trim="filterInput"
          @input="pageNum = 1"
        />
      </div>
      <core-table>
        <thead slot="thead">
          <tr>
            <th class="core-table-checkbox-col">
              <k-checkbox
                :label="$tr('selectAllOnPage')"
                :showLabel="false"
                :checked="selectAllIsChecked"
                :disabled="visibleFilteredUsers.length === 0 || showSelectedUsers"
                @change="toggleAllVisibleUsers"
              />
            </th>
            <th class="core-table-main-col">{{ $tr('username') }}</th>
            <th>{{ $tr('role') }}</th>
            <th>{{ $tr('name') }}</th>
          </tr>
        </thead>

        <tbody
          slot="tbody"
          name="row"
          is="transition-group"
          class="core-table-rows-selectable"
        >

          <tr
            v-for="learner in visibleFilteredUsers"
            :class="isSelected(learner.id) ? 'core-table-row-selected' : ''"
            @click="toggleSelection(learner.id)"
            :key="learner.id"
          >
            <td class="core-table-checkbox-col">
              <k-checkbox
                :label="$tr('selectUser')"
                :showLabel="false"
                :checked="isSelected(learner.id)"
                @change="toggleSelection(learner.id)"
                @click.native.stop
              />
            </td>
            <th class="core-table-main-col">{{ learner.username }}</th>
            <td>{{ learner.kind }}</td>
            <td>{{ learner.full_name }}</td>
          </tr>
        </tbody>
      </core-table>

      <p v-if="filteredUsers.length === 0 && showSelectedUsers">{{ $tr('noUsersSelected') }}</p>
      <p v-if="filteredUsers.length === 0 && filterInput !== ''">
        {{ $tr('noUsersMatch') }} <strong>"{{ filterInput }}"</strong>
      </p>

      <div class="pagination-footer">
        <span>
          {{ $tr('pagination', { visibleStartRange, visibleEndRange, numFilteredUsers }) }}
        </span>
        <nav>
          <ui-icon-button
            type="primary"
            :icon="isRtl? 'chevron_right' : 'chevron_left'"
            :ariaLabel="$tr('previousResults')"
            :disabled="pageNum === 1"
            size="small"
            @click="goToPage(pageNum - 1)"
          />
          <ui-icon-button
            type="primary"
            :icon="isRtl? 'chevron_left' : 'chevron_right'"
            :ariaLabel="$tr('nextResults')"
            :disabled="pageNum === numPages"
            size="small"
            @click="goToPage(pageNum + 1)"
          />
        </nav>
      </div>
    </div>

    <user-create-modal v-if="showCreateUserModal" />

    <!-- TODO align right -->
    <k-button
      :text="$tr('enrollSelectedUsers')"
      :primary="true"
      @click="openConfirmEnrollmentModal"
      :disabled="selectedUsers.length === 0"
    />


  </div>

</template>


<script>

  import { PageNames, Modals } from '../../constants';
  import { displayModal } from '../../state/actions';
  import differenceWith from 'lodash/differenceWith';
  import kGrid from 'kolibri.coreVue.components.kGrid';
  import kGridItem from 'kolibri.coreVue.components.kGridItem';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
  import orderBy from 'lodash/orderBy';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kRouterLink from 'kolibri.coreVue.components.kRouterLink';
  import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
  import uiIconButton from 'keen-ui/src/UiIconButton';
  import uiIcon from 'keen-ui/src/UiIcon';
  import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
  import userCreateModal from '../user-page/user-create-modal';
  import confirmEnrollmentModal from './confirm-enrollment-modal';
  import userRole from '../user-role';
  import coreTable from 'kolibri.coreVue.components.coreTable';

  export default {
    name: 'managementClassEnroll',
    components: {
      kButton,
      kRouterLink,
      kCheckbox,
      uiIconButton,
      uiIcon,
      kFilterTextbox,
      kGrid,
      kGridItem,
      userCreateModal,
      confirmEnrollmentModal,
      userRole,
      coreTable,
    },
    mixins: [responsiveWindow],
    $trs: {
      // TODO kill
      backToClassDetails: 'Back to class details',
      // TODO kill
      enrollSelectedUsers: 'Review & save',
      confirmSelectionButtonLabel: 'Confirm',
      selectLearners: 'Select users to enroll in {className}',
      showingAllUnassigned: 'Showing all users currently not enrolled in this class',
      searchForUser: 'Search for a user',
      createNewUser: 'New user account',
      userIconColumnHeader: 'User Icon',
      name: 'Full name',
      username: 'Username',
      userTableLabel: 'User List',
      selectedUsers: 'Show selected users',
      role: 'Role',
      noUsersExist: 'No users exist',
      noUsersSelected: 'No users are selected',
      noUsersMatch: 'No users match',
      previousResults: 'Previous results',
      nextResults: 'Next results',
      selectAllOnPage: 'Select all on page',
      allUsersAlready: 'All users are already enrolled in this class',
      search: 'Search',<commit_msg>plug in reusable user-table to enroll-page<commit_after><template>

  <div>
    <!-- TODO convert to template for reusability w/in respective pages -->
    <confirm-enrollment-modal
      v-if="showConfirmEnrollmentModal"
      :className="className"
      :classId="classId"
      :selectedUsers="selectedUsers"
    />

    <h1>{{ $tr('selectLearners', { className }) }}</h1>
    <p>{{ $tr('showingAllUnassigned') }}</p>

    <p v-if="facilityUsers.length === 0">{{ $tr('noUsersExist') }}</p>

    <p v-else-if="usersNotInClass.length === 0">{{ $tr('allUsersAlready') }}</p>

    <div v-else>

      <div class="actions-header">
        <!-- TODO align right -->
        <k-filter-textbox
          class="filter"
          :class="{ 'invisible' : showSelectedUsers }"
          :placeholder="$tr('searchForUser')"
          v-model.trim="filterInput"
          @input="pageNum = 1"
        />
      </div>


      <user-table
        v-model="selectedUsers"
        :users="visibleFilteredUsers"
        :title="$tr('userTableLabel')"
        :selectable="true"
        :selectAllLabel="$tr('selectAllOnPage')"
        :userCheckboxLabel="$tr('selectUser')"
      />

      <p v-if="filteredUsers.length === 0 && showSelectedUsers">{{ $tr('noUsersSelected') }}</p>
      <p v-if="filteredUsers.length === 0 && filterInput !== ''">
        {{ $tr('noUsersMatch') }} <strong>"{{ filterInput }}"</strong>
      </p>

      <div class="pagination-footer">
        <span>
          {{ $tr('pagination', { visibleStartRange, visibleEndRange, numFilteredUsers }) }}
        </span>
        <nav>
          <ui-icon-button
            type="primary"
            :icon="isRtl? 'chevron_right' : 'chevron_left'"
            :ariaLabel="$tr('previousResults')"
            :disabled="pageNum === 1"
            size="small"
            @click="goToPage(pageNum - 1)"
          />
          <ui-icon-button
            type="primary"
            :icon="isRtl? 'chevron_left' : 'chevron_right'"
            :ariaLabel="$tr('nextResults')"
            :disabled="pageNum === numPages"
            size="small"
            @click="goToPage(pageNum + 1)"
          />
        </nav>
      </div>
    </div>

    <user-create-modal v-if="showCreateUserModal" />

    <!-- TODO align right -->
    <k-button
      :text="$tr('enrollSelectedUsers')"
      :primary="true"
      @click="openConfirmEnrollmentModal"
      :disabled="selectedUsers.length === 0"
    />


  </div>

</template>


<script>

  import { PageNames, Modals } from '../../constants';
  import { displayModal } from '../../state/actions';
  import differenceWith from 'lodash/differenceWith';
  // TODO move to higher level directory after string freeze
  import userTable from '../class-edit-page/user-table';
  import kGrid from 'kolibri.coreVue.components.kGrid';
  import kGridItem from 'kolibri.coreVue.components.kGridItem';
  import responsiveWindow from 'kolibri.coreVue.mixins.responsiveWindow';
  import orderBy from 'lodash/orderBy';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kRouterLink from 'kolibri.coreVue.components.kRouterLink';
  import kCheckbox from 'kolibri.coreVue.components.kCheckbox';
  import uiIconButton from 'keen-ui/src/UiIconButton';
  import uiIcon from 'keen-ui/src/UiIcon';
  import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
  import userCreateModal from '../user-page/user-create-modal';
  import confirmEnrollmentModal from './confirm-enrollment-modal';
  import userRole from '../user-role';

  export default {
    name: 'managementClassEnroll',
    components: {
      kButton,
      kRouterLink,
      kCheckbox,
      uiIconButton,
      uiIcon,
      kFilterTextbox,
      kGrid,
      kGridItem,
      userCreateModal,
      confirmEnrollmentModal,
      userRole,
      userTable,
    },
    mixins: [responsiveWindow],
    $trs: {
      // TODO kill
      backToClassDetails: 'Back to class details',
      // TODO kill
      enrollSelectedUsers: 'Review & save',
      confirmSelectionButtonLabel: 'Confirm',
      selectLearners: 'Select users to enroll in {className}',
      showingAllUnassigned: 'Showing all users currently not enrolled in this class',
      searchForUser: 'Search for a user',
      createNewUser: 'New user account',
      userIconColumnHeader: 'User Icon',
      name: '<NAME>',
      username: 'Username',
      userTableLabel: 'User List',
      selectedUsers: 'Show selected users',
      role: 'Role',
      noUsersExist: 'No users exist',
      noUsersSelected: 'No users are selected',
      noUsersMatch: 'No users match',
      previousResults: 'Previous results',
      nextResults: 'Next results',
      selectAllOnPage: 'Select all on page',
      allUsersAlready: 'All users are already enrolled in this class',
      search: 'Search',
{'fraction_non_alphanumeric': 0.1468770181751084, 'fraction_numerical': 0.0021219669711227975, 'mean_word_length': 2.433639531200507, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 109, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6081313', 'n_tokens_mistral': 3306, 'n_tokens_neox': 3225, 'n_words': 669}