@lblod/ember-rdfa-editor-lblod-plugins 9.1.1 → 11.0.0

package/addon/components/variable-plugin/codelist/insert.ts

@@ -0,0 +1,84 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import {
+  CodeList,
+  fetchCodeListsByPublisher,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { trackedFunction } from 'ember-resources/util/function';
+import { v4 as uuidv4 } from 'uuid';
+
+export type CodelistInsertOptions = {
+  publisher?: string;
+  endpoint: string;
+};
+type Args = {
+  controller: SayController;
+  options: CodelistInsertOptions;
+};
+
+export default class CodelistInsertComponent extends Component<Args> {
+  @tracked selectedSubtype?: CodeList;
+  @tracked label?: string;
+
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  get publisher() {
+    return this.args.options.publisher;
+  }
+
+  get endpoint() {
+    return this.args.options.endpoint;
+  }
+
+  subtypes = trackedFunction(this, async () => {
+    return fetchCodeListsByPublisher(this.endpoint, this.publisher);
+  });
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  insert() {
+    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const node = this.schema.nodes.codelist.create(
+      {
+        mappingResource,
+        variableInstance,
+        codelistResource: this.selectedSubtype?.uri,
+        label: this.label ?? this.selectedSubtype?.label,
+        source: this.endpoint,
+      },
+      this.schema.node('placeholder', {
+        placeholderText: this.selectedSubtype?.label,
+      }),
+    );
+
+    this.label = undefined;
+
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView },
+    );
+  }
+
+  @action
+  updateSubtype(subtype: CodeList) {
+    this.selectedSubtype = subtype;
+  }
+}

package/addon/components/variable-plugin/date/insert.hbs

@@ -0,0 +1,9 @@
+<AuFormRow>
+  <VariablePlugin::Utils::LabelInput 
+    @label={{this.label}} 
+    @updateLabel={{this.updateLabel}}
+  />
+</AuFormRow>
+<AuButton {{on 'click' this.insert}}>
+  {{t 'variable-plugin.button'}}
+</AuButton>

package/addon/components/variable-plugin/date/insert.ts

@@ -0,0 +1,45 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { v4 as uuidv4 } from 'uuid';
+
+type Args = {
+  controller: SayController;
+};
+
+export default class DateVariableInsertComponent extends Component<Args> {
+  @tracked label?: string;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.args.controller.schema;
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  insert() {
+    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const node = this.schema.nodes.date.create({
+      label: this.label,
+      value: null,
+      mappingResource,
+    });
+
+    this.label = undefined;
+
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView },
+    );
+  }
+}

package/addon/components/variable-plugin/insert-variable-card.hbs

@@ -17,53 +17,20 @@
       <PowerSelect
         @allowClear={{false}}
         @searchEnabled={{false}}
-        @options={{this.variablesArray}}
+        @options={{@variableTypes}}
         @selected={{this.selectedVariable}}
         @onChange={{this.updateSelectedVariable}}
         as |variable|
       >
         {{variable.label}}
       </PowerSelect>
