Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Widgets/UserSearch.vue
| <template> | <template> | ||||
| <div id="search-box" class="card"> | <div id="search-box" class="card"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <form @submit.prevent="searchUser" class="row justify-content-center"> | <form @submit.prevent="searchUser" class="row justify-content-center"> | ||||
| <div class="input-group col-sm-8"> | <div class="input-group col-sm-8"> | ||||
| <input class="form-control" type="text" :placeholder="$t('user.search-pl')" v-model="search"> | <input class="form-control" type="text" :placeholder="$t('user.search-pl')" v-model="search"> | ||||
| <div class="input-group-append"> | |||||
| <button type="submit" class="btn btn-primary"><svg-icon icon="search"></svg-icon> {{ $t('btn.search') }}</button> | <button type="submit" class="btn btn-primary"><svg-icon icon="search"></svg-icon> {{ $t('btn.search') }}</button> | ||||
| </div> | </div> | ||||
| </div> | |||||
| </form> | </form> | ||||
| <table v-if="users.length" class="table table-sm table-hover mt-4"> | <table v-if="users.length" class="table table-sm table-hover mt-4"> | ||||
| <thead class="thead-light"> | <thead> | ||||
| <tr> | <tr> | ||||
| <th scope="col">{{ $t('form.primary-email') }}</th> | <th scope="col">{{ $t('form.primary-email') }}</th> | ||||
| <th scope="col">{{ $t('form.id') }}</th> | <th scope="col">{{ $t('form.id') }}</th> | ||||
| <th scope="col" class="d-none d-md-table-cell">{{ $t('form.created') }}</th> | <th scope="col" class="d-none d-md-table-cell">{{ $t('form.created') }}</th> | ||||
| <th scope="col" class="d-none d-md-table-cell">{{ $t('form.deleted') }}</th> | <th scope="col" class="d-none d-md-table-cell">{{ $t('form.deleted') }}</th> | ||||
| </tr> | </tr> | ||||
| </thead> | </thead> | ||||
| <tbody> | <tbody> | ||||
| Show All 20 Lines | <script> | ||||
| export default { | export default { | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| search: '', | search: '', | ||||
| users: [] | users: [] | ||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| $('#search-box input').focus() | $('#search-box input', this.$el).focus() | ||||
| }, | }, | ||||
| methods: { | methods: { | ||||
| searchUser() { | searchUser() { | ||||
| this.users = [] | this.users = [] | ||||
| axios.get('/api/v4/users', { params: { search: this.search } }) | axios.get('/api/v4/users', { params: { search: this.search } }) | ||||
| .then(response => { | .then(response => { | ||||
| if (response.data.count == 1 && !response.data.list[0].isDeleted) { | if (response.data.count == 1 && !response.data.list[0].isDeleted) { | ||||
| Show All 20 Lines | |||||