@lblod/ember-rdfa-editor-lblod-plugins 9.1.0 → 10.0.0

package/CHANGELOG.md

@@ -7,6 +7,51 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [10.0.0] - 2023-08-08
+### Changed
+- remove unused code from template comment component
+- remove allowedTypes from indentation menu
+- allow normal type of paragraphs (=can have italic mark) in template comments
+### Dependencies
+- Bumps `@embroider/test-setup` from 1.8.3 to 3.0.1
+- Bumps `@types/ember__application` from 4.0.4 to 4.0.6
+- Bumps `webpack` from 5.76.0 to 5.88.2
+- Bumps `@types/ember__component` from 4.0.11 to 4.0.14
+### Fixed
+- Allow `block*` content in `article_paragraph`
+- Move buttons for template comments are blue
+- problems with lists in template comments
+- GN-4451: fix roadsign plugin no longer showing rendered templates in modal (merge hotfix v8.4.3)
+- Snippet insertion inserts first node correctly
+- Enable no-bare-strings rule and update translations where needed
+
+### Added
+- Addition of `variable` group to each variable node-spec.
+
+### Breaking
+#### Major rework of variable plugin
+- Removal of generic `variable` node-spec. This node-spec is now replaced by domain-specific `text_variable`, `number`, `date`, `location` and `codelist` node-specs. These new node-specs each have their corresponding node-view.
+- Rework of the `insert-variable-card` component: this component is only a wrapper which lets you select a variable type. It then shows the insert component corresponding to that variable type. You can configure the `insert-variable-card` with a list of variable types and their corresponding insert component. Each variable type (text, number, date, codelist and location) now has a seperate insert component defined.
+- Removal of the `template-variable-card` component. This component has been replaced by two edit components for both the `location` and `codelist` variables.
+- Removal of `DEFAULT_VARIABLE_TYPES`. The insertion of the variable types are now handled by the insert components of the different variable types.
+
+## [9.1.1] - 2023-08-02
+### Fixed
+- GN-4446: fix email-address formatting in error components
+### Dependencies
+- Bumps `@types/uuid` from 9.0.0 to 9.0.2
+- Bumps `@types/rdf-validate-shacl` from 0.4.0 to 0.4.2
+- Bumps `@types/ember__polyfills` from 4.0.1 to 4.0.2
+
+## [8.4.3] - 2023-08-07
+
+### Fixed
+- GN-4451: fix roadsign plugin no longer showing rendered templates in modal
+
+## [8.4.2] - 2023-08-02
+### Fixed
+- GN-4446: fix email-address formatting in error components
+
 ## [9.1.0] - 2023-07-29
 
 ### Added
@@ -607,7 +652,7 @@ add onclick handler to pencil icon in variable plugin
 
 # Changelog
 
