itsm-plugin

v1.0.5

Published

a month ago

ITSM Request Widget - Standalone HTML plugin với native HTML/CSS, tích hợp vào MVC, Angular, React, Vue, PHP, Java và bất kỳ web project nào

0High
0Medium
0Low

tuanth.it

itsm widget angular react vue mvc aspnet standalone native ticket request helpdesk support

ITSM Widget

Plugin HTML standalone để Tạo phiếu yêu cầu ITSM. Widget sử dụng native HTML/CSS, không phụ thuộc vào bất kỳ framework hay thư viện nào, có thể tích hợp vào:

✅ MVC/ASP.NET (.NET Framework, .NET Core)
✅ Angular (bất kỳ version nào)
✅ React
✅ Vue.js
✅ Vanilla HTML/JavaScript
✅ Blazor (.NET)
✅ PHP, Java, JSP
✅ Bất kỳ web project nào

Lưu ý: Widget là standalone JavaScript với native HTML/CSS, không cần bất kỳ thư viện hay framework nào.

Tính năng

🎯 Icon nổi ở góc dưới bên phải màn hình
📝 Form nhập phiếu yêu cầu ITSM với các trường:
- Tiêu đề (bắt buộc)
- Mô tả (bắt buộc)
- Danh mục (Phần cứng, Phần mềm, Mạng, Tài khoản, Khác)
- Mức độ ưu tiên (Thấp, Trung bình, Cao, Khẩn cấp)
- Thông tin liên hệ
- Tệp đính kèm (nhiều file)
🎨 Giao diện native HTML/CSS đẹp mắt
📱 Responsive, hỗ trợ mobile
🔌 Dễ dàng tích hợp vào bất kỳ project nào

Cài đặt

📖 Xem chi tiết: INSTALLATION.md - Hướng dẫn cài đặt cho từng platform (MVC, Angular, React, Vue, v.v.)

Cách 1: Cài đặt qua npm (Khuyến nghị)

npm install itsm-widget

Sau khi cài đặt, files sẽ nằm trong node_modules/itsm-widget/dist/:

Với Angular:

// angular.json
{
  "scripts": [
    "node_modules/itsm-widget/dist/itsm-widget.min.js"
  ],
  "styles": [
    "node_modules/itsm-widget/dist/itsm-widget.min.css"
  ]
}

Với React/Vue:

// Import trong code
import 'itsm-widget/dist/itsm-widget.min.css';
import 'itsm-widget/dist/itsm-widget.min.js';

Với HTML/JavaScript:

<link rel="stylesheet" href="node_modules/itsm-widget/dist/itsm-widget.min.css">
<script src="node_modules/itsm-widget/dist/itsm-widget.min.js"></script>

Cách 2: Sử dụng file đã build (Manual)

Copy 2 file sau vào project của bạn:
- dist/itsm-widget.min.js
- dist/itsm-widget.min.css
Thêm vào index.html:

<!DOCTYPE html>
<html>
<head>
  <!-- ITSM Widget CSS -->
  <link rel="stylesheet" href="path/to/itsm-widget.min.css">
</head>
<body>
  <!-- Your content -->
  
  <script src="path/to/itsm-widget.min.js"></script>
  <script>
    // Cấu hình widget
    const itsmWidget = new ITSMWidget({
      apiBaseUrl: 'https://your-api-domain.com',
      apiKey: 'your-api-key',
      tenant: 'your-tenant-name',
      position: 'bottom-right',
      iconText: '📝',
      iconColor: '#007bff',
      title: 'Tạo phiếu yêu cầu ITSM',
      onSuccess: function(response) {
        console.log('Request submitted:', response);
      }
    });
  </script>
</body>
</html>

Cách 2: Sử dụng với Angular 10

Copy các file vào assets folder:

src/assets/
  ├── itsm-widget.min.js
  └── itsm-widget.min.css

Thêm vào angular.json:

{
  "projects": {
    "your-project": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "src/assets/itsm-widget.min.js"
            ],
            "styles": [
              "src/assets/itsm-widget.min.css"
            ]
          }
        }
      }
    }
  }
}

Khởi tạo trong app.component.ts:

import { Component, OnInit } from '@angular/core';

declare var ITSMWidget: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'your-app';

  ngOnInit() {
    // Khởi tạo ITSM Widget
    const itsmWidget = new ITSMWidget({
      apiBaseUrl: 'https://your-api-domain.com',
      apiToken: 'your-api-token', // Optional
      position: 'bottom-right',
      iconText: '📝',
      iconColor: '#007bff',
      title: 'Tạo phiếu yêu cầu ITSM',
      onSuccess: (response) => {
        console.log('Request submitted:', response);
        // Có thể hiển thị thông báo tại đây
      }
    });

    // Lưu instance để có thể destroy sau này
    (window as any).itsmWidgetInstance = itsmWidget;
  }
}

