Allow injecting widgets into all object views

nik commented

2020-01-01 16:08:54 +01:00

Owner

All apps should be able to inject snippets into object views. Examples:

Exlibris could add a list of borrowed books to the Person view
Chronos could add the current lesson to a class group view

All apps should be able to inject snippets into object views. Examples: * Exlibris could add a list of borrowed books to the Person view * Chronos could add the current lesson to a class group view

nik commented

2020-01-07 23:12:58 +01:00

Author

Owner

removed milestone

nik commented

2020-01-07 23:13:09 +01:00

Author

Owner

closed

nik commented

2020-11-14 00:47:06 +01:00

Author

Owner

assigned to @nik

nik commented

2020-11-14 00:48:14 +01:00

Author

Owner

marked this issue as related to #73

nik commented

2020-11-14 00:49:19 +01:00

Author

Owner

We should create an ExtensibleView that provides an API for other apps to inject templates and contexts, which are then handled by the view, e.g. by rendering the template snippets in tabs/eidgets/etc.

We should create an `ExtensibleView` that provides an API for other apps to inject templates and contexts, which are then handled by the view, e.g. by rendering the template snippets in tabs/eidgets/etc.

tteichler commented

2021-01-22 22:34:18 +01:00

Owner

mentioned in merge request Teckids/ticdesk!1700

leuckeju commented

2021-11-12 09:43:38 +01:00

Member

mentioned in issue #539

nik commented

2022-01-10 23:37:32 +01:00

Author

Owner

mentioned in issue #610

nik commented

2022-01-10 23:46:58 +01:00

Author

Owner

marked this issue as related to #610

nik commented

2022-04-17 12:54:18 +02:00

Author

Owner

marked this issue as related to AlekSIS-App-Chronos#153

nik commented

2022-04-17 12:55:40 +02:00

Author

Owner

mentioned in issue AlekSIS-App-Chronos#153

nik commented

2022-04-17 12:56:26 +02:00

Author

Owner

This requires a major re-design. Therefore, removing from %"2022.6 — "Cohn""

leuckeju commented

2023-03-08 10:38:53 +01:00

Member

Maybe discuss this issue soon, as we are currently in a major re-design phase.

leuckeju commented

2023-11-08 20:22:49 +01:00

Member

we want this

leuckeju commented

2023-11-08 20:23:03 +01:00

Member

mentioned in issue AlekSIS-App-Alsijil#253

leuckeju commented

2024-03-06 23:38:28 +01:00

Member

mentioned in issue AlekSIS-App-Alsijil#266

leuckeju commented

2024-03-13 21:32:15 +01:00

Member

How would this work technically: Each app can declare inside the index.js which collection the respective app defines, and which components it provides for specific collections. Vite/the bundler will somehow merge thes values and provide at a singular place (via the aleksis mixin maybe?).

Example: the core would define the collections "core-dashboard", "core-person-overview" and "core-group-overview", and alsijil would supply components for personal statistics (and at a later point one for group statistics as well)

This should work for any object type, so there could be a collection for components, but also for objects (e.g. extensible menus) or functions (e.g. extensible actions on a crud page)

How would this work technically: Each app can declare inside the index.js which collection the respective app defines, and which components it provides for specific collections. Vite/the bundler will somehow merge thes values and provide at a singular place (via the aleksis mixin maybe?). Example: the core would define the collections "core-dashboard", "core-person-overview" and "core-group-overview", and alsijil would supply components for personal statistics (and at a later point one for group statistics as well) This should work for any object type, so there could be a collection for components, but also for objects (e.g. extensible menus) or functions (e.g. extensible actions on a crud page)

hansegucker commented

2024-04-17 21:14:56 +02:00

Owner

assigned to @ZugBahnHof and unassigned @nik

leuckeju commented

2024-04-30 16:15:50 +02:00

Member

<script>
// Inside the index.js in the core
export const collections = [
    {
        name: "dashboard", // Auto-prefixed with the app label (?)
        type: Object, // Documentation purposes, maybe used for validation at a later point. Maybe add a validator func?
    }
]

// Inside the index.js in dashboard-feeds

export const collectionItems = {
    coreDashboard: [
        {
            name: "dashboardFeeds.rssFeedWidget",
            component: () => import("RSSFeedWidget.vue")
            shouldDisplay: (user, person, preferences) => {
                if (preferences.showDefaultDashboard) return true;
                if (user.isAdmin) return true;
                return false;
            }
        }
    ]
}

// Inside the frontend component file

import { coreDashboard } from "aleksis.collections"; // → how should the imports look?

export default {
  name: "DashboardComponent",
  mixins: { mixinThatGivesMeUserDetails },
  computed: {
    widgets() {
      // Is this really just an array or should be something different?
      return coreDashboard.filter(widget => widget.shouldDisplay(user, person, preferences));
    },
    widgetProps() {
      return {
        idk: "???",
        person,
        "???": "idk",
      }
    }
  },
};

</script>

<template>
    <div v-for="widget in widgets">
      <component :is="widget.component" v-bind="widgetProps" />
    </div>
</template>

How does this example usage look for you @hansegucker (this is purely fictional at this point)

I highlighted important things in the code for you.

I believe we also discussed something about other exported properties being merged, however then i wouldn't know how one would access them. Do you remember more?

```vue <script> // Inside the index.js in the core export const collections = [ { name: "dashboard", // Auto-prefixed with the app label (?) type: Object, // Documentation purposes, maybe used for validation at a later point. Maybe add a validator func? } ] // Inside the index.js in dashboard-feeds export const collectionItems = { coreDashboard: [ { name: "dashboardFeeds.rssFeedWidget", component: () => import("RSSFeedWidget.vue") shouldDisplay: (user, person, preferences) => { if (preferences.showDefaultDashboard) return true; if (user.isAdmin) return true; return false; } } ] } // Inside the frontend component file import { coreDashboard } from "aleksis.collections"; // → how should the imports look? export default { name: "DashboardComponent", mixins: { mixinThatGivesMeUserDetails }, computed: { widgets() { // Is this really just an array or should be something different? return coreDashboard.filter(widget => widget.shouldDisplay(user, person, preferences)); }, widgetProps() { return { idk: "???", person, "???": "idk", } } }, }; </script> <template> <div v-for="widget in widgets"> <component :is="widget.component" v-bind="widgetProps" /> </div> </template> ``` How does this example usage look for you @hansegucker (this is purely fictional at this point) I highlighted important things in the code for you. I believe we also discussed something about other exported properties being merged, however then i wouldn't know how one would access them. Do you remember more?

hansegucker commented

2024-05-01 11:43:26 +02:00

Owner

I think this looks very good.

leuckeju commented

2024-05-02 19:08:09 +02:00

Member

ok

leuckeju commented

2024-05-02 19:08:13 +02:00

Member

created branch 122-allow-injecting-widgets-into-all-object-views to address this issue

created branch [`122-allow-injecting-widgets-into-all-object-views`](/AlekSIS/official/AlekSIS-Core/-/compare/master...122-allow-injecting-widgets-into-all-object-views) to address this issue

leuckeju commented

2024-05-02 19:08:19 +02:00

Member

mentioned in merge request !3105