@lblod/ember-rdfa-editor-lblod-plugins 22.1.0 → 22.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 22.2.0
+
+### Minor Changes
+
+- [#461](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/461) [`c3d659f`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/c3d659f0ddfb62c9241a8a34aea53a45375687f2) Thanks [@elpoelma](https://github.com/elpoelma)! - Improve serialization of `mandatee_table` node
+
+- [#463](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/463) [`8c18bc2`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/8c18bc2106dd2a48231e5465bf0df9bf2e507d13) Thanks [@elpoelma](https://github.com/elpoelma)! - Fix issue with unresponsive edit/insert button when person variable is selected
+
 ## 22.1.0
 
 ### Minor Changes

package/addon/components/mandatee-table-plugin/node.gts

@@ -36,9 +36,13 @@ export default class MandateeTableNode extends Component<Sig> {
   <template>
     <div class='say-mandatee-table-node'>
       <div
-        class='say-mandatee-table-header au-u-flex au-u-flex--row au-u-flex--vertical-center'
+        class='say-mandatee-table-header au-u-flex au-u-flex--row au-u-flex--vertical-center au-u-flex--spaced-tiny'
       >
-        <AuIcon @icon={{UserIcon}} @size='large' class='au-u-margin-small' />
+        <AuIcon
+          @icon={{UserIcon}}
+          @size='large'
+          class='au-u-margin-left-tiny au-u-margin-right-tiny'
+        />
         <div>
           <strong>{{this.title}}</strong>
           <p>

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

@@ -33,7 +33,7 @@ export default class CodelistEditComponent extends Component<Args> {
     return this.args.controller;
   }
 
-  selectedCodelist = trackedFunction(this, () => {
+  get selectedCodelist() {
     const { selection } = this.controller.mainEditorState;
     if (
       selection instanceof NodeSelection &&
@@ -46,11 +46,11 @@ export default class CodelistEditComponent extends Component<Args> {
       return codelist;
     }
     return;
-  });
+  }
 
   get source() {
-    if (this.selectedCodelist.value) {
-      const { node } = this.selectedCodelist.value;
+    if (this.selectedCodelist) {
+      const { node } = this.selectedCodelist;
       const source = getOutgoingTriple(node.attrs, DCT('source'))?.object
         .value as Option<string>;
       if (source) {
@@ -61,8 +61,8 @@ export default class CodelistEditComponent extends Component<Args> {
   }
 
   get codelistUri() {
-    if (this.selectedCodelist.value) {
-      const { node } = this.selectedCodelist.value;
+    if (this.selectedCodelist) {
+      const { node } = this.selectedCodelist;
       const codelistUri = getOutgoingTriple(node.attrs, EXT('codelist'))?.object
         .value as Option<string>;
       if (codelistUri) {
@@ -73,11 +73,11 @@ export default class CodelistEditComponent extends Component<Args> {
   }
 
   get showCard() {
-    return !!this.selectedCodelist.value;
+    return !!this.selectedCodelist;
   }
 
   get label() {
-    return this.selectedCodelist.value?.node.attrs.label as string | undefined;
+    return this.selectedCodelist?.node.attrs.label as string | undefined;
   }
 
   codelistOptions = trackedFunction(this, async () => {
@@ -89,7 +89,7 @@ export default class CodelistEditComponent extends Component<Args> {
   });
 
   get multiSelect() {
-    const localStyle = this.selectedCodelist.value?.node.attrs
+    const localStyle = this.selectedCodelist?.node.attrs
       .selectionStyle as string;
     if (localStyle) {
       return localStyle === 'multi';
@@ -99,11 +99,11 @@ export default class CodelistEditComponent extends Component<Args> {
 
   @action
   insert() {
-    if (!this.selectedCodelist.value || !this.selectedCodelistOption) {
+    if (!this.selectedCodelist || !this.selectedCodelistOption) {
       return;
     }
     updateCodelistVariable(
-      this.selectedCodelist.value,
+      this.selectedCodelist,
       this.selectedCodelistOption,
       this.controller,
     );

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

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { SayController, PNode } from '@lblod/ember-rdfa-editor';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
-import { trackedFunction } from 'ember-resources/util/function';
 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';
@@ -24,7 +23,7 @@ export default class PersonEditComponent extends Component<Args> {
     return this.args.controller;
   }
 
-  selectedPersonNode = trackedFunction(this, () => {
+  get selectedPersonNode() {
     const { selection } = this.controller.mainEditorState;
     if (
       selection instanceof NodeSelection &&
@@ -37,19 +36,20 @@ export default class PersonEditComponent extends Component<Args> {
       return personNode;
     }
     return;
-  });
+  }
 
   get showCard() {
-    return !!this.selectedPersonNode.value;
+    return !!this.selectedPersonNode;
   }
 
   get isEditing() {
-    const personNode = this.selectedPersonNode.value;
+    const personNode = this.selectedPersonNode;
     return !!personNode?.node.attrs.mandatee;
   }
 
   @action
   openModal() {
+    console.log('Open modal!!!');
     this.controller.focus();
     this.showModal = true;
   }
@@ -60,7 +60,7 @@ export default class PersonEditComponent extends Component<Args> {
   }
   @action
   onInsert(mandatee: Mandatee) {
-    const personNode = this.selectedPersonNode.value as PersonNode;
+    const personNode = this.selectedPersonNode as PersonNode;
     this.controller.withTransaction((tr) => {
       tr.setNodeAttribute(personNode.pos, 'mandatee', mandatee);
       return tr.setNodeAttribute(

package/addon/plugins/mandatee-table-plugin/node.ts

@@ -30,25 +30,38 @@ export const emberNodeConfig: () => EmberNodeConfig = () => {
       return [
         'div',
         {
-          'data-mandatee-table': true,
-          'data-tag': tag,
-          'data-title': title,
+          'data-say-mandatee-table': true,
+          'data-say-mandatee-table-tag': tag,
+          'data-say-mandatee-table-title': title,
+          class: 'say-mandatee-table-node',
         },
-        0,
+        ['p', { class: 'say-mandatee-table-header' }, ['strong', {}, title]],
+        [
+          'div',
+          {
+            class: 'say-mandatee-table-content',
+            'data-say-mandatee-table-content': true,
+          },
+          0,
+        ],
       ];
     },
     parseDOM: [
       {
         tag: 'div',
         getAttrs(element: HTMLElement) {
-          if (element.dataset.mandateeTable && element.dataset.tag) {
+          if (
+            element.dataset.sayMandateeTable &&
+            element.dataset.sayMandateeTableTag
+          ) {
             return {
-              tag: element.dataset.tag,
-              title: element.dataset.title,
+              tag: element.dataset.sayMandateeTableTag,
+              title: element.dataset.sayMandateeTableTitle,
             };
           }
           return false;
         },
+        contentElement: `div[data-say-mandatee-table-content]`,
       },
     ],
   };

package/app/styles/mandatee-table-plugin.scss

@@ -5,7 +5,7 @@
     flex-direction: row;
     align-items: center;
     background-color: var(--au-blue-300);
-    padding: 0.6rem 0.6rem 0.6rem 0;
+    padding: 0.6rem 0.6rem 0.6rem 0.6rem;
     cursor: default;
   }
   .say-mandatee-table-content {

package/declarations/addon/components/variable-plugin/codelist/edit.d.ts

@@ -11,10 +11,10 @@ type Args = {
 export default class CodelistEditComponent extends Component<Args> {
     selectedCodelistOption?: CodeListOption | CodeListOption[];
     get controller(): SayController;
-    selectedCodelist: import("ember-resources/util/function").State<{
+    get selectedCodelist(): {
         node: import("prosemirror-model").Node;
         pos: number;
-    } | undefined>;
+    } | undefined;
     get source(): string;
     get codelistUri(): string | undefined;
     get showCard(): boolean;

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

@@ -13,7 +13,7 @@ type PersonNode = {
 export default class PersonEditComponent extends Component<Args> {
     showModal: boolean;
     get controller(): SayController;
-    selectedPersonNode: import("ember-resources/util/function").State<PersonNode | undefined>;
+    get selectedPersonNode(): PersonNode | undefined;
     get showCard(): boolean;
     get isEditing(): boolean;
     openModal(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lblod/ember-rdfa-editor-lblod-plugins",
-  "version": "22.1.0",
+  "version": "22.2.0",
   "description": "Ember addon providing lblod specific plugins for the ember-rdfa-editor",
   "keywords": [
     "ember-addon",