fractal6 / fractal6-ui.elm

Frontend for Fractale: a self-organization platform

Fractale - self-organisation for humans

Elm frontend frontend for Fractale.

Fractale is a platform for self-organisation. It is designed around the concept that an organisation can be represented as a tree and should follow principles of transparency, governance decentralization and authority distribution. A tree divides in branches and form leaves, likewise an organisation divides in Circles that can have Roles. Both, circles and roles have an associated descriptive document, called Mandate, intended to define its purpose and operating rules. Finally, the communication inside the organisation is done through Tensions, and make the link between users and organisations. You can think of a tension as an email, but more structured and more powerful.

Using Fractale for your organisation offers the following capabilities and features:

• Interactive tree and graph packing organisation chart
• Organisation visibility defined at circles level
• ACL based on member roles and circle governance rules
• Ticketing management through Tensions
• Discussion thread and subscription by tension
• Email notifications broadcast and email reply
• Labels system
• Role templates system
• Journal history of events (including mandate updates!)
• GraphQL API

Install

npm install

Launch

First, generate the elm i18n langage source code (it will generate the src/Text.elm file):

./i18n.py gen -w -l [LANG]

Run the test server

Build the code and run a webpack dev server (hot reload)

make run

To run webpack with the production code (i.e with optimization)

make run_prod

Build for production

The code will be generated in the dist folder:

you will need to edit the API_URL in webpack.config.js to match your server domain and CORS requirements Otherwise, the front will query the api.fractale.co domain.

make prod

Contributing

You can open issues for bugs you've found or features you think are missing. You can also submit pull requests to this repository. To get started, take a look at CONTRIBUTING.md.

You can follow Fractale organisation and roadmap at o/f6 and espacially t/f6/ui-ux.

IRC channel: #fractal6 on matrix.org

License

Fractale is free, open-source software licensed under AGPLv3.

fractal6-ui.elm's Issues

Improve dark theme

• background colors that are (a lot) darker to improve readability, so maybe remove some blue and green tones.
• Circle (graph packing) colors shoud change with dark/light theme.
• Identicon colors should change with dark/light theme.
• The modals “New tension/Invitation / Authentication required/ etc” colors should change with dark/light theme.

Make webpack API url variable part of the runtime conf.

At the moment, it is hardcoded in webpack.config.js.

This will allow much easier installation as the frontend could just be pulled instead of being built...

Improve join feature

Hello!

When I tried the app, first thing I notice was this welcoming green button:

When clicking on it:

It would be nice to explain what a tension is and also add a button to join the organisation instead of telling to do it with a warning message

What do you think?
I love this project!

Desktop App

I see three alternatives to build a desktop app :

• with Electron: https://www.electronjs.org/
• with Tauri: https://tauri.app/
• with PWA (https://web.dev/, https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs)

it would be useful to have the pro & cons of each solutions...

Ressources:

• https://github.com/avh4/elm-desktop-app
• https://github.com/dillonkearns/elm-electron-starter
• https://discourse.elm-lang.org/t/native-desktop-apps/4938/6
• https://discourse.elm-lang.org/t/making-a-desktop-app-with-elm-deno-velociraptor-and-now-tauri/5917
• https://medium.com/@ezekeal/building-an-electron-app-with-elm-part-1-boilerplate-3416a730731f

Add link user preview

When a user link is hovering, a user preview window should appears above.

See here for some inspiration : https://github.com/joakin/context-cards

Calendars View

Good first issue, but require serious ui/ux skills.

• update schema for tension.dueDate and startDate
• New Calendars view in the organization tabs
  • Query tensions with dueDate below the targeted circle
  • Day view
  • Week view
  • Month View
  • Year view
• add a due date in tension panel + a date picker

Not in this sprint

• create event by clicking on the calendar div.
• manage start date and view on an date range.

Ressources

Calendar framework inspirations:

• Nextcloud Calendar
• https://github.com/fullcalendar/fullcalendar
• https://github.com/nhn/tui.calendar

Date picker:

• https://github.com/n1k0/elm-daterange-picker
• https://bulma-calendar.onrender.com/demonstration/date