Nine Parsecs from Milwaukee
    Wondering what’s next for npm?Check out our public roadmap! »

    @spiral-toolkit/notifications
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.63 • Public • Published

    Development usage:

    1. Include notifications:toggle from keeper package to header like so
    <div class="sf-header-user" data-sf="dropdown">
        <button class="sf-header-user__info" data-sf="dropdown-toggle" id="sf-header-user-menu" aria-haspopup="true"
                aria-expanded="false">
          <div class="sf-user-short-info">
            <span
              class="sf-user-short-info__avatar">{{ substr($_actor_->firstName, 0, 1) . substr($_actor_->lastName, 0, 1) }}</span>
            <span class="sf-user-short-info__name">{{ $_actor_->firstName . ' ' . $_actor_->lastName }}</span>
          </div>
        </button>
        <div class="sf-header-user__menu dropdown-menu" data-sf="dropdown-menu" aria-labelledby="sf-header-user-menu">
          <a class="dropdown-item" href="@action('profile.me')">Profile</a>
          <a class="dropdown-item" href="@route('auth:logout', ['token' => $_auth_->getToken()->getID()])">Log Out</a>
        </div>
      </div>
      <notifications:toggle>
          <script role="sf-options" type="application/json">
              {
                  "api": {
                      "getList": "/keeper/testlist",
                      "setAsRead": "/keeper/markasread"
                  }
              }
          </script>
      </notifications:toggle>
    1. Include notifications:drawer to bottom of body layout

    2. Implement 2 endpoints

    Getting notifications list. Default URL is /api/notifications.

    Return object like so. Date should be JavaScript timestamp

    Notes: 'read' should be false for item to be displayed, 'icon' is optional, if specified, a FontAwesome icon snippet will be prepended to title automatically.

    return [
                'status' => HttpStatus::OK,
                'unreadCount' => 4,
                'data' => [
                    [
                        'title' => 'Report ready',
                        'body' => 'Click <a href="/keeper/me">here</a> to download',
                        'read' => false,
                        'icon' => 'download',
                        'date' => 1597828433980,
                        'id' => '1'
                    ],
                    [
                        'title' => 'Report ready',
                        'body' => 'Click <a href="/keeper/me">here</a> to download',
                        'read' => false,
                        'date' => 1597828233980,
                        'id' => '3'
                    ],
                    [
                        'title' => 'Report ready',
                        'body' => 'Click <a href="/keeper/me">here</a> to download',
                        'read' => false,
                        'date' => 1597828033980,
                        'id' => '4'
                    ],
                    [
                        'title' => 'Report ready',
                        'body' => 'Click <a href="/keeper/me">here</a> to download',
                        'read' => false,
                        'date' => 1597820033980,
                        'id' => '5'
                    ],
                ]
            ];

    Removing notification. Default URL is /api/notifications/read that will be used with POST request with 'id' as single or array of ids of notifications.

    Response from removing notification is expected to match list response, i.e. to have actual notification list and unread counter

    (Optional) Implement WS interface. WebSocket client accepts message with custom body. Configure in tag like so (see docs here https://github.com/spiral/websocket-client#sfsocket-constructor-options )

       <notifications:toggle>
          <script role="sf-options" type="application/json">
              {
                  "ws": {
                    "host": "some.domain.com",
                    "port": "80",
                    "path": "foo",
                    "queryParams": { "bar": "1" }
                  }
              }
          </script>
      </notifications:toggle>

    Sending message event from server with data being a json string with payload like below will trigger adding it to notification center

    {
        "type": "notification",
        "data": {
            "id": "foo-1",
            "title": "Title",
            "body": "<a></a> html",
            "read": false,
            "date": 1224124324231
        }
    }

    Install

    npm i @spiral-toolkit/notifications

    DownloadsWeekly Downloads

    1

    Version

    1.1.63

    License

    MIT

    Unpacked Size

    101 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar