104 lines
4.3 KiB
Vue
104 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<h2 id="page-heading" data-cy="UserAccountHeading">
|
|
<span id="user-account-heading">User Accounts</span>
|
|
<div class="d-flex justify-content-end">
|
|
<button class="btn btn-info mr-2" @click="handleSyncList" :disabled="isFetching">
|
|
<font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon> <span>Refresh list</span>
|
|
</button>
|
|
<router-link :to="{ name: 'UserAccountCreate' }" custom v-slot="{ navigate }">
|
|
<button
|
|
@click="navigate"
|
|
id="jh-create-entity"
|
|
data-cy="entityCreateButton"
|
|
class="btn btn-primary jh-create-entity create-user-account"
|
|
>
|
|
<font-awesome-icon icon="plus"></font-awesome-icon>
|
|
<span>Create a new User Account</span>
|
|
</button>
|
|
</router-link>
|
|
</div>
|
|
</h2>
|
|
<br />
|
|
<div class="alert alert-warning" v-if="!isFetching && userAccounts && userAccounts.length === 0">
|
|
<span>No User Accounts found</span>
|
|
</div>
|
|
<div class="table-responsive" v-if="userAccounts && userAccounts.length > 0">
|
|
<table class="table table-striped" aria-describedby="userAccounts">
|
|
<thead>
|
|
<tr>
|
|
<th scope="row"><span>ID</span></th>
|
|
<th scope="row"><span>Name</span></th>
|
|
<th scope="row"><span>User</span></th>
|
|
<th scope="row"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="userAccount in userAccounts" :key="userAccount.id" data-cy="entityTable">
|
|
<td>
|
|
<router-link :to="{ name: 'UserAccountView', params: { userAccountId: userAccount.id } }">{{ userAccount.id }}</router-link>
|
|
</td>
|
|
<td>{{ userAccount.name }}</td>
|
|
<td>
|
|
<span v-for="(user, i) in userAccount.users" :key="user.id"
|
|
>{{ i > 0 ? ', ' : '' }}
|
|
{{ user.login }}
|
|
</span>
|
|
</td>
|
|
<td class="text-right">
|
|
<div class="btn-group">
|
|
<router-link :to="{ name: 'UserAccountView', params: { userAccountId: userAccount.id } }" custom v-slot="{ navigate }">
|
|
<button @click="navigate" class="btn btn-info btn-sm details" data-cy="entityDetailsButton">
|
|
<font-awesome-icon icon="eye"></font-awesome-icon>
|
|
<span class="d-none d-md-inline">View</span>
|
|
</button>
|
|
</router-link>
|
|
<router-link :to="{ name: 'UserAccountEdit', params: { userAccountId: userAccount.id } }" custom v-slot="{ navigate }">
|
|
<button @click="navigate" class="btn btn-primary btn-sm edit" data-cy="entityEditButton">
|
|
<font-awesome-icon icon="pencil-alt"></font-awesome-icon>
|
|
<span class="d-none d-md-inline">Edit</span>
|
|
</button>
|
|
</router-link>
|
|
<b-button
|
|
@click="prepareRemove(userAccount)"
|
|
variant="danger"
|
|
class="btn btn-sm"
|
|
data-cy="entityDeleteButton"
|
|
v-b-modal.removeEntity
|
|
>
|
|
<font-awesome-icon icon="times"></font-awesome-icon>
|
|
<span class="d-none d-md-inline">Delete</span>
|
|
</b-button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<b-modal ref="removeEntity" id="removeEntity">
|
|
<template #modal-title>
|
|
<span id="sasiedziApp.userAccount.delete.question" data-cy="userAccountDeleteDialogHeading">Confirm delete operation</span>
|
|
</template>
|
|
<div class="modal-body">
|
|
<p id="jhi-delete-userAccount-heading">Are you sure you want to delete User Account {{ removeId }}?</p>
|
|
</div>
|
|
<template #modal-footer>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
id="jhi-confirm-delete-userAccount"
|
|
data-cy="entityConfirmDeleteButton"
|
|
@click="removeUserAccount()"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</b-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" src="./user-account.component.ts"></script>
|