mirror of
https://github.com/psforever/PSFPortal.git
synced 2026-07-11 22:44:35 +00:00
Make ActionModal to component
This commit is contained in:
Chord
parent
cb918033a6
commit
e048d28ad3
7 changed files with 137 additions and 112 deletions
|
|
@ -124,4 +124,6 @@ All other trademarks or tradenames are properties of their respective owners.
|
|||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
38
app/components/ActionButtons.svelte
Normal file
38
app/components/ActionButtons.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script>
|
||||
export let account;
|
||||
</script>
|
||||
|
||||
{#if account.inactive}
|
||||
<button type="button"
|
||||
class="btn btn-warning btn-sm"
|
||||
data-action="unban"
|
||||
data-account-id={account.id}
|
||||
data-account-name={account.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Unban</button>
|
||||
{:else}
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-sm"
|
||||
data-action="ban"
|
||||
data-account-id={account.id}
|
||||
data-account-name={account.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Ban</button>
|
||||
{#if account.admin}
|
||||
<button type="button"
|
||||
class="btn btn-warning btn-sm"
|
||||
data-action="remove_gm"
|
||||
data-account-id={account.id}
|
||||
data-account-name={account.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Remove GM</button>
|
||||
{:else}
|
||||
<button type="button"
|
||||
class="btn btn-success btn-sm"
|
||||
data-action="add_gm"
|
||||
data-account-id={account.id}
|
||||
data-account-name={account.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Make GM</button>
|
||||
{/if}
|
||||
{/if}
|
||||
74
app/components/ActionModal.svelte
Normal file
74
app/components/ActionModal.svelte
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios'
|
||||
import Alert from './Alert'
|
||||
import jq from 'jquery'
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let modalAlert;
|
||||
|
||||
onMount(() => setup_actions());
|
||||
|
||||
function setup_actions() {
|
||||
const modal = jq('#actionModal');
|
||||
|
||||
modal.on('hide.bs.modal', () => modalAlert.message(""));
|
||||
modal.on('show.bs.modal', (event) => {
|
||||
const button = jq(event.relatedTarget) // Button that triggered the modal
|
||||
const username = button.data('account-name')
|
||||
const account_id = button.data('account-id')
|
||||
const action_type = button.data('action')
|
||||
const action_name = button.text();
|
||||
|
||||
modal.find('.modal-title').text("Confirm " + action_name)
|
||||
modal.find('.modal-body p').text("Are you sure you want to perform this action on \'" + username + "\'?")
|
||||
|
||||
const submit = modal.find('.modal-footer .btn-primary')
|
||||
|
||||
submit.text(action_name)
|
||||
// remove ALL previous click handlers
|
||||
submit.off()
|
||||
|
||||
submit.click(async (event) => {
|
||||
submit.addClass("disabled")
|
||||
|
||||
try {
|
||||
await axios.post("/api/user/"+ account_id + "/" + action_type)
|
||||
dispatch('action', {
|
||||
target: account_id,
|
||||
action: action_type,
|
||||
});
|
||||
modal.modal('hide')
|
||||
} catch (e) {
|
||||
modalAlert.message(e.message)
|
||||
} finally {
|
||||
submit.removeClass("disabled")
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Perform Action</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Alert bind:this={modalAlert} />
|
||||
<p>Are you sure?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
|
||||
<button type="button" class="btn btn-primary">Yes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,12 +1,16 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { userId } from '../UserState'
|
||||
|
||||
import axios from 'axios'
|
||||
import page from 'page'
|
||||
import moment from 'moment'
|
||||
|
||||
import CharacterLink from '../components/CharacterLink'
|
||||
import { userId } from '../UserState'
|
||||
import LoginList from '../components/LoginList'
|
||||
import AccountLink from '../components/AccountLink'
|
||||
import ActionButtons from '../components/ActionButtons'
|
||||
import ActionModal from '../components/ActionModal.svelte'
|
||||
|
||||
export let pageCtx;
|
||||
export let appAlert;
|
||||
|
|
@ -22,7 +26,7 @@
|
|||
let email;
|
||||
let account;
|
||||
|
||||
onMount(async () => {
|
||||
async function refresh() {
|
||||
let loadID = params.id || $userId;
|
||||
|
||||
try {
|
||||
|
|
@ -47,6 +51,10 @@
|
|||
appAlert.message(e.message)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await refresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -56,6 +64,8 @@
|
|||
|
||||
{#if account}
|
||||
<h1>Account: <AccountLink account={account}/></h1>
|
||||
<ActionButtons {account} />
|
||||
|
||||
<form>
|
||||
<div class="form-group row">
|
||||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||||
|
|
@ -73,7 +83,7 @@
|
|||
|
||||
<h2>Characters</h2>
|
||||
<p>
|
||||
{#if characters.length > 1}
|
||||
{#if characters.length >= 1}
|
||||
<div class="row">
|
||||
{#each characters as char, i}
|
||||
<div class="col-md-4 col-12"><CharacterLink character={char} /></div>
|
||||
|
|
@ -90,3 +100,4 @@
|
|||
</p>
|
||||
{/if}
|
||||
|
||||
<ActionModal on:action={refresh} />
|
||||
|
|
|
|||
|
|
@ -1,16 +1,13 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import axios from 'axios'
|
||||
import AccountLink from '../components/AccountLink'
|
||||
import PaginatedList from '../components/PaginatedList'
|
||||
import Alert from '../components/Alert'
|
||||
import ActionButtons from '../components/ActionButtons'
|
||||
import ActionModal from '../components/ActionModal.svelte'
|
||||
import moment from 'moment'
|
||||
import jq from 'jquery'
|
||||
|
||||
export let appAlert
|
||||
let modalAlert, userList;
|
||||
|
||||
onMount(() => setup_actions());
|
||||
let userList;
|
||||
|
||||
async function fetch(page) {
|
||||
try {
|
||||
|
|
@ -22,42 +19,6 @@
|
|||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function setup_actions() {
|
||||
const modal = jq('#actionModal');
|
||||
|
||||
modal.on('hide.bs.modal', () => modalAlert.message(""));
|
||||
modal.on('show.bs.modal', (event) => {
|
||||
const button = jq(event.relatedTarget) // Button that triggered the modal
|
||||
const username = button.data('account-name')
|
||||
const account_id = button.data('account-id')
|
||||
const action_type = button.data('action')
|
||||
const action_name = button.text();
|
||||
|
||||
modal.find('.modal-title').text("Confirm " + action_name)
|
||||
modal.find('.modal-body p').text("Are you sure you want to perform this action on \'" + username + "\'?")
|
||||
|
||||
const submit = modal.find('.modal-footer .btn-primary')
|
||||
|
||||
submit.text(action_name)
|
||||
// remove ALL previous click handlers
|
||||
submit.off()
|
||||
|
||||
submit.click(async (event) => {
|
||||
submit.addClass("disabled")
|
||||
|
||||
try {
|
||||
await axios.post("/api/user/"+ account_id + "/" + action_type)
|
||||
await userList.refresh()
|
||||
modal.modal('hide')
|
||||
} catch (e) {
|
||||
modalAlert.message(e.message)
|
||||
} finally {
|
||||
submit.removeClass("disabled")
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<PaginatedList bind:this={userList} bind:fetch={fetch} let:data={users} let:pagination={pagination}>
|
||||
|
|
@ -86,65 +47,11 @@
|
|||
Never logged in
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if user.inactive}
|
||||
<button type="button"
|
||||
class="btn btn-warning btn-sm"
|
||||
data-action="unban"
|
||||
data-account-id={user.id}
|
||||
data-account-name={user.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Unban</button>
|
||||
{:else}
|
||||
<button type="button"
|
||||
class="btn btn-danger btn-sm"
|
||||
data-action="ban"
|
||||
data-account-id={user.id}
|
||||
data-account-name={user.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Ban</button>
|
||||
{#if user.admin}
|
||||
<button type="button"
|
||||
class="btn btn-warning btn-sm"
|
||||
data-action="remove_gm"
|
||||
data-account-id={user.id}
|
||||
data-account-name={user.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Remove GM</button>
|
||||
{:else}
|
||||
<button type="button"
|
||||
class="btn btn-success btn-sm"
|
||||
data-action="add_gm"
|
||||
data-account-id={user.id}
|
||||
data-account-name={user.name}
|
||||
data-toggle="modal"
|
||||
data-target="#actionModal">Make GM</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
<td><ActionButtons account={user} /></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</PaginatedList>
|
||||
|
||||
<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Perform Action</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Alert bind:this={modalAlert} />
|
||||
<p>Are you sure?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
|
||||
<button type="button" class="btn btn-primary">Yes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ActionModal on:action={userList.refresh} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue