RestaurantSite/src/components/restaurants/restaurantRole.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <h1>Role</h1>
      </div>
    </div>
    <div class="row" style="text-align:left">
      <div class="col-md-12" style="margin-bottom: 1em">
        <label>Role Name</label>
        <div class="input-group-prepend">
          <span class="input-group-text">
            <eva-icon name="credit-card-outline" fill="#24aae1"></eva-icon>
          </span>
          <input class="form-control" type="text" name="description" />
        </div>
      </div>
    </div>
    <div class="container">
      <div class="form-group row">
        <div class="col-md-12">
          <ListView
            :showColumnChooser="false"
            :editable="true"
            :hideSearch="true"
            :deleteable="true"
            @onEdit="Edit"
            @onDelete="Delete"
            @onNew="New"
          />
        </div>
      </div>
      <div v-if="wait" id="preloader"></div>
    </div>
    <div class="row"></div>
    <div class="row">
      <div class="col-md-12" style="margin-bottom: 1em">
        <div class="input-group-prepend">
          <b-button class="btn btn-b-n" @click="Ok">Ok</b-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ListView from "../shared/listView";
export default {
  name: "Role",
  components: {
    ListView
  },
  data() {
    return {
      wait: false
    };
  }
};
</script>