-[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.0...HEAD
+[unreleased]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v10.0.0...HEAD
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.0.0...v8.0.1
 [8.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.1.0...v8.0.0
 [7.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v7.0.0...v7.1.0
@@ -623,10 +668,14 @@ add onclick handler to pencil icon in variable plugin
 [3.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.2...v3.0.0
 [2.1.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.1...v2.1.2
 [2.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v2.1.0...v2.1.1
+[10.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.1...v10.0.0
+[9.1.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.1.0...v9.1.1
 [9.1.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.2...v9.1.0
 [9.0.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.1...v9.0.2
 [9.0.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v9.0.0...v9.0.1
 [9.0.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.1...v9.0.0
+[8.4.3]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.2...v8.4.3
+[8.4.2]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.1...v8.4.2
 [8.4.1]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.4.0...v8.4.1
 [8.4.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.3.0...v8.4.0
 [8.3.0]: https://github.com/lblod/ember-rdfa-editor-lblod-plugins/compare/v8.2.2...v8.3.0

package/README.md

@@ -24,12 +24,11 @@ This addon contains the following editor plugins:
 * [citaten-plugin](#citaten-plugin)
 * [decision-plugin](#decision-plugin)
 * [import-snippet-plugin](#import-snippet-plugin)
-* [insert-variable-plugin](#insert-variable-plugin)
 * [rdfa-date-plugin](#rdfa-date-plugin)
 * [roadsign-regulation-plugin](#roadsign-regulation-plugin)
 * [standard-template-plugin](#standard-template-plugin)
 * [table-of-contents-plugin](#table-of-contents-plugin)
-* [template-variable-plugin](#template-variable-plugin)
+* [variable-plugin](#variable-plugin)
 * [validation-plugin](#validation-plugin)
 * [address-plugin](#address-plugin)
 * [template-comments-plugin](#template-comments-plugin)
@@ -360,113 +359,6 @@ application (https://github.com/lblod/frontend-gelinkt-notuleren).
 When opening a new document, users will get the option to either include the snippet data in the document or as an
 attachment.
 
-## insert-variable-plugin
-
-Plugin which allows users to insert variable placeholders into a document.
-
-The plugin provides a card that needs to be attached to the editor sidebar like
-```hbs
-  <VariablePlugin::InsertVariableCard 
-    @controller={{this.controller}}
-    @options={{this.config.variable}}
-  />
-```
-
-### Configuring the plugin
-
-The plugin can be configured through the following optional attributes that can be added as a json to the options attribute of the card:
-
-- `publisher`: the URI of a specific codelist publisher which you can use if you want to filter the codelists by its
-  publisher.
-- `defaultEndpoint`: The default endpoint where the codelists are fetched, this is also the variable that gets passed to
-  the fetchSubtypes and template function
-- `variableTypes`: a custom list of variable types you want the plugin to use. This list can contain the following
-  default variable types: `text`, `number`,`date`,`location` and `codelist`. Additionally this list can also contain
-  custom variable types, configured by the following three sub-attributes:
-  * `label`: the label of the custom variable type
-  * `fetchSubTypes` (optional): a function which returns a list of possible variable values. The function takes two
-    optional arguments: an `endpoint` and a `publisher`.
-  * `constructor`: function which returns a prosemirror node to be inserted, the function takes three arguments, the prosemirror `schema`, the `endpoint` and the `selectedSubtype` if you are using subtypes.
-
-#### Example
-
-```js
-{
-  
-    publisher: 'http://data.lblod.info/id/bestuurseenheden/141d9d6b-54af-4d17-b313-8d1c30bc3f5b',
-      defaultEndpoint
-  :
-    'https://dev.roadsigns.lblod.info/sparql',
-      variableTypes
-  :
-    [
-      'text',
-      'number',
-      'date',
-      'location',
-      'codelist',
-      {
-        label: 'Simple Variable',
-        constructor: (schema) => {
-        const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
-        const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
-        return schema.node(
-          'variable',
-          {
-            mappingResource: mappingURI,
-            variableInstance,
-            type: 'Simple Variable',
-          },
-          schema.node('placeholder', { placeholderText: 'text' })
-        );
-      },
-      },
-      {
-        label: 'Complex Variable',
-        fetchSubtypes: async (endpoint, publisher) => {
-          const subtypes = [
-            {
-              uri: '1',
-              label: '1',
-            },
-            {
-              uri: '2',
-              label: '2',
-            },
-            {
-              uri: '3',
-              label: '3',
-            },
-          ];
-          return subtypes;
-        },
-        constructor: (schema, endpoint, selectedSubtype) => {
-        const mappingURI = `http://data.lblod.info/mappings/${uuidv4()}`;
-        const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
-        return schema.node(
-          'variable',
-          {
-            type: 'Complex Variable',
-            mappingResource: mappingURI,
-            subTypeResource: selectedSubtype?.uri,
-            variableInstance,
-            source: endpoint,
-          },
-          schema.node('placeholder', {
-            placeholderText: selectedSubtype?.label ?? '',
-          })
-        );
-      }
-    },
-  ],
-}
-```
-
-### Using the plugin
-
-When the insert-variable-plugin is enabled, users will have the option to insert a variable into a document through a
-card which pops up in the sidebar of the editor.
-
 ## rdfa-date-plugin
 
 Plugin to insert and modify semantic dates and timestamps in an editor document.
@@ -574,41 +466,174 @@ For very custom setups, the plugin might be unable to find your scrollContainer
 },
 ```
 
+## variable-plugin
 
-## template-variable-plugin
+Editor plugin which provides node-specs and components which allow you to insert and edit different types of variables in a document. The plugin provides the following variable types:
+- text variable
+- number variable
+- date variable
+- codelist
+- location
 
-Editor plugin which allows you to interact with placeholders created by the insert-variable-plugin.
+Additional variable types can be added in the consuming application or addon.
 
-For enabling it, you need to add the card provided by the plugin to the editor sidebar
+For each of these variable types, a node-spec and node-view are defined. You can import them like this:
+```js
+import {
+  codelist,
+  codelistView,
+  location,
+  locationView,
+  number,
+  numberView,
+  text_variable,
+  textVariableView,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
+```
+
+The date-variable node-spec and node-view are defined in the `rdfa-date-plugin`.
+
+For each of the variable-types you want to include in your editor instance, you should add the corresponding node-spec to your schema and the node-view to the `nodeViews` editor argument.
+
+### Inserting variables into a document
+
+This addon includes an insert-component for each of these variable types:
+- `variable-plugin/text/insert`
+- `variable-plugin/number/insert`
+- `variable-plugin/date/insert`
+- `variable-plugin/location/insert`
+- `variable-plugin/codelist/insert`
+
+Each of these components presents a custom UI which allows a user to insert a variable of the corresponding type in a document.
+
+These insert-components can be used on their own, but can also be used in combination with the `variable-plugin/insert-variable-card` component. The responsibility of this component is two-fold:
+- It allows a user to select a variable type.
+- The correct insert component corresponding to the user-selected variable type is shown.
+
+The `variable-plugin/insert-variable-card` can be easily configured: it expects two arguments:
+- `controller`: An instance of the `SayController` class
+- `variableTypes`: A list of `VariableConfig` objects. With each `VariableConfig` containing:
+  - the `label` which should be displayed in the variable-select dropdown
+  - the `path` to the insert-variable component 
+  - _optionally_ an `options` argument object which should be passed to the insert-variable component.
+ * The `VariableConfig` type is defined as follows:
+ ```js
+  type VariableConfig = {
+    label: string;
+    component: {
+      path: string;
+      options?: unknown;
+    };
+  };
+ ```
+
+#### An example
+To allows users to insert variables into a document, add the following to the editor sidebar in your template:
 ```hbs
-  <VariablePlugin::TemplateVariableCard @controller={{this.controller}} @options={{this.config.templateVariable}}/>
+<VariablePlugin::InsertVariableCard
+  @controller={{this.controller}}
+  @variableTypes={{this.variableTypes}}
+/>
 ```
-
-You will also need to add the variable node to the list of nodes of your prosemirror schema and the variable view to the list of nodeviews like `variable: variableView(controller)` imported from:
+`this.controller` is an instance of `SayController` and `this.variableTypes` is the list of `VariableConfig` objects which should be defined in your controller/component class:
 
 ```js
-import {
-  variable,
-  variableView,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/nodes';
-
+get variableTypes() {
+  return [
+    {
+      label: 'text',
+      component: {
+        path: 'variable-plugin/text/insert',
+      },
+    },
+    {
+      label: 'number',
+      component: {
+        path: 'variable-plugin/number/insert',
+      },
+    },
+    {
+      label: 'date',
+      component: {
+        path: 'variable-plugin/date/insert',
+      },
+    },
+    {
+      label: 'location',
+      component: {
+        path: 'variable-plugin/location/insert',
+        options: {
+          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+        },
+      },
+    },
+    {
+      label: 'codelist',
+      component: {
+        path: 'variable-plugin/codelist/insert',
+        options: {
+          endpoint: 'https://dev.roadsigns.lblod.info/sparql',
+        },
+      },
+    },
+  ];
+}
 ```
 
-### Configuring the plugin
+As you can see, both the `location` and `codelist` insert-components require an endpoint to be provided. They will use it to fetch the codelists/locations.
+Aside from the endpoint, the `codelist` insert-component may optionally expect a publisher argument which it will use to limit the codelist fetch to a specific publisher.
 
+### Editing variables in a document
+Each of the variables provided by this addon have a different editing experiences and use different components:
 
-You can configure the card with the following attributes:
+#### The text variable
+Editing a text variable requires no extra components aside from its node-spec and node-view. A user can just type into the text variable directly.
 
+#### The number variable
+Editing a number variable can be done in its nodeview directly. When a user clicks on a number variable in a document, it opens a popup allow you to fill in a number.
+
+#### The date variable
+The edit component for the date variable can be found in the [rdfa-date-plugin section](#rdfa-date-plugin)
+
+#### The location variable
+This addon provides a seperate edit component which allows users to fill in location variables in a document.
+This component can be added to the sidebar of an editor instance in a template as follows:
+```hbs
+<VariablePlugin::Location::Edit 
+  @controller={{this.controller}} 
+  @options={{this.locationEditOptions}}
+/>
+```
+Where `this.locationEditOptions` is a `LocationEditOptions` object used to configure the edit component. It can be defined as e.g.:
 ```js
-{
-  endpoint: 'https://dev.roadsigns.lblod.info/sparql', // the fallback endpoint which should be used for codelists which do not have a `dct:source` property.
-  zonalLocationCodelistUri:
-    'http://lblod.data.gift/concept-schemes/62331E6900730AE7B99DF7EF',
-  nonZonalLocationCodelistUri:
-    'http://lblod.data.gift/concept-schemes/62331FDD00730AE7B99DF7F2',
+get locationEditOptions() {
+  return {
+      endpoint: 'https://dev.roadsigns.lblod.info/sparql', //the fallback endpoint the edit component should use to fetch location values if the location variable has no `source` attribute
+      zonalLocationCodelistUri:
+        'http://lblod.data.gift/concept-schemes/62331E6900730AE7B99DF7EF', //the uri the edit component should search for if the location variable is included in a zonal traffic measure
+      nonZonalLocationCodelistUri:
+        'http://lblod.data.gift/concept-schemes/62331FDD00730AE7B99DF7F2', // the uri the edit component should search for if the location variable is included in a non-zonal traffic measure
+    };
+}
+```
+
+#### The codelist variable
+This addon provides a seperate edit component which allows users to fill in codelist variables in a document.
+This component can be added to the sidebar of an editor instance in a template as follows:
+```hbs
+<VariablePlugin::Codelist::Edit 
+  @controller={{this.controller}} 
+  @options={{this.codelistEditOptions}}
+/>
+```
+Where `this.codelistEditOptions` is a `CodelistEditOptions` object used to configure the edit component. It can be defined as e.g.:
+```js
+get codelistEditOptions() {
+  return {
+      endpoint: 'https://dev.roadsigns.lblod.info/sparql', //the fallback endpoint the edit component should use to fetch codelist values if the codelist variable has no `source` attribute
+    };
 }
 ```
-The most important attributes are `zonalLocationCodelistUri` and `nonZonalLocationCodelistUri` that are the uri that the location codelists have on your backend.
 
 ## validation-plugin
 
@@ -631,9 +656,9 @@ For enabling it, you need to add the card provided by the plugin to the editor s
 A plugin to insert a template comment anywhere in the document.  
 This is meant as a block of text for extra information to provide to a created template. It has
 the attribute `ext:TemplateComment`. This can (and should) be filtered out when publishing the document, as it is only meant as extra information while filling in a template.  
-It supports basic text with indenting, list items and the marks strong (bold), strikethrough and underline. Italic is not possible as the text is italic by default.
+It supports basic text with indenting, list items and the marks.
 
-Add it to editor by adding `...templateCommentNodes` to your schema and `templateComment: templateCommentView(controller)` as a nodeview.
+Add it to editor by adding `templateComment` to your schema and `templateComment: templateCommentView(controller)` as a nodeview.
 
 Logic to insert a template comment is added with
 ```hbs
@@ -648,6 +673,9 @@ Buttons to remove and move it when selected can be shown with
 
 See the [Contributing](CONTRIBUTING.md) guide for details.
 
+## Releasing
+See the [Release](RELEASE.md) guide.
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE.md).

package/addon/components/citation-plugin/helpers/alert-load-error.hbs

@@ -10,11 +10,11 @@
   <p>
     {{t "citaten-plugin.alert.error-outro"}}
     <AuLinkExternal
-      href="mailto:Gelinkt-Notuleren@vlaanderen.be"
+      href="mailto:gelinktnotuleren@vlaanderen.be"
       @icon="mail"
       @iconAlignment="left">
       {{!-- template-lint-disable no-bare-strings  --}}
-      Gelinkt-Notuleren@vlaanderen.be
+      gelinktnotuleren@vlaanderen.be
     </AuLinkExternal>.
   </p>
 </AuAlert>

package/addon/components/import-snippet-plugin/card.hbs

@@ -2,16 +2,22 @@
   <AuCard @flex={{true}} @divided={{true}} @expandable={{true}} @shadow={{true}} @isOpenInitially={{true}} @size="small" as |c|>
     <c.header>
       <AuHeading @level="3" @skin="6">
-        Document importeren
+        {{t "editor-plugins.import-snippet.card.title"}}
       </AuHeading>
     </c.header>
     <c.content>
-      <p class="u-spacer--tiny">Er is een <a href="{{snippet.source}}" target="_blank" rel="noopener noreferrer">document</a> beschikbaar</p>
-      <p><strong>Wenst u dit document in te voegen?</strong></p>
+      <p class="u-spacer--tiny">
+        {{t "editor-plugins.import-snippet.card.body.document-available" htmlSafe=true source=snippet.source}}
+      </p>
+      <p><strong>{{t "editor-plugins.import-snippet.card.body.confirmation"}}</strong></p>
       {{#if this.besluitNode}}
-        <AuButton {{on "click" (fn this.insert snippet 'attachment')}} >Bijlage invoegen</AuButton>
+        <AuButton {{on "click" (fn this.insert snippet 'attachment')}}>
+          {{t "editor-plugins.import-snippet.card.body.insert-attachment"}}
+        </AuButton>
       {{/if}}
-      <AuButton {{on "click" (fn this.insert snippet)}} >Document invoegen</AuButton>
+      <AuButton {{on "click" (fn this.insert snippet)}}>
+        {{t "editor-plugins.import-snippet.card.body.insert-document"}}
+      </AuButton>
     </c.content>
   </AuCard>
 {{/each}}

package/addon/components/rdfa-date-plugin/help-modal.hbs

@@ -19,31 +19,37 @@
         <:body>
           <tr>
             <td>{{t 'date-plugin.help.short-weekday-title'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>E</td>
             <td>{{this.formatExample 'E'}}</td>
           </tr>
           <tr>
             <td>{{t 'date-plugin.help.long-weekday-title'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>EEEE</td>
             <td>{{this.formatExample 'EEEE'}}</td>
           </tr>
           <tr>
             <td>{{t 'date-plugin.help.month-day'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>dd</td>
             <td>{{this.formatExample 'dd'}}</td>
           </tr>
           <tr>
             <td>{{t 'date-plugin.help.short-month'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>MM</td>
             <td>{{this.formatExample 'MM'}}</td>
           </tr>
           <tr>
             <td>{{t 'date-plugin.help.long-month-title'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>MMMM</td>
             <td>{{this.formatExample 'MMMM'}}</td>
           </tr>
           <tr>
             <td>{{t 'date-plugin.help.long-year'}}</td>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>yyyy</td>
             <td>{{this.formatExample 'yyyy'}}</td>
           </tr>
@@ -61,26 +67,32 @@
         </:header>
         <:body>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>EEEE dd MMMM yyyy</td>
             <td>{{this.formatExample 'EEEE dd MMMM yyyy'}}</td>
           </tr>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>dd/MM/yy</td>
             <td>{{this.formatExample 'dd/MM/yy'}}</td>
           </tr>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>dd/M/yyyy</td>
             <td>{{this.formatExample 'dd/M/yyyy'}}</td>
           </tr>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>dd/MM/yy hh:mm:ss</td>
             <td>{{this.formatExample 'dd/MM/yy hh:mm:ss'}}</td>
           </tr>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>'Vandaag is' dd/MM/yy BBBB</td>
             <td>{{this.formatExample "'Vandaag is' dd/MM/yy BBBB"}}</td>
           </tr>
           <tr>
+            {{!-- template-lint-disable no-bare-strings --}}
             <td>PPPPpppp</td>
             <td>{{this.formatExample 'PPPPpppp'}}</td>
           </tr>

package/addon/components/roadsign-regulation-plugin/expanded-measure.hbs

@@ -1,43 +1,73 @@
 <tr class="au-c-data-table__detail">
   <td colspan="5" class="au-o-flow au-o-flow--small">
-    <AuHeading @level="6" @skin="6">Voeg maatregel in:</AuHeading>
+    <AuHeading @level="6" @skin="6">
+      {{t "editor-plugins.roadsign-regulation.expanded-measure.insert-measure"}}
+    </AuHeading>
     <p>
       <AuPill>
-        <RoadsignRegulationPlugin::MeasureTemplate @measure={{@measure.uri}} @template={{@measure.template}} />
+        <RoadsignRegulationPlugin::MeasureTemplate
+          @measure={{@measure.uri}}
+          @template={{@measure.template}}
+          @endpoint={{@endpoint}}
+        />
       </AuPill>
     </p>
     {{#if this.isPotentiallyZonal}}
-      <AuHeading @level="6" @skin="6">Selecteer zonale geldigheid:</AuHeading>
+      <AuHeading @level="6" @skin="6">
+        {{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.label"}}
+      </AuHeading>
       <div class="au-c-form">
         <ul>
           <li>
-            <AuControlRadio @label="Zonaal" @name="zonal" @value={{this.ZONAL_URI}} @identifier="zonal" {{on 'change' this.changeZonality}} />
+            <AuControlRadio 
+              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.zonal"}} 
+              @name="zonal" 
+              @value={{this.ZONAL_URI}} 
+              @identifier="zonal" 
+              {{on 'change' this.changeZonality}}/>
           </li>
           <li>
-            <AuControlRadio @label="Niet zonaal" @name="zonal" @value={{this.NON_ZONAL_URI}} @identifier="non-zonal" {{on 'change' this.changeZonality}} />
+            <AuControlRadio 
+              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.select-zonality.non-zonal"}} 
+              @name="zonal" 
+              @value={{this.NON_ZONAL_URI}} 
+              @identifier="non-zonal" 
+              {{on 'change' this.changeZonality}} />
           </li>
         </ul>
       </div>
     {{/if}}
     {{#if @measure.temporal}}
-      <AuHeading @level="6" @skin="6">Variabele signalisatie:</AuHeading>
+      <AuHeading @level="6" @skin="6">
+        {{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.label"}}
+      </AuHeading>
       <div class="au-c-form">
         <ul>
           <li>
-            <AuControlRadio @label="Variabel" @name="temporal" @value={{true}} @identifier="true" {{on 'change' this.changeTemporality}} />
+            <AuControlRadio 
+              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.varying"}} 
+              @name="temporal" 
+              @value={{true}} 
+              @identifier="true" 
+              {{on 'change' this.changeTemporality}} />
           </li>
           <li>
-            <AuControlRadio @label="Niet variabel" @name="temporal" @value={{false}} @identifier="false" {{on 'change' this.changeTemporality}} />
+            <AuControlRadio 
+              @label={{t "editor-plugins.roadsign-regulation.expanded-measure.varying-signalisation.non-varying"}} 
+              @name="temporal" 
+              @value={{false}} 
+              @identifier="false" 
+              {{on 'change' this.changeTemporality}} />
           </li>
         </ul>
       </div>
     {{/if}}
     <AuButtonGroup>
       <AuButton {{on 'click' this.insert}} @disabled={{this.insertButtonDisabled}}>
-        Voeg in
+        {{t "editor-plugins.utils.insert"}}
       </AuButton>
       <AuButton @skin="secondary" {{on "click" this.unselectRow }}>
-        Annuleer
+        {{t "editor-plugins.utils.cancel"}}
       </AuButton>
     </AuButtonGroup>
   </td>

package/addon/components/roadsign-regulation-plugin/expanded-measure.ts

@@ -17,6 +17,7 @@ type Args = {
     zonalityValue?: string,
     temporalValue?: string,
   ) => void;
+  endpoint: string;
 };
 
 export default class ExpandedMeasureComponent extends Component<Args> {

package/addon/components/roadsign-regulation-plugin/measure-template.ts

@@ -1,9 +1,8 @@
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { task } from 'ember-concurrency';
-import { tracked } from '@glimmer/tracking';
 import includeInstructions from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/roadsign-regulation-plugin/utils/includeInstructions';
 import RoadsignRegistryService from '@lblod/ember-rdfa-editor-lblod-plugins/services/roadsign-registry';
+import { trackedFunction } from 'ember-resources/util/function';
 
 type Args = {
   template: string;
@@ -13,27 +12,22 @@ type Args = {
 };
 export default class MeasureTemplateComponent extends Component<Args> {
   @service declare roadsignRegistry: RoadsignRegistryService;
-  @tracked template = '';
-  endpoint: string;
 
-  constructor(parent: unknown, args: Args) {
-    super(parent, args);
-    this.template = this.args.template;
-    void this.fetchData.perform();
-    this.endpoint = this.args.endpoint;
+  get template() {
+    return this.instructionData.value ?? '';
   }
 
-  fetchData = task(async () => {
+  instructionData = trackedFunction(this, async () => {
     const instructions =
       await this.roadsignRegistry.getInstructionsForMeasure.perform(
         this.args.measure,
-        this.endpoint,
+        this.args.endpoint,
       );
     const template = includeInstructions(
       this.args.template,
       instructions,
       this.args.annotated,
     );
-    this.template = template;
+    return template;
   });
 }