<commit_before><template>

  <div class="user-roster">

    <!-- TODO use grid -->

    <div
      id="name-edit-box"
      @click="displayModal(Modals.EDIT_CLASS_NAME)"
    >
      <div
        id="edit-name"
        class="name-edit"
      >
        {{ currentClass.name }}
      </div>
      <mat-svg
        id="edit-icon"
        class="name-edit"
        category="image"
        name="edit"
        aria-hidden="true"
      />
    </div>

    <h2 class="header">
      {{ $tr('coachEnrollmentPageTitle') }}
    </h2>

    <div class="toolbar">
      <div class="enroll">
        <k-router-link
          :text="$tr('assignCoachesButtonLabel')"
          :to="coachAssignmentLink(currentClass.id)"
          appearance="raised-button"
        />
        <k-router-link
          :text="$tr('enrollLearnerButtonLabel')"
          :to="learnerEnrollmentLink(currentClass.id)"
          :primary="true"
          appearance="raised-button"
        />
      </div>
    </div>

    <!-- Modals -->
    <class-rename-modal
      v-if="modalShown===Modals.EDIT_CLASS_NAME"
      :classname="currentClass.name"
      :classid="currentClass.id"
      :classes="classes"
    />

    <user-remove-modal
      v-if="modalShown===Modals.REMOVE_USER"
      :classname="currentClass.name"
      :classid="currentClass.id"
      :username="userToBeRemoved.username"
      :userid="userToBeRemoved.id"
    />

    <user-table
      :title="$tr('coachTableTitle')"
      :users="classCoaches"
      :emptyMessage="$tr('noCoachesInClassMessge')"
    >
      <!-- Don't need template in Vue 2.5+ -->
      <template slot="action" slot-scope="userRow">
        <k-button
          :text="$tr('remove')"
          @click="openRemoveUserModal(userRow.user)"
        />
      </template>
    </user-table>

    <user-table
      :title="$tr('learnerTableTitle')"
      :users="classLearners"
      :emptyMessage="$tr('noLearnersInClassMessage')"
    >
      <template slot="action" slot-scope="userRow">
        <k-button
          :text="$tr('remove')"
          @click="openRemoveUserModal(userRow.user)"
        />
      </template>
    </user-table>
  </div>

</template>


<script>

  import userTable from './user-table';
  import { PageNames, Modals } from '../../constants';
  import { UserKinds } from 'kolibri.coreVue.vuex.constants';
  import { displayModal } from '../../state/actions';
  import classRenameModal from './class-rename-modal';
  import userRemoveModal from './user-remove-modal';
  import kRouterLink from 'kolibri.coreVue.components.kRouterLink';
  import kButton from 'kolibri.coreVue.components.kButton';

  export default {
    // QUESTION update component name?
    name: 'classEnrollForm',
    $trs: {
      // TODO kill
      enrollUsers: 'Enroll users ',
      enrollLearnerButtonLabel: 'Enroll learners',
      assignCoachesButtonLabel: 'Assign coaches',
      // TODO kill
      tableTitle: 'Manage users in this class',
      coachEnrollmentPageTitle: 'Manage class coaches and learners',
      // TODO kill | deprecated
      users: 'Users',
      coachTableTitle: 'Coaches',
      learnerTableTitle: 'Learners',
      noCoachesInClassMessge: "You don't have any assigned coaches",
      noLearnersInClassMessage: "You don't have any enrolled learners",
      userIconColumnHeader: 'User icon',
      fullName: '<NAME>',
      username: 'Username',
      role: 'Role',
      userActionsColumnHeader: 'Actions',
      remove: 'Remove',
      noUsersExist: 'No users in this class',
      userActions: 'User management actions',
    },
    components: {
      userTable,
      classRenameModal,
      userRemoveModal,
      kRouterLink,
      kButton,
    },
    data: () => ({
      userToBeRemoved: null,
    }),
    computed: {
      LEARNER: () => UserKinds.LEARNER,
      COACH: () => UserKinds.COACH,
      Modals: () => Modals,
    },
    methods: {
      openRemoveUserModal(user) {
        this.userToBeRemoved = user;
        this.displayModal(Modals.REMOVE_USER);
      },
      learnerEnrollmentLink(classId) {
        return {
          name: PageNames.CLASS_ENROLL_LEARNER,
          params: { classId },
        };
      },
      coachAssignmentLink(classId) {
        return {
          name: PageNames.CLASS_ASSIGN_COACH,
          params: { classId },
        };
      },
    },
    vuex: {
      getters: {
        classLearners: state => state.pageState.classLearners,
        classCoaches: state => state.pageState.classCoaches,
        classes: state => state.pageState.classes,
        currentClass: state => state.pageState.currentClass,
        modalShown: state => state.pageState.modalShown,
        noUsersInClass: state => state.pageState.classLearners.length === 0,
      },<commit_msg>Clean up class-edit-page logic + components.<commit_after><template>

  <div class="user-roster">

    <!-- TODO use grid -->

    <div
      id="name-edit-box"
      @click="displayModal(Modals.EDIT_CLASS_NAME)"
    >
      <div
        id="edit-name"
        class="name-edit"
      >
        {{ currentClass.name }}
      </div>
      <mat-svg
        id="edit-icon"
        class="name-edit"
        category="image"
        name="edit"
        aria-hidden="true"
      />
    </div>

    <h2 class="header">
      {{ $tr('coachEnrollmentPageTitle') }}
    </h2>

    <div class="toolbar">
      <div class="enroll">
        <k-router-link
          :text="$tr('assignCoachesButtonLabel')"
          :to="coachAssignmentLink"
          appearance="raised-button"
        />
        <k-router-link
          :text="$tr('enrollLearnerButtonLabel')"
          :to="learnerEnrollmentLink"
          :primary="true"
          appearance="raised-button"
        />
      </div>
    </div>

    <!-- Modals -->
    <class-rename-modal
      v-if="modalShown===Modals.EDIT_CLASS_NAME"
      :classname="currentClass.name"
      :classid="currentClass.id"
      :classes="classes"
    />

    <user-remove-modal
      v-if="modalShown===Modals.REMOVE_USER"
      :classname="currentClass.name"
      :classid="currentClass.id"
      :username="userToBeRemoved.username"
      :userid="userToBeRemoved.id"
    />

    <user-table
      :title="$tr('coachTableTitle')"
      :users="classCoaches"
      :emptyMessage="$tr('noCoachesInClassMessge')"
    >
      <!-- Don't need template in Vue 2.5+ -->
      <template slot="action" slot-scope="userRow">
        <k-button
          :text="$tr('remove')"
          @click="openRemoveUserModal(userRow.user)"
        />
      </template>
    </user-table>

    <user-table
      :title="$tr('learnerTableTitle')"
      :users="classLearners"
      :emptyMessage="$tr('noLearnersInClassMessage')"
    >
      <template slot="action" slot-scope="userRow">
        <k-button
          :text="$tr('remove')"
          @click="openRemoveUserModal(userRow.user)"
        />
      </template>
    </user-table>
  </div>

</template>


<script>

  import userTable from './user-table';
  import { PageNames, Modals } from '../../constants';
  import { displayModal } from '../../state/actions';
  import classRenameModal from './class-rename-modal';
  import userRemoveModal from './user-remove-modal';
  import kRouterLink from 'kolibri.coreVue.components.kRouterLink';
  import kButton from 'kolibri.coreVue.components.kButton';

  export default {
    // QUESTION update component name?
    name: 'classEnrollForm',
    $trs: {
      enrollLearnerButtonLabel: 'Enroll learners',
      assignCoachesButtonLabel: 'Assign coaches',
      coachEnrollmentPageTitle: 'Manage class coaches and learners',
      coachTableTitle: 'Coaches',
      learnerTableTitle: 'Learners',
      noCoachesInClassMessge: "You don't have any assigned coaches",
      noLearnersInClassMessage: "You don't have any enrolled learners",
      remove: 'Remove',
      noUsersExist: 'No users in this class',
    },
    components: {
      userTable,
      classRenameModal,
      userRemoveModal,
      kRouterLink,
      kButton,
    },
    data() {
      return {
        userToBeRemoved: null,
      };
    },
    computed: {
      Modals() {
        return Modals;
      },
      learnerEnrollmentLink() {
        return {
          name: PageNames.CLASS_ENROLL_LEARNER,
        };
      },
      coachAssignmentLink() {
        return {
          name: PageNames.CLASS_ASSIGN_COACH,
        };
      },
    },
    methods: {
      openRemoveUserModal(user) {
        this.userToBeRemoved = user;
        this.displayModal(Modals.REMOVE_USER);
      },
    },
    vuex: {
      getters: {
        classLearners: state => state.pageState.classLearners,
        classCoaches: state => state.pageState.classCoaches,
        classes: state => state.pageState.classes,
        currentClass: state => state.pageState.currentClass,
        modalShown: state => state.pageState.modalShown,
      },
{'fraction_non_alphanumeric': 0.14088491569537173, 'fraction_numerical': 0.0010184451737014824, 'mean_word_length': 2.3213077790304397, 'pattern_counts': {'":': 0, '<': 70, '<?xml version=': 0, '>': 85, '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': '3023574', 'n_tokens_mistral': 2775, 'n_tokens_neox': 2746, 'n_words': 461}