@things-factory/notification 8.0.0-beta.0 → 8.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@things-factory/notification",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist-server/index.js",
   "browser": "dist-client/index.js",
   "things-factory": true,
@@ -29,16 +29,16 @@
   "dependencies": {
     "@material/web": "^2.0.0",
     "@operato/layout": "^8.0.0-beta",
-    "@things-factory/auth-base": "^8.0.0-beta.0",
-    "@things-factory/codelingua": "^8.0.0-beta.0",
-    "@things-factory/i18n-base": "^8.0.0-beta.0",
-    "@things-factory/organization": "^8.0.0-beta.0",
-    "@things-factory/setting-base": "^8.0.0-beta.0",
-    "@things-factory/shell": "^8.0.0-beta.0",
+    "@things-factory/auth-base": "^8.0.0-beta.2",
+    "@things-factory/codelingua": "^8.0.0-beta.2",
+    "@things-factory/i18n-base": "^8.0.0-beta.2",
+    "@things-factory/organization": "^8.0.0-beta.2",
+    "@things-factory/setting-base": "^8.0.0-beta.2",
+    "@things-factory/shell": "^8.0.0-beta.2",
     "clipboard": "^2.0.6",
     "firebase": "^9.14.0",
     "firebase-admin": "^11.3.0",
     "google": "^2.1.0"
   },
-  "gitHead": "add6fb8224b2cb19cbea47bed6a5ecb0424c9a28"
+  "gitHead": "f03431a09435511b2595515658f9cb8f78ba4ebb"
 }

package/client/actions/notification-fcm.ts

@@ -1,148 +0,0 @@
-export const UPDATE_NOTIFICATION = 'UPDATE_NOTIFICATION'
-export const CONFIRM_NOTIFICATION = 'CONFIRM_NOTIFICATION'
-
-import { initializeApp } from 'firebase/app'
-import { getMessaging, getToken, deleteToken } from 'firebase/messaging'
-
-import { synchronize } from '@things-factory/utils'
-
-var vapidKey
-var appConfig
-var messaging
-
-async function _getVapidKey() {
-  if (!vapidKey || !appConfig) {
-    if (Notification.permission === 'denied') {
-      console.warn('Notification permission denied')
-      return
-    }
-
-    const response = await fetch('/notification/config', {
-      headers: {
-        Accept: 'application/json'
-      }
-    })
-    if (!response.ok) {
-      throw new Error(`fail to get notification configuration: ${response.status}`)
-    }
-    const conf = await response.json()
-
-    if (!conf || !conf.vapidPublicKey || !conf.appConfig) {
-      throw new Error('correct notification configuration required.')
-    }
-
-    try {
-      const app = await initializeApp(conf.appConfig)
-      messaging = getMessaging(app)
-
-      // messaging = _messaging.isSupported() ? _messaging() : null
-      if (!messaging) {
-        console.warn('###################################################')
-        console.warn('push notification is not supported in this browser.')
-        console.warn('###################################################')
-      }
-
-      vapidKey = conf.vapidPublicKey
-      appConfig = conf.appConfig
-    } catch (err) {
-      throw new Error(`failed to initialize firebase app.`)
-    }
-  }
-
-  return { vapidKey, messaging }
-}
-
-// to avoid race condition
-const getVapidKey = synchronize(_getVapidKey) as any
-
-export async function isSupportingMessaging() {
-  const { messaging } = (await getVapidKey()) || {}
-  return !!messaging
-}
-
-export async function getSubscriptionToken(force = false) {
-  // const registration = await navigator.serviceWorker.getRegistration('/')
-  const registration = await navigator.serviceWorker?.ready
-
-  if (!registration) {
-    console.warn('service worker not registered.')
-    return
-  }
-
-  if (!registration.pushManager || (!force && !(await registration.pushManager.getSubscription()))) {
-    return
-  }
-
-  const { vapidKey, messaging } = (await getVapidKey()) || {}
-
-  try {
-    return (
-      vapidKey &&
-      (await getToken(messaging, {
-        vapidKey,
-        serviceWorkerRegistration: registration
-      }))
-    )
-  } catch (err) {
-    console.error(err)
-  }
-}
-
-export async function subscribe() {
-  const token = await getSubscriptionToken(true)
-
-  if (!token) {
-    return
-  }
-
-  await fetch('/notification/register', {
-    method: 'post',
-    headers: {
-      'Content-type': 'application/json',
-      Accept: 'application/json'
-    },
-    body: JSON.stringify({
-      subscription: token
-    })
-  })
-
-  return token
-}
-
-export async function unsubscribe() {
-  const token = await getSubscriptionToken()
-  if (!token) {
-    return
-  }
-
-  try {
-    const { vapidKey, messaging } = (await getVapidKey()) || {}
-    vapidKey && (await deleteToken(messaging))
-  } catch (err) {
-    console.error(err)
-  }
-
-  await fetch('/notification/unregister', {
-    method: 'post',
-    headers: {
-      'Content-type': 'application/json',
-      Accept: 'application/json'
-    },
-    body: JSON.stringify({
-      subscription: token
-    })
-  })
-}
-
-export async function notify(options) {
-  const response = await fetch('/notification/notify', {
-    method: 'post',
-    headers: {
-      'Content-type': 'application/json',
-      Accept: 'application/json'
-    },
-    body: JSON.stringify(options)
-  })
-
-  return response.ok
-}

package/client/bootstrap.ts

@@ -1,135 +0,0 @@
-import gql from 'graphql-tag'
-
-import { notify } from '@operato/layout'
-import { auth } from '@things-factory/auth-base/dist-client/auth.js'
-
-import { i18next } from '@operato/i18n'
-import { notificationStore, route, store } from '@operato/shell'
-import { subscribe as graphqlSubscribe } from '@operato/graphql'
-
-import { subscribe, unsubscribe, UPDATE_NOTIFICATION } from './actions/notification-fcm'
-import notification from './reducers/notification'
-
-var graphqlSubscription: any
-
-export default async function bootstrap() {
-  /* initialize reducers */
-  store.addReducers({ notification })
-
-  async function onnotification(notification?: any) {
-    store.dispatch((async dispatch => {
-      if (notification) {
-        await notificationStore.add(notification)
-        await notificationStore.limit()
-      }
-
-      const history = await notificationStore.getAll()
-
-      dispatch({
-        type: UPDATE_NOTIFICATION,
-        history: [...history]
-      })
-    }) as any)
-  }
-
-  auth.on('presignout', async () => {
-    try {
-      await unsubscribe()
-      /* await */ notificationStore.clear()
-    } catch (err) {
-      console.warn(err)
-    }
-  })
-
-  auth.on('profile', async ({ credential }) => {
-    try {
-      await subscribe()
-    } catch (err) {
-      console.warn(err)
-    }
-
-    /*
-     * subscription graphql notifications
-     */
-    var query = gql`
-      subscription notification($subjects: [String!]) {
-        notification(subjects: $subjects) {
-          subject
-          type
-          title
-          body
-          url
-          image
-          timestamp
-        }
-      }
-    `
-
-    graphqlSubscription = await graphqlSubscribe(
-      {
-        query,
-        variables: {
-          subjects: ['info', 'warn', 'error', 'reload']
-        }
-      },
-      {
-        next({ data }) {
-          const { notification } = data || {}
-          onnotification({
-            timestamp: Date.now(),
-            ...notification
-          })
-        }
-      }
-    )
-  })
-
-  /* subscription web-push notification */
-  const channel = new BroadcastChannel('notification')
-  channel.addEventListener('message', async ({ data }) => {
-    const { type } = data || {}
-
-    switch (type) {
-      case 'notificationclick':
-        const { action, notification } = data
-
-        // TODO how to follow action with notification.data
-        notification.url && route(notification.url)
-        break
-
-      case 'show-reload-snackbar':
-        notify({
-          level: 'info',
-          message: i18next.t('text.the application has been updated'),
-          option: {
-            action: {
-              label: i18next.t('button.reload'),
-              callback: () => window.location.reload()
-            },
-            timer: -1
-          }
-        })
-        break
-
-      case 'notification':
-      default:
-        onnotification()
-    }
-  })
-
-  document.addEventListener('notify', (event: Event) => {
-    let { message, level, ex = '', option = {} } = (event as CustomEvent).detail
-    const title = message.split(' .\n')[0]
-
-    if (level === 'error') {
-      onnotification({
-        timestamp: Date.now(),
-        type: 'ERROR',
-        title,
-        body: ex ? ex.message : message
-      })
-    }
-  })
-
-  await onnotification()
-}

package/client/index.ts

@@ -1,6 +0,0 @@
-export * from './viewparts/notification-badge'
-export * from './viewparts/notification-list'
-export * from './viewparts/notification-setting-let'
-export * from './viewparts/notification-sender'
-
-export * from './actions/notification-fcm'

package/client/pages/notification/notification-list-page.ts

@@ -1,258 +0,0 @@
-import '@operato/data-grist'
-
-import { CommonButtonStyles, CommonHeaderStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView, store } from '@operato/shell'
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import { ColumnConfig, DataGrist, FetchOption } from '@operato/data-grist'
-import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
-import { notify } from '@operato/layout'
-import { isMobileDevice } from '@operato/utils'
-
-import { connect } from 'pwa-helpers/connect-mixin'
-import gql from 'graphql-tag'
-
-@customElement('notification-list-page')
-export class NotificationListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-  static styles = [
-    ScrollbarStyles,
-    CommonGristStyles,
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-
-        width: 100%;
-
-        --grid-record-emphasized-background-color: #8b0000;
-        --grid-record-emphasized-color: #ff6b6b;
-      }
-
-      ox-grist {
-        overflow-y: auto;
-        flex: 1;
-      }
-
-      ox-filters-form {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Object }) gristConfig: any
-  @property({ type: String }) mode: 'CARD' | 'GRID' | 'LIST' = isMobileDevice() ? 'CARD' : 'GRID'
-
-  @query('ox-grist') private grist!: DataGrist
-
-  get context() {
-    return {
-      title: i18next.t('title.notification list'),
-      search: {
-        handler: (search: string) => {
-          this.grist.searchText = search
-        },
-        value: this.grist?.searchText || ''
-      },
-      filter: {
-        handler: () => {
-          this.grist.toggleHeadroom()
-        }
-      },
-      help: 'notification/notification',
-      actions: [
-        {
-          title: i18next.t('button.save'),
-          action: this._updateNotification.bind(this),
-          ...CommonButtonStyles.save
-        },
-        {
-          title: i18next.t('button.delete'),
-          action: this._deleteNotification.bind(this),
-          ...CommonButtonStyles.delete
-        }
-      ]
-    }
-  }
-
-  render() {
-    const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
-
-    return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom" class="header">
-          <div class="filters">
-            <ox-filters-form autofocus></ox-filters-form>
-
-            <div id="modes">
-              <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
-              <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
-              <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
-            </div>
-          </div>
-        </div>
-      </ox-grist>
-    `
-  }
-
-  async pageInitialized(lifecycle: any) {
-    this.gristConfig = {
-      list: {
-        fields: ['title', 'body'],
-        details: ['state', 'updatedAt']
-      },
-      columns: [
-        { type: 'gutter', gutterName: 'sequence' },
-        { type: 'gutter', gutterName: 'row-selector', multiple: true },
-        {
-          type: 'string',
-          name: 'title',
-          header: i18next.t('field.title'),
-          record: {
-            editable: false
-          },
-          filter: 'search',
-          sortable: true,
-          width: 150
-        },
-        {
-          type: 'string',
-          name: 'body',
-          header: i18next.t('field.body'),
-          record: {
-            editable: false
-          },
-          filter: 'search',
-          width: 200
-        },
-        {
-          type: 'checkbox',
-          name: 'state',
-          label: true,
-          header: i18next.t('field.state'),
-          record: {
-            editable: true
-          },
-          filter: true,
-          sortable: true,
-          width: 60
-        },
-        {
-          type: 'datetime',
-          name: 'createdAt',
-          header: i18next.t('field.created_at'),
-          record: {
-            editable: false
-          },
-          sortable: true,
-          width: 180
-        }
-      ],
-      rows: {
-        selectable: {
-          multiple: true
-        }
-      },
-      sorters: [
-        {
-          name: 'createdAt',
-          desc: true
-        }
-      ]
-    }
-  }
-
-  async pageUpdated(changes: any, lifecycle: any) {
-    if (this.active) {
-      // do something here when this page just became as active
-    }
-  }
-
-  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {
-    const response = await client.query({
-      query: gql`
-        query ($filters: [Filter!], $pagination: Pagination, $sortings: [Sorting!]) {
-          responses: notiBoxes(filters: $filters, pagination: $pagination, sortings: $sortings) {
-            items {
-              id
-              title
-              body
-              state
-              createdAt
-            }
-            total
-          }
-        }
-      `,
-      variables: {
-        filters,
-        pagination: { page, limit },
-        sortings
-      }
-    })
-
-    return {
-      total: response.data.responses.total || 0,
-      records: response.data.responses.items || []
-    }
-  }
-
-  async _deleteNotification() {
-    if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {
-      const ids = this.grist.selected.map(record => record.id)
-      if (ids && ids.length > 0) {
-        const response = await client.mutate({
-          mutation: gql`
-            mutation ($ids: [String!]!) {
-              deleteNotificationes(ids: $ids)
-            }
-          `,
-          variables: {
-            ids
-          }
-        })
-
-        if (!response.errors) {
-          this.grist.fetch()
-          notify({
-            message: i18next.t('text.info_x_successfully', { x: i18next.t('text.delete') })
-          })
-        }
-      }
-    }
-  }
-
-  async _updateNotification() {
-    let patches = this.grist.dirtyRecords
-    if (patches && patches.length) {
-      patches = patches.map(patch => {
-        let patchField: any = patch.id ? { id: patch.id } : {}
-        const dirtyFields = patch.__dirtyfields__
-        for (let key in dirtyFields) {
-          patchField[key] = dirtyFields[key].after
-        }
-        patchField.cuFlag = patch.__dirty__
-
-        return patchField
-      })
-
-      const response = await client.mutate({
-        mutation: gql`
-          mutation ($patches: [NotificationPatch!]!) {
-            updateMultipleNotification(patches: $patches) {
-              name
-            }
-          }
-        `,
-        variables: {
-          patches
-        }
-      })
-
-      if (!response.errors) {
-        this.grist.fetch()
-      }
-    }
-  }
-}

package/client/pages/notification-rule/notification-rule-importer.ts

@@ -1,87 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/data-grist'
-
-import gql from 'graphql-tag'
-import { css, html, LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-import { client } from '@operato/graphql'
-import { i18next } from '@operato/i18n'
-import { isMobileDevice } from '@operato/utils'
-import { CommonHeaderStyles } from '@operato/styles'
-
-export class NotificationRuleImporter extends LitElement {
-  static styles = [
-    CommonHeaderStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-
-        background-color: var(--md-sys-color-surface);
-      }
-
-      ox-grist {
-        flex: 1;
-      }
-    `
-  ]
-
-  @property({ type: Array }) notificationRules: any[] = []
-  @property({ type: Object }) columns = {
-    list: { fields: ['name', 'description'] },
-    pagination: { infinite: true },
-    columns: [
-      {
-        type: 'string',
-        name: 'name',
-        header: i18next.t('field.name'),
-        width: 150
-      },
-      {
-        type: 'string',
-        name: 'description',
-        header: i18next.t('field.description'),
-        width: 200
-      },
-      {
-        type: 'checkbox',
-        name: 'active',
-        header: i18next.t('field.active'),
-        width: 60
-      }
-    ]
-  }
-
-  render() {
-    return html`
-      <ox-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.columns}
-        .data=${{
-          records: this.notificationRules
-        }}
-      ></ox-grist>
-
-      <div class="footer">
-        <div filler></div>
-        <button @click=${this.save.bind(this)} done><md-icon>save</md-icon>${i18next.t('button.save')}</button>
-      </div>
-    `
-  }
-
-  async save() {
-    const response = await client.mutate({
-      mutation: gql`
-        mutation importNotificationRules($notificationRules: [NotificationRulePatch!]!) {
-          importNotificationRules(notificationRules: $notificationRules)
-        }
-      `,
-      variables: { notificationRules: this.notificationRules }
-    })
-
-    if (response.errors?.length) return
-
-    this.dispatchEvent(new CustomEvent('imported'))
-  }
-}