<!--
 Program: WorkgroupListPopup.vue
 Author: SDL
 Description: popup page where you can view and select a list of workgroups
-->
<template>
  <div class="modal-dialog modal-dialog-centered  modal-dialog-scrollable modal-lg">
    <div class="modal-content" style="height:744px;">
      <!-- contents -->
      <div class="modal-header">
        <h5 class="modal-title h4">{{ $t('sdl.workGroup.label.heading') }} {{ $t('sdl.common.label.search') }}</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <!-- SEARCH Area -->
        <div class="ui--search-container clearfix">
          <div class="col-11 float-start">
            <div class="row">
              <div class="col-6">
                <div class="row">
                  <label class="col-4 col-form-label text-end">{{
                    $t('sdl.workGroup.label.heading')
                  }}</label>
                  <div class="col-8">
                    <input
                      type="text"
                      class="form-control"
                      v-model="searchParam.searchWorkgroupName"
                      @keyup.enter="getWorkgroupList()"
                      @keyup.esc="searchParam.searchWorkgroupName = ''"
                    />
                  </div>
                </div>
              </div>
              <div class="col-6">
                <div class="row">
                  <label class="col-4 col-form-label text-end">{{
                    $t('sdl.workGroup.label.workGroupName')
                  }}</label>
                  <div class="col-8">
                    <input
                      type="text"
                      class="form-control"
                      v-model="searchParam.searchLabel"
                      @keyup.enter="getWorkgroupList()"
                      @keyup.esc="searchParam.searchLabel = ''"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- search button -->
          <div class="col-1 float-end text-end">
            <button class="btn btn-primary btn-search" type="submit" @click="getWorkgroupList()">
              {{ $t('sdl.common.label.search') }}
            </button>
          </div>
        </div>
        <!-- TABLE  Area-->
        <table class="table table-bordered ui--table">
          <colgroup>
            <col style="width:3%" />
            <col style="width:27%" />
            <col style="width:30%" />
            <col style="width:40%" />
          </colgroup>
          <thead>
            <tr>
              <th scope="col">
                <input type="checkbox" @click.stop v-model="selectAll" @change="toggleSelectAll" />
              </th>
              <th scope="col">{{ $t('sdl.workGroup.label.heading') }}</th>
              <th scope="col">{{ $t('sdl.workGroup.label.workGroupName') }}</th>
              <th scope="col">{{ $t('sdl.common.label.description') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="workgroup in workgroupList" :key="workgroup.workgroupId">
              <td class="text-center">
                <input type="checkbox" v-model="workgroup.selected" @change="checkBoxClick(workgroup)" />
              </td>
              <td class="text-left">{{ workgroup.workgroupName }}</td>
              <td class="text-left">{{ getLabel(workgroup) }}</td>
              <td class="text-left">{{ workgroup.description }}</td>
            </tr>
          </tbody>
        </table>
        <!-- TABLE  Area-->
        <!-- Pagination  Area-->
        <sdl-pagination
          :current-page="current_page"
          :total-rows="total"
          :per-page="per_page"
          @change="handleCurrentChange"
          align="center"
        />
        <!-- Pagination  Area-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.cancel') }}
        </button>
        <button type="button" class="btn btn-primary" @click="rtnData">{{ $t('sdl.common.label.confirm') }}</button>
      </div>
      <!-- // contents -->
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil, StringUtil } from '@/utils';
import SDLLocale from '@/mixin/SDLLocale';

export default {
  mixins: [SDLLocale],
  data() {
    return {
      searchParam: {
        searchWorkgroupName: '',
        searchLabel: '',
      },
      selectAll: false,
      per_page: null,
      current_page: null,
      total: null,
      workgroupList: [],
    };
  },
  props: {
    searchWorkgroupName: {
      required: false,
      type: String,
    },
    searchLabel: {
      required: false,
      type: String,
    },
    rtnFunc: {
      type: Function,
    },
  },
  methods: {
    /**
     * param: object
     * return: nothing
     * exception: nothing
     * description: Select check box in the list of workgroups
     */
    checkBoxClick(item) {
      if (!item.selected) {
        if (this.selectAll) {
          this.selectAll = false;
        }
      }
    },
    /**
     * param: nothing
     * return: nothing
     * exception: nothing
     * description: Select All
     */
    toggleSelectAll() {
      if (this.workgroupList.length > 0) {
        this.workgroupList.forEach(item => {
          item.selected = this.selectAll;
        });
      }
    },
    /**
     * param: number
     * return: nothing
     * exception: Call error alert
     * description: Look up the list of workgroups
     */
    getWorkgroupList(pageIndex = 1) {
      // Set the page number sent to the current page number
      this.current_page = pageIndex;

      // Launch Loading bar
      SDLUtil.showLoadingBar(true);

      /**
       * Set parameters to query the list of workgroups
       */
      const params = {
        orderBy: 'WORKGROUP_NAME',
        workgroupName: this.searchParam.searchWorkgroupName,
        label: this.searchParam.searchLabel,
        pageIndex: this.current_page,
        pageSize: this.per_page,
      };

      /**
       * Call workgroup list lookup API
       */
      axios
        .get(`${SDLUtil.API_URL}/auth/workgroups-with-paging?${StringUtil.queryStringfy(params)}`)
        .then(({ data }) => {
          this.workgroupList = data.rows;
          // Apply the page number that was retrieved to the current_page
          this.current_page = data.currentPage;
          // Full Row Count
          this.total = data.records;

          // Remove Loading bar
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          // Remove Loading bar
          SDLUtil.showLoadingBar(false);
          // Call error alert
          SDLUtil.errorAlert(err);
        });

      this.selectAll = false;
    },
    /**
     * param: number
     * return: nothing
     * exception: nothing
     * description: paging
     */
    handleCurrentChange(currentPage) {
      // Calling up a function that queries the list of workgroups
      this.getWorkgroupList(currentPage);
    },
    /**
     * param: nothing
     * return: nothing
     * exception: nothing
     * description: Forward selected list to call page via function
     */
    rtnData() {
      const selectWorkgroup = this.workgroupList.filter(workgroupItem => workgroupItem.selected);

      this.rtnFunc(selectWorkgroup);
      this.$emit('close');
    },
  },
  created() {
    // Page size - 10 settings
    this.per_page = 10;

    if (this.searchWorkgroupName !== null && this.searchWorkgroupName !== undefined) {
      this.searchParam.searchWorkgroupName = this.searchWorkgroupName;
    }

    if (this.searchLabel !== null && this.searchLabel !== undefined) {
      this.searchParam.searchLabel = this.searchLabel;
    }

    // Calling up a function that queries the list of workgroups
    this.getWorkgroupList();
  },
};
</script>
<style></style>
