Some dotting the i's and crossing the t's needed

[tdegrunt]

We need to do some fine tunining:

• [x] Add attr_readers for use in component.html.slim (remove use of @signals etc)

• [x] Move frontend controllers inside the component folder, rename attributes in HTML, and load them using a block to frontend/index.js like so:

  componentControllers
    .keys()
    .map((key) => {
      // Take the last part (before component_controller) of the path as the name
      const [_, name] = /([^/]+)\/component_controller\.js$/.exec(key)
      return [name, componentControllers(key).default]
    })
    .forEach(([name, controller]) => {
      let identifier = `signum-${name.replace(/_/g, "-")}`
      this.application.register(identifier, controller)
    })

• [x] Put full notification-body inside the notification drawer (use new component)

• [x] Render notification-drawer items using with_collection / with_collection_parameter, see https://viewcomponent.org/guide/collections.html#with_collection_parameter

• [x] Allow the notification-drawer to scroll and put 25 last notifications in place

• [x] Don't show closed notifications

• [x] Remove closed notifications from the DOM (use remove https://turbo.hotwired.dev/handbook/streams)

• [x] Don't open the notification drawer if there are no notifications, see the gray bar:

• [x] Additionally signum gained a way to add attachments to signals, so we can present the user with exports/import results - adding attachments will touch the record, so updates should happen always, except for changes to the state (closed mostly).

• [x] Remove use of Signum::SendSignalsJob, this can be replaced by broadcast_refreshes (see https://rubydoc.info/github/hotwired/turbo-rails/main/Turbo/Broadcastable)

• [x] Grab the configuration.rb from importo and replace signum's configuration with it.

• [x] Add a icons option to the configuration (hash) which allows users to change the icons we use for success/error/info as well as the bell icons. Assume fontawesome, but not icon type/style.

• [x] Finetune looks a bit: title and body text and icon. Also links could use a small icon (fa-link), attachments get a paperclip. We need a bit more distance between body and the attachment (see third screenshot).

• [x] Remove the counts and percentages from the progressbar (maybe make it optional), make it a bit smaller and primary color - white counts?

See: https://flowbite.com/docs/components/progress/

Perhaps best to make this a satis component?

We'll do the following in a separate ticket:

• [ ] #9

[sanderhelsloot]

As shown below, displaying the msgs 'Importing...' and 'Completed...', do not correspond with the progress bar anymore while the Download button returns a 404.

[WaQasRPL]

Apart from one point stating "Sticky notifications are not added to the screen after refresh, can this be fixed?", rest are all completed. this point require some core changes to the way turbo-rails is setup, which wont be possible currently. Already informed Tom about it.

PRs created

https://github.com/boxture/oms/pull/3839 https://github.com/entdec/signum/pull/8

we require to update the assets, for some reason cant find the label for this ticket

[tdegrunt]

• [x] There's a distinction in marking "read" and closing the ticket in the tray, I think we should remove the click (mark as read).

• [x] When you click all notifications away but the last one. And then click away the last, the tray shows this line:

• [x] Refreshing will then show new ones. Also two bells. Only one bell should be seen:

• [x] Icon colors seem to be removed, perhaps make this configuration too?

Possibly in different ticket, depending on the complexity:

• [ ] Currently you use an API controller, but if we use the signal controller with destroy with a turbo stream, which also pulls in new notifications.

Use @rails/request.js:

import { delete } from '@rails/request.js'
  markRead (event) {
    let url = this.ourUrl // get url from notification body? and call delete on that?

    post(url, {
      responseKind: 'turbo-stream'
    }).then(() => {
      // do other magic, the turbo stream should pick things up based on the 
    })
  }

destroy.turbo_stream.slim:

= turbo_stream.update "css-selector" do
  | slim here

= turbo_stream.update "css-selector" do
  | slim here

[sanderhelsloot]

As discussed with Tom, we would like to add the signum msgs, with the following icon's.

Note:

• Circle info requires to be blue
• Circle xmark requires to be red.
• Circle check requires to be green.
• Circle exclamation requires to be orange.

[WaQasRPL]

PR created https://github.com/entdec/signum/pull/11

I have skipped the last point in the comment due to its complexity and the amount of changes would be required as we initiate stream from backend, not on demand.

[tdegrunt]

Bell is not showing as ringing when there are "unread"/"unclosed" notifications:

The close icon has too little margin from the right side of the notification too as compared to:

It should be a bit more "roomy" / "wider"

[sanderhelsloot]

I would not expect the information icon's in the cases below.

• Importing sales order.xlsx = informational
• Completed import of sales order.xlsx = a circle-check
• Warning import of sales order = triangle-exclamation (if it partially failed - e.g. duplicate lines)
• Failed import of sales order.xlsx = square-mark (if non of the lines are imported)

[WaQasRPL]

PRs created for the above two comments

https://github.com/boxture/server/pull/3914 https://github.com/entdec/signum/pull/13

[sanderhelsloot]

The signum messages are displayed properly as expected. Warning, success, failure and informational messages are displayed for the scenario's.

[sanderhelsloot]