mirror of
https://github.com/knadh/listmonk.git
synced 2025-10-08 14:28:47 +08:00
Add missing user UI files.
This commit is contained in:
Kailash Nadh
parent
0968e58766
commit
10f1c38996
3 changed files with 398 additions and 1 deletions
|
|
@ -570,7 +570,7 @@ body.is-noscroll {
|
|||
border: 1px solid lighten($color, 37%);
|
||||
box-shadow: 1px 1px 0 lighten($color, 37%);
|
||||
}
|
||||
&.public, &.running, &.list, &.campaign {
|
||||
&.public, &.running, &.list, &.campaign, &.super {
|
||||
$color: $primary;
|
||||
color: lighten($color, 20%);;
|
||||
background: #e6f7ff;
|
||||
|
|
@ -891,6 +891,14 @@ section.analytics {
|
|||
}
|
||||
}
|
||||
|
||||
/* Users */
|
||||
section.users {
|
||||
td .tag {
|
||||
min-width: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* C3 charting lib */
|
||||
.c3 {
|
||||
.c3-text.c3-empty {
|
||||
|
|
|
|||
169
frontend/src/views/UserForm.vue
Normal file
169
frontend/src/views/UserForm.vue
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<form @submit.prevent="onSubmit">
|
||||
<div class="modal-card content" style="width: auto">
|
||||
<header class="modal-card-head">
|
||||
<p v-if="isEditing" class="has-text-grey-light is-size-7">
|
||||
{{ $t('globals.fields.id') }}: <copy-text :text="`${data.id}`" />
|
||||
</p>
|
||||
<h4 v-if="isEditing">
|
||||
{{ data.name }}
|
||||
</h4>
|
||||
<h4 v-else>
|
||||
{{ $t('users.newUser') }}
|
||||
</h4>
|
||||
</header>
|
||||
<section expanded class="modal-card-body">
|
||||
<div class="columns">
|
||||
<div class="column is-8">
|
||||
<b-field :label="$t('users.username')" label-position="on-border">
|
||||
<b-input :maxlength="200" v-model="form.username" name="username" :ref="'focus'"
|
||||
:placeholder="$t('users.username')" required :message="$t('users.usernameHelp')" autocomplete="off" />
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-4">
|
||||
<b-field :label="$t('globals.fields.status')" label-position="on-border">
|
||||
<b-select v-model="form.status" name="status" required expanded>
|
||||
<option value="enabled">
|
||||
{{ $t('users.status.enabled') }}
|
||||
</option>
|
||||
<option value="disabled">
|
||||
{{ $t('users.status.disabled') }}
|
||||
</option>
|
||||
<option value="super">
|
||||
{{ $t('users.status.super') }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b-field :label="$t('subscribers.email')" label-position="on-border">
|
||||
<b-input :maxlength="200" v-model="form.email" name="email" :placeholder="$t('subscribers.email')" required />
|
||||
</b-field>
|
||||
|
||||
<b-field :label="$t('globals.fields.name')" label-position="on-border">
|
||||
<b-input :maxlength="200" v-model="form.name" name="name" :placeholder="$t('globals.fields.name')" />
|
||||
</b-field>
|
||||
|
||||
<b-field>
|
||||
<b-checkbox v-model="form.passwordLogin" :native-value="true">
|
||||
{{ $t('users.passwordEnable') }}
|
||||
</b-checkbox>
|
||||
</b-field>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<b-field :label="$t('users.password')" label-position="on-border">
|
||||
<b-input :disabled="!form.passwordLogin" minlength="8" :maxlength="200" v-model="form.password"
|
||||
type="password" name="password" :placeholder="$t('users.password')"
|
||||
:required="form.passwordLogin && !isEditing" />
|
||||
</b-field>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<b-field :label="$t('users.passwordRepeat')" label-position="on-border">
|
||||
<b-input :disabled="!form.passwordLogin" minlength="8" :maxlength="200" v-model="form.password2"
|
||||
type="password" name="password" :required="form.passwordLogin && !isEditing && form.password" />
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="modal-card-foot has-text-right">
|
||||
<b-button @click="$parent.close()">
|
||||
{{ $t('globals.buttons.close') }}
|
||||
</b-button>
|
||||
<b-button native-type="submit" type="is-primary" :loading="loading.lists" data-cy="btn-save">
|
||||
{{ $t('globals.buttons.save') }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { mapState } from 'vuex';
|
||||
import CopyText from '../components/CopyText.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'UserForm',
|
||||
|
||||
components: {
|
||||
CopyText,
|
||||
},
|
||||
|
||||
props: {
|
||||
data: { type: Object, default: () => ({}) },
|
||||
isEditing: { type: Boolean, default: false },
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
// Binds form input values.
|
||||
form: {
|
||||
username: '',
|
||||
email: '',
|
||||
name: '',
|
||||
password: '',
|
||||
passwordLogin: false,
|
||||
status: 'enabled',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSubmit() {
|
||||
if (!this.form.passwordLogin) {
|
||||
this.form.password = null;
|
||||
this.form.password2 = null;
|
||||
}
|
||||
|
||||
if (this.isEditing) {
|
||||
if (this.form.passwordLogin && this.form.password && this.form.password !== this.form.password2) {
|
||||
this.$utils.toast(this.$t('users.passwordMismatch'), 'is-danger');
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateUser();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.form.passwordLogin && this.form.password !== this.form.password2) {
|
||||
this.$utils.toast(this.$t('users.passwordMismatch'), 'is-danger');
|
||||
return;
|
||||
}
|
||||
|
||||
this.createUser();
|
||||
},
|
||||
|
||||
createUser() {
|
||||
const form = { ...this.form, password_login: this.form.passwordLogin };
|
||||
this.$api.createUser(form).then((data) => {
|
||||
this.$emit('finished');
|
||||
this.$parent.close();
|
||||
this.$utils.toast(this.$t('globals.messages.created', { name: data.name }));
|
||||
});
|
||||
},
|
||||
|
||||
updateUser() {
|
||||
const form = { ...this.form, password_login: this.form.passwordLogin };
|
||||
this.$api.updateUser({ id: this.data.id, ...form }).then((data) => {
|
||||
this.$emit('finished');
|
||||
this.$parent.close();
|
||||
this.$utils.toast(this.$t('globals.messages.updated', { name: data.name }));
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['loading']),
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.form = { ...this.form, ...this.$props.data };
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.focus.focus();
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
220
frontend/src/views/Users.vue
Normal file
220
frontend/src/views/Users.vue
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<template>
|
||||
<section class="users">
|
||||
<header class="columns page-header">
|
||||
<div class="column is-10">
|
||||
<h1 class="title is-4">
|
||||
{{ $t('globals.terms.users') }}
|
||||
<span v-if="!isNaN(users.length)">({{ users.length }})</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="column has-text-right">
|
||||
<b-field expanded>
|
||||
<b-button expanded type="is-primary" icon-left="plus" class="btn-new" @click="showNewForm" data-cy="btn-new">
|
||||
{{ $t('globals.buttons.new') }}
|
||||
</b-button>
|
||||
</b-field>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<b-table :data="users" :loading="loading.users" hoverable checkable :checked-rows.sync="checked"
|
||||
default-sort="createdAt" backend-sorting @sort="onSort" @check-all="onTableCheck" @check="onTableCheck">
|
||||
<template #top-left>
|
||||
<div class="columns">
|
||||
<div class="column is-6">
|
||||
<form @submit.prevent="getUsers">
|
||||
<div>
|
||||
<b-field>
|
||||
<b-input v-model="queryParams.query" name="query" expanded icon="magnify" ref="query"
|
||||
data-cy="query" />
|
||||
<p class="controls">
|
||||
<b-button native-type="submit" type="is-primary" icon-left="magnify" data-cy="btn-query" />
|
||||
</p>
|
||||
</b-field>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<b-table-column v-slot="props" field="username" :label="$t('users.username')" header-class="cy-username" sortable
|
||||
:td-attrs="$utils.tdID">
|
||||
<a :href="`/users/${props.row.id}`" @click.prevent="showEditForm(props.row)"
|
||||
:class="{ 'has-text-grey': props.row.status === 'disabled' }">
|
||||
{{ props.row.username }}
|
||||
</a>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" field="status" :label="$t('globals.fields.status')" header-class="cy-status"
|
||||
sortable :td-attrs="$utils.tdID">
|
||||
<b-tag :class="{ 'is-small': true, [props.row.status]: true }">
|
||||
{{ $t(`users.status.${props.row.status}`) }}
|
||||
</b-tag>
|
||||
</b-table-column>
|
||||
<b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')" header-class="cy-name" sortable
|
||||
:td-attrs="$utils.tdID">
|
||||
<div>
|
||||
<a :href="`/users/${props.row.id}`" @click.prevent="showEditForm(props.row)">
|
||||
{{ props.row.name }}
|
||||
</a>
|
||||
</div>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" field="name" :label="$t('subscribers.email')" header-class="cy-name" sortable
|
||||
:td-attrs="$utils.tdID">
|
||||
<div>
|
||||
<a :href="`/users/${props.row.id}`" @click.prevent="showEditForm(props.row)">
|
||||
{{ props.row.email }}
|
||||
</a>
|
||||
</div>
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" field="created_at" :label="$t('globals.fields.createdAt')"
|
||||
header-class="cy-created_at" sortable>
|
||||
{{ $utils.niceDate(props.row.createdAt) }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" field="updated_at" :label="$t('globals.fields.updatedAt')"
|
||||
header-class="cy-updated_at" sortable>
|
||||
{{ $utils.niceDate(props.row.updatedAt) }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" field="last_login" :label="$t('users.lastLogin')" header-class="cy-updated_at"
|
||||
sortable>
|
||||
{{ props.row.loggedinAt ? $utils.niceDate(props.row.loggedinAt) : '—' }}
|
||||
</b-table-column>
|
||||
|
||||
<b-table-column v-slot="props" cell-class="actions" align="right">
|
||||
<div>
|
||||
<a href="#" @click.prevent="showEditForm(props.row)" data-cy="btn-edit"
|
||||
:aria-label="$t('globals.buttons.edit')">
|
||||
<b-tooltip :label="$t('globals.buttons.edit')" type="is-dark">
|
||||
<b-icon icon="pencil-outline" size="is-small" />
|
||||
</b-tooltip>
|
||||
</a>
|
||||
|
||||
<a href="#" @click.prevent="deleteUser(props.row)" data-cy="btn-delete"
|
||||
:aria-label="$t('globals.buttons.delete')">
|
||||
<b-tooltip :label="$t('globals.buttons.delete')" type="is-dark">
|
||||
<b-icon icon="trash-can-outline" size="is-small" />
|
||||
</b-tooltip>
|
||||
</a>
|
||||
</div>
|
||||
</b-table-column>
|
||||
|
||||
<template #empty v-if="!loading.users">
|
||||
<empty-placeholder />
|
||||
</template>
|
||||
</b-table>
|
||||
|
||||
<!-- Add / edit form modal -->
|
||||
<b-modal scroll="keep" :aria-modal="true" :active.sync="isFormVisible" :width="600" @close="onFormClose">
|
||||
<user-form :data="curItem" :is-editing="isEditing" @finished="formFinished" />
|
||||
</b-modal>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import { mapState } from 'vuex';
|
||||
import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
|
||||
import UserForm from './UserForm.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
EmptyPlaceholder,
|
||||
UserForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
curItem: null,
|
||||
isEditing: false,
|
||||
isFormVisible: false,
|
||||
users: [],
|
||||
checked: [],
|
||||
queryParams: {
|
||||
page: 1,
|
||||
query: '',
|
||||
orderBy: 'id',
|
||||
order: 'asc',
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSort(field, direction) {
|
||||
this.queryParams.orderBy = field;
|
||||
this.queryParams.order = direction;
|
||||
this.getUsers();
|
||||
},
|
||||
|
||||
onTableCheck() {
|
||||
// Disable bulk.all selection if there are no rows checked in the table.
|
||||
if (this.bulk.checked.length !== this.subscribers.total) {
|
||||
this.bulk.all = false;
|
||||
}
|
||||
},
|
||||
|
||||
// Show the edit form.
|
||||
showEditForm(item) {
|
||||
this.curItem = item;
|
||||
this.isFormVisible = true;
|
||||
this.isEditing = true;
|
||||
},
|
||||
|
||||
// Show the new form.
|
||||
showNewForm() {
|
||||
this.curItem = {};
|
||||
this.isFormVisible = true;
|
||||
this.isEditing = false;
|
||||
},
|
||||
|
||||
formFinished() {
|
||||
this.getUsers();
|
||||
},
|
||||
|
||||
onFormClose() {
|
||||
if (this.$route.params.id) {
|
||||
this.$router.push({ name: 'users' });
|
||||
}
|
||||
},
|
||||
|
||||
getUsers() {
|
||||
this.$api.queryUsers({
|
||||
query: this.queryParams.query.replace(/[^\p{L}\p{N}\s]/gu, ' '),
|
||||
order_by: this.queryParams.orderBy,
|
||||
order: this.queryParams.order,
|
||||
}).then((resp) => {
|
||||
this.users = resp;
|
||||
});
|
||||
},
|
||||
|
||||
deleteUser(item) {
|
||||
this.$utils.confirm(
|
||||
this.$t('globals.messages.confirm'),
|
||||
() => {
|
||||
this.$api.deleteUser(item.id).then(() => {
|
||||
this.getUsers();
|
||||
|
||||
this.$utils.toast(this.$t('globals.messages.deleted', { name: item.name }));
|
||||
});
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['loading', 'settings']),
|
||||
},
|
||||
|
||||
mounted() {
|
||||
if (this.$route.params.id) {
|
||||
this.$api.getUser(parseInt(this.$route.params.id, 10)).then((data) => {
|
||||
this.showEditForm(data);
|
||||
});
|
||||
} else {
|
||||
this.getUsers();
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue