Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/Reseller/Invitations.vue
| <template> | <template> | ||||
| <div class="container"> | <div class="container"> | ||||
| <div class="card" id="invitations"> | <div class="card" id="invitations"> | ||||
| <div class="card-body"> | <div class="card-body"> | ||||
| <div class="card-title"> | <div class="card-title"> | ||||
| {{ $t('invitation.title') }} | {{ $t('invitation.title') }} | ||||
| </div> | </div> | ||||
| <div class="card-text"> | <div class="card-text"> | ||||
| <div class="mb-2 d-flex"> | <div class="mb-2 d-flex"> | ||||
| <list-search :placeholder="$t('invitation.search')" :on-search="searchInvitations"></list-search> | <list-search :placeholder="$t('invitation.search')" :on-search="searchInvitations"></list-search> | ||||
| <btn class="btn-success create-invite ms-1" @click="inviteUserDialog" icon="envelope-open-text">{{ $t('invitation.create') }}</btn> | <btn class="btn-success create-invite ms-1" @click="inviteUserDialog" icon="envelope-open-text">{{ $t('invitation.create') }}</btn> | ||||
| </div> | </div> | ||||
| <table id="invitations-list" class="table table-sm table-hover"> | <list-table id="invitations-list" :list="invitations" :setup="setup"> | ||||
| <thead> | <template #email="{ item }"> | ||||
| <tr> | <svg-icon icon="envelope-open-text" :class="statusClass(item)" :title="$t('invitation.status-' + statusLabel(item))"></svg-icon> | ||||
| <th scope="col">{{ $t('user.ext-email') }}</th> | <span>{{ item.email }}</span> | ||||
| <th scope="col">{{ $t('form.created') }}</th> | </template> | ||||
| <th scope="col"></th> | <template #buttons="{ item }"> | ||||
| </tr> | <btn class="text-danger button-delete p-0 ms-1" @click="deleteInvite(item.id)" icon="trash-can"> | ||||
| </thead> | |||||
| <tbody> | |||||
| <tr v-for="inv in invitations" :id="'i' + inv.id" :key="inv.id"> | |||||
| <td class="email"> | |||||
| <svg-icon icon="envelope-open-text" :class="statusClass(inv)" :title="$t('invitation.status-' + statusLabel(inv))"></svg-icon> | |||||
| <span>{{ inv.email }}</span> | |||||
| </td> | |||||
| <td class="datetime"> | |||||
| {{ inv.created }} | |||||
| </td> | |||||
| <td class="buttons"> | |||||
| <btn class="text-danger button-delete p-0 ms-1" @click="deleteInvite(inv.id)" icon="trash-can"> | |||||
| <span class="btn-label">{{ $t('btn.delete') }}</span> | <span class="btn-label">{{ $t('btn.delete') }}</span> | ||||
| </btn> | </btn> | ||||
| <btn class="button-resend p-0 ms-1" :disabled="inv.isNew || inv.isCompleted" @click="resendInvite(inv.id)" icon="redo"> | <btn class="button-resend p-0 ms-1" :disabled="item.isNew || item.isCompleted" @click="resendInvite(item.id)" icon="rotate-left"> | ||||
| <span class="btn-label">{{ $t('btn.resend') }}</span> | <span class="btn-label">{{ $t('btn.resend') }}</span> | ||||
| </btn> | </btn> | ||||
| </td> | </template> | ||||
| </tr> | </list-table> | ||||
| </tbody> | |||||
| <list-foot :text="$t('invitation.empty-list')" colspan="3"></list-foot> | |||||
| </table> | |||||
| <list-more v-if="hasMore" :on-click="loadInvitations"></list-more> | <list-more v-if="hasMore" :on-click="loadInvitations"></list-more> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| <div id="invite-create" class="modal" tabindex="-1" role="dialog"> | <div id="invite-create" class="modal" tabindex="-1" role="dialog"> | ||||
| <div class="modal-dialog" role="document"> | <div class="modal-dialog" role="document"> | ||||
| <div class="modal-content"> | <div class="modal-content"> | ||||
| Show All 28 Lines | <script> | ||||
| import { Modal } from 'bootstrap' | import { Modal } from 'bootstrap' | ||||
| import ListTools from '../Widgets/ListTools' | import ListTools from '../Widgets/ListTools' | ||||
| import { library } from '@fortawesome/fontawesome-svg-core' | import { library } from '@fortawesome/fontawesome-svg-core' | ||||
| library.add( | library.add( | ||||
| require('@fortawesome/free-solid-svg-icons/faEnvelopeOpenText').definition, | require('@fortawesome/free-solid-svg-icons/faEnvelopeOpenText').definition, | ||||
| require('@fortawesome/free-solid-svg-icons/faPaperPlane').definition, | require('@fortawesome/free-solid-svg-icons/faPaperPlane').definition, | ||||
| require('@fortawesome/free-solid-svg-icons/faRedo').definition, | require('@fortawesome/free-solid-svg-icons/faRotateLeft').definition, | ||||
| ) | ) | ||||
| export default { | export default { | ||||
| mixins: [ ListTools ], | mixins: [ ListTools ], | ||||
| data() { | data() { | ||||
| return { | return { | ||||
| invitations: [] | invitations: [], | ||||
| setup: { | |||||
| buttons: true, | |||||
| model: 'invitation', | |||||
| columns: [ | |||||
| { | |||||
| prop: 'email', | |||||
| label: 'user.ext-email', | |||||
| className: 'email', | |||||
| contentSlot: 'email' | |||||
| }, | |||||
| { | |||||
| prop: 'created', | |||||
| className: 'datetime' | |||||
| } | |||||
| ] | |||||
| } | |||||
| } | } | ||||
| }, | }, | ||||
| mounted() { | mounted() { | ||||
| this.loadInvitations({ init: true }) | this.loadInvitations({ init: true }) | ||||
| $('#invite-create')[0].addEventListener('shown.bs.modal', event => { | $('#invite-create')[0].addEventListener('shown.bs.modal', event => { | ||||
| $('input', event.target).first().focus() | $('input', event.target).first().focus() | ||||
| }) | }) | ||||
| ▲ Show 20 Lines • Show All 117 Lines • Show Last 20 Lines | |||||