paidholidaycalculation

<template>
    <b-container fluid>
        <b-row>
            <b-col md='12' align='right'>
                <b-button　variant="success" v-b-modal.registerModal class="ActionBtn"><icon class="icons" name="plus"></icon> 登録</b-button>
            </b-col>
            <b-col md='6' class='p-0' align="left">
                <b-col md='6' class='p-0'>
                    <b-input-group class='mt-2 mb-5'>
                        <b-form-input v-model="filter" placeholder="検索" />
                         <b-input-group-append>
                              <b-btn disabled><icon name="search" scale="1"> </icon></b-btn>
                          </b-input-group-append>
                    </b-input-group>
                </b-col>
            </b-col>
            <b-col md='6' align="right" class='p-0'>
                <b-form-group horizontal label="ページ" class="mb-5 mt-2">
                    <b-form-select :options="pageOptions" v-model="perPage" />
                </b-form-group>
            </b-col>
            <b-table hover outlined responsive bordered
                     v-bind:items="datas"
                     :fields="header"
                     :per-page="perPage"
                     :filter="filter"
                     @filtered="onFiltered"
                     :current-page="currentPage">
                <template slot="name" slot-scope="data">
                    {{data.value.first}} {{data.value.last}}
                </template>
                <template slot="actions" slot-scope="row">
                    <b-button v-b-modal.properties
                              size="sm"
                              @click.stop="info(row.item, row.index, $event.target)"
                              class="ActionBtn" variant="primary"><icon class="icons" name="search"></icon>
                              見る
                    </b-button>

                    <b-button v-b-modal.DisableModal size="sm"
                              @click.stop="info(row.item, row.index, $event.target);"
                              class="ActionBtn (row.item.deleted)"
                              v-bind:variant="row.item.deleted? 'success' : 'danger'">
                              <icon class="icons" v-bind:name="row.item.deleted? 'check' : 'times'"></icon> {{ (row.item.deleted) ? "Enable" : "削除" }}
                    </b-button>
                   </template>
            </b-table>
            <b-col md="6">
                <p>合計: {{totalRows}} 行</p>
            </b-col>
            <b-col md="6" class="">
                <b-pagination :total-rows="totalRows"
                              :per-page="perPage"
                              v-model="currentPage"
                              class="my-0"
                              align='right'/>
            </b-col>
        </b-row>

        <!-- EMPLOYEE REGISTRATION FORM MODAL -->
        <b-modal id="registerModal"
                 title="新規登録"
                 v-model="showRegistrationModal"
                 @show="clearRegistrationDatas"
                 @hide="clearRegistrationErrors"
                 centered>
            <b-form-group
                    horizontal
                    :label-cols="3"
                    breakpoint="md"
                    label="Eメール:">
                    <b-form-input :class="{errorInput: errorInput.emailError}"
                    v-model="registerDatas.email" name="email" type="email"></b-form-input>
                    <p class="ErrorMessage">{{ errorMessages.emailError }}</p>
            </b-form-group>
            <b-form-group
                    horizontal
                    :label-cols="3"
                    breakpoint="md"
                    label="パスワード:">
                    <b-form-input :class="{errorInput: errorInput.passwordError}"
                    v-model="registerDatas.password" name="password" type="password"></b-form-input>
                    <p class="ErrorMessage">{{ errorMessages.passwordError }}</p>
            </b-form-group>
            <b-form-group
                    horizontal
                    :label-cols="3"
                    breakpoint="md"
                    label="パスワード 2:">
                    <b-form-input :class="{errorInput: errorInput.password2Error}"
                    v-model="registerDatas.confirmPassword" name="password" type="password"></b-form-input>
                    <p class="ErrorMessage">{{ errorMessages.password2Error }}</p>
            </b-form-group>
            <b-form-group
                    horizontal
                    :label-cols="3"
                    breakpoint="md"
                    label="役割:">
            <b-form-select v-model="registerDatas.roles.id"
                           :class="{errorInput: errorInput.roleError}">
                <option :value="null" selected disabled>-- Select role --</option>
                <option v-for="item in items" :value="item.id">{{item.name}}</option>
            </b-form-select>
            <p class="ErrorMessage">{{ errorMessages.roleError }}</p>
          </b-form-group>
            <div class="" slot="modal-footer">
                <div>
                    <b-btn class="float-right ml-2 w-100px"
                           size="sm"
                           variant="danger"
                    	     @click="closeRegistrationModal"><icon class="icons" name="times"></icon> キャンセル
                    </b-btn>
                    <router-link @click.native="register" :to="goto">
                        <b-btn class="float-right w-100px"
                               variant="success"
                               size="sm">
                            <icon class="icons" name="check"></icon> 登録
                        </b-btn>
                    </router-link>
                </div>
            </div>
        </b-modal>

        <!-- EMPLOYEE FULL VIEW MODAL -->
        <b-modal size="md"
        		     id="properties"
                 itle="Information"
                 v-model="showInformationModal"
                 centered>
            <div id="propertiesBody">
                <b-form>
                    <div class="imageInfo">
                        <b-row class="imageInfoIn">
                            <b-img class="mb-4 mt-4"
                                   fluid
                                   center
                                   rounded="circle"
                    			         src="http://www.kkmm.gov.my/images/icon_copy_copy.png" />
                        </b-row>
                    </div>
                    <div class="bodyInfo pt-3 pb-4">
                        <div class="bodyInfoIn">
                            <b-row>
                                <h4 class="mb-4">{{ this.properties.username }}</h4>
                            </b-row>
                        </div>
                    </div>
                </b-form>
            </div>
            <div slot="modal-footer"
            	   class="w-100">
                <div class="p-1">
            		    <b-btn v-b-modal.DisableModal size="sm"
                    	 class="float-right w-200px"
                       @click="disable(); closeViewInfoModal()" variant="danger">
                    	 管理システム使用不可
                    </b-btn>
                    <b-btn size="sm" class="float-right mr-2 w-200px" variant="primary" v-on:click.once="getDataByEmail(properties.username)">
                        従業員情報詳細
                    </b-btn>
                </div>
        	  </div>
        </b-modal>
        <b-modal id="DisableModal"
            v-model="DisableModal"
            hide-footer
            no-close-on-backdrop
            title="使用不可">
            <div align="centered">
              <b-row>
                <b-col md='12' align="center">
                  <p>{{ this.properties.username }}を{{ (this.properties.disable == true) ? "有効" : "無効" }}にします、よろしいですか？</p>
                </b-col>
                <b-col md='12' align="center">
                  <p>Yesを押すと、当該ユーザはこの管理システムが使用できなくなります。</p>
                </b-col>
              </b-row>
              <b-row>
                <b-col md='12' align="center">
                  <b-btn variant="success" class="ActionBtn" @click="disable();"><icon class="icons" name="check"></icon> はい</b-btn>
                  <b-btn variant="danger" @click="hideModal"><icon class="icons" name="times"></icon> いいえ</b-btn>
                </b-col>
              </b-row>
            </div>
          </b-modal>
    </b-container>
</template>

<script>
    import User from '../assets/script/User'
    import Role from '../assets/script/Roles'
    import date from '../assets/fte/FTEDate'

    export default{
        props:{
          userdata: {
            type: String,
            default(){
              return null
            }
          },
        },
        data(){
            return{
                header:[
                	{key:'username',label:'ログイン名',sortable: true},
                  {key:'personalInfo.lastname_kanji',label:'姓',sortable: true},
                  {key:'personalInfo.firstname_kanji',label:'名',sortable: true},
                	{key:'created_at', formatter: (value, key, item) => { return date.getInstance(item.created_at).toISOString() }, label:'登録日',sortable: true},
                	{key:'updated_at', formatter: (value, key, item) => { return date.getInstance(item.updated_at).toISOString() }, label:'更新日',sortable: false},
                	{ key: 'actions', label: 'アクション' }
                ],
                datas: [],
                perPage: 10,
                currentPage: 1,
                pageOptions:[10,25,50,100],
                totalRows: 0,
                filter: null,
                enableDisabled: "削除",

                items: [],

                registerDatas: { email: '',
                                 password: '',
                                 confirmPassword: '',
                                 roles: [ { id: '' } ]
                               },
                properties: {
                              index: '',
                              id: '',
                              created_at: '',
                              created_by: '',
                              updated_at: '',
                              updated_by: '',
                              password: '',
                              username: '',
                              disabled: false,
                            },
                errorMessages: { emailError: '',
                                 passwordError: '',
                                 password2Error: '',
                                 roleError: ''
                               },
                errorInput: { emailError: false,
                              passwordError: false,
                              password2Error: false,
                              roleError: false
                            },

                showRegistrationModal: false,
                showInformationModal: false,
                DisableModal: false,

                goto: ''
            }
        },
        methods:{
            get () {
              User.get(response => {
                this.datas = response.data.results;
                this.totalRows = this.datas.length;
                console.log(this.datas)
              }, error => {
                console.log(error)
              })
            },

            getRoles () {
              Role.get(response => {
                this.items = response.data.results;
              }, error => {
                console.log(error)
              })
            },

            register () {
              this.clearRegistrationErrors()

              User.getInstance({
                username : this.registerDatas.email,
                password: this.registerDatas.password,
                password2: this.registerDatas.confirmPassword,
                created_by: "0",
                updated_by: "0",
                roles: [{
                    id: this.registerDatas.roles.id
                }]
              }).validate().validation(response => {
                if(!response.has) {
                    response.class.register(regs => {
                        //if(regs.data.code != undefined)
                       if (regs.data[0].code != undefined) {
                          this.errorMessages.emailError = "Email already taken."
                          this.errorInput.emailError = (regs.data[0].code != undefined) ? true : false
                       } else {
                          this.get()
                          this.addToaster();
                          this.getDataByEmail(this.registerDatas.email)
                          this.clearRegistrationDatas()
                          //
                       }
                    }, error => {
                       console.log(error)
                    });
                } else {
                    this.errorMessages.emailError = response.errors.email
                    this.errorMessages.passwordError = response.errors.password
                    this.errorMessages.password2Error = response.errors.password2
                    this.errorMessages.roleError = response.errors.role

                    this.errorInput.emailError = (response.errors.email != undefined) ? true : false
                    this.errorInput.passwordError = (response.errors.password != undefined) ? true : false
                    this.errorInput.password2Error = (response.errors.password2 != undefined) ? true : false
                    this.errorInput.roleError = (response.errors.role != undefined) ? true : false
                    this.FailedToaster();

                }
              })
            },


            disable () {
              User.getInstance({
                id: this.properties.id,
                disable: !this.properties.disable
              }).disable(response => {
                this.updateInTable()
                this.hideModal();
              }, error => {
               this.disable = false;
                console.log(error)
              })
            },

            updateInTable () {
                for (var x = 0; x < this.datas.length; x++) {
                    if (this.datas[x].id == this.properties.id) {
                        //alert(!this.properties.deleted)
                        this.datas[x].deleted = !this.properties.disable
                        return;
                    }
                }
            },

            getDataByEmail(email){
              User.getInstance({ "username": email})
                .getUserByEmail(success => {
                this.$router.push({
                  name: 'personal-info',
                  params: {
                    items: success.data
                  }
                })
                console.log(success.data);
              }, failed => {
                console.log(failed);
              })
            },

            clearRegistrationDatas() {
                this.registerDatas.email = "",
                this.registerDatas.password = "",
                this.registerDatas.confirmPassword = "",
                this.registerDatas.roles.id = null;
            },
            clearRegistrationErrors() {
                this.errorMessages.emailError = ""
                this.errorMessages.passwordError = ""
                this.errorMessages.password2Error = ""
                this.errorMessages.roleError = ""

                this.errorInput.emailError = false
                this.errorInput.passwordError = false
                this.errorInput.password2Error = false
                this.errorInput.roleError = false
            },

            info (item, index, button) {
                this.properties.index = index
                this.properties.id = item.id
                this.properties.created_at = item.created_at
                this.properties.created_by = item.created_by
                this.properties.updated_at = item.updated_at
                this.properties.updated_by = item.updated_by
                this.properties.password = item.password
                this.properties.username = item.username
                //alert(item.deleted)
                this.properties.disable = item.deleted
            },

            onFiltered (filteredItems) {
                this.totalRows = filteredItems.length,
                this.currentPage = 1
            },

            closeViewInfoModal () {
                this.showInformationModal = false
            },

            closeRegistrationModal () {
                this.showRegistrationModal = false
            },

            hideModal (){
              this.DisableModal = false;
            },
            addToaster (){
              this.$toaster.info('Successfully Added!')
            },
            FailedToaster (){
              this.$toaster.error('Failed')
            },
        },
        computed: {
            test:function(){if(this.$userdata != null){
               return this.userdata;
              }},
            sortOptions () {

              return this.fields
                .filter(f => f.sortable)
                .map(f => { return { text: f.label, value: f.key } })
            }
        },
        mounted () {

            this.get();
            this.getRoles()
        }
    }

</script>

<style lang="scss">

	@import "@/assets/scss/employee.scss";

</style>