@lblod/ember-rdfa-editor-lblod-plugins 16.3.0 → 17.0.0-dev.f473cdfb5868261b49cdae52ea2558970c082d01

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

@@ -1,15 +1,43 @@
 import Component from '@glimmer/component';
-import { SayController, SayView } from '@lblod/ember-rdfa-editor';
+import { NodeSelection, ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
+import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
 import { tracked } from '@glimmer/tracking';
-import { addressView } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
+import { action } from '@ember/object';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
 
-type Args = {
-  controller: SayController;
-};
+export default class LocationNodeViewComponent extends Component<EmberNodeArgs> {
+  PencilIcon = PencilIcon;
 
-export default class LocationNodeViewComponent extends Component<Args> {
-  @tracked nodeViews = {
-    address: addressView(this.args.controller),
-  };
   @tracked innerView?: SayView;
+
+  get plugins(): ProsePlugin[] {
+    return [editableNodePlugin(this.args.getPos)];
+  }
+  @action
+  onClick() {
+    if (this.innerView) {
+      if (this.innerView.state.doc.firstChild?.type.name === 'placeholder') {
+        this.innerView.focus();
+        // Use request animation frame to only change the selection when the focus has been established
+        window.requestAnimationFrame(() => {
+          if (this.innerView) {
+            const tr = this.innerView.state.tr;
+            tr.setSelection(NodeSelection.create(this.innerView?.state.doc, 0));
+            this.innerView?.dispatch(tr);
+          }
+        });
+      } else {
+        this.innerView.focus();
+      }
+    }
+  }
+  @action
+  initEditor(view: SayView) {
+    this.innerView = view;
+  }
+
+  get label() {
+    return this.args.node.attrs.label as string;
+  }
 }

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

@@ -1,4 +1,5 @@
 
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput @label={{this.label}} @updateLabel={{this.updateLabel}}/>
 </AuFormRow>

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

@@ -7,6 +7,13 @@ import { isNumber } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/strings';
 import { service } from '@ember/service';
 import IntlService from 'ember-intl/services/intl';
 import { modifier } from 'ember-modifier';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -85,17 +92,37 @@ export default class NumberInsertComponent extends Component<Args> {
     if (this.numberVariableError !== '') return;
 
     const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const subject = mappingResource;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
 
     const defaultLabel = this.intl.t('variable.number.label', {
       locale: this.documentLanguage,
     });
+    const label = this.label ?? defaultLabel;
+    const variableId = uuidv4();
 
     const node = this.schema.nodes.number.create({
-      label: this.label ?? defaultLabel,
-      value: null,
-      mappingResource,
-      variableInstance,
+      subject,
+      rdfaNodeType: 'resource',
+      __rdfaId: variableId,
+      properties: [
+        {
+          predicate: RDF('type').full,
+          object: sayDataFactory.namedNode(EXT('Mapping').full),
+        },
+        {
+          predicate: EXT('instance').full,
+          object: sayDataFactory.namedNode(variableInstance),
+        },
+        {
+          predicate: EXT('label').full,
+          object: sayDataFactory.literal(label),
+        },
+        {
+          predicate: DCT('type').full,
+          object: sayDataFactory.literal('number'),
+        },
+      ],
       ...(isNumber(this.minimumValue) && {
         minimumValue: Number(this.minimumValue),
       }),
@@ -108,11 +135,8 @@ export default class NumberInsertComponent extends Component<Args> {
     this.minimumValue = '';
     this.maximumValue = '';
 
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

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

@@ -1,9 +1,10 @@
+{{! @glint-nocheck: not typesafe yet }}
 <this.Velcro
   @placement='bottom-start'
   @offsetOptions={{hash mainAxis=3}} as |velcro|
 >
   <AuPill
-    @icon='pencil'
+    @icon={{this.PencilIcon}}
     @iconAlignment='right'
     class='variable atomic'
     {{velcro.hook}}
@@ -16,9 +17,9 @@
         {{this.translations.placeholder}}
       </span>
     {{/if}}
-    {{#if @node.attrs.label}}
+    {{#if this.label}}
       <span class='label'>
-        ({{@node.attrs.label}})
+        ({{this.label}})
       </span>
     {{/if}}
   </AuPill>
@@ -45,8 +46,9 @@
             @name='writtenNumber'
             @checked={{this.writtenNumber}}
             @onChange={{this.changeWrittenNumber}}
-            @label={{t 'variable.number.written-number-label'}}
-          />
+          >
+            {{t 'variable.number.written-number-label'}}
+          </AuToggleSwitch>
           {{#if this.errorMessage}}
             <AuHelpText @small={{true}} @error={{true}}>
               {{this.errorMessage}}

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

@@ -10,9 +10,14 @@ import { service } from '@ember/service';
 import intlService from 'ember-intl/services/intl';
 import { localCopy } from 'tracked-toolbox';
 import { isBlank } from '@ember/utils';
+import { Velcro } from 'ember-velcro';
+import { isRdfaAttrs } from '@lblod/ember-rdfa-editor/core/schema';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 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 { Velcro } from 'ember-velcro';
+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;
@@ -25,9 +30,10 @@ type Args = {
 };
 
 export default class NumberNodeviewComponent extends Component<Args> {
+  PencilIcon = PencilIcon;
   Velcro = Velcro;
 
-  @localCopy('args.node.attrs.value', '') declare inputNumber: string;
+  @localCopy('number', '') declare inputNumber: string;
   @localCopy('args.node.attrs.writtenNumber', false)
   declare writtenNumber: boolean;
   @service declare intl: intlService;
@@ -57,9 +63,12 @@ export default class NumberNodeviewComponent extends Component<Args> {
     return this.args.node;
   }
 
-  get formattedNumber() {
-    const value = this.node.attrs.value as string;
+  get number(): string | null | undefined {
+    return getOutgoingTriple(this.node.attrs, EXT('content'))?.object.value;
+  }
 
+  get formattedNumber() {
+    const value = this.number;
     if (!isNumber(value)) {
       return value;
     }
@@ -82,6 +91,10 @@ export default class NumberNodeviewComponent extends Component<Args> {
     return this.node.attrs.maximumValue as number;
   }
 
+  get label(): string | undefined {
+    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
+  }
+
   @action onInputNumberChange(event: InputEvent) {
     this.inputNumber = (event.target as HTMLInputElement).value;
     this.validateAndSave();
@@ -125,7 +138,21 @@ export default class NumberNodeviewComponent extends Component<Args> {
   @action
   validateAndSave() {
     if (!this.errorMessage) {
-      this.args.updateAttribute('value', this.inputNumber);
+      const attrs = this.node.attrs;
+      const properties =
+        isRdfaAttrs(attrs) && attrs.rdfaNodeType === 'resource'
+          ? attrs.properties
+          : [];
+      const newProperties = properties.filter((prop) => {
+        return !EXT('content').matches(prop.predicate);
+      });
+      if (this.inputNumber) {
+        newProperties.push({
+          predicate: EXT('content').full,
+          object: sayDataFactory.literal(this.inputNumber),
+        });
+      }
+      this.args.updateAttribute('properties', newProperties);
     }
   }
 }

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

@@ -1,3 +1,4 @@
+{{! @glint-nocheck: not typesafe yet }}
 <AuFormRow>
   <VariablePlugin::Utils::LabelInput 
     @label={{this.label}} 

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

@@ -2,9 +2,16 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
-import { SayController } from '@lblod/ember-rdfa-editor';
+import { type SayController } from '@lblod/ember-rdfa-editor';
+import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
 import { v4 as uuidv4 } from 'uuid';
 import IntlService from 'ember-intl/services/intl';
+import {
+  DCT,
+  EXT,
+  RDF,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 
 type Args = {
   controller: SayController;
@@ -33,29 +40,50 @@ export default class TextVariableInsertComponent extends Component<Args> {
 
   @action
   insert() {
-    const mappingResource = `http://data.lblod.info/mappings/${uuidv4()}`;
+    const mappingSubject = `http://data.lblod.info/mappings/${uuidv4()}`;
     const variableInstance = `http://data.lblod.info/variables/${uuidv4()}`;
+    const variableId = uuidv4();
 
     const placeholder = this.intl.t('variable.text.label', {
       locale: this.documentLanguage,
     });
 
+    const label = this.label ?? placeholder;
     const node = this.schema.nodes.text_variable.create(
       {
-        label: this.label ?? placeholder,
-        mappingResource,
-        variableInstance,
+        subject: mappingSubject,
+        rdfaNodeType: 'resource',
+        __rdfaId: variableId,
+        properties: [
+          {
+            predicate: RDF('type').full,
+            object: sayDataFactory.namedNode(EXT('Mapping').full),
+          },
+          {
+            predicate: EXT('instance').full,
+            object: sayDataFactory.namedNode(variableInstance),
+          },
+          {
+            predicate: EXT('label').full,
+            object: sayDataFactory.literal(label),
+          },
+          {
+            predicate: DCT('type').full,
+            object: sayDataFactory.literal('text'),
+          },
+          {
+            predicate: EXT('content').full,
+            object: sayDataFactory.contentLiteral(),
+          },
+        ],
       },
-      this.schema.node('placeholder', { placeholderText: placeholder }),
+      this.schema.text('text'),
     );
 
     this.label = undefined;
 
-    this.controller.withTransaction(
-      (tr) => {
-        return tr.replaceSelectionWith(node);
-      },
-      { view: this.controller.mainEditorView },
-    );
+    this.controller.doCommand(replaceSelectionWithAndSelectNode(node), {
+      view: this.controller.mainEditorView,
+    });
   }
 }

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

@@ -1,16 +1,20 @@
-<AuPill @icon="pencil" @iconAlignment="right" class="variable" {{on 'click' this.onClick}}>
-  <EmberNode::EmbeddedEditor 
-    @controller={{@controller}} 
-    @node={{@node}} 
-    @view={{@view}} 
-    @getPos={{@getPos}} 
+{{! @glint-nocheck: not typesafe yet }}
+<AuPill @icon={{this.PencilIcon}} @iconAlignment="right" class="variable" {{on 'click' this.onClick}}>
+  <EmberNode::EmbeddedEditor
+    @controller={{@controller}}
+    @node={{@node}}
+    @view={{@view}}
+    @getPos={{@getPos}}
     @selected={{@selected}}
     @initEditor={{this.initEditor}}
     @nodeViews={{@nodeViews}}
+    @plugins={{this.plugins}}
+    @decorations={{@decorations}}
+    @contentDecorations={{@contentDecorations}}
   />
-  {{#if @node.attrs.label}}
+  {{#if this.label}}
     <span class="label">
-      ({{@node.attrs.label}})
+      ({{this.label}})
     </span>
   {{/if}}
 </AuPill>

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

@@ -1,19 +1,22 @@
 import Component from '@glimmer/component';
-import {
-  NodeSelection,
-  SayController,
-  SayView,
-} from '@lblod/ember-rdfa-editor';
+import { NodeSelection, ProsePlugin, SayView } from '@lblod/ember-rdfa-editor';
+import { editableNodePlugin } from '@lblod/ember-rdfa-editor/plugins/editable-node';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
 
-type Args = {
-  controller: SayController;
-};
+import { EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/ember-node';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+export default class VariableNodeViewComponent extends Component<EmberNodeArgs> {
+  PencilIcon = PencilIcon;
 
-export default class VariableNodeViewComponent extends Component<Args> {
   @tracked innerView?: SayView;
 
+  get plugins(): ProsePlugin[] {
+    return [editableNodePlugin(this.args.getPos)];
+  }
   @action
   onClick() {
     if (this.innerView) {
@@ -36,4 +39,8 @@ export default class VariableNodeViewComponent extends Component<Args> {
   initEditor(view: SayView) {
     this.innerView = view;
   }
+
+  get label() {
+    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
+  }
 }

package/addon/components/worship-plugin/administrative-unit-picker.hbs

@@ -0,0 +1,16 @@
+{{! @glint-nocheck: not typesafe yet }}
+<PowerSelect
+  @loadingMessage={{t 'common.search.loading'}}
+  @searchMessage={{t 'worship-plugin.modal.search.search'}}
+  @noMatchesMessage={{t 'worship-plugin.modal.search.no-results'}}
+  @placeholderMessage={{t 'worship-plugin.modal.fields.admin-unit'}}
+  @allowClear={{true}}
+  @renderInPlace={{true}}
+  @searchEnabled={{true}}
+  @search={{perform this.searchUnits}}
+  @selected={{@selectedUnit}}
+  @onChange={{@onSelectUnit}}
+  ...attributes
+  as |unit|>
+  {{unit.label}}
+</PowerSelect>

package/addon/components/worship-plugin/administrative-unit-picker.ts

@@ -0,0 +1,38 @@
+import Component from '@glimmer/component';
+import { restartableTask, timeout } from 'ember-concurrency';
+import { AdministrativeUnit } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { fetchAdministrativeUnits } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchAdministrativeUnits';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+
+interface Args {
+  config: WorshipPluginConfig;
+  selectedUnit?: AdministrativeUnit;
+  onSelectUnit: (unit: AdministrativeUnit) => void;
+}
+
+export default class AdministrativeUnitPickerComponent extends Component<Args> {
+  searchUnits = restartableTask(async (search: string) => {
+    await timeout(200);
+
+    const abortController = new AbortController();
+    try {
+      const units = await fetchAdministrativeUnits({
+        search,
+        config: this.args.config,
+        abortSignal: abortController.signal,
+      });
+
+      return units;
+    } catch (err) {
+      // ember-power-select doesn't seem to have a way to display errors.
+      console.error(
+        'Error occured when searching for administrative units',
+        err,
+      );
+      // We just re-throw to keep TS happy, ember-concurrency just swallows it.
+      throw err;
+    } finally {
+      abortController.abort();
+    }
+  });
+}

package/addon/components/worship-plugin/insert.hbs

@@ -0,0 +1,18 @@
+{{! @glint-nocheck: not typesafe yet }}
+<li class='au-c-list__item'>
+  <AuButton
+    @icon={{this.AddIcon}}
+    @iconAlignment='left'
+    @skin='link'
+    {{on 'click' this.openModal}}
+  >
+    {{t 'worship-plugin.insert.title'}}
+  </AuButton>
+</li>
+
+<WorshipPlugin::SearchModal
+  @open={{this.showModal}}
+  @closeModal={{this.closeModal}}
+  @config={{@config}}
+  @onInsert={{this.onInsert}}
+/>

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

@@ -0,0 +1,41 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
+
+import { SayController } from '@lblod/ember-rdfa-editor';
+import { WorshipPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin';
+import { WorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/fetchWorshipServices';
+import { insertWorshipService } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/worship-plugin/utils/insertWorshipService';
+
+interface Args {
+  controller: SayController;
+  config: WorshipPluginConfig;
+}
+
+export default class WorshipPluginInsertComponent extends Component<Args> {
+  AddIcon = AddIcon;
+
+  @tracked showModal = false;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  @action
+  openModal() {
+    this.controller.focus();
+    this.showModal = true;
+  }
+
+  @action
+  closeModal() {
+    this.showModal = false;
+  }
+
+  @action
+  onInsert(service: WorshipService) {
+    insertWorshipService(this.controller, service);
+    this.closeModal();
+  }
+}

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

@@ -0,0 +1,46 @@
+<AuTable>
+  <:header>
+    <tr class='au-c-data-table__header-title'>
+      <th>
+        <WorshipPlugin::SortableTableHeader
+          @field='label'
+          @label={{t 'worship-plugin.modal.fields.name'}}
+          @sort={{@sort}}
+          @setSort={{@setSort}}
+        />
+      </th>
+      <th />
+    </tr>
+  </:header>
+  <:body>
+    {{#unless (or @services.isRunning @error)}}
+      {{#if @services.value.totalCount}}
+        {{#each @services.value.results as |row|}}
+          <tr>
+            <td>{{row.label}}</td>
+            <td class='au-u-text-center'>
+              <AuButton
+                {{on 'click' (fn @insert row)}}
+              >
+                {{t 'worship-plugin.modal.insert'}}
+              </AuButton>
+            </td>
+          </tr>
+        {{/each}}
+      {{/if}}
+    {{/unless}}
+  </:body>
+</AuTable>
+{{#if @services.isRunning}}
+  <div class='au-u-margin'>
+    <Common::Search::Loading />
+  </div>
+{{else}}
+  {{#if @error}}
+    <Common::Search::AlertLoadError @error={{@error}} />
+  {{else}}
+    {{#unless @services.value.totalCount}}
+      <Common::Search::AlertNoItems />
+    {{/unless}}
+  {{/if}}
+{{/if}}

package/addon/components/worship-plugin/search-modal.hbs

@@ -0,0 +1,79 @@
+{{! @glint-nocheck: not typesafe yet }}
+<AuModal
+  class='worship-modal'
+  @modalOpen={{@open}}
+  @closeModal={{this.closeModal}}
+  @title={{t 'worship-plugin.modal.title'}}
+  @size='large'
+  @padding='none'
+  as |modal|
+>
+  <modal.Body>
+    <AuMainContainer @scroll={{true}} class='worship-modal--main-container' as |mc|>
+      <mc.sidebar>
+        <div class='au-c-sidebar'>
+          <div class='au-c-sidebar__content au-u-padding'>
+            <AuHeading @level='3' @skin='4' class='au-u-padding-bottom-small'>
+              {{t 'worship-plugin.modal.search.title'}}
+            </AuHeading>
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='searchTerm'
+            >
+              {{t 'worship-plugin.modal.fields.name'}}
+            </AuLabel>
+            <AuNativeInput
+              @type='text'
+              @width='block'
+              id='searchTerm'
+              value={{this.searchText}}
+              placeholder={{t 'worship-plugin.modal.search.placeholder'}}
+              {{on 'input' this.setInputSearchText}}
+            />
+            <AuLabel
+              class='au-margin-bottom-small'
+              for='admin-unit-select'
+            >
+              {{t 'worship-plugin.modal.fields.admin-unit'}}
+            </AuLabel>
+            <WorshipPlugin::AdministrativeUnitPicker
+              id='admin-unit-select'
+              @config={{@config}}
+              @selectedUnit={{this.administrativeUnit}}
+              @onSelectUnit={{this.setAdministrativeUnit}}
+            />
+          </div>
+        </div>
+      </mc.sidebar>
+      <mc.content @scroll={{true}}>
+        <div class='worship-modal--list-container'>
+          <WorshipPlugin::List
+            @error={{this.error}}
+            @services={{this.servicesResource}}
+            @sort={{this.sort}}
+            @setSort={{this.setSort}}
+            @insert={{@onInsert}}
+          />
+        </div>
+        {{#if this.servicesResource.value.totalCount}}
+          {{#let
+            (pagination
+              page=this.pageNumber pageSize=this.pageSize count=this.servicesResource.value.totalCount
+            )
+            as |pg|
+          }}
+            <Pagination::PaginationView
+              @totalCount={{pg.count}}
+              @rangeStart={{pg.pageStart}}
+              @rangeEnd={{pg.pageEnd}}
+              @onNextPage={{this.nextPage}}
+              @onPreviousPage={{this.previousPage}}
+              @isFirstPage={{not pg.hasPreviousPage}}
+              @isLastPage={{not pg.hasNextPage}}
+            />
+          {{/let}}
+        {{/if}}
+      </mc.content>
+    </AuMainContainer>
+  </modal.Body>
+</AuModal>