پرش به مطلب اصلی

Audit Log

کامپوننت‌های x-audit-log و x-audit-detail-modal برای نمایش و بررسی رخدادهای سیستم (Audit Log) در صفحات Blade استفاده می‌شوند. این دو کامپوننت در کنار یکدیگر امکان نمایش خلاصه رخدادها، مشاهده جزئیات کامل، بررسی تغییرات داده‌ها و شخصی‌سازی اطلاعات را فراهم می‌کنند.

ویژگی‌ها​

  • پشتیبانی از نمایش خلاصه و جزئیات رخدادهای سیستم
  • نمایش اطلاعات کاربر، بخش، آدرس IP و زمان رخداد
  • پشتیبانی از عملیات create، update و delete
  • تبدیل خودکار تاریخ به شمسی
  • نمایش توضیحات سفارشی
  • نمایش داده‌های Raw JSON
  • نمایش جدول مقایسه‌ای تغییرات (Old / New)
  • امکان شخصی‌سازی اطلاعات از طریق کلاس AuditDetailModal
  • طراحی Responsive و قابل استفاده در تمامی صفحات Blade

x-audit-log

کامپوننت x-audit-log برای نمایش خلاصه اطلاعات یک رخداد (Audit Log) استفاده می‌شود. این کامپوننت اطلاعات اصلی هر عملیات را در قالب یک کارت نمایش می‌دهد و در صورت تعیین شناسه Modal، امکان مشاهده جزئیات کامل رخداد را نیز فراهم می‌کند.

ورودی‌های کامپوننت​

نام پراپنوع دادهمقدار پیش‌فرضتوضیحات
typestring-نوع عملیات (create، update یا delete)
userFullNamestring-نام کاربر
sectionstring-بخش یا ماژول سیستم
ipstring-آدرس IP
datetimeCarbon-تاریخ و زمان رخداد
nationalCodestringnullکد ملی کاربر
logDetailModalIdstringnullشناسه Modal جهت نمایش جزئیات

Slot​

در صورت قرار دادن محتوا داخل کامپوننت، محتوای Slot به عنوان توضیحات رخداد در پایین کارت نمایش داده می‌شود.

<x-audit-log
    ...
>
    اطلاعات کاربر با موفقیت بروزرسانی شد.
</x-audit-log>

مثال استفاده​

<x-audit-log
    type="update"
    user-full-name="محمد محمدی"
    section="کاربران"
    ip="192.168.1.10"
    :datetime="now()"
    national-code="0019606737"
    log-detail-modal-id="audit-log-modal"
>
    اطلاعات کاربر با موفقیت بروزرسانی شد.
</x-audit-log>

x-audit-detail-modal

کامپوننت x-audit-detail-modal برای نمایش اطلاعات کامل یک رخداد در قالب Modal استفاده می‌شود. این کامپوننت علاوه بر نمایش اطلاعات کاربر و رویداد، امکان نمایش داده‌های خام (Raw JSON)، مقایسه تغییرات (Old / New) و بروزرسانی اطلاعات به صورت داینامیک را نیز فراهم می‌کند.

ورودی‌های کامپوننت​

نام پراپنوع دادهمقدار پیش‌فرضتوضیحات
idstring-شناسه یکتای Modal
typestring-نوع عملیات (create، update یا delete)
userFullNamestring-نام کاربر
sectionstring-بخش سیستم
ipstring-آدرس IP
datetimeCarbon-تاریخ و زمان رخداد
nationalCodestringnullکد ملی
badgeClassstringnullکلاس سفارشی Badge
descriptionstringnullتوضیحات سفارشی

نحوه استفاده​

<x-audit-detail-modal
    id="audit-log-modal"
    type="update"
    user-full-name="علی عابدی"
    section="کاربران"
    ip="192.168.1.1"
    :datetime="now()"
    national-code="0019606737"
    description="اطلاعات کاربر بروزرسانی شد."
/>

استفاده همزمان از دو کامپوننت

در اکثر سناریوها، این دو کامپوننت در کنار یکدیگر استفاده می‌شوند. کامپوننت x-audit-log اطلاعات خلاصه را نمایش می‌دهد و با استفاده از پراپ logDetailModalId، Modal مربوطه را برای نمایش جزئیات باز می‌کند.

مقدار logDetailModalId در کامپوننت x-audit-log باید دقیقاً با مقدار id در کامپوننت x-audit-detail-modal یکسان باشد.

<x-audit-log
    type="update"
    user-full-name="علی عابدی"
    section="کاربران"
    ip="192.168.1.1"
    :datetime="now()"
    national-code="0019606737"
    log-detail-modal-id="audit-log-modal"
>
    اطلاعات کاربر بروزرسانی شد.
</x-audit-log>

<x-audit-detail-modal
    id="audit-log-modal"
    type="update"
    user-full-name="علی عابدی"
    section="کاربران"
    ip="192.168.1.1"
    :datetime="now()"
    national-code="0019606737"
/>

کلاس AuditDetailModal

پس از Render شدن صفحه، می‌توانید با استفاده از کلاس AuditDetailModal اطلاعات نمایش داده شده در Modal را به صورت داینامیک تغییر دهید. این قابلیت زمانی کاربرد دارد که اطلاعات از طریق Ajax یا API دریافت شوند و نیازی به Render مجدد Blade نباشد.

ایجاد نمونه​

const auditDetailModal = new AuditDetailModal("audit-log-modal");

متدهای قابل استفاده​

متدتوضیحات
setUser()تغییر نام کاربر
setNationalCode()تغییر کد ملی
setSection()تغییر بخش سیستم
setIp()تغییر آدرس IP
setDateTime()تغییر تاریخ و زمان
setLogType()تغییر نوع عملیات
setTitle()تغییر عنوان Modal
setDescription()تغییر توضیحات
setStatus()تغییر وضعیت
setBadgeValue()تغییر متن Badge
setBadgeClass()تغییر کلاس Badge
setIconClass()تغییر آیکون
setIconColor()تغییر رنگ آیکون
setColor()تغییر رنگ متن
setData()بروزرسانی همزمان اطلاعات
getData()دریافت اطلاعات فعلی
getValue()دریافت مقدار یک فیلد
init()مقداردهی اطلاعات Activity و تولید جدول مقایسه‌ای

بروزرسانی اطلاعات​

برای تغییر همزمان اطلاعات نمایش داده شده در Modal می‌توانید از متد setData() استفاده کنید.

auditDetailModal.setData({
  user: "علی عابدی",
  section: "کاربران",
  ip: "192.168.1.1",
  logType: "update",
  description: "اطلاعات کاربر بروزرسانی شد.",
});

نمایش اطلاعات Activity​

برای نمایش داده‌های قدیم و جدید و تولید جدول مقایسه‌ای از متد init() استفاده کنید.

auditDetailModal.init(data);

ساختار داده باید به صورت زیر باشد:

const data = {
    old: {
        ...
    },
    new: {
        ...
    }
};

پس از فراخوانی این متد، کامپوننت به صورت خودکار:

  • داده‌های Raw JSON را نمایش می‌دهد.
  • جدول مقایسه‌ای تغییرات را ایجاد می‌کند.
  • مقادیر قدیم و جدید را در کنار یکدیگر نمایش می‌دهد.
نکات مهم
  • مقدار datetime باید از نوع Carbon باشد.
  • مقدار type فقط یکی از create، update یا delete باشد.
  • مقدار id در کامپوننت x-audit-detail-modal باید یکتا باشد.
  • مقدار logDetailModalId در کامپوننت x-audit-log باید با id کامپوننت x-audit-detail-modal یکسان باشد.
  • در صورت عدم ارسال description، بخش توضیحات نمایش داده نخواهد شد.
  • داده‌های Activity تنها با فراخوانی متد init() نمایش داده می‌شوند.

نمونه کامل​

<x-audit-log
    type="update"
    user-full-name="علی عابدی"
    section="کاربران"
    ip="192.168.1.1"
    :datetime="now()"
    national-code="0019606737"
    log-detail-modal-id="audit-log-modal"
>
    اطلاعات کاربر بروزرسانی شد.
</x-audit-log>

<x-audit-detail-modal
    id="audit-log-modal"
    type="update"
    user-full-name="علی عابدی"
    section="کاربران"
    ip="192.168.1.1"
    :datetime="now()"
    national-code="0019606737"
/>

<script>
const auditDetailModal = new AuditDetailModal("audit-log-modal");

auditDetailModal.setTitle("جزئیات لاگ");

auditDetailModal.setData({
    user: "علی عابدی",
    section: "کاربران",
    ip: "192.168.1.1",
    logType: "update",
    description: "اطلاعات کاربر بروزرسانی شد."
});

auditDetailModal.init(data);
</script>