<script>
import UserRoleCreator from "./UserRoleCreator.vue";
import { permissionsHandler } from "@/helpers/permissions-handler";
export default {
  name: "UserRoles",
  components: {
    UserRoleCreator,
  },
  mixins: [permissionsHandler],
  data: () => ({
    rows: [],
    displayMode: true,
    selectRole: null,
  }),
  beforeCreate() {
    this.$http.get("roles").then((response) => {
      this.rows = response.data.rows;
    });
  },
  methods: {
    toggleCrudMode() {
      this.displayMode = !this.displayMode;
    },
    handleEdit(row) {
      this.selectRole = { ...row };
      this.toggleCrudMode();
    },
    handleSavedRow(row) {
      if (this.selectRole) {
        let index = this.rows.findIndex((row) => (row.id = this.selectRole.id));
        this.rows[index] = row;
      } else {
        this.rows.unshift(row);
      }
      this.selectRole = null;
      this.toggleCrudMode();
    },
    handleDestroy(row, i) {
      this.$confirm({
        title: "Deleting",
        content: `Are you sure you want to delete ${row.name} from list of user roles?`,
        actionText: "Yes, Continue",
        closeText: "Discard",
        classes: "btn btn-danger",
        action: () => {
          this.$http.get(`roles/destroy/${row.id}`).then((response) => {
            if (response.data.status) {
              this.rows.splice(i, 1);
              this.$notify({
                type: "success",
                message: "User Role deleted successfully",
              });
            }
          });
        },
      });
    },
  },
};
</script>
<template>
  <div class="crud-container position-relative">
    <div class="crud-display" :class="{ empty: !displayMode }">
      <template v-if="displayMode">
        <div class="row justify-content-center">
          <div class="col-md-10">
            <div class="card">
              <div class="card-body">
                <div class="d-flex align-items-center mb-2">
                  <h4>{{ $trans("User Role") }}s ({{ rows.length }})</h4>
                  <button
                    type="button"
                    @click="toggleCrudMode"
                    v-if="this.hasPermissionTo('C')"
                    class="btn btn-primary ms-auto"
                  >
                    <i class="uil uil-plus me-1"></i> {{ $trans("Add New") }}
                  </button>
                </div>
                <div class="table-responsive">
                  <table class="table align-middle table-nowrap table-check">
                    <thead>
                      <tr>
                        <th scope="col">№</th>
                        <th scope="col">{{ $trans("Name") }}</th>
                        <th scope="col">{{ $trans("Description") }}</th>
                        <th scope="col">{{ $trans("Status") }}</th>
                        <th>Action</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(row, i) in rows" :key="row.id">
                        <td>{{ i + 1 }}</td>
                        <td>
                          {{ row.name }}
                        </td>
                        <td>{{ row.description || "N/A" }}</td>
                        <td>
                          <div
                            class="badge bg-success font-size-12"
                            v-if="row.status == 1"
                          >
                            {{ $trans("Active") }}
                          </div>
                          <div class="badge bg-danger font-size-12" v-else>
                            Disabled
                          </div>
                        </td>
                        <td class="action">
                          <div>
                            <button
                              class="btn btn-light btn-sm dropdown-toggle"
                              type="button"
                              data-bs-toggle="dropdown"
                              aria-expanded="false"
                            >
                              <i class="uil uil-ellipsis-h"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                              <li v-if="this.hasPermissionTo('U')">
                                <a
                                  @click.prevent="handleEdit(row)"
                                  class="dropdown-item"
                                  href="javascript:void(0)"
                                  >{{ $trans("Edit") }}</a
                                >
                              </li>
                              <li v-if="this.hasPermissionTo('D')">
                                <a
                                  class="dropdown-item"
                                  @click.prevent="handleDestroy(row, i)"
                                  href="javascript:void(0)"
                                  >{{ $trans("Delete") }}</a
                                >
                              </li>
                            </ul>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <div
                    v-if="!rows.length"
                    class="text-center w-100 cursor-pointer"
                  >
                    <h6 class="mb-0 text-muted">
                      {{ $trans("No data to display") }}
                    </h6>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="crud-display-line">
          <button
            class="btn-back crud-back"
            type="button"
            @click="toggleCrudMode"
            style="left: 18px"
          >
            <svg
              height="18px"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              ></path>
            </svg>
          </button>
          <div class="crud-links"></div>
        </div>
      </template>
    </div>
    <div class="crud-create" :class="{ 'd-none': displayMode }">
      <user-role-creator
        @saved="handleSavedRow"
        v-if="!displayMode"
        :role="selectRole"
      ></user-role-creator>
    </div>
  </div>
</template>
