Skip to content

feat(vue-mri): reskin the rename, delete and materialize dialogs #3205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
khairul-syazwan wants to merge 4 commits into
base: khairul-syazwan/d2e-ui-library
Choose a base branch
from
Draft

feat(vue-mri): reskin the rename, delete and materialize dialogs #3205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e38d2aa
feat(vue-mri): reskin the rename and delete dialogs (#3122, #3124)
khairul-syazwan Aug 20, 2026
d4c2310
feat(vue-mri): reskin the materialize dialog and drop the prop-watche…
khairul-syazwan Aug 20, 2026
80cf453
refactor(vue-mri): rebuild UnsavedChangesDialog on D2eDialog
khairul-syazwan Aug 20, 2026
390bfb7
style(vue-mri): format the dialog files with prettier
khairul-syazwan Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 51 additions & 66 deletions plugins/ui/apps/vue-mri-ui-lib/src/components/AddCohort.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,69 +1,56 @@
<template>
<messageBox v-if="showAddCohortDialog" dim="true" :busy="cohortBusy" messageType="custom" @close="closeWindow">
<template v-slot:header>
<div style="maxwidth: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
{{ getText('MRI_PA_COLL_ADD_PATIENTS_TO_COLLECTION') + ` (${this.bookmarkName})` }}
</div>
</template>
<template v-slot:body>
<div class="cohort-dialog">
<appMessageStrip
:messageType="messageStrip.messageType"
:text="messageStrip.message"
v-if="messageStrip.show"
@closeEv="resetMessageStrip"
/>
<D2eDialog
:model-value="modelValue"
:busy="cohortBusy"
:title="getText('MRI_PA_BUTTON_ADD_TO_COLLECTION')"
data-testid="pa-modal-wrapper"
@update:model-value="onModelValueUpdate"
>
<appMessageStrip
:messageType="messageStrip.messageType"
:text="messageStrip.message"
v-if="messageStrip.show"
@closeEv="resetMessageStrip"
/>

<div class="form-group" v-if="cohortDefinitionType === 'D2E'">
<div class="row">
<div class="col-sm-4 form-check col-form-label">
<label class="form-check-label" for="cohort-radio-newcollection">{{
getText('MRI_PA_COLL_COHORT_DESCRIPTION')
}}</label>
</div>
<div class="col-sm-8">
<input
class="form-control"
:placeholder="getText('MRI_PA_COLL_ENTER_DESCRIPTION')"
v-model="cohortDescription"
tabindex="1"
@keydown.enter="onOkButtonPress"
/>
</div>
</div>
</div>
<div v-if="cohortDefinitionType === 'D2E'" class="cohort-dialog__description">
<D2eTextField
v-model="cohortDescription"
:label="getText('MRI_PA_COLL_COHORT_MATERIALIZATION_DESCRIPTION')"
:placeholder="getText('MRI_PA_COLL_ENTER_DESCRIPTION')"
@keydown.enter="onOkButtonPress"
/>
</div>

<!-- TODO: Customize dialog body for Atlas -->
<div v-if="cohortDefinitionType === 'Atlas' && !messageStrip.show">Click OK to materialize this cohort.</div>
</div>
</template>
<template v-slot:footer>
<div class="flex-spacer"></div>
<appButton
<!-- TODO: Customize dialog body for Atlas -->
<div v-if="cohortDefinitionType === 'Atlas' && !messageStrip.show">Click OK to materialize this cohort.</div>

<template #actions>
<D2eButton variant="secondary" :disabled="cohortBusy" @click="closeWindow">
{{ getText('MRI_PA_BUTTON_CANCEL') }}
</D2eButton>
<D2eButton
:disabled="cohortBusy || (messageStrip.show && messageStrip.messageType === 'error')"
:click="onOkButtonPress"
:text="getText('MRI_PA_COLL_BUT_OK')"
></appButton>
<appButton :disabled="cohortBusy" :click="closeWindow" :text="getText('MRI_PA_COLL_BUT_CANCEL')"></appButton>
:loading="cohortBusy"
@click="onOkButtonPress"
>
{{ getText('MRI_PA_BUTTON_MATERIALIZE') }}
</D2eButton>
</template>
</messageBox>
</D2eDialog>
</template>

<script lang="ts">
import { mapActions, mapGetters, mapMutations } from 'vuex'
import appButton from '../lib/ui/app-button.vue'
import appLabel from '../lib/ui/app-label.vue'
import { D2eButton, D2eDialog, D2eTextField } from '@d2e/ui'
import appMessageStrip from '../lib/ui/app-message-strip.vue'
import appSkinnyDropdown from '../lib/ui/app-skinny-dropdown.vue'
import * as types from '../store/mutation-types'
import messageBox from './MessageBox.vue'

export default {
name: 'addCohort',
props: ['bookmarkId', 'bookmarkName', 'openAddDialog', 'cohortDefinitionType', 'atlasCohortDefinitionId'],
props: ['bookmarkId', 'bookmarkName', 'modelValue', 'cohortDefinitionType', 'atlasCohortDefinitionId'],
data() {
return {
showAddCohortDialog: false,
cohortDescription: '',
cohortBusy: false,
messageStrip: {
Expand All @@ -74,11 +61,6 @@ export default {
}
},
watch: {
openAddDialog(val) {
if (val) {
this.openAddCohortDialog()
}
},
selectedCollection(newVal, oldVal) {
if (newVal === 'oldCollection') {
this.loadOldCollections()
Expand Down Expand Up @@ -145,12 +127,8 @@ export default {
'fireBookmarkQuery',
]),
...mapMutations([types.SET_COHORT_TYPE, types.SET_COLLECTION_TYPE, types.COLLECTIONS_SET_HASEXISTINGCOLLECTION]),
openAddCohortDialog() {
this.showAddCohortDialog = true
},
onOkButtonPress() {
try {
this.cohortDefinitionType === 'D2E'
const syntax = JSON.stringify({
datasetId: this.getSelectedDataset.id,
bookmarkId: this.bookmarkId,
Expand Down Expand Up @@ -203,14 +181,18 @@ export default {
console.error(e)
}
},
onModelValueUpdate(open) {
if (!open) {
this.closeWindow()
}
},
closeWindow() {
this.resetMessageStrip()
this.cohortBusy = false
this[types.SET_COHORT_TYPE]('subset')
this[types.SET_COLLECTION_TYPE]('newCollection')
this.cohortDescription = ''
this.showAddCohortDialog = false
this.$emit('closeEv')
this.$emit('update:modelValue', false)
},
resetMessageStrip() {
this.messageStrip = {
Expand All @@ -233,12 +215,15 @@ export default {
},
},
components: {
messageBox,
appLabel,
appButton,
appSkinnyDropdown,
D2eDialog,
D2eButton,
D2eTextField,
appMessageStrip,
},
}
</script>
<style></style>
<style scoped>
.cohort-dialog__description {
margin-bottom: 8px;
}
</style>
134 changes: 62 additions & 72 deletions plugins/ui/apps/vue-mri-ui-lib/src/components/Bookmarks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,87 +6,68 @@
v-if="messageStrip.show"
@closeEv="resetMessageStrip"
/>
<messageBox
dim="true"
dialogWidth="400px"
<D2eDialog
v-model="showRenameDialog"
:busy="isRenamingBookmark"
v-if="showRenameDialog"
:title="getText('MRI_PA_EXPLORATION_RENAME_DIALOG_TITLE')"
data-testid="pa-modal-wrapper"
@close="closeRenameBookmark"
>
<template v-slot:header>{{ getText('MRI_PA_BOOKMARK_RENAME_DIALOG_TITLE') }}</template>
<template v-slot:body>
<div>
<div class="div-bookmark-dialog">
<span>{{ getText('MRI_PA_BOOKMARK_RENAME_DIALOG_TEXT') }}</span>
<div class="input-container">
<!-- maxLength for input is this.maxLength+1 to allow invalid-feedback to be shown -->
<input
class="form-control"
v-focus
required
:maxlength="this.maxLength + 1"
v-model="renamedBookmark"
@keydown.enter="confirmRenameBookmark"
/>
</div>
<div class="invalid-feedback" v-bind:style="[cohortNameValidationState === 'invalid' && 'display: block;']">
{{ getText('MRI_PA_INVALID_NAME_ERROR') }}
</div>
<div class="invalid-feedback" v-bind:style="[hasExceededLength && 'display: block;']">
Filter name must not exceed 255 characters
</div>
<div class="invalid-feedback" v-bind:style="[cohortNameValidationState === 'empty' && 'display: block;']">
{{ getText('MRI_PA_BMK_EMPTY_NAME_ERROR') }}
</div>
</div>
</div>
</template>
<template v-slot:footer>
<div class="flex-spacer"></div>
<appButton
:click="confirmRenameBookmark"
:text="getText('MRI_PA_BUTTON_SAVE')"
:disabled="this.hasExceededLength || isRenamingBookmark"
></appButton>
<appButton
:click="closeRenameBookmark"
:text="getText('MRI_PA_BUTTON_CANCEL')"
<D2eTextField
v-model="renamedBookmark"
:label="getText('MRI_PA_EXPLORATION_NAME_LABEL')"
required
:error-messages="renameErrorMessages"
:maxlength="maxLength + 1"
autofocus
@keydown.enter="confirmRenameBookmark"
/>
<template #actions>
<D2eButton
variant="secondary"
:disabled="isRenamingBookmark"
></appButton>
data-testid="pa-save-dialog-cancel-btn"
@click="closeRenameBookmark"
>
{{ getText('MRI_PA_BUTTON_CANCEL') }}
</D2eButton>
<D2eButton
:disabled="hasExceededLength || isRenamingBookmark"
data-testid="pa-save-dialog-save-btn"
@click="confirmRenameBookmark"
>
{{ getText('MRI_PA_BUTTON_RENAME') }}
</D2eButton>
</template>
</messageBox>
<messageBox
messageType="warning"
dim="true"
dialogWidth="400px"
</D2eDialog>
<D2eDialog
v-model="showDeleteDialog"
:busy="isDeletingBookmark"
v-if="showDeleteDialog"
:title="getText('MRI_PA_EXPLORATION_DELETE_DIALOG_TITLE')"
data-testid="pa-modal-wrapper"
@close="closeDeleteBookmark"
>
<template v-slot:header>{{ getText('MRI_PA_BOOKMARK_DELETE_DIALOG_TITLE') }}</template>
<template v-slot:body>
<div>
<div class="div-bookmark-dialog">
<div>{{ getText('MRI_PA_BOOKMARK_DELETE_DIALOG_TEXT') }}</div>
<div>{{ getText('MRI_PA_BOOKMARK_DELETE_DIALOG_QUESTION_TEXT') }}</div>
</div>
</div>
</template>
<template v-slot:footer>
<div class="flex-spacer"></div>
<appButton
:click="confirmDeleteBookmark"
:text="getText('MRI_PA_BUTTON_DELETE')"
<p class="delete-dialog-text">{{ getText('MRI_PA_EXPLORATION_DELETE_DIALOG_TEXT') }}</p>
<template #actions>
<D2eButton
variant="secondary"
:disabled="isDeletingBookmark"
v-focus
></appButton>
<appButton
:click="closeDeleteBookmark"
:text="getText('MRI_PA_BUTTON_CANCEL')"
data-testid="pa-save-dialog-cancel-btn"
@click="closeDeleteBookmark"
>
{{ getText('MRI_PA_BUTTON_CANCEL') }}
</D2eButton>
<D2eButton
variant="danger"
:disabled="isDeletingBookmark"
></appButton>
v-focus
data-testid="pa-save-dialog-save-btn"
@click="confirmDeleteBookmark"
>
{{ getText('MRI_PA_BUTTON_YES_DELETE') }}
</D2eButton>
</template>
</messageBox>
</D2eDialog>

<ImportAtlasCohortDefinitionDialog
v-if="showImportAtlasCohortDefinition"
Expand Down Expand Up @@ -185,10 +166,9 @@
</cohortListDialog>

<addCohort
:openAddDialog="showAddCohortDialog"
v-model="showAddCohortDialog"
:bookmarkId="this.selectedBookmark?.id"
:bookmarkName="this.selectedBookmark?.name"
@closeEv="showAddCohortDialog = false"
:cohortDefinitionType="cohortDefinitionType"
:atlasCohortDefinitionId="atlasCohortDefinitionId"
>
Expand Down Expand Up @@ -218,6 +198,7 @@
<script lang="ts">
declare var sap: any
import { mapActions, mapGetters, mapMutations } from 'vuex'
import { D2eButton, D2eDialog, D2eTextField } from '@d2e/ui'
import appButton from '../lib/ui/app-button.vue'
import appCheckbox from '../lib/ui/app-checkbox.vue'
import cohortComparisonDialog from './CohortComparisonDialog.vue'
Expand Down Expand Up @@ -335,6 +316,12 @@ export default {
hasExceededLength() {
return this.renamedBookmark.length > this.maxLength
},
renameErrorMessages() {
if (this.cohortNameValidationState === 'invalid') return this.getText('MRI_PA_INVALID_NAME_ERROR')
if (this.hasExceededLength) return 'Filter name must not exceed 255 characters'
if (this.cohortNameValidationState === 'empty') return this.getText('MRI_PA_BMK_EMPTY_NAME_ERROR')
return []
},
isBookmarksLoading() {
return this.bookmarksDisplay.length === 0 && this.getBookmarksLoading
},
Expand Down Expand Up @@ -785,6 +772,9 @@ export default {
},
},
components: {
D2eDialog,
D2eButton,
D2eTextField,
messageBox,
appButton,
appCheckbox,
Expand Down
Loading
Loading