Résumé du problème
Je développe un plugin Discourse qui ajoute un bouton de barre d’outils pour ouvrir un formulaire modal. J’ai suivi la documentation officielle de l’API DModal étape par étape, mais je rencontre toujours des erreurs d’importation de module et l’avertissement « le modal doit être mis à jour ». J’ai besoin de conseils sur ce qui me manque.
Une petite note : Je ne sais pas programmer, ce plugin a été entièrement créé avec l’aide de l’IA.
Erreurs actuelles
Erreur 1 - Importation de module :
Uncaught (in promise) Error: Could not find module `discourse/components/modal/lottery-form-modal` imported from `discourse/plugins/discourse-lottery-v3/discourse/initializers/lottery-toolbar`
Erreur 2 - Avertissement de modal hérité :
Error: the 'lottery-form' modal needs updating to work with the latest version of Discourse. See https://meta.discourse.org/t/268057.
Erreur 3 - Avis de dépréciation :
Deprecation notice: Defining modals using a controller is no longer supported. Use the component-based API instead. (modal: lottery-form) [deprecated since Discourse 3.1] [removal in Discourse 3.2]
Documentation officielle suivie
J’ai étudié et implémenté attentivement en me basant sur ces ressources officielles :
-
Conversion des modaux des contrôleurs hérités vers la nouvelle API de composants DModal
- URL :
https://meta.discourse.org/t/268057 - J’ai suivi les 4 étapes : déplacé les fichiers vers
/components/modal/, mis à jour le JS pour étendre Component, mis à jour le template pour utiliser<DModal>, mis à jour les appels show pour utilisermodal.show()
- URL :
-
Utilisation de l’API DModal pour afficher des fenêtres modales
- URL :
https://meta.discourse.org/t/268304 - Implémenté DModal avec
@closeModal,@titleet blocs nommés appropriés
- URL :
-
API de plugin de base Discourse
- Source :
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs - Utilisé
api.onToolbarCreate()et l’injection du service modal
- Source :
-
Documentation pour développeurs Discourse - Conversion des modaux
- URL :
https://github.com/discourse/discourse-developer-docs/blob/main/docs/03-code-internals/10-converting-modals.md - Étapes de migration recoupées
- URL :
Ce que j’essaie de faire
- Ajouter un bouton de barre d’outils dans le compositeur
- Cliquer sur le bouton ouvre un formulaire modal
- L’utilisateur remplit le formulaire et clique sur soumettre
- Le modal se ferme et insère le contenu dans le compositeur
Ce que j’ai essayé
Approche 1 : Importation dynamique + Service Modal (Actuelle)
- Erreur d’importation de module
Approche 2 : showModal() avec contrôleur
- Avertissements de dépréciation concernant les contrôleurs hérités
Approche 3 : Importation statique
- J’ai également essayé des importations statiques, mais les mêmes problèmes de résolution de module
Structure des fichiers :
discourse-lottery-v3/
├── plugin.rb
└── assets/javascripts/discourse/
├── initializers/
│ └── lottery-toolbar.js
└── components/modal/
├── lottery-form-modal.js
└── lottery-form-modal.hbs
Code du bouton de barre d’outils :
// assets/javascripts/discourse/initializers/lottery-toolbar.js
import { withPluginApi } from "discourse/lib/plugin-api";
export default {
name: "lottery-toolbar",
initialize() {
withPluginApi("1.0.0", (api) => {
api.onToolbarCreate((toolbar) => {
toolbar.addButton({
id: "lottery-insert",
group: "extras",
icon: "dice",
title: "Insert Lottery",
perform: () => {
const modal = api.container.lookup("service:modal");
// This line causes the import error:
import("discourse/components/modal/lottery-form-modal").then((module) => {
const LotteryFormModal = module.default;
modal.show(LotteryFormModal, { model: {} });
});
}
});
});
});
}
};
Composant modal :
// assets/javascripts/discourse/components/modal/lottery-form-modal.js
import Component from "@ember/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
export default class LotteryFormModal extends Component {
@tracked inputValue = "";
@action
submit() {
// Handle form submission
this.args.closeModal();
}
}
Template modal :
{{! assets/javascripts/discourse/components/modal/lottery-form-modal.hbs }}
<DModal @title="My Modal" @closeModal={{this.args.closeModal}} class="my-modal">
<:body>
<input value={{this.inputValue}} />
</:body>
<:footer>
<button {{on "click" this.submit}}>Submit</button>
</:footer>
</DModal>
Questions
Sur la base de tout le code, les erreurs et les informations de fond fournies ci-dessus, comment dois-je modifier mon code pour implémenter correctement ma fonctionnalité ?
Toute aide sur l’approche d’implémentation correcte serait grandement appréciée.