<commit_before><template>

  <div>
    <h2>{{ group.name }}</h2>
    <!--TODO: Fix this-->
    <span v-if="group.users">{{ $tr('numLearners', {count: group.users.length }) }}</span>
    <span v-else>{{ $tr('numLearners', {count: 0 }) }}</span>
    <!--0 selected-->
    <icon-button :text="$tr('moveLearners')"
      :primary="true"
      size="small"
      @click="moveUsers" />
    <ui-button v-if="showMenu"
      color="primary"
      :has-dropdown="true"
      ref="dropdownButton"
      size="small">
      <ui-menu slot="dropdown"
        :options="menuOptions"
        @select="handleSelection"
        @close="close" />
    </ui-button>
  </div>

</template>


<script>

  const actions = require('../../actions');

  module.exports = {
    $trNameSpace: 'coachGroupsTable',
    $trs: {
      numLearners: '{count, number, integer} {count, plural, one {Learner} other {Learners}}',
      moveLearners: 'Move Learners',
      renameGroup: 'Rename Group',
      deleteGroup: 'Delete Group',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'ui-button': require('keen-ui/src/UiButton'),
      'ui-menu': require('keen-ui/src/UiMenu'),
    },
    props: {
      group: {
        type: Object,
        required: true,
      },
      className: {
        type: String,
        required: true,
      },
      classId: {
        type: String,
        required: true,
      },
      showMenu: {
        type: Boolean,
        default: true,
      },
    },
    computed: {
      menuOptions() {
        return [{ label: this.$tr('renameGroup') }, { label: this.$tr('deleteGroup') }];
      },

    },
    methods: {
      handleSelection(selectedOption) {
        switch (selectedOption.label) {
          case (this.$tr('renameGroup')):
            this.$emit('rename', this.group.name, this.group.id);
            break;
          case (this.$tr('deleteGroup')):
            this.$emit('delete', this.group.name, this.group.id);
            break;
          default:
            break;
        }
      },
      moveUsers() {
        console.log('move users');
      },
      close() {
        this.$refs.dropdownButton.closeDropdown();
      },
    },
    vuex: {
      getters: {
        modalShown: state => state.pageState.modalShown,
      },
      actions: {
        displayModal: actions.displayModal,
      },
    },
  };

</script>


<style lang="stylus"
  scoped></style><commit_msg>Select group users.<commit_after><template>

  <div>
    <h2>{{ group.name }}</h2>
    <!--TODO: Fix this-->
    <span v-if="group.users">{{ $tr('numLearners', {count: group.users.length }) }}</span>
    <span v-else>{{ $tr('numLearners', {count: 0 }) }}</span>
    <!--0 selected-->
    <icon-button :text="$tr('moveLearners')"
      :primary="true"
      size="small"
      @click="moveUsers"
      :disabled="selectedUsers.length === 0" />
    <ui-button v-if="showMenu"
      color="primary"
      :has-dropdown="true"
      ref="dropdownButton"
      size="small">
      <ui-menu slot="dropdown"
        :options="menuOptions"
        @select="handleSelection"
        @close="close" />
    </ui-button>

    <table>
      <thead>
        <tr>
          <th>
            <input type="checkbox"
              :checked="allUsersAreSelected"
              @change="toggleSelectAll">
          </th>
          <th>{{ $tr('name') }}</th>
          <th>{{ $tr('username') }}</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="user in group.users"
          :class="isSelected(user.id) ? 'selectedrow' : ''"
          @click="toggleSelection(user.id)">
          <td class="col-checkbox">
            <input type="checkbox"
              :id="user.id"
              :value="user.id"
              v-model="selectedUsers">
          </td>
          <td class="col-name"><strong>{{ user.full_name }}</strong></td>
          <td class="col-username">{{ user.username }}</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>


<script>

  const actions = require('../../actions');

  module.exports = {
    $trNameSpace: 'coachGroupsTable',
    $trs: {
      numLearners: '{count, number, integer} {count, plural, one {Learner} other {Learners}}',
      moveLearners: 'Move Learners',
      renameGroup: 'Rename Group',
      deleteGroup: 'Delete Group',
      name: 'Name',
      username: 'Username',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
      'ui-button': require('keen-ui/src/UiButton'),
      'ui-menu': require('keen-ui/src/UiMenu'),
    },
    props: {
      group: {
        type: Object,
        required: true,
      },
      className: {
        type: String,
        required: true,
      },
      classId: {
        type: String,
        required: true,
      },
      showMenu: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        selectedUsers: [],
      };
    },
    computed: {
      menuOptions() {
        return [{ label: this.$tr('renameGroup') }, { label: this.$tr('deleteGroup') }];
      },
      allUsersAreSelected() {
        return (this.group.users.length === this.selectedUsers.length)
          && (this.selectedUsers.length !== 0);
      },
    },
    methods: {
      handleSelection(selectedOption) {
        switch (selectedOption.label) {
          case (this.$tr('renameGroup')):
            this.$emit('rename', this.group.name, this.group.id);
            break;
          case (this.$tr('deleteGroup')):
            this.$emit('delete', this.group.name, this.group.id);
            break;
          default:
            break;
        }
      },
      moveUsers() {
        console.log('move users');
      },
      close() {
        this.$refs.dropdownButton.closeDropdown();
      },
      isSelected(userId) {
        return this.selectedUsers.includes(userId);
      },
      toggleSelection(userId) {
        const index = this.selectedUsers.indexOf(userId);
        if (index === -1) {
          this.selectedUsers.push(userId);
        } else {
          this.selectedUsers.splice(index, 1);
        }
      },
      toggleSelectAll() {
        if (this.allUsersAreSelected) {
          this.selectedUsers = [];
        } else {
          this.selectedUsers = this.group.users.map((user) => user.id);
        }
      },
    },
    vuex: {
      getters: {
        modalShown: state => state.pageState.modalShown,
      },
      actions: {
        displayModal: actions.displayModal,
      },
    },
  };

</script>


<style lang="stylus"
  scoped></style>
{'fraction_non_alphanumeric': 0.17395928289273777, 'fraction_numerical': 0.0018231540565177757, 'mean_word_length': 1.9231793960923624, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 72, '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': '3140253', 'n_tokens_mistral': 2070, 'n_tokens_neox': 2038, 'n_words': 358}