ROLE

<template>
  <b-container fluid>
        <b-row>
            <b-col md='12' class='pt-5 mt-5' align='right'>
              <b-btn v-b-modal.addModal variant="primary">Add Role</b-btn>
            </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="Type to Search" />
                        <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="Display" class="mb-5 mt-2">
                            <b-form-select :options="pageOptions" v-model="perPage" />
                          </b-form-group>
                    </b-col>
                  <b-table hover
                           outlined
                           responsive
                           bordered
                           :items="datas"
                           :fields="header"
                           :per-page="perPage"
                           :filter="filter"
                           @filtered="onFiltered"
                           :current-page="currentPage">
                        <template slot="actions" slot-scope="row">
                            <b-button v-b-modal.editModal
                                      size="sm"
                                      @click.stop="info(row.item, row.index, $event.target)"
                                      class="mr-1"
                                      variant="success">
                                Edit
                            </b-button>
                            <b-button size="sm"
                                      class="mr-1"
                                      @click.stop="info(row.item, row.index, $event.target); disable(); undisplayer()"
                                      variant="danger">
                                Delete
                            </b-button>
                        </template>x`
                  </b-table>
                    <b-col md="6">
                      <p>Total: {{totalRows}} rows</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>
      <!-- ADD ROLES MODAL -->
      <b-modal id="addModal"
              v-model="showAddModal"
              title="Add Roles"
              @show="clearAddEditDatas"
              @hide="clearAddEditErrorMessages"
              centered>
          <b-form>
              <span>Name</span>
              <b-input v-model="addEditDatas.name"
                       :class="{errorInput: errorInput.nameError}">
              </b-input>
              <p class="ErrorMessage">{{ errorMessages.nameError }}</p>
          </b-form>
          <div slot="modal-footer" class="w-100">
              <b-btn size="sm"
                     class="float-right"
                     @click="closeAddModal">
                  Cancel
              </b-btn>
              <b-btn size="sm"
                     class="pl-3 pr-3 float-right mr-2"
                     @click="register">
                  Add
              </b-btn>
          </div>
      </b-modal>

      <!-- EDIT ROLES MODAL -->
      <b-modal id="editModal"
               v-model="showEditModal"
               title="Edit Roles"
               @show="clearAddEditDatas"
               @hide="clearAddEditErrorMessages"
               centered>
          <b-form>
              <span>Name</span>
              <b-input :class="{errorInput: errorInput.nameError}"
                       :placeholder="this.EditProperties.name"
                       v-model="addEditDatas.name">
              </b-input>
              <p class="ErrorMessage">{{ errorMessages.nameError }}</p>
          </b-form>
          <div slot="modal-footer" class="w-100">
              <b-btn size="sm" class="float-right" @click="showEditModal=false">Cancel</b-btn>
              <b-btn size="sm" class="float-right mr-2" @click="update">Update</b-btn>
          </div>
      </b-modal>

  </b-container>
</template>
<script>

  import Role from '../assets/script/Roles'

  export default{
    data(){
      return{
        header:[
            { key: 'name',            label: 'Name',            sortable: true },
            { key: 'created_by',      label: 'Created',         sortable: true },
            { key: 'created_at',      label: 'Created by',          sortable: true },
            { key: 'updated_by',      label: 'Updated',         sortable: true },
            { key: 'updated_at',      label: 'Updated by',          sortable: true },
            //{ key: 'deleted',         label: 'Deleted',          sortable: true },
            { key: 'actions',         label: 'Actions' }
        ],
        datas: [],
        perPage: 5,
        currentPage: 1,
        pageOptions:[5,10,25,50,100],
        totalRows: 0,
        filter: null,

        roleListItems: [],
        selectedRole: null,

        showAddModal: false,
        showEditModal: false,

        addEditDatas: { name: '' },
        EditProperties: { id: '',
                          name: '',
                          created: '',
                          created_by: '',
                          updated_by: '',
                          updated_at: ''
                        },

        errorMessages: { nameError: '' },
        errorInput: { nameError: false }

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

        undisplayer () {
          var x = 0;
          while(x < this.totalRows) {
            if(this.datas[x].deleted) {
              this.datas.splice(x, 1)
              x--
            }
            x++
          }
        },

        disable (item,index,etc) {
          Role.getInstance({
            id: this.EditProperties.id
          }).disable(response => {
            console.log(response)
            this.datas.splice(index,1);            //this.undisplay();
          }, error => {
            console.log(error)
          })
        },

        register () {
          this.clearAddEditErrorMessages()
          Role.getInstance({
            name: this.addEditDatas.name,
            created_by: "0",
            updated_by: "0",
          }).validate().validation(response => {
            if(!response.has) {
                response.class.register(regs => {
                   this.get()
                   this.clearAddEditDatas()
                   alert("Registered Succesfully")
                }, error => {
                   console.log(error)
                });
            } else {
                this.errorMessages.nameError = response.errors.name
                this.errorInput.nameError = (response.errors.name != undefined) ? true : false
            }
          })
        },

        update () {
          this.clearAddEditErrorMessages()
          Role.getInstance({
            id: this.EditProperties.id,
            name: this.addEditDatas.name,
            created_by: "0",
            updated_by: "0",
          }).validate().validation(response => {
            if(!response.has) {
                response.class.update(regs => {
                   alert("Updated Succesfully")
                   this.updateInTable();
                }, error => {
                   console.log(error)

                });
            } else {
                this.errorMessages.nameError = response.errors.name
                this.errorInput.nameError = (response.errors.name != undefined) ? true : false
            }
          })
        },

        updateInTable () {
            for (var x = 0; x < this.datas.length; x++) {
                if (this.datas[x].id == this.EditProperties.id) {
                    this.datas[x].name = this.addEditDatas.name
                    return;
                }
            }
        },

        info (item, index, button) {
            this.EditProperties.index = index,
            this.EditProperties.id = item.id,
            this.EditProperties.name = item.name,
            this.EditProperties.created = item.created,
            this.EditProperties.created_by = item.created_by,
            this.EditProperties.updated_by = item.updated_by,
            this.EditProperties.updated_at = item.updated_at
        },

        onFiltered (filteredItems) {
            this.totalRows = filteredItems.length
            this.currentPage = 1
        },
        clearAddEditDatas () {
            this.addEditDatas.name = '';
        },
        clearAddEditErrorMessages () {
            this.errorMessages.nameError = '';
            this.errorInput.nameError = false
        },
        sortOptions () {
            return this.fields
                .filter(f => f.sortable)
                .map(f => { return { text: f.label, value: f.key } })
        },
        closeAddModal () {
            return this.showAddModal = false;
        }
    },
    computed: {


    },
    mounted () {
        this.get();
    }
  }
</script>

<style>

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

</style>




import Validator from './Validator';

var Role = (function(Validator){
	var url = 'http://localhost:8080/keeper/api/roles/'

	function Role(obj) {
		this.instance = null
		this.errors = {}
		this.role = {
			id: obj.id,
			name: obj.name,
			created_by: obj.created_by,
			updated_by: obj.updated_by,
		};
	}

	Role.getInstance = function(obj) {
		if(this.instance == null) {
			this.instance = new Role(obj)
		} else {
			this.overrideInstance(obj)
		}
		return this.instance;
	}

	Role.overrideInstance = function(obj) {
		this.instance.role = {
			id: obj.id,
			name: obj.name,
			created_by: obj.created_by,
			updated_by: obj.updated_by,
		};
	}

	Role.prototype.validateRole = function(role) {
		var roleNameNonEmptyChecker = Validator.isEmpty(role),
			roleNameLengthChecker = Validator.isCharacterLengthValid(role, 4, 512);
		if(!roleNameNonEmptyChecker.success) {
			this.errors.name = roleNameNonEmptyChecker.message;
		} else if(!roleNameLengthChecker.success) {
			this.errors.name = roleNameLengthChecker.message;
		}
		this.role.name = role;
	}

	Role.prototype.validate = function() {
		this.errors = {}
		this.validateRole(this.role.name)
		return this;
	}

	Role.prototype.validation = function(cb) {
		cb({"errors" : this.errors, "has" : (Object.keys(this.errors).length) ? true : false, "class": this})
	}

	Role.get = function(cb, cbe) {
		$http.get(url + "0/10000").then(response => {
			cb(response)
		}).catch(error => {
			console.log(error.response)
			cbe(error)
		})
	}

	Role.prototype.register = function (cb, cbe) {
		delete this.role.id
        $http.patch(
        	url, this.role
        ).then(response => {
        	cb(response)
        }).catch(error => {
           	cbe(error)
        });
	}

	Role.prototype.update = function (cb, cbe) {
        $http.patch(
        	url, this.role
        ).then(response => {
        	cb(response)
        }).catch(error => {
           	cbe(error)
        });
	}

	Role.prototype.disable = function(cb, cbe) {
		console.log(this.role)
		$http.delete(url, {
			data: this.role
		}).then(response => {
			cb(response)
		}).catch(error => {
			cbe(error)
		})
	}

	return Role;
})(Validator);

export default Role