<commit_before><template>

  <div class="user-roster">

    <div class="header">
      <h1>{{ $tr('allUsers') }}</h1>
      <span> ( {{ $formatNumber(visibleUsers.length) }} ) </span>
    </div>

    <div class="toolbar">
      <div class="create">
        <k-button
          @click="displayModal(Modals.CREATE_USER)"
          :text="$tr('addNew')"
          :primary="true"
        />
      </div>

      <k-select
        class="kind-select"
        :label="$tr('filterUserType')"
        :options="userKinds"
        :inline="true"
        v-model="roleFilter"
      />

      <k-filter-textbox
        :placeholder="$tr('searchText')"
        v-model="searchFilter"
        class="user-filter"
      />
    </div>

    <user-table
      :users="visibleUsers"
      :emptyMessage="emptyMessage"
    >
      <template slot="action" slot-scope="userRow">
        <k-dropdown-menu
          :text="$tr('manage')"
          :options="manageUserOptions(userRow.user.id)"
          :disabled="!userCanBeEdited(userRow.user)"
          appearance="flat-button"
          @select="handleManageUserSelection($event, userRow.user)"
        />
      </template>
    </user-table>

    <!-- Modals -->
    <user-create-modal v-if="modalShown===Modals.CREATE_USER" />

    <edit-user-modal
      v-if="modalShown===Modals.EDIT_USER"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
      :kind="selectedUser.kind"
    />

    <reset-user-password-modal
      v-if="modalShown===Modals.RESET_USER_PASSWORD"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
    />

    <delete-user-modal
      v-if="modalShown===Modals.DELETE_USER"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
    />

  </div>

</template>


<script>

  import userTable from '../user-table';
  import UiIcon from 'keen-ui/src/UiIcon';
  import { Modals } from '../../constants';
  import { displayModal } from '../../state/actions';
  import { UserKinds } from 'kolibri.coreVue.vuex.constants';
  import userCreateModal from './user-create-modal';
  import editUserModal from './edit-user-modal';
  import resetUserPasswordModal from './reset-user-password-modal';
  import deleteUserModal from './delete-user-modal';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
  import kDropdownMenu from 'kolibri.coreVue.components.kDropdownMenu';
  import userRole from '../user-role';
  import { userMatchesFilter, filterAndSortUsers } from '../../userSearchUtils';
  import { currentUserId, isSuperuser } from 'kolibri.coreVue.vuex.getters';
  import kSelect from 'kolibri.coreVue.components.kSelect';

  const ALL_FILTER = 'all';

  export default {
    name: 'userPage',
    components: {
      userCreateModal,
      editUserModal,
      resetUserPasswordModal,
      deleteUserModal,
      kButton,
      kFilterTextbox,
      kDropdownMenu,
      userRole,
      kSelect,
      userTable,
      UiIcon,
    },
    data: () => ({
      searchFilter: '',
      roleFilter: null,
      selectedUser: null,
    }),
    computed: {
      Modals: () => Modals,
      userKinds() {
        return [
          { label: this.$tr('allUsers'), value: ALL_FILTER },
          { label: this.$tr('learners'), value: UserKinds.LEARNER },
          { label: this.$tr('coaches'), value: UserKinds.COACH },
          { label: this.$tr('admins'), value: UserKinds.ADMIN },
        ];
      },
      visibleUsers() {
        return filterAndSortUsers(
          this.facilityUsers,
          user => userMatchesFilter(user, this.searchFilter) && this.userMatchesRole(user)
        );
      },
      emptyMessage() {
        if (this.facilityUsers.length === 0) {
          return this.$tr('noUsersExist');
        } else if (this.visibleUsers.length === 0) {
          return this.$tr('allUsersFilteredOut');
        }
        return '';
      },
    },
    beforeMount() {
      this.roleFilter = this.userKinds[0];
    },
    methods: {
      userMatchesRole(user) {
        const { value } = this.roleFilter;
        return value === ALL_FILTER || user.kind === value;
      },
      manageUserOptions(userId) {
        return [
          { label: this.$tr('editUser'), value: Modals.EDIT_USER },
          { label: this.$tr('resetUserPassword'), value: Modals.RESET_USER_PASSWORD },
          {
            label: this.$tr('deleteUser'),
            value: Modals.DELETE_USER,
            disabled: userId === this.currentUserId,
          },<commit_msg>Fixing filter in user list. Now includes assignable_coaches<commit_after><template>

  <div class="user-roster">

    <div class="header">
      <h1>{{ $tr('allUsers') }}</h1>
      <span> ( {{ $formatNumber(visibleUsers.length) }} ) </span>
    </div>

    <div class="toolbar">
      <div class="create">
        <k-button
          @click="displayModal(Modals.CREATE_USER)"
          :text="$tr('addNew')"
          :primary="true"
        />
      </div>

      <k-select
        class="kind-select"
        :label="$tr('filterUserType')"
        :options="userKinds"
        :inline="true"
        v-model="roleFilter"
      />

      <k-filter-textbox
        :placeholder="$tr('searchText')"
        v-model="searchFilter"
        class="user-filter"
      />
    </div>

    <user-table
      :users="visibleUsers"
      :emptyMessage="emptyMessage"
    >
      <template slot="action" slot-scope="userRow">
        <k-dropdown-menu
          :text="$tr('manage')"
          :options="manageUserOptions(userRow.user.id)"
          :disabled="!userCanBeEdited(userRow.user)"
          appearance="flat-button"
          @select="handleManageUserSelection($event, userRow.user)"
        />
      </template>
    </user-table>

    <!-- Modals -->
    <user-create-modal v-if="modalShown===Modals.CREATE_USER" />

    <edit-user-modal
      v-if="modalShown===Modals.EDIT_USER"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
      :kind="selectedUser.kind"
    />

    <reset-user-password-modal
      v-if="modalShown===Modals.RESET_USER_PASSWORD"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
    />

    <delete-user-modal
      v-if="modalShown===Modals.DELETE_USER"
      :id="selectedUser.id"
      :name="selectedUser.full_name"
      :username="selectedUser.username"
    />

  </div>

</template>


<script>

  import userTable from '../user-table';
  import UiIcon from 'keen-ui/src/UiIcon';
  import { Modals } from '../../constants';
  import { displayModal } from '../../state/actions';
  import { UserKinds } from 'kolibri.coreVue.vuex.constants';
  import userCreateModal from './user-create-modal';
  import editUserModal from './edit-user-modal';
  import resetUserPasswordModal from './reset-user-password-modal';
  import deleteUserModal from './delete-user-modal';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kFilterTextbox from 'kolibri.coreVue.components.kFilterTextbox';
  import kDropdownMenu from 'kolibri.coreVue.components.kDropdownMenu';
  import userRole from '../user-role';
  import { userMatchesFilter, filterAndSortUsers } from '../../userSearchUtils';
  import { currentUserId, isSuperuser } from 'kolibri.coreVue.vuex.getters';
  import kSelect from 'kolibri.coreVue.components.kSelect';

  const ALL_FILTER = 'all';

  export default {
    name: 'userPage',
    components: {
      userCreateModal,
      editUserModal,
      resetUserPasswordModal,
      deleteUserModal,
      kButton,
      kFilterTextbox,
      kDropdownMenu,
      userRole,
      kSelect,
      userTable,
      UiIcon,
    },
    data: () => ({
      searchFilter: '',
      roleFilter: null,
      selectedUser: null,
    }),
    computed: {
      Modals: () => Modals,
      userKinds() {
        return [
          { label: this.$tr('allUsers'), value: ALL_FILTER },
          { label: this.$tr('learners'), value: UserKinds.LEARNER },
          { label: this.$tr('coaches'), value: UserKinds.COACH },
          { label: this.$tr('admins'), value: UserKinds.ADMIN },
        ];
      },
      visibleUsers() {
        return filterAndSortUsers(
          this.facilityUsers,
          user => userMatchesFilter(user, this.searchFilter) && this.userMatchesRole(user)
        );
      },
      emptyMessage() {
        if (this.facilityUsers.length === 0) {
          return this.$tr('noUsersExist');
        } else if (this.visibleUsers.length === 0) {
          return this.$tr('allUsersFilteredOut');
        }
        return '';
      },
    },
    beforeMount() {
      this.roleFilter = this.userKinds[0];
    },
    methods: {
      userMatchesRole(user) {
        const { value: filterKind } = this.roleFilter;
        if (filterKind === ALL_FILTER) {
          return true;
        }
        if (user.kind === UserKinds.ASSIGNABLE_COACH) {
          return filterKind === UserKinds.COACH;
        }
        return filterKind === user.kind;
      },
      manageUserOptions(userId) {
        return [
          { label: this.$tr('editUser'), value: Modals.EDIT_USER },
          { label: this.$tr('resetUserPassword'), value: Modals.RESET_USER_PASSWORD },
          {
            label: this.$tr('deleteUser'),
            value: Modals.DELETE_USER,
            disabled: userId === this.currentUserId,
          },
{'fraction_non_alphanumeric': 0.15030417453324943, 'fraction_numerical': 0.0010488777008600798, 'mean_word_length': 2.42124147829207, 'pattern_counts': {'":': 0, '<': 59, '<?xml version=': 0, '>': 65, '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': '18305', 'n_tokens_mistral': 2958, 'n_tokens_neox': 2948, 'n_words': 481}