-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Refactor HelpDialog for configurable help content
Refactored HelpDialog component to accept dynamic content through props, allowing for configurable help sections and links. Enhanced the HelpIcon to control the state of the HelpDialog modal, ensuring it can be opened and closed via a new event emitter. Integrated help content from JSON config into PrecurationForm for context-specific assistance. - Updated HelpDialog to loop through help content sections and render as cards. - Added event emitter to close the HelpDialog modal. - Imported help content config in PrecurationForm and passed to HelpIcon. - Replaced console log with function call to open HelpDialog. - HelpIcon now controls the dialog state to allow opening and closing of HelpDialog. Resolves: #103
- Loading branch information
Showing
5 changed files
with
110 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,50 @@ | ||
| <!-- components/HelpDialog.vue --> | ||
| <template> | ||
| <v-dialog | ||
| width="auto" | ||
| v-model="dialog" | ||
| > | ||
| <v-card :style="cardStyle"> | ||
| <v-card-title :style="titleStyle"> | ||
| {{ title }} | ||
| </v-card-title> | ||
| <!-- Use a div instead of v-card-text to avoid the warning and still render HTML --> | ||
| <div v-html="content" class="v-card-text" :style="contentStyle"> | ||
| </div> | ||
| <v-dialog v-model="dialog" max-width="600px"> | ||
| <v-card> | ||
| <v-card-title>{{ helpContent.HelpDialog.title }}</v-card-title> | ||
| <v-container> | ||
| <v-row> | ||
| <v-col v-for="section in helpContent.sections" :key="section.header" cols="12"> | ||
| <v-card outlined> | ||
| <v-card-title>{{ section.header }}</v-card-title> | ||
| <v-card-text v-html="section.content"></v-card-text> | ||
| <v-card-actions v-if="section.links"> | ||
| <v-btn v-for="link in section.links" :key="link.title" :href="link.url" text> | ||
| {{ link.title }} | ||
| </v-btn> | ||
| </v-card-actions> | ||
| </v-card> | ||
| </v-col> | ||
| </v-row> | ||
| </v-container> | ||
| <v-card-actions> | ||
| <v-spacer /> | ||
| <v-btn color="primary" elevation="0" @click="dialog = false">Ok</v-btn> | ||
| <v-btn color="primary" @click="close">Close</v-btn> | ||
| </v-card-actions> | ||
| </v-card> | ||
| </v-dialog> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| name: "HelpDialog", | ||
|
|
||
| name: 'HelpDialog', | ||
| props: { | ||
| title: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| content: { | ||
| type: String, | ||
| default: '', | ||
| }, | ||
| config: { | ||
| helpContent: { | ||
| type: Object, | ||
| default: () => ({}), | ||
| required: true, | ||
| }, | ||
| }, | ||
| data () { | ||
| data() { | ||
| return { | ||
| dialog: false, | ||
| } | ||
| }, | ||
| computed: { | ||
| cardStyle() { | ||
| return this.config.cardStyle || { padding: '10px 0' }; | ||
| }, | ||
| titleStyle() { | ||
| return this.config.titleStyle || { fontFamily: 'google-sans, sans-serif', fontSize: '24px' }; | ||
| }, | ||
| contentStyle() { | ||
| // You can define default styles or pull them from config | ||
| return this.config.contentStyle || {}; | ||
| }, | ||
| }; | ||
| }, | ||
| emits: ['update:modelValue'], | ||
| methods: { | ||
| close() { | ||
| this.$emit('update:modelValue', false); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!-- components/HelpIcon.vue --> | ||
| <template> | ||
| <v-tooltip bottom> | ||
| <template v-slot:activator="{ attrs }"> | ||
| <v-icon v-bind="attrs" @click="dialog = true"> | ||
| mdi-help-circle-outline | ||
| </v-icon> | ||
| </template> | ||
| <span>Click for help</span> | ||
| </v-tooltip> | ||
| <!-- Listen for the update:modelValue event to sync the dialog state --> | ||
| <HelpDialog | ||
| :modelValue="dialog" | ||
| @update:modelValue="value => dialog = value" | ||
| :helpContent="helpContent" | ||
| /> | ||
| </template> | ||
|
|
||
| <script> | ||
| import HelpDialog from './HelpDialog.vue'; | ||
|
|
||
| export default { | ||
| components: { | ||
| HelpDialog, | ||
| }, | ||
| props: { | ||
| helpContent: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| }, | ||
| data() { | ||
| return { | ||
| dialog: false, | ||
| }; | ||
| }, | ||
| methods: { | ||
| openHelpDialog() { | ||
| console.log(this.helpContent); | ||
| this.dialog = true; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| <!-- components/StaticContent.vue --> | ||
| <template> | ||
| <v-container> | ||
| <h1>{{ config.title }}</h1> | ||
|
|
||
62 changes: 29 additions & 33 deletions
62
src/config/workflows/KidneyGeneticsGeneCuration/static/precurationHelp.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,33 @@ | ||
| { | ||
| "HelpDialog": { | ||
| "title": "Pre-Curation Help", | ||
| "content": "To begin pre-curation, follow the workflow to determine if the gene/entity is listed in ClinGen. Use sources such as GenCC and OMIM for additional information. Refer to the lumping and splitting criteria to guide your decisions.", | ||
| "cardStyle": { | ||
| "padding": "20px" | ||
| "HelpDialog": { | ||
| "title": "Pre-Curation Help", | ||
| "config": { | ||
| "cardStyle": { | ||
| "padding": "20px" | ||
| }, | ||
| "titleStyle": { | ||
| "fontFamily": "Arial, sans-serif", | ||
| "fontSize": "20px" | ||
| } | ||
| } | ||
| }, | ||
| "titleStyle": { | ||
| "fontFamily": "Arial, sans-serif", | ||
| "fontSize": "20px" | ||
| } | ||
| }, | ||
| "workflow": { | ||
| "checkListedInClinGen": "Apply this group and points after reviewing the entry.", | ||
| "reviewExternalSources": { | ||
| "description": "Review GenCC and OMIM for unlisted genes/entities.", | ||
| "dataCollection": [ | ||
| "Disease entities associated with the gene", | ||
| "Variability of phenotypic presentations", | ||
| "Inheritance pattern for each disease entity asserted" | ||
| "sections": [ | ||
| { | ||
| "header": "Overview", | ||
| "content": "To begin pre-curation, follow the workflow to determine if the gene/entity is listed in ClinGen. Use sources such as GenCC and OMIM for additional information. Refer to the lumping and splitting criteria below to guide your decisions." | ||
| }, | ||
| { | ||
| "header": "Check listed in ClinGen", | ||
| "content": "Apply the ClinGen group and points after reviewing the entry. Review GenCC and OMIM for unlisted genes/entities." | ||
| }, | ||
| { | ||
| "header": "Lumping criteria", | ||
| "content": | ||
| "- Only one disease entity asserted in literature.<br>- No molecular mechanism difference observed.<br>- Intrafamilial variability pronounced.<br>- Disease entities are part of a variable phenotype in a single organ system." | ||
| }, | ||
| { | ||
| "header": "Splitting criteria", | ||
| "content": "- More than one distinct disease entity asserted in literature.<br>- Distinguishable molecular mechanisms.<br>- Different inheritance patterns with varying phenotypes." | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| "lumpingAndSplittingCriteria": { | ||
| "lumpCriteria": [ | ||
| "Only one disease entity asserted in literature", | ||
| "No molecular mechanism difference observed", | ||
| "Intrafamilial variability pronounced", | ||
| "Disease entities are part of a variable phenotype in a single organ system" | ||
| ], | ||
| "splitCriteria": [ | ||
| "More than one distinct disease entity asserted in literature", | ||
| "Distinguishable molecular mechanisms", | ||
| "Different inheritance patterns with varying phenotypes" | ||
| ] | ||
| } | ||
| } |