-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: various element class and css tweaks to create a more tighter layout in properties sidebar (right side)
- Loading branch information
1 parent
00e001a
commit 3fff40d
Showing
13 changed files
with
523 additions
and
19 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
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
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
70 changes: 70 additions & 0 deletions
70
frontend/www/src/js/modules/dashboard/relationmapper/deleteRelationType.js
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,70 @@ | ||
| /** @typedef {import('@types/stemmaweb').BaseResponse} BaseResponse */ | ||
|
|
||
| /** | ||
| * Object to interact with the Stemmarest Middleware's API through high-level | ||
| * functions. | ||
| * | ||
| * @type {StemmarestService} | ||
| */ | ||
| const deleteRelationTypeService = stemmarestService; | ||
|
|
||
| class DeleteRelationType extends HTMLElement { | ||
|
|
||
| #name = ''; | ||
|
|
||
| constructor( relationTypeData ) { | ||
| super(); | ||
| this.#name = relationTypeData.name; | ||
| this.addEventListener( 'click', this.handleDelete ); | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| this.render(); | ||
| } | ||
|
|
||
| handleDelete() { | ||
| const { selectedTradition: tradition } = TRADITION_STORE.state; | ||
| StemmawebDialog.show( | ||
| 'Delete Relation Type', | ||
| `<p>Are you sure you want to delete the relation type <span class="fst-italic">${this.#name}</span>?</p>`, | ||
| { | ||
| onOk: () => { | ||
| deleteRelationTypeService.deleteRelationType( tradition.id, this.#name ).then( (res) => { | ||
| if (res.success) { | ||
| document.querySelector( 'relation-types' ).renderRelationTypes( {'display': 'block', 'opacity': 1 } ); | ||
| StemmawebAlert.show( | ||
| `<p class="d-inline">Deleted relation type <span class="fst-italic">${this.#name}</span></p>`, | ||
| 'success' | ||
| ); | ||
| // SECTION_STORE.sectionDeleted( section.id, tradition.id ); | ||
| } else { | ||
| StemmawebAlert.show( | ||
| `Error during deletion: ${res.message}`, | ||
| 'danger' | ||
| ); | ||
| } | ||
| }); | ||
| } | ||
| }, | ||
| { | ||
| okLabel: 'Yes, delete it', | ||
| okType: 'danger', | ||
| closeLabel: 'Cancel', | ||
| closeType: 'secondary' | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| this.innerHTML = ` | ||
| <a | ||
| class="link-secondary" | ||
| href="#" | ||
| aria-label="Delete relation type" | ||
| ><span class="btn-outline-danger">${feather.icons['trash-2'].toSvg()}</span></a> | ||
| `; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| customElements.define( 'delete-relation-type-button', DeleteRelationType ); |
143 changes: 143 additions & 0 deletions
143
frontend/www/src/js/modules/dashboard/relationmapper/editRelationType.js
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,143 @@ | ||
| /** @typedef {import('@types/stemmaweb').BaseResponse} BaseResponse */ | ||
|
|
||
| /** | ||
| * Object to interact with the Stemmarest Middleware's API through high-level | ||
| * functions. | ||
| * | ||
| * @type {StemmarestService} | ||
| */ | ||
| const editRelationTypeService = stemmarestService; | ||
|
|
||
| class EditRelationType extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| this.addEventListener( 'click', this.showDialog ); | ||
| } | ||
|
|
||
| /** | ||
| * @param {Tradition} tradition Tradition to render the metadata for. | ||
| * @returns {MetaItem[]} Array of metadata items to display on a form. | ||
| */ | ||
| static metadataFromTradition(tradition) { | ||
| const metadata = PropertyTableView.metadataFromTradition(tradition); | ||
| metadata.push({ | ||
| label: PropertyTableView.traditionMetadataLabels.name, | ||
| value: tradition.name, | ||
| inputOptions: { control: 'text', size: 40, required: true } | ||
| }); | ||
| return metadata; | ||
| } | ||
|
|
||
| connectedCallback() { | ||
| this.render(); | ||
| } | ||
|
|
||
| /** | ||
| * This helper ensures the modal is placed nicely fit with the properties | ||
| * sidebar. | ||
| * | ||
| * @returns {string} String representation of the needed properties of the | ||
| * style attribute. | ||
| * @todo: Add responsiveness on resize. | ||
| */ | ||
| #createDialogStyle() { | ||
| const width = $('sidebar-properties').getBoundingClientRect().width; | ||
| return ( | ||
| `margin-right: 0px; width: ${width}px; margin-top: 50px;` | ||
| ); | ||
| } | ||
|
|
||
| showDialog() { | ||
| const metaItems = PropertyTableView.sortedMetaItems( | ||
| EditProperties.metadataFromTradition( STEMMA_STORE.state.tradition ) | ||
| ); | ||
| const modal_body = ` | ||
| <form | ||
| id="edit-tradition-properties-form" | ||
| class="needs-validation" | ||
| novalidate="" | ||
| > | ||
| ${ metaItems.map( formControlFactory.renderFormControl ).join( '\n' ) } | ||
| </form> | ||
| `; | ||
| StemmawebDialog.show( | ||
| 'Edit relation type', | ||
| modal_body, | ||
| { onOk: this.processForm }, | ||
| { | ||
| okLabel: 'Save', | ||
| elemStyle: this.#createDialogStyle() | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * @returns {{ | ||
| * name: string; | ||
| * userId: string; | ||
| * language: string | null; | ||
| * direction: string; | ||
| * isPublic: boolean; | ||
| * }} | ||
| */ | ||
| static #extractFormValuesTradition() { | ||
| const name = $('name_input').value; | ||
| const language = $('language_input').value || null; | ||
| const direction = $('direction_input').value; | ||
| const isPublic = $('access_input').checked; | ||
| return { name, language, direction, isPublic }; | ||
| } | ||
|
|
||
| /** @returns {Promise} */ | ||
| processForm() { | ||
| const form = document.querySelector('#edit-tradition-properties-form'); | ||
| if (form.checkValidity()) { | ||
| const values = Object.values( | ||
| EditRelationType.#extractFormValuesTradition() | ||
| ); | ||
| const tradId = TRADITION_STORE.state.selectedTradition.id; | ||
| const userId = AUTH_STORE.state.user ? AUTH_STORE.state.user.id : null; | ||
| return editRelationTypeService | ||
| .updateTraditionMetadata( userId, tradId, ...values ) | ||
| .then(EditRelationType.#handleUpdateTraditionMetadataResponse); | ||
| } else { | ||
| form.classList.add('was-validated'); | ||
| return Promise.resolve({ | ||
| success: false, | ||
| message: 'Form validation error.' | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| /** @param {BaseResponse<T>} resp */ | ||
| static #handleUpdateTraditionMetadataResponse(resp) { | ||
| if (resp.success) { | ||
| StemmawebAlert.show('Metadata properties updated.', 'success'); | ||
| TRADITION_STORE.updateTradition(resp.data); | ||
| return Promise.resolve({ | ||
| success: true, | ||
| message: 'Metadata properties updated.' | ||
| }); | ||
| } else { | ||
| StemmawebAlert.show(`Error: ${resp.message}`, 'danger'); | ||
| return Promise.resolve({ | ||
| success: false, | ||
| message: resp.message | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| this.innerHTML = ` | ||
| <a | ||
| class="link-secondary" | ||
| href="#" | ||
| aria-label="Edit tradition properties" | ||
| > | ||
| <span>${feather.icons['edit'].toSvg()}</span> | ||
| </a> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('edit-relation-type-button', EditRelationType); |
Oops, something went wrong.