@lblod/ember-rdfa-editor-lblod-plugins 19.2.0 → 19.3.0

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

@@ -6,6 +6,7 @@ import { tracked } from '@glimmer/tracking';
 import not from 'ember-truth-helpers/helpers/not';
 import IntlService from 'ember-intl/services/intl';
 import t from 'ember-intl/helpers/t';
+import { trackedReset } from 'tracked-toolbox';
 import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import AuModal from '@appuniversum/ember-appuniversum/components/au-modal';
 import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
@@ -14,56 +15,142 @@ import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 
 import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/address-helpers';
+import {
+  convertWGS84CoordsToLambert,
+  GeoPos,
+  type GlobalCoordinates,
+  Place,
+  Point,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
 import { replaceSelectionWithAddress } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/node-utils';
+import { type LocationPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node';
+import { NodeContentsUtils } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/node-contents';
 import Edit from './edit';
+import LocationMap, { type LocationType } from './map';
+
+export type CurrentLocation = Address | GlobalCoordinates | undefined;
 
 interface Signature {
   Args: {
     controller: SayController;
+    config: LocationPluginConfig;
     defaultMunicipality?: string;
   };
   Element: HTMLLIElement;
 }
 
-export default class InsertAddressComponent extends Component<Signature> {
+export default class LocationPluginInsertComponent extends Component<Signature> {
   @service declare intl: IntlService;
   @tracked modalOpen = false;
-  @tracked addressToInsert?: Address;
+  @tracked chosenPoint: GeoPos | undefined;
   @tracked isLoading = false;
 
+  @trackedReset({
+    memo: 'selectedLocationNode',
+    update(component: LocationPluginInsertComponent) {
+      const currentLocation = component.selectedLocationNode?.value.attrs
+        .value as Address | Place | null;
+      return currentLocation instanceof Address ? currentLocation : undefined;
+    },
+  })
+  addressToInsert?: Address;
+
+  @trackedReset({
+    memo: 'selectedLocationNode',
+    update(component: LocationPluginInsertComponent) {
+      const currentLocation = component.selectedLocationNode?.value.attrs
+        .value as Address | Place | null;
+      return currentLocation instanceof Place
+        ? currentLocation.location.location
+        : undefined;
+    },
+  })
+  savedLocation: GeoPos | undefined;
+
+  @trackedReset({
+    memo: 'selectedLocationNode',
+    update(component: LocationPluginInsertComponent) {
+      const currentLocation = component.selectedLocationNode?.value.attrs
+        .value as Address | Place | null;
+      return currentLocation instanceof Place ? currentLocation.name : '';
+    },
+  })
+  placeName: string = '';
+
+  @trackedReset({
+    memo: 'selectedLocationNode',
+    update(component: LocationPluginInsertComponent) {
+      const currentLocation = component.selectedLocationNode?.value.attrs
+        .value as Address | Place | null;
+      return currentLocation instanceof Place ? 'place' : 'address';
+    },
+  })
+  locationType: LocationType = 'address';
+
+  @trackedReset({
+    memo: 'controller.activeEditorState',
+    update(component: LocationPluginInsertComponent) {
+      const { selection, schema } = component.controller.activeEditorState;
+      if (
+        selection instanceof NodeSelection &&
+        selection.node.type === schema.nodes.oslo_location
+      ) {
+        return { value: selection.node, pos: selection.from };
+      }
+      return null;
+    },
+  })
+  selectedLocationNode: ResolvedPNode | null = null;
+
   get controller() {
     return this.args.controller;
   }
 
+  get nodeContentsUtils() {
+    return new NodeContentsUtils(this.args.config);
+  }
+
   get documentLanguage() {
     return this.controller.documentLanguage;
   }
 
   get modalTitle() {
-    return this.selectedAddressVariable
+    return this.selectedLocationNode
       ? this.intl.t('location-plugin.modal.edit')
       : this.intl.t('location-plugin.modal.insert');
   }
 
-  get selectedAddressVariable(): ResolvedPNode | null {
-    const { selection, schema } = this.controller.activeEditorState;
-    if (
-      selection instanceof NodeSelection &&
-      selection.node.type === schema.nodes.address
-    ) {
-      return { value: selection.node, pos: selection.from };
-    }
-    return null;
+  get canInsert() {
+    return !!this.controller.activeEditorView.props.nodeViews?.oslo_location;
   }
 
-  get canInsertAddress() {
-    if (this.controller.activeEditorView.props.nodeViews?.address) {
-      return true;
+  get disableConfirm() {
+    if (this.locationType === 'place') {
+      return !this.selectedLocationNode || !this.placeName || !this.chosenPoint;
     } else {
-      return false;
+      return !this.selectedLocationNode || !this.addressToInsert;
     }
   }
 
+  @action
+  setLocationType(type: LocationType) {
+    this.locationType = type;
+  }
+
+  @action
+  setChosenPoint(point: GlobalCoordinates) {
+    // Since we only use the global coordinates, we don't have to do a conversion to lambert here
+    this.chosenPoint = {
+      lambert: { x: 0, y: 0 },
+      global: point,
+    };
+  }
+
+  @action
+  setPlaceName(name: string) {
+    this.placeName = name;
+  }
+
   @action
   closeModal() {
     this.modalOpen = false;
@@ -71,7 +158,7 @@ export default class InsertAddressComponent extends Component<Signature> {
 
   @action
   insertOrEditAddress() {
-    if (!this.selectedAddressVariable) {
+    if (!this.selectedLocationNode) {
       replaceSelectionWithAddress(
         this.controller,
         this.intl.t('location-plugin.default-label', {
@@ -93,13 +180,40 @@ export default class InsertAddressComponent extends Component<Signature> {
   }
 
   @action
-  setAddress() {
-    if (this.selectedAddressVariable && this.addressToInsert) {
-      const { pos } = this.selectedAddressVariable;
-      this.controller.withTransaction((tr) => {
-        return tr.setNodeAttribute(pos, 'value', this.addressToInsert);
-      });
-      this.modalOpen = false;
+  confirmLocation() {
+    if (this.selectedLocationNode) {
+      let toInsert: Address | Place | undefined;
+      const { pos } = this.selectedLocationNode;
+      if (this.locationType === 'address' && this.addressToInsert) {
+        toInsert = this.addressToInsert;
+        this.controller.withTransaction((tr) => {
+          return tr.setNodeAttribute(pos, 'value', toInsert);
+        });
+        this.modalOpen = false;
+      } else if (
+        this.locationType === 'place' &&
+        this.chosenPoint?.global &&
+        this.placeName
+      ) {
+        convertWGS84CoordsToLambert(this.chosenPoint.global).then((lambert) => {
+          toInsert = new Place({
+            uri: this.nodeContentsUtils.fallbackPlaceUri(),
+            name: this.placeName,
+            location: new Point({
+              uri: this.nodeContentsUtils.fallbackPointUri(),
+              location: {
+                lambert,
+                global: this.chosenPoint?.global,
+              },
+            }),
+          });
+          this.controller.withTransaction((tr) => {
+            return tr.setNodeAttribute(pos, 'value', toInsert);
+          });
+          this.modalOpen = false;
+          this.chosenPoint = undefined;
+        });
+      }
     }
   }
 
@@ -110,9 +224,9 @@ export default class InsertAddressComponent extends Component<Signature> {
         @iconAlignment='left'
         @skin='link'
         {{on 'click' this.insertOrEditAddress}}
-        @disabled={{not this.canInsertAddress}}
+        @disabled={{not this.canInsert}}
       >
-        {{#if this.selectedAddressVariable}}
+        {{#if this.selectedLocationNode}}
           {{t 'location-plugin.modal.edit'}}
         {{else}}
           {{t 'location-plugin.modal.insert'}}
@@ -120,24 +234,42 @@ export default class InsertAddressComponent extends Component<Signature> {
       </AuButton>
     </li>
     <AuModal
+      class='location-modal'
       @modalOpen={{this.modalOpen}}
       @closeModal={{this.closeModal}}
       @title={{this.modalTitle}}
+      @size='large'
       as |modal|
     >
       <modal.Body>
-        <Edit
-          @controller={{@controller}}
-          @selectedAddressVariable={{this.selectedAddressVariable}}
-          @setAddressToInsert={{this.setAddressToInsert}}
-          @setIsLoading={{this.setIsLoading}}
-          @defaultMunicipality={{@defaultMunicipality}}
-        />
+        <div class='au-o-grid au-o-grid--tiny'>
+          <div class='edit-form au-o-grid__item au-u-1-2@small'>
+            <Edit
+              @locationType={{this.locationType}}
+              @setLocationType={{this.setLocationType}}
+              @selectedLocationNode={{this.selectedLocationNode}}
+              @setAddressToInsert={{this.setAddressToInsert}}
+              @setIsLoading={{this.setIsLoading}}
+              @defaultMunicipality={{@defaultMunicipality}}
+              @placeName={{this.placeName}}
+              @setPlaceName={{this.setPlaceName}}
+              @nodeContentsUtils={{this.nodeContentsUtils}}
+            />
+          </div>
+          <LocationMap
+            class='au-o-grid__item au-u-1-2@small au-o-box-large'
+            @address={{this.addressToInsert}}
+            @locationType={{this.locationType}}
+            @location={{this.chosenPoint}}
+            @existingLocation={{this.savedLocation}}
+            @setLocation={{this.setChosenPoint}}
+          />
+        </div>
       </modal.Body>
       <modal.Footer>
         <AuButton
-          @disabled={{(not this.addressToInsert)}}
-          {{on 'click' this.setAddress}}
+          @disabled={{this.disableConfirm}}
+          {{on 'click' this.confirmLocation}}
         >
           {{#if this.isLoading}}
             <AuLoader @hideMessage={{true}} @inline={{true}}>

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

@@ -0,0 +1,131 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import and from 'ember-truth-helpers/helpers/and';
+import eq from 'ember-truth-helpers/helpers/eq';
+import t from 'ember-intl/helpers/t';
+import { LeafletMap } from 'ember-leaflet';
+import { type LeafletMouseEvent } from 'leaflet';
+import { restartableTask } from 'ember-concurrency';
+import { task as trackedTask } from 'ember-resources/util/ember-concurrency';
+import AuLoader from '@appuniversum/ember-appuniversum/components/au-loader';
+import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/address-helpers';
+import {
+  convertLambertCoordsToWGS84,
+  GeoPos,
+  type GlobalCoordinates,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/geo-helpers';
+
+export type LocationType = 'address' | 'place';
+
+const COORD_SYSTEM_CENTER: GlobalCoordinates = {
+  lng: 4.450822554431,
+  lat: 50.50526730529,
+};
+
+function displayLocation(location: GeoPos | undefined) {
+  const { lambert } = location ?? {};
+  return lambert
+    ? `[x: ${lambert.x.toFixed(2)}, y: ${lambert.y.toFixed(2)}]`
+    : '';
+}
+
+interface Signature {
+  Args: {
+    address: Address | undefined;
+    locationType: LocationType;
+    location?: GeoPos;
+    setLocation: (loc: GlobalCoordinates) => void;
+    existingLocation?: GeoPos;
+  };
+  Element: HTMLElement;
+}
+
+async function ensureGlobalCoordinates(geoPos: GeoPos) {
+  if (geoPos.global) {
+    return geoPos.global;
+  }
+  return await convertLambertCoordsToWGS84(geoPos.lambert);
+}
+
+export default class LocationPluginMapComponent extends Component<Signature> {
+  @tracked mapCenter = COORD_SYSTEM_CENTER;
+  @tracked zoom = 7;
+  @tracked existingLocationCoords: GlobalCoordinates | undefined;
+
+  addressLatLngLookup = restartableTask(
+    async (): Promise<GlobalCoordinates | undefined> => {
+      const { address, existingLocation } = this.args;
+      if (address) {
+        this.mapCenter = await ensureGlobalCoordinates(
+          address.location.location,
+        );
+        this.zoom = 19;
+      } else if (existingLocation) {
+        this.mapCenter = await ensureGlobalCoordinates(existingLocation);
+        this.existingLocationCoords = this.mapCenter;
+        this.zoom = 19;
+      }
+      return COORD_SYSTEM_CENTER;
+    },
+  );
+  addressLatLng = trackedTask<GlobalCoordinates | undefined>(
+    this,
+    this.addressLatLngLookup,
+    () => [this.args.address, this.args.existingLocation],
+  );
+
+  get doRenderMap() {
+    return this.addressLatLng.value && this.zoom;
+  }
+
+  @action
+  onMapClick(event: LeafletMouseEvent) {
+    if (this.args.locationType === 'place') {
+      this.args.setLocation(event.latlng);
+    }
+  }
+
+  <template>
+    <div class='map-wrapper' ...attributes>
+      {{#if this.addressLatLng.isRunning}}
+        <AuLoader @hideMessage={{true}}>
+          {{t 'common.initialBounds.loading'}}
+        </AuLoader>
+      {{else if this.addressLatLng.value}}
+        <LeafletMap
+          @center={{this.mapCenter}}
+          @zoom={{this.zoom}}
+          @onClick={{this.onMapClick}}
+          as |layers|
+        >
+          <layers.tile
+            @url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+            @attribution='&copy; <a target="_blank" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          />
+          {{#if (and @address (eq @locationType 'address'))}}
+            <layers.marker @location={{this.mapCenter}} as |marker|>
+              <marker.popup>
+                {{@address.formatted}}
+              </marker.popup>
+            </layers.marker>
+          {{/if}}
+          {{#if this.existingLocationCoords}}
+            <layers.marker
+              @opacity={{if @location 0.3 1}}
+              @location={{this.existingLocationCoords}}
+              as |marker|
+            >
+              <marker.popup>
+                {{displayLocation @existingLocation}}
+              </marker.popup>
+            </layers.marker>
+          {{/if}}
+          {{#if (and @location (eq @locationType 'place'))}}
+            <layers.marker @location={{@location.global}} />
+          {{/if}}
+        </LeafletMap>
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -0,0 +1,67 @@
+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';
+
+import { PNode, SayController } from '@lblod/ember-rdfa-editor';
+import { Address } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/location-plugin/utils/address-helpers';
+import { getOutgoingTriple } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/namespace';
+import { EXT } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
+
+type Signature = {
+  Args: {
+    selectNode: () => void;
+    getPos: () => number | undefined;
+    node: PNode;
+    controller: SayController;
+  };
+  Element: AuPillSignature['Element'];
+};
+
+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;
+  }
+
+  get label() {
+    if (this.address) return '';
+    return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
+  }
+
+  <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>
+  </template>
+}

package/addon/components/snippet-plugin/nodes/placeholder.gts

@@ -4,6 +4,8 @@ import t from 'ember-intl/helpers/t';
 import AuAlert from '@appuniversum/ember-appuniversum/components/au-alert';
 import { PlusTextIcon } from '@appuniversum/ember-appuniversum/components/icons/plus-text';
 import { type EmberNodeArgs } from '@lblod/ember-rdfa-editor/utils/_private/ember-node';
+import { service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
 
 interface Signature {
   Args: EmberNodeArgs;
@@ -13,15 +15,39 @@ interface Signature {
 // class to allow for type checking
 // eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class SnippetPluginPlaceholder extends Component<Signature> {
+  @service declare intl: IntlService;
+  get listNames() {
+    return this.args.node.attrs.listNames;
+  }
+  get isSingleList() {
+    return this.listNames.length === 1;
+  }
+  get alertTitle() {
+    if (this.isSingleList) {
+      return this.intl.t('snippet-plugin.placeholder.title-single', {
+        listName: this.listNames[0],
+      });
+    } else {
+      return this.intl.t('snippet-plugin.placeholder.title-multiple');
+    }
+  }
   <template>
     <AuAlert
-      @title={{t 'snippet-plugin.placeholder.title'}}
+      @title={{this.alertTitle}}
       @skin='warning'
       @icon={{PlusTextIcon}}
       @size='small'
       class='say-snippet-placeholder'
       {{on 'click' @selectNode}}
     >
+      {{#unless this.isSingleList}}
+        {{t 'snippet-plugin.placeholder.active-lists'}}
+        <ul>
+          {{#each this.listNames as |listName|}}
+            <li>{{listName}}</li>
+          {{/each}}
+        </ul>
+      {{/unless}}
       {{t 'snippet-plugin.placeholder.text'}}
     </AuAlert>
   </template>

package/addon/components/snippet-plugin/snippet-insert-placeholder.gts

@@ -35,8 +35,12 @@ export default class SnippetPluginSnippetInsertPlaceholder extends Component<Sig
   }
 
   @action
-  insertPlaceholder(listIds: string[]) {
-    const node = createSnippetPlaceholder(listIds, this.args.controller.schema);
+  insertPlaceholder(listIds: string[], listNames: string[]) {
+    const node = createSnippetPlaceholder(
+      listIds,
+      listNames,
+      this.args.controller.schema,
+    );
 
     this.args.controller.withTransaction(
       (tr) => {

package/addon/components/snippet-plugin/snippet-list/snippet-list-modal.ts

@@ -19,7 +19,7 @@ import { trackedReset } from 'tracked-toolbox';
 interface Signature {
   Args: {
     config: SnippetPluginConfig;
-    onSaveSnippetListIds: (listIds: string[]) => void;
+    onSaveSnippetListIds: (listIds: string[], listNames: string[]) => void;
     assignedSnippetListsIds: string[];
     closeModal: () => void;
     open: boolean;
@@ -50,7 +50,15 @@ export default class SnippetListModalComponent extends Component<Signature> {
 
   @action
   saveAndClose() {
-    this.args.onSaveSnippetListIds(this.assignedSnippetListsIds);
+    const snippetListNames: string[] = this.snippetListResource.value
+      ?.filter((snippetList) =>
+        this.assignedSnippetListsIds.includes(snippetList.id as string),
+      )
+      .map((snippetList) => snippetList.label) as string[];
+    this.args.onSaveSnippetListIds(
+      this.assignedSnippetListsIds,
+      snippetListNames,
+    );
     this.args.closeModal();
     // Clear selection for next time
     this.assignedSnippetListsIds = [];

package/addon/components/snippet-plugin/snippet-list-select-rdfa.ts

@@ -7,7 +7,7 @@ import {
   getAssignedSnippetListsIdsFromProperties,
   getSnippetListIdsProperties,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/utils/rdfa-predicate';
-import { updateSnippetIds } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands';
+import { updateSnippetPlaceholder } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/snippet-plugin/commands';
 import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import { SayController } from '@lblod/ember-rdfa-editor';
 import { OutgoingTriple } from '@lblod/ember-rdfa-editor/core/rdfa-processor';
@@ -49,13 +49,15 @@ export default class SnippetListSelectRdfaComponent extends Component<Args> {
     );
   }
 
-  saveChanges = (snippetIds: string[]) => {
+  saveChanges = (snippetIds: string[], snippetNames: string[]) => {
     if (this.currentResource) {
       this.args.controller?.doCommand(
-        updateSnippetIds({
+        updateSnippetPlaceholder({
           resource: this.currentResource,
           oldSnippetProperties: this.snippetListIdsProperties ?? [],
           newSnippetIds: snippetIds,
+          node: this.node,
+          snippetNames,
         }),
         {
           view: this.args.controller.mainEditorView,

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

@@ -44,6 +44,7 @@ export default class AddressNodeviewComponent extends Component<Args> {
   }
 
   get label() {
+    if (this.address) return '';
     return getOutgoingTriple(this.node.attrs, EXT('label'))?.object.value;
   }
 }

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

@@ -60,6 +60,9 @@ export default class DateNodeviewComponent extends Component<Args> {
   }
 
   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/nodeview.ts

@@ -38,6 +38,9 @@ export default class LocationNodeViewComponent extends Component<EmberNodeArgs>
   }
 
   get label() {
+    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
+      return '';
+    }
     return this.args.node.attrs.label as string;
   }
 }

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

@@ -93,6 +93,7 @@ export default class NumberNodeviewComponent extends Component<Args> {
   }
 
   get label(): string | undefined {
+    if (this.inputNumber) return '';
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 

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

@@ -77,7 +77,9 @@ export default class TextVariableInsertComponent extends Component<Args> {
           },
         ],
       },
-      this.schema.text('text'),
+      this.schema.node('placeholder', {
+        placeholderText: 'text',
+      }),
     );
 
     this.label = undefined;

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

@@ -41,6 +41,9 @@ export default class VariableNodeViewComponent extends Component<EmberNodeArgs>
   }
 
   get label() {
+    if (this.innerView?.state.doc.firstChild?.type.name !== 'placeholder') {
+      return '';
+    }
     return getOutgoingTriple(this.args.node.attrs, EXT('label'))?.object.value;
   }
 }