<commit_before><template>
  <div>
    <drop-down v-ref:classroom-selector :list="classrooms" :selected.sync="selectedClassroom"></drop-down>
    <button v-on:click="addClassroom({name: 'foo'})">Create</button>
    <button>Delete</button>
  </div>
  <div>
    <drop-down v-ref:learner-group-selector :list="[]" :initial-selection=""></drop-down>
    <button>Create</button>
    <button>Delete</button>
  </div>
  <learner-roster v-ref:learner-roster :learners="[]"></learner-roster>
</template>


<script>
import learnerRoster from './learner-roster.vue';
import dropDown from './drop-down.vue';
import { addClassroom, setSelectedClassroomId } from './vuex/actions.js';
import { getClassrooms, getSelectedClassroomId } from './vuex/getters.js';

export default {
  components: {
    'learner-roster': learnerRoster,
    'drop-down': dropDown,
  },
  computed: {
    filters() {
      return {};
    },
    classrooms() {
      const _classrooms = [{
        id: null,
        name: 'All classrooms',
        learnerGroups: [],
      }];
      _classrooms.push(...this.getClassrooms);
      return _classrooms;
    },
    selectedClassroom: {
      get() {
        for (const classroom of this.classrooms) {
          if (classroom.id === this.getSelectedClassroomId) {
            return classroom;
          }
        }
        // Default value in case getSelectedClassroom is inconsistent
        return this.classrooms[0];
      },
      set({ id }) {
        this.setSelectedClassroomId(id);
      },
    },
  },
  vuex: {
    getters: {
      getClassrooms,
      getSelectedClassroomId,
    },
    actions: {
      addClassroom,
      setSelectedClassroomId,
    },
  },
};
</script><commit_msg>Filter learners by selected classroom<commit_after><template>
  <div>
    <drop-down v-ref:classroom-selector :list="classrooms" :selected.sync="selectedClassroom"></drop-down>
    <button v-on:click="addClassroom({name: 'foo'})">Create</button>
    <button>Delete</button>
  </div>
  <div>
    <drop-down v-ref:learner-group-selector :list="[]" :initial-selection=""></drop-down>
    <button>Create</button>
    <button>Delete</button>
  </div>
  <learner-roster v-ref:learner-roster :learners="filteredLearners"></learner-roster>
</template>


<script>
import learnerRoster from './learner-roster.vue';
import dropDown from './drop-down.vue';
import { addClassroom, setSelectedClassroomId } from './vuex/actions.js';
import { getClassrooms, getSelectedClassroomId } from './vuex/getters.js';
import { constants } from './vuex/store.js';

export default {
  components: {
    'learner-roster': learnerRoster,
    'drop-down': dropDown,
  },
  computed: {
    classrooms() {
      const _classrooms = [{
        id: constants.ALL_CLASSROOMS_ID,
        name: 'All classrooms',
        learnerGroups: [],
      }];
      _classrooms.push(...this.getClassrooms);
      return _classrooms;
    },
    selectedClassroom: {
      get() {
        for (const classroom of this.classrooms) {
          if (classroom.id === this.getSelectedClassroomId) {
            return classroom;
          }
        }
        // Default value in case getSelectedClassroom is inconsistent
        return this.classrooms[0];
      },
      set({ id }) {
        this.setSelectedClassroomId(id);
      },
    },
    filteredLearners() {
      const learners = this.$store.state.learners;
      let _learners = learners;
      if (this.selectedClassroom.id !== constants.ALL_CLASSROOMS_ID) {
        const learnerGroupIds = this.selectedClassroom.learnerGroups;
        const learnerIds = new Set();
        for (const group of this.$store.state.learnerGroups) {
          if (learnerGroupIds.indexOf(group.id) !== -1) {
            for (const learnerId of group.learners) {
              if (!learnerIds.has(learnerId)) {
                learnerIds.add(learnerId);
              }
            }
          }
        }

        _learners = [];
        for (const learner of learners) {
          if (learnerIds.has(learner.id)) {
            _learners.push(learner);
          }
        }
      }
      return _learners;
    },
  },
  vuex: {
    getters: {
      getClassrooms,
      getSelectedClassroomId,
    },
    actions: {
      addClassroom,
      setSelectedClassroomId,
    },
  },
};
</script>
{'fraction_non_alphanumeric': 0.14322429906542056, 'fraction_numerical': 0.0007009345794392523, 'mean_word_length': 2.5032733224222588, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, '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': '1361482', 'n_tokens_mistral': 1354, 'n_tokens_neox': 1342, 'n_words': 241}