@lblod/ember-rdfa-editor-lblod-plugins 25.2.0 → 25.2.1-dev.3f3b7d0dfbeef50aaf66f35c51097fc42ad192cd

package/.changeset/metal-bags-pump.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+person-variable plugin: remove unused `content` node-attribute

package/.changeset/twelve-mugs-think.md

@@ -0,0 +1,9 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': major
+---
+
+Adjustments to `lmb-plugin`:
+- Rework `fetchMandatees` queries into `fetchElectees`
+  * Fetches all electees for a certain legislation period + all non-elected people with a mandate
+  * Replace `Mandatee` model by simpler `Electee` model
+- Adjust UI components to reflect the `Mandatee` to `Electee` change

package/.changeset/wild-walls-turn.md

@@ -0,0 +1,17 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': major
+---
+
+Adjustments to `person` variable:
+- Removal of unused `content` attribute
+- Removal of `mandatee` attribute. Replaced by `value` attribute which contains an object of type `Person`.
+  ```ts
+  type Person = {
+    uri: string;
+    firstName: string;
+    lastName: string;
+  };
+  ```
+- Adjust parsing rules of `person_variable` nodespec to work with old and new serializations
+- Is now more generic, instead of relying on `Mandatee` instances
+

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 25.2.1
+
+### Patch Changes
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Redesign variable pills
+
+- [#497](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/497) [`2b4b401`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/2b4b4011e3d66c23f232bf6690ca80a5b0a90298) Thanks [@lagartoverde](https://github.com/lagartoverde)! - Bump ember-rdfa-editor to 10.7.3
+
 ## 25.2.0
 
 ### Minor Changes

package/addon/components/lmb-plugin/insert.ts

@@ -5,7 +5,7 @@ import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
 
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
-import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import { v4 as uuidv4 } from 'uuid';
 import {
   DCT,
@@ -16,6 +16,7 @@ import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblo
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { Person } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
 
 interface Args {
   controller: SayController;
@@ -44,11 +45,17 @@ export default class LmbPluginInsertComponent extends Component<Args> {
   }
 
   @action
-  onInsert(mandatee: Mandatee) {
+  onInsert(electee: Electee) {
     const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
     const variableId = uuidv4();
 
+    const person: Person = {
+      uri: electee.uri,
+      firstName: electee.firstName,
+      lastName: electee.lastName,
+    };
+
     const label = this.intl.t('variable.person.label', {
       locale: this.controller.documentLanguage,
     });
@@ -56,7 +63,7 @@ export default class LmbPluginInsertComponent extends Component<Args> {
       subject: mappingSubject,
       rdfaNodeType: 'resource',
       __rdfaId: variableId,
-      mandatee,
+      value: person,
       properties: [
         {
           predicate: RDF('type').full,

package/addon/components/lmb-plugin/list.hbs

@@ -11,24 +11,8 @@
       </th>
       <th>
         <Common::Sort::SortableTableHeader
-          @field='status'
-          @label={{t 'lmb-plugin.modal.fields.status'}}
-          @sort={{@sort}}
-          @setSort={{@setSort}}
-        />
-      </th>
-      <th>
-        <Common::Sort::SortableTableHeader
-          @field='fractie'
-          @label={{t 'lmb-plugin.modal.fields.fractie'}}
-          @sort={{@sort}}
-          @setSort={{@setSort}}
-        />
-      </th>
-      <th>
-        <Common::Sort::SortableTableHeader
-          @field='role'
-          @label={{t 'lmb-plugin.modal.fields.role'}}
+          @field='kandidatenlijst'
+          @label={{t 'lmb-plugin.modal.fields.kandidatenlijst'}}
           @sort={{@sort}}
           @setSort={{@setSort}}
         />
@@ -39,7 +23,7 @@
   <:body>
     {{#if @services.isRunning}}
       <tr>
-        <td colspan='5'>
+        <td colspan='100%'>
           <AuLoader @centered={{true}}>
             {{t 'common.search.loading'}}
           </AuLoader>
@@ -50,9 +34,13 @@
         {{#each @services.value.results as |row|}}
           <tr>
             <td>{{row.fullName}}</td>
-            <td>{{row.status}}</td>
-            <td>{{row.fractie}}</td>
-            <td>{{row.role}}</td>
+            <td>
+              {{#if row.kandidatenlijst}}
+                {{row.kandidatenlijst}}
+              {{else}}
+                <span class='au-u-italic'>{{t 'common.not-applicable'}}</span>
+              {{/if}}
+            </td>
             <td class='au-u-text-center'>
               <AuButton {{on 'click' (fn @insert row)}}>
                 {{t 'lmb-plugin.modal.insert'}}
@@ -60,6 +48,12 @@
             </td>
           </tr>
         {{/each}}
+      {{else}}
+        <tr>
+          <td colspan='100%'>
+            {{t 'common.search.no-results'}}
+          </td>
+        </tr>
       {{/if}}
     {{/if}}
   </:body>

package/addon/components/lmb-plugin/search-modal.ts

@@ -6,24 +6,24 @@ import { restartableTask, timeout } from 'ember-concurrency';
 import { task as trackedTask } from 'reactiveweb/ember-concurrency';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 
-import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import {
   FetchMandateesArgs,
-  fetchMandatees,
-} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchMandatees';
+  fetchElectees,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin/utils/fetchElectees';
 import {
   BESTUURSPERIODES,
   BestuursperiodeLabel,
   BestuursperiodeURI,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { isSome } from '@lblod/ember-rdfa-editor/utils/_private/option';
-export type SearchSort = [keyof Mandatee, 'ASC' | 'DESC'] | false;
+export type SearchSort = [keyof Electee, 'ASC' | 'DESC'] | false;
 
 interface Args {
   config: LmbPluginConfig;
   open: boolean;
   closeModal: () => void;
-  onInsert: (mandatee: Mandatee) => void;
+  onInsert: (electee: Electee) => void;
 }
 interface AdminPeriodOption {
   label: BestuursperiodeLabel;
@@ -118,7 +118,7 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
       }
 
       try {
-        const result = await fetchMandatees({
+        const result = await fetchElectees({
           endpoint,
           searchString,
           page,
@@ -127,14 +127,14 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
           period,
           adminUnitSearch,
         });
-        const { count, mandatees } = result;
+        const { count, electees } = result;
 
         return {
-          results: mandatees,
+          results: electees,
           totalCount: count,
         };
       } catch (err) {
-        console.error('Got an error fetching LMB data', err);
+        console.error('Got an error fetching electees', err);
         this.error = err;
       }
       return {
@@ -182,8 +182,8 @@ export default class LmbPluginSearchModalComponent extends Component<Args> {
     ++this.pageNumber;
   }
   @action
-  async onInsert(mandatee: Mandatee) {
-    this.args.onInsert(mandatee);
+  async onInsert(electee: Electee) {
+    this.args.onInsert(electee);
     await this.closeModal();
   }
 }

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

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { service } from '@ember/service';
 import { on } from '@ember/modifier';
 import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 import AuPill, {
   type AuPillSignature,
 } from '@appuniversum/ember-appuniversum/components/au-pill';
@@ -25,14 +24,6 @@ type Signature = {
 export default class AddressNodeviewComponent extends Component<Signature> {
   @service declare intl: IntlService;
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.args.controller.documentLanguage,
-      }),
-    };
-  }
-
   get address() {
     return this.args.node.attrs.value as Address | null;
   }
@@ -42,26 +33,23 @@ export default class AddressNodeviewComponent extends Component<Signature> {
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
+
   <template>
-    <AuPill
-      class='variable atomic'
-      @icon={{PencilIcon}}
-      @iconAlignment='right'
-      ...attributes
-      {{on 'click' @selectNode}}
-    >
-      {{#if this.address}}
-        {{this.address.formatted}}
-      {{else}}
-        <span class='mark-highlight-manual'>
-          {{this.translations.placeholder}}
-        </span>
-      {{/if}}
-      {{#if this.label}}
-        <span class='label'>
-          ({{this.label}})
-        </span>
-      {{/if}}
+    <AuPill class='say-pill atomic' ...attributes {{on 'click' @selectNode}}>
+      <span class='{{unless this.filled "unfilled-variable"}}'>
+        {{this.content}}
+      </span>
     </AuPill>
   </template>
 }

package/addon/components/variable-plugin/address/nodeview.hbs

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.address}}
-    {{this.address.formatted}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>

package/addon/components/variable-plugin/address/nodeview.ts

@@ -1,7 +1,4 @@
 import Component from '@glimmer/component';
-import { service } from '@ember/service';
-import IntlService from 'ember-intl/services/intl';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 import { PNode, SayController } from '@lblod/ember-rdfa-editor';
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/address-helpers';
@@ -15,26 +12,6 @@ type Args = {
 };
 
 export default class AddressNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
-  }
-
-  get translations() {
-    return {
-      placeholder: this.intl.t('editor-plugins.address.nodeview.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -47,4 +24,16 @@ export default class AddressNodeviewComponent extends Component<Args> {
     if (this.address) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
+
+  get filled() {
+    return !!this.address;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.address?.formatted;
+    } else {
+      return this.label;
+    }
+  }
 }

package/addon/components/variable-plugin/autofilled/insert.gts

@@ -68,7 +68,8 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
       locale: this.documentLanguage,
     });
 
-    const label = this.label != '' ? this.label : placeholder;
+    const label =
+      this.label != '' ? this.label : this.autofillKey || placeholder;
     const node = this.schema.nodes.autofilled_variable.create(
       {
         subject: mappingSubject,
@@ -101,7 +102,7 @@ export default class AutoFilledVariableInsertComponent extends Component<Args> {
       },
 
       this.schema.node('placeholder', {
-        placeholderText: `Autofill ${this.autofillKey}`,
+        placeholderText: label,
       }),
     );
     this.label = '';

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

@@ -137,7 +137,7 @@ export default class CodelistInsertComponent extends Component<Args> {
         ],
       },
       this.schema.node('placeholder', {
-        placeholderText: this.selectedCodelist?.label,
+        placeholderText: label,
       }),
     );
 

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

@@ -1,14 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{this.humanReadableDate}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.humanReadableDate}}
+  </span>
 </AuPill>

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

@@ -5,15 +5,12 @@ import {
   SayController,
   SayView,
 } from '@lblod/ember-rdfa-editor';
-import IntlService from 'ember-intl/services/intl';
-import { service } from '@ember/service';
 import {
   formatDate,
   validateDateFormat,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/date-helpers';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -26,16 +23,10 @@ type Args = {
 };
 
 export default class DateNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
-
-  @service declare intl: IntlService;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get documentLanguage() {
-    return this.controller.documentLanguage;
+  get filled() {
+    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
+      ?.object.value;
+    return !!value;
   }
 
   get humanReadableDate() {
@@ -49,20 +40,11 @@ export default class DateNodeviewComponent extends Component<Args> {
         return 'Ongeldig formaat';
       }
     } else {
-      return (this.args.node.attrs.onlyDate as boolean)
-        ? this.intl.t('date-plugin.insert.date', {
-            locale: this.documentLanguage,
-          })
-        : this.intl.t('date-plugin.insert.datetime', {
-            locale: this.documentLanguage,
-          });
+      return this.label;
     }
   }
 
   get label() {
-    const value = getOutgoingTriple(this.args.node.attrs, EXT('content'))
-      ?.object.value;
-    if (value) return '';
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }

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

@@ -51,15 +51,17 @@ export default class LocationInsertComponent extends Component<Args> {
       locale: this.documentLanguage,
     });
 
+    const label = this.label ?? placeholder;
+
     const node = this.schema.nodes.location.create(
       {
         mappingResource,
         variableInstance,
-        label: this.label ?? placeholder,
+        label: label,
         source: this.endpoint,
       },
       this.schema.node('placeholder', {
-        placeholderText: placeholder,
+        placeholderText: label,
       }),
     );
 

package/addon/components/variable-plugin/number/nodeview.hbs

@@ -4,25 +4,10 @@
   @offsetOptions={{hash mainAxis=3}}
   as |velcro|
 >
-  <AuPill
-    @icon={{this.PencilIcon}}
-    @iconAlignment='right'
-    class='variable atomic'
-    {{velcro.hook}}
-    {{on 'click' @selectNode}}
-  >
-    {{#if this.formattedNumber}}
-      {{this.formattedNumber}}
-    {{else}}
-      <span class='mark-highlight-manual'>
-        {{this.translations.placeholder}}
-      </span>
-    {{/if}}
-    {{#if this.label}}
-      <span class='label'>
-        ({{this.label}})
-      </span>
-    {{/if}}
+  <AuPill class='say-pill atomic' {{velcro.hook}} {{on 'click' @selectNode}}>
+    <span class='{{unless this.filled "unfilled-variable"}}'>
+      {{this.content}}
+    </span>
   </AuPill>
   {{#if this.selected}}
     <div class='say-tooltip say-number-tooltip' {{velcro.loop}}>

package/addon/components/variable-plugin/number/nodeview.ts

@@ -17,7 +17,6 @@ import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { numberToWords } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/number-to-words';
 import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
 type Args = {
   getPos: () => number | undefined;
@@ -31,7 +30,6 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
-  PencilIcon = PencilIcon;
   Velcro = Velcro;
 
   @localCopy('number', '') declare inputNumber: string;
@@ -52,14 +50,6 @@ export default class NumberNodeviewComponent extends Component<Args> {
     return this.controller.documentLanguage;
   }
 
-  get translations() {
-    return {
-      placeholder: this.intl.t('variable.number.placeholder', {
-        locale: this.documentLanguage,
-      }),
-    };
-  }
-
   get node() {
     return this.args.node;
   }
@@ -80,6 +70,18 @@ export default class NumberNodeviewComponent extends Component<Args> {
     }
   }
 
+  get filled() {
+    return !!this.formattedNumber;
+  }
+
+  get content() {
+    if (this.filled) {
+      return this.formattedNumber;
+    } else {
+      return this.label;
+    }
+  }
+
   get selected() {
     return this.args.selected;
   }

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

@@ -4,7 +4,8 @@ import { SayController, PNode } from '@lblod/ember-rdfa-editor';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
 import { tracked } from '@glimmer/tracking';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
-import Mandatee from '@lblod/ember-rdfa-editor-lblod-plugins/models/mandatee';
+import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
+import { Person } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables/person';
 
 type Args = {
   controller: SayController;
@@ -44,12 +45,11 @@ export default class PersonEditComponent extends Component<Args> {
 
   get isEditing() {
     const personNode = this.selectedPersonNode;
-    return !!personNode?.node.attrs.mandatee;
+    return !!personNode?.node.attrs.electee;
   }
 
   @action
   openModal() {
-    console.log('Open modal!!!');
     this.controller.focus();
     this.showModal = true;
   }
@@ -59,16 +59,16 @@ export default class PersonEditComponent extends Component<Args> {
     this.showModal = false;
   }
   @action
-  onInsert(mandatee: Mandatee) {
+  onInsert(electee: Electee) {
     const personNode = this.selectedPersonNode as PersonNode;
-    this.controller.withTransaction((tr) => {
-      tr.setNodeAttribute(personNode.pos, 'mandatee', mandatee);
-      return tr.setNodeAttribute(
-        personNode.pos,
-        'content',
-        mandatee.mandateeUri,
-      );
-    });
+    const person: Person = {
+      uri: electee.uri,
+      firstName: electee.firstName,
+      lastName: electee.lastName,
+    };
+    this.controller.withTransaction((tr) =>
+      tr.setNodeAttribute(personNode.pos, 'value', person),
+    );
     this.closeModal();
   }
 }

package/addon/components/variable-plugin/person/nodeview.hbs

@@ -1,20 +1,6 @@
 {{! @glint-nocheck: not typesafe yet }}
-<AuPill
-  @icon={{this.PencilIcon}}
-  @iconAlignment='right'
-  class='variable atomic'
-  {{on 'click' @selectNode}}
->
-  {{#if this.mandatee}}
-    {{this.mandatee.fullName}}
-  {{else}}
-    <span class='mark-highlight-manual'>
-      {{this.translations.placeholder}}
-    </span>
-  {{/if}}
-  {{#if this.label}}
-    <span class='label'>
-      ({{this.label}})
-    </span>
-  {{/if}}
+<AuPill class='say-pill atomic' {{on 'click' @selectNode}}>
+  <span class='{{unless this.filled "unfilled-variable"}}'>
+    {{this.content}}
+  </span>
 </AuPill>