Creating a CRM Super Admin
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { RouterLink } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import type { PlatformStatsDto } from '@mento/shared';
|
||||
import { platformApi } from '@/lib/platform-api';
|
||||
import { toFaDigits } from '@/lib/jalali';
|
||||
import { usePlatformAuthStore } from '@/stores/platform-auth';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
|
||||
const platform = usePlatformAuthStore();
|
||||
const loading = ref(true);
|
||||
const error = ref('');
|
||||
const stats = ref<PlatformStatsDto | null>(null);
|
||||
|
||||
async function load() {
|
||||
error.value = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await platformApi.get<PlatformStatsDto>('/platform/stats');
|
||||
stats.value = data;
|
||||
} catch (e) {
|
||||
error.value = axios.isAxiosError(e)
|
||||
? 'بارگذاری آمار ناموفق بود'
|
||||
: 'بارگذاری آمار ناموفق بود';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<header class="head">
|
||||
<div>
|
||||
<p class="eyebrow">سوپرادمین</p>
|
||||
<h1>سلام {{ platform.admin?.fullName || '' }}</h1>
|
||||
<p class="lead">نمای کلی حساب‌ها و محیط‌های ثبت‌شده روی پلتفرم.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
|
||||
<div v-else-if="stats" class="kpis">
|
||||
<article class="kpi">
|
||||
<span class="ico"><UiIcon name="building" :size="20" /></span>
|
||||
<p>محیط‌ها</p>
|
||||
<strong>{{ toFaDigits(stats.organizationCount) }}</strong>
|
||||
<small>{{ toFaDigits(stats.activeOrganizationCount) }} فعال</small>
|
||||
</article>
|
||||
<article class="kpi">
|
||||
<span class="ico"><UiIcon name="users" :size="20" /></span>
|
||||
<p>کاربران</p>
|
||||
<strong>{{ toFaDigits(stats.userCount) }}</strong>
|
||||
<small>{{ toFaDigits(stats.activeUserCount) }} فعال</small>
|
||||
</article>
|
||||
<article class="kpi">
|
||||
<span class="ico"><UiIcon name="layers" :size="20" /></span>
|
||||
<p>عضویت‌ها</p>
|
||||
<strong>{{ toFaDigits(stats.membershipCount) }}</strong>
|
||||
<small>نقش در محیط‌ها</small>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="shortcuts">
|
||||
<RouterLink :to="{ name: 'adm-organizations' }" class="card">
|
||||
<UiIcon name="building" :size="18" />
|
||||
<div>
|
||||
<strong>مدیریت محیط‌ها</strong>
|
||||
<span>ساخت، ویرایش و فعال/غیرفعال کردن سازمان‌ها</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
<RouterLink :to="{ name: 'adm-users' }" class="card">
|
||||
<UiIcon name="users" :size="18" />
|
||||
<div>
|
||||
<strong>مدیریت کاربران</strong>
|
||||
<span>نقش، دسترسی و ریست رمز عبور</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
max-width: 980px;
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0.15rem 0 0.35rem;
|
||||
font-size: 1.45rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent-deep);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.kpis {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.kpi {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 14px;
|
||||
padding: 1rem 1.05rem;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.kpi p,
|
||||
.kpi small {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.kpi strong {
|
||||
display: block;
|
||||
margin: 0.2rem 0 0.15rem;
|
||||
font-size: 1.55rem;
|
||||
}
|
||||
|
||||
.ico {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-bottom: 0.55rem;
|
||||
border-radius: 10px;
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
|
||||
.shortcuts {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
padding: 1rem 1.05rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.card span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.kpis,
|
||||
.shortcuts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,324 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
import { usePlatformAuthStore } from '@/stores/platform-auth';
|
||||
import AuthBrandPanel from '@/components/auth/AuthBrandPanel.vue';
|
||||
import MentoLogo from '@/components/brand/MentoLogo.vue';
|
||||
import BrandName from '@/components/brand/BrandName.vue';
|
||||
import UiIcon from '@/components/UiIcon.vue';
|
||||
import { brand } from '@mento/shared';
|
||||
|
||||
const platform = usePlatformAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const email = ref('');
|
||||
const password = ref('');
|
||||
const showPassword = ref(false);
|
||||
const error = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
function apiError(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
if (!e.response) {
|
||||
return 'اتصال به سرور برقرار نشد.';
|
||||
}
|
||||
const msg = (e.response.data as { message?: string | string[] })?.message;
|
||||
return Array.isArray(msg) ? msg.join('، ') : (msg ?? fallback);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
error.value = '';
|
||||
loading.value = true;
|
||||
try {
|
||||
await platform.login(email.value.trim(), password.value);
|
||||
await router.push({ name: 'adm-dashboard' });
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'ورود ناموفق بود');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-page">
|
||||
<div class="auth-shell">
|
||||
<AuthBrandPanel
|
||||
headline="کنترل حساب‌ها و دسترسی‌ها"
|
||||
description="پنل سوپرادمین برای مدیریت محیط‌ها، کاربران و وضعیت دسترسی‌ها."
|
||||
/>
|
||||
|
||||
<section class="form-panel">
|
||||
<header class="mobile-brand">
|
||||
<MentoLogo :size="52" :show-text="false" />
|
||||
<BrandName />
|
||||
<span>پنل سوپرادمین</span>
|
||||
</header>
|
||||
|
||||
<div class="form-inner">
|
||||
<h1>ورود سوپرادمین</h1>
|
||||
<p class="lead">فقط حساب پلتفرم می‌تواند وارد این بخش شود.</p>
|
||||
|
||||
<form class="form" @submit.prevent="submit">
|
||||
<div class="field">
|
||||
<label for="adm-email">ایمیل</label>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
id="adm-email"
|
||||
v-model="email"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="ایمیل سوپرادمین را وارد کنید"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="mail" :size="18" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="adm-password">رمز عبور</label>
|
||||
<div class="input-wrap has-eye">
|
||||
<input
|
||||
id="adm-password"
|
||||
v-model="password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="رمز عبور را وارد کنید"
|
||||
class="ltr-value"
|
||||
/>
|
||||
<span class="field-ico" aria-hidden="true">
|
||||
<UiIcon name="lock" :size="18" />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
class="eye"
|
||||
:aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<UiIcon :name="showPassword ? 'eye-off' : 'eye'" :size="18" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<button class="btn submit" type="submit" :disabled="loading">
|
||||
{{ loading ? 'در حال ورود…' : 'ورود به پنل' }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="auth-footer">
|
||||
<p>۱۴۰۵ {{ brand.nameFa }}. تمامی حقوق محفوظ است.</p>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
padding-bottom: max(1rem, env(safe-area-inset-bottom));
|
||||
background:
|
||||
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(45, 212, 191, 0.12), transparent 55%),
|
||||
radial-gradient(rgba(13, 148, 136, 0.12) 1px, transparent 1.2px),
|
||||
#f5fbfb;
|
||||
background-size: auto, 20px 20px, auto;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
flex: 1;
|
||||
width: min(1100px, 100%);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
overflow: hidden;
|
||||
min-height: min(680px, calc(100dvh - 5.5rem));
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: clamp(1.2rem, 3vw, 2.4rem);
|
||||
min-width: 0;
|
||||
background: #fff;
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
gap: 0.35rem;
|
||||
margin-bottom: 1.4rem;
|
||||
padding-top: 0.4rem;
|
||||
}
|
||||
|
||||
.mobile-brand span {
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
width: min(420px, 100%);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.4rem;
|
||||
font-size: clamp(1.45rem, 3vw, 1.85rem);
|
||||
}
|
||||
|
||||
.lead {
|
||||
margin: 0 0 1.2rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: 0.95rem;
|
||||
}
|
||||
|
||||
.form input {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.form input::placeholder {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
color: #cdd4de;
|
||||
}
|
||||
|
||||
.form input.ltr-value:not(:placeholder-shown) {
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-wrap input {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.85rem 2.6rem 0.85rem 0.95rem;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.input-wrap.has-eye input {
|
||||
padding-left: 2.7rem;
|
||||
}
|
||||
|
||||
.input-wrap input:focus {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.field-ico {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.75rem;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
color: #94a3b8;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eye {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0.45rem;
|
||||
right: auto;
|
||||
transform: translateY(-50%);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.submit {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1.1rem;
|
||||
border-radius: var(--radius);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
width: min(1040px, 100%);
|
||||
margin: 0.85rem auto 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.82rem;
|
||||
padding-inline: 0.35rem;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.auth-page {
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.auth-shell {
|
||||
width: 100%;
|
||||
min-height: 100dvh;
|
||||
grid-template-columns: minmax(420px, 1fr) minmax(440px, 1.05fr);
|
||||
grid-template-areas: "form brand";
|
||||
}
|
||||
|
||||
.form-panel {
|
||||
grid-area: form;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.auth-shell :deep(.brand-panel) {
|
||||
grid-area: brand;
|
||||
height: 100dvh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mobile-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-inner {
|
||||
width: min(440px, 100%);
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,611 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import type {
|
||||
CreatePlatformOrganizationRequest,
|
||||
PlatformOrganizationDto,
|
||||
UpdatePlatformOrganizationRequest,
|
||||
UserRole,
|
||||
} from '@mento/shared';
|
||||
import { USER_ROLE_LABELS, USER_ROLES, isBusinessField } from '@mento/shared';
|
||||
import { platformApi } from '@/lib/platform-api';
|
||||
import { BUSINESS_FIELDS, BUSINESS_FIELD_LABELS } from '@/lib/business-fields';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
|
||||
const query = ref('');
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const success = ref('');
|
||||
const items = ref<PlatformOrganizationDto[]>([]);
|
||||
const openId = ref<string | null>(null);
|
||||
const detail = ref<PlatformOrganizationDto | null>(null);
|
||||
const busyId = ref('');
|
||||
|
||||
const showCreate = ref(false);
|
||||
const creating = ref(false);
|
||||
const createForm = reactive<CreatePlatformOrganizationRequest>({
|
||||
name: '',
|
||||
businessField: 'personal',
|
||||
ownerFullName: '',
|
||||
ownerEmail: '',
|
||||
ownerPassword: '',
|
||||
ownerMobile: '',
|
||||
});
|
||||
|
||||
const editingId = ref<string | null>(null);
|
||||
const savingEdit = ref(false);
|
||||
const editForm = reactive({
|
||||
name: '',
|
||||
slug: '',
|
||||
businessField: '' as string,
|
||||
});
|
||||
|
||||
function fieldLabel(value?: string | null) {
|
||||
if (!value) return '—';
|
||||
return isBusinessField(value) ? BUSINESS_FIELD_LABELS[value] : value;
|
||||
}
|
||||
|
||||
function apiError(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
return Array.isArray(msg) ? msg.join('، ') : (msg ?? fallback);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
function resetCreateForm() {
|
||||
createForm.name = '';
|
||||
createForm.businessField = 'personal';
|
||||
createForm.ownerFullName = '';
|
||||
createForm.ownerEmail = '';
|
||||
createForm.ownerPassword = '';
|
||||
createForm.ownerMobile = '';
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.get<PlatformOrganizationDto[]>(
|
||||
'/platform/organizations',
|
||||
{ params: query.value.trim() ? { q: query.value.trim() } : undefined },
|
||||
);
|
||||
items.value = data;
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'بارگذاری محیط‌ها ناموفق بود');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleOpen(org: PlatformOrganizationDto) {
|
||||
if (openId.value === org.id) {
|
||||
openId.value = null;
|
||||
detail.value = null;
|
||||
editingId.value = null;
|
||||
return;
|
||||
}
|
||||
openId.value = org.id;
|
||||
editingId.value = null;
|
||||
try {
|
||||
const { data } = await platformApi.get<PlatformOrganizationDto>(
|
||||
`/platform/organizations/${org.id}`,
|
||||
);
|
||||
detail.value = data;
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'بارگذاری اعضا ناموفق بود');
|
||||
}
|
||||
}
|
||||
|
||||
function startEdit(org: PlatformOrganizationDto) {
|
||||
editingId.value = org.id;
|
||||
editForm.name = org.name;
|
||||
editForm.slug = org.slug;
|
||||
editForm.businessField = org.businessField ?? '';
|
||||
success.value = '';
|
||||
error.value = '';
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
editingId.value = null;
|
||||
}
|
||||
|
||||
async function saveEdit(orgId: string) {
|
||||
savingEdit.value = true;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
try {
|
||||
const body: UpdatePlatformOrganizationRequest = {
|
||||
name: editForm.name.trim(),
|
||||
slug: editForm.slug.trim(),
|
||||
businessField: editForm.businessField || null,
|
||||
};
|
||||
const { data } = await platformApi.patch<PlatformOrganizationDto>(
|
||||
`/platform/organizations/${orgId}`,
|
||||
body,
|
||||
);
|
||||
items.value = items.value.map((row) =>
|
||||
row.id === orgId
|
||||
? {
|
||||
...row,
|
||||
name: data.name,
|
||||
slug: data.slug,
|
||||
businessField: data.businessField,
|
||||
isActive: data.isActive,
|
||||
}
|
||||
: row,
|
||||
);
|
||||
if (detail.value?.id === orgId) {
|
||||
detail.value = { ...detail.value, ...data };
|
||||
}
|
||||
editingId.value = null;
|
||||
success.value = 'اطلاعات محیط ذخیره شد';
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'ذخیره تغییرات ناموفق بود');
|
||||
} finally {
|
||||
savingEdit.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createOrganization() {
|
||||
creating.value = true;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
try {
|
||||
const body: CreatePlatformOrganizationRequest = {
|
||||
name: createForm.name.trim(),
|
||||
businessField: createForm.businessField || undefined,
|
||||
ownerFullName: createForm.ownerFullName.trim(),
|
||||
ownerEmail: createForm.ownerEmail.trim(),
|
||||
ownerPassword: createForm.ownerPassword,
|
||||
ownerMobile: createForm.ownerMobile?.trim() || undefined,
|
||||
};
|
||||
const { data } = await platformApi.post<PlatformOrganizationDto>(
|
||||
'/platform/organizations',
|
||||
body,
|
||||
);
|
||||
items.value = [data, ...items.value];
|
||||
showCreate.value = false;
|
||||
resetCreateForm();
|
||||
success.value = `محیط «${data.name}» ساخته شد`;
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'ساخت محیط ناموفق بود');
|
||||
} finally {
|
||||
creating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function setOrgActive(org: PlatformOrganizationDto, isActive: boolean) {
|
||||
busyId.value = org.id;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.patch<PlatformOrganizationDto>(
|
||||
`/platform/organizations/${org.id}`,
|
||||
{ isActive },
|
||||
);
|
||||
items.value = items.value.map((row) => (row.id === org.id ? { ...row, isActive } : row));
|
||||
if (detail.value?.id === org.id) {
|
||||
detail.value = { ...detail.value, ...data };
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر وضعیت محیط ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function setMembershipActive(membershipId: string, isActive: boolean) {
|
||||
busyId.value = membershipId;
|
||||
error.value = '';
|
||||
try {
|
||||
await platformApi.patch(`/platform/memberships/${membershipId}`, { isActive });
|
||||
if (openId.value) {
|
||||
const { data } = await platformApi.get<PlatformOrganizationDto>(
|
||||
`/platform/organizations/${openId.value}`,
|
||||
);
|
||||
detail.value = data;
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر عضویت ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function setMembershipRole(membershipId: string, role: UserRole) {
|
||||
busyId.value = `role-${membershipId}`;
|
||||
error.value = '';
|
||||
try {
|
||||
await platformApi.patch(`/platform/memberships/${membershipId}/role`, { role });
|
||||
if (openId.value) {
|
||||
const { data } = await platformApi.get<PlatformOrganizationDto>(
|
||||
`/platform/organizations/${openId.value}`,
|
||||
);
|
||||
detail.value = data;
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر نقش ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<header class="head">
|
||||
<div>
|
||||
<h1>محیط‌ها</h1>
|
||||
<p>ساخت، ویرایش و فعال/غیرفعال کردن سازمان‌ها و نقش اعضا.</p>
|
||||
</div>
|
||||
<div class="head-actions">
|
||||
<form class="search" @submit.prevent="load">
|
||||
<input v-model="query" type="search" placeholder="جستجوی نام یا اسلاگ" />
|
||||
<button class="btn" type="submit" :disabled="loading">جستجو</button>
|
||||
</form>
|
||||
<button class="btn" type="button" @click="showCreate = !showCreate">
|
||||
{{ showCreate ? 'بستن فرم' : 'محیط جدید' }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="success" class="ok">{{ success }}</p>
|
||||
|
||||
<form v-if="showCreate" class="panel" @submit.prevent="createOrganization">
|
||||
<h2>ساخت محیط جدید</h2>
|
||||
<div class="grid">
|
||||
<label>
|
||||
<span>نام محیط</span>
|
||||
<input v-model="createForm.name" required minlength="2" />
|
||||
</label>
|
||||
<label>
|
||||
<span>زمینه فعالیت</span>
|
||||
<select v-model="createForm.businessField">
|
||||
<option v-for="field in BUSINESS_FIELDS" :key="field" :value="field">
|
||||
{{ BUSINESS_FIELD_LABELS[field] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>نام مالک</span>
|
||||
<input v-model="createForm.ownerFullName" required minlength="2" />
|
||||
</label>
|
||||
<label>
|
||||
<span>ایمیل مالک</span>
|
||||
<input v-model="createForm.ownerEmail" type="email" required />
|
||||
</label>
|
||||
<label>
|
||||
<span>رمز مالک</span>
|
||||
<input v-model="createForm.ownerPassword" type="password" required minlength="8" />
|
||||
</label>
|
||||
<label>
|
||||
<span>موبایل مالک (اختیاری)</span>
|
||||
<input v-model="createForm.ownerMobile" type="tel" dir="ltr" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<button class="btn" type="submit" :disabled="creating">
|
||||
{{ creating ? 'در حال ساخت…' : 'ساخت محیط' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p v-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
<p v-else-if="!items.length" class="muted">محیطی پیدا نشد.</p>
|
||||
|
||||
<div v-else class="list">
|
||||
<article v-for="org in items" :key="org.id" class="row">
|
||||
<button type="button" class="row-main" @click="toggleOpen(org)">
|
||||
<div>
|
||||
<strong>{{ org.name }}</strong>
|
||||
<span>{{ org.slug }} · {{ fieldLabel(org.businessField) }}</span>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<em :class="org.isActive ? 'on' : 'off'">{{ org.isActive ? 'فعال' : 'غیرفعال' }}</em>
|
||||
<small>
|
||||
{{ toFaDigits(org.memberCount) }} عضو ·
|
||||
{{ toFaDigits(org.personCount) }} شخص ·
|
||||
{{ formatJalaliNumeric(new Date(org.createdAt)) }}
|
||||
</small>
|
||||
</div>
|
||||
</button>
|
||||
<div class="actions">
|
||||
<button class="btn btn-ghost" type="button" @click="startEdit(org)">ویرایش</button>
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="busyId === org.id"
|
||||
@click="setOrgActive(org, !org.isActive)"
|
||||
>
|
||||
{{ org.isActive ? 'غیرفعال کردن' : 'فعال کردن' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
v-if="editingId === org.id"
|
||||
class="edit-panel"
|
||||
@submit.prevent="saveEdit(org.id)"
|
||||
>
|
||||
<label>
|
||||
<span>نام</span>
|
||||
<input v-model="editForm.name" required minlength="2" />
|
||||
</label>
|
||||
<label>
|
||||
<span>اسلاگ</span>
|
||||
<input v-model="editForm.slug" required minlength="2" dir="ltr" />
|
||||
</label>
|
||||
<label>
|
||||
<span>زمینه فعالیت</span>
|
||||
<select v-model="editForm.businessField">
|
||||
<option value="">—</option>
|
||||
<option v-for="field in BUSINESS_FIELDS" :key="field" :value="field">
|
||||
{{ BUSINESS_FIELD_LABELS[field] }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="panel-actions">
|
||||
<button class="btn" type="submit" :disabled="savingEdit">ذخیره</button>
|
||||
<button class="btn btn-ghost" type="button" @click="cancelEdit">انصراف</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="openId === org.id" class="detail">
|
||||
<p v-if="!detail?.members?.length" class="muted">عضوی ثبت نشده.</p>
|
||||
<ul v-else>
|
||||
<li v-for="member in detail.members" :key="member.membershipId">
|
||||
<div>
|
||||
<strong>{{ member.fullName }}</strong>
|
||||
<span>
|
||||
{{ member.email }}
|
||||
· حساب {{ member.userIsActive ? 'فعال' : 'غیرفعال' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="member-actions">
|
||||
<select
|
||||
:value="member.role"
|
||||
:disabled="busyId === `role-${member.membershipId}`"
|
||||
@change="
|
||||
setMembershipRole(
|
||||
member.membershipId,
|
||||
($event.target as HTMLSelectElement).value as UserRole,
|
||||
)
|
||||
"
|
||||
>
|
||||
<option v-for="role in USER_ROLES" :key="role" :value="role">
|
||||
{{ USER_ROLE_LABELS[role] }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
:disabled="busyId === member.membershipId"
|
||||
@click="setMembershipActive(member.membershipId, !member.isActive)"
|
||||
>
|
||||
{{ member.isActive ? 'قطع دسترسی' : 'بازگشت دسترسی' }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 1040px;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0 0 0.3rem;
|
||||
}
|
||||
|
||||
.head p,
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.head-actions {
|
||||
display: flex;
|
||||
gap: 0.6rem;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.search input,
|
||||
.panel input,
|
||||
.panel select,
|
||||
.edit-panel input,
|
||||
.edit-panel select,
|
||||
.member-actions select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.65rem 0.8rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search input {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.ok {
|
||||
margin: 0;
|
||||
color: var(--success-deep);
|
||||
}
|
||||
|
||||
.panel,
|
||||
.edit-panel {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 14px;
|
||||
padding: 1rem;
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
label span {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 14px;
|
||||
padding: 0.85rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.row-main span,
|
||||
.row-main small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.on,
|
||||
.off {
|
||||
font-style: normal;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: var(--success-deep);
|
||||
}
|
||||
|
||||
.off {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.edit-panel {
|
||||
grid-column: 1 / -1;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.edit-panel .panel-actions {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.detail {
|
||||
grid-column: 1 / -1;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.detail ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.detail li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.member-actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid,
|
||||
.edit-panel {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
import type { PlatformUserDto, UserRole } from '@mento/shared';
|
||||
import { USER_ROLE_LABELS, USER_ROLES } from '@mento/shared';
|
||||
import { platformApi } from '@/lib/platform-api';
|
||||
import { formatJalaliNumeric, toFaDigits } from '@/lib/jalali';
|
||||
|
||||
const query = ref('');
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const success = ref('');
|
||||
const items = ref<PlatformUserDto[]>([]);
|
||||
const openId = ref<string | null>(null);
|
||||
const busyId = ref('');
|
||||
const resetUserId = ref<string | null>(null);
|
||||
const resetPassword = ref('');
|
||||
const resetting = ref(false);
|
||||
|
||||
function apiError(e: unknown, fallback: string) {
|
||||
if (axios.isAxiosError(e)) {
|
||||
const msg = (e.response?.data as { message?: string | string[] })?.message;
|
||||
return Array.isArray(msg) ? msg.join('، ') : (msg ?? fallback);
|
||||
}
|
||||
return fallback;
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.get<PlatformUserDto[]>('/platform/users', {
|
||||
params: query.value.trim() ? { q: query.value.trim() } : undefined,
|
||||
});
|
||||
items.value = data;
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'بارگذاری کاربران ناموفق بود');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleOpen(id: string) {
|
||||
openId.value = openId.value === id ? null : id;
|
||||
if (resetUserId.value !== id) {
|
||||
resetUserId.value = null;
|
||||
resetPassword.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function startReset(userId: string) {
|
||||
resetUserId.value = resetUserId.value === userId ? null : userId;
|
||||
resetPassword.value = '';
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
}
|
||||
|
||||
async function submitReset(userId: string) {
|
||||
resetting.value = true;
|
||||
error.value = '';
|
||||
success.value = '';
|
||||
try {
|
||||
await platformApi.patch(`/platform/users/${userId}/password`, {
|
||||
password: resetPassword.value,
|
||||
});
|
||||
success.value = 'رمز عبور به‌روز شد';
|
||||
resetUserId.value = null;
|
||||
resetPassword.value = '';
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'ریست رمز ناموفق بود');
|
||||
} finally {
|
||||
resetting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function setUserActive(user: PlatformUserDto, isActive: boolean) {
|
||||
busyId.value = user.id;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.patch<PlatformUserDto>(
|
||||
`/platform/users/${user.id}`,
|
||||
{ isActive },
|
||||
);
|
||||
items.value = items.value.map((row) => (row.id === user.id ? data : row));
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر وضعیت کاربر ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function setMembershipActive(userId: string, membershipId: string, isActive: boolean) {
|
||||
busyId.value = membershipId;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.patch<PlatformUserDto>(
|
||||
`/platform/memberships/${membershipId}`,
|
||||
{ isActive },
|
||||
);
|
||||
items.value = items.value.map((row) => (row.id === userId ? data : row));
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر عضویت ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function setMembershipRole(userId: string, membershipId: string, role: UserRole) {
|
||||
busyId.value = `role-${membershipId}`;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await platformApi.patch<PlatformUserDto>(
|
||||
`/platform/memberships/${membershipId}/role`,
|
||||
{ role },
|
||||
);
|
||||
items.value = items.value.map((row) => (row.id === userId ? data : row));
|
||||
} catch (e) {
|
||||
error.value = apiError(e, 'تغییر نقش ناموفق بود');
|
||||
} finally {
|
||||
busyId.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void load();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page">
|
||||
<header class="head">
|
||||
<div>
|
||||
<h1>کاربران</h1>
|
||||
<p>فعال/غیرفعال حساب، نقش عضویت و ریست رمز عبور.</p>
|
||||
</div>
|
||||
<form class="search" @submit.prevent="load">
|
||||
<input v-model="query" type="search" placeholder="نام، ایمیل یا موبایل" />
|
||||
<button class="btn" type="submit" :disabled="loading">جستجو</button>
|
||||
</form>
|
||||
</header>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<p v-else-if="success" class="ok">{{ success }}</p>
|
||||
<p v-else-if="loading" class="muted">در حال بارگذاری…</p>
|
||||
<p v-else-if="!items.length" class="muted">کاربری پیدا نشد.</p>
|
||||
|
||||
<div v-else class="list">
|
||||
<article v-for="user in items" :key="user.id" class="row">
|
||||
<button type="button" class="row-main" @click="toggleOpen(user.id)">
|
||||
<div>
|
||||
<strong>{{ user.fullName }}</strong>
|
||||
<span>{{ user.email }}{{ user.mobile ? ` · ${user.mobile}` : '' }}</span>
|
||||
</div>
|
||||
<div class="meta">
|
||||
<em :class="user.isActive ? 'on' : 'off'">{{ user.isActive ? 'فعال' : 'غیرفعال' }}</em>
|
||||
<small>
|
||||
{{ toFaDigits(user.memberships.length) }} محیط
|
||||
<template v-if="user.lastLoginAt">
|
||||
· آخرین ورود {{ formatJalaliNumeric(new Date(user.lastLoginAt)) }}
|
||||
</template>
|
||||
</small>
|
||||
</div>
|
||||
</button>
|
||||
<div class="actions">
|
||||
<button class="btn btn-ghost" type="button" @click="startReset(user.id)">
|
||||
ریست رمز
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
type="button"
|
||||
:disabled="busyId === user.id"
|
||||
@click="setUserActive(user, !user.isActive)"
|
||||
>
|
||||
{{ user.isActive ? 'غیرفعال کردن حساب' : 'فعال کردن حساب' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form
|
||||
v-if="resetUserId === user.id"
|
||||
class="reset-panel"
|
||||
@submit.prevent="submitReset(user.id)"
|
||||
>
|
||||
<label>
|
||||
<span>رمز جدید (حداقل ۸ کاراکتر)</span>
|
||||
<input
|
||||
v-model="resetPassword"
|
||||
type="password"
|
||||
required
|
||||
minlength="8"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</label>
|
||||
<div class="panel-actions">
|
||||
<button class="btn" type="submit" :disabled="resetting">
|
||||
{{ resetting ? 'در حال ذخیره…' : 'ذخیره رمز' }}
|
||||
</button>
|
||||
<button class="btn btn-ghost" type="button" @click="startReset(user.id)">
|
||||
انصراف
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="openId === user.id" class="detail">
|
||||
<p v-if="!user.memberships.length" class="muted">عضو هیچ محیطی نیست.</p>
|
||||
<ul v-else>
|
||||
<li v-for="mem in user.memberships" :key="mem.membershipId">
|
||||
<div>
|
||||
<strong>{{ mem.organizationName }}</strong>
|
||||
<span>
|
||||
محیط {{ mem.organizationIsActive ? 'فعال' : 'غیرفعال' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="member-actions">
|
||||
<select
|
||||
:value="mem.role"
|
||||
:disabled="busyId === `role-${mem.membershipId}`"
|
||||
@change="
|
||||
setMembershipRole(
|
||||
user.id,
|
||||
mem.membershipId,
|
||||
($event.target as HTMLSelectElement).value as UserRole,
|
||||
)
|
||||
"
|
||||
>
|
||||
<option v-for="role in USER_ROLES" :key="role" :value="role">
|
||||
{{ USER_ROLE_LABELS[role] }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-ghost"
|
||||
type="button"
|
||||
:disabled="busyId === mem.membershipId"
|
||||
@click="setMembershipActive(user.id, mem.membershipId, !mem.isActive)"
|
||||
>
|
||||
{{ mem.isActive ? 'قطع دسترسی' : 'بازگشت دسترسی' }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
max-width: 1040px;
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.head h1 {
|
||||
margin: 0 0 0.3rem;
|
||||
}
|
||||
|
||||
.head p,
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.search {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.search input,
|
||||
.reset-panel input,
|
||||
.member-actions select {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 0.65rem 0.8rem;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.search input {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.ok {
|
||||
margin: 0;
|
||||
color: var(--success-deep);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.row {
|
||||
background: #fff;
|
||||
border: 1px solid #eef2f7;
|
||||
border-radius: 14px;
|
||||
padding: 0.85rem 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.row-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.row-main span,
|
||||
.row-main small {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
.meta {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.on,
|
||||
.off {
|
||||
font-style: normal;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.on {
|
||||
color: var(--success-deep);
|
||||
}
|
||||
|
||||
.off {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.reset-panel {
|
||||
grid-column: 1 / -1;
|
||||
background: #f8fafc;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.85rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.reset-panel label {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.reset-panel span {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.detail {
|
||||
grid-column: 1 / -1;
|
||||
border-top: 1px solid var(--line);
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.detail ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
.detail li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail span {
|
||||
display: block;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.member-actions {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user