Cách 4: Auto-initialize với data attributes

<script 
  src="path/to/itsm-widget.min.js" 
  data-itsm-config='{"apiBaseUrl":"https://your-api-domain.com","iconColor":"#007bff"}'>
</script>

Build từ source

Cài đặt dependencies:

npm install

Test widget (development mode):

npm run test

Lệnh này sẽ:

Khởi động webpack dev server
Mở browser tự động tại http://localhost:9000
Hot reload khi có thay đổi code
Source map để debug dễ dàng

Test với file đã build:

npm run test:build

Lệnh này sẽ:

Build widget trước
Khởi động HTTP server tại http://localhost:8080
Mở file example.html

Build production:

npm run build

Files sẽ được tạo trong thư mục dist/:

itsm-widget.min.js (production, minified)
itsm-widget.min.css (production, minified)

Development watch mode:

npm run dev

Rebuild tự động khi có thay đổi (không có dev server)

Cấu hình

Options

| Option | Type | Default | Mô tả | |--------|------|---------|-------| | apiBaseUrl | string | '' | Base URL của API ITSM (bắt buộc) | | apiKey | string | '' | API Key để xác thực (bắt buộc) | | tenant | string | '' | Tenant name (pn header) (bắt buộc) | | apiToken | string | '' | Backward compatibility - sẽ dùng làm apiKey nếu apiKey không có | | position | string | 'bottom-right' | Vị trí icon: 'bottom-right' hoặc 'bottom-left' | | iconText | string | '📝' | Text/emoji hiển thị trên icon (mặc định: 📝) | | iconColor | string | '#007bff' | Màu nền của icon | | title | string | 'Tạo phiếu yêu cầu ITSM' | Tiêu đề modal | | requesterName | string | '' | Tên người yêu cầu (nếu không có sẽ dùng contact từ form) | | site | string | '' | Tên site/địa điểm | | udf_fields | object | {} | Custom fields (udf_fields) cho request | | onSuccess | function | null | Callback khi gửi thành công |

API Endpoints

Widget sử dụng ITSM API Service để gọi các API sau:

1. Tạo yêu cầu mới:

POST {apiBaseUrl}/{tenant}/send

Headers:

authtoken: {apiKey}
pn: {tenant}
Content-Type: multipart/form-data

Body (FormData):

input_data: JSON string chứa thông tin request

2. Upload file đính kèm:

PUT {apiBaseUrl}/{tenant}/{id}/upload

Headers:

authtoken: {apiKey}
pn: {tenant}
Content-Type: multipart/form-data

Response mẫu (tạo request thành công):

{
  "response_status": {
    "status_code": 2000,
    "status": "success"
  },
  "request": {
    "id": "18391",
    "ola_due_by_time": null,
    "resolution": {
      "resolution_attachments": [],
      "content": null
    },
    "onhold_time": null,
    "is_trashed": false
  }
}

Response mẫu (lỗi):

{
  "error": "API Key không hợp lệ."
}

Xem chi tiết API tại file tài liệu trong src/assets/13082025 API v2 SDP ITSM SPC.doc

Ví dụ sử dụng

Basic usage

const widget = new ITSMWidget({
  apiBaseUrl: 'https://your-api-domain.com',
  apiKey: 'your-api-key',
  tenant: 'your-tenant-name',
  iconColor: '#28a745',
  requesterName: 'Nguyễn Văn A', // Optional
  site: 'Your Site Name', // Optional
  udf_fields: { // Optional
    udf_pick_301: 'Value 1',
    udf_pick_302: 'Value 2'
  }
});

Custom styling

Bạn có thể override CSS để phù hợp với theme của project:

/* Override icon color */
.itsm-widget-icon {
  background-color: #your-color !important;
}

/* Override modal width */
.itsm-modal-container {
  max-width: 800px !important;
}

Cleanup

Để xóa widget khỏi page:

if (window.itsmWidgetInstance) {
  window.itsmWidgetInstance.destroy();
}

Yêu cầu

Modern browser (ES6+)
Không phụ thuộc vào framework (có thể dùng với Angular, React, Vue, hoặc vanilla JS)

Tương thích

Tất cả modern browsers (ES6+)
Không phụ thuộc vào framework hay thư viện nào

License

MIT