Lucky_Wheel/apps/admin/src/views/managers/AdminFormDrawer.vue

<script setup lang="ts">
import {
  ApartmentOutlined,
  KeyOutlined,
  SafetyCertificateOutlined,
  SaveOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { apiClient } from '../../services/api/client';

const props = defineProps<{
  open: boolean;
  adminId?: string | null;
}>();

const emit = defineEmits<{
  (e: 'update:open', val: boolean): void;
  (e: 'saved'): void;
}>();

const loading = ref(false);
const submitting = ref(false);
const rolesList = ref<any[]>([]);
const workspacesList = ref<any[]>([]);
const campaignsList = ref<any[]>([]);

const formState = reactive({
  name: '',
  email: '',
  mobile: '',
  password: '',
  status: 'ACTIVE',
  isSuperAdmin: false,
  roleIds: [] as string[],
  workspaceId: '',
  scopeType: 'ALL',
  specificCampaignIds: [] as string[],
});

const isEdit = computed(() => !!props.adminId);

async function loadMetadata() {
  try {
    const [rolesRes, wsRes, campRes] = await Promise.all([
      apiClient.get('/admin/roles'),
      apiClient.get('/admin/workspaces'),
      apiClient.get('/admin/campaigns', { params: { pageSize: 100 } }),
    ]);
    rolesList.value = Array.isArray(rolesRes.data) ? rolesRes.data : rolesRes.data?.data || [];
    workspacesList.value = Array.isArray(wsRes.data) ? wsRes.data : wsRes.data?.data || [];
    campaignsList.value = Array.isArray(campRes.data) ? campRes.data : campRes.data?.data || [];
  } catch (err) {
    // Handled
  }
}

async function loadAdminData(id: string) {
  loading.value = true;
  try {
    const res = await apiClient.get(`/admin/managers/${id}`);
    const a = res.data;
    formState.name = a.name || '';
    formState.email = a.email || '';
    formState.mobile = a.mobile || '';
    formState.password = '';
    formState.status = a.status || 'ACTIVE';
    formState.isSuperAdmin = !!a.isSuperAdmin;
    formState.roleIds = a.roles ? a.roles.map((r: any) => r.role?.id || r.roleId) : [];

    if (a.workspaceAssignments && a.workspaceAssignments.length > 0) {
      const wa = a.workspaceAssignments[0];
      formState.workspaceId = wa.workspaceId || wa.workspace?.id || '';
      formState.scopeType = wa.scopeType || 'ALL';
      formState.specificCampaignIds = Array.isArray(wa.specificCampaignIds) ? wa.specificCampaignIds : [];
    } else {
      formState.workspaceId = workspacesList.value[0]?.id || '';
      formState.scopeType = 'ALL';
      formState.specificCampaignIds = [];
    }
  } finally {
    loading.value = false;
  }
}

function resetForm() {
  formState.name = '';
  formState.email = '';
  formState.mobile = '';
  formState.password = '';
  formState.status = 'ACTIVE';
  formState.isSuperAdmin = false;
  formState.roleIds = [];
  formState.workspaceId = workspacesList.value[0]?.id || '';
  formState.scopeType = 'ALL';
  formState.specificCampaignIds = [];
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      loadMetadata();
      if (props.adminId) {
        loadAdminData(props.adminId);
      } else {
        resetForm();
      }
    }
  },
);

async function onSubmit() {
  if (!formState.name.trim()) {
    message.error('لطفاً نام و نام خانوادگی مدیر را وارد کنید.');
    return;
  }
  if (!formState.email.trim() || !formState.email.includes('@')) {
    message.error('لطفاً یک آدرس ایمیل معتبر وارد کنید.');
    return;
  }
  if (!formState.mobile.trim() || !/^09\d{9}$/.test(formState.mobile.trim())) {
    message.error('شماره موبایل باید ۱۱ رقمی بوده و با ۰۹ شروع شود.');
    return;
  }
  if (!isEdit.value && (!formState.password || formState.password.length < 6)) {
    message.error('کلمه عبور باید حداقل ۶ کاراکتر باشد.');
    return;
  }

  submitting.value = true;
  try {
    const payload: any = {
      name: formState.name.trim(),
      email: formState.email.trim().toLowerCase(),
      mobile: formState.mobile.trim(),
      status: formState.status,
      isSuperAdmin: formState.isSuperAdmin,
      roleIds: formState.roleIds,
    };

    if (formState.password) {
      payload.password = formState.password;
    }

    if (formState.workspaceId) {
      payload.workspaceAssignments = [
        {
          workspaceId: formState.workspaceId,
          scopeType: formState.scopeType,
          specificCampaignIds:
            formState.scopeType === 'CUSTOM_CAMPAIGNS' ? formState.specificCampaignIds : undefined,
        },
      ];
    }

    if (isEdit.value && props.adminId) {
      await apiClient.patch(`/admin/managers/${props.adminId}`, payload);
      message.success('مشخصات مدیر با موفقیت به‌روزرسانی شد.');
    } else {
      await apiClient.post('/admin/managers', payload);
      message.success('مدیر جدید با موفقیت ایجاد شد.');
    }

    emit('saved');
    emit('update:open', false);
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <a-drawer
    :open="open"
    :title="isEdit ? 'ویرایش اطلاعات مدیر' : 'افزودن مدیر جدید به سامانه'"
    :width="540"
    placement="right"
    :maskClosable="false"
    rootClassName="admin-form-drawer-rtl"
    @close="emit('update:open', false)"
  >
    <a-spin :spinning="loading">
      <a-form layout="vertical">
        <a-tabs defaultActiveKey="1" class="admin-form-tabs">
          <!-- TAB 1: اطلاعات فردی و ورود -->
          <a-tab-pane key="1">
            <template #tab>
              <span><UserOutlined /> اطلاعات هویتی</span>
            </template>

            <a-form-item label="نام و نام خانوادگی" required>
              <a-input
                v-model:value="formState.name"
                placeholder="مثال: علی رضایی"
                size="large"
              />
            </a-form-item>

            <a-form-item label="شماره موبایل سازمانی" required>
              <a-input
                v-model:value="formState.mobile"
                placeholder="09xxxxxxxxx"
                dir="ltr"
                size="large"
                maxLength="11"
              />
            </a-form-item>

            <a-form-item label="ایمیل سازمانی (نام کاربری ورود)" required>
              <a-input
                v-model:value="formState.email"
                placeholder="admin@example.com"
                dir="ltr"
                size="large"
              />
            </a-form-item>

            <a-form-item
              :label="isEdit ? 'کلمه عبور جدید (در صورت نیاز به تغییر)' : 'کلمه عبور ورود'"
              :required="!isEdit"
            >
              <a-input-password
                v-model:value="formState.password"
                placeholder="حداقل ۶ کاراکتر"
                size="large"
                dir="ltr"
              />
            </a-form-item>

            <a-form-item label="وضعیت حساب کاربری">
              <a-radio-group v-model:value="formState.status" buttonStyle="solid">
                <a-radio-button value="ACTIVE">فعال</a-radio-button>
                <a-radio-button value="DISABLED">غیرفعال / مسدود</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-tab-pane>

          <!-- TAB 2: نقش‌ها و اختیارات -->
          <a-tab-pane key="2">
            <template #tab>
              <span><SafetyCertificateOutlined /> نقش‌ها و اختیارات</span>
            </template>

            <div class="super-admin-banner">
              <a-checkbox v-model:checked="formState.isSuperAdmin">
                <strong style="color: #7c3aed; font-size: 15px">مدیر ارشد سامانه (Super Admin)</strong>
              </a-checkbox>
              <p class="banner-sub">
                مدیر ارشد دسترسی کامل و بی‌قیدوشرط به تمامی بخش‌ها، ایجاد مدیران و تنظیمات کلی سامانه دارد.
              </p>
            </div>

            <a-divider style="margin: 16px 0" />

            <a-form-item label="نقش‌های سازمانی (می‌توانید چند نقش همزمان انتخاب کنید)">
              <div v-if="rolesList.length === 0" style="color: #94a3b8">
                در حال بارگذاری نقش‌ها...
              </div>
              <a-checkbox-group
                v-else
                v-model:value="formState.roleIds"
                style="width: 100%"
                :disabled="formState.isSuperAdmin"
              >
                <a-row :gutter="[12, 12]">
                  <a-col :span="24" v-for="r in rolesList" :key="r.id">
                    <div class="role-item-card" :class="{ 'is-selected': formState.roleIds.includes(r.id) }">
                      <a-checkbox :value="r.id">
                        <span class="role-name">{{ r.name }}</span>
                        <a-tag v-if="r.isSystem" color="blue" size="small" style="margin-right: 6px">سیستمی</a-tag>
                      </a-checkbox>
                      <div class="role-desc">{{ r.description || 'بدون توضیح' }}</div>
                    </div>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-form-item>
          </a-tab-pane>

          <!-- TAB 3: فضاهای کاری و اسکوپ دسترسی -->
          <a-tab-pane key="3">
            <template #tab>
              <span><ApartmentOutlined /> قلمرو و فضای کاری</span>
            </template>

            <a-form-item label="فضای کاری مجاز">
              <a-select
                v-model:value="formState.workspaceId"
                placeholder="انتخاب فضای کاری"
                size="large"
                style="width: 100%"
              >
                <a-select-option v-for="ws in workspacesList" :key="ws.id" :value="ws.id">
                  {{ ws.name }} ({{ ws.slug }})
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="قلمرو دسترسی کمپین‌ها (Scope)">
              <a-radio-group v-model:value="formState.scopeType" style="margin-bottom: 12px">
                <a-radio value="ALL">دسترسی به تمامی کمپین‌های این فضای کاری</a-radio>
                <a-radio value="CUSTOM_CAMPAIGNS">محدود به کمپین‌های خاص</a-radio>
              </a-radio-group>

              <div v-if="formState.scopeType === 'CUSTOM_CAMPAIGNS'" style="margin-top: 8px">
                <a-select
                  v-model:value="formState.specificCampaignIds"
                  mode="multiple"
                  placeholder="کمپین‌های مجاز را انتخاب کنید"
                  size="large"
                  style="width: 100%"
                >
                  <a-select-option v-for="c in campaignsList" :key="c.id" :value="c.id">
                    {{ c.title }}
                  </a-select-option>
                </a-select>
              </div>
            </a-form-item>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>

    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 8px">
        <a-button @click="emit('update:open', false)">انصراف</a-button>
        <a-button type="primary" :loading="submitting" @click="onSubmit">
          <template #icon><SaveOutlined /></template>
          {{ isEdit ? 'ذخیره تغییرات' : 'ثبت مدیر' }}
        </a-button>
      </div>
    </template>
  </a-drawer>
</template>

<style scoped>
.super-admin-banner {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 12px 16px;
}
.banner-sub {
  margin: 6px 0 0 24px;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.6;
}
.role-item-card {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #fff;
}
.role-item-card.is-selected {
  border-color: #3b82f6;
  background: #eff6ff;
}
.role-name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
}
.role-desc {
  margin-right: 24px;
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

:deep(.ant-drawer-content) {
  direction: rtl;
  text-align: right;
}
:deep(.ant-drawer-header) {
  direction: rtl;
  text-align: right;
}
:deep(.ant-drawer-title) {
  text-align: right;
}
:deep(.ant-drawer-close) {
  margin-right: 0;
  margin-left: var(--ant-margin-xs, 8px);
}
</style>