@lblod/ember-rdfa-editor-lblod-plugins 19.3.1 → 20.0.0-dev.9f53a0c5a0e0db0414b0c84aed978d01752ccbf8

package/.changeset/afraid-trainers-look.md

@@ -0,0 +1,5 @@
+---
+"@lblod/ember-rdfa-editor-lblod-plugins": minor
+---
+
+Add ability to specify area locations in the location-plugin

package/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.eslintcache

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 20.0.0
+
+### Major Changes
+
+- [#440](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/440) [`8c242fe2eda10725e2bce59a77c86e905b6878b9`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8c242fe2eda10725e2bce59a77c86e905b6878b9) Thanks [@abeforgit](https://github.com/abeforgit)! - Convert plugins that used decision nodes to work on any nodes that have the rdf decision type
+
+### Minor Changes
+
+- [#440](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/440) [`8c242fe2eda10725e2bce59a77c86e905b6878b9`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8c242fe2eda10725e2bce59a77c86e905b6878b9) Thanks [@abeforgit](https://github.com/abeforgit)! - Add new structure node using a nodeview approach
+
+### Patch Changes
+
+- [#441](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/441) [`45aad15462f89eede7cd2633ccf129189367d8db`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/45aad15462f89eede7cd2633ccf129189367d8db) Thanks [@piemonkey](https://github.com/piemonkey)! - Fix docker image builds
+
 ## 19.3.1
 
 ### Patch Changes

package/addon/components/besluit-topic-plugin/besluit-topic-toolbar-dropdown.ts

@@ -2,7 +2,6 @@ import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController } from '@lblod/ember-rdfa-editor';
-import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { ELI } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
@@ -48,6 +47,13 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
   get doc() {
     return this.controller.mainEditorState.doc;
   }
+  get decisionRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+
+  get showCard() {
+    return !!this.decisionRange;
+  }
 
   topics = trackedFunction(this, async () => {
     const result = await fetchBesluitTopics({
@@ -74,11 +80,7 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
       return;
     }
 
-    const besluit = findAncestorOfType(
-      this.controller.mainEditorState.selection,
-      this.controller.schema.nodes['besluit'],
-    );
-
+    const besluit = this.decisionRange;
     if (!besluit) {
       console.warn(
         `We have a besluit URI (${currentBesluitURI}), but can't find a besluit ancestor`,
@@ -114,10 +116,6 @@ export default class BesluitTopicToolbarDropdownComponent extends Component<Args
     }
   }
 
-  get showCard() {
-    return !!getCurrentBesluitRange(this.controller);
-  }
-
   @action
   upsertBesluitTopic(selected: BesluitTopic[]) {
     this.besluitTopicsSelected = selected;

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -4,11 +4,9 @@ import { action } from '@ember/object';
 import { addProperty, removeProperty } from '@lblod/ember-rdfa-editor/commands';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
-import { ResolvedPNode } from '@lblod/ember-rdfa-editor/plugins/datastore';
 import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
-import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
 import { trackedFunction } from 'ember-resources/util/function';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 import { BesluitTypePluginOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin';
@@ -18,6 +16,7 @@ import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/i
 import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 import { MailIcon } from '@appuniversum/ember-appuniversum/components/icons/mail';
 import { CircleXIcon } from '@appuniversum/ember-appuniversum/components/icons/circle-x';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
 
 type Args = {
   controller: SayController;
@@ -65,20 +64,8 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     return types;
   });
 
-  get currentBesluitRange(): ResolvedPNode | undefined {
-    const selection = this.controller.mainEditorState.selection;
-    const besluit = findAncestorOfType(
-      selection,
-      this.controller.schema.nodes['besluit'],
-    );
-    if (!besluit) {
-      return undefined;
-    }
-    return {
-      node: besluit.node,
-      from: besluit.start - 1,
-      to: besluit.start + besluit.node.nodeSize - 1,
-    };
+  get currentBesluitRange() {
+    return getCurrentBesluitRange(this.controller);
   }
 
   get currentBesluitURI() {
@@ -98,10 +85,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     if (!this.currentBesluitURI || !this.types.value) {
       return;
     }
-    const besluit = findAncestorOfType(
-      this.controller.mainEditorState.selection,
-      this.controller.schema.nodes['besluit'],
-    );
+    const besluit = this.currentBesluitRange;
     if (!besluit) {
       console.warn(
         `We have a besluit URI (${this.currentBesluitURI}), but can't find a besluit ancestor`,

package/addon/components/decision-plugin/decision-plugin-card.gts

@@ -0,0 +1,231 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import {
+  insertMotivation,
+  insertArticleContainer,
+  insertDescription,
+  insertTitle,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands';
+import type { PNode, SayController, Selection } from '@lblod/ember-rdfa-editor';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { AlertTriangleIcon } from '@appuniversum/ember-appuniversum/components/icons/alert-triangle';
+import { findAncestors } from '@lblod/ember-rdfa-editor/utils/position-utils';
+import {
+  getOutgoingTriple,
+  hasOutgoingNamedNodeTriple,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import {
+  BESLUIT,
+  ELI,
+  PROV,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { NodeWithPos } from '@curvenote/prosemirror-utils';
+import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { on } from '@ember/modifier';
+import { not } from 'ember-truth-helpers';
+import t from 'ember-intl/helpers/t';
+import { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface DecisionCardOptions {
+  articleUriGenerator?: () => string;
+}
+interface Sig {
+  Args: {
+    controller: SayController;
+    options?: DecisionCardOptions;
+  };
+}
+
+export default class DecisionPluginCard extends Component<Sig> {
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+  get selection(): Selection {
+    return this.controller.mainEditorState.selection;
+  }
+
+  get decisionNodeLocation(): NodeWithPos | null {
+    return (
+      findAncestors(this.selection.$from, (node: PNode) => {
+        return hasOutgoingNamedNodeTriple(
+          node.attrs,
+          RDF('type'),
+          BESLUIT('Besluit'),
+        );
+      })[0] ?? null
+    );
+  }
+
+  @action
+  focus() {
+    this.controller.focus();
+  }
+  get canInsertTitle() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(this.decisionNodeLocation.node.attrs, ELI('title'))
+    );
+  }
+  @action
+  insertTitle() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertTitle({
+          placeholderText: this.intl.t(
+            'besluit-plugin.placeholder.decision-title',
+          ),
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        { view: this.controller.mainEditorView },
+      );
+    }
+    this.focus();
+  }
+  get canInsertDescription() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(
+        this.decisionNodeLocation.node.attrs,
+        ELI('description'),
+      )
+    );
+  }
+  @action
+  insertDescription() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertDescription({
+          placeholderText: this.intl.t(
+            'besluit-plugin.placeholder.decision-description',
+          ),
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  get canInsertMotivation() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(
+        this.decisionNodeLocation.node.attrs,
+        BESLUIT('motivering'),
+      )
+    );
+  }
+
+  @action
+  insertMotivation() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertMotivation({
+          intl: this.intl,
+          decisionLocation: this.decisionNodeLocation,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  get missingArticleBlock() {
+    return (
+      this.decisionNodeLocation &&
+      !getOutgoingTriple(this.decisionNodeLocation.node.attrs, PROV('value'))
+    );
+  }
+  @action
+  insertArticleBlock() {
+    if (this.decisionNodeLocation) {
+      this.controller.doCommand(
+        insertArticleContainer({
+          intl: this.intl,
+          decisionLocation: this.decisionNodeLocation,
+          articleUriGenerator: this.args.options?.articleUriGenerator,
+        }),
+        {
+          view: this.controller.mainEditorView,
+        },
+      );
+    }
+    this.focus();
+  }
+
+  <template>
+    {{#if this.canInsertTitle}}
+      <ValidationCard
+        @enabled={{this.canInsertTitle}}
+        @title={{t 'besluit-plugin.missing-title-warning'}}
+        @onClickFix={{this.insertTitle}}
+      >
+        {{t 'besluit-plugin.insert.decision-title'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.canInsertDescription}}
+      <ValidationCard
+        @enabled={{this.canInsertDescription}}
+        @title={{t 'besluit-plugin.missing-description-warning'}}
+        @onClickFix={{this.insertDescription}}
+      >
+        {{t 'besluit-plugin.insert.description'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.canInsertMotivation}}
+      <ValidationCard
+        @enabled={{this.canInsertMotivation}}
+        @title={{t 'besluit-plugin.missing-motivation-warning'}}
+        @onClickFix={{this.insertMotivation}}
+      >
+        {{t 'besluit-plugin.insert.motivation'}}
+      </ValidationCard>
+    {{/if}}
+    {{#if this.missingArticleBlock}}
+      <ValidationCard
+        @enabled={{this.missingArticleBlock}}
+        @title={{t 'besluit-plugin.missing-article-block-warning'}}
+        @onClickFix={{this.insertArticleBlock}}
+      >
+        {{t 'besluit-plugin.insert.article-block'}}
+      </ValidationCard>
+    {{/if}}
+  </template>
+}
+interface ValidationCardSig {
+  Args: {
+    enabled: boolean;
+    onClickFix: () => void;
+    title: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+const ValidationCard: TemplateOnlyComponent<ValidationCardSig> = <template>
+  <AuAlert
+    class='say-validation-alert'
+    @skin='warning'
+    @closable={{false}}
+    @icon={{AlertTriangleIcon}}
+    @title={{@title}}
+  >
+    <AuButton
+      @iconAlignment='left'
+      @skin='link-secondary'
+      @disabled={{not @enabled}}
+      {{on 'click' @onClickFix}}
+    >
+      {{yield}}
+    </AuButton>
+  </AuAlert>
+</template>;

package/addon/components/decision-plugin/insert-article.gts

@@ -0,0 +1,81 @@
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { getCurrentBesluitRange } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-topic-plugin/utils/helpers';
+import insertArticle from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/commands/insert-article-command';
+import { buildArticleStructure } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/decision-plugin/utils/build-article-structure';
+import t from 'ember-intl/helpers/t';
+import { not } from 'ember-truth-helpers';
+
+export interface InsertArticleOptions {
+  uriGenerator?: () => string;
+}
+interface Sig {
+  Args: { controller: SayController; options?: InsertArticleOptions };
+}
+export default class InsertArticleComponent extends Component<Sig> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+  get decisionRange() {
+    return getCurrentBesluitRange(this.controller);
+  }
+  get decisionLocation() {
+    return this.decisionRange
+      ? { pos: this.decisionRange.from, node: this.decisionRange.node }
+      : null;
+  }
+  get canInsert() {
+    if (!this.decisionLocation) {
+      return false;
+    }
+    const article = buildArticleStructure(
+      this.schema,
+      this.args.options?.uriGenerator,
+    );
+    return this.controller.checkCommand(
+      insertArticle({ node: article, decisionLocation: this.decisionLocation }),
+    );
+  }
+
+  @action
+  doInsert() {
+    const structureNode = buildArticleStructure(
+      this.schema,
+      this.args.options?.uriGenerator,
+    );
+    if (!structureNode) {
+      return;
+    }
+    if (!this.decisionLocation) {
+      return;
+    }
+    this.controller.doCommand(
+      insertArticle({
+        node: structureNode,
+        decisionLocation: this.decisionLocation,
+      }),
+    );
+    this.controller.focus();
+  }
+
+  <template>
+    <li class='au-csidebar-list__item'>
+      <AuButton
+        @icon='add'
+        @iconAlignment='left'
+        @skin='link'
+        @disabled={{not this.canInsert}}
+        {{on 'click' this.doInsert}}
+      >
+        {{t 'besluit-plugin.insert.article'}}
+      </AuButton>
+    </li>
+  </template>
+}

package/addon/components/hover-tooltip.gts

@@ -0,0 +1,68 @@
+import { hash } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FunctionBasedModifier, modifier } from 'ember-modifier';
+import { Velcro } from 'ember-velcro';
+import { Signature as VelcroModifierSignature } from 'ember-velcro/modifiers/velcro';
+import { ModifierLike } from '@glint/template';
+export type Placement = VelcroModifierSignature['Args']['Named']['placement'];
+
+interface HoverModifierSig {
+  Element: HTMLElement;
+}
+interface Sig {
+  Args: { placement?: Placement };
+  Blocks: {
+    hover: [
+      hover: {
+        velcroHook: ModifierLike<Velcro['velcroHook']>;
+        handleHover: ModifierLike<FunctionBasedModifier<HoverModifierSig>>;
+      },
+    ];
+    tooltip: [loop: ModifierLike<Velcro['velcroLoop']>];
+  };
+}
+
+export default class HoverTooltip extends Component<Sig> {
+  hover = modifier<HoverModifierSig>(
+    (element) => {
+      element.addEventListener('mouseenter', this.showTooltip);
+      element.addEventListener('mouseleave', this.hideTooltip);
+      element.addEventListener('focus', this.showTooltip);
+      element.addEventListener('blur', this.hideTooltip);
+      return () => {
+        element.removeEventListener('mouseenter', this.showTooltip);
+        element.removeEventListener('mouseleave', this.hideTooltip);
+        element.removeEventListener('focus', this.showTooltip);
+        element.removeEventListener('blur', this.hideTooltip);
+      };
+    },
+    { eager: false },
+  );
+  @tracked tooltipOpen = false;
+
+  get placement(): Placement | undefined {
+    return this.args.placement ?? 'top';
+  }
+
+  showTooltip = () => {
+    this.tooltipOpen = true;
+  };
+
+  hideTooltip = () => {
+    this.tooltipOpen = false;
+  };
+  <template>
+    <Velcro @placement={{this.placement}} as |velcro|>
+      {{#let velcro.loop as |loop|}}
+        {{yield
+          (hash velcroHook=velcro.hook handleHover=(modifier this.hover))
+          to='hover'
+        }}
+        {{#if this.tooltipOpen}}
+          {{yield loop to='tooltip'}}
+        {{/if}}
+      {{/let}}
+    </Velcro>
+  </template>
+}

package/addon/components/location-plugin/edit.gts

@@ -349,10 +349,13 @@ export default class LocationPluginEditComponent extends Component<Signature> {
             <Group.Radio @value='place'>
               {{t 'location-plugin.types.place'}}
             </Group.Radio>
+            <Group.Radio @value='area'>
+              {{t 'location-plugin.types.area'}}
+            </Group.Radio>
           </AuRadioGroup>
         </fs.content>
       </AuFieldset>
-      {{#if (eq @locationType 'place')}}
+      {{#unless (eq @locationType 'address')}}
         <AuFormRow>
           <AuLabel for='place-name'>
             {{t 'location-plugin.search.place-name.label'}}*
@@ -371,7 +374,7 @@ export default class LocationPluginEditComponent extends Component<Signature> {
         <p class='au-u-para-tiny au-u-margin-none'>
           {{t 'location-plugin.search.hint'}}
         </p>
-      {{/if}}
+      {{/unless}}
       <AuFormRow>
         <AuLabel for='municipality-select'>
           {{t 'location-plugin.search.municipality.label'}}