From 962140d6d149d2c0f9852fa6efad4af63cfe43b5 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 12 Dec 2023 17:05:13 +0200 Subject: [PATCH 01/17] Simplified name components --- .../core/app-dynamic-component-manifests.ts | 864 +++++++++--------- .../substance-form/form-sections.constant.ts | 2 + .../simplified-names/name-form.component.html | 78 ++ .../simplified-names/name-form.component.scss | 107 +++ .../name-form.component.spec.ts | 25 + .../simplified-names/name-form.component.ts | 161 ++++ ...-form-simplified-names-card.component.html | 38 + ...-form-simplified-names-card.component.scss | 45 + ...rm-simplified-names-card.component.spec.ts | 25 + ...ce-form-simplified-names-card.component.ts | 113 +++ ...-form-simplified-names-card.module.spec.ts | 13 + .../substance-form-simplified-names.module.ts | 53 ++ 12 files changed, 1095 insertions(+), 429 deletions(-) create mode 100644 src/app/core/substance-form/simplified-names/name-form.component.html create mode 100644 src/app/core/substance-form/simplified-names/name-form.component.scss create mode 100644 src/app/core/substance-form/simplified-names/name-form.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-names/name-form.component.ts create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts create mode 100644 src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts diff --git a/src/app/core/app-dynamic-component-manifests.ts b/src/app/core/app-dynamic-component-manifests.ts index c4d5b13bf..f6c92bfd4 100644 --- a/src/app/core/app-dynamic-component-manifests.ts +++ b/src/app/core/app-dynamic-component-manifests.ts @@ -1,434 +1,440 @@ import { - LazyLoadedComponentManifest + LazyLoadedComponentManifest } from './dynamic-component-loader/dynamic-component-manifest'; export const dynamicComponentManifests: LazyLoadedComponentManifest[] = [ - { - componentId: 'structure-details', - path: 'structure-details', - loadChildren: () => import('./substance-details/structure-details/structure-details.module') - .then(m => m.StructureDetailsModule), - }, - { - componentId: 'substance-audit-info', - path: 'substance-audit-info', - loadChildren: () => import('./substance-details/substance-audit-info/substance-audit-info.module') - .then(m => m.SubstanceAuditInfoModule), - }, - { - componentId: 'substance-codes', - path: 'substance-codes', - loadChildren: () => import('./substance-details/substance-codes/substance-codes.module') - .then(m => m.SubstanceCodesModule), - }, - { - componentId: 'substance-subunits', - path: 'substance-subunits', - loadChildren: () => import('./substance-details/substance-subunits/substance-subunits.module') - .then(m => m.SubstanceSubunitsModule), - }, - { - componentId: 'substance-moieties', - path: 'substance-moieties', - loadChildren: () => import('./substance-details/substance-moieties/substance-moieties.module') - .then(m => m.SubstanceMoietiesModule), - }, - { - componentId: 'substance-names', - path: 'substance-names', - loadChildren: () => import('./substance-details/substance-names/substance-names.module') - .then(m => m.SubstanceNamesModule), - }, - { - componentId: 'substance-notes', - path: 'substance-notes', - loadChildren: () => import('./substance-details/substance-notes/substance-notes.module') - .then(m => m.SubstanceNotesModule), - }, - { - componentId: 'substance-overview', - path: 'substance-overview', - loadChildren: () => import('./substance-details/substance-overview/substance-overview.module') - .then(m => m.SubstanceOverviewModule), - }, - { - componentId: 'substance-references', - path: 'substance-references', - loadChildren: () => import('./substance-details/substance-references/substance-references.module') - .then(m => m.SubstanceReferencesModule), - }, - { - componentId: 'substance-relationships-visualization', - path: 'substance-relationships-visualization', - loadChildren: () => import('./substance-details/substance-relationships-visualization/substance-relationships-visualization.module') - .then(m => m.SubstanceRelationshipsVisualizationModule), - }, - { - componentId: 'substance-relationships', - path: 'substance-relationships', - loadChildren: () => import('./substance-details/substance-relationships/substance-relationships.module') - .then(m => m.SubstanceRelationshipsModule), - }, - { - componentId: 'substance-concept-definition', - path: 'substance-concept-definition', - loadChildren: () => import('./substance-details/substance-concept-definition/substance-concept-definition.module') - .then(m => m.SubstanceConceptDefinitionModule), - }, - { - componentId: 'substance-polymer-structure', - path: 'substance-polymer-structure', - loadChildren: () => import('./substance-details/substance-polymer-structure/substance-polymer-structure.module') - .then(m => m.SubstancePolymerStructureModule), - }, - { - componentId: 'substance-monomers', - path: 'substance-monomers', - loadChildren: () => import('./substance-details/substance-monomers/substance-monomers.module') - .then(m => m.SubstanceMonomersModule), - }, - { - componentId: 'substance-structural-units', - path: 'substance-structural-units', - loadChildren: () => import('./substance-details/substance-structural-units/substance-structural-units.module') - .then(m => m.SubstanceStructuralUnitsModule), - }, - { - componentId: 'substance-mixture-components', - path: 'substance-mixture-components', - loadChildren: () => import('./substance-details/substance-mixture-components/substance-mixture-components.module') - .then(m => m.SubstanceMixtureComponentsModule), - }, - { - componentId: 'substance-modifications', - path: 'substance-modifications', - loadChildren: () => import('./substance-details/substance-modifications/substance-modifications.module') - .then(m => m.SubstanceModificationsModule), - }, - { - componentId: 'substance-disulfide-links', - path: 'substance-disulfide-links', - loadChildren: () => import('./substance-details/substance-disulfide-links/substance-disulfide-links.module') - .then(m => m.SubstanceDisulfideLinksModule), - }, - { - componentId: 'substance-other-links', - path: 'substance-other-links', - loadChildren: () => import('./substance-details/substance-other-links/substance-other-links.module') - .then(m => m.SubstanceOtherLinksModule), - }, - { - componentId: 'substance-glycosylation', - path: 'substance-glycosylation', - loadChildren: () => import('./substance-details/substance-glycosylation/substance-glycosylation.module') - .then(m => m.SubstanceGlycosylationModule), - }, - { - componentId: 'substance-na-sugars', - path: 'substance-na-sugars', - loadChildren: () => import('./substance-details/substance-na-sugars/substance-na-sugars.module') - .then(m => m.SubstanceNaSugarsModule), - }, - { - componentId: 'substance-na-linkages', - path: 'substance-na-linkages', - loadChildren: () => import('./substance-details/substance-na-linkages/substance-na-linkages.module') - .then(m => m.SubstanceNaLinkagesModule), - }, - { - componentId: 'substance-properties', - path: 'substance-properties', - loadChildren: () => import('./substance-details/substance-properties/substance-properties.module') - .then(m => m.SubstancePropertiesModule), - }, - { - componentId: 'substance-constituents', - path: 'substance-constituents', - loadChildren: () => import('./substance-details/substance-constituents/substance-constituents.module') - .then(m => m.SubstanceConstituentsModule), - }, - { - componentId: 'substance-primary-definition', - path: 'substance-primary-definition', - loadChildren: () => import('./substance-details/substance-primary-definition/substance-primary-definition.module') - .then(m => m.SubstancePrimaryDefinitionModule), - }, - { - componentId: 'substance-alternative-definition', - path: 'substance-alternative-definition', - loadChildren: () => import('./substance-details/substance-alternative-definition/substance-alternative-definition.module') - .then(m => m.SubstanceAlternativeDefinitionModule), - }, - { - componentId: 'substance-variant-concepts', - path: 'substance-variant-concepts', - loadChildren: () => import('./substance-details/substance-variant-concepts/substance-variant-concepts.module') - .then(m => m.SubstanceVariantConceptsModule), - }, - { - componentId: 'substance-mixture-source', - path: 'substance-mixture-source', - loadChildren: () => import('./substance-details/substance-mixture-source/substance-mixture-source.module') - .then(m => m.SubstanceMixtureSourceModule), - }, - { - componentId: 'substance-mixture-parent', - path: 'substance-mixture-parent', - loadChildren: () => import('./substance-details/substance-mixture-parent/substance-mixture-parent.module') - .then(m => m.SubstanceMixtureParentModule), - }, - { - componentId: 'substance-hierarchy', - path: 'substance-hierarchy', - loadChildren: () => import('./substance-details/substance-hierarchy/substance-hierarchy.module') - .then(m => m.SubstanceHierarchyModule), - }, - { - componentId: 'substance-history', - path: 'substance-history', - loadChildren: () => import('./substance-details/substance-history/substance-history.module') - .then(m => m.SubstanceHistoryModule), - }, - { - componentId: 'substance-ssg-parent-substance', - path: 'substance-ssg-parent-substance', - loadChildren: () => import('./substance-details/substance-ssg-parent-substance/substance-ssg-parent-substance.module') - .then(m => m.SubstanceSsgParentSubstanceModule), - }, - { - componentId: 'substance-ssg1-parent', - path: 'substance-ssg1-parent', - loadChildren: () => import('./substance-details/substance-ssg1-parent/substance-ssg1-parent.module') - .then(m => m.SubstanceSsg1ParentModule), - }, - { - componentId: 'substance-ssg-grade', - path: 'substance-ssg-grade', - loadChildren: () => import('./substance-details/substance-ssg-grade/substance-ssg-grade.module') - .then(m => m.SubstanceSsgGradeModule), - }, - { - componentId: 'substance-ssg-definition', - path: 'substance-ssg-definition', - loadChildren: () => import('./substance-details/substance-ssg-definition/substance-ssg-definition.module') - .then(m => m.SubstanceSsgDefinitionModule), - }, - { - componentId: 'substance-dependencies-image', - path: 'substance-dependencies-image', - loadChildren: () => import('./substance-details/substance-dependencies-image/substance-dependencies-image.module') - .then(m => m.SubstanceDependenciesImageModule), - }, - { - componentId: 'substance-form-definition', - path: 'substance-form-definition', - loadChildren: () => import('./substance-form/substance-form-definition/substance-form-definition.module') - .then(m => m.SubstanceFormDefinitionModule), - }, - { - componentId: 'substance-form-references', - path: 'substance-form-references', - loadChildren: () => import('./substance-form/references/substance-form-references.module') - .then(m => m.SubstanceFormReferencesModule), - }, - { - componentId: 'substance-form-names', - path: 'substance-form-names', - loadChildren: () => import('./substance-form/names/substance-form-names.module') - .then(m => m.SubstanceFormNamesModule), - }, - { - componentId: 'substance-form-structure', - path: 'substance-form-structure', - loadChildren: () => import('./substance-form/structure/substance-form-structure.module') - .then(m => m.SubstanceFormStructureModule), - }, - { - componentId: 'substance-form-moieties', - path: 'substance-form-moieties', - loadChildren: () => import('./substance-form/moieties/substance-form-moieties.module') - .then(m => m.SubstanceFormMoietiesModule), - }, - { - componentId: 'substance-form-codes-card', - path: 'substance-form-codes-card', - loadChildren: () => import('./substance-form/codes/substance-form-codes.module') - .then(m => m.SubstanceFormCodesModule), - }, - { - componentId: 'substance-form-relationships', - path: 'substance-form-relationships', - loadChildren: () => import('./substance-form/relationships/substance-form-relationships.module') - .then(m => m.SubstanceFormRelationshipsModule), - }, - { - componentId: 'substance-form-notes', - path: 'substance-form-notes', - loadChildren: () => import('./substance-form/notes/substance-form-notes.module') - .then(m => m.SubstanceFormNotesModule), - }, - { - componentId: 'substance-form-properties', - path: 'substance-form-properties', - loadChildren: () => import('./substance-form/properties/substance-form-properties.module') - .then(m => m.SubstanceFormPropertiesModule) - }, - { - componentId: 'substance-form-subunits', - path: 'substance-form-subunits', - loadChildren: () => import('./substance-form/substance-form-subunits/substance-form-subunits.module') - .then(m => m.SubstanceFormSubunitsModule) - }, - { - componentId: 'substance-form-other-links', - path: 'substance-form-other-links', - loadChildren: () => import('./substance-form/other-links/substance-form-other-links.module') - .then(m => m.SubstanceFormOtherLinksModule) - }, - { - componentId: 'substance-form-disulfide-links', - path: 'substance-form-disulfide-links', - loadChildren: () => import('./substance-form/disulfide-links/substance-form-disulfide-links.module') - .then(m => m.SubstanceFormDisulfideLinksModule) - }, - { - componentId: 'substance-form-glycosylation', - path: 'substance-form-glycosylation', - loadChildren: () => import('./substance-form/glycosylation/substance-form-glycosylation.module') - .then(m => m.SubstanceFormGlycosylationModule) - }, - { - componentId: 'substance-form-structural-modifications', - path: 'substance-form-structural-modifications', - loadChildren: () => import('./substance-form/structural-modifications/substance-form-structural-modifications.module') - .then(m => m.SubstanceFormStructuralModificationsModule) - }, - { - componentId: 'substance-form-agent-modifications-card', - path: 'substance-form-agent-modifications-card', - loadChildren: () => import('./substance-form/agent-modifications/substance-form-agent-modifications.module') - .then(m => m.SubstanceFormAgentModificationsModule) - }, - { - componentId: 'substance-form-physical-modifications', - path: 'substance-form-physical-modifications', - loadChildren: () => import('./substance-form/physical-modifications/substance-form-physical-modifications.module') - .then(m => m.SubstanceFormPhysicalModificationsModule) - }, - { - componentId: 'substance-form-protein-details', - path: 'substance-form-protein-details', - loadChildren: () => import('./substance-form/protein-details/substance-form-protein-details.module') - .then(m => m.SubstanceFormProteinDetailsModule) - }, - { - componentId: 'nucleic-acid-details-form', - path: 'nucleic-acid-details-form', - loadChildren: () => import('./substance-form/nucleic-acid-details-form/nucleic-acid-details-form.module') - .then(m => m.NucleicAcidDetailsFormModule) - }, - { - componentId: 'substance-form-links', - path: 'substance-form-links', - loadChildren: () => import('./substance-form/links/substance-form-links.module') - .then(m => m.SubstanceFormLinksModule) - }, - { - componentId: 'substance-form-sugars', - path: 'substance-form-sugars', - loadChildren: () => import('./substance-form/substance-form-sugars/substance-form-sugars.module') - .then(m => m.SubstanceFormSugarsModule) - }, - { - componentId: 'substance-form-mixture-details', - path: 'substance-form-mixture-details', - loadChildren: () => import('./substance-form/mixture-details/substance-form-mixture-details.module') - .then(m => m.SubstanceFormMixtureDetailsModule) - }, - { - componentId: 'substance-form-mixture-components', - path: 'substance-form-mixture-components', - loadChildren: () => import('./substance-form/mixture-components/substance-form-mixture-components.module') - .then(m => m.SubstanceFormMixtureComponentsModule) - }, - { - componentId: 'substance-form-structurally-diverse-source', - path: 'substance-form-structurally-diverse-source', - loadChildren: () => - import('./substance-form/structurally-diverse/substance-form-structurally-diverse-source/substance-form-structurally-diverse-source.module') - .then(m => m.SubstanceFormStructurallyDiverseSourceModule) - }, - { - componentId: 'substance-form-structurally-diverse-organism', - path: 'substance-form-structurally-diverse-organism', - loadChildren: () => - import('./substance-form/structurally-diverse/substance-form-structurally-diverse-organism/substance-form-structurally-diverse-organism.module') - .then(m => m.SubstanceFormStructurallyDiverseOrganismModule) - }, - { - componentId: 'substance-form-constituents', - path: 'substance-form-constituents', - loadChildren: () => import('./substance-form/constituents/substance-form-constituents.module') - .then(m => m.SubstanceFormConstituentsModule) - }, - { - componentId: 'substance-form-polymer-classification', - path: 'substance-form-polymer-classification', - loadChildren: () => import('./substance-form/polymer-classification/substance-form-polymer-classification.module') - .then(m => m.SubstanceFormPolymerClassificationModule) - }, - { - componentId: 'substance-form-monomers', - path: 'substance-form-monomers', - loadChildren: () => import('./substance-form/monomers/substance-form-monomers.module') - .then(m => m.SubstanceFormMonomersModule) - }, - { - componentId: 'substance-form-structural-units', - path: 'substance-form-structural-units', - loadChildren: () => import('./substance-form/structural-units/substance-form-structural-units.module') - .then(m => m.SubstanceFormStructuralUnitsModule) - }, - { - componentId: 'substance-form-change-reason', - path: 'substance-form-change-reason', - loadChildren: () => import('./substance-form/substance-form-change-reason/substance-form-change-reason.module') - .then(m => m.SubstanceFormChangeReasonModule), - }, - { - componentId: 'substance-form-ssg-parent-substance', - path: 'ssg-parent-substance-form', - loadChildren: () => import('./substance-form/ssg-parent-substance-form/ssg-parent-substance-form.module') - .then(m => m.SsgParentSubstanceFormModule) - }, - { - componentId: 'substance-form-ssg-grade', - path: 'ssg-grade-form', - loadChildren: () => import('./substance-form/ssg-grade-form/ssg-grade-form.module') - .then(m => m.SsgGradeFormModule) - }, - { - componentId: 'substance-form-ssg-definition', - path: 'ssg-definition-form', - loadChildren: () => import('./substance-form/ssg-definition-form/ssg-definition-form.module') - .then(m => m.SsgDefinitionFormModule) - }, - { - componentId: 'substance-form-ssg4m-process', - path: 'ssg4m-process-form', - loadChildren: () => import('./substance-ssg4m/ssg4m-process/substance-form-ssg4m-process.module') - .then(m => m.SubstanceSsg4mProcessModule) - }, - { - componentId: 'substance-form-ssg2-manufacturing', - path: 'substance-form-ssg2-manufacturing', - loadChildren: () => import('./substance-ssg2/ssg2-manufacturing/ssg2-manufacturing.module') - .then(m => m.Ssg2ManufacturingModule) - }, - { - componentId: 'substance-form-ssg2-overview', - path: 'substance-form-ssg2-overview', - loadChildren: () => import('./substance-ssg2/ssg2-overview-form/ssg2-overview-form.module') - .then(m => m.Ssg2OverviewFormModule) - } + { + componentId: 'structure-details', + path: 'structure-details', + loadChildren: () => import('./substance-details/structure-details/structure-details.module') + .then(m => m.StructureDetailsModule), + }, + { + componentId: 'substance-audit-info', + path: 'substance-audit-info', + loadChildren: () => import('./substance-details/substance-audit-info/substance-audit-info.module') + .then(m => m.SubstanceAuditInfoModule), + }, + { + componentId: 'substance-codes', + path: 'substance-codes', + loadChildren: () => import('./substance-details/substance-codes/substance-codes.module') + .then(m => m.SubstanceCodesModule), + }, + { + componentId: 'substance-subunits', + path: 'substance-subunits', + loadChildren: () => import('./substance-details/substance-subunits/substance-subunits.module') + .then(m => m.SubstanceSubunitsModule), + }, + { + componentId: 'substance-moieties', + path: 'substance-moieties', + loadChildren: () => import('./substance-details/substance-moieties/substance-moieties.module') + .then(m => m.SubstanceMoietiesModule), + }, + { + componentId: 'substance-names', + path: 'substance-names', + loadChildren: () => import('./substance-details/substance-names/substance-names.module') + .then(m => m.SubstanceNamesModule), + }, + { + componentId: 'substance-notes', + path: 'substance-notes', + loadChildren: () => import('./substance-details/substance-notes/substance-notes.module') + .then(m => m.SubstanceNotesModule), + }, + { + componentId: 'substance-overview', + path: 'substance-overview', + loadChildren: () => import('./substance-details/substance-overview/substance-overview.module') + .then(m => m.SubstanceOverviewModule), + }, + { + componentId: 'substance-references', + path: 'substance-references', + loadChildren: () => import('./substance-details/substance-references/substance-references.module') + .then(m => m.SubstanceReferencesModule), + }, + { + componentId: 'substance-relationships-visualization', + path: 'substance-relationships-visualization', + loadChildren: () => import('./substance-details/substance-relationships-visualization/substance-relationships-visualization.module') + .then(m => m.SubstanceRelationshipsVisualizationModule), + }, + { + componentId: 'substance-relationships', + path: 'substance-relationships', + loadChildren: () => import('./substance-details/substance-relationships/substance-relationships.module') + .then(m => m.SubstanceRelationshipsModule), + }, + { + componentId: 'substance-concept-definition', + path: 'substance-concept-definition', + loadChildren: () => import('./substance-details/substance-concept-definition/substance-concept-definition.module') + .then(m => m.SubstanceConceptDefinitionModule), + }, + { + componentId: 'substance-polymer-structure', + path: 'substance-polymer-structure', + loadChildren: () => import('./substance-details/substance-polymer-structure/substance-polymer-structure.module') + .then(m => m.SubstancePolymerStructureModule), + }, + { + componentId: 'substance-monomers', + path: 'substance-monomers', + loadChildren: () => import('./substance-details/substance-monomers/substance-monomers.module') + .then(m => m.SubstanceMonomersModule), + }, + { + componentId: 'substance-structural-units', + path: 'substance-structural-units', + loadChildren: () => import('./substance-details/substance-structural-units/substance-structural-units.module') + .then(m => m.SubstanceStructuralUnitsModule), + }, + { + componentId: 'substance-mixture-components', + path: 'substance-mixture-components', + loadChildren: () => import('./substance-details/substance-mixture-components/substance-mixture-components.module') + .then(m => m.SubstanceMixtureComponentsModule), + }, + { + componentId: 'substance-modifications', + path: 'substance-modifications', + loadChildren: () => import('./substance-details/substance-modifications/substance-modifications.module') + .then(m => m.SubstanceModificationsModule), + }, + { + componentId: 'substance-disulfide-links', + path: 'substance-disulfide-links', + loadChildren: () => import('./substance-details/substance-disulfide-links/substance-disulfide-links.module') + .then(m => m.SubstanceDisulfideLinksModule), + }, + { + componentId: 'substance-other-links', + path: 'substance-other-links', + loadChildren: () => import('./substance-details/substance-other-links/substance-other-links.module') + .then(m => m.SubstanceOtherLinksModule), + }, + { + componentId: 'substance-glycosylation', + path: 'substance-glycosylation', + loadChildren: () => import('./substance-details/substance-glycosylation/substance-glycosylation.module') + .then(m => m.SubstanceGlycosylationModule), + }, + { + componentId: 'substance-na-sugars', + path: 'substance-na-sugars', + loadChildren: () => import('./substance-details/substance-na-sugars/substance-na-sugars.module') + .then(m => m.SubstanceNaSugarsModule), + }, + { + componentId: 'substance-na-linkages', + path: 'substance-na-linkages', + loadChildren: () => import('./substance-details/substance-na-linkages/substance-na-linkages.module') + .then(m => m.SubstanceNaLinkagesModule), + }, + { + componentId: 'substance-properties', + path: 'substance-properties', + loadChildren: () => import('./substance-details/substance-properties/substance-properties.module') + .then(m => m.SubstancePropertiesModule), + }, + { + componentId: 'substance-constituents', + path: 'substance-constituents', + loadChildren: () => import('./substance-details/substance-constituents/substance-constituents.module') + .then(m => m.SubstanceConstituentsModule), + }, + { + componentId: 'substance-primary-definition', + path: 'substance-primary-definition', + loadChildren: () => import('./substance-details/substance-primary-definition/substance-primary-definition.module') + .then(m => m.SubstancePrimaryDefinitionModule), + }, + { + componentId: 'substance-alternative-definition', + path: 'substance-alternative-definition', + loadChildren: () => import('./substance-details/substance-alternative-definition/substance-alternative-definition.module') + .then(m => m.SubstanceAlternativeDefinitionModule), + }, + { + componentId: 'substance-variant-concepts', + path: 'substance-variant-concepts', + loadChildren: () => import('./substance-details/substance-variant-concepts/substance-variant-concepts.module') + .then(m => m.SubstanceVariantConceptsModule), + }, + { + componentId: 'substance-mixture-source', + path: 'substance-mixture-source', + loadChildren: () => import('./substance-details/substance-mixture-source/substance-mixture-source.module') + .then(m => m.SubstanceMixtureSourceModule), + }, + { + componentId: 'substance-mixture-parent', + path: 'substance-mixture-parent', + loadChildren: () => import('./substance-details/substance-mixture-parent/substance-mixture-parent.module') + .then(m => m.SubstanceMixtureParentModule), + }, + { + componentId: 'substance-hierarchy', + path: 'substance-hierarchy', + loadChildren: () => import('./substance-details/substance-hierarchy/substance-hierarchy.module') + .then(m => m.SubstanceHierarchyModule), + }, + { + componentId: 'substance-history', + path: 'substance-history', + loadChildren: () => import('./substance-details/substance-history/substance-history.module') + .then(m => m.SubstanceHistoryModule), + }, + { + componentId: 'substance-ssg-parent-substance', + path: 'substance-ssg-parent-substance', + loadChildren: () => import('./substance-details/substance-ssg-parent-substance/substance-ssg-parent-substance.module') + .then(m => m.SubstanceSsgParentSubstanceModule), + }, + { + componentId: 'substance-ssg1-parent', + path: 'substance-ssg1-parent', + loadChildren: () => import('./substance-details/substance-ssg1-parent/substance-ssg1-parent.module') + .then(m => m.SubstanceSsg1ParentModule), + }, + { + componentId: 'substance-ssg-grade', + path: 'substance-ssg-grade', + loadChildren: () => import('./substance-details/substance-ssg-grade/substance-ssg-grade.module') + .then(m => m.SubstanceSsgGradeModule), + }, + { + componentId: 'substance-ssg-definition', + path: 'substance-ssg-definition', + loadChildren: () => import('./substance-details/substance-ssg-definition/substance-ssg-definition.module') + .then(m => m.SubstanceSsgDefinitionModule), + }, + { + componentId: 'substance-dependencies-image', + path: 'substance-dependencies-image', + loadChildren: () => import('./substance-details/substance-dependencies-image/substance-dependencies-image.module') + .then(m => m.SubstanceDependenciesImageModule), + }, + { + componentId: 'substance-form-definition', + path: 'substance-form-definition', + loadChildren: () => import('./substance-form/substance-form-definition/substance-form-definition.module') + .then(m => m.SubstanceFormDefinitionModule), + }, + { + componentId: 'substance-form-references', + path: 'substance-form-references', + loadChildren: () => import('./substance-form/references/substance-form-references.module') + .then(m => m.SubstanceFormReferencesModule), + }, + { + componentId: 'substance-form-names', + path: 'substance-form-names', + loadChildren: () => import('./substance-form/names/substance-form-names.module') + .then(m => m.SubstanceFormNamesModule), + }, + { + componentId: 'substance-form-simplified-names', + path: 'substance-form-simplified-names', + loadChildren: () => import('./substance-form/simplified-names/substance-form-simplified-names.module') + .then(m => m.SubstanceFormSimplifiedNamesModule), + }, + { + componentId: 'substance-form-structure', + path: 'substance-form-structure', + loadChildren: () => import('./substance-form/structure/substance-form-structure.module') + .then(m => m.SubstanceFormStructureModule), + }, + { + componentId: 'substance-form-moieties', + path: 'substance-form-moieties', + loadChildren: () => import('./substance-form/moieties/substance-form-moieties.module') + .then(m => m.SubstanceFormMoietiesModule), + }, + { + componentId: 'substance-form-codes-card', + path: 'substance-form-codes-card', + loadChildren: () => import('./substance-form/codes/substance-form-codes.module') + .then(m => m.SubstanceFormCodesModule), + }, + { + componentId: 'substance-form-relationships', + path: 'substance-form-relationships', + loadChildren: () => import('./substance-form/relationships/substance-form-relationships.module') + .then(m => m.SubstanceFormRelationshipsModule), + }, + { + componentId: 'substance-form-notes', + path: 'substance-form-notes', + loadChildren: () => import('./substance-form/notes/substance-form-notes.module') + .then(m => m.SubstanceFormNotesModule), + }, + { + componentId: 'substance-form-properties', + path: 'substance-form-properties', + loadChildren: () => import('./substance-form/properties/substance-form-properties.module') + .then(m => m.SubstanceFormPropertiesModule) + }, + { + componentId: 'substance-form-subunits', + path: 'substance-form-subunits', + loadChildren: () => import('./substance-form/substance-form-subunits/substance-form-subunits.module') + .then(m => m.SubstanceFormSubunitsModule) + }, + { + componentId: 'substance-form-other-links', + path: 'substance-form-other-links', + loadChildren: () => import('./substance-form/other-links/substance-form-other-links.module') + .then(m => m.SubstanceFormOtherLinksModule) + }, + { + componentId: 'substance-form-disulfide-links', + path: 'substance-form-disulfide-links', + loadChildren: () => import('./substance-form/disulfide-links/substance-form-disulfide-links.module') + .then(m => m.SubstanceFormDisulfideLinksModule) + }, + { + componentId: 'substance-form-glycosylation', + path: 'substance-form-glycosylation', + loadChildren: () => import('./substance-form/glycosylation/substance-form-glycosylation.module') + .then(m => m.SubstanceFormGlycosylationModule) + }, + { + componentId: 'substance-form-structural-modifications', + path: 'substance-form-structural-modifications', + loadChildren: () => import('./substance-form/structural-modifications/substance-form-structural-modifications.module') + .then(m => m.SubstanceFormStructuralModificationsModule) + }, + { + componentId: 'substance-form-agent-modifications-card', + path: 'substance-form-agent-modifications-card', + loadChildren: () => import('./substance-form/agent-modifications/substance-form-agent-modifications.module') + .then(m => m.SubstanceFormAgentModificationsModule) + }, + { + componentId: 'substance-form-physical-modifications', + path: 'substance-form-physical-modifications', + loadChildren: () => import('./substance-form/physical-modifications/substance-form-physical-modifications.module') + .then(m => m.SubstanceFormPhysicalModificationsModule) + }, + { + componentId: 'substance-form-protein-details', + path: 'substance-form-protein-details', + loadChildren: () => import('./substance-form/protein-details/substance-form-protein-details.module') + .then(m => m.SubstanceFormProteinDetailsModule) + }, + { + componentId: 'nucleic-acid-details-form', + path: 'nucleic-acid-details-form', + loadChildren: () => import('./substance-form/nucleic-acid-details-form/nucleic-acid-details-form.module') + .then(m => m.NucleicAcidDetailsFormModule) + }, + { + componentId: 'substance-form-links', + path: 'substance-form-links', + loadChildren: () => import('./substance-form/links/substance-form-links.module') + .then(m => m.SubstanceFormLinksModule) + }, + { + componentId: 'substance-form-sugars', + path: 'substance-form-sugars', + loadChildren: () => import('./substance-form/substance-form-sugars/substance-form-sugars.module') + .then(m => m.SubstanceFormSugarsModule) + }, + { + componentId: 'substance-form-mixture-details', + path: 'substance-form-mixture-details', + loadChildren: () => import('./substance-form/mixture-details/substance-form-mixture-details.module') + .then(m => m.SubstanceFormMixtureDetailsModule) + }, + { + componentId: 'substance-form-mixture-components', + path: 'substance-form-mixture-components', + loadChildren: () => import('./substance-form/mixture-components/substance-form-mixture-components.module') + .then(m => m.SubstanceFormMixtureComponentsModule) + }, + { + componentId: 'substance-form-structurally-diverse-source', + path: 'substance-form-structurally-diverse-source', + loadChildren: () => + import('./substance-form/structurally-diverse/substance-form-structurally-diverse-source/substance-form-structurally-diverse-source.module') + .then(m => m.SubstanceFormStructurallyDiverseSourceModule) + }, + { + componentId: 'substance-form-structurally-diverse-organism', + path: 'substance-form-structurally-diverse-organism', + loadChildren: () => + import('./substance-form/structurally-diverse/substance-form-structurally-diverse-organism/substance-form-structurally-diverse-organism.module') + .then(m => m.SubstanceFormStructurallyDiverseOrganismModule) + }, + { + componentId: 'substance-form-constituents', + path: 'substance-form-constituents', + loadChildren: () => import('./substance-form/constituents/substance-form-constituents.module') + .then(m => m.SubstanceFormConstituentsModule) + }, + { + componentId: 'substance-form-polymer-classification', + path: 'substance-form-polymer-classification', + loadChildren: () => import('./substance-form/polymer-classification/substance-form-polymer-classification.module') + .then(m => m.SubstanceFormPolymerClassificationModule) + }, + { + componentId: 'substance-form-monomers', + path: 'substance-form-monomers', + loadChildren: () => import('./substance-form/monomers/substance-form-monomers.module') + .then(m => m.SubstanceFormMonomersModule) + }, + { + componentId: 'substance-form-structural-units', + path: 'substance-form-structural-units', + loadChildren: () => import('./substance-form/structural-units/substance-form-structural-units.module') + .then(m => m.SubstanceFormStructuralUnitsModule) + }, + { + componentId: 'substance-form-change-reason', + path: 'substance-form-change-reason', + loadChildren: () => import('./substance-form/substance-form-change-reason/substance-form-change-reason.module') + .then(m => m.SubstanceFormChangeReasonModule), + }, + { + componentId: 'substance-form-ssg-parent-substance', + path: 'ssg-parent-substance-form', + loadChildren: () => import('./substance-form/ssg-parent-substance-form/ssg-parent-substance-form.module') + .then(m => m.SsgParentSubstanceFormModule) + }, + { + componentId: 'substance-form-ssg-grade', + path: 'ssg-grade-form', + loadChildren: () => import('./substance-form/ssg-grade-form/ssg-grade-form.module') + .then(m => m.SsgGradeFormModule) + }, + { + componentId: 'substance-form-ssg-definition', + path: 'ssg-definition-form', + loadChildren: () => import('./substance-form/ssg-definition-form/ssg-definition-form.module') + .then(m => m.SsgDefinitionFormModule) + }, + { + componentId: 'substance-form-ssg4m-process', + path: 'ssg4m-process-form', + loadChildren: () => import('./substance-ssg4m/ssg4m-process/substance-form-ssg4m-process.module') + .then(m => m.SubstanceSsg4mProcessModule) + }, + { + componentId: 'substance-form-ssg2-manufacturing', + path: 'substance-form-ssg2-manufacturing', + loadChildren: () => import('./substance-ssg2/ssg2-manufacturing/ssg2-manufacturing.module') + .then(m => m.Ssg2ManufacturingModule) + }, + { + componentId: 'substance-form-ssg2-overview', + path: 'substance-form-ssg2-overview', + loadChildren: () => import('./substance-ssg2/ssg2-overview-form/ssg2-overview-form.module') + .then(m => m.Ssg2OverviewFormModule) + } ]; diff --git a/src/app/core/substance-form/form-sections.constant.ts b/src/app/core/substance-form/form-sections.constant.ts index 2832f4dc0..6d0546709 100644 --- a/src/app/core/substance-form/form-sections.constant.ts +++ b/src/app/core/substance-form/form-sections.constant.ts @@ -2,6 +2,7 @@ export const formSections: { [substanceType: string]: Array } = { chemical: [ 'substance-form-definition', 'substance-form-names', + 'substance-form-simplified-names', 'substance-form-structure', 'substance-form-moieties', 'substance-form-codes-card', @@ -140,3 +141,4 @@ export const formSections: { [substanceType: string]: Array } = { 'substance-form-ssg4m-process', ] }; + diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html new file mode 100644 index 000000000..eece85e5a --- /dev/null +++ b/src/app/core/substance-form/simplified-names/name-form.component.html @@ -0,0 +1,78 @@ +
+
+ Deleted  + +
+ +
+
+ +
+ + + + + + + + + + + + + + + + resolve + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.scss b/src/app/core/substance-form/simplified-names/name-form.component.scss new file mode 100644 index 000000000..ecdb2e099 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/name-form.component.scss @@ -0,0 +1,107 @@ +.name-form-container { + padding: 30px 10px 12px 10px; + position: relative; +} + +.collapse { + padding: 20px 10px 12px 10px; + position: relative; +} + +.resolve { + padding: 0px 20px 20px 0px; + color: var(--primary-color); +} + +.chevron { + width: 20px; + line-height: 67px; + color: var(--chevron-color); +} +.chevron-button { + width: 20px; + +} + +.notification-backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + z-index: 10; + background-color: var(--notif-backdrop-bg-color); + justify-content: center; + align-items: center; + font-size: 30px; + font-weight: bold; + color: var(--notif-backdrop-color); +} + +.form-row { + display: flex; + justify-content: space-between; + align-items: flex-end; + + .delete-container { + padding: 0 10px 8px 0; + } + + .checkbox-container, .radio-container { + padding-bottom: 18px; + } + + .radio-container, .checkbox-container { + padding-right: 15px; + } + + .name, .tags, .domains { + flex-grow: 1; + padding-right: 15px; + } + + .jurisdiction { + flex-grow: 1; + } +} + +.references-container, .nameorgs-container { + width: 100%; +} + +.column-radio { + ::ng-deep .mat-radio-label { + flex-direction: column-reverse; + } + + ::ng-deep .mat-radio-label-content { + padding-left: 0; + font-size: 11px; + padding-bottom: 4px; + color: var(--dark-label-color); + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + } +} + +.column-checkbox { + ::ng-deep .mat-checkbox-layout { + flex-direction: column-reverse; + align-items: center; + } + + ::ng-deep .mat-checkbox-inner-container { + margin-right: unset; + margin-left: unset; + } + + ::ng-deep .mat-checkbox-layout .mat-checkbox-label { + padding-left: 0; + font-size: 11px; + padding-bottom: 2px; + color: var(--dark-label-color); + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + } +} diff --git a/src/app/core/substance-form/simplified-names/name-form.component.spec.ts b/src/app/core/substance-form/simplified-names/name-form.component.spec.ts new file mode 100644 index 000000000..0bb9a7372 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/name-form.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NameFormComponent } from './name-form.component'; + +describe('NameFormComponent', () => { + let component: NameFormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NameFormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NameFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-names/name-form.component.ts b/src/app/core/substance-form/simplified-names/name-form.component.ts new file mode 100644 index 000000000..4efabf1be --- /dev/null +++ b/src/app/core/substance-form/simplified-names/name-form.component.ts @@ -0,0 +1,161 @@ +import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core'; +import { SubstanceName, SubstanceNameOrg } from '../../substance/substance.model'; +import { ControlledVocabularyService } from '../../controlled-vocabulary/controlled-vocabulary.service'; +import { FormControl } from '@angular/forms'; +import { MatRadioChange } from '@angular/material/radio'; +import { UtilsService } from '../../utils/utils.service'; +import { Subscription } from 'rxjs'; +import {NameResolverDialogComponent} from '@gsrs-core/name-resolver/name-resolver-dialog.component'; +import {OverlayContainer} from '@angular/cdk/overlay'; +import {MatDialog} from '@angular/material/dialog'; +import {SubstanceFormService} from '@gsrs-core/substance-form/substance-form.service'; +import { SubstanceFormNamesService } from '@gsrs-core/substance-form/names/substance-form-names.service'; + +@Component({ + selector: 'app-name-form', + templateUrl: './name-form.component.html', + styleUrls: ['./name-form.component.scss'] +}) +export class NameFormComponent implements OnInit, OnDestroy { + private privateName: SubstanceName; + @Output() priorityUpdate = new EventEmitter(); + @Output() nameDeleted = new EventEmitter(); + nameControl = new FormControl(''); + nameTypeControl = new FormControl(''); + deleteTimer: any; + private subscriptions: Array = []; + overlayContainer: HTMLElement; + substanceType = ''; + viewFull = true; + showStd = false; + + constructor( + private cvService: ControlledVocabularyService, + private utilsService: UtilsService, + private dialog: MatDialog, + private substanceFormService: SubstanceFormService, + private overlayContainerService: OverlayContainer, + private nameFormService: SubstanceFormNamesService + ) { } + + ngOnInit() { + this.overlayContainer = this.overlayContainerService.getContainerElement(); + const definition = this.substanceFormService.definition.subscribe(def => { + this.substanceType = def.substanceClass; + }); + definition.unsubscribe(); + + + } + + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } + + @Input() + set show(val: boolean) { + if (val != null) { + this.viewFull = val; + } + } + + get show(): boolean { + return this.viewFull || null; + } + + @Input() + set standardized(val: boolean) { + if (val != null) { + this.showStd = val; + } + } + + get standardized(): boolean { + return this.showStd; + } + + @Input() + set name(name: SubstanceName) { + if (name != null) { + this.privateName = name; + if (!this.privateName.languages || this.privateName.languages.length === 0) { + this.privateName.languages = ['en']; + } + if (!this.privateName.type) { + this.privateName.type = 'cn'; + } + } + } + + get name(): SubstanceName { + return this.privateName || {}; + } + + priorityUpdated(event: MatRadioChange) { + this.privateName.displayName = (event.value === 'true'); + this.priorityUpdate.emit(this.privateName); + } + + updateAccess(access: Array): void { + this.privateName.access = access; + } + + updateLanguages(languages: Array): void { + this.privateName.languages = languages; + } + + updateDomains(domains: Array): void { + this.privateName.domains = domains; + } + + updateJurisdiction(jurisdiction: Array): void { + this.privateName.nameJurisdiction = jurisdiction; + } + + deleteName(): void { + this.privateName.$$deletedCode = this.utilsService.newUUID(); + + if (!this.privateName.name + && !this.privateName.type + ) { + this.deleteTimer = setTimeout(() => { + this.nameDeleted.emit(this.privateName); + }, 2000); + } + } + + undoDelete(): void { + clearTimeout(this.deleteTimer); + delete this.privateName.$$deletedCode; + } + + resolve(): void { + const dialogRef = this.dialog.open(NameResolverDialogComponent, { + height: 'auto', + width: '800px', + data: {'name': this.privateName.name} + }); + this.overlayContainer.style.zIndex = '1002'; + dialogRef.afterClosed().subscribe((molfile?: string) => { + this.overlayContainer.style.zIndex = null; + if (molfile != null && molfile !== '') { + this.substanceFormService.resolvedName(molfile); + } + }, () => {}); + } + + getNameOrgs(name: SubstanceName): Array { + if (!name.nameOrgs) { + name.nameOrgs = []; + } + return name.nameOrgs as Array; + } + + preventNewLine(event: KeyboardEvent): void { + if (event.key === 'Enter') { + event.preventDefault(); + } + } +} diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html new file mode 100644 index 000000000..cb57ab6ae --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html @@ -0,0 +1,38 @@ +
+ + + + + + + + + + +
+
+ + + Show Standardized Name fields + +
+ + + +
+ + +
+ + +
+ + +
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss new file mode 100644 index 000000000..78bddaa28 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss @@ -0,0 +1,45 @@ +.mat-divider.mat-divider-inset { + margin-left: 0; +} + +.mat-divider { + border-top-color: var(--text-color); +} + +.checkbox { + line-height: 34px; +} + +.name { + + &:nth-child(odd) { + background-color: var(--nth-child-color-2); + + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-3); + } + } + } + + &:nth-child(even) { + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-1); + } + } + } + + ::ng-deep { + .mat-expansion-panel, .mat-table, textarea { + background-color: var(--regular-transparent-color); + } + } +} + +.search { + width: 400px; + max-width: 100%; +} diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts new file mode 100644 index 000000000..f0d4edb51 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubstanceFormSimplifiedNamesCardComponent } from './substance-form-simplified-names-card.component'; + +describe('SubstanceFormNamesComponent', () => { + let component: SubstanceFormSimplifiedNamesCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubstanceFormSimplifiedNamesCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubstanceFormSimplifiedNamesCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts new file mode 100644 index 000000000..f4f1d093b --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts @@ -0,0 +1,113 @@ +import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core'; +import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list'; +import { SubstanceName } from '@gsrs-core/substance/substance.model'; +import { SubstanceFormService } from '../substance-form.service'; +import { ScrollToService } from '../../scroll-to/scroll-to.service'; +import { GoogleAnalyticsService } from '../../google-analytics/google-analytics.service'; +import { Subscription } from 'rxjs'; +import { ConfigService } from '@gsrs-core/config'; +import {SubstanceFormNamesService} from "@gsrs-core/substance-form/names/substance-form-names.service"; + +@Component({ + selector: 'app-substance-form-names-card', + templateUrl: './substance-form-simplified-names-card.component.html', + styleUrls: ['./substance-form-simplified-names-card.component.scss'] +}) +export class SubstanceFormSimplifiedNamesCardComponent + extends SubstanceCardBaseFilteredList + implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList { + names: Array; + private subscriptions: Array = []; + pageSize = 10; + expanded = true; + showStd = true; + showMore = false; + appId: string; + standardizeButton = false; + + constructor( + private substanceFormNamesService: SubstanceFormNamesService, + private substanceFormService: SubstanceFormService, + private scrollToService: ScrollToService, + public gaService: GoogleAnalyticsService, + private configService: ConfigService, + + ) { + super(gaService); + this.analyticsEventCategory = 'substance form names'; + } + + ngOnInit() { + this.menuLabelUpdate.emit('Substance Names'); + this.appId = this.configService.environment.appId; + this.standardizeButton = this.configService.configData.showNameStandardizeButton || false; + const definitionSubscription = this.substanceFormService.definition.subscribe( level => { + if (level.definitionType && level.definitionType === 'ALTERNATIVE') { + // this.canAddItemUpdate.emit(false); + this.hiddenStateUpdate.emit(true); + } else { + this.canAddItemUpdate.emit(true); + this.hiddenStateUpdate.emit(false); + } + }); + this.subscriptions.push(definitionSubscription); + const namesSubscription = this.substanceFormNamesService.substanceNames.subscribe(names => { + this.names = names; + this.filtered = names; + const searchSubscription = this.searchControl.valueChanges.subscribe(value => { + this.filterList(value, this.names, this.analyticsEventCategory); + }, error => { + console.log(error); + }); + this.subscriptions.push(searchSubscription); + this.page = 0; + this.pageChange(); + }); + this.subscriptions.push(namesSubscription); + } + + ngAfterViewInit() { + + } + + + collapse() { + this.expanded = !this.expanded; + } + + standardize(): void { + // We currently only want the back-end to standardize names + // this.substanceFormNamesService.standardizeNames(); + } + + ngOnDestroy() { + this.componentDestroyed.emit(); + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } + + addItem(): void { + this.addName(); + } + + addName(): void { + this.substanceFormNamesService.addSubstanceName(); + setTimeout(() => { + this.scrollToService.scrollToElement(`substance-name-0`, 'center'); + }); + } + + priorityUpdated(updatedName: SubstanceName): void { + this.names.forEach(name => { + if (name !== updatedName) { + name.displayName = false; + } + }); + } + + deleteName(name: SubstanceName): void { + this.substanceFormNamesService.deleteSubstanceName(name); + } + +} diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts new file mode 100644 index 000000000..38073a873 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.module.spec.ts @@ -0,0 +1,13 @@ +import { SubstanceFormSimplifiedNamesModule } from './substance-form-simplified-names.module'; + +describe('SubstanceFormNamesModule', () => { + let substanceFormNamesModule: SubstanceFormSimplifiedNamesModule; + + beforeEach(() => { + substanceFormNamesModule = new SubstanceFormSimplifiedNamesModule(); + }); + + it('should create an instance', () => { + expect(substanceFormNamesModule).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts new file mode 100644 index 000000000..fd10a31e0 --- /dev/null +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names.module.ts @@ -0,0 +1,53 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SubstanceFormSimplifiedNamesCardComponent } from './substance-form-simplified-names-card.component'; +import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module'; +import { SubstanceFormModule } from '../substance-form.module'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { ScrollToModule } from '../../scroll-to/scroll-to.module'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatInputModule } from '@angular/material/input'; +import { NameFormComponent } from './name-form.component'; +import {MatRadioModule} from '@angular/material/radio'; +import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatBadgeModule} from '@angular/material/badge'; +import {MatExpansionModule} from '@angular/material/expansion'; +import {MatTableModule} from '@angular/material/table'; +import {MatSelectModule} from '@angular/material/select'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-display.module'; + + +@NgModule({ + imports: [ + CommonModule, + DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedNamesCardComponent), + SubstanceFormModule, + MatDividerModule, + MatIconModule, + MatButtonModule, + ScrollToModule, + MatFormFieldModule, + ReactiveFormsModule, + FormsModule, + MatPaginatorModule, + MatInputModule, + MatRadioModule, + MatCheckboxModule, + MatExpansionModule, + MatTableModule, + MatBadgeModule, + MatSelectModule, + MatTooltipModule, + ElementLabelDisplayModule + ], + declarations: [ + SubstanceFormSimplifiedNamesCardComponent, + NameFormComponent, + ] +}) +export class SubstanceFormSimplifiedNamesModule { } From 9ecb4391ee3056152a1d379fca2a72436b807b8b Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 12 Dec 2023 17:07:33 +0200 Subject: [PATCH 02/17] Switch form view type toggle --- .../substance-form.component.html | 19 +- .../substance-form.component.ts | 2256 +++++++++-------- 2 files changed, 1152 insertions(+), 1123 deletions(-) diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html index 42736605e..2052b1496 100644 --- a/src/app/core/substance-form/substance-form.component.html +++ b/src/app/core/substance-form/substance-form.component.html @@ -5,7 +5,8 @@
- + Simple Form + @@ -56,7 +57,7 @@ - Predict N-Glycosylation Sites + Predict N-Glycosylation Sites Predict disulfide links by monoclonal antibody type @@ -79,30 +80,30 @@
d706be08-4015-4fa2-80e6-567cf7e2e23f
April 1, 2022 08:05
-
+
d706be08-4015-4fa2-80e6-567cf7e2e23f
April 1, 2022 08:00
-
+
register = protein
April 1, 2022 08:00
-
+ + - - +
- +
@@ -156,7 +157,7 @@ Submit + Cancel diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index 6da494349..81c8d5a11 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -1,101 +1,112 @@ import { - Component, - OnInit, - AfterViewInit, - ViewChildren, - ViewContainerRef, - QueryList, - OnDestroy, HostListener + Component, + OnInit, + AfterViewInit, + ViewChildren, + ViewContainerRef, + QueryList, + OnDestroy, HostListener, Input, Output } from '@angular/core'; -import { formSections } from './form-sections.constant'; -import { ActivatedRoute, Router, RouterEvent, NavigationStart, NavigationEnd } from '@angular/router'; -import { SubstanceService } from '../substance/substance.service'; -import { LoadingService } from '../loading/loading.service'; -import { MainNotificationService } from '../main-notification/main-notification.service'; -import { AppNotification, NotificationType } from '../main-notification/notification.model'; -import { DynamicComponentLoader } from '../dynamic-component-loader/dynamic-component-loader.service'; -import { GoogleAnalyticsService } from '../google-analytics/google-analytics.service'; -import { SubstanceFormSection } from './substance-form-section'; -import { SubstanceFormService } from './substance-form.service'; -import { ValidationMessage, SubstanceFormResults, SubstanceFormDefinition } from './substance-form.model'; -import { Subscription, Observable } from 'rxjs'; -import { OverlayContainer } from '@angular/cdk/overlay'; -import { MatDialog } from '@angular/material/dialog'; -import { JsonDialogComponent } from '@gsrs-core/substance-form/json-dialog/json-dialog.component'; +import {formSections} from './form-sections.constant'; +import {ActivatedRoute, Router, RouterEvent, NavigationStart, NavigationEnd} from '@angular/router'; +import {SubstanceService} from '../substance/substance.service'; +import {LoadingService} from '../loading/loading.service'; +import {MainNotificationService} from '../main-notification/main-notification.service'; +import {AppNotification, NotificationType} from '../main-notification/notification.model'; +import {DynamicComponentLoader} from '../dynamic-component-loader/dynamic-component-loader.service'; +import {GoogleAnalyticsService} from '../google-analytics/google-analytics.service'; +import {SubstanceFormSection} from './substance-form-section'; +import {SubstanceFormService} from './substance-form.service'; +import {ValidationMessage, SubstanceFormResults, SubstanceFormDefinition} from './substance-form.model'; +import {Subscription, Observable} from 'rxjs'; +import {OverlayContainer} from '@angular/cdk/overlay'; +import {MatDialog} from '@angular/material/dialog'; +import {JsonDialogComponent} from '@gsrs-core/substance-form/json-dialog/json-dialog.component'; import * as _ from 'lodash'; import * as defiant from '../../../../node_modules/defiant.js/dist/defiant.min.js'; -import { Title } from '@angular/platform-browser'; -import { AuthService } from '@gsrs-core/auth'; -import { take, map } from 'rxjs/operators'; -import { MatExpansionPanel } from '@angular/material/expansion'; -import { SubmitSuccessDialogComponent } from './submit-success-dialog/submit-success-dialog.component'; -import {MergeConceptDialogComponent} from '@gsrs-core/substance-form/merge-concept-dialog/merge-concept-dialog.component'; -import {DefinitionSwitchDialogComponent} from '@gsrs-core/substance-form/definition-switch-dialog/definition-switch-dialog.component'; -import { SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component'; -import { StructuralUnit } from '@gsrs-core/substance'; -import { ConfigService } from '@gsrs-core/config'; -import { FragmentWizardComponent } from '@gsrs-core/admin/fragment-wizard/fragment-wizard.component'; -import { SubstanceDraftsComponent } from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component'; -import { UtilsService } from '@gsrs-core/utils'; -import { ungzip, deflate, inflate } from 'pako'; -import { Buffer } from 'buffer'; -import { AdminService } from '@gsrs-core/admin/admin.service'; +import {Title} from '@angular/platform-browser'; +import {AuthService} from '@gsrs-core/auth'; +import {take, map} from 'rxjs/operators'; +import {MatExpansionPanel} from '@angular/material/expansion'; +import {SubmitSuccessDialogComponent} from './submit-success-dialog/submit-success-dialog.component'; +import { + MergeConceptDialogComponent +} from '@gsrs-core/substance-form/merge-concept-dialog/merge-concept-dialog.component'; +import { + DefinitionSwitchDialogComponent +} from '@gsrs-core/substance-form/definition-switch-dialog/definition-switch-dialog.component'; +import { + SubstanceEditImportDialogComponent +} from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component'; +import {StructuralUnit} from '@gsrs-core/substance'; +import {ConfigService} from '@gsrs-core/config'; +import {FragmentWizardComponent} from '@gsrs-core/admin/fragment-wizard/fragment-wizard.component'; +import {SubstanceDraftsComponent} from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component'; +import {UtilsService} from '@gsrs-core/utils'; +import {ungzip, deflate, inflate} from 'pako'; +import {Buffer} from 'buffer'; +import {AdminService} from '@gsrs-core/admin/admin.service'; +import {MatButtonToggleChange} from "@angular/material/button-toggle"; @Component({ - selector: 'app-substance-form', - templateUrl: './substance-form.component.html', - styleUrls: ['./substance-form.component.scss'] + selector: 'app-substance-form', + templateUrl: './substance-form.component.html', + styleUrls: ['./substance-form.component.scss'] }) export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy { - isLoading = true; - id?: string; - formSections: Array< SubstanceFormSection > = []; - @ViewChildren('dynamicComponent', { read: ViewContainerRef }) dynamicComponents: QueryList; - @ViewChildren('expansionPanel', { read: MatExpansionPanel }) matExpansionPanels: QueryList; - private subClass: string; - definitionType: string; - expandedComponents = [ - 'substance-form-definition', - 'substance-form-structure', - 'substance-form-moieties', - 'substance-form-references' - ]; - showSubmissionMessages = false; - submissionMessage: string; - validationMessages: Array< ValidationMessage >; - validationResult = false; - private subscriptions: Array< Subscription > = []; - copy: string; - private overlayContainer: HTMLElement; - serverError: boolean; - canApprove: boolean; - approving: boolean; - definition: SubstanceFormDefinition; - user: string; - feature: string; - isAdmin: boolean; - isUpdater: boolean; - messageField: string; - uuid: string; - substanceClass: string; - drafts: Array; - draftCount = 0; - status: string; - hidePopup: boolean; - unit: StructuralUnit; - autoSaveWait = 60000; - classes = [ - 'concept', - 'protein', - 'chemical', - 'structurallyDiverse', - 'polymer', - 'nucleicAcid', - 'mixture', - 'specifiedSubstanceG1', - 'specifiedSubstanceG2', - 'specifiedSubstanceG3']; + @Input() + simplifiedFormNameToggle = true // TODO:Set depending on config + + isLoading = true; + id?: string; + formSections: Array = []; + @ViewChildren('dynamicComponent', {read: ViewContainerRef}) dynamicComponents: QueryList; + @ViewChildren('expansionPanel', {read: MatExpansionPanel}) matExpansionPanels: QueryList; + private subClass: string; + definitionType: string; + expandedComponents = [ + 'substance-form-definition', + 'substance-form-simplified', + 'substance-form-structure', + 'substance-form-moieties', + 'substance-form-references' + ]; + showSubmissionMessages = false; + submissionMessage: string; + validationMessages: Array; + validationResult = false; + private subscriptions: Array = []; + copy: string; + private overlayContainer: HTMLElement; + serverError: boolean; + canApprove: boolean; + approving: boolean; + definition: SubstanceFormDefinition; + user: string; + feature: string; + isAdmin: boolean; + isUpdater: boolean; + messageField: string; + uuid: string; + substanceClass: string; + drafts: Array; + draftCount = 0; + status: string; + hidePopup: boolean; + unit: StructuralUnit; + autoSaveWait = 60000; + classes = [ + 'concept', + 'protein', + 'chemical', + 'structurallyDiverse', + 'polymer', + 'nucleicAcid', + 'mixture', + 'specifiedSubstanceG1', + 'specifiedSubstanceG2', + 'specifiedSubstanceG3']; imported = false; forceChange = false; sameSubstance = false; @@ -103,931 +114,929 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy approvalType = 'lastEditedBy'; previousState: number; - constructor( - private activatedRoute: ActivatedRoute, - private substanceService: SubstanceService, - private loadingService: LoadingService, - private mainNotificationService: MainNotificationService, - private router: Router, - private dynamicComponentLoader: DynamicComponentLoader, - private gaService: GoogleAnalyticsService, - private substanceFormService: SubstanceFormService, - private overlayContainerService: OverlayContainer, - private configService: ConfigService, - private dialog: MatDialog, - private authService: AuthService, - private titleService: Title, - private utilsService: UtilsService - ) { - this.substanceService.showImagePopup.subscribe (data => { - this.hidePopup = data; - }) - this.substanceService.imagePopupUnit.subscribe (data => { - this.unit = data; - }) - } - - showHidePopup(): void { - this.hidePopup = !this.hidePopup; - this.substanceService.showImagePopup.next(this.hidePopup); - } - - - autoSave(): void { - setTimeout(() => { - if (this.substanceFormService.autoSave()) { - this.saveDraft(true); - } else { - } - this.autoSave(); - }, this.autoSaveWait); - } - - openModal(templateRef) { - - const dialogRef = this.dialog.open(templateRef, { - height: '200px', - width: '400px' - }); - this.overlayContainer.style.zIndex = '1002'; + constructor( + private activatedRoute: ActivatedRoute, + private substanceService: SubstanceService, + private loadingService: LoadingService, + private mainNotificationService: MainNotificationService, + private router: Router, + private dynamicComponentLoader: DynamicComponentLoader, + private gaService: GoogleAnalyticsService, + private substanceFormService: SubstanceFormService, + private overlayContainerService: OverlayContainer, + private configService: ConfigService, + private dialog: MatDialog, + private authService: AuthService, + private titleService: Title, + private utilsService: UtilsService + ) { + this.substanceService.showImagePopup.subscribe(data => { + this.hidePopup = data; + }) + this.substanceService.imagePopupUnit.subscribe(data => { + this.unit = data; + }) + } - dialogRef.afterClosed().subscribe(result => { - this.overlayContainer.style.zIndex = null; - }); - } + showHidePopup(): void { + this.hidePopup = !this.hidePopup; + this.substanceService.showImagePopup.next(this.hidePopup); + } - showDrafts(): void { - const dialogRef = this.dialog.open(SubstanceDraftsComponent, { - maxHeight: '85%', - width: '70%', - data: {uuid: this.id} - }); - this.overlayContainer.style.zIndex = '1002'; - - dialogRef.afterClosed().subscribe(response => { - this.overlayContainer.style.zIndex = null; - - - if (response) { - this.loadingService.setLoading(true); - // console.log(response.json); - - const read = response.substance; - if (this.id && read.uuid && this.id === read.uuid) { - this.substanceFormService.importSubstance(read, 'update'); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - setTimeout(() => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.overlayContainer.style.zIndex = null; - }, 1000); - }else if (response.uuid && response.uuid != 'register'){ - const url = '/substances/' + response.uuid + '/edit?action=import&source=draft'; - this.router.navigateByUrl(url, { state: { record: response.substance } }); - } else { - setTimeout(() => { - this.overlayContainer.style.zIndex = null; - this.router.onSameUrlNavigation = 'reload'; - this.loadingService.setLoading(false); - this.router.onSameUrlNavigation = 'reload'; - this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', { state: { record: response.substance } }); - - }, 1000); - } - } - - let keys = Object.keys(localStorage); - let i = keys.length; - this.draftCount =0; - this.drafts = []; - - while ( i-- ) { - if (keys[i].startsWith('gsrs-draft-')){ - const entry = JSON.parse(localStorage.getItem(keys[i])); - entry.key = keys[i]; - if (this.id && entry.uuid === this.id) { - this.draftCount++; - } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { - this.draftCount++; - } - this.drafts.push( entry ); + autoSave(): void { + setTimeout(() => { + if (this.substanceFormService.autoSave()) { + this.saveDraft(true); + } else { } - } - }); - } - + this.autoSave(); + }, this.autoSaveWait); + } - importDialog(): void { - const dialogRef = this.dialog.open(SubstanceEditImportDialogComponent, { - width: '650px', - autoFocus: false + openModal(templateRef) { - }); - this.overlayContainer.style.zIndex = '1002'; + const dialogRef = this.dialog.open(templateRef, { + height: '200px', + width: '400px' + }); + this.overlayContainer.style.zIndex = '1002'; - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - if (response) { - // this.overlayContainer.style.zIndex = null; - this.loadingService.setLoading(true); + dialogRef.afterClosed().subscribe(result => { + this.overlayContainer.style.zIndex = null; + }); + } - // attempting to reload a substance without a router refresh has proven to cause issues with the relationship dropdowns - // There are probably other components affected. There is an issue with subscriptions likely due to some OnInit not firing + showDrafts(): void { + const dialogRef = this.dialog.open(SubstanceDraftsComponent, { + maxHeight: '85%', + width: '70%', + data: {uuid: this.id} + }); + this.overlayContainer.style.zIndex = '1002'; - const read = JSON.parse(response); - if (this.id && read.uuid && this.id === read.uuid) { - this.substanceFormService.importSubstance(read, 'update'); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - setTimeout(() => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.overlayContainer.style.zIndex = null; - }, 1000); - /* } else { - if ( read.substanceClass === this.substanceClass) { - this.imported = true; - this.substanceFormService.importSubstance(read); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - this.loadingService.setLoading(false); - this.isLoading = false;*/ - } else { - setTimeout(() => { + dialogRef.afterClosed().subscribe(response => { this.overlayContainer.style.zIndex = null; - this.router.onSameUrlNavigation = 'reload'; - this.loadingService.setLoading(false); - this.router.navigateByUrl('/substances/register?action=import', { state: { record: response } }); - }, 1000); - } - } - // } - }); - } + if (response) { + this.loadingService.setLoading(true); + // console.log(response.json); + + const read = response.substance; + if (this.id && read.uuid && this.id === read.uuid) { + this.substanceFormService.importSubstance(read, 'update'); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + setTimeout(() => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.overlayContainer.style.zIndex = null; + }, 1000); + } else if (response.uuid && response.uuid != 'register') { + const url = '/substances/' + response.uuid + '/edit?action=import&source=draft'; + this.router.navigateByUrl(url, {state: {record: response.substance}}); + } else { + setTimeout(() => { + this.overlayContainer.style.zIndex = null; + this.router.onSameUrlNavigation = 'reload'; + this.loadingService.setLoading(false); + this.router.onSameUrlNavigation = 'reload'; + this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', {state: {record: response.substance}}); + + }, 1000); + } + } - test() { - this.router.navigated = false; - this.router.navigate([this.router.url]); - } + let keys = Object.keys(localStorage); + let i = keys.length; + this.draftCount = 0; + this.drafts = []; + + while (i--) { + if (keys[i].startsWith('gsrs-draft-')) { + const entry = JSON.parse(localStorage.getItem(keys[i])); + entry.key = keys[i]; + if (this.id && entry.uuid === this.id) { + this.draftCount++; + } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { + this.draftCount++; + } + this.drafts.push(entry); + + } + } + }); + } + importDialog(): void { + const dialogRef = this.dialog.open(SubstanceEditImportDialogComponent, { + width: '650px', + autoFocus: false - ngOnInit() { - this.loadingService.setLoading(true); - if (this.configService.configData && this.configService.configData.approvalType) { - this.approvalType = this.configService.configData.approvalType; - } - if (this.configService.configData && this.configService.configData.autoSaveWait) { - this.autoSaveWait = this.configService.configData.autoSaveWait; - } - this.isAdmin = this.authService.hasRoles('admin'); - this.isUpdater = this.authService.hasAnyRoles('Updater', 'SuperUpdater'); - this.overlayContainer = this.overlayContainerService.getContainerElement(); - this.imported = false; - const routeSubscription = this.activatedRoute - .params - .subscribe(params => { - - const action = this.activatedRoute.snapshot.queryParams['action'] || null; - - if (params['id']) { - - if(action && action === 'import' && window.history.state) { - const record = window.history.state; - this.imported = true; - - this.getDetailsFromImport(record.record); - } else { - const id = params['id']; - if (id !== this.id) { - this.id = id; - this.gaService.sendPageView(`Substance Edit`); - const newType = this.activatedRoute.snapshot.queryParamMap.get('switch') || null; - if (newType) { - this.getSubstanceDetails(newType); - } else { - this.getSubstanceDetails(); - } + }); + this.overlayContainer.style.zIndex = '1002'; + + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + if (response) { + // this.overlayContainer.style.zIndex = null; + this.loadingService.setLoading(true); + + // attempting to reload a substance without a router refresh has proven to cause issues with the relationship dropdowns + // There are probably other components affected. There is an issue with subscriptions likely due to some OnInit not firing + + const read = JSON.parse(response); + if (this.id && read.uuid && this.id === read.uuid) { + this.substanceFormService.importSubstance(read, 'update'); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + setTimeout(() => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.overlayContainer.style.zIndex = null; + }, 1000); + /* } else { + if ( read.substanceClass === this.substanceClass) { + this.imported = true; + this.substanceFormService.importSubstance(read); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + this.loadingService.setLoading(false); + this.isLoading = false;*/ + } else { + setTimeout(() => { + this.overlayContainer.style.zIndex = null; + this.router.onSameUrlNavigation = 'reload'; + this.loadingService.setLoading(false); + this.router.navigateByUrl('/substances/register?action=import', {state: {record: response}}); + + }, 1000); + } } - } - } else { - if (action && action === 'import' && window.history.state) { - const record = window.history.state; - this.imported = true; - this.getDetailsFromImport(record.record); - this.gaService.sendPageView(`Substance Register`); + // } + }); - } else if (this.activatedRoute.snapshot.queryParams['stagingID']) { - this.substanceService.GetStagedRecord(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { - response.uuid = null; + } + test() { + this.router.navigated = false; + this.router.navigate([this.router.url]); + } - if (response._name){ - let name = response._name; - response.names.forEach(current => { - if (current.displayName && current.stdName) { - name = current.stdName; + + ngOnInit() { + this.loadingService.setLoading(true); + if (this.configService.configData && this.configService.configData.approvalType) { + this.approvalType = this.configService.configData.approvalType; + } + if (this.configService.configData && this.configService.configData.autoSaveWait) { + this.autoSaveWait = this.configService.configData.autoSaveWait; + } + this.isAdmin = this.authService.hasRoles('admin'); + this.isUpdater = this.authService.hasAnyRoles('Updater', 'SuperUpdater'); + this.overlayContainer = this.overlayContainerService.getContainerElement(); + this.imported = false; + const routeSubscription = this.activatedRoute + .params + .subscribe(params => { + + const action = this.activatedRoute.snapshot.queryParams['action'] || null; + + if (params['id']) { + + if (action && action === 'import' && window.history.state) { + const record = window.history.state; + this.imported = true; + + this.getDetailsFromImport(record.record); + } else { + const id = params['id']; + if (id !== this.id) { + this.id = id; + this.gaService.sendPageView(`Substance Edit`); + const newType = this.activatedRoute.snapshot.queryParamMap.get('switch') || null; + if (newType) { + this.getSubstanceDetails(newType); + } else { + this.getSubstanceDetails(); + } + } } - }); - name = name.replace(/<[^>]*>?/gm, ''); - this.titleService.setTitle('Edit - ' + name); + } else { + if (action && action === 'import' && window.history.state) { + const record = window.history.state; + this.imported = true; + this.getDetailsFromImport(record.record); + this.gaService.sendPageView(`Substance Register`); + + } else if (this.activatedRoute.snapshot.queryParams['stagingID']) { + this.substanceService.GetStagedRecord(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { + response.uuid = null; + + + if (response._name) { + let name = response._name; + response.names.forEach(current => { + if (current.displayName && current.stdName) { + name = current.stdName; + } + }); + name = name.replace(/<[^>]*>?/gm, ''); + this.titleService.setTitle('Edit - ' + name); + } + if (response) { + this.definitionType = response.definitionType; + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + this.isLoading = false; + this.loadingService.setLoading(false); + }); + + } + }, error => { + this.isLoading = false; + this.loadingService.setLoading(false); + }); + } else { + this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null; + if (this.copy) { + const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null; + this.getPartialSubstanceDetails(this.copy, copyType); + this.gaService.sendPageView(`Substance Register`); + } else { + setTimeout(() => { + this.gaService.sendPageView(`Substance Register`); + this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical'; + this.substanceClass = this.subClass; + this.titleService.setTitle('Register - ' + this.subClass); + this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[this.subClass]); + this.loadingService.setLoading(false); + this.isLoading = false; + + }); + }); + } + } + + } - if (response) { - this.definitionType = response.definitionType; - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - this.isLoading = false; - this.loadingService.setLoading(false); - }); - - } - }, error => { - this.isLoading = false; - this.loadingService.setLoading(false); - }); - } else { - this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null; - if (this.copy) { - const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null; - this.getPartialSubstanceDetails(this.copy, copyType); - this.gaService.sendPageView(`Substance Register`); - } else { + }); + this.subscriptions.push(routeSubscription); + const routerSubscription = this.router.events.subscribe((event: RouterEvent) => { + if (event instanceof NavigationStart) { + this.substanceFormService.unloadSubstance(); + } + }); + this.subscriptions.push(routerSubscription); + this.approving = false; + const definitionSubscription = this.substanceFormService.definition.subscribe(response => { + this.definition = response; setTimeout(() => { - this.gaService.sendPageView(`Substance Register`); - this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical'; - this.substanceClass = this.subClass; - this.titleService.setTitle('Register - ' + this.subClass); - this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[this.subClass]); - this.loadingService.setLoading(false); - this.isLoading = false; - - }); + this.canApprove = this.canBeApproved(); }); - } - } - + }); + this.subscriptions.push(definitionSubscription); + this.authService.getAuth().pipe(take(1)).subscribe(auth => { + this.user = auth.identifier; + setTimeout(() => { + this.canApprove = this.canBeApproved(); - } - }); - this.subscriptions.push(routeSubscription); - const routerSubscription = this.router.events.subscribe((event: RouterEvent) => { - if (event instanceof NavigationStart) { - this.substanceFormService.unloadSubstance(); - } - }); - this.subscriptions.push(routerSubscription); - this.approving = false; - const definitionSubscription = this.substanceFormService.definition.subscribe(response => { - this.definition = response; - setTimeout(() => { - this.canApprove = this.canBeApproved(); - }); - }); - this.subscriptions.push(definitionSubscription); - this.authService.getAuth().pipe(take(1)).subscribe(auth => { - this.user = auth.identifier; - setTimeout(() => { - this.canApprove = this.canBeApproved(); - - }); - }); - - + }); + }); + } -} + isBase64(str) { + let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/; + let result = decodeURIComponent(str); + return base64regex.test(str); + } -isBase64(str) { - let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/; - let result = decodeURIComponent(str); - return base64regex.test(str); -} + setStructureFromUrl(structure: string, type: string): void { + // check if structureUR is encoded molfile or raw smiles string, then import into form + /*structure = this.gunzip(structure); + structure = decodeURIComponent(structure); + this.substanceFormService.importStructure(structure, 'molfile');*/ + this.substanceFormService.importStructure(structure, 'smiles'); -setStructureFromUrl(structure: string, type: string):void { - // check if structureUR is encoded molfile or raw smiles string, then import into form - /*structure = this.gunzip(structure); - structure = decodeURIComponent(structure); - this.substanceFormService.importStructure(structure, 'molfile');*/ - this.substanceFormService.importStructure(structure, 'smiles'); + } -} + gunzip(t): string { + const gezipedData = Buffer.from(t, 'base64') + const gzipedDataArray = Uint8Array.from(gezipedData); + const ungzipedData = ungzip(gzipedDataArray); + return new TextDecoder().decode(ungzipedData); + } -gunzip(t): string{ - - const gezipedData = Buffer.from(t, 'base64') -const gzipedDataArray = Uint8Array.from(gezipedData); -const ungzipedData = ungzip(gzipedDataArray); -return new TextDecoder().decode(ungzipedData); -} + getDrafts() { + let keys = Object.keys(localStorage); + let i = keys.length; + this.drafts = []; + let temp = 0; + while (i--) { + if (keys[i].startsWith('gsrs-draft-')) { + const entry = JSON.parse(localStorage.getItem(keys[i])); + entry.key = keys[i]; + if (this.id && entry.uuid === this.id) { + temp++; + // this.draftCount++; + } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { + temp++; + // this.draftCount++; + } + this.drafts.push(entry); -getDrafts() { - let keys = Object.keys(localStorage); - let i = keys.length; - this.drafts = []; - let temp = 0; - while ( i-- ) { - if (keys[i].startsWith('gsrs-draft-')){ - const entry = JSON.parse(localStorage.getItem(keys[i])); - entry.key = keys[i]; - if (this.id && entry.uuid === this.id) { - temp++; - // this.draftCount++; - } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { - temp++; - // this.draftCount++; + } } - this.drafts.push( entry ); - - } + this.draftCount = temp; } - this.draftCount = temp; -} - ngAfterViewInit(): void { - this.getDrafts(); - // set structure based on smiles or molfile - const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null; - if (structure) { - let decode = decodeURIComponent(structure); - console.log(decode); - setTimeout(() => { - this.setStructureFromUrl(decode, 'molfile'); - }); - } - const json = this.activatedRoute.snapshot.queryParams['jsonStructure'] || null; - // TODO add json support - // this.setStructureFromUrl(structure, 'json'); - if (json) { - let decode = decodeURI(json); - } - - - - const subscription = this.dynamicComponents.changes - .subscribe(() => { - - const total = this.formSections.length; - let finished = 0; - if (!this.forceChange) { - this.loadingService.setLoading(true); - const startTime = new Date(); - this.dynamicComponents.forEach((cRef, index) => { - this.dynamicComponentLoader - .getComponentFactory(this.formSections[index].dynamicComponentName) - .subscribe(componentFactory => { - this.loadingService.setLoading(true); - this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); - this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); - this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { - this.formSections[index].menuLabel = label; - }); - const hiddenStateSubscription = - this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { - this.formSections[index].isHidden = isHidden; - }); - this.subscriptions.push(hiddenStateSubscription); - this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { - this.formSections[index].canAddItem = isList; - if (isList) { - const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { - this.formSections[index].matExpansionPanel.open(); - this.formSections[index].dynamicComponentRef.instance.addItem(); - }); - this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { - aieSubscription.unsubscribe(); - }); - } - }); - this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); - finished++; - if (finished >= total) { - this.loadingService.setLoading(false); - } else { - const currentTime = new Date(); - if (currentTime.getTime() - startTime.getTime() > 12000) { - if (confirm('There was a network error while fetching files, would you like to refresh?')) { - window.location.reload(); - } - } - } + ngAfterViewInit(): void { + this.getDrafts(); + // set structure based on smiles or molfile + const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null; + if (structure) { + let decode = decodeURIComponent(structure); + console.log(decode); setTimeout(() => { - this.loadingService.setLoading(false); - this.UNII = this.substanceFormService.getUNII(); - }, 5); + this.setStructureFromUrl(decode, 'molfile'); }); - }); - // this.loadingService.setLoading(false); + } + const json = this.activatedRoute.snapshot.queryParams['jsonStructure'] || null; + // TODO add json support + // this.setStructureFromUrl(structure, 'json'); + if (json) { + let decode = decodeURI(json); + } - } - subscription.unsubscribe(); - setTimeout(() => { - this.autoSave();},10000); + const subscription = this.dynamicComponents.changes + .subscribe(() => { + + const total = this.formSections.length; + let finished = 0; + if (!this.forceChange) { + this.loadingService.setLoading(true); + const startTime = new Date(); + this.dynamicComponents.forEach((cRef, index) => { + this.dynamicComponentLoader + .getComponentFactory(this.formSections[index].dynamicComponentName) + .subscribe(componentFactory => { + this.loadingService.setLoading(true); + this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); + this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); + this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { + this.formSections[index].menuLabel = label; + }); + const hiddenStateSubscription = + this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { + this.formSections[index].isHidden = isHidden; + }); + this.subscriptions.push(hiddenStateSubscription); + this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { + this.formSections[index].canAddItem = isList; + if (isList) { + const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { + this.formSections[index].matExpansionPanel.open(); + this.formSections[index].dynamicComponentRef.instance.addItem(); + }); + this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { + aieSubscription.unsubscribe(); + }); + } + }); + this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); + finished++; + if (finished >= total) { + this.loadingService.setLoading(false); + } else { + const currentTime = new Date(); + if (currentTime.getTime() - startTime.getTime() > 12000) { + if (confirm('There was a network error while fetching files, would you like to refresh?')) { + window.location.reload(); + } + } + } + setTimeout(() => { + this.loadingService.setLoading(false); + this.UNII = this.substanceFormService.getUNII(); + }, 5); + + this.updateHiddenFormSections() + }); + }); + // this.loadingService.setLoading(false); - }); - } + } + subscription.unsubscribe(); + setTimeout(() => { - openedChange(event: any) { - if (event) { - this.overlayContainer.style.zIndex = '1002'; - } else { - this.overlayContainer.style.zIndex = '1000'; - } - } + this.autoSave(); + }, 10000); - useFeature(feature: any): void { - this.feature = feature.value; - if (this.feature === 'glyco') { - this.glyco(); - } else if (this.feature === 'disulfide') { - this.disulfide(); - } if (this.feature === 'concept') { - this.concept(); - } if (this.feature === 'unapprove') { - if (confirm('Are you sure you\'d like to remove the approvalID?')) { - this.substanceFormService.unapproveRecord(); - } - this.feature = undefined; - } - if (this.feature === 'setPrivate') { - this.substanceFormService.setDefinitionPrivate(); - this.feature = undefined; - } - if (this.feature === 'setPublic') { - this.substanceFormService.setDefinitionPublic(); - this.feature = undefined; - } - if (this.feature === 'approved') { - this.substanceFormService.changeStatus('approved'); - this.feature = undefined; - } - if (this.feature === 'pending') { - this.substanceFormService.changeStatus('pending'); - this.feature = undefined; - } - if (this.feature === 'merge') { - this.mergeConcept(); - this.feature = undefined; - } - if (this.feature === 'switch') { - this.definitionSwitch(); - this.feature = undefined; - } - if (this.feature === 'changeApproval') { - this.substanceFormService.changeApproval(); + }); } - if (this.feature === 'fragment') { - this.openFragmentDialog(); + + openedChange(event: any) { + if (event) { + this.overlayContainer.style.zIndex = '1002'; + } else { + this.overlayContainer.style.zIndex = '1000'; + } } + + useFeature(feature: any): void { + this.feature = feature.value; + if (this.feature === 'glyco') { + this.glyco(); + } else if (this.feature === 'disulfide') { + this.disulfide(); + } + if (this.feature === 'concept') { + this.concept(); + } + if (this.feature === 'unapprove') { + if (confirm('Are you sure you\'d like to remove the approvalID?')) { + this.substanceFormService.unapproveRecord(); + } + this.feature = undefined; + } + if (this.feature === 'setPrivate') { + this.substanceFormService.setDefinitionPrivate(); + this.feature = undefined; + } + if (this.feature === 'setPublic') { + this.substanceFormService.setDefinitionPublic(); + this.feature = undefined; + } + if (this.feature === 'approved') { + this.substanceFormService.changeStatus('approved'); + this.feature = undefined; + } + if (this.feature === 'pending') { + this.substanceFormService.changeStatus('pending'); + this.feature = undefined; + } + if (this.feature === 'merge') { + this.mergeConcept(); + this.feature = undefined; + } + if (this.feature === 'switch') { + this.definitionSwitch(); + this.feature = undefined; + } + if (this.feature === 'changeApproval') { + this.substanceFormService.changeApproval(); + } + if (this.feature === 'fragment') { + this.openFragmentDialog(); + } if (this.feature === 'regenRefs') { this.regenRefs(); } - - } + } - openFragmentDialog(): void { - const dialogRef = this.dialog.open(FragmentWizardComponent, { - width: '70%', - height: '70%' - }); - this.overlayContainer.style.zIndex = '50'; + openFragmentDialog(): void { + const dialogRef = this.dialog.open(FragmentWizardComponent, { + width: '70%', + height: '70%' + }); + this.overlayContainer.style.zIndex = '50'; - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - }); - this.subscriptions.push(dialogSubscription); - } + }); + this.subscriptions.push(dialogSubscription); + } - changeClass(type: any): void { - this.router.navigate(['/substances', this.id, 'edit'], { queryParams: { switch: type.value } }); - this.feature = undefined; - } + changeClass(type: any): void { + this.router.navigate(['/substances', this.id, 'edit'], {queryParams: {switch: type.value}}); + this.feature = undefined; + } - changeStatus(status: any): void { - this.substanceFormService.changeStatus(status); - this.feature = undefined; - } + changeStatus(status: any): void { + this.substanceFormService.changeStatus(status); + this.feature = undefined; + } - concept(): void { - this.substanceFormService.conceptNonApproved(); - this.feature = undefined; - } + concept(): void { + this.substanceFormService.conceptNonApproved(); + this.feature = undefined; + } - glyco(): void { - this.substanceFormService.predictSites(); - this.feature = undefined; - } + glyco(): void { + this.substanceFormService.predictSites(); + this.feature = undefined; + } - disulfide(): void { - this.substanceFormService.disulfideLinks(); - this.feature = undefined; - } + disulfide(): void { + this.substanceFormService.disulfideLinks(); + this.feature = undefined; + } - regenRefs(): void { + regenRefs(): void { this.substanceFormService.referenceScrub(); this.feature = undefined; - } - - ngOnDestroy(): void { - // this.substanceFormService.unloadSubstance(); - this.subscriptions.forEach(subscription => { - subscription.unsubscribe(); - }); - } - - canBeApproved(): boolean { - const action = this.activatedRoute.snapshot.queryParams['action'] || null; - if (action && action === 'import') { - return false; - } - const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null; - if (staging && staging.length > 0 ) { - return false + }ngOnDestroy(): void { + // this.substanceFormService.unloadSubstance(); + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); } - // if config var set and set to 'createdBy then set approval button enabled if user is not creator - if(this.approvalType === 'createdBy') { - if (this.definition && this.definition.createdBy && this.user) { - const creator = this.definition.createdBy; - if (!creator) { - return false; - } - if (this.definition.status === 'approved') { - return false; - } - if (creator === this.user) { + + canBeApproved(): boolean { + const action = this.activatedRoute.snapshot.queryParams['action'] || null; + if (action && action === 'import') { return false; - } - return true; - } - return false; - //default to 'lastEditedBy' if not set in config - } else { - if (this.definition && this.definition.lastEditedBy && this.user) { - const lastEdit = this.definition.lastEditedBy; - if (!lastEdit) { - return false; - } - if (this.definition.status === 'approved') { - return false; + const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null; + if (staging && staging.length > 0) { + return false + } + // if config var set and set to 'createdBy then set approval button enabled if user is not creator + if (this.approvalType === 'createdBy') { + if (this.definition && this.definition.createdBy && this.user) { + const creator = this.definition.createdBy; + if (!creator) { + return false; + } + if (this.definition.status === 'approved') { + return false; + } + if (creator === this.user) { + return false; + } + return true; - } - if (lastEdit === this.user) { + } return false; - } - return true; - } - } - - } - - showJSON(): void { - const dialogRef = this.dialog.open(JsonDialogComponent, { - width: '90%' - }); - this.overlayContainer.style.zIndex = '1002'; + //default to 'lastEditedBy' if not set in config + } else { + if (this.definition && this.definition.lastEditedBy && this.user) { + const lastEdit = this.definition.lastEditedBy; + if (!lastEdit) { + return false; + } + if (this.definition.status === 'approved') { + return false; - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + } + if (lastEdit === this.user) { + return false; + } + return true; + } + } - }); - this.subscriptions.push(dialogSubscription); - } + } - getSubstanceDetails(newType?: string): void { - this.substanceService.getSubstanceDetails(this.id).pipe(take(1)).subscribe(response => { - if (response._name){ - let name = response._name; - response.names.forEach(current => { - if (current.displayName && current.stdName) { - name = current.stdName; - } - }); - name = name.replace(/<[^>]*>?/gm, ''); - this.titleService.setTitle('Edit - ' + name); - } - if (response) { - this.definitionType = response.definitionType; - if (newType) { - response = this.substanceFormService.switchType(response, newType); - } - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); + showJSON(): void { + const dialogRef = this.dialog.open(JsonDialogComponent, { + width: '90%' }); - } else { - this.handleSubstanceRetrivalError(); - } - this.loadingService.setLoading(false); - this.isLoading = false; - }, error => { - this.gaService.sendException('getSubstanceDetails: error from API call'); - this.loadingService.setLoading(false); - this.isLoading = false; - this.handleSubstanceRetrivalError(); - }); - } + this.overlayContainer.style.zIndex = '1002'; - jsonValid(file: any): boolean { - try { - JSON.parse(file); - } catch (e) { - return false; - } - return true; - } + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - getDetailsFromImport(state: any, same?: boolean) { - if(!this.jsonValid(state)) { - state = JSON.stringify(state); + }); + this.subscriptions.push(dialogSubscription); } - if (state && this.jsonValid(state)) { - const response = JSON.parse(state); - same = false; - this.definitionType = response.definitionType; - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response, 'import').pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - if (!same) { - setTimeout(() => { - this.forceChange = true; - this.dynamicComponents.forEach((cRef, index) => { - this.dynamicComponentLoader - .getComponentFactory(this.formSections[index].dynamicComponentName) - .subscribe(componentFactory => { - this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); - this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); - this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { - this.formSections[index].menuLabel = label; + + getSubstanceDetails(newType?: string): void { + this.substanceService.getSubstanceDetails(this.id).pipe(take(1)).subscribe(response => { + if (response._name) { + let name = response._name; + response.names.forEach(current => { + if (current.displayName && current.stdName) { + name = current.stdName; + } }); - const hiddenStateSubscription = - this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { - this.formSections[index].isHidden = isHidden; - }); - this.subscriptions.push(hiddenStateSubscription); - this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { - this.formSections[index].canAddItem = isList; - if (isList) { - const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { - this.formSections[index].matExpansionPanel.open(); - this.formSections[index].dynamicComponentRef.instance.addItem(); - }); - this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { - aieSubscription.unsubscribe(); - }); - } + name = name.replace(/<[^>]*>?/gm, ''); + this.titleService.setTitle('Edit - ' + name); + } + if (response) { + this.definitionType = response.definitionType; + if (newType) { + response = this.substanceFormService.switchType(response, newType); + } + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); }); - this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); - }); - }); - - this.canApprove = false; + } else { + this.handleSubstanceRetrivalError(); + } + this.loadingService.setLoading(false); + this.isLoading = false; + }, error => { + this.gaService.sendException('getSubstanceDetails: error from API call'); + this.loadingService.setLoading(false); + this.isLoading = false; + this.handleSubstanceRetrivalError(); }); - } - }, error => { - this.loadingService.setLoading(false); - }); - } else { - this.handleSubstanceRetrivalError(); - this.loadingService.setLoading(false); - } - this.loadingService.setLoading(false); - this.isLoading = false; - } - getPartialSubstanceDetails(uuid: string, type: string): void { - this.substanceService.getSubstanceDetails(uuid).pipe(take(1)).subscribe(response => { - if (response) { - this.substanceClass = response.substanceClass; - this.status = response.status; - delete response.uuid; - if (response._name) { - delete response._name; + jsonValid(file: any): boolean { + try { + JSON.parse(file); + } catch (e) { + return false; } - this.scrub(response, type); - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - this.loadingService.setLoading(false); - this.isLoading = false; - }); - } else { - this.handleSubstanceRetrivalError(); - } - }, error => { - this.gaService.sendException('getSubstanceDetails: error from API call'); - this.loadingService.setLoading(false); - this.isLoading = false; - this.handleSubstanceRetrivalError(); - }); - } - + return true; + } - private setFormSections(sectionNames: Array = []): void { - this.formSections = []; - sectionNames.forEach(sectionName => { - const formSection = new SubstanceFormSection(sectionName); - /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' && - (formSection.dynamicComponentName === 'substance-form-names' - || formSection.dynamicComponentName === 'substance-form-codes-card'))) { - } */ - this.formSections.push(formSection); - }); - } + getDetailsFromImport(state: any, same?: boolean) { + if (!this.jsonValid(state)) { + state = JSON.stringify(state); + } + if (state && this.jsonValid(state)) { + const response = JSON.parse(state); + same = false; + this.definitionType = response.definitionType; + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response, 'import').pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + if (!same) { + setTimeout(() => { + this.forceChange = true; + this.dynamicComponents.forEach((cRef, index) => { + this.dynamicComponentLoader + .getComponentFactory(this.formSections[index].dynamicComponentName) + .subscribe(componentFactory => { + this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); + this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); + this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { + this.formSections[index].menuLabel = label; + }); + const hiddenStateSubscription = + this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { + this.formSections[index].isHidden = isHidden; + }); + this.subscriptions.push(hiddenStateSubscription); + this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { + this.formSections[index].canAddItem = isList; + if (isList) { + const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { + this.formSections[index].matExpansionPanel.open(); + this.formSections[index].dynamicComponentRef.instance.addItem(); + }); + this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { + aieSubscription.unsubscribe(); + }); + } + }); + this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); + + this.updateHiddenFormSections() + }); + }); + + this.canApprove = false; + }); + } + }, error => { + this.loadingService.setLoading(false); + }); + } else { + this.handleSubstanceRetrivalError(); + this.loadingService.setLoading(false); - private handleSubstanceRetrivalError() { - const notification: AppNotification = { - message: 'The substance you\'re trying to edit doesn\'t exist.', - type: NotificationType.error, - milisecondsToShow: 4000 - }; - this.mainNotificationService.setNotification(notification); - setTimeout(() => { - this.router.navigate(['/substances/register']); - this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections.chemical); + } this.loadingService.setLoading(false); this.isLoading = false; - }); - }, 5000); - } + } - validate(validationType?: string): void { - if (validationType && validationType === 'approval') { - this.approving = true; - } else { - this.approving = false; + getPartialSubstanceDetails(uuid: string, type: string): void { + this.substanceService.getSubstanceDetails(uuid).pipe(take(1)).subscribe(response => { + if (response) { + this.substanceClass = response.substanceClass; + this.status = response.status; + delete response.uuid; + if (response._name) { + delete response._name; + } + this.scrub(response, type); + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + this.loadingService.setLoading(false); + this.isLoading = false; + }); + } else { + this.handleSubstanceRetrivalError(); + } + }, error => { + this.gaService.sendException('getSubstanceDetails: error from API call'); + this.loadingService.setLoading(false); + this.isLoading = false; + this.handleSubstanceRetrivalError(); + }); } - this.isLoading = true; - this.serverError = false; - this.loadingService.setLoading(true); - this.substanceFormService.validateSubstance().pipe(take(1)).subscribe(results => { - this.submissionMessage = null; - this.validationMessages = results.validationMessages.filter( - message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'|| message.messageType.toUpperCase() === 'NOTICE'); - this.validationResult = results.valid; - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - if (this.validationMessages.length === 0 && results.valid === true) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; - } - if (validationType && validationType === 'approval') { - this.submissionMessage = 'Are you sure you\'d like to approve this substance?'; - } - }, error => { - this.addServerError(error); - this.loadingService.setLoading(false); - this.isLoading = false; - }); - } - approve(): void { - this.isLoading = true; - this.loadingService.setLoading(true); - this.substanceFormService.approveSubstance().pipe(take(1)).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.openSuccessDialog('approve'); - this.submissionMessage = 'Substance was approved successfully'; - this.showSubmissionMessages = true; - this.validationResult = false; - }, - (error: SubstanceFormResults) => { - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - this.submissionMessage = 'Substance Could not be approved'; - this.addServerError(error.serverError); - setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = null; - }, 10000); - } - ); - } - submitStaging() { - this.substanceFormService.submitStaging(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.showSubmissionMessages = false; - this.submissionMessage = ''; - if (!this.id) { - this.id = response.uuid; - } - this.openSuccessDialog('staging'); - }) - } + private setFormSections(sectionNames: Array = []): void { + this.formSections = []; + sectionNames.forEach(sectionName => { + const formSection = new SubstanceFormSection(sectionName); + /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' && + (formSection.dynamicComponentName === 'substance-form-names' + || formSection.dynamicComponentName === 'substance-form-codes-card'))) { + } */ + this.formSections.push(formSection); + }); + } - submit(): void { - this.isLoading = true; - this.approving = false; - this.loadingService.setLoading(true); - if (this.activatedRoute.snapshot.queryParams['stagingID']) { - this.submitStaging(); - } else { - this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.showSubmissionMessages = false; - this.submissionMessage = ''; - if (!this.id) { - this.id = response.uuid; - } - this.openSuccessDialog(); - }, (error: SubstanceFormResults) => { - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - this.submissionMessage = null; - if (error.validationMessages && error.validationMessages.length) { - this.validationResult = error.isSuccessfull; - this.validationMessages = error.validationMessages - .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'); - this.showSubmissionMessages = true; - } else { - this.submissionMessage = 'There was a problem with your submission'; - this.addServerError(error.serverError); + private handleSubstanceRetrivalError() { + const notification: AppNotification = { + message: 'The substance you\'re trying to edit doesn\'t exist.', + type: NotificationType.error, + milisecondsToShow: 4000 + }; + this.mainNotificationService.setNotification(notification); setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = null; - }, 8000); - } - }); - - } - } + this.router.navigate(['/substances/register']); + this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections.chemical) + this.loadingService.setLoading(false); + this.isLoading = false; + }); + }, 5000); + } - dismissValidationMessage(index: number) { - this.validationMessages.splice(index, 1); + validate(validationType?: string): void { + if (validationType && validationType === 'approval') { + this.approving = true; + } else { + this.approving = false; + } + this.isLoading = true; + this.serverError = false; + this.loadingService.setLoading(true); + this.substanceFormService.validateSubstance().pipe(take(1)).subscribe(results => { + this.submissionMessage = null; + this.validationMessages = results.validationMessages.filter( + message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING' || message.messageType.toUpperCase() === 'NOTICE'); + this.validationResult = results.valid; + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + if (this.validationMessages.length === 0 && results.valid === true) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + } + if (validationType && validationType === 'approval') { + this.submissionMessage = 'Are you sure you\'d like to approve this substance?'; + } + }, error => { + this.addServerError(error); + this.loadingService.setLoading(false); + this.isLoading = false; + }); + } - if (this.validationMessages.length === 0) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + approve(): void { + this.isLoading = true; + this.loadingService.setLoading(true); + this.substanceFormService.approveSubstance().pipe(take(1)).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.openSuccessDialog('approve'); + this.submissionMessage = 'Substance was approved successfully'; + this.showSubmissionMessages = true; + this.validationResult = false; + }, + (error: SubstanceFormResults) => { + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + this.submissionMessage = 'Substance Could not be approved'; + this.addServerError(error.serverError); + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = null; + }, 10000); + } + ); } - } - addServerError(error: any): void { - this.serverError = true; - this.validationResult = false; - this.validationMessages = null; - - const message: ValidationMessage = { - actionType: 'server failure', - links: [], - appliedChange: false, - suggestedChange: false, - messageType: 'ERROR', - message: 'Unknown Server Error' - }; - if (error && error.error && error.error.message) { - message.message = 'Server Error ' + (error.status + ': ' || ': ') + error.error.message; - } else if (error && error.error && (typeof error.error) === 'string') { - message.message = 'Server Error ' + (error.status + ': ' || '') + error.error; - } else if (error && error.message) { - message.message = 'Server Error ' + (error.status + ': ' || '') + error.message; + submitStaging() { + this.substanceFormService.submitStaging(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.showSubmissionMessages = false; + this.submissionMessage = ''; + if (!this.id) { + this.id = response.uuid; + } + this.openSuccessDialog('staging'); + }) } - this.validationMessages = [message]; - this.showSubmissionMessages = true; - } - toggleValidation(): void { - this.showSubmissionMessages = !this.showSubmissionMessages; - } + submit(): void { + this.isLoading = true; + this.approving = false; + this.loadingService.setLoading(true); + if (this.activatedRoute.snapshot.queryParams['stagingID']) { + this.submitStaging(); + } else { + this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.showSubmissionMessages = false; + this.submissionMessage = ''; + if (!this.id) { + this.id = response.uuid; + } + this.openSuccessDialog(); + }, (error: SubstanceFormResults) => { + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + this.submissionMessage = null; + if (error.validationMessages && error.validationMessages.length) { + this.validationResult = error.isSuccessfull; + this.validationMessages = error.validationMessages + .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'); + this.showSubmissionMessages = true; + } else { + this.submissionMessage = 'There was a problem with your submission'; + this.addServerError(error.serverError); + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = null; + }, 8000); + } + }); - dismissAllValidationMessages(): void { - for (let i = this.validationMessages.length - 1; i >= 0; i--) { - if (this.validationMessages[i].messageType !== 'ERROR') { - this.validationMessages.splice(i, 1); - } + } } - if (this.validationMessages.length === 0) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + + dismissValidationMessage(index: number) { + this.validationMessages.splice(index, 1); + + if (this.validationMessages.length === 0) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + } } - } - @HostListener('window:beforeunload', ['$event']) - unloadNotification($event: any) { - if (this.substanceFormService.isSubstanceUpdated) { - $event.returnValue = true; + addServerError(error: any): void { + this.serverError = true; + this.validationResult = false; + this.validationMessages = null; + + const message: ValidationMessage = { + actionType: 'server failure', + links: [], + appliedChange: false, + suggestedChange: false, + messageType: 'ERROR', + message: 'Unknown Server Error' + }; + if (error && error.error && error.error.message) { + message.message = 'Server Error ' + (error.status + ': ' || ': ') + error.error.message; + } else if (error && error.error && (typeof error.error) === 'string') { + message.message = 'Server Error ' + (error.status + ': ' || '') + error.error; + } else if (error && error.message) { + message.message = 'Server Error ' + (error.status + ': ' || '') + error.message; + } + this.validationMessages = [message]; + this.showSubmissionMessages = true; + } + + toggleValidation(): void { + this.showSubmissionMessages = !this.showSubmissionMessages; + } + + dismissAllValidationMessages(): void { + for (let i = this.validationMessages.length - 1; i >= 0; i--) { + if (this.validationMessages[i].messageType !== 'ERROR') { + this.validationMessages.splice(i, 1); + } + } + if (this.validationMessages.length === 0) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + } + } + + @HostListener('window:beforeunload', ['$event']) + unloadNotification($event: any) { + if (this.substanceFormService.isSubstanceUpdated) { + $event.returnValue = true; + } } - } //generate new uuid string for following scubber functions guid() { @@ -1041,21 +1050,21 @@ getDrafts() { } scrub(oldraw: any, importType?: string): any { - + const old = oldraw; - const idHolders = defiant.json.search(old, '//*[id]'); - const idMap = {}; - for (let i = 0; i < idHolders.length; i++) { - const oid = idHolders[i].id; - if (idMap[oid]) { - idHolders[i].id = idMap[oid]; - } else { - const nid = this.guid(); - idHolders[i].id = nid; - idMap[oid] = nid; - } - } + const idHolders = defiant.json.search(old, '//*[id]'); + const idMap = {}; + for (let i = 0; i < idHolders.length; i++) { + const oid = idHolders[i].id; + if (idMap[oid]) { + idHolders[i].id = idMap[oid]; + } else { + const nid = this.guid(); + idHolders[i].id = nid; + idMap[oid] = nid; + } + } const uuidHolders = defiant.json.search(old, '//*[uuid]'); const _map = {}; @@ -1094,7 +1103,7 @@ getDrafts() { codeSystem: code }); }) - + const createHolders = defiant.json.search(old, '//*[created]'); for (let i = 0; i < createHolders.length; i++) { const rec = createHolders[i]; @@ -1104,216 +1113,235 @@ getDrafts() { delete rec['lastEditedBy']; } - const originHolders = defiant.json.search(old, '//*[originatorUuid]'); - for (let i = 0; i < originHolders.length; i++) { - const rec = originHolders[i]; - delete rec['originatorUuid']; - } + const originHolders = defiant.json.search(old, '//*[originatorUuid]'); + for (let i = 0; i < originHolders.length; i++) { + const rec = originHolders[i]; + delete rec['originatorUuid']; + } - delete old.approvalID; - delete old.approved; - delete old.approvedBy; - old.status = 'pending'; - if ((importType) && (importType === 'definition')) { - old.names = []; - old.codes = []; - old.notes = []; - old.relationships = []; - old.tags = []; - } - delete old['createdBy']; - delete old['created']; - delete old['lastEdited']; - delete old['lastEditedBy']; - delete old['version']; - delete old['$$update']; - delete old['changeReason']; - - - if (true) { - const refSet = {}; - - const refHolders2 = defiant.json.search(old, '//*[references]'); - for (let i = 0; i < refHolders2.length; i++) { - const refs = refHolders2[i].references; - for (let j = 0; j < refs.length; j++) { - const or = refs[j]; - if (typeof or === 'object') { continue; } - refSet[or] = true; + delete old.approvalID; + delete old.approved; + delete old.approvedBy; + old.status = 'pending'; + if ((importType) && (importType === 'definition')) { + old.names = []; + old.codes = []; + old.notes = []; + old.relationships = []; + old.tags = []; } - } + delete old['createdBy']; + delete old['created']; + delete old['lastEdited']; + delete old['lastEditedBy']; + delete old['version']; + delete old['$$update']; + delete old['changeReason']; + + + if (true) { + const refSet = {}; + + const refHolders2 = defiant.json.search(old, '//*[references]'); + for (let i = 0; i < refHolders2.length; i++) { + const refs = refHolders2[i].references; + for (let j = 0; j < refs.length; j++) { + const or = refs[j]; + if (typeof or === 'object') { + continue; + } + refSet[or] = true; + } + } - const nrefs = _.chain(old.references) - .filter(function (ref) { - if (refSet[ref.uuid]) { - return true; - } else { - return false; - } - }) - .value(); + const nrefs = _.chain(old.references) + .filter(function (ref) { + if (refSet[ref.uuid]) { + return true; + } else { + return false; + } + }) + .value(); + + old.references = nrefs; - old.references = nrefs; + } + return old; } - return old; - } + openSuccessDialog(type?: string): void { + const dialogRef = this.dialog.open(SubmitSuccessDialogComponent, {data: {'type': type}}); + this.overlayContainer.style.zIndex = '1002'; + + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe((response?: 'continue' | 'browse' | 'view' | 'staging') => { + + this.substanceFormService.bypassUpdateCheck(); + if (response === 'continue') { + this.router.navigate(['/substances', this.id, 'edit']); + } else if (response === 'browse') { + this.router.navigate(['/browse-substance']); + } else if (response === 'staging') { + this.router.navigate(['/admin/staging-area']); + } else if (response === 'view') { + this.router.navigate(['/substances', this.id]); + } else { + this.submissionMessage = 'Substance was saved successfully!'; + if (type && type === 'approve') { + this.submissionMessage = 'Substance was approved successfully'; + } + this.showSubmissionMessages = true; + this.validationResult = false; + if (type && type === 'staging') { + this.submissionMessage = 'Edits to staged substance were saved successfully'; + } else { + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = ''; + this.router.navigate(['/substances', this.id, 'edit']); + }, 3000); + } + } + }); + this.subscriptions.push(dialogSubscription); - openSuccessDialog(type?: string): void { - const dialogRef = this.dialog.open(SubmitSuccessDialogComponent, {data: {'type':type}}); - this.overlayContainer.style.zIndex = '1002'; - - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe((response?: 'continue' | 'browse' | 'view' | 'staging') => { - - this.substanceFormService.bypassUpdateCheck(); - if (response === 'continue') { - this.router.navigate(['/substances', this.id, 'edit']); - } else if (response === 'browse') { - this.router.navigate(['/browse-substance']); - } else if (response === 'staging') { - this.router.navigate(['/admin/staging-area']); - } else if (response === 'view') { - this.router.navigate(['/substances', this.id]); - } else { - this.submissionMessage = 'Substance was saved successfully!'; - if (type && type === 'approve') { - this.submissionMessage = 'Substance was approved successfully'; - } - this.showSubmissionMessages = true; - this.validationResult = false; - if (type && type === 'staging') { - this.submissionMessage = 'Edits to staged substance were saved successfully'; - } else { - setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = ''; - this.router.navigate(['/substances', this.id, 'edit']); - }, 3000); - } - } - }); - this.subscriptions.push(dialogSubscription); + } -} + mergeConcept() { + this.feature = undefined; + const dialogRef = this.dialog.open(MergeConceptDialogComponent, { + width: '900px', data: {uuid: this.id} + }); + this.overlayContainer.style.zIndex = '1002'; + } -mergeConcept() { - this.feature = undefined; - const dialogRef = this.dialog.open(MergeConceptDialogComponent, { - width: '900px', data: {uuid: this.id} - }); - this.overlayContainer.style.zIndex = '1002'; -} + definitionSwitch() { + this.feature = undefined; + const dialogRef = this.dialog.open(DefinitionSwitchDialogComponent, { + width: '900px', data: {uuid: this.id}, autoFocus: false + }); + this.overlayContainer.style.zIndex = '1000'; + } - definitionSwitch() { - this.feature = undefined; - const dialogRef = this.dialog.open(DefinitionSwitchDialogComponent, { - width: '900px', data: {uuid: this.id}, autoFocus: false - }); - this.overlayContainer.style.zIndex = '1000'; - } + fixLink(link: string) { + return this.substanceService.oldLinkFix(link); + } - fixLink(link: string) { - return this.substanceService.oldLinkFix(link); - } + @Output() + toggleSimpleFormChanged(event: MatButtonToggleChange) { + this.simplifiedFormNameToggle = event.source.checked + this.updateHiddenFormSections() + } - saveDraft(auto?: boolean) { - const json = this.substanceFormService.cleanSubstance(); - const time = new Date().getTime(); - - const uuid = json.uuid ? json.uuid : 'register'; - const type = json.substanceClass; - let primary = null; - json.names.forEach(name => { - if (name.displayName) { - primary = name.name; - } - }); - if (!primary && json.names.length > 0) { - primary = json.names[0].name; + updateHiddenFormSections(){ + let s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-definition') + if (s) { + s.isHidden = !this.simplifiedFormNameToggle + } + s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-names') + if (s) { + s.isHidden = !this.simplifiedFormNameToggle + } + s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-simplified-names') + if (s) { + s.isHidden = this.simplifiedFormNameToggle + } } - if(!auto) { - const file = 'gsrs-draft-' + time; - - let draft = { - 'uuid': uuid, - 'date': time, - 'type': type, - 'name': primary, - 'substance': json, - 'auto': false, - 'file': file - } - - localStorage.setItem(file, JSON.stringify(draft)); - this.draftCount++; - - } else { - this.getDrafts(); - let autos = this.drafts.filter(opt => { - return opt.auto; - }); - let auto1 = null; - let auto2 = null; - let auto3 = null; - this.drafts.forEach(draft => { - if (draft.auto) { - if (draft.file === 'gsrs-draft-auto1') { - auto1 = draft; - } - if (draft.file === 'gsrs-draft-auto2') { - auto2 = draft; - } - if (draft.file === 'gsrs-draft-auto3') { - auto3 = draft; - } + + saveDraft(auto?: boolean) { + const json = this.substanceFormService.cleanSubstance(); + const time = new Date().getTime(); + + const uuid = json.uuid ? json.uuid : 'register'; + const type = json.substanceClass; + let primary = null; + json.names.forEach(name => { + if (name.displayName) { + primary = name.name; + } + }); + if (!primary && json.names.length > 0) { + primary = json.names[0].name; } - }); - let file = 'gsrs-draft-auto'; + if (!auto) { + const file = 'gsrs-draft-' + time; + + let draft = { + 'uuid': uuid, + 'date': time, + 'type': type, + 'name': primary, + 'substance': json, + 'auto': false, + 'file': file + } + + localStorage.setItem(file, JSON.stringify(draft)); + this.draftCount++; - if (!auto1) { - file = 'gsrs-draft-auto1'; - this.draftCount++; + } else { + this.getDrafts(); + let autos = this.drafts.filter(opt => { + return opt.auto; + }); + let auto1 = null; + let auto2 = null; + let auto3 = null; + this.drafts.forEach(draft => { + if (draft.auto) { + if (draft.file === 'gsrs-draft-auto1') { + auto1 = draft; + } + if (draft.file === 'gsrs-draft-auto2') { + auto2 = draft; + } + if (draft.file === 'gsrs-draft-auto3') { + auto3 = draft; + } + } + }); + let file = 'gsrs-draft-auto'; - } else if (!auto2) { - file = 'gsrs-draft-auto2'; - this.draftCount++; + if (!auto1) { + file = 'gsrs-draft-auto1'; + this.draftCount++; - } else if (!auto3) { - file = 'gsrs-draft-auto3'; - this.draftCount++; + } else if (!auto2) { + file = 'gsrs-draft-auto2'; + this.draftCount++; - } else { - if(auto1.date < auto2.date && auto1.date < auto3.date) { - file = 'gsrs-draft-auto1'; - } - else if (auto2.date < auto1.date && auto2.date < auto3.date) { - file = 'gsrs-draft-auto2'; - } - else { - file = 'gsrs-draft-auto3'; - } - } + } else if (!auto3) { + file = 'gsrs-draft-auto3'; + this.draftCount++; - let draft = { - 'uuid': uuid, - 'date': time, - 'type': type, - 'name': primary, - 'substance': json, - 'auto': true, - 'file': file - } + } else { + if (auto1.date < auto2.date && auto1.date < auto3.date) { + file = 'gsrs-draft-auto1'; + } else if (auto2.date < auto1.date && auto2.date < auto3.date) { + file = 'gsrs-draft-auto2'; + } else { + file = 'gsrs-draft-auto3'; + } + } + + let draft = { + 'uuid': uuid, + 'date': time, + 'type': type, + 'name': primary, + 'substance': json, + 'auto': true, + 'file': file + } - localStorage.setItem(file, JSON.stringify(draft)); + localStorage.setItem(file, JSON.stringify(draft)); - - } - - + } + - } + } } From 0e647b59e7e6e3c1ef6a61bfb301fcba81e90b46 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 12 Dec 2023 20:41:59 +0200 Subject: [PATCH 03/17] Cleanup and some CSS --- .../simplified-names/name-form.component.html | 56 ++----------------- .../simplified-names/name-form.component.scss | 1 + ...-form-simplified-names-card.component.html | 14 ----- ...ce-form-simplified-names-card.component.ts | 1 - 4 files changed, 5 insertions(+), 67 deletions(-) diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html index eece85e5a..d854af56f 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.html +++ b/src/app/core/substance-form/simplified-names/name-form.component.html @@ -12,67 +12,19 @@
- - - - - - - - - - - + resolve + (click)="resolve()">resolve - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/src/app/core/substance-form/simplified-names/name-form.component.scss b/src/app/core/substance-form/simplified-names/name-form.component.scss index ecdb2e099..3d5e51d81 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.scss +++ b/src/app/core/substance-form/simplified-names/name-form.component.scss @@ -59,6 +59,7 @@ .name, .tags, .domains { flex-grow: 1; padding-right: 15px; + padding-top: 15px; } .jurisdiction { diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html index cb57ab6ae..3849a2d81 100644 --- a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html @@ -4,20 +4,6 @@ - - - - - - -
- - - Show Standardized Name fields -
Date: Thu, 22 Feb 2024 15:01:34 +0200 Subject: [PATCH 04/17] Split definition for simplified form wrapper --- package.json | 12 +- .../substance-form-base-filtered-list.ts | 1 - .../simplified-names/name-form.component.scss | 4 +- ...-form-simplified-names-card.component.html | 15 +- ...ce-form-simplified-names-card.component.ts | 8 +- .../substance-form.component.html | 396 ++++++++++++------ .../substance-form.component.scss | 104 +++-- 7 files changed, 344 insertions(+), 196 deletions(-) diff --git a/package.json b/package.json index 01eafe93b..58766d0c9 100644 --- a/package.json +++ b/package.json @@ -57,26 +57,24 @@ "file-select": "file:dist/file-select/file-select-0.0.1.tgz", "hammerjs": "2.0.8", "helmet": "3.21.2", - "jexl": "2.3.0", "jsdraw-wrapper": "file:dist/jsdraw-wrapper/jsdraw-wrapper-0.0.1.tgz", "ketcher-wrapper": "file:dist/ketcher-wrapper/ketcher-wrapper-0.0.1.tgz", "lodash": "4.17.21", "lucene-query-parser": "1.2.0", - "moment": "2.29.4", + "moment": "2.29.2", "ng-multiselect-dropdown": "0.2.10", "ngx-json-viewer": "2.4.0", "ngx-moment": "3.5.0", - "ngx-schema-form": "2.7.0", "primeng": "^13.2.0", "reflect-metadata": "0.1.13", "rxjs": "7.5.4", "ts-loader": "4.5.0", "util": "0.12.4", "web-animations-js": "2.3.2", - "webpack": "^5.74.0", - "webpack-sources": "^3.2.3", + "zone.js": "0.11.4", "z-schema": "4.2.2", - "zone.js": "0.11.4" + "jexl": "2.3.0", + "ngx-schema-form": "2.7.0" }, "devDependencies": { "@angular-devkit/build-angular": "13.2.1", @@ -106,7 +104,7 @@ "husky": "7.0.4", "jasmine-core": "4.0.0", "jasmine-spec-reporter": "7.0.0", - "karma": "6.4.2", + "karma": "6.3.15", "karma-chrome-launcher": "3.1.0", "karma-coverage-istanbul-reporter": "3.0.3", "karma-jasmine": "4.0.1", diff --git a/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts b/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts index 0ba2f9dca..b115481e1 100644 --- a/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts +++ b/src/app/core/substance-form/base-classes/substance-form-base-filtered-list.ts @@ -19,7 +19,6 @@ export class SubstanceCardBaseFilteredList extends SubstanceFormBase { } pageChange(pageEvent?: PageEvent, analyticsEventCategory?: string): void { - if (pageEvent != null) { let eventAction; diff --git a/src/app/core/substance-form/simplified-names/name-form.component.scss b/src/app/core/substance-form/simplified-names/name-form.component.scss index 3d5e51d81..953d39216 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.scss +++ b/src/app/core/substance-form/simplified-names/name-form.component.scss @@ -1,10 +1,10 @@ .name-form-container { - padding: 30px 10px 12px 10px; + padding: 10px 3px 4px 3px; position: relative; } .collapse { - padding: 20px 10px 12px 10px; + padding: 10px 5px 6px 5px; position: relative; } diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html index 3849a2d81..a62183e1b 100644 --- a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html @@ -3,22 +3,21 @@ -
- +
-
- - -
+ + + + + + diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts index 8f381ff4c..733f49237 100644 --- a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.ts @@ -3,7 +3,7 @@ import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-cl import { SubstanceName } from '@gsrs-core/substance/substance.model'; import { SubstanceFormService } from '../substance-form.service'; import { ScrollToService } from '../../scroll-to/scroll-to.service'; -import { GoogleAnalyticsService } from '../../google-analytics/google-analytics.service'; +import { GoogleAnalyticsService } from '@gsrs-core/google-analytics'; import { Subscription } from 'rxjs'; import { ConfigService } from '@gsrs-core/config'; import {SubstanceFormNamesService} from "@gsrs-core/substance-form/names/substance-form-names.service"; @@ -19,7 +19,6 @@ export class SubstanceFormSimplifiedNamesCardComponent names: Array; private subscriptions: Array = []; pageSize = 10; - expanded = true; showStd = true; appId: string; standardizeButton = false; @@ -69,11 +68,6 @@ export class SubstanceFormSimplifiedNamesCardComponent } - - collapse() { - this.expanded = !this.expanded; - } - standardize(): void { // We currently only want the back-end to standardize names // this.substanceFormNamesService.standardizeNames(); diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html index 2052b1496..37c7fca63 100644 --- a/src/app/core/substance-form/substance-form.component.html +++ b/src/app/core/substance-form/substance-form.component.html @@ -1,150 +1,174 @@ +x
x - +
-
-
- Simple Form - - - - - - - -
-
- - Advanced Features - - - - Change Substance Class - - - Change Status to approved - - - Change Status to pending - - - Set Definition to private - - - Set Definition to public - - - Un-approve record (Remove approval ID) - - - Change Approval ID - - - Set concept status to non-approved - - - Merge subconcept - - - Switch primary and alt definitions - - - - - Predict N-Glycosylation Sites - - - Predict disulfide links by monoclonal antibody type - - - Register a Fragment - +
+
+
+ Simple Form + + + + + + + + +
+
+ + Advanced Features + + + + Change Substance Class + + + Change Status to approved + + + Change Status to pending + + + Set Definition to private + + + Set Definition to public + + + Un-approve record (Remove approval ID) + + + Change Approval ID + + + Set concept status to non-approved + + + Merge subconcept + + + Switch primary and alt definitions + + + + + Predict N-Glycosylation Sites + + + Predict disulfide links by monoclonal antibody type + + + Register a Fragment + Regenerate reference UUIDs - - -
- -
Saved Drafts
-
-
-
-
d706be08-4015-4fa2-80e6-567cf7e2e23f
-
April 1, 2022 08:05
-
+ + +
+ +
Saved Drafts
+
+
+
+
-
-
-
d706be08-4015-4fa2-80e6-567cf7e2e23f
-
April 1, 2022 08:00
-
-
+
d706be08-4015-4fa2-80e6-567cf7e2e23f
+
April 1, 2022 08:05
+
+ +
+
+
+
+ +
+
d706be08-4015-4fa2-80e6-567cf7e2e23f
+
April 1, 2022 08:00
+
+ +
+
-
-
-
register = protein
-
April 1, 2022 08:00
-
-
+
+
+ +
+
register = protein
+
April 1, 2022 08:00
+
+ +
+
-
+
-
+
- +
- - - -
- - New Class - - - {{class}} - - - + + + +
+ + New Class + + + {{ class }} + + + +
-
- - - + + + +
+
- {{submissionMessage}} + {{ submissionMessage }}
Please correct or dismiss the following errors and submit again:
-
- -
- {{message.messageType}}
-
{{message.message}}
+
+ +
+ {{ message.messageType }}
+
{{ message.message }}
{{link.text}} + target="_blank">{{ link.text }}
- + @@ -153,33 +177,40 @@
- + [disabled]="isLoading || (this.validationResult === false)">{{ validationMessages && validationMessages.length > 0 ? 'Dismiss All and ' : '' }} + Submit + + + [disabled]="isLoading || !canApprove"> Confirm Approval +
-
+ +
- + -

{{section.menuLabel}}

+

{{ section.menuLabel }}

-
@@ -191,3 +222,106 @@

{{section.menuLabel}}

+ + + + +
+
+ Simple Form + + + + + + + + +
+
+ + Advanced Features + + + + Change Substance Class + + + Change Status to approved + + + Change Status to pending + + + Set Definition to private + + + Set Definition to public + + + Un-approve record (Remove approval ID) + + + Change Approval ID + + + Set concept status to non-approved + + + Merge subconcept + + + Switch primary and alt definitions + + + + + Predict N-Glycosylation Sites + + + Predict disulfide links by monoclonal antibody type + + + Register a Fragment + + + + +
+ +
+ + New Class + + + {{ class }} + + + +
+
+ + + + +
+
+ + diff --git a/src/app/core/substance-form/substance-form.component.scss b/src/app/core/substance-form/substance-form.component.scss index 24a8cadae..274fdcbd0 100644 --- a/src/app/core/substance-form/substance-form.component.scss +++ b/src/app/core/substance-form/substance-form.component.scss @@ -3,7 +3,7 @@ display: block; /* Hidden by default */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ - top: 0; + top: 0; left: 0; right: 0; bottom: 0; @@ -11,9 +11,11 @@ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ cursor: pointer; /* Add a pointer on hover */ } + .hide { - display: none!important; + display: none !important; } + .center-screen { z-index: 2; position: fixed; @@ -25,45 +27,51 @@ margin-right: -50%; transform: translate(-50%, -50%); } + .center-screen img { transition-duration: 4s; margin: 0 auto; display: block; } + .center-screen img:hover { transform: scale(1.7); -webkit-transform: scale(1.7); -moz-transform: scale(1.7); z-index: 0; } + .image-popped-up { width: 100%; height: 100%; padding: 10px; } + .close-out { padding: 10px; float: right; font-weight: 500; cursor: pointer; } + .top-fixed { - position: fixed; - display: flex; - flex-direction: column; - top: 64px; - width: 100%; - background-color: var(--regular-white-color); - align-items: center; - justify-content: center; - box-shadow: 0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3); - z-index: 1001; + position: fixed; + display: flex; + flex-direction: column; + top: 64px; + width: 100%; + background-color: var(--regular-white-color); + align-items: center; + justify-content: center; + box-shadow: 0px 3px 3px -2px var(--box-shadow-color), 0px 3px 4px 0px var(--box-shadow-color-2), 0px 1px 8px 0px var(--box-shadow-color-3); + z-index: 1001; } .cdk-overlay-pane { z-index: 1005; } -mat-select-panel{ + +mat-select-panel { z-index: 1005; } @@ -83,50 +91,57 @@ mat-select-panel{ ::ng-deep .mat-form-field-wrapper { padding-bottom: 5px; } + .advanced-features { z-index: 2000 !important; - display:flex; + display: flex; flex-direction: row; padding-left: 10px; } + ::ng-deep .cdk-overlay-pane { margin-top: 20px !important; } .form-content-container { - // position: fixed; - // top: 121px; - // right: 0; - // bottom: 0; - // left: 0; - overflow: hidden; - padding-top: 121px; + overflow: hidden; + padding-top: 121px; +} + + +.small-form-content-container { + overflow: hidden; + padding-top: 90px; } .actions-container { - max-width: 1128px; - width: 100%; - background-color: var(--regular-white-color); - padding: 10px; - display: flex; + max-width: 1128px; + width: 100%; + background-color: var(--regular-white-color); + padding: 10px; + display: flex; +} + +.small-actions-container { + padding: 10px; } .mat-accordion { - width: 100%; - max-width: 1020px; - box-sizing: border-box; + width: 100%; + max-width: 1020px; + box-sizing: border-box; } .hidden { - display: none !important; + display: none !important; } .validation-body { - max-width:95%; - display:flex; - max-width: 960px; -word-break: break-word; + max-width: 95%; + display: flex; + max-width: 960px; + word-break: break-word; } .validation-dismiss { @@ -167,8 +182,8 @@ word-break: break-word; text-transform: uppercase; font-weight: 500; margin-right: 20px; - padding:10px; - border-radius:3px; + padding: 10px; + border-radius: 3px; height: 40px; min-width: 95px; } @@ -198,10 +213,6 @@ word-break: break-word; } -.validate-button{ - margin-left:15px; -} - .mat-expansion-panel-header-title { align-items: center; } @@ -215,6 +226,10 @@ word-break: break-word; color: var(--link-primary-color); } +.validate-button { + margin-left: 15px; +} + .import-button { margin-left: 15px; } @@ -227,6 +242,15 @@ word-break: break-word; margin-left: 15px; } +.small-button { + height: 30px; + font-size: 11px; + display: flex; + justify-content: center; + align-items: center; +} + + .chip { background-color: var(--regular-white-color); border-radius: 50%; From 0b4aa318a8c29b4915f8d041b1b6c1d895205512 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Fri, 19 Jan 2024 17:34:02 +0200 Subject: [PATCH 05/17] Streamlined card hide logic --- .../substance-form.component.html | 8 +- .../substance-form.component.ts | 2227 +++++++++-------- 2 files changed, 1120 insertions(+), 1115 deletions(-) diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html index 37c7fca63..a87671fdd 100644 --- a/src/app/core/substance-form/substance-form.component.html +++ b/src/app/core/substance-form/substance-form.component.html @@ -5,10 +5,10 @@
-
+
- Simple Form @@ -193,7 +193,7 @@
-
+
@@ -228,7 +228,7 @@

{{ section.menuLabel }}

- Simple Form diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index 81c8d5a11..ff7421d7a 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -1,11 +1,11 @@ import { - Component, - OnInit, - AfterViewInit, - ViewChildren, - ViewContainerRef, - QueryList, - OnDestroy, HostListener, Input, Output + Component, + OnInit, + AfterViewInit, + ViewChildren, + ViewContainerRef, + QueryList, + OnDestroy, HostListener, Input, Output } from '@angular/core'; import {formSections} from './form-sections.constant'; import {ActivatedRoute, Router, RouterEvent, NavigationStart, NavigationEnd} from '@angular/router'; @@ -30,13 +30,13 @@ import {take, map} from 'rxjs/operators'; import {MatExpansionPanel} from '@angular/material/expansion'; import {SubmitSuccessDialogComponent} from './submit-success-dialog/submit-success-dialog.component'; import { - MergeConceptDialogComponent + MergeConceptDialogComponent } from '@gsrs-core/substance-form/merge-concept-dialog/merge-concept-dialog.component'; import { - DefinitionSwitchDialogComponent + DefinitionSwitchDialogComponent } from '@gsrs-core/substance-form/definition-switch-dialog/definition-switch-dialog.component'; import { - SubstanceEditImportDialogComponent + SubstanceEditImportDialogComponent } from '@gsrs-core/substance-edit-import-dialog/substance-edit-import-dialog.component'; import {StructuralUnit} from '@gsrs-core/substance'; import {ConfigService} from '@gsrs-core/config'; @@ -50,1021 +50,1022 @@ import {MatButtonToggleChange} from "@angular/material/button-toggle"; @Component({ - selector: 'app-substance-form', - templateUrl: './substance-form.component.html', - styleUrls: ['./substance-form.component.scss'] + selector: 'app-substance-form', + templateUrl: './substance-form.component.html', + styleUrls: ['./substance-form.component.scss'] }) export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy { - @Input() - simplifiedFormNameToggle = true // TODO:Set depending on config - - isLoading = true; - id?: string; - formSections: Array = []; - @ViewChildren('dynamicComponent', {read: ViewContainerRef}) dynamicComponents: QueryList; - @ViewChildren('expansionPanel', {read: MatExpansionPanel}) matExpansionPanels: QueryList; - private subClass: string; - definitionType: string; - expandedComponents = [ - 'substance-form-definition', - 'substance-form-simplified', - 'substance-form-structure', - 'substance-form-moieties', - 'substance-form-references' - ]; - showSubmissionMessages = false; - submissionMessage: string; - validationMessages: Array; - validationResult = false; - private subscriptions: Array = []; - copy: string; - private overlayContainer: HTMLElement; - serverError: boolean; - canApprove: boolean; - approving: boolean; - definition: SubstanceFormDefinition; - user: string; - feature: string; - isAdmin: boolean; - isUpdater: boolean; - messageField: string; - uuid: string; - substanceClass: string; - drafts: Array; - draftCount = 0; - status: string; - hidePopup: boolean; - unit: StructuralUnit; - autoSaveWait = 60000; - classes = [ - 'concept', - 'protein', - 'chemical', - 'structurallyDiverse', - 'polymer', - 'nucleicAcid', - 'mixture', - 'specifiedSubstanceG1', - 'specifiedSubstanceG2', - 'specifiedSubstanceG3']; - imported = false; - forceChange = false; - sameSubstance = false; - UNII: string; - approvalType = 'lastEditedBy'; - previousState: number; - - constructor( - private activatedRoute: ActivatedRoute, - private substanceService: SubstanceService, - private loadingService: LoadingService, - private mainNotificationService: MainNotificationService, - private router: Router, - private dynamicComponentLoader: DynamicComponentLoader, - private gaService: GoogleAnalyticsService, - private substanceFormService: SubstanceFormService, - private overlayContainerService: OverlayContainer, - private configService: ConfigService, - private dialog: MatDialog, - private authService: AuthService, - private titleService: Title, - private utilsService: UtilsService - ) { - this.substanceService.showImagePopup.subscribe(data => { - this.hidePopup = data; - }) - this.substanceService.imagePopupUnit.subscribe(data => { - this.unit = data; - }) - } + @Input() + simplifiedForm = true // TODO:Set depending on config + + isLoading = true; + id?: string; + formSections: Array = []; + @ViewChildren('dynamicComponent', {read: ViewContainerRef}) dynamicComponents: QueryList; + @ViewChildren('expansionPanel', {read: MatExpansionPanel}) matExpansionPanels: QueryList; + private subClass: string; + definitionType: string; + expandedComponents = [ + 'substance-form-definition', + 'substance-form-simplified', + 'substance-form-structure', + 'substance-form-moieties', + 'substance-form-references' + ]; + showSubmissionMessages = false; + submissionMessage: string; + validationMessages: Array; + validationResult = false; + private subscriptions: Array = []; + copy: string; + private overlayContainer: HTMLElement; + serverError: boolean; + canApprove: boolean; + approving: boolean; + definition: SubstanceFormDefinition; + user: string; + feature: string; + isAdmin: boolean; + isUpdater: boolean; + messageField: string; + uuid: string; + substanceClass: string; + drafts: Array; + draftCount = 0; + status: string; + hidePopup: boolean; + unit: StructuralUnit; + autoSaveWait = 60000; + classes = [ + 'concept', + 'protein', + 'chemical', + 'structurallyDiverse', + 'polymer', + 'nucleicAcid', + 'mixture', + 'specifiedSubstanceG1', + 'specifiedSubstanceG2', + 'specifiedSubstanceG3']; + imported = false; + forceChange = false; + sameSubstance = false; + UNII: string; + approvalType = 'lastEditedBy'; + previousState: number; + + constructor( + private activatedRoute: ActivatedRoute, + private substanceService: SubstanceService, + private loadingService: LoadingService, + private mainNotificationService: MainNotificationService, + private router: Router, + private dynamicComponentLoader: DynamicComponentLoader, + private gaService: GoogleAnalyticsService, + private substanceFormService: SubstanceFormService, + private overlayContainerService: OverlayContainer, + private configService: ConfigService, + private dialog: MatDialog, + private authService: AuthService, + private titleService: Title, + private utilsService: UtilsService + ) { + this.substanceService.showImagePopup.subscribe(data => { + this.hidePopup = data; + }) + this.substanceService.imagePopupUnit.subscribe(data => { + this.unit = data; + }) + } - showHidePopup(): void { - this.hidePopup = !this.hidePopup; - this.substanceService.showImagePopup.next(this.hidePopup); - } + showHidePopup(): void { + this.hidePopup = !this.hidePopup; + this.substanceService.showImagePopup.next(this.hidePopup); + } - autoSave(): void { - setTimeout(() => { - if (this.substanceFormService.autoSave()) { - this.saveDraft(true); - } else { - } - this.autoSave(); - }, this.autoSaveWait); - } + autoSave(): void { + setTimeout(() => { + if (this.substanceFormService.autoSave()) { + this.saveDraft(true); + } else { + } + this.autoSave(); + }, this.autoSaveWait); + } - openModal(templateRef) { + openModal(templateRef) { - const dialogRef = this.dialog.open(templateRef, { - height: '200px', - width: '400px' - }); - this.overlayContainer.style.zIndex = '1002'; + const dialogRef = this.dialog.open(templateRef, { + height: '200px', + width: '400px' + }); + this.overlayContainer.style.zIndex = '1002'; - dialogRef.afterClosed().subscribe(result => { - this.overlayContainer.style.zIndex = null; - }); - } + dialogRef.afterClosed().subscribe(result => { + this.overlayContainer.style.zIndex = null; + }); + } + + showDrafts(): void { + const dialogRef = this.dialog.open(SubstanceDraftsComponent, { + maxHeight: '85%', + width: '70%', + data: {uuid: this.id} + }); + this.overlayContainer.style.zIndex = '1002'; + + dialogRef.afterClosed().subscribe(response => { + this.overlayContainer.style.zIndex = null; - showDrafts(): void { - const dialogRef = this.dialog.open(SubstanceDraftsComponent, { - maxHeight: '85%', - width: '70%', - data: {uuid: this.id} - }); - this.overlayContainer.style.zIndex = '1002'; - dialogRef.afterClosed().subscribe(response => { + if (response) { + this.loadingService.setLoading(true); + // console.log(response.json); + + const read = response.substance; + if (this.id && read.uuid && this.id === read.uuid) { + this.substanceFormService.importSubstance(read, 'update'); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + setTimeout(() => { + this.loadingService.setLoading(false); + this.isLoading = false; this.overlayContainer.style.zIndex = null; + }, 1000); + } else if (response.uuid && response.uuid != 'register') { + const url = '/substances/' + response.uuid + '/edit?action=import&source=draft'; + this.router.navigateByUrl(url, {state: {record: response.substance}}); + } else { + setTimeout(() => { + this.overlayContainer.style.zIndex = null; + this.router.onSameUrlNavigation = 'reload'; + this.loadingService.setLoading(false); + this.router.onSameUrlNavigation = 'reload'; + this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', {state: {record: response.substance}}); + }, 1000); + } + } - if (response) { - this.loadingService.setLoading(true); - // console.log(response.json); - - const read = response.substance; - if (this.id && read.uuid && this.id === read.uuid) { - this.substanceFormService.importSubstance(read, 'update'); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - setTimeout(() => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.overlayContainer.style.zIndex = null; - }, 1000); - } else if (response.uuid && response.uuid != 'register') { - const url = '/substances/' + response.uuid + '/edit?action=import&source=draft'; - this.router.navigateByUrl(url, {state: {record: response.substance}}); - } else { - setTimeout(() => { - this.overlayContainer.style.zIndex = null; - this.router.onSameUrlNavigation = 'reload'; - this.loadingService.setLoading(false); - this.router.onSameUrlNavigation = 'reload'; - this.router.navigateByUrl('/substances/register/' + response.substance.substanceClass + '?action=import', {state: {record: response.substance}}); - - }, 1000); - } - } + let keys = Object.keys(localStorage); + let i = keys.length; + this.draftCount = 0; + this.drafts = []; - let keys = Object.keys(localStorage); - let i = keys.length; - this.draftCount = 0; - this.drafts = []; - - while (i--) { - if (keys[i].startsWith('gsrs-draft-')) { - const entry = JSON.parse(localStorage.getItem(keys[i])); - entry.key = keys[i]; - if (this.id && entry.uuid === this.id) { - this.draftCount++; - } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { - this.draftCount++; - } - this.drafts.push(entry); + while (i--) { + if (keys[i].startsWith('gsrs-draft-')) { + const entry = JSON.parse(localStorage.getItem(keys[i])); + entry.key = keys[i]; + if (this.id && entry.uuid === this.id) { + this.draftCount++; + } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { + this.draftCount++; + } + this.drafts.push(entry); - } - } - }); - } + } + } + }); + } - importDialog(): void { - const dialogRef = this.dialog.open(SubstanceEditImportDialogComponent, { - width: '650px', - autoFocus: false + importDialog(): void { + const dialogRef = this.dialog.open(SubstanceEditImportDialogComponent, { + width: '650px', + autoFocus: false - }); - this.overlayContainer.style.zIndex = '1002'; + }); + this.overlayContainer.style.zIndex = '1002'; - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - if (response) { - // this.overlayContainer.style.zIndex = null; - this.loadingService.setLoading(true); + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + if (response) { + // this.overlayContainer.style.zIndex = null; + this.loadingService.setLoading(true); - // attempting to reload a substance without a router refresh has proven to cause issues with the relationship dropdowns - // There are probably other components affected. There is an issue with subscriptions likely due to some OnInit not firing - - const read = JSON.parse(response); - if (this.id && read.uuid && this.id === read.uuid) { - this.substanceFormService.importSubstance(read, 'update'); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - setTimeout(() => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.overlayContainer.style.zIndex = null; - }, 1000); - /* } else { - if ( read.substanceClass === this.substanceClass) { - this.imported = true; - this.substanceFormService.importSubstance(read); - this.submissionMessage = null; - this.validationMessages = []; - this.showSubmissionMessages = false; - this.loadingService.setLoading(false); - this.isLoading = false;*/ - } else { - setTimeout(() => { - this.overlayContainer.style.zIndex = null; - this.router.onSameUrlNavigation = 'reload'; - this.loadingService.setLoading(false); - this.router.navigateByUrl('/substances/register?action=import', {state: {record: response}}); + // attempting to reload a substance without a router refresh has proven to cause issues with the relationship dropdowns + // There are probably other components affected. There is an issue with subscriptions likely due to some OnInit not firing - }, 1000); - } - } - // } - }); + const read = JSON.parse(response); + if (this.id && read.uuid && this.id === read.uuid) { + this.substanceFormService.importSubstance(read, 'update'); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + setTimeout(() => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.overlayContainer.style.zIndex = null; + }, 1000); + /* } else { + if ( read.substanceClass === this.substanceClass) { + this.imported = true; + this.substanceFormService.importSubstance(read); + this.submissionMessage = null; + this.validationMessages = []; + this.showSubmissionMessages = false; + this.loadingService.setLoading(false); + this.isLoading = false;*/ + } else { + setTimeout(() => { + this.overlayContainer.style.zIndex = null; + this.router.onSameUrlNavigation = 'reload'; + this.loadingService.setLoading(false); + this.router.navigateByUrl('/substances/register?action=import', {state: {record: response}}); + + }, 1000); + } + } + // } + }); + + } + + test() { + this.router.navigated = false; + this.router.navigate([this.router.url]); + } - } - test() { - this.router.navigated = false; - this.router.navigate([this.router.url]); + ngOnInit() { + this.loadingService.setLoading(true); + if (this.configService.configData && this.configService.configData.approvalType) { + this.approvalType = this.configService.configData.approvalType; } + if (this.configService.configData && this.configService.configData.autoSaveWait) { + this.autoSaveWait = this.configService.configData.autoSaveWait; + } + this.isAdmin = this.authService.hasRoles('admin'); + this.isUpdater = this.authService.hasAnyRoles('Updater', 'SuperUpdater'); + this.overlayContainer = this.overlayContainerService.getContainerElement(); + this.imported = false; + const routeSubscription = this.activatedRoute + .params + .subscribe(params => { + const action = this.activatedRoute.snapshot.queryParams['action'] || null; - ngOnInit() { - this.loadingService.setLoading(true); - if (this.configService.configData && this.configService.configData.approvalType) { - this.approvalType = this.configService.configData.approvalType; - } - if (this.configService.configData && this.configService.configData.autoSaveWait) { - this.autoSaveWait = this.configService.configData.autoSaveWait; - } - this.isAdmin = this.authService.hasRoles('admin'); - this.isUpdater = this.authService.hasAnyRoles('Updater', 'SuperUpdater'); - this.overlayContainer = this.overlayContainerService.getContainerElement(); - this.imported = false; - const routeSubscription = this.activatedRoute - .params - .subscribe(params => { - - const action = this.activatedRoute.snapshot.queryParams['action'] || null; - - if (params['id']) { - - if (action && action === 'import' && window.history.state) { - const record = window.history.state; - this.imported = true; - - this.getDetailsFromImport(record.record); - } else { - const id = params['id']; - if (id !== this.id) { - this.id = id; - this.gaService.sendPageView(`Substance Edit`); - const newType = this.activatedRoute.snapshot.queryParamMap.get('switch') || null; - if (newType) { - this.getSubstanceDetails(newType); - } else { - this.getSubstanceDetails(); - } - } - } - } else { - if (action && action === 'import' && window.history.state) { - const record = window.history.state; - this.imported = true; - this.getDetailsFromImport(record.record); - this.gaService.sendPageView(`Substance Register`); - - } else if (this.activatedRoute.snapshot.queryParams['stagingID']) { - this.substanceService.GetStagedRecord(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { - response.uuid = null; - - - if (response._name) { - let name = response._name; - response.names.forEach(current => { - if (current.displayName && current.stdName) { - name = current.stdName; - } - }); - name = name.replace(/<[^>]*>?/gm, ''); - this.titleService.setTitle('Edit - ' + name); - } - if (response) { - this.definitionType = response.definitionType; - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - this.isLoading = false; - this.loadingService.setLoading(false); - }); - - } - }, error => { - this.isLoading = false; - this.loadingService.setLoading(false); - }); - } else { - this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null; - if (this.copy) { - const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null; - this.getPartialSubstanceDetails(this.copy, copyType); - this.gaService.sendPageView(`Substance Register`); - } else { - setTimeout(() => { - this.gaService.sendPageView(`Substance Register`); - this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical'; - this.substanceClass = this.subClass; - this.titleService.setTitle('Register - ' + this.subClass); - this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[this.subClass]); - this.loadingService.setLoading(false); - this.isLoading = false; - - }); - }); - } - } + if (params['id']) { + + if (action && action === 'import' && window.history.state) { + const record = window.history.state; + this.imported = true; + + this.getDetailsFromImport(record.record); + } else { + const id = params['id']; + if (id !== this.id) { + this.id = id; + this.gaService.sendPageView(`Substance Edit`); + const newType = this.activatedRoute.snapshot.queryParamMap.get('switch') || null; + if (newType) { + this.getSubstanceDetails(newType); + } else { + this.getSubstanceDetails(); + } + } + } + } else { + if (action && action === 'import' && window.history.state) { + const record = window.history.state; + this.imported = true; + this.getDetailsFromImport(record.record); + this.gaService.sendPageView(`Substance Register`); + } else if (this.activatedRoute.snapshot.queryParams['stagingID']) { + this.substanceService.GetStagedRecord(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { + response.uuid = null; - } + + if (response._name) { + let name = response._name; + response.names.forEach(current => { + if (current.displayName && current.stdName) { + name = current.stdName; + } + }); + name = name.replace(/<[^>]*>?/gm, ''); + this.titleService.setTitle('Edit - ' + name); + } + if (response) { + this.definitionType = response.definitionType; + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + this.isLoading = false; + this.loadingService.setLoading(false); + }); + + } + }, error => { + this.isLoading = false; + this.loadingService.setLoading(false); }); - this.subscriptions.push(routeSubscription); - const routerSubscription = this.router.events.subscribe((event: RouterEvent) => { - if (event instanceof NavigationStart) { - this.substanceFormService.unloadSubstance(); + } else { + this.copy = this.activatedRoute.snapshot.queryParams['copy'] || null; + if (this.copy) { + const copyType = this.activatedRoute.snapshot.queryParams['copyType'] || null; + this.getPartialSubstanceDetails(this.copy, copyType); + this.gaService.sendPageView(`Substance Register`); + } else { + setTimeout(() => { + this.gaService.sendPageView(`Substance Register`); + this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical'; + this.substanceClass = this.subClass; + this.titleService.setTitle('Register - ' + this.subClass); + this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[this.subClass]); + this.loadingService.setLoading(false); + this.isLoading = false; + + }); + }); } - }); - this.subscriptions.push(routerSubscription); - this.approving = false; - const definitionSubscription = this.substanceFormService.definition.subscribe(response => { - this.definition = response; - setTimeout(() => { - this.canApprove = this.canBeApproved(); - }); - }); - this.subscriptions.push(definitionSubscription); - this.authService.getAuth().pipe(take(1)).subscribe(auth => { - this.user = auth.identifier; - setTimeout(() => { - this.canApprove = this.canBeApproved(); + } - }); - }); - } - isBase64(str) { - let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/; - let result = decodeURIComponent(str); - return base64regex.test(str); - } + } + }); + this.subscriptions.push(routeSubscription); + const routerSubscription = this.router.events.subscribe((event: RouterEvent) => { + if (event instanceof NavigationStart) { + this.substanceFormService.unloadSubstance(); + } + }); + this.subscriptions.push(routerSubscription); + this.approving = false; + const definitionSubscription = this.substanceFormService.definition.subscribe(response => { + this.definition = response; + setTimeout(() => { + this.canApprove = this.canBeApproved(); + }); + }); + this.subscriptions.push(definitionSubscription); + this.authService.getAuth().pipe(take(1)).subscribe(auth => { + this.user = auth.identifier; + setTimeout(() => { + this.canApprove = this.canBeApproved(); + + }); + }); + } - setStructureFromUrl(structure: string, type: string): void { - // check if structureUR is encoded molfile or raw smiles string, then import into form - /*structure = this.gunzip(structure); - structure = decodeURIComponent(structure); - this.substanceFormService.importStructure(structure, 'molfile');*/ - this.substanceFormService.importStructure(structure, 'smiles'); + isBase64(str) { + let base64regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/; + let result = decodeURIComponent(str); + return base64regex.test(str); + } - } + setStructureFromUrl(structure: string, type: string): void { + // check if structureUR is encoded molfile or raw smiles string, then import into form + /*structure = this.gunzip(structure); + structure = decodeURIComponent(structure); + this.substanceFormService.importStructure(structure, 'molfile');*/ + this.substanceFormService.importStructure(structure, 'smiles'); + } - gunzip(t): string { - const gezipedData = Buffer.from(t, 'base64') - const gzipedDataArray = Uint8Array.from(gezipedData); - const ungzipedData = ungzip(gzipedDataArray); - return new TextDecoder().decode(ungzipedData); - } + gunzip(t): string { - getDrafts() { - let keys = Object.keys(localStorage); - let i = keys.length; - this.drafts = []; - let temp = 0; - while (i--) { - if (keys[i].startsWith('gsrs-draft-')) { - const entry = JSON.parse(localStorage.getItem(keys[i])); - entry.key = keys[i]; - if (this.id && entry.uuid === this.id) { - temp++; - // this.draftCount++; - } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { - temp++; - // this.draftCount++; - } - this.drafts.push(entry); + const gezipedData = Buffer.from(t, 'base64') + const gzipedDataArray = Uint8Array.from(gezipedData); + const ungzipedData = ungzip(gzipedDataArray); + return new TextDecoder().decode(ungzipedData); + } - } + getDrafts() { + let keys = Object.keys(localStorage); + let i = keys.length; + this.drafts = []; + let temp = 0; + while (i--) { + if (keys[i].startsWith('gsrs-draft-')) { + const entry = JSON.parse(localStorage.getItem(keys[i])); + entry.key = keys[i]; + if (this.id && entry.uuid === this.id) { + temp++; + // this.draftCount++; + } else if (!this.id && entry.type === (this.activatedRoute.snapshot.params['type']) && entry.uuid === 'register') { + temp++; + // this.draftCount++; } - this.draftCount = temp; + this.drafts.push(entry); + + } } + this.draftCount = temp; + } - ngAfterViewInit(): void { - this.getDrafts(); - // set structure based on smiles or molfile - const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null; - if (structure) { - let decode = decodeURIComponent(structure); - console.log(decode); - setTimeout(() => { - this.setStructureFromUrl(decode, 'molfile'); - }); - } - const json = this.activatedRoute.snapshot.queryParams['jsonStructure'] || null; - // TODO add json support - // this.setStructureFromUrl(structure, 'json'); - if (json) { - let decode = decodeURI(json); - } + ngAfterViewInit(): void { + this.getDrafts(); + // set structure based on smiles or molfile + const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null; + if (structure) { + let decode = decodeURIComponent(structure); + console.log(decode); + setTimeout(() => { + this.setStructureFromUrl(decode, 'molfile'); + }); + } + const json = this.activatedRoute.snapshot.queryParams['jsonStructure'] || null; + // TODO add json support + // this.setStructureFromUrl(structure, 'json'); + if (json) { + let decode = decodeURI(json); + } - const subscription = this.dynamicComponents.changes - .subscribe(() => { - - const total = this.formSections.length; - let finished = 0; - if (!this.forceChange) { - this.loadingService.setLoading(true); - const startTime = new Date(); - this.dynamicComponents.forEach((cRef, index) => { - this.dynamicComponentLoader - .getComponentFactory(this.formSections[index].dynamicComponentName) - .subscribe(componentFactory => { - this.loadingService.setLoading(true); - this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); - this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); - this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { - this.formSections[index].menuLabel = label; - }); - const hiddenStateSubscription = - this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { - this.formSections[index].isHidden = isHidden; - }); - this.subscriptions.push(hiddenStateSubscription); - this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { - this.formSections[index].canAddItem = isList; - if (isList) { - const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { - this.formSections[index].matExpansionPanel.open(); - this.formSections[index].dynamicComponentRef.instance.addItem(); - }); - this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { - aieSubscription.unsubscribe(); - }); - } - }); - this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); - finished++; - if (finished >= total) { - this.loadingService.setLoading(false); - } else { - const currentTime = new Date(); - if (currentTime.getTime() - startTime.getTime() > 12000) { - if (confirm('There was a network error while fetching files, would you like to refresh?')) { - window.location.reload(); - } - } - } - setTimeout(() => { - this.loadingService.setLoading(false); - this.UNII = this.substanceFormService.getUNII(); - }, 5); - - this.updateHiddenFormSections() - }); - }); - // this.loadingService.setLoading(false); + const subscription = this.dynamicComponents.changes + .subscribe(() => { + const total = this.formSections.length; + let finished = 0; + if (!this.forceChange) { + this.loadingService.setLoading(true); + const startTime = new Date(); + this.dynamicComponents.forEach((cRef, index) => { + this.dynamicComponentLoader + .getComponentFactory(this.formSections[index].dynamicComponentName) + .subscribe(componentFactory => { + this.loadingService.setLoading(true); + this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); + this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); + this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { + this.formSections[index].menuLabel = label; + }); + const hiddenStateSubscription = + this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { + this.formSections[index].isHidden = isHidden; + }); + this.subscriptions.push(hiddenStateSubscription); + this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { + this.formSections[index].canAddItem = isList; + if (isList) { + const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { + this.formSections[index].matExpansionPanel.open(); + this.formSections[index].dynamicComponentRef.instance.addItem(); + }); + this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { + aieSubscription.unsubscribe(); + }); + } + }); + this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); + finished++; + if (finished >= total) { + this.loadingService.setLoading(false); + } else { + const currentTime = new Date(); + if (currentTime.getTime() - startTime.getTime() > 12000) { + if (confirm('There was a network error while fetching files, would you like to refresh?')) { + window.location.reload(); + } + } } - subscription.unsubscribe(); setTimeout(() => { + this.loadingService.setLoading(false); + this.UNII = this.substanceFormService.getUNII(); + }, 5); - this.autoSave(); - }, 10000); + this.updateHiddenFormSections() + }); + }); + // this.loadingService.setLoading(false); - }); - } - - openedChange(event: any) { - if (event) { - this.overlayContainer.style.zIndex = '1002'; - } else { - this.overlayContainer.style.zIndex = '1000'; } + subscription.unsubscribe(); + setTimeout(() => { + + this.autoSave(); + }, 10000); + + }); + } + + openedChange(event: any) { + if (event) { + this.overlayContainer.style.zIndex = '1002'; + } else { + this.overlayContainer.style.zIndex = '1000'; } + } - useFeature(feature: any): void { - this.feature = feature.value; - if (this.feature === 'glyco') { - this.glyco(); - } else if (this.feature === 'disulfide') { - this.disulfide(); - } - if (this.feature === 'concept') { - this.concept(); - } - if (this.feature === 'unapprove') { - if (confirm('Are you sure you\'d like to remove the approvalID?')) { - this.substanceFormService.unapproveRecord(); - } - this.feature = undefined; - } - if (this.feature === 'setPrivate') { - this.substanceFormService.setDefinitionPrivate(); - this.feature = undefined; - } - if (this.feature === 'setPublic') { - this.substanceFormService.setDefinitionPublic(); - this.feature = undefined; - } - if (this.feature === 'approved') { - this.substanceFormService.changeStatus('approved'); - this.feature = undefined; - } - if (this.feature === 'pending') { - this.substanceFormService.changeStatus('pending'); - this.feature = undefined; - } - if (this.feature === 'merge') { - this.mergeConcept(); - this.feature = undefined; - } - if (this.feature === 'switch') { - this.definitionSwitch(); - this.feature = undefined; - } - if (this.feature === 'changeApproval') { - this.substanceFormService.changeApproval(); - } - if (this.feature === 'fragment') { - this.openFragmentDialog(); - } + useFeature(feature: any): void { + this.feature = feature.value; + if (this.feature === 'glyco') { + this.glyco(); + } else if (this.feature === 'disulfide') { + this.disulfide(); + } + if (this.feature === 'concept') { + this.concept(); + } + if (this.feature === 'unapprove') { + if (confirm('Are you sure you\'d like to remove the approvalID?')) { + this.substanceFormService.unapproveRecord(); + } + this.feature = undefined; + } + if (this.feature === 'setPrivate') { + this.substanceFormService.setDefinitionPrivate(); + this.feature = undefined; + } + if (this.feature === 'setPublic') { + this.substanceFormService.setDefinitionPublic(); + this.feature = undefined; + } + if (this.feature === 'approved') { + this.substanceFormService.changeStatus('approved'); + this.feature = undefined; + } + if (this.feature === 'pending') { + this.substanceFormService.changeStatus('pending'); + this.feature = undefined; + } + if (this.feature === 'merge') { + this.mergeConcept(); + this.feature = undefined; + } + if (this.feature === 'switch') { + this.definitionSwitch(); + this.feature = undefined; + } + if (this.feature === 'changeApproval') { + this.substanceFormService.changeApproval(); + } + if (this.feature === 'fragment') { + this.openFragmentDialog(); + } if (this.feature === 'regenRefs') { this.regenRefs(); } - } + } - openFragmentDialog(): void { - const dialogRef = this.dialog.open(FragmentWizardComponent, { - width: '70%', - height: '70%' - }); - this.overlayContainer.style.zIndex = '50'; + openFragmentDialog(): void { + const dialogRef = this.dialog.open(FragmentWizardComponent, { + width: '70%', + height: '70%' + }); + this.overlayContainer.style.zIndex = '50'; - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - }); - this.subscriptions.push(dialogSubscription); - } + }); + this.subscriptions.push(dialogSubscription); + } - changeClass(type: any): void { - this.router.navigate(['/substances', this.id, 'edit'], {queryParams: {switch: type.value}}); - this.feature = undefined; - } + changeClass(type: any): void { + this.router.navigate(['/substances', this.id, 'edit'], {queryParams: {switch: type.value}}); + this.feature = undefined; + } - changeStatus(status: any): void { - this.substanceFormService.changeStatus(status); - this.feature = undefined; - } + changeStatus(status: any): void { + this.substanceFormService.changeStatus(status); + this.feature = undefined; + } - concept(): void { - this.substanceFormService.conceptNonApproved(); - this.feature = undefined; - } + concept(): void { + this.substanceFormService.conceptNonApproved(); + this.feature = undefined; + } - glyco(): void { - this.substanceFormService.predictSites(); - this.feature = undefined; - } + glyco(): void { + this.substanceFormService.predictSites(); + this.feature = undefined; + } - disulfide(): void { - this.substanceFormService.disulfideLinks(); - this.feature = undefined; - } + disulfide(): void { + this.substanceFormService.disulfideLinks(); + this.feature = undefined; + } - regenRefs(): void { + regenRefs(): void { this.substanceFormService.referenceScrub(); this.feature = undefined; }ngOnDestroy(): void { - // this.substanceFormService.unloadSubstance(); - this.subscriptions.forEach(subscription => { - subscription.unsubscribe(); - }); - } + // this.substanceFormService.unloadSubstance(); + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } - canBeApproved(): boolean { - const action = this.activatedRoute.snapshot.queryParams['action'] || null; - if (action && action === 'import') { - return false; + canBeApproved(): boolean { + const action = this.activatedRoute.snapshot.queryParams['action'] || null; + if (action && action === 'import') { + return false; + } + const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null; + if (staging && staging.length > 0) { + return false + } + // if config var set and set to 'createdBy then set approval button enabled if user is not creator + if (this.approvalType === 'createdBy') { + if (this.definition && this.definition.createdBy && this.user) { + const creator = this.definition.createdBy; + if (!creator) { + return false; } - const staging = this.activatedRoute.snapshot.queryParams['stagingID'] || null; - if (staging && staging.length > 0) { - return false + if (this.definition.status === 'approved') { + return false; } - // if config var set and set to 'createdBy then set approval button enabled if user is not creator - if (this.approvalType === 'createdBy') { - if (this.definition && this.definition.createdBy && this.user) { - const creator = this.definition.createdBy; - if (!creator) { - return false; - } - if (this.definition.status === 'approved') { - return false; - } - if (creator === this.user) { - return false; - } - return true; - - } - return false; - //default to 'lastEditedBy' if not set in config - } else { - if (this.definition && this.definition.lastEditedBy && this.user) { - const lastEdit = this.definition.lastEditedBy; - if (!lastEdit) { - return false; - } - if (this.definition.status === 'approved') { - return false; + if (creator === this.user) { + return false; + } + return true; - } - if (lastEdit === this.user) { - return false; - } - return true; - } + } + return false; + //default to 'lastEditedBy' if not set in config + } else { + if (this.definition && this.definition.lastEditedBy && this.user) { + const lastEdit = this.definition.lastEditedBy; + if (!lastEdit) { + return false; } + if (this.definition.status === 'approved') { + return false; + } + if (lastEdit === this.user) { + return false; + } + return true; + } } - showJSON(): void { - const dialogRef = this.dialog.open(JsonDialogComponent, { - width: '90%' - }); - this.overlayContainer.style.zIndex = '1002'; + } - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { + showJSON(): void { + const dialogRef = this.dialog.open(JsonDialogComponent, { + width: '90%' + }); + this.overlayContainer.style.zIndex = '1002'; - }); - this.subscriptions.push(dialogSubscription); - } + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe(response => { - getSubstanceDetails(newType?: string): void { - this.substanceService.getSubstanceDetails(this.id).pipe(take(1)).subscribe(response => { - if (response._name) { - let name = response._name; - response.names.forEach(current => { - if (current.displayName && current.stdName) { - name = current.stdName; - } - }); - name = name.replace(/<[^>]*>?/gm, ''); - this.titleService.setTitle('Edit - ' + name); - } - if (response) { - this.definitionType = response.definitionType; - if (newType) { - response = this.substanceFormService.switchType(response, newType); - } - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - }); - } else { - this.handleSubstanceRetrivalError(); - } - this.loadingService.setLoading(false); - this.isLoading = false; - }, error => { - this.gaService.sendException('getSubstanceDetails: error from API call'); - this.loadingService.setLoading(false); - this.isLoading = false; - this.handleSubstanceRetrivalError(); - }); - } + }); + this.subscriptions.push(dialogSubscription); + } - jsonValid(file: any): boolean { - try { - JSON.parse(file); - } catch (e) { - return false; + getSubstanceDetails(newType?: string): void { + this.substanceService.getSubstanceDetails(this.id).pipe(take(1)).subscribe(response => { + if (response._name) { + let name = response._name; + response.names.forEach(current => { + if (current.displayName && current.stdName) { + name = current.stdName; + } + }); + name = name.replace(/<[^>]*>?/gm, ''); + this.titleService.setTitle('Edit - ' + name); + } + if (response) { + this.definitionType = response.definitionType; + if (newType) { + response = this.substanceFormService.switchType(response, newType); } - return true; + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + }); + } else { + this.handleSubstanceRetrivalError(); + } + this.loadingService.setLoading(false); + this.isLoading = false; + }, error => { + this.gaService.sendException('getSubstanceDetails: error from API call'); + this.loadingService.setLoading(false); + this.isLoading = false; + this.handleSubstanceRetrivalError(); + }); + } + + jsonValid(file: any): boolean { + try { + JSON.parse(file); + } catch (e) { + return false; } + return true; + } - getDetailsFromImport(state: any, same?: boolean) { - if (!this.jsonValid(state)) { - state = JSON.stringify(state); - } - if (state && this.jsonValid(state)) { - const response = JSON.parse(state); - same = false; - this.definitionType = response.definitionType; - this.substanceClass = response.substanceClass; - this.status = response.status; - this.substanceFormService.loadSubstance(response.substanceClass, response, 'import').pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - if (!same) { - setTimeout(() => { - this.forceChange = true; - this.dynamicComponents.forEach((cRef, index) => { - this.dynamicComponentLoader - .getComponentFactory(this.formSections[index].dynamicComponentName) - .subscribe(componentFactory => { - this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); - this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); - this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { - this.formSections[index].menuLabel = label; - }); - const hiddenStateSubscription = - this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { - this.formSections[index].isHidden = isHidden; - }); - this.subscriptions.push(hiddenStateSubscription); - this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { - this.formSections[index].canAddItem = isList; - if (isList) { - const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { - this.formSections[index].matExpansionPanel.open(); - this.formSections[index].dynamicComponentRef.instance.addItem(); - }); - this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { - aieSubscription.unsubscribe(); - }); - } - }); - this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); - - this.updateHiddenFormSections() - }); - }); - - this.canApprove = false; + getDetailsFromImport(state: any, same?: boolean) { + if (!this.jsonValid(state)) { + state = JSON.stringify(state); + } + if (state && this.jsonValid(state)) { + const response = JSON.parse(state); + same = false; + this.definitionType = response.definitionType; + this.substanceClass = response.substanceClass; + this.status = response.status; + this.substanceFormService.loadSubstance(response.substanceClass, response, 'import').pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + if (!same) { + setTimeout(() => { + this.forceChange = true; + this.dynamicComponents.forEach((cRef, index) => { + this.dynamicComponentLoader + .getComponentFactory(this.formSections[index].dynamicComponentName) + .subscribe(componentFactory => { + this.formSections[index].dynamicComponentRef = cRef.createComponent(componentFactory); + this.formSections[index].matExpansionPanel = this.matExpansionPanels.find((item, panelIndex) => index === panelIndex); + this.formSections[index].dynamicComponentRef.instance.menuLabelUpdate.pipe(take(1)).subscribe(label => { + this.formSections[index].menuLabel = label; + }); + const hiddenStateSubscription = + this.formSections[index].dynamicComponentRef.instance.hiddenStateUpdate.subscribe(isHidden => { + this.formSections[index].isHidden = isHidden; }); - } - }, error => { - this.loadingService.setLoading(false); + this.subscriptions.push(hiddenStateSubscription); + this.formSections[index].dynamicComponentRef.instance.canAddItemUpdate.pipe(take(1)).subscribe(isList => { + this.formSections[index].canAddItem = isList; + if (isList) { + const aieSubscription = this.formSections[index].addItemEmitter.subscribe(() => { + this.formSections[index].matExpansionPanel.open(); + this.formSections[index].dynamicComponentRef.instance.addItem(); + }); + this.formSections[index].dynamicComponentRef.instance.componentDestroyed.pipe(take(1)).subscribe(() => { + aieSubscription.unsubscribe(); + }); + } + }); + this.formSections[index].dynamicComponentRef.changeDetectorRef.detectChanges(); + + this.updateHiddenFormSections() + }); }); - } else { - this.handleSubstanceRetrivalError(); - this.loadingService.setLoading(false); + this.canApprove = false; + }); } + }, error => { this.loadingService.setLoading(false); - this.isLoading = false; + }); + } else { + this.handleSubstanceRetrivalError(); + this.loadingService.setLoading(false); + } + this.loadingService.setLoading(false); + this.isLoading = false; + } - getPartialSubstanceDetails(uuid: string, type: string): void { - this.substanceService.getSubstanceDetails(uuid).pipe(take(1)).subscribe(response => { - if (response) { - this.substanceClass = response.substanceClass; - this.status = response.status; - delete response.uuid; - if (response._name) { - delete response._name; - } - this.scrub(response, type); - this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections[response.substanceClass]); - this.loadingService.setLoading(false); - this.isLoading = false; - }); - } else { - this.handleSubstanceRetrivalError(); - } - }, error => { - this.gaService.sendException('getSubstanceDetails: error from API call'); - this.loadingService.setLoading(false); - this.isLoading = false; - this.handleSubstanceRetrivalError(); + getPartialSubstanceDetails(uuid: string, type: string): void { + this.substanceService.getSubstanceDetails(uuid).pipe(take(1)).subscribe(response => { + if (response) { + this.substanceClass = response.substanceClass; + this.status = response.status; + delete response.uuid; + if (response._name) { + delete response._name; + } + this.scrub(response, type); + this.substanceFormService.loadSubstance(response.substanceClass, response).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections[response.substanceClass]); + this.loadingService.setLoading(false); + this.isLoading = false; }); - } + } else { + this.handleSubstanceRetrivalError(); + } + }, error => { + this.gaService.sendException('getSubstanceDetails: error from API call'); + this.loadingService.setLoading(false); + this.isLoading = false; + this.handleSubstanceRetrivalError(); + }); + } - private setFormSections(sectionNames: Array = []): void { - this.formSections = []; - sectionNames.forEach(sectionName => { - const formSection = new SubstanceFormSection(sectionName); - /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' && - (formSection.dynamicComponentName === 'substance-form-names' - || formSection.dynamicComponentName === 'substance-form-codes-card'))) { - } */ - this.formSections.push(formSection); - }); - } + private setFormSections(sectionNames: Array = []): void { + this.formSections = []; + sectionNames.forEach(sectionName => { + const formSection = new SubstanceFormSection(sectionName); + /* if (!this.definitionType || !(this.definitionType === 'ALTERNATIVE' && + (formSection.dynamicComponentName === 'substance-form-names' + || formSection.dynamicComponentName === 'substance-form-codes-card'))) { + } */ + this.formSections.push(formSection); + }); + } - private handleSubstanceRetrivalError() { - const notification: AppNotification = { - message: 'The substance you\'re trying to edit doesn\'t exist.', - type: NotificationType.error, - milisecondsToShow: 4000 - }; - this.mainNotificationService.setNotification(notification); - setTimeout(() => { - this.router.navigate(['/substances/register']); - this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { - this.setFormSections(formSections.chemical) - this.loadingService.setLoading(false); - this.isLoading = false; - }); - }, 5000); - } + private handleSubstanceRetrivalError() { + const notification: AppNotification = { + message: 'The substance you\'re trying to edit doesn\'t exist.', + type: NotificationType.error, + milisecondsToShow: 4000 + }; + this.mainNotificationService.setNotification(notification); + setTimeout(() => { + this.router.navigate(['/substances/register']); + this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { + this.setFormSections(formSections.chemical) + this.loadingService.setLoading(false); + this.isLoading = false; + }); + }, 5000); + } - validate(validationType?: string): void { - if (validationType && validationType === 'approval') { - this.approving = true; - } else { - this.approving = false; - } - this.isLoading = true; - this.serverError = false; - this.loadingService.setLoading(true); - this.substanceFormService.validateSubstance().pipe(take(1)).subscribe(results => { - this.submissionMessage = null; - this.validationMessages = results.validationMessages.filter( - message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING' || message.messageType.toUpperCase() === 'NOTICE'); - this.validationResult = results.valid; - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - if (this.validationMessages.length === 0 && results.valid === true) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; - } - if (validationType && validationType === 'approval') { - this.submissionMessage = 'Are you sure you\'d like to approve this substance?'; - } - }, error => { - this.addServerError(error); - this.loadingService.setLoading(false); - this.isLoading = false; - }); + validate(validationType?: string): void { + if (validationType && validationType === 'approval') { + this.approving = true; + } else { + this.approving = false; } + this.isLoading = true; + this.serverError = false; + this.loadingService.setLoading(true); + this.substanceFormService.validateSubstance().pipe(take(1)).subscribe(results => { + this.submissionMessage = null; + this.validationMessages = results.validationMessages.filter( + message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING' || message.messageType.toUpperCase() === 'NOTICE'); + this.validationResult = results.valid; + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + if (this.validationMessages.length === 0 && results.valid === true) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + } + if (validationType && validationType === 'approval') { + this.submissionMessage = 'Are you sure you\'d like to approve this substance?'; + } + }, error => { + this.addServerError(error); + this.loadingService.setLoading(false); + this.isLoading = false; + }); + } - approve(): void { - this.isLoading = true; - this.loadingService.setLoading(true); - this.substanceFormService.approveSubstance().pipe(take(1)).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.openSuccessDialog('approve'); - this.submissionMessage = 'Substance was approved successfully'; - this.showSubmissionMessages = true; - this.validationResult = false; - }, - (error: SubstanceFormResults) => { - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - this.submissionMessage = 'Substance Could not be approved'; - this.addServerError(error.serverError); - setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = null; - }, 10000); - } - ); - } + approve(): void { + this.isLoading = true; + this.loadingService.setLoading(true); + this.substanceFormService.approveSubstance().pipe(take(1)).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.openSuccessDialog('approve'); + this.submissionMessage = 'Substance was approved successfully'; + this.showSubmissionMessages = true; + this.validationResult = false; + }, + (error: SubstanceFormResults) => { + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + this.submissionMessage = 'Substance Could not be approved'; + this.addServerError(error.serverError); + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = null; + }, 10000); + } + ); + } - submitStaging() { - this.substanceFormService.submitStaging(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.showSubmissionMessages = false; - this.submissionMessage = ''; - if (!this.id) { - this.id = response.uuid; - } - this.openSuccessDialog('staging'); - }) - } + submitStaging() { + this.substanceFormService.submitStaging(this.activatedRoute.snapshot.queryParams['stagingID']).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.showSubmissionMessages = false; + this.submissionMessage = ''; + if (!this.id) { + this.id = response.uuid; + } + this.openSuccessDialog('staging'); + }) + } - submit(): void { - this.isLoading = true; - this.approving = false; - this.loadingService.setLoading(true); - if (this.activatedRoute.snapshot.queryParams['stagingID']) { - this.submitStaging(); + submit(): void { + this.isLoading = true; + this.approving = false; + this.loadingService.setLoading(true); + if (this.activatedRoute.snapshot.queryParams['stagingID']) { + this.submitStaging(); + } else { + this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => { + this.loadingService.setLoading(false); + this.isLoading = false; + this.validationMessages = null; + this.showSubmissionMessages = false; + this.submissionMessage = ''; + if (!this.id) { + this.id = response.uuid; + } + this.openSuccessDialog(); + }, (error: SubstanceFormResults) => { + this.showSubmissionMessages = true; + this.loadingService.setLoading(false); + this.isLoading = false; + this.submissionMessage = null; + if (error.validationMessages && error.validationMessages.length) { + this.validationResult = error.isSuccessfull; + this.validationMessages = error.validationMessages + .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'); + this.showSubmissionMessages = true; } else { - this.substanceFormService.saveSubstance().pipe(take(1)).subscribe(response => { - this.loadingService.setLoading(false); - this.isLoading = false; - this.validationMessages = null; - this.showSubmissionMessages = false; - this.submissionMessage = ''; - if (!this.id) { - this.id = response.uuid; - } - this.openSuccessDialog(); - }, (error: SubstanceFormResults) => { - this.showSubmissionMessages = true; - this.loadingService.setLoading(false); - this.isLoading = false; - this.submissionMessage = null; - if (error.validationMessages && error.validationMessages.length) { - this.validationResult = error.isSuccessfull; - this.validationMessages = error.validationMessages - .filter(message => message.messageType.toUpperCase() === 'ERROR' || message.messageType.toUpperCase() === 'WARNING'); - this.showSubmissionMessages = true; - } else { - this.submissionMessage = 'There was a problem with your submission'; - this.addServerError(error.serverError); - setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = null; - }, 8000); - } - }); - + this.submissionMessage = 'There was a problem with your submission'; + this.addServerError(error.serverError); + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = null; + }, 8000); } - } - - dismissValidationMessage(index: number) { - this.validationMessages.splice(index, 1); + }); - if (this.validationMessages.length === 0) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; - } } + } - addServerError(error: any): void { - this.serverError = true; - this.validationResult = false; - this.validationMessages = null; + dismissValidationMessage(index: number) { + this.validationMessages.splice(index, 1); - const message: ValidationMessage = { - actionType: 'server failure', - links: [], - appliedChange: false, - suggestedChange: false, - messageType: 'ERROR', - message: 'Unknown Server Error' - }; - if (error && error.error && error.error.message) { - message.message = 'Server Error ' + (error.status + ': ' || ': ') + error.error.message; - } else if (error && error.error && (typeof error.error) === 'string') { - message.message = 'Server Error ' + (error.status + ': ' || '') + error.error; - } else if (error && error.message) { - message.message = 'Server Error ' + (error.status + ': ' || '') + error.message; - } - this.validationMessages = [message]; - this.showSubmissionMessages = true; + if (this.validationMessages.length === 0) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; } + } - toggleValidation(): void { - this.showSubmissionMessages = !this.showSubmissionMessages; + addServerError(error: any): void { + this.serverError = true; + this.validationResult = false; + this.validationMessages = null; + + const message: ValidationMessage = { + actionType: 'server failure', + links: [], + appliedChange: false, + suggestedChange: false, + messageType: 'ERROR', + message: 'Unknown Server Error' + }; + if (error && error.error && error.error.message) { + message.message = 'Server Error ' + (error.status + ': ' || ': ') + error.error.message; + } else if (error && error.error && (typeof error.error) === 'string') { + message.message = 'Server Error ' + (error.status + ': ' || '') + error.error; + } else if (error && error.message) { + message.message = 'Server Error ' + (error.status + ': ' || '') + error.message; } + this.validationMessages = [message]; + this.showSubmissionMessages = true; + } - dismissAllValidationMessages(): void { - for (let i = this.validationMessages.length - 1; i >= 0; i--) { - if (this.validationMessages[i].messageType !== 'ERROR') { - this.validationMessages.splice(i, 1); - } - } - if (this.validationMessages.length === 0) { - this.submissionMessage = 'Substance is Valid. Would you like to submit?'; - } + toggleValidation(): void { + this.showSubmissionMessages = !this.showSubmissionMessages; + } + + dismissAllValidationMessages(): void { + for (let i = this.validationMessages.length - 1; i >= 0; i--) { + if (this.validationMessages[i].messageType !== 'ERROR') { + this.validationMessages.splice(i, 1); + } } + if (this.validationMessages.length === 0) { + this.submissionMessage = 'Substance is Valid. Would you like to submit?'; + } + } - @HostListener('window:beforeunload', ['$event']) - unloadNotification($event: any) { - if (this.substanceFormService.isSubstanceUpdated) { - $event.returnValue = true; - } + @HostListener('window:beforeunload', ['$event']) + unloadNotification($event: any) { + if (this.substanceFormService.isSubstanceUpdated) { + $event.returnValue = true; } + } //generate new uuid string for following scubber functions - guid() { - function s4() { - return Math.floor((1 + Math.random()) * 0x10000) - .toString(16) - .substring(1); + guid() { + function s4() { + return Math.floor((1 + Math.random()) * 0x10000) + .toString(16) + .substring(1); + + } + return s4() + s4() + '-' + s4() + '-' + s4() + '-' + + s4() + '-' + s4() + s4() + s4(); } - return s4() + s4() + '-' + s4() + '-' + s4() + '-' + - s4() + '-' + s4() + s4() + s4(); - } scrub(oldraw: any, importType?: string): any { const old = oldraw; - const idHolders = defiant.json.search(old, '//*[id]'); - const idMap = {}; - for (let i = 0; i < idHolders.length; i++) { - const oid = idHolders[i].id; - if (idMap[oid]) { - idHolders[i].id = idMap[oid]; - } else { - const nid = this.guid(); - idHolders[i].id = nid; - idMap[oid] = nid; - } - } + const idHolders = defiant.json.search(old, '//*[id]'); + const idMap = {}; + for (let i = 0; i < idHolders.length; i++) { + const oid = idHolders[i].id; + if (idMap[oid]) { + idHolders[i].id = idMap[oid]; + } else { + const nid = this.guid(); + idHolders[i].id = nid; + idMap[oid] = nid; + } + } const uuidHolders = defiant.json.search(old, '//*[uuid]'); const _map = {}; @@ -1089,7 +1090,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy const refs = refHolders[i].references; for (let j = 0; j < refs.length; j++) { const or = refs[j]; - if (typeof or === 'object') { continue; } + if (typeof or === 'object') { + continue; + } refs[j] = _map[or]; } } @@ -1098,11 +1101,11 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy if (this.configService.configData && this.configService.configData.filteredDuplicationCodes) { remove = this.configService.configData.filteredDuplicationCodes; } - remove.forEach(code => { - _.remove(old.codes, { - codeSystem: code - }); - }) + remove.forEach(code => { + _.remove(old.codes, { + codeSystem: code + }); + }) const createHolders = defiant.json.search(old, '//*[created]'); for (let i = 0; i < createHolders.length; i++) { @@ -1113,235 +1116,237 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy delete rec['lastEditedBy']; } - const originHolders = defiant.json.search(old, '//*[originatorUuid]'); - for (let i = 0; i < originHolders.length; i++) { - const rec = originHolders[i]; - delete rec['originatorUuid']; - } + const originHolders = defiant.json.search(old, '//*[originatorUuid]'); + for (let i = 0; i < originHolders.length; i++) { + const rec = originHolders[i]; + delete rec['originatorUuid']; + } - delete old.approvalID; - delete old.approved; - delete old.approvedBy; - old.status = 'pending'; - if ((importType) && (importType === 'definition')) { - old.names = []; - old.codes = []; - old.notes = []; - old.relationships = []; - old.tags = []; + delete old.approvalID; + delete old.approved; + delete old.approvedBy; + old.status = 'pending'; + if ((importType) && (importType === 'definition')) { + old.names = []; + old.codes = []; + old.notes = []; + old.relationships = []; + old.tags = []; + } + delete old['createdBy']; + delete old['created']; + delete old['lastEdited']; + delete old['lastEditedBy']; + delete old['version']; + delete old['$$update']; + delete old['changeReason']; + + + if (true) { + const refSet = {}; + + const refHolders2 = defiant.json.search(old, '//*[references]'); + for (let i = 0; i < refHolders2.length; i++) { + const refs = refHolders2[i].references; + for (let j = 0; j < refs.length; j++) { + const or = refs[j]; + if (typeof or === 'object') { + continue; + } + refSet[or] = true; } - delete old['createdBy']; - delete old['created']; - delete old['lastEdited']; - delete old['lastEditedBy']; - delete old['version']; - delete old['$$update']; - delete old['changeReason']; - - - if (true) { - const refSet = {}; - - const refHolders2 = defiant.json.search(old, '//*[references]'); - for (let i = 0; i < refHolders2.length; i++) { - const refs = refHolders2[i].references; - for (let j = 0; j < refs.length; j++) { - const or = refs[j]; - if (typeof or === 'object') { - continue; - } - refSet[or] = true; - } - } - - const nrefs = _.chain(old.references) - .filter(function (ref) { - if (refSet[ref.uuid]) { - return true; - } else { - return false; - } - }) - .value(); + } - old.references = nrefs; + const nrefs = _.chain(old.references) + .filter(function (ref) { + if (refSet[ref.uuid]) { + return true; + } else { + return false; + } + }) + .value(); - } + old.references = nrefs; - return old; } - openSuccessDialog(type?: string): void { - const dialogRef = this.dialog.open(SubmitSuccessDialogComponent, {data: {'type': type}}); - this.overlayContainer.style.zIndex = '1002'; - - const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe((response?: 'continue' | 'browse' | 'view' | 'staging') => { - - this.substanceFormService.bypassUpdateCheck(); - if (response === 'continue') { - this.router.navigate(['/substances', this.id, 'edit']); - } else if (response === 'browse') { - this.router.navigate(['/browse-substance']); - } else if (response === 'staging') { - this.router.navigate(['/admin/staging-area']); - } else if (response === 'view') { - this.router.navigate(['/substances', this.id]); - } else { - this.submissionMessage = 'Substance was saved successfully!'; - if (type && type === 'approve') { - this.submissionMessage = 'Substance was approved successfully'; - } - this.showSubmissionMessages = true; - this.validationResult = false; - if (type && type === 'staging') { - this.submissionMessage = 'Edits to staged substance were saved successfully'; - } else { - setTimeout(() => { - this.showSubmissionMessages = false; - this.submissionMessage = ''; - this.router.navigate(['/substances', this.id, 'edit']); - }, 3000); - } - } - }); - this.subscriptions.push(dialogSubscription); + return old; + } - } + openSuccessDialog(type?: string): void { + const dialogRef = this.dialog.open(SubmitSuccessDialogComponent, {data: {'type': type}}); + this.overlayContainer.style.zIndex = '1002'; + + const dialogSubscription = dialogRef.afterClosed().pipe(take(1)).subscribe((response?: 'continue' | 'browse' | 'view' | 'staging') => { + + this.substanceFormService.bypassUpdateCheck(); + if (response === 'continue') { + this.router.navigate(['/substances', this.id, 'edit']); + } else if (response === 'browse') { + this.router.navigate(['/browse-substance']); + } else if (response === 'staging') { + this.router.navigate(['/admin/staging-area']); + } else if (response === 'view') { + this.router.navigate(['/substances', this.id]); + } else { + this.submissionMessage = 'Substance was saved successfully!'; + if (type && type === 'approve') { + this.submissionMessage = 'Substance was approved successfully'; + } + this.showSubmissionMessages = true; + this.validationResult = false; + if (type && type === 'staging') { + this.submissionMessage = 'Edits to staged substance were saved successfully'; + } else { + setTimeout(() => { + this.showSubmissionMessages = false; + this.submissionMessage = ''; + this.router.navigate(['/substances', this.id, 'edit']); + }, 3000); + } + } + }); + this.subscriptions.push(dialogSubscription); + } - mergeConcept() { - this.feature = undefined; - const dialogRef = this.dialog.open(MergeConceptDialogComponent, { - width: '900px', data: {uuid: this.id} - }); - this.overlayContainer.style.zIndex = '1002'; - } - definitionSwitch() { - this.feature = undefined; - const dialogRef = this.dialog.open(DefinitionSwitchDialogComponent, { - width: '900px', data: {uuid: this.id}, autoFocus: false - }); - this.overlayContainer.style.zIndex = '1000'; - } + mergeConcept() { + this.feature = undefined; + const dialogRef = this.dialog.open(MergeConceptDialogComponent, { + width: '900px', data: {uuid: this.id} + }); + this.overlayContainer.style.zIndex = '1002'; + } - fixLink(link: string) { - return this.substanceService.oldLinkFix(link); - } + definitionSwitch() { + this.feature = undefined; + const dialogRef = this.dialog.open(DefinitionSwitchDialogComponent, { + width: '900px', data: {uuid: this.id}, autoFocus: false + }); + this.overlayContainer.style.zIndex = '1000'; + } + fixLink(link: string) { + return this.substanceService.oldLinkFix(link); + } - @Output() - toggleSimpleFormChanged(event: MatButtonToggleChange) { - this.simplifiedFormNameToggle = event.source.checked - this.updateHiddenFormSections() - } - updateHiddenFormSections(){ - let s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-definition') - if (s) { - s.isHidden = !this.simplifiedFormNameToggle - } - s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-names') - if (s) { - s.isHidden = !this.simplifiedFormNameToggle - } - s = this.formSections.find(x => x.dynamicComponentName === 'substance-form-simplified-names') - if (s) { - s.isHidden = this.simplifiedFormNameToggle - } - } + @Output() + toggleSimpleFormChanged(event: MatButtonToggleChange) { + this.simplifiedForm = event.source.checked + this.updateHiddenFormSections() + } - saveDraft(auto?: boolean) { - const json = this.substanceFormService.cleanSubstance(); - const time = new Date().getTime(); + updateHiddenFormSections() { + for (const s of this.formSections) { + console.log(s.dynamicComponentName) + if (['substance-form-codes-card', 'substance-form-structure'].includes(s.dynamicComponentName)) { + s.isHidden = false + continue + } - const uuid = json.uuid ? json.uuid : 'register'; - const type = json.substanceClass; - let primary = null; - json.names.forEach(name => { - if (name.displayName) { - primary = name.name; - } - }); - if (!primary && json.names.length > 0) { - primary = json.names[0].name; - } - if (!auto) { - const file = 'gsrs-draft-' + time; - - let draft = { - 'uuid': uuid, - 'date': time, - 'type': type, - 'name': primary, - 'substance': json, - 'auto': false, - 'file': file - } + if (['substance-form-simplified-names'].includes(s.dynamicComponentName)) { + s.isHidden = !this.simplifiedForm + continue + } - localStorage.setItem(file, JSON.stringify(draft)); - this.draftCount++; + s.isHidden = this.simplifiedForm + } + } - } else { - this.getDrafts(); - let autos = this.drafts.filter(opt => { - return opt.auto; - }); - let auto1 = null; - let auto2 = null; - let auto3 = null; - this.drafts.forEach(draft => { - if (draft.auto) { - if (draft.file === 'gsrs-draft-auto1') { - auto1 = draft; - } - if (draft.file === 'gsrs-draft-auto2') { - auto2 = draft; - } - if (draft.file === 'gsrs-draft-auto3') { - auto3 = draft; - } - } - }); - let file = 'gsrs-draft-auto'; + saveDraft(auto?: boolean) { + const json = this.substanceFormService.cleanSubstance(); + const time = new Date().getTime(); - if (!auto1) { - file = 'gsrs-draft-auto1'; - this.draftCount++; + const uuid = json.uuid ? json.uuid : 'register'; + const type = json.substanceClass; + let primary = null; + json.names.forEach(name => { + if (name.displayName) { + primary = name.name; + } + }); + if (!primary && json.names.length > 0) { + primary = json.names[0].name; + } + if (!auto) { + const file = 'gsrs-draft-' + time; + + let draft = { + 'uuid': uuid, + 'date': time, + 'type': type, + 'name': primary, + 'substance': json, + 'auto': false, + 'file': file + } - } else if (!auto2) { - file = 'gsrs-draft-auto2'; - this.draftCount++; + localStorage.setItem(file, JSON.stringify(draft)); + this.draftCount++; + + } else { + this.getDrafts(); + let autos = this.drafts.filter(opt => { + return opt.auto; + }); + let auto1 = null; + let auto2 = null; + let auto3 = null; + this.drafts.forEach(draft => { + if (draft.auto) { + if (draft.file === 'gsrs-draft-auto1') { + auto1 = draft; + } + if (draft.file === 'gsrs-draft-auto2') { + auto2 = draft; + } + if (draft.file === 'gsrs-draft-auto3') { + auto3 = draft; + } + } + }); + let file = 'gsrs-draft-auto'; - } else if (!auto3) { - file = 'gsrs-draft-auto3'; - this.draftCount++; + if (!auto1) { + file = 'gsrs-draft-auto1'; + this.draftCount++; - } else { - if (auto1.date < auto2.date && auto1.date < auto3.date) { - file = 'gsrs-draft-auto1'; - } else if (auto2.date < auto1.date && auto2.date < auto3.date) { - file = 'gsrs-draft-auto2'; - } else { - file = 'gsrs-draft-auto3'; - } - } + } else if (!auto2) { + file = 'gsrs-draft-auto2'; + this.draftCount++; - let draft = { - 'uuid': uuid, - 'date': time, - 'type': type, - 'name': primary, - 'substance': json, - 'auto': true, - 'file': file - } + } else if (!auto3) { + file = 'gsrs-draft-auto3'; + this.draftCount++; - localStorage.setItem(file, JSON.stringify(draft)); + } else { + if (auto1.date < auto2.date && auto1.date < auto3.date) { + file = 'gsrs-draft-auto1'; + } else if (auto2.date < auto1.date && auto2.date < auto3.date) { + file = 'gsrs-draft-auto2'; + } else { + file = 'gsrs-draft-auto3'; + } + } + let draft = { + 'uuid': uuid, + 'date': time, + 'type': type, + 'name': primary, + 'substance': json, + 'auto': true, + 'file': file + } - } + localStorage.setItem(file, JSON.stringify(draft)); } + + + } } From 79ec993ad48391d0df8bf0868343e5c507cdcd88 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 23 Jan 2024 13:31:20 +0000 Subject: [PATCH 06/17] Padding adjustments --- .../substance-form/simplified-names/name-form.component.html | 2 +- .../substance-form/simplified-names/name-form.component.scss | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html index d854af56f..5b055d56c 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.html +++ b/src/app/core/substance-form/simplified-names/name-form.component.html @@ -14,7 +14,7 @@
- + Date: Tue, 23 Jan 2024 13:31:34 +0000 Subject: [PATCH 07/17] Remove empty names codes on validate --- .../core/substance-form/substance-form.component.ts | 8 +++----- src/app/core/substance-form/substance-form.service.ts | 11 ++++++++--- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index ff7421d7a..a67e95a01 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -181,7 +181,6 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy if (response) { this.loadingService.setLoading(true); - // console.log(response.json); const read = response.substance; if (this.id && read.uuid && this.id === read.uuid) { @@ -465,7 +464,6 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy const structure = this.activatedRoute.snapshot.queryParams['importStructure'] || null; if (structure) { let decode = decodeURIComponent(structure); - console.log(decode); setTimeout(() => { this.setStructureFromUrl(decode, 'molfile'); }); @@ -880,6 +878,9 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy } else { this.approving = false; } + + this.substanceFormService.validationMutations() + this.isLoading = true; this.serverError = false; this.loadingService.setLoading(true); @@ -1241,7 +1242,6 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy updateHiddenFormSections() { for (const s of this.formSections) { - console.log(s.dynamicComponentName) if (['substance-form-codes-card', 'substance-form-structure'].includes(s.dynamicComponentName)) { s.isHidden = false continue @@ -1346,7 +1346,5 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy } - - } } diff --git a/src/app/core/substance-form/substance-form.service.ts b/src/app/core/substance-form/substance-form.service.ts index 4897f7a3c..b1caf7d62 100644 --- a/src/app/core/substance-form/substance-form.service.ts +++ b/src/app/core/substance-form/substance-form.service.ts @@ -1522,7 +1522,7 @@ export class SubstanceFormService implements OnDestroy { } else { // service substance loaded improperly } - + } approveSubstance(): Observable { @@ -2005,6 +2005,11 @@ export class SubstanceFormService implements OnDestroy { } + validationMutations(){ + this.privateSubstance.names = this.privateSubstance.names.filter(x=>x.name) + this.privateSubstance.codes = this.privateSubstance.codes.filter(x=>x.code) + this.substanceEmitter.next(this.privateSubstance); + } guid() { function s4() { return Math.floor((1 + Math.random()) * 0x10000) @@ -2024,8 +2029,8 @@ export class SubstanceFormService implements OnDestroy { ref.uuid = nid; }); - const uuidHolders = defiant.json.search(old, '//*[uuid]'); - + const uuidHolders = defiant.json.search(old, '//*[uuid]'); + const refHolders = defiant.json.search(old, '//*[references]'); for (let i = 0; i < refHolders.length; i++) { From b92f050c96c62e4c9cbdf642e129c3bb88dceae3 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 23 Jan 2024 13:37:45 +0000 Subject: [PATCH 08/17] Remove unused css --- .../simplified-names/name-form.component.scss | 52 +------------------ ...-form-simplified-names-card.component.scss | 4 -- .../substance-form/substance-form.module.ts | 4 +- 3 files changed, 4 insertions(+), 56 deletions(-) diff --git a/src/app/core/substance-form/simplified-names/name-form.component.scss b/src/app/core/substance-form/simplified-names/name-form.component.scss index 4d72a1757..277f9e8fb 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.scss +++ b/src/app/core/substance-form/simplified-names/name-form.component.scss @@ -9,7 +9,7 @@ } .resolve { - padding: 0px 20px 20px 0px; + padding: 0 20px 20px 0; color: var(--primary-color); } @@ -17,16 +17,6 @@ height:12px } -.chevron { - width: 20px; - line-height: 67px; - color: var(--chevron-color); -} -.chevron-button { - width: 20px; - -} - .notification-backdrop { position: absolute; top: 0; @@ -69,43 +59,3 @@ flex-grow: 1; } } - -.references-container, .nameorgs-container { - width: 100%; -} - -.column-radio { - ::ng-deep .mat-radio-label { - flex-direction: column-reverse; - } - - ::ng-deep .mat-radio-label-content { - padding-left: 0; - font-size: 11px; - padding-bottom: 4px; - color: var(--dark-label-color); - font-weight: 400; - font-family: Roboto, "Helvetica Neue", sans-serif; - } -} - -.column-checkbox { - ::ng-deep .mat-checkbox-layout { - flex-direction: column-reverse; - align-items: center; - } - - ::ng-deep .mat-checkbox-inner-container { - margin-right: unset; - margin-left: unset; - } - - ::ng-deep .mat-checkbox-layout .mat-checkbox-label { - padding-left: 0; - font-size: 11px; - padding-bottom: 2px; - color: var(--dark-label-color); - font-weight: 400; - font-family: Roboto, "Helvetica Neue", sans-serif; - } -} diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss index 78bddaa28..3712397b3 100644 --- a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.scss @@ -6,10 +6,6 @@ border-top-color: var(--text-color); } -.checkbox { - line-height: 34px; -} - .name { &:nth-child(odd) { diff --git a/src/app/core/substance-form/substance-form.module.ts b/src/app/core/substance-form/substance-form.module.ts index 8fa5a7b9e..2a703fe97 100644 --- a/src/app/core/substance-form/substance-form.module.ts +++ b/src/app/core/substance-form/substance-form.module.ts @@ -86,6 +86,7 @@ import { FragmentWizardComponent } from '@gsrs-core/admin/fragment-wizard/fragme import { SubstanceDraftsComponent } from '@gsrs-core/substance-form/substance-drafts/substance-drafts.component'; import { MatSortModule } from '@angular/material/sort'; import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-display.module'; +import { SimplifiedCodesComponent } from './simplified-codes/simplified-codes.component'; @NgModule({ imports: [ @@ -154,7 +155,8 @@ import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-displa DefinitionSwitchDialogComponent, PreviousReferencesDialogComponent, CopyDisulfideDialogComponent, - SubstanceDraftsComponent + SubstanceDraftsComponent, + SimplifiedCodesComponent ], exports: [ SubstanceFormComponent, From 95549b1eb748d879cdad2c7ae6639699aaa5a5e8 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 23 Jan 2024 16:23:17 +0000 Subject: [PATCH 09/17] Simplified codes card --- .../core/app-dynamic-component-manifests.ts | 6 ++ .../substance-form/form-sections.constant.ts | 1 + .../simplified-codes/code-form.component.html | 37 ++++++++ .../simplified-codes/code-form.component.scss | 76 ++++++++++++++++ .../code-form.component.spec.ts | 25 ++++++ .../simplified-codes/code-form.component.ts | 85 ++++++++++++++++++ ...-form-simplified-codes-card.component.html | 18 ++++ ...-form-simplified-codes-card.component.scss | 41 +++++++++ ...rm-simplified-codes-card.component.spec.ts | 25 ++++++ ...ce-form-simplified-codes-card.component.ts | 90 +++++++++++++++++++ ...tance-form-simplified-codes.module.spec.ts | 13 +++ .../substance-form-simplified-codes.module.ts | 38 ++++++++ .../simplified-names/name-form.component.html | 4 + ...-form-simplified-names-card.component.html | 6 -- .../substance-form.component.html | 1 + .../substance-form.component.scss | 4 + .../substance-form.component.ts | 7 +- .../substance-form/substance-form.module.ts | 5 +- 18 files changed, 469 insertions(+), 13 deletions(-) create mode 100644 src/app/core/substance-form/simplified-codes/code-form.component.html create mode 100644 src/app/core/substance-form/simplified-codes/code-form.component.scss create mode 100644 src/app/core/substance-form/simplified-codes/code-form.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-codes/code-form.component.ts create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts create mode 100644 src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts diff --git a/src/app/core/app-dynamic-component-manifests.ts b/src/app/core/app-dynamic-component-manifests.ts index f6c92bfd4..af644cbd0 100644 --- a/src/app/core/app-dynamic-component-manifests.ts +++ b/src/app/core/app-dynamic-component-manifests.ts @@ -261,6 +261,12 @@ export const dynamicComponentManifests: LazyLoadedComponentManifest[] = [ loadChildren: () => import('./substance-form/codes/substance-form-codes.module') .then(m => m.SubstanceFormCodesModule), }, + { + componentId: 'substance-form-simplified-codes-card', + path: 'substance-form-simplified-codes-card', + loadChildren: () => import('./substance-form/simplified-codes/substance-form-simplified-codes.module') + .then(m => m.SubstanceFormSimplifiedCodesModule), + }, { componentId: 'substance-form-relationships', path: 'substance-form-relationships', diff --git a/src/app/core/substance-form/form-sections.constant.ts b/src/app/core/substance-form/form-sections.constant.ts index 6d0546709..fdbb587f6 100644 --- a/src/app/core/substance-form/form-sections.constant.ts +++ b/src/app/core/substance-form/form-sections.constant.ts @@ -6,6 +6,7 @@ export const formSections: { [substanceType: string]: Array } = { 'substance-form-structure', 'substance-form-moieties', 'substance-form-codes-card', + 'substance-form-simplified-codes-card', 'substance-form-relationships', 'substance-form-notes', 'substance-form-properties', diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.html b/src/app/core/substance-form/simplified-codes/code-form.component.html new file mode 100644 index 000000000..6fabfbbc5 --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/code-form.component.html @@ -0,0 +1,37 @@ +
+
+ Deleted  + +
+ +
+
+ +
+ + + +
+
+ Code System Type +
+
+ {{ codeSystemType }} +
+
+ + + + + +
+ + +
+
+
diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.scss b/src/app/core/substance-form/simplified-codes/code-form.component.scss new file mode 100644 index 000000000..50708c52d --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/code-form.component.scss @@ -0,0 +1,76 @@ +.code-form-container { + padding: 10px 3px 4px 3px; + position: relative; +} + +.collapse { + padding: 10px 5px 6px 5px; + position: relative; +} + +.resolve { + padding: 0 20px 20px 0; + color: var(--primary-color); +} + +.notification-backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + z-index: 10; + background-color: var(--notif-backdrop-bg-color); + justify-content: center; + align-items: center; + font-size: 30px; + font-weight: bold; + color: var(--notif-backdrop-color); +} + +.form-row { + display: flex; + justify-content: space-between; + align-items: flex-end; + + .delete-container { + padding: 0 10px 8px 0; + } + + .code-system, .code-system-type, .type { + flex-grow: 3; + padding-right: 15px; + } + + .code { + flex-grow: 1; + } + + .code-text, .url { + flex-grow: 1; + } +} + +.key-value-pair { + display: flex; + flex-direction: column; + align-self: flex-start; + + .key { + font-size: 11px; + padding-bottom: 3.5px; + line-height: 11px; + color: var(--dark-label-color); + font-weight: 400; + font-family: Roboto, "Helvetica Neue", sans-serif; + } + + .value { + font-size: 15.5px; + } +} + +.references-container { + width: 100%; +} diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts b/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts new file mode 100644 index 000000000..8b52f5c3f --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/code-form.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CodeFormComponent } from './code-form.component'; + +describe('CodeFormComponent', () => { + let component: CodeFormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CodeFormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CodeFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.ts b/src/app/core/substance-form/simplified-codes/code-form.component.ts new file mode 100644 index 000000000..86ea7a90e --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/code-form.component.ts @@ -0,0 +1,85 @@ +import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; +import { SubstanceCode } from '@gsrs-core/substance'; +import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary'; +import { VocabularyTerm } from '@gsrs-core/controlled-vocabulary'; +import { UtilsService } from '@gsrs-core/utils'; + +@Component({ + selector: 'app-code-form', + templateUrl: './code-form.component.html', + styleUrls: ['./code-form.component.scss'] +}) +export class CodeFormComponent implements OnInit { + private privateCode: SubstanceCode; + @Output() codeDeleted = new EventEmitter(); + codeSystemList: Array = []; + codeSystemDictionary: { [termValue: string]: VocabularyTerm }; + codeSystemType: string; + codeTypeList: Array = []; + deleteTimer: any; + + constructor( + private cvService: ControlledVocabularyService, + private utilsService: UtilsService + ) { } + + ngOnInit() { + this.getVocabularies(); + } + + @Input() + set code(code: SubstanceCode) { + this.privateCode = code; + } + + get code(): SubstanceCode { + return this.privateCode; + } + + getVocabularies(): void { + this.cvService.getDomainVocabulary('CODE_SYSTEM', 'CODE_TYPE').subscribe(response => { + this.codeSystemList = response['CODE_SYSTEM'].list; + this.codeSystemDictionary = response['CODE_SYSTEM'].dictionary; + this.setCodeSystemType(); + this.codeTypeList = response['CODE_TYPE'].list; + }); + } + + deleteCode(): void { + this.privateCode.$$deletedCode = this.utilsService.newUUID(); + if (!this.privateCode.codeSystem + && !this.privateCode.type + && !this.privateCode.code + ) { + this.deleteTimer = setTimeout(() => { + this.codeDeleted.emit(this.privateCode); + }, 2000); + } + } + + trimWhitespace(value) { + this.code.url = value; + this.privateCode.url = this.privateCode.url.replace(/[\u200A|\u2009|\u2006|\u2008]/g, ' ').trim(); + this.privateCode.url = value.trim().trim().trim(); + } + + undoDelete(): void { + clearTimeout(this.deleteTimer); + delete this.privateCode.$$deletedCode; + } + + setCodeSystemType(event?: any): void { + if (event) { + this.code.codeSystem = event; + } + if (this.privateCode != null && this.codeSystemDictionary != null) { + this.codeSystemType = this.codeSystemDictionary[this.privateCode.codeSystem] + && this.codeSystemDictionary[this.privateCode.codeSystem].systemCategory || ''; + } + } + + updateAccess(access: Array): void { + this.code.access = access; + } + +} diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html new file mode 100644 index 000000000..dee60caa7 --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.html @@ -0,0 +1,18 @@ +
+ + + + +
+ + + +
+ + +
+ + diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss new file mode 100644 index 000000000..be13a5bc0 --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.scss @@ -0,0 +1,41 @@ +.mat-divider.mat-divider-inset { + margin-left: 0; +} + +.mat-divider { + border-top-color: var(--text-color); +} + +.code { + + &:nth-child(odd) { + background-color: var(--nth-child-color-2); + + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-3); + } + } + } + + &:nth-child(even) { + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-1); + } + } + } + + ::ng-deep { + .mat-expansion-panel, .mat-table, textarea { + background-color: var(--regular-transparent-color); + } + } +} + +.search { + width: 400px; + max-width: 100%; +} diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts new file mode 100644 index 000000000..00636964b --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubstanceFormSimplifiedCodesCardComponent } from './substance-form-simplified-codes-card.component'; + +describe('SubstanceFormCodesCardComponent', () => { + let component: SubstanceFormSimplifiedCodesCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubstanceFormSimplifiedCodesCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubstanceFormSimplifiedCodesCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts new file mode 100644 index 000000000..73ea10416 --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes-card.component.ts @@ -0,0 +1,90 @@ +import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core'; +import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list'; +import { SubstanceFormService } from '../substance-form.service'; +import { SubstanceCode } from '@gsrs-core/substance/substance.model'; +import { ScrollToService } from '../../scroll-to/scroll-to.service'; +import { GoogleAnalyticsService } from '@gsrs-core/google-analytics'; +import { Subscription } from 'rxjs'; +import { SubstanceFormCodesService } from '../codes/substance-form-codes.service'; + +@Component({ + selector: 'app-substance-form-codes-card', + templateUrl: './substance-form-simplified-codes-card.component.html', + styleUrls: ['./substance-form-simplified-codes-card.component.scss'] +}) +export class SubstanceFormSimplifiedCodesCardComponent extends SubstanceCardBaseFilteredList + implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList { + + codes: Array; + private subscriptions: Array = []; + pageSize = 10; + expanded = true; + validate = false; + + constructor( + private substanceFormCodesService: SubstanceFormCodesService, + private substanceFormService: SubstanceFormService, + private scrollToService: ScrollToService, + public gaService: GoogleAnalyticsService + ) { + super(gaService); + this.analyticsEventCategory = 'substance form codes'; + } + + ngOnInit() { + this.menuLabelUpdate.emit('Codes'); + } + + collapse() { + this.expanded = !this.expanded; + } + + ngAfterViewInit() { + const definitionSubscription = this.substanceFormService.definition.subscribe( level => { + if (level.definitionType && level.definitionType === 'ALTERNATIVE') { + // this.canAddItemUpdate.emit(false); + this.hiddenStateUpdate.emit(true); + } else { + this.canAddItemUpdate.emit(true); + this.hiddenStateUpdate.emit(false); + } + }); + this.subscriptions.push(definitionSubscription); + const codesSubscription = this.substanceFormCodesService.substanceCodes.subscribe(codes => { + this.codes = codes; + this.filtered = codes; + const searchSubscription = this.searchControl.valueChanges.subscribe(value => { + this.filterList(value, this.codes, this.analyticsEventCategory); + }, error => { + console.log(error); + }); + this.subscriptions.push(searchSubscription); + this.page = 0; + this.pageChange(); + }); + this.subscriptions.push(codesSubscription); + } + + ngOnDestroy() { + this.componentDestroyed.emit(); + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } + + addItem(): void { + this.addCode(); + } + + addCode(): void { + this.substanceFormCodesService.addSubstanceCode(); + setTimeout(() => { + this.scrollToService.scrollToElement(`substance-code-0`, 'center'); + }); + } + + deleteCode(code: SubstanceCode): void { + this.substanceFormCodesService.deleteSubstanceCode(code); + } + +} diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts new file mode 100644 index 000000000..f6bce4a3a --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.spec.ts @@ -0,0 +1,13 @@ +import { SubstanceFormSimplifiedCodesModule } from './substance-form-simplified-codes.module'; + +describe('SubstanceFormCodesModule', () => { + let substanceFormCodesModule: SubstanceFormSimplifiedCodesModule; + + beforeEach(() => { + substanceFormCodesModule = new SubstanceFormSimplifiedCodesModule(); + }); + + it('should create an instance', () => { + expect(substanceFormCodesModule).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts new file mode 100644 index 000000000..5414f38a7 --- /dev/null +++ b/src/app/core/substance-form/simplified-codes/substance-form-simplified-codes.module.ts @@ -0,0 +1,38 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SubstanceFormSimplifiedCodesCardComponent } from './substance-form-simplified-codes-card.component'; +import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader'; +import { SubstanceFormModule } from '../substance-form.module'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { ScrollToModule } from '@gsrs-core/scroll-to'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatInputModule } from '@angular/material/input'; +import { CodeFormComponent } from './code-form.component'; +import { MatTooltipModule } from '@angular/material/tooltip'; + +@NgModule({ + imports: [ + CommonModule, + DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedCodesCardComponent), + SubstanceFormModule, + MatDividerModule, + MatIconModule, + MatButtonModule, + ScrollToModule, + MatFormFieldModule, + ReactiveFormsModule, + FormsModule, + MatPaginatorModule, + MatInputModule, + MatTooltipModule + ], + declarations: [ + SubstanceFormSimplifiedCodesCardComponent, + CodeFormComponent + ] +}) +export class SubstanceFormSimplifiedCodesModule { } diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html index 5b055d56c..4f05d57c6 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.html +++ b/src/app/core/substance-form/simplified-names/name-form.component.html @@ -24,6 +24,10 @@ (valueChange)="name.type = $event"> +
+ + +
diff --git a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html index a62183e1b..3b160412e 100644 --- a/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html +++ b/src/app/core/substance-form/simplified-names/substance-form-simplified-names-card.component.html @@ -15,9 +15,3 @@ - - - - - - diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html index a87671fdd..0b6cafeab 100644 --- a/src/app/core/substance-form/substance-form.component.html +++ b/src/app/core/substance-form/substance-form.component.html @@ -198,6 +198,7 @@
Date: Thu, 25 Jan 2024 09:38:20 +0000 Subject: [PATCH 10/17] No default name type --- .../simplified-codes/code-form.component.html | 8 -------- src/app/core/substance-form/substance-form.service.ts | 5 +++-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.html b/src/app/core/substance-form/simplified-codes/code-form.component.html index 6fabfbbc5..7b53abc28 100644 --- a/src/app/core/substance-form/simplified-codes/code-form.component.html +++ b/src/app/core/substance-form/simplified-codes/code-form.component.html @@ -16,14 +16,6 @@ -
-
- Code System Type -
-
- {{ codeSystemType }} -
-
diff --git a/src/app/core/substance-form/substance-form.service.ts b/src/app/core/substance-form/substance-form.service.ts index b1caf7d62..65998b044 100644 --- a/src/app/core/substance-form/substance-form.service.ts +++ b/src/app/core/substance-form/substance-form.service.ts @@ -104,14 +104,15 @@ export class SubstanceFormService implements OnDestroy { } else { // the second case happens in the forms sometimes but really shouldn't if (substanceClass === 'chemical' || substanceClass === 'structure') { + // TODO: make this loading specific to spiplified form if possible. this.privateSubstance = { substanceClass: 'chemical', references: [], - names: [], + names: [{name:""}], structure: { molfile: '\n\n\n 0 0 0 0 0 0 999 V2000\nM END' }, - codes: [], + codes: [{codeSystem:"CAS"}], relationships: [], properties: [] }; From fab2a8cb6e7067fccc47c99b9c68bd74d139d0d6 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Thu, 25 Jan 2024 15:14:37 +0000 Subject: [PATCH 11/17] Simplified form component --- .../core/app-dynamic-component-manifests.ts | 6 + .../substance-form/form-sections.constant.ts | 1 + .../substance-form-references.module.ts | 9 +- .../reference-form.component.html | 20 +++ .../reference-form.component.scss | 88 +++++++++++ .../reference-form.component.spec.ts | 25 ++++ .../reference-form.component.ts | 138 ++++++++++++++++++ ...-simplified-references-card.component.html | 17 +++ ...-simplified-references-card.component.scss | 35 +++++ ...mplified-references-card.component.spec.ts | 25 ++++ ...rm-simplified-references-card.component.ts | 76 ++++++++++ ...-simplified-references-card.module.spec.ts | 13 ++ ...-form-simplified-references.module.spec.ts | 13 ++ ...tance-form-simplified-references.module.ts | 36 +++++ .../substance-form.component.ts | 2 +- .../substance-form/substance-form.module.ts | 5 +- 16 files changed, 502 insertions(+), 7 deletions(-) create mode 100644 src/app/core/substance-form/simplified-references/reference-form.component.html create mode 100644 src/app/core/substance-form/simplified-references/reference-form.component.scss create mode 100644 src/app/core/substance-form/simplified-references/reference-form.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-references/reference-form.component.ts create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts create mode 100644 src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts diff --git a/src/app/core/app-dynamic-component-manifests.ts b/src/app/core/app-dynamic-component-manifests.ts index af644cbd0..542acd5db 100644 --- a/src/app/core/app-dynamic-component-manifests.ts +++ b/src/app/core/app-dynamic-component-manifests.ts @@ -231,6 +231,12 @@ export const dynamicComponentManifests: LazyLoadedComponentManifest[] = [ loadChildren: () => import('./substance-form/references/substance-form-references.module') .then(m => m.SubstanceFormReferencesModule), }, + { + componentId: 'substance-form-simplified-references', + path: 'substance-form-simplified-references', + loadChildren: () => import('./substance-form/simplified-references/substance-form-simplified-references.module') + .then(m => m.SubstanceFormSimplifiedReferencesModule), + }, { componentId: 'substance-form-names', path: 'substance-form-names', diff --git a/src/app/core/substance-form/form-sections.constant.ts b/src/app/core/substance-form/form-sections.constant.ts index fdbb587f6..dcf39c6ce 100644 --- a/src/app/core/substance-form/form-sections.constant.ts +++ b/src/app/core/substance-form/form-sections.constant.ts @@ -11,6 +11,7 @@ export const formSections: { [substanceType: string]: Array } = { 'substance-form-notes', 'substance-form-properties', 'substance-form-references', + 'substance-form-simplified-references', 'substance-form-change-reason' ], protein: [ diff --git a/src/app/core/substance-form/references/substance-form-references.module.ts b/src/app/core/substance-form/references/substance-form-references.module.ts index fb56b6a33..85a7d158a 100644 --- a/src/app/core/substance-form/references/substance-form-references.module.ts +++ b/src/app/core/substance-form/references/substance-form-references.module.ts @@ -1,16 +1,17 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SubstanceFormReferencesCardComponent } from './substance-form-references-card.component'; -import { DynamicComponentLoaderModule } from '../../dynamic-component-loader/dynamic-component-loader.module'; +import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader'; import { SubstanceFormModule } from '../substance-form.module'; import { MatDividerModule } from '@angular/material/divider'; -import { ScrollToModule } from '../../scroll-to/scroll-to.module'; +import { ScrollToModule } from '@gsrs-core/scroll-to'; import { MatIconModule } from '@angular/material/icon'; import { MatButtonModule } from '@angular/material/button'; import { MatFormFieldModule } from '@angular/material/form-field'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatInputModule } from '@angular/material/input'; +import {ReferenceFormComponent} from "./reference-form.component"; @NgModule({ imports: [ @@ -27,8 +28,12 @@ import { MatInputModule } from '@angular/material/input'; MatPaginatorModule, MatInputModule ], + exports:[ + ReferenceFormComponent, + ], declarations: [ SubstanceFormReferencesCardComponent, + ReferenceFormComponent ] }) export class SubstanceFormReferencesModule { } diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.html b/src/app/core/substance-form/simplified-references/reference-form.component.html new file mode 100644 index 000000000..20f322b4d --- /dev/null +++ b/src/app/core/substance-form/simplified-references/reference-form.component.html @@ -0,0 +1,20 @@ +
+
+ Deleted  + +
+
+ + + + + +
+ + +
+
+
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.scss b/src/app/core/substance-form/simplified-references/reference-form.component.scss new file mode 100644 index 000000000..8a098eee0 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/reference-form.component.scss @@ -0,0 +1,88 @@ +.reference-form-container { + padding: 10px 3px 4px 3px; + position: relative; +} + +.notification-backdrop { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + display: flex; + z-index: 10; + background-color: var(--notif-backdrop-bg-color); + justify-content: center; + align-items: center; + font-size: 30px; + font-weight: bold; + color: var(--notif-backdrop-color); +} + +.form-row { + display: flex; + justify-content: space-between; + padding: 0 10px; + align-items: flex-end; + + .checkbox-container { + padding-bottom: 18px; + } +} + +.form-actions { + justify-content: flex-start; + margin: 5px 0 10px 0; +} + +.source-type, .citation, .url { + width: 30%; +} + +.tags { + width: 40%; +} + +.previous-ref { + margin: auto; + width: 90%; +} + + +.spinner { + height: 20px; + width: 20px; +} + +.loading-container { + display: flex; + text-align: center; + height: 26px; +} + +.spinner-container { + height: 20px; + width: 20px; + margin-right: 5px; + +} + +.progress-spinner { + margin: auto; +} + + +.mat-progress-spinner { + height: 20px !important; + width: 20px !important; + + ::ng-deep svg { + height: 20px !important; + width: 20px !important; + } + + svg { + height: 20px !important; + width: 20px !important; + } +} diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts b/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts new file mode 100644 index 000000000..23eb8ea47 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/reference-form.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ReferenceFormComponent } from './reference-form.component'; + +describe('ReferenceFormComponent', () => { + let component: ReferenceFormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ReferenceFormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ReferenceFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.ts b/src/app/core/substance-form/simplified-references/reference-form.component.ts new file mode 100644 index 000000000..7fdd6ee29 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/reference-form.component.ts @@ -0,0 +1,138 @@ +import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter, OnDestroy } from '@angular/core'; +import { SubstanceReference } from '@gsrs-core/substance'; +import { ControlledVocabularyService } from '@gsrs-core/controlled-vocabulary'; +import { UtilsService } from '@gsrs-core/utils'; +import { SubstanceFormService } from '../substance-form.service'; +import { OverlayContainer } from '@angular/cdk/overlay'; +import { MatDialog } from '@angular/material/dialog'; +import { PreviousReferencesDialogComponent } from '@gsrs-core/substance-form/references/previous-references/previous-references-dialog/previous-references-dialog.component'; +import { Subscription } from 'rxjs'; +import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/references/substance-form-references.service"; + +@Component({ + selector: 'app-reference-form', + templateUrl: './reference-form.component.html', + styleUrls: ['./reference-form.component.scss'] +}) +export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy { + @Input() reference: SubstanceReference; + @Output() referenceDeleted = new EventEmitter(); + @Input() hideDelete = false; + private overlayContainer: HTMLElement; + deleteTimer: any; + showPrev = false; + loading = false; + error = false; + private subscriptions: Array = []; + constructor( + private cvService: ControlledVocabularyService, + private utilsService: UtilsService, + private substanceFormReferencesService: SubstanceFormReferencesService, + private dialog: MatDialog, + private overlayContainerService: OverlayContainer, + private substanceFormService: SubstanceFormService + ) { } + + ngOnInit() { + this.overlayContainer = this.overlayContainerService.getContainerElement(); + + } + + ngAfterViewInit() { + } + + ngOnDestroy() { + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } + + updateAccess(access: Array): void { + this.reference.access = access; + } + + updateTags(tags: Array): void { + this.reference.tags = tags; + } + + get isValid(): boolean { + if (this.reference.docType + && this.reference.citation) { + return true; + } else { + return false; + } + } + + deleteReference(): void { + this.reference.$$deletedCode = this.utilsService.newUUID(); + if (!this.reference.docType + && !this.reference.citation + && !this.reference.uploadedFile + ) { + this.deleteTimer = setTimeout(() => { + this.referenceDeleted.emit(this.reference); + }, 2000); + } else { + this.substanceFormReferencesService.emitReferencesUpdate(); + } + } + + undoDelete(): void { + clearTimeout(this.deleteTimer); + delete this.reference.$$deletedCode; + this.substanceFormReferencesService.emitReferencesUpdate(); + } + + fileSelected(file: File): void { + this.error = false; + if (file != null) { + this.loading = true; + this.utilsService.uploadFile(file).subscribe(response => { + this.reference.uploadedFile = response; + this.loading = false; + + }, error => { + this.loading = false; + this.error = true; + + }); + } + } + + openPreviousDialog(): void { + const dialogRef = this.dialog.open(PreviousReferencesDialogComponent, { + data: {}, + width: '990px' + }); + this.overlayContainer.style.zIndex = '1002'; + const dialogSubscription = dialogRef.afterClosed().subscribe(ref => { + this.overlayContainer.style.zIndex = null; + if (ref) { + if (ref.citation && ref.citation !== '' && ref.docType && ref.docType !== '') { + this.fillReference(ref); + } + } + }); + this.subscriptions.push(dialogSubscription); + } + + fillReference(ref: SubstanceReference) { + this.showPrev = false; + this.reference.access = ref.access; + this.reference.citation = ref.citation; + this.reference.deprecated = ref.deprecated; + this.reference.docType = ref.docType; + this.reference.publicDomain = ref.publicDomain; + this.reference.tags = ref.tags; + this.reference.uploadedFile = ref.uploadedFile; + this.reference.url = ref.url || null; + this.reference.id = ref.id || null; + } + + downloadDocument(url: string): void { + this.substanceFormService.bypassUpdateCheck(); + window.open(url); + } + +} diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html new file mode 100644 index 000000000..35b20b58e --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.html @@ -0,0 +1,17 @@ +
+ + + + +
+ + +
+ + +
+ + + diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss new file mode 100644 index 000000000..faa967e92 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.scss @@ -0,0 +1,35 @@ +.mat-divider.mat-divider-inset { + margin-left: 0; +} + +.mat-divider { + border-top-color: var(--text-color); +} + +.reference { + + &:nth-child(odd) { + background-color: var(--nth-child-color-2); + + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-3); + } + } + } + + &:nth-child(even) { + ::ng-deep { + + .mat-expansion-panel:not(.mat-expanded):not([aria-disabled="true"]) .mat-expansion-panel-header:hover { + background-color: var(--nth-child-color-1); + } + } + } +} + +.search { + width: 400px; + max-width: 100%; +} diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts new file mode 100644 index 000000000..5d3c469d1 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubstanceFormSimplifiedReferencesCardComponent } from './substance-form-simplified-references-card.component'; + +describe('SubstanceFormSimplifiedReferencesCardComponent', () => { + let component: SubstanceFormSimplifiedReferencesCardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubstanceFormSimplifiedReferencesCardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubstanceFormSimplifiedReferencesCardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts new file mode 100644 index 000000000..469ffb8d1 --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts @@ -0,0 +1,76 @@ +import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core'; +import { SubstanceCardBaseFilteredList, SubstanceCardBaseList } from '../base-classes/substance-form-base-filtered-list'; +import { SubstanceReference } from '@gsrs-core/substance/substance.model'; +import { MatDialog } from '@angular/material/dialog'; +import { ScrollToService } from '../../scroll-to/scroll-to.service'; +import { GoogleAnalyticsService } from '@gsrs-core/google-analytics'; +import { Subscription } from 'rxjs'; +import { OverlayContainer } from '@angular/cdk/overlay'; +import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/references/substance-form-references.service"; + +@Component({ + selector: 'app-substance-form-references-card', + templateUrl: './substance-form-simplified-references-card.component.html', + styleUrls: ['./substance-form-simplified-references-card.component.scss'] +}) +export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCardBaseFilteredList + implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList { + references: Array; + private subscriptions: Array = []; + private overlayContainer: HTMLElement; + + constructor( + private substanceFormReferencesService: SubstanceFormReferencesService, + private dialog: MatDialog, + private scrollToService: ScrollToService, + public gaService: GoogleAnalyticsService, + private overlayContainerService: OverlayContainer + ) { + super(gaService); + this.analyticsEventCategory = 'substance form references'; + } + + ngOnInit() { + this.canAddItemUpdate.emit(true); + this.menuLabelUpdate.emit('References'); + this.overlayContainer = this.overlayContainerService.getContainerElement(); + } + + ngAfterViewInit() { + const referencesSubscription = this.substanceFormReferencesService.substanceReferences.subscribe(references => { + this.references = references; + this.filtered = references; + const searchSubscription = this.searchControl.valueChanges.subscribe(value => { + this.filterList(value, this.references, this.analyticsEventCategory); + }, error => { + console.log(error); + }); + this.subscriptions.push(searchSubscription); + this.page = 0; + this.pageChange(); + }); + this.subscriptions.push(referencesSubscription); + } + + ngOnDestroy() { + this.componentDestroyed.emit(); + this.subscriptions.forEach(subscription => { + subscription.unsubscribe(); + }); + } + addItem(): void { + this.addSubstanceReference(); + } + + addSubstanceReference(): void { + const addedReference = this.substanceFormReferencesService.addSubstanceReference({}); + setTimeout(() => { + this.scrollToService.scrollToElement(addedReference.uuid, 'center'); + }, 10); + } + + deleteReference(reference: SubstanceReference): void { + this.substanceFormReferencesService.deleteSubstanceReference(reference); + } + +} diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts new file mode 100644 index 000000000..e21e0c09e --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.module.spec.ts @@ -0,0 +1,13 @@ +import { SubstanceFormSimplifiedReferencesModule } from './substance-form-simplified-references.module'; + +describe('SubstanceFormSimplifiedReferencesModule', () => { + let substanceFormReferencesModule: SubstanceFormSimplifiedReferencesModule; + + beforeEach(() => { + substanceFormReferencesModule = new SubstanceFormSimplifiedReferencesModule(); + }); + + it('should create an instance', () => { + expect(substanceFormReferencesModule).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts new file mode 100644 index 000000000..e21e0c09e --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.spec.ts @@ -0,0 +1,13 @@ +import { SubstanceFormSimplifiedReferencesModule } from './substance-form-simplified-references.module'; + +describe('SubstanceFormSimplifiedReferencesModule', () => { + let substanceFormReferencesModule: SubstanceFormSimplifiedReferencesModule; + + beforeEach(() => { + substanceFormReferencesModule = new SubstanceFormSimplifiedReferencesModule(); + }); + + it('should create an instance', () => { + expect(substanceFormReferencesModule).toBeTruthy(); + }); +}); diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts new file mode 100644 index 000000000..6549878da --- /dev/null +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { SubstanceFormSimplifiedReferencesCardComponent } from './substance-form-simplified-references-card.component'; +import { DynamicComponentLoaderModule } from '@gsrs-core/dynamic-component-loader'; +import { SubstanceFormModule } from '../substance-form.module'; +import { MatDividerModule } from '@angular/material/divider'; +import { ScrollToModule } from '@gsrs-core/scroll-to'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatInputModule } from '@angular/material/input'; +import {ReferenceFormComponent} from "./reference-form.component"; + +@NgModule({ + imports: [ + CommonModule, + DynamicComponentLoaderModule.forChild(SubstanceFormSimplifiedReferencesCardComponent), + MatDividerModule, + ScrollToModule, + MatIconModule, + MatButtonModule, + MatFormFieldModule, + ReactiveFormsModule, + FormsModule, + MatPaginatorModule, + MatInputModule, + SubstanceFormModule + ], + declarations: [ + SubstanceFormSimplifiedReferencesCardComponent, + ReferenceFormComponent + ] +}) +export class SubstanceFormSimplifiedReferencesModule { } diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index 9c689c8f8..4a3b6352a 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -1248,7 +1248,7 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy continue } - if (['substance-form-simplified-names','substance-form-simplified-codes-card'].includes(s.dynamicComponentName)) { + if (['substance-form-simplified-names','substance-form-simplified-codes-card','substance-form-simplified-references'].includes(s.dynamicComponentName)) { s.isHidden = !this.simplifiedForm continue } diff --git a/src/app/core/substance-form/substance-form.module.ts b/src/app/core/substance-form/substance-form.module.ts index ccfddc937..674c55ec4 100644 --- a/src/app/core/substance-form/substance-form.module.ts +++ b/src/app/core/substance-form/substance-form.module.ts @@ -17,7 +17,6 @@ import { MatChipsModule } from '@angular/material/chips'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { ScrollToModule } from '../scroll-to/scroll-to.module'; import { DomainReferencesComponent } from './references/domain-references/domain-references.component'; -import { ReferenceFormComponent } from './references/reference-form.component'; import { RefernceFormDialogComponent } from './references/references-dialogs/refernce-form-dialog.component'; import { ReuseReferencesDialogComponent } from './references/references-dialogs/reuse-references-dialog.component'; import { MatDialogModule } from '@angular/material/dialog'; @@ -127,7 +126,6 @@ import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-displa AccessManagerComponent, TagSelectorComponent, DomainReferencesComponent, - ReferenceFormComponent, RefernceFormDialogComponent, PreviousReferencesComponent, ReuseReferencesDialogComponent, @@ -153,13 +151,12 @@ import { ElementLabelDisplayModule } from '@gsrs-core/utils/element-label-displa DefinitionSwitchDialogComponent, PreviousReferencesDialogComponent, CopyDisulfideDialogComponent, - SubstanceDraftsComponent + SubstanceDraftsComponent, ], exports: [ SubstanceFormComponent, AccessManagerComponent, DomainReferencesComponent, - ReferenceFormComponent, PreviousReferencesComponent, RefernceFormDialogComponent, ReuseReferencesDialogComponent, From 5350d20ced9d9ee2e271c6d31bf51a377a2512f4 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Thu, 25 Jan 2024 15:36:16 +0000 Subject: [PATCH 12/17] Improve css --- .../simplified-codes/code-form.component.scss | 9 +++------ .../reference-form.component.html | 9 +++++++++ .../reference-form.component.scss | 11 ++++++++--- .../substance-form-simplified-references.module.ts | 4 +++- 4 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.scss b/src/app/core/substance-form/simplified-codes/code-form.component.scss index 50708c52d..7ef73c8a6 100644 --- a/src/app/core/substance-form/simplified-codes/code-form.component.scss +++ b/src/app/core/substance-form/simplified-codes/code-form.component.scss @@ -32,21 +32,18 @@ .form-row { display: flex; justify-content: space-between; + padding: 0 10px; align-items: flex-end; .delete-container { padding: 0 10px 8px 0; } - .code-system, .code-system-type, .type { - flex-grow: 3; + .code-system,.code{ + flex-grow: 1; padding-right: 15px; } - .code { - flex-grow: 1; - } - .code-text, .url { flex-grow: 1; } diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.html b/src/app/core/substance-form/simplified-references/reference-form.component.html index 20f322b4d..ab810d312 100644 --- a/src/app/core/substance-form/simplified-references/reference-form.component.html +++ b/src/app/core/substance-form/simplified-references/reference-form.component.html @@ -5,13 +5,22 @@
+
+
+ +
+ + +
diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.scss b/src/app/core/substance-form/simplified-references/reference-form.component.scss index 8a098eee0..80106660b 100644 --- a/src/app/core/substance-form/simplified-references/reference-form.component.scss +++ b/src/app/core/substance-form/simplified-references/reference-form.component.scss @@ -25,8 +25,13 @@ padding: 0 10px; align-items: flex-end; - .checkbox-container { - padding-bottom: 18px; + .delete-container { + padding: 0 10px 8px 0; + } + + .source-type, .citation{ + flex-grow: 1; + padding-right: 15px; } } @@ -35,7 +40,7 @@ margin: 5px 0 10px 0; } -.source-type, .citation, .url { +.url { width: 30%; } diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts index 6549878da..323cc4e3c 100644 --- a/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references.module.ts @@ -12,6 +12,7 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatInputModule } from '@angular/material/input'; import {ReferenceFormComponent} from "./reference-form.component"; +import {MatTooltipModule} from "@angular/material/tooltip"; @NgModule({ imports: [ @@ -26,7 +27,8 @@ import {ReferenceFormComponent} from "./reference-form.component"; FormsModule, MatPaginatorModule, MatInputModule, - SubstanceFormModule + SubstanceFormModule, + MatTooltipModule ], declarations: [ SubstanceFormSimplifiedReferencesCardComponent, From 920a0c025d20399db34a6f7a49e8259db5bb4e04 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Mon, 5 Feb 2024 15:18:37 +0200 Subject: [PATCH 13/17] Mirror source type to citation --- .../reference-form.component.html | 2 +- .../simplified-references/reference-form.component.ts | 10 ++++++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.html b/src/app/core/substance-form/simplified-references/reference-form.component.html index ab810d312..e90bf788e 100644 --- a/src/app/core/substance-form/simplified-references/reference-form.component.html +++ b/src/app/core/substance-form/simplified-references/reference-form.component.html @@ -14,7 +14,7 @@
+ (valueChange)= "setSourceType($event)"> diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.ts b/src/app/core/substance-form/simplified-references/reference-form.component.ts index 7fdd6ee29..d5d5a0291 100644 --- a/src/app/core/substance-form/simplified-references/reference-form.component.ts +++ b/src/app/core/substance-form/simplified-references/reference-form.component.ts @@ -36,6 +36,8 @@ export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy ngOnInit() { this.overlayContainer = this.overlayContainerService.getContainerElement(); + // Private domain by default. + this.reference.publicDomain = false; } ngAfterViewInit() { @@ -51,6 +53,14 @@ export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy this.reference.access = access; } + setSourceType(event?: any): void { + if (event) { + this.reference.docType = event; + // Mirror source type to citation. + this.reference.citation = event + } + } + updateTags(tags: Array): void { this.reference.tags = tags; } From 8bbe5e5a1e87b78016b0d279cc86c7efc2bc7f39 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Mon, 5 Feb 2024 17:24:11 +0200 Subject: [PATCH 14/17] Add chemical simplified as an option for register --- src/app/core/config/nav-items.constant.ts | 5 + .../substance-form.component.html | 6 - .../substance-form.component.ts | 29 +++-- .../substance-form/substance-form.service.ts | 123 ++++++++++-------- 4 files changed, 90 insertions(+), 73 deletions(-) diff --git a/src/app/core/config/nav-items.constant.ts b/src/app/core/config/nav-items.constant.ts index e65eb82b1..73637e1a2 100644 --- a/src/app/core/config/nav-items.constant.ts +++ b/src/app/core/config/nav-items.constant.ts @@ -10,6 +10,11 @@ export const navItems: Array = [ path: 'substances/register/chemical', order: 10 }, + { + display: 'Chemical (Simplified)', + path: 'substances/register/chemical-simplified', + order: 10 + }, { display: 'Protein', path: 'substances/register/protein', diff --git a/src/app/core/substance-form/substance-form.component.html b/src/app/core/substance-form/substance-form.component.html index 0b6cafeab..87aeaf57f 100644 --- a/src/app/core/substance-form/substance-form.component.html +++ b/src/app/core/substance-form/substance-form.component.html @@ -8,9 +8,6 @@
- Simple Form - @@ -229,9 +226,6 @@

{{ section.menuLabel }}

- Simple Form - diff --git a/src/app/core/substance-form/substance-form.component.ts b/src/app/core/substance-form/substance-form.component.ts index 4a3b6352a..23893575d 100644 --- a/src/app/core/substance-form/substance-form.component.ts +++ b/src/app/core/substance-form/substance-form.component.ts @@ -47,6 +47,7 @@ import {ungzip, deflate, inflate} from 'pako'; import {Buffer} from 'buffer'; import {AdminService} from '@gsrs-core/admin/admin.service'; import {MatButtonToggleChange} from "@angular/material/button-toggle"; +import {tr} from "cronstrue/dist/i18n/locales/tr"; @Component({ @@ -55,8 +56,10 @@ import {MatButtonToggleChange} from "@angular/material/button-toggle"; styleUrls: ['./substance-form.component.scss'] }) export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy { + private static simplifiedSuffix = '-simplified'; + @Input() - simplifiedForm = true // TODO:Set depending on config + simplifiedForm = false isLoading = true; id?: string; @@ -115,6 +118,7 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy approvalType = 'lastEditedBy'; previousState: number; + constructor( private activatedRoute: ActivatedRoute, private substanceService: SubstanceService, @@ -371,15 +375,23 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy this.gaService.sendPageView(`Substance Register`); } else { setTimeout(() => { + let type = this.activatedRoute.snapshot.params['type'] || 'chemical'; + let defaultValues = false + if (type.endsWith(SubstanceFormComponent.simplifiedSuffix)){ + this.simplifiedForm = true + defaultValues = true + type = type.slice(0, -SubstanceFormComponent.simplifiedSuffix.length) + } + this.gaService.sendPageView(`Substance Register`); - this.subClass = this.activatedRoute.snapshot.params['type'] || 'chemical'; - this.substanceClass = this.subClass; + this.subClass = type; + this.substanceClass = type; this.titleService.setTitle('Register - ' + this.subClass); - this.substanceFormService.loadSubstance(this.subClass).pipe(take(1)).subscribe(() => { + + this.substanceFormService.loadSubstance(this.subClass,undefined,undefined,undefined, defaultValues).pipe(take(1)).subscribe(() => { this.setFormSections(formSections[this.subClass]); this.loadingService.setLoading(false); this.isLoading = false; - }); }); } @@ -1234,13 +1246,6 @@ export class SubstanceFormComponent implements OnInit, AfterViewInit, OnDestroy return this.substanceService.oldLinkFix(link); } - - @Output() - toggleSimpleFormChanged(event: MatButtonToggleChange) { - this.simplifiedForm = event.source.checked - this.updateHiddenFormSections() - } - updateHiddenFormSections() { for (const s of this.formSections) { if (['substance-form-structure'].includes(s.dynamicComponentName)) { diff --git a/src/app/core/substance-form/substance-form.service.ts b/src/app/core/substance-form/substance-form.service.ts index 65998b044..fa943df4e 100644 --- a/src/app/core/substance-form/substance-form.service.ts +++ b/src/app/core/substance-form/substance-form.service.ts @@ -1,4 +1,4 @@ -import { Injectable, OnDestroy } from '@angular/core'; +import {Injectable, OnDestroy} from '@angular/core'; import { SubstanceDetail, SubstanceName, @@ -20,15 +20,15 @@ import { SubstanceFormDefinition, SubstanceFormResults, SubunitSequence, ValidationResults, ValidationMessage } from './substance-form.model'; -import { Observable, Subject, ReplaySubject, Subscription } from 'rxjs'; -import { SubstanceService } from '../substance/substance.service'; -import { UtilsService } from '../utils/utils.service'; -import { StructureService } from '@gsrs-core/structure'; +import {Observable, Subject, ReplaySubject, Subscription} from 'rxjs'; +import {SubstanceService} from '../substance/substance.service'; +import {UtilsService} from '../utils/utils.service'; +import {StructureService} from '@gsrs-core/structure'; import * as _ from 'lodash'; import * as defiant from '../../../../node_modules/defiant.js/dist/defiant.min.js'; -import { take } from 'rxjs/operators'; -import { AdminService } from '@gsrs-core/admin/admin.service'; +import {take} from 'rxjs/operators'; +import {AdminService} from '@gsrs-core/admin/admin.service'; @Injectable() export class SubstanceFormService implements OnDestroy { @@ -81,9 +81,9 @@ export class SubstanceFormService implements OnDestroy { setStoredRelated(substance: SubstanceSummary, header: string) { this.storedRelated[header] = substance; - } + } - loadSubstance(substanceClass: string = 'chemical', substance?: SubstanceDetail, method?: string, mergeConcept?: boolean): Observable { + loadSubstance(substanceClass: string = 'chemical', substance?: SubstanceDetail, method?: string, mergeConcept?: boolean, defaultValues?: boolean): Observable { if (method) { this.method = method; } else { @@ -104,24 +104,35 @@ export class SubstanceFormService implements OnDestroy { } else { // the second case happens in the forms sometimes but really shouldn't if (substanceClass === 'chemical' || substanceClass === 'structure') { - // TODO: make this loading specific to spiplified form if possible. - this.privateSubstance = { - substanceClass: 'chemical', - references: [], - names: [{name:""}], - structure: { - molfile: '\n\n\n 0 0 0 0 0 0 999 V2000\nM END' - }, - codes: [{codeSystem:"CAS"}], - relationships: [], - properties: [] - }; + this.privateSubstance = defaultValues ? + { + substanceClass: 'chemical', + references: [], + names: [{name: ""}], + structure: { + molfile: '\n\n\n 0 0 0 0 0 0 999 V2000\nM END' + }, + codes: [{codeSystem: "CAS"}], + relationships: [], + properties: [] + } : + { + substanceClass: 'chemical', + references: [], + names: [], + structure: { + molfile: '\n\n\n 0 0 0 0 0 0 999 V2000\nM END' + }, + codes: [], + relationships: [], + properties: [] + }; } else if (substanceClass === 'protein') { this.privateSubstance = { substanceClass: 'protein', references: [], names: [], - protein: { proteinType: '' }, + protein: {proteinType: ''}, codes: [], relationships: [], properties: [] @@ -190,8 +201,8 @@ export class SubstanceFormService implements OnDestroy { names: [], specifiedSubstanceG3: { parentSubstance: {}, - definition: { references: [] }, - grade: { references: [] } + definition: {references: []}, + grade: {references: []} }, codes: [], properties: [] @@ -202,7 +213,8 @@ export class SubstanceFormService implements OnDestroy { // references: [], specifiedSubstanceG4m: { parentSubstance: {}, - process: [{"processName": "Process 1", + process: [{ + "processName": "Process 1", sites: [{ stages: [{ "stageNumber": "1", @@ -256,7 +268,7 @@ export class SubstanceFormService implements OnDestroy { this.subClass = this.privateSubstance.substanceClass; // Only these two substance classes differ from - // the name of their JSON defintional element + // the name of their JSON definitional element // That's why they are used as exceptions if (this.subClass === 'chemical') { @@ -398,7 +410,7 @@ export class SubstanceFormService implements OnDestroy { if (newClass === 'chemical') { substance.structure = {}; } else if (newClass === 'protein') { - substance.protein = { proteinType: '' }; + substance.protein = {proteinType: ''}; } else if (newClass === 'nucleicAcid') { substance.nucleicAcid = {}; @@ -410,8 +422,7 @@ export class SubstanceFormService implements OnDestroy { $$diverseType: 'whole' }; } else if (newClass === 'specifiedSubstanceG1') { - substance.specifiedSubstance = { - }; + substance.specifiedSubstance = {}; } else if (newClass === 'polymer') { substance.polymer = { idealizedStructure: {}, @@ -440,6 +451,7 @@ export class SubstanceFormService implements OnDestroy { } else { } } + setPrivate(e) { e.access = ['protected']; alert('Substance definition now set to protected, please submit to save change'); @@ -679,7 +691,7 @@ export class SubstanceFormService implements OnDestroy { if (link.sites) { link.sites.forEach(site => { if (site.subunitIndex && site.residueIndex) { - const newLink: DisplaySite = { residue: site.residueIndex, subunit: site.subunitIndex, type: 'other' }; + const newLink: DisplaySite = {residue: site.residueIndex, subunit: site.subunitIndex, type: 'other'}; allSitesArr.push(newLink); } }); @@ -747,7 +759,7 @@ export class SubstanceFormService implements OnDestroy { const sites = f.split('-'); const subunitIndex = Number(sites[0].split('_')[0]); for (let i = Number(sites[0].split('_')[1]); i <= Number(sites[1].split('_')[1]); i++) { - const newLink: DisplaySite = { residue: Number(i), subunit: subunitIndex, type: 'feature' }; + const newLink: DisplaySite = {residue: Number(i), subunit: subunitIndex, type: 'feature'}; allSitesArr.push(newLink); } }); @@ -781,7 +793,7 @@ export class SubstanceFormService implements OnDestroy { return new Observable(observer => { this.ready().subscribe(substance => { if (this.privateSubstance.nucleicAcid == null) { - this.privateSubstance.nucleicAcid = { nucleicAcidType: '' }; + this.privateSubstance.nucleicAcid = {nucleicAcidType: ''}; } observer.next(this.privateSubstance.nucleicAcid); @@ -1136,7 +1148,7 @@ export class SubstanceFormService implements OnDestroy { for (let j = 0; j < sequence.length; j++) { const site = sequence[j]; if (site.toUpperCase() === 'C') { - available.push({ 'residueIndex': (j + 1), 'subunitIndex': (i + 1) }); + available.push({'residueIndex': (j + 1), 'subunitIndex': (i + 1)}); } } } @@ -1227,7 +1239,6 @@ export class SubstanceFormService implements OnDestroy { } - // end change reason validateSubstance(): Observable { @@ -1308,7 +1319,7 @@ export class SubstanceFormService implements OnDestroy { for (let i = 0; i < substanceCopy.modifications.physicalModifications.length; i++) { const prop = substanceCopy.modifications.physicalModifications[i]; let present = false; - if (prop && prop.parameters){ + if (prop && prop.parameters) { prop.parameters.forEach(param => { if (param.parameterName) { present = true; @@ -1451,7 +1462,10 @@ export class SubstanceFormService implements OnDestroy { return substanceCopy; } - private cleanObject(substanceProperty: any, deletedUuids: Array = []): { deletedUuids: Array, isDeleted: boolean } { + private cleanObject(substanceProperty: any, deletedUuids: Array = []): { + deletedUuids: Array, + isDeleted: boolean + } { if (Object.prototype.toString.call(substanceProperty) === '[object Object]') { const hasDeleletedCode = substanceProperty.$$deletedCode != null; @@ -1506,7 +1520,7 @@ export class SubstanceFormService implements OnDestroy { importStructure(structure, type) { // import a structure from mol or smiles - if(this.privateSubstance) { + if (this.privateSubstance) { if (type === 'molfile') { this.privateSubstance.structure.molfile = structure; this.substanceEmitter.next(this.privateSubstance); @@ -1515,8 +1529,8 @@ export class SubstanceFormService implements OnDestroy { this.structureService.interpretStructure(structure).pipe(take(1)).subscribe(response => { if (response && response.structure && response.structure.molfile) { - this.privateSubstance.structure.molfile = response.structure.molfile; - this.substanceEmitter.next(this.privateSubstance); + this.privateSubstance.structure.molfile = response.structure.molfile; + this.substanceEmitter.next(this.privateSubstance); } }); } @@ -1577,10 +1591,10 @@ export class SubstanceFormService implements OnDestroy { const substanceCopy = this.cleanSubstance(); return new Observable(observer => { - this.adminService.updateStagingArea(id, substanceCopy).subscribe(response => { - console.log(response); + this.adminService.updateStagingArea(id, substanceCopy).subscribe(response => { + console.log(response); observer.next(response); - observer.complete(); + observer.complete(); }, error => { console.log(error); observer.error(error); @@ -1730,7 +1744,7 @@ export class SubstanceFormService implements OnDestroy { this.privateSubstance.protein.glycosylation.OGlycosylationSites.concat(data.links); this.emitGlycosylationUpdate(); } else if (data.siteType === 'disulfide') { - const newLink: Link = { sites: data.links }; + const newLink: Link = {sites: data.links}; this.privateSubstance.protein.disulfideLinks.unshift(newLink); this.emitDisulfideLinkUpdate(); @@ -1862,16 +1876,16 @@ export class SubstanceFormService implements OnDestroy { ('IGG4 0-1,11-12,13-31,14-15,18-19,2-26,20-21,22-23,24-25,27-28,29-30,3-4,5-16,6-17,7-8,9-10\n' + 'IGG2 0-1,11-12,13-14,15-35,16-17,2-30,22-23,24-25,26-27,28-29,3-4,31-32,33-34,5-18,6-19,7-20,8-21,9-10\n' + 'IGG1 0-1,11-12,13-14,15-31,18-19,2-3,20-21,22-23,24-25,27-28,29-30,4-26,5-16,6-17,7-8,9-10').split('\n').map(function (s) { - const tup = s.split('\t'); + const tup = s.split('\t'); - const list = _.chain(tup[1].split(',')).map(function (t) { - return _.map(t.split('-'), function (temp) { - return +temp - 0; - }); - }).value(); + const list = _.chain(tup[1].split(',')).map(function (t) { + return _.map(t.split('-'), function (temp) { + return +temp - 0; + }); + }).value(); - KNOWN_DISULFIDE_PATTERNS[tup[0]] = list; - }); + KNOWN_DISULFIDE_PATTERNS[tup[0]] = list; + }); const proteinSubstance = this.privateSubstance; const prot = proteinSubstance.protein; const pattern = KNOWN_DISULFIDE_PATTERNS[prot.proteinSubType]; @@ -2006,9 +2020,9 @@ export class SubstanceFormService implements OnDestroy { } - validationMutations(){ - this.privateSubstance.names = this.privateSubstance.names.filter(x=>x.name) - this.privateSubstance.codes = this.privateSubstance.codes.filter(x=>x.code) + validationMutations() { + this.privateSubstance.names = this.privateSubstance.names.filter(x => x.name) + this.privateSubstance.codes = this.privateSubstance.codes.filter(x => x.code) this.substanceEmitter.next(this.privateSubstance); } guid() { @@ -2078,7 +2092,6 @@ export class SubstanceFormService implements OnDestroy { } - interface DisplaySite { type: string; subunit: number; From f6fee400e0bc2368e600f14db3faef645b25c41c Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 6 Feb 2024 14:00:14 +0200 Subject: [PATCH 15/17] Apply references to all on create --- .../apply-reference.component.ts | 3 -- ...rm-simplified-references-card.component.ts | 35 +++++++++++++++++++ 2 files changed, 35 insertions(+), 3 deletions(-) diff --git a/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts b/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts index 6f74cab45..1ba750e33 100644 --- a/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts +++ b/src/app/core/substance-form/references/apply-reference/apply-reference.component.ts @@ -55,8 +55,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy { } }); this.substanceFormReferencesService.emitReferencesUpdate(); - - } applyToAllWithoutRef(): void { @@ -108,7 +106,6 @@ export class ApplyReferenceComponent implements OnInit, OnDestroy { } } }); - } applyToAllDomainWithoutRef(domainKey: string): void { diff --git a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts index 469ffb8d1..5b755d537 100644 --- a/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts +++ b/src/app/core/substance-form/simplified-references/substance-form-simplified-references-card.component.ts @@ -7,6 +7,9 @@ import { GoogleAnalyticsService } from '@gsrs-core/google-analytics'; import { Subscription } from 'rxjs'; import { OverlayContainer } from '@angular/cdk/overlay'; import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/references/substance-form-references.service"; +import {DomainsWithReferences} from "@gsrs-core/substance-form/references/domain-references/domain.references.model"; +import { domainKeys } from '../references/domain-references/domain-keys.constant'; +import {take} from "rxjs/operators"; @Component({ selector: 'app-substance-form-references-card', @@ -16,6 +19,8 @@ import {SubstanceFormReferencesService} from "@gsrs-core/substance-form/referenc export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCardBaseFilteredList implements OnInit, AfterViewInit, OnDestroy, SubstanceCardBaseList { references: Array; + private domainKeys = domainKeys; + private domainsWithReferences: DomainsWithReferences; private subscriptions: Array = []; private overlayContainer: HTMLElement; @@ -49,7 +54,13 @@ export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCar this.page = 0; this.pageChange(); }); + + const domainsSubscription = this.substanceFormReferencesService.domainsWithReferences.pipe(take(1)).subscribe(domainsWithReferences => { + this.domainsWithReferences = domainsWithReferences; + }); + this.subscriptions.push(referencesSubscription); + this.subscriptions.push(domainsSubscription); } ngOnDestroy() { @@ -64,6 +75,8 @@ export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCar addSubstanceReference(): void { const addedReference = this.substanceFormReferencesService.addSubstanceReference({}); + this.applyToAll(addedReference.uuid) + setTimeout(() => { this.scrollToService.scrollToElement(addedReference.uuid, 'center'); }, 10); @@ -73,4 +86,26 @@ export class SubstanceFormSimplifiedReferencesCardComponent extends SubstanceCar this.substanceFormReferencesService.deleteSubstanceReference(reference); } + applyToAll(uuid: string): void { + this.applyReference(this.domainsWithReferences.definition.domain, uuid); + this.domainKeys.map(key=>this.domainsWithReferences[key]?.domains).forEach(domains => { + if (domains) { + domains.forEach((domain: any) => { + this.applyReference(domain, uuid); + }); + } + }); + + this.substanceFormReferencesService.emitReferencesUpdate(); + } + + applyReference(domain: any, uuid: string): void { + if (!domain.references) { + domain.references = []; + } + + if (domain.references.indexOf(uuid) === -1) { + domain.references.push(uuid); + } + } } From 55f5493ea71efdb5d1b810d524d44e4617aaea68 Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 6 Feb 2024 18:39:20 +0200 Subject: [PATCH 16/17] Spacing --- .../cv-input/cv-input.component.html | 2 +- .../cv-input/cv-input.component.ts | 27 ++++++++++--------- 2 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/app/core/substance-form/cv-input/cv-input.component.html b/src/app/core/substance-form/cv-input/cv-input.component.html index a7603d2ff..8f2f7a802 100644 --- a/src/app/core/substance-form/cv-input/cv-input.component.html +++ b/src/app/core/substance-form/cv-input/cv-input.component.html @@ -4,7 +4,7 @@ {{title}} {{required? ' *':''}} Clear selection - + {{term.display}} { - window.scroll({ - top: thisy, - left: 0, - behavior: 'auto' + window.scroll({ + top: thisy, + left: 0, + behavior: 'auto' }); this.overlayContainer.style.zIndex = null; if (response ) { @@ -164,10 +165,10 @@ export class CvInputComponent implements OnInit, OnDestroy { // this.overlayContainer.style.zIndex = '1002'; const dialogSubscription = dialogRef.afterClosed().subscribe(response => { // this.overlayContainer.style.zIndex = null; - window.scroll({ - top: thisy, - left: 0, - behavior: 'auto' + window.scroll({ + top: thisy, + left: 0, + behavior: 'auto' }); if (response ) { this.privateMod = response.display; From 222c271e264b615aaebee5bbecd3fe6065cee59d Mon Sep 17 00:00:00 2001 From: Robert Krajla Date: Tue, 20 Feb 2024 14:34:38 +0200 Subject: [PATCH 17/17] Protected access by default --- .../simplified-codes/code-form.component.ts | 3 ++ .../simplified-names/name-form.component.html | 2 +- .../simplified-names/name-form.component.ts | 29 ++++++++++--------- .../reference-form.component.ts | 4 ++- .../substance-form/substance-form.service.ts | 4 +-- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/app/core/substance-form/simplified-codes/code-form.component.ts b/src/app/core/substance-form/simplified-codes/code-form.component.ts index 86ea7a90e..c1a1ebeab 100644 --- a/src/app/core/substance-form/simplified-codes/code-form.component.ts +++ b/src/app/core/substance-form/simplified-codes/code-form.component.ts @@ -25,6 +25,9 @@ export class CodeFormComponent implements OnInit { ngOnInit() { this.getVocabularies(); + + // Protected access by default. + this.privateCode.access = ["protected"] } @Input() diff --git a/src/app/core/substance-form/simplified-names/name-form.component.html b/src/app/core/substance-form/simplified-names/name-form.component.html index 4f05d57c6..30089d6ef 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.html +++ b/src/app/core/substance-form/simplified-names/name-form.component.html @@ -25,7 +25,7 @@
- +
diff --git a/src/app/core/substance-form/simplified-names/name-form.component.ts b/src/app/core/substance-form/simplified-names/name-form.component.ts index 4efabf1be..b1ce8e718 100644 --- a/src/app/core/substance-form/simplified-names/name-form.component.ts +++ b/src/app/core/substance-form/simplified-names/name-form.component.ts @@ -1,15 +1,15 @@ -import { Component, OnInit, Input, Output, EventEmitter, OnDestroy } from '@angular/core'; -import { SubstanceName, SubstanceNameOrg } from '../../substance/substance.model'; -import { ControlledVocabularyService } from '../../controlled-vocabulary/controlled-vocabulary.service'; -import { FormControl } from '@angular/forms'; -import { MatRadioChange } from '@angular/material/radio'; -import { UtilsService } from '../../utils/utils.service'; -import { Subscription } from 'rxjs'; +import {Component, OnInit, Input, Output, EventEmitter, OnDestroy} from '@angular/core'; +import {SubstanceName, SubstanceNameOrg} from '../../substance/substance.model'; +import {ControlledVocabularyService} from '../../controlled-vocabulary/controlled-vocabulary.service'; +import {FormControl} from '@angular/forms'; +import {MatRadioChange} from '@angular/material/radio'; +import {UtilsService} from '../../utils/utils.service'; +import {Subscription} from 'rxjs'; import {NameResolverDialogComponent} from '@gsrs-core/name-resolver/name-resolver-dialog.component'; import {OverlayContainer} from '@angular/cdk/overlay'; import {MatDialog} from '@angular/material/dialog'; import {SubstanceFormService} from '@gsrs-core/substance-form/substance-form.service'; -import { SubstanceFormNamesService } from '@gsrs-core/substance-form/names/substance-form-names.service'; +import {SubstanceFormNamesService} from '@gsrs-core/substance-form/names/substance-form-names.service'; @Component({ selector: 'app-name-form', @@ -36,7 +36,8 @@ export class NameFormComponent implements OnInit, OnDestroy { private substanceFormService: SubstanceFormService, private overlayContainerService: OverlayContainer, private nameFormService: SubstanceFormNamesService - ) { } + ) { + } ngOnInit() { this.overlayContainer = this.overlayContainerService.getContainerElement(); @@ -45,7 +46,8 @@ export class NameFormComponent implements OnInit, OnDestroy { }); definition.unsubscribe(); - + // Protected access by default. + this.privateName.access = ["protected"] } ngOnDestroy() { @@ -57,7 +59,7 @@ export class NameFormComponent implements OnInit, OnDestroy { @Input() set show(val: boolean) { if (val != null) { - this.viewFull = val; + this.viewFull = val; } } @@ -68,7 +70,7 @@ export class NameFormComponent implements OnInit, OnDestroy { @Input() set standardized(val: boolean) { if (val != null) { - this.showStd = val; + this.showStd = val; } } @@ -143,7 +145,8 @@ export class NameFormComponent implements OnInit, OnDestroy { if (molfile != null && molfile !== '') { this.substanceFormService.resolvedName(molfile); } - }, () => {}); + }, () => { + }); } getNameOrgs(name: SubstanceName): Array { diff --git a/src/app/core/substance-form/simplified-references/reference-form.component.ts b/src/app/core/substance-form/simplified-references/reference-form.component.ts index d5d5a0291..252e58008 100644 --- a/src/app/core/substance-form/simplified-references/reference-form.component.ts +++ b/src/app/core/substance-form/simplified-references/reference-form.component.ts @@ -25,7 +25,6 @@ export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy error = false; private subscriptions: Array = []; constructor( - private cvService: ControlledVocabularyService, private utilsService: UtilsService, private substanceFormReferencesService: SubstanceFormReferencesService, private dialog: MatDialog, @@ -38,6 +37,9 @@ export class ReferenceFormComponent implements OnInit, AfterViewInit, OnDestroy // Private domain by default. this.reference.publicDomain = false; + + // Protected access by default. + this.reference.access = ["protected"] } ngAfterViewInit() { diff --git a/src/app/core/substance-form/substance-form.service.ts b/src/app/core/substance-form/substance-form.service.ts index fa943df4e..58e17843e 100644 --- a/src/app/core/substance-form/substance-form.service.ts +++ b/src/app/core/substance-form/substance-form.service.ts @@ -108,11 +108,11 @@ export class SubstanceFormService implements OnDestroy { { substanceClass: 'chemical', references: [], - names: [{name: ""}], + names: [{name: "", access:["protected"]}], structure: { molfile: '\n\n\n 0 0 0 0 0 0 999 V2000\nM END' }, - codes: [{codeSystem: "CAS"}], + codes: [{codeSystem: "CAS", access:["protected"]}], relationships: [], properties: [] } :