-      {{#if this.hasSubtype}}
-        <PowerSelect
-          @allowClear={{false}}
-          @searchEnabled={{false}}
-          @options={{this.subtypes}}
-          @selected={{this.selectedSubtype}}
-          @onChange={{this.updateSubtype}}
-          as |subtype|
-        >
-          {{subtype.label}}
-        </PowerSelect>
-      {{/if}}
-      <AuFormRow>
-        <AuLabel for='label'>
-          {{t 'variable-plugin.label'}}
-        </AuLabel>
-        <AuInput
-          id="label"
-          placeholder={{t 'variable-plugin.labelPlaceholder'}}
-          @type="text"
-          @width="block"
-          @value={{this.variableLabel}}
-          {{on "input" this.updateVariableLabel}}
-        />
-      </AuFormRow>
-      {{#if (eq this.type 'number')}}
-        <VariablePlugin::NumberSettings
-          @minimumValue={{this.extraAttributes.minimumValue}}
-          @maximumValue={{this.extraAttributes.maximumValue}}
-          @error={{this.numberVariableError}}
-        />
-      {{/if}}
-      <AuButton
-        {{on 'click' this.insert}}
-        @disabled={{or
-          (not this.selectedVariable)
-          (and this.hasSubtype (not this.selectedSubtype))
-          this.numberVariableError
+      {{#if this.selectedVariable}}
+        {{component 
+          this.selectedVariable.component.path 
+          controller=this.controller 
+          options=this.selectedVariable.component.options
         }}
-      >{{t 'variable-plugin.button'}}</AuButton>
+      {{/if}}
     </c.content>
   </AuCard>
 {{/if}}

package/addon/components/variable-plugin/insert-variable-card.ts

@@ -1,193 +1,45 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { task } from 'ember-concurrency';
-import { SayController } from '@lblod/ember-rdfa-editor';
-import {
-  DEFAULT_VARIABLE_TYPES,
-  VariableType,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
-import { CodeList } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
-import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
-import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
+import { hasGroups } from '@lblod/ember-rdfa-editor/utils/node-utils';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
-import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 
-type Args = {
-  controller: SayController;
-  options: {
-    publisher: string;
-    variableTypes: (VariableType | string)[];
-    defaultEndpoint: string;
+export type VariableConfig = {
+  label: string;
+  component: {
+    path: string;
+    options?: unknown;
   };
 };
 
-type minMaxObj = { minimumValue?: number; maximumValue?: number };
-class ExtraAttributes {
-  @tracked minimumValue = '';
-  @tracked maximumValue = '';
-
-  asObject(): minMaxObj {
-    const obj: minMaxObj = {};
-    if (isNumber(this.minimumValue)) {
-      obj.minimumValue = Number(this.minimumValue);
-    }
-    if (isNumber(this.maximumValue)) {
-      obj.maximumValue = Number(this.maximumValue);
-    }
-    return obj;
-  }
-
-  reset() {
-    this.minimumValue = '';
-    this.maximumValue = '';
-  }
-}
+type Args = {
+  controller: SayController;
+  variableTypes: VariableConfig[];
+};
 
 export default class EditorPluginsInsertCodelistCardComponent extends Component<Args> {
-  @tracked variablesArray: VariableType[];
-  @tracked selectedVariable?: VariableType;
-  @tracked hasSubtype = false;
-  @tracked selectedSubtype?: CodeList;
-  @tracked subtypes?: CodeList[];
-  @tracked variableLabel?: string;
-  @tracked extraAttributes = new ExtraAttributes();
-  publisher: string;
-  endpoint: string;
+  @tracked selectedVariable?: VariableConfig;
 
   @service declare intl: IntlService;
 
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-    const { publisher, variableTypes, defaultEndpoint } =
-      this.args.options || {};
-    this.publisher = publisher;
-    this.endpoint = defaultEndpoint;
-    const variableTypesSelectedByUser = variableTypes ?? [
-      'text',
-      'number',
-      'date',
-      'location',
-      'codelist',
-    ];
-
-    const variablesArray: VariableType[] = [];
-    for (const type of variableTypesSelectedByUser) {
-      if (typeof type === 'string') {
-        const variableType = DEFAULT_VARIABLE_TYPES[type];
-        if (variableType) {
-          variablesArray.push(variableType);
-        } else {
-          console.warn(
-            `Template Variable Plugin: variable type ${type} not found in the default variable types`,
-          );
-        }
-      } else {
-        variablesArray.push(type);
-      }
-    }
-    this.variablesArray = variablesArray;
-  }
-
   get controller() {
     return this.args.controller;
   }
 
-  get numberVariableError() {
-    const minVal = this.extraAttributes.minimumValue;
-    const maxVal = this.extraAttributes.maximumValue;
-    if (
-      isNumber(minVal) &&
-      isNumber(maxVal) &&
-      Number(minVal) > Number(maxVal)
-    ) {
-      return this.intl.t('variable.number.error-min-bigger-than-max');
-    }
-
-    return '';
-  }
-
   @action
-  updateVariableLabel(event: InputEvent) {
-    this.variableLabel = (event.target as HTMLInputElement).value;
-  }
-
-  @action
-  insert() {
-    if (!this.selectedVariable || this.numberVariableError) {
-      return;
-    }
-
-    const node = this.selectedVariable.constructor({
-      schema: this.controller.schema,
-      codelist: this.selectedSubtype,
-      label: this.variableLabel !== '' ? this.variableLabel : undefined,
-      attributes: {
-        source: this.endpoint,
-        ...this.extraAttributes.asObject(),
-      },
-    });
-
-    this.variableLabel = '';
-    this.extraAttributes.reset();
-
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
-  }
-
-  @action
-  updateSelectedVariable(variable: VariableType) {
+  updateSelectedVariable(variable: VariableConfig) {
     this.selectedVariable = variable;
-    if (variable.fetchSubtypes) {
-      void this.fetchSubtypes.perform(variable.fetchSubtypes);
-      this.hasSubtype = true;
-    } else {
-      this.hasSubtype = false;
-    }
-  }
-
-  fetchSubtypes = task(
-    async (
-      fetchFunction: (
-        endpoint: string,
-        publisher: string,
-      ) => Promise<CodeList[]>,
-    ) => {
-      const subtypes = await fetchFunction(this.endpoint, this.publisher);
-      this.subtypes = subtypes;
-    },
-  );
-
-  @action
-  updateSubtype(subtype: CodeList) {
-    this.selectedSubtype = subtype;
-    this.extraAttributes.reset();
-  }
-
-  get type() {
-    return this.selectedVariable?.label;
   }
 
   get showCard() {
-    if (this.args.controller.inEmbeddedView) {
-      return false;
-    }
-    const { selection } = this.args.controller.mainEditorState;
-    if (
-      selection instanceof NodeSelection &&
-      selection.node.type === this.args.controller.schema.nodes.variable
-    ) {
-      return false;
+    // Do not show the card if a variable is selected.
+    const { selection } = this.controller.mainEditorState;
+    if (selection instanceof NodeSelection) {
+      return !hasGroups(selection.node, 'variable');
     } else {
-      const variable = findParentNodeOfType(
-        this.args.controller.schema.nodes.variable,
-      )(selection);
-      return !variable;
+      return true;
     }
   }
 }

package/addon/components/variable-plugin/location/edit.hbs

@@ -0,0 +1,40 @@
+{{#if this.showCard}}
+  <AuCard @flex={{true}} @divided={{true}} @isOpenInitially={{true}} @expandable={{true}} @shadow={{true}} @size="small" as |c|>
+    <c.header>
+      <AuHeading @level="3" @skin="6">
+        {{t "variable-plugin.enter-variable-value"}}
+      </AuHeading>
+    </c.header>
+    <c.content>
+      <AuLabel for='location-select'>
+        {{this.label}}
+      </AuLabel>
+      {{#if this.multiSelect}}
+        <PowerSelectMultiple
+          id="location-select"
+          @allowClear={{false}}
+          @searchEnabled={{false}}
+          @options={{this.locationOptions.value.options}}
+          @selected={{this.selectedLocationOption}}
+          @onChange={{this.updateLocationOption}} as |option|
+        >
+          {{option.label}}
+        </PowerSelectMultiple>
+      {{else}}
+        <PowerSelect
+          id="location-select"
+          @allowClear={{false}}
+          @searchEnabled={{false}}
+          @options={{this.locationOptions.value.options}}
+          @selected={{this.selectedLocationOption}}
+          @onChange={{this.updateLocationOption}} as |option|
+        >
+          {{option.label}}
+        </PowerSelect>
+      {{/if}}
+      <AuButton {{on 'click' this.insert}} @disabled={{not this.selectedLocationOption}}>
+        {{t "editor-plugins.utils.insert"}}
+      </AuButton>
+    </c.content>
+  </AuCard>
+{{/if}}

package/addon/components/variable-plugin/location/edit.ts

@@ -0,0 +1,122 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import {
+  CodeListOption,
+  fetchCodeListOptions,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/fetch-data';
+import { MULTI_SELECT_CODELIST_TYPE } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/constants';
+import { findParentNodeOfType } from '@curvenote/prosemirror-utils';
+import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { ZONAL_URI } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/constants';
+import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
+import { trackedFunction } from 'ember-resources/util/function';
+import { trackedReset } from 'tracked-toolbox';
+import { updateCodelistVariable } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/codelist-utils';
+
+export type LocationEditOptions = {
+  endpoint: string;
+  zonalLocationCodelistUri: string;
+  nonZonalLocationCodelistUri: string;
+};
+type Args = {
+  controller: SayController;
+  options: LocationEditOptions;
+};
+export default class LocationEditComponent extends Component<Args> {
+  @trackedReset('locationOptions.value') selectedLocationOption?:
+    | CodeListOption
+    | CodeListOption[];
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get options() {
+    return this.args.options;
+  }
+
+  @action
+  insert() {
+    if (!this.selectedLocation || !this.selectedLocationOption) {
+      return;
+    }
+    updateCodelistVariable(
+      this.selectedLocation,
+      this.selectedLocationOption,
+      this.controller,
+    );
+  }
+
+  get selectedLocation() {
+    const { selection } = this.controller.mainEditorState;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === this.controller.schema.nodes.location
+    ) {
+      return {
+        node: selection.node,
+        pos: selection.from,
+      };
+    } else {
+      return;
+    }
+  }
+
+  get showCard() {
+    return !!this.selectedLocation;
+  }
+
+  get source() {
+    return (
+      (this.selectedLocation?.node.attrs.source as string | undefined) ??
+      this.args.options.endpoint
+    );
+  }
+
+  get label() {
+    return this.selectedLocation?.node.attrs.label as string | undefined;
+  }
+
+  get isZonal() {
+    const { selection } = this.controller.mainEditorState;
+    const roadSignRegulation = findParentNodeOfType(
+      this.controller.schema.nodes.roadsign_regulation,
+    )(selection);
+    const zonalityUri = roadSignRegulation?.node.attrs.zonality as
+      | string
+      | undefined;
+    return zonalityUri === ZONAL_URI;
+  }
+
+  locationOptions = trackedFunction(this, async () => {
+    const result = await fetchCodeListOptions(
+      this.source,
+      this.isZonal
+        ? this.options.zonalLocationCodelistUri
+        : this.options.nonZonalLocationCodelistUri,
+    );
+    result.options = result.options.map((option) => ({
+      label: option.label,
+      value: this.wrapInLocation(unwrap(option.value)),
+    }));
+    return result;
+  });
+
+  get multiSelect() {
+    return this.locationOptions.value?.type === MULTI_SELECT_CODELIST_TYPE;
+  }
+
+  @action
+  updateLocationOption(locationOption: CodeListOption | CodeListOption[]) {
+    this.selectedLocationOption = locationOption;
+  }
+
+  wrapInLocation(value: string) {
+    return `
+      <span property="https://data.vlaanderen.be/ns/mobiliteit#plaatsbepaling">
+        ${value}
+      </span>
+    `;
+  }
+}

package/addon/components/variable-plugin/location/insert.hbs

@@ -0,0 +1,9 @@
+<AuFormRow>
+  <VariablePlugin::Utils::LabelInput 
+    @value={{this.label}} 
+    @updateLabel={{this.updateLabel}}
+  />
+</AuFormRow>
+<AuButton {{on 'click' this.insert}}>
+  {{t 'variable-plugin.button'}}
+</AuButton>

package/addon/components/variable-plugin/location/insert.ts

@@ -0,0 +1,65 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import { v4 as uuidv4 } from 'uuid';
+
+export type LocationInsertOptions = {
+  endpoint: string;
+};
+
+type Args = {
+  controller: SayController;
+  options: LocationInsertOptions;
+};
+
+export default class LocationInsertComponent extends Component<Args> {
+  @tracked label?: string;
+
+  @service declare intl: IntlService;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+
+  get endpoint() {
+    return this.args.options.endpoint;
+  }
+
+  @action
+  updateLabel(event: InputEvent) {
+    this.label = (event.target as HTMLInputElement).value;
+  }
+
+  @action
+  insert() {
+    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const node = this.schema.nodes.location.create(
+      {
+        mappingResource,
+        variableInstance,
+        label: this.label,
+        source: this.endpoint,
+      },
+      this.schema.node('placeholder', {
+        placeholderText: 'location',
+      }),
+    );
+
+    this.label = undefined;
+
+    this.controller.withTransaction(
+      (tr) => {
+        return tr.replaceSelectionWith(node);
+      },
+      { view: this.controller.mainEditorView },
+    );
+  }
+}