@lblod/ember-rdfa-editor-lblod-plugins 38.2.0 → 38.3.0-dev.d90fd82598dbe0c2a18f7ced268012b9d80a4352

package/.changeset/clean-trains-punch.md

@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor-lblod-plugins': patch
+---
+
+Fix floating window position on date variable

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @lblod/ember-rdfa-editor-lblod-plugins
 
+## 38.3.0
+
+### Minor Changes
+
+- [#676](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/676) [`c7c44ec`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/c7c44ec8b883dbcc3330f33c0638d764684eb1e9) Thanks [@kobemertens](https://github.com/kobemertens)! - Add document-local suggestions for person variables
+
+- [#678](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/678) [`294b023`](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/commit/294b023cdd48d946d8c2b49ec2c5ae947d97f64a) Thanks [@kobemertens](https://github.com/kobemertens)! - Add floating edit window for date variable nodes
+
 ## 38.2.0
 
 ### Minor Changes

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

@@ -1,10 +1,14 @@
 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 { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
+import {
+  closeLmbModal,
+  getLmbModalsPluginState,
+  LmbPluginConfig,
+  openLmbModal,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import { replaceSelectionWithAndSelectNode } from '@lblod/ember-rdfa-editor-lblod-plugins/commands';
 import { service } from '@ember/service';
@@ -22,7 +26,9 @@ export default class LmbPluginInsertComponent extends Component<Args> {
   @service declare intl: IntlService;
   AddIcon = AddIcon;
 
-  @tracked showModal = false;
+  get showModal() {
+    return getLmbModalsPluginState(this.controller.mainEditorState)?.modalOpen;
+  }
 
   get controller() {
     return this.args.controller;
@@ -31,12 +37,12 @@ export default class LmbPluginInsertComponent extends Component<Args> {
   @action
   openModal() {
     this.controller.focus();
-    this.showModal = true;
+    openLmbModal(this.controller.mainEditorView);
   }
 
   @action
   closeModal() {
-    this.showModal = false;
+    closeLmbModal(this.controller.mainEditorView);
   }
 
   @action

package/addon/components/variable-plugin/date/{date-time-picker.ts → date-picker.gts}

@@ -4,27 +4,20 @@ import { service } from '@ember/service';
 import { localCopy } from 'tracked-toolbox';
 import Intl from 'ember-intl/services/intl';
 
-type Args = {
-  value?: Date;
-  onChange: (date: Date) => void;
+import AuDatePicker from '@appuniversum/ember-appuniversum/components/au-date-picker';
+import t from 'ember-intl/helpers/t';
+
+type Sig = {
+  Args: {
+    value?: Date | null;
+    onChange: (date: Date) => void;
+  };
 };
 
-export default class DateTimePickerComponent extends Component<Args> {
+export default class DatePickerComponent extends Component<Sig> {
   @service declare intl: Intl;
   @localCopy('args.value') declare date?: Date;
 
-  get hours() {
-    return this.date?.getHours();
-  }
-
-  get minutes() {
-    return this.date?.getMinutes();
-  }
-
-  get seconds() {
-    return this.date?.getSeconds();
-  }
-
   get datePickerLocalization() {
     return {
       buttonLabel: this.intl.t('au-date-picker.button-label'),
@@ -39,38 +32,49 @@ export default class DateTimePickerComponent extends Component<Args> {
       monthNames: getLocalizedMonths(this.intl),
       monthNamesShort: getLocalizedMonths(this.intl, 'short'),
       placeholder: this.intl.t('au-date-picker.placeholder'),
+      locale: this.intl.primaryLocale ?? 'nl-BE',
     };
   }
 
   @action
-  onChangeDate(_isoDate: unknown, date: Date) {
-    const wasDateInputCleared = !date;
-    if (!wasDateInputCleared) {
-      if (!this.date) {
-        this.date = new Date();
-        this.date.setHours(0, 0, 0, 0);
-      }
-      this.date.setFullYear(date.getFullYear());
-      this.date.setMonth(date.getMonth());
-      this.date.setDate(date.getDate());
-      this.args.onChange(this.date);
-    }
-  }
+  onChangeDate(_isoDate: unknown | null, date: Date | null) {
+    if (!date) return;
 
-  @action
-  onChangeTime(timeObject: {
-    hours: number;
-    minutes: number;
-    seconds: number;
-  }) {
-    if (!this.date) this.date = new Date();
-    this.date.setHours(timeObject.hours);
-    this.date.setMinutes(timeObject.minutes);
-    this.date.setSeconds(timeObject.seconds);
+    if (!this.date) {
+      this.date = new Date();
+      this.date.setHours(0, 0, 0, 0);
+    }
+    this.date.setFullYear(date.getFullYear());
+    this.date.setMonth(date.getMonth());
+    this.date.setDate(date.getDate());
     this.args.onChange(this.date);
   }
+
+  <template>
+    <AuDatePicker
+      @onChange={{this.onChangeDate}}
+      @value={{this.date}}
+      @label={{t 'date-plugin.card.label'}}
+      @localization={{this.datePickerLocalization}}
+    />
+  </template>
 }
 
+type MonthNames = [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+];
+type DayNames = [string, string, string, string, string, string, string];
 function getLocalizedMonths(
   intl: Intl,
   monthFormat: 'long' | 'numeric' | '2-digit' | 'short' | 'narrow' = 'long',
@@ -79,17 +83,17 @@ function getLocalizedMonths(
   return [...Array(12).keys()].map((monthIndex) => {
     const date = new Date(someYear, monthIndex);
     return intl.formatDate(date, { month: monthFormat });
-  });
+  }) as MonthNames;
 }
 
 function getLocalizedDays(
   intl: Intl,
   weekdayFormat: 'long' | 'short' | 'narrow' = 'long',
-) {
+): DayNames {
   const someSunday = new Date('2021-01-03');
   return [...Array(7).keys()].map((index) => {
     const weekday = new Date(someSunday.getTime());
     weekday.setDate(someSunday.getDate() + index);
     return intl.formatDate(weekday, { weekday: weekdayFormat });
-  });
+  }) as DayNames;
 }

package/addon/components/variable-plugin/date/date-time-picker.gts

@@ -0,0 +1,42 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import { localCopy } from 'tracked-toolbox';
+import Intl from 'ember-intl/services/intl';
+
+import DatePicker from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/date-picker';
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+import TimePicker from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/time-picker';
+
+type Sig = {
+  Args: {
+    value?: Date | null;
+    onlyDate?: boolean;
+    showSeconds?: boolean;
+
+    onChange: (date: Date) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+};
+
+export default class DateTimePickerComponent extends Component<Sig> {
+  @service declare intl: Intl;
+  @localCopy('args.value') declare date?: Date;
+
+  <template>
+    <AuFormRow>
+      <DatePicker @onChange={{@onChange}} @value={{this.date}} />
+    </AuFormRow>
+    {{yield}}
+    {{#unless @onlyDate}}
+      <AuFormRow>
+        <TimePicker
+          @showSeconds={{@showSeconds}}
+          @onChange={{@onChange}}
+          @value={{this.date}}
+        />
+      </AuFormRow>
+    {{/unless}}
+  </template>
+}

package/addon/components/variable-plugin/date/{edit.ts → edit.gts}

@@ -32,18 +32,36 @@ import { InfoCircleIcon } from '@appuniversum/ember-appuniversum/components/icon
 import { CrossIcon } from '@appuniversum/ember-appuniversum/components/icons/cross';
 import { XSD } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
 import AuCard from '../../_private/appuniversum-overrides/au-card';
+import { v4 as uuidv4 } from 'uuid';
 
-type Args = {
-  controller: SayController;
-  options: DateOptions;
+import AuFormRow from '@appuniversum/ember-appuniversum/components/au-form-row';
+import AuCheckbox from '@appuniversum/ember-appuniversum/components/au-checkbox';
+import AuBadge from '@appuniversum/ember-appuniversum/components/au-badge';
+import AuPill from '@appuniversum/ember-appuniversum/components/au-pill';
+import AuRadioGroup from '@appuniversum/ember-appuniversum/components/au-radio-group';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuNativeInput from '@lblod/ember-rdfa-editor-lblod-plugins/components/au-native-input';
+import TimePicker from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/time-picker';
+
+import VariablePluginDateHelpModal from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/help-modal';
+import { hash } from '@ember/helper';
+
+import t from 'ember-intl/helpers/t';
+import { on } from '@ember/modifier';
+import { eq, not } from 'ember-truth-helpers';
+import DatePicker from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/date-picker';
+import { TOC } from '@ember/component/template-only';
+
+type Sig = {
+  Args: {
+    controller: SayController;
+    options: DateOptions;
+  };
+  Element: HTMLDivElement;
 };
-const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
-export default class DateEditComponent extends Component<Args> {
-  CrossIcon = CrossIcon;
-  InfoCircleIcon = InfoCircleIcon;
-  Velcro = Velcro;
-  AuCard = AuCard;
 
+const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
+export class DateEditComponent extends Component<Sig> {
   @service
   declare intl: IntlService;
 
@@ -166,6 +184,10 @@ export default class DateEditComponent extends Component<Args> {
     }
   }
 
+  get hasCustomDateFormatError(): boolean {
+    return !!this.customDateFormatError;
+  }
+
   get humanError(): string | null {
     if (this.customDateFormatError) {
       const { error, payload } = this.customDateFormatError;
@@ -191,7 +213,19 @@ export default class DateEditComponent extends Component<Args> {
   }
 
   get pickerDate(): Option<Date> {
-    return this.documentDate;
+    return this.documentDate ?? null;
+  }
+
+  get pickerHours() {
+    return this.pickerDate?.getHours();
+  }
+
+  get pickerMinutes() {
+    return this.pickerDate?.getMinutes();
+  }
+
+  get pickerSeconds() {
+    return this.pickerDate?.getSeconds();
   }
 
   @action
@@ -245,7 +279,8 @@ export default class DateEditComponent extends Component<Args> {
   }
 
   @action
-  setDateFormatFromKey(formatKey: string) {
+  setDateFormatFromKey(formatKey?: string) {
+    if (!formatKey) return;
     const pos = this.documentDatePos;
     if (isNone(pos)) {
       return;
@@ -286,4 +321,134 @@ export default class DateEditComponent extends Component<Args> {
   toggleHelpModal() {
     this.helpModalOpen = !this.helpModalOpen;
   }
+
+  <template>
+    {{#if this.showCard}}
+      <div class='au-u-flex au-u-flex--column au-u-flex' ...attributes>
+        <AuFormRow
+          class='au-u-padding-top-small au-u-padding-left-small au-u-padding-right-small au-u-padding-bottom-tiny'
+        >
+          <DatePicker
+            @value={{this.pickerDate}}
+            @onChange={{this.changeDate}}
+          />
+        </AuFormRow>
+        <div
+          class='au-o-flow au-o-flow--small au-u-flex-shrink au-u-padding-top-tiny au-u-padding-left-small au-u-padding-right-small au-u-padding-bottom-small'
+          id='say-date-edit-scrollable-part'
+        >
+          <AuFormRow @alignment='inline'>
+            <AuCheckbox
+              @name='include-time'
+              @disabled={{eq this.dateFormatType 'custom'}}
+              @checked={{not this.onlyDate}}
+              @onChange={{this.changeIncludeTime}}
+            >
+              {{t 'date-plugin.card.include-time'}}
+            </AuCheckbox>
+            {{#if this.isCustom}}
+              <Velcro
+                @placement='top'
+                @strategy='absolute'
+                @offsetOptions={{hash mainAxis=10}}
+                as |velcro|
+              >
+                <AuBadge
+                  @size='small'
+                  @icon={{InfoCircleIcon}}
+                  aria-describedby='date-plugin-time-info-tooltip'
+                  {{velcro.hook}}
+                  {{on 'mouseenter' this.showTooltip}}
+                  {{on 'mouseleave' this.hideTooltip}}
+                  {{on 'focus' this.showTooltip}}
+                  {{on 'blur' this.hideTooltip}}
+                />
+                {{#if this.tooltipOpen}}
+                  <AuPill
+                    id='date-plugin-time-info-tooltip'
+                    role='tooltip'
+                    {{velcro.loop}}
+                  >
+                    {{t 'date-plugin.card.info-custom-time'}}
+                  </AuPill>
+                {{/if}}
+              </Velcro>
+            {{/if}}
+          </AuFormRow>
+          {{#unless this.onlyDate}}
+            <AuFormRow>
+              <TimePicker
+                @value={{this.pickerDate}}
+                @onChange={{this.changeDate}}
+                @showSeconds={{this.showSeconds}}
+              />
+            </AuFormRow>
+          {{/unless}}
+          <AuRadioGroup
+            @name={{(uuidv4)}}
+            @selected={{this.dateFormatType}}
+            @onChange={{this.setDateFormatFromKey}}
+            as |Group|
+          >
+            {{#each this.formats as |format|}}
+              <Group.Radio @value={{format.key}}>
+                {{if
+                  format.label
+                  format.label
+                  (if this.onlyDate format.dateFormat format.dateTimeFormat)
+                }}
+              </Group.Radio>
+            {{/each}}
+            {{#if this.isCustomAllowed}}
+              <Group.Radio @value='custom'>
+                {{t 'date-plugin.card.custom-date'}}
+              </Group.Radio>
+            {{/if}}
+          </AuRadioGroup>
+          {{#if (eq this.dateFormatType 'custom')}}
+            <AuFormRow @alignment='post'>
+              <AuButton
+                @skin='secondary'
+                @icon='info-circle'
+                @hideText={{true}}
+                {{on 'click' this.toggleHelpModal}}
+                id='say-date-edit-info-modal-button'
+              />
+              <AuNativeInput
+                @error={{this.hasCustomDateFormatError}}
+                value={{this.documentDateFormat}}
+                {{on 'input' this.setCustomDateFormat}}
+              />
+            </AuFormRow>
+            {{#if this.humanError}}
+              <AuPill
+                @skin='error'
+                @icon={{CrossIcon}}
+              >{{this.humanError}}</AuPill>
+            {{/if}}
+          {{/if}}
+        </div>
+      </div>
+    {{/if}}
+    <VariablePluginDateHelpModal
+      @modalOpen={{this.helpModalOpen}}
+      @closeModal={{this.toggleHelpModal}}
+    />
+  </template>
 }
+
+const DateEditCardComponent: TOC<Sig> = <template>
+  <AuCard
+    @shadow={{true}}
+    @size='flush'
+    {{! @glint-ignore: backwards compat with AU v3, remove if not supported anymore}}
+    @disableAuContent={{true}}
+    as |c|
+  >
+    <c.content>
+      <DateEditComponent @controller={{@controller}} @options={{@options}} />
+    </c.content>
+  </AuCard>
+</template>;
+
+export default DateEditCardComponent;

package/addon/components/variable-plugin/date/floating-date-container.gts

@@ -0,0 +1,54 @@
+import Component from '@glimmer/component';
+import FloatingWindow from '@lblod/ember-rdfa-editor/components/popover';
+import { NodeSelection, SayController } from '@lblod/ember-rdfa-editor';
+import { DateEditComponent } from '@lblod/ember-rdfa-editor-lblod-plugins/components/variable-plugin/date/edit';
+import { DateOptions } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/variables';
+
+type Signature = {
+  Args: {
+    controller: SayController;
+    options: DateOptions;
+  };
+  Blocks: {
+    default: [];
+  };
+};
+
+export default class FloatingDateContainer extends Component<Signature> {
+  get editorState() {
+    return this.args.controller.mainEditorState;
+  }
+
+  get selectedDateNode() {
+    const { selection } = this.editorState;
+    if (
+      selection instanceof NodeSelection &&
+      selection.node.type === selection.node.type.schema.nodes['date']
+    ) {
+      return { value: selection.node, pos: selection.from };
+    } else {
+      return null;
+    }
+  }
+
+  get forSelection() {
+    if (!this.selectedDateNode) return null;
+
+    return NodeSelection.create(
+      this.editorState.doc,
+      this.selectedDateNode.pos,
+    );
+  }
+
+  <template>
+    {{#if this.forSelection}}
+      <FloatingWindow
+        @forSelection={{this.forSelection}}
+        @controller={{@controller}}
+        class='au-u-flex'
+      >
+        <DateEditComponent @controller={{@controller}} @options={{@options}} />
+      </FloatingWindow>
+    {{/if}}
+  </template>
+}

package/addon/components/variable-plugin/date/time-picker.gts

@@ -0,0 +1,61 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { localCopy } from 'tracked-toolbox';
+import Intl from 'ember-intl/services/intl';
+
+import AuTimePicker from '@appuniversum/ember-appuniversum/components/au-time-picker';
+import t from 'ember-intl/helpers/t';
+
+type Sig = {
+  Args: {
+    value?: Date | null;
+    showSeconds?: boolean;
+    onChange: (date: Date) => void;
+  };
+};
+
+export default class TimePickerComponent extends Component<Sig> {
+  @service declare intl: Intl;
+  @localCopy('args.value') declare date?: Date;
+
+  @action
+  onChangeTime(timeObject: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  }) {
+    if (!this.date) this.date = new Date();
+    this.date.setHours(timeObject.hours);
+    this.date.setMinutes(timeObject.minutes);
+    this.date.setSeconds(timeObject.seconds);
+    this.args.onChange(this.date);
+  }
+
+  get hours() {
+    return this.date?.getHours();
+  }
+
+  get minutes() {
+    return this.date?.getMinutes();
+  }
+
+  get seconds() {
+    return this.date?.getSeconds();
+  }
+
+  <template>
+    <AuTimePicker
+      @hoursLabel={{t 'date-plugin.card.hours'}}
+      @minutesLabel={{t 'date-plugin.card.minutes'}}
+      @secondsLabel={{t 'date-plugin.card.seconds'}}
+      @nowLabel={{t 'date-plugin.card.now'}}
+      @hours={{this.hours}}
+      @minutes={{this.minutes}}
+      @seconds={{this.seconds}}
+      @showSeconds={{@showSeconds}}
+      @showNow={{true}}
+      @onChange={{this.onChangeTime}}
+    />
+  </template>
+}

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

@@ -1,29 +1,19 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { SayController, PNode } from '@lblod/ember-rdfa-editor';
+import { SayController } from '@lblod/ember-rdfa-editor';
 import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { ResolvedPNode } from '@lblod/ember-rdfa-editor/utils/_private/types';
 import { tracked } from '@glimmer/tracking';
 import { LmbPluginConfig } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/lmb-plugin';
 import Electee from '@lblod/ember-rdfa-editor-lblod-plugins/models/electee';
 import { unwrap } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
-import { transactionCombinator } from '@lblod/ember-rdfa-editor/utils/transaction-utils';
-import {
-  addPropertyToNode,
-  updateSubject,
-} from '@lblod/ember-rdfa-editor/plugins/rdfa-info/utils';
-import { FOAF } from '@lblod/ember-rdfa-editor-lblod-plugins/utils/constants';
-import { sayDataFactory } from '@lblod/ember-rdfa-editor/core/say-data-factory';
+import { getReplacePersonTransaction } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/variable-plugin/utils/replace-person';
 
 type Args = {
   controller: SayController;
   config: LmbPluginConfig;
 };
 
-type PersonNode = {
-  node: PNode;
-  pos: number;
-};
-
 export default class PersonEditComponent extends Component<Args> {
   @tracked showModal = false;
 
@@ -37,8 +27,8 @@ export default class PersonEditComponent extends Component<Args> {
       selection instanceof NodeSelection &&
       selection.node.type === this.controller.schema.nodes.person_variable
     ) {
-      const personNode: PersonNode = {
-        node: selection.node,
+      const personNode: ResolvedPNode = {
+        value: selection.node,
         pos: selection.from,
       };
       return personNode;
@@ -52,7 +42,7 @@ export default class PersonEditComponent extends Component<Args> {
 
   get isEditing() {
     const personNode = this.selectedPersonNode;
-    return !!personNode?.node.attrs.value;
+    return !!personNode?.value.attrs.value;
   }
 
   @action
@@ -65,34 +55,18 @@ export default class PersonEditComponent extends Component<Args> {
   closeModal() {
     this.showModal = false;
   }
+
   @action
   onUpdate(electee: Electee) {
     const personNode = unwrap(this.selectedPersonNode);
-    this.controller.withTransaction(() => {
-      return transactionCombinator(this.controller.activeEditorState)([
-        updateSubject({
-          pos: personNode.pos,
-          targetSubject: electee.uri,
-          keepBacklinks: true,
-          keepProperties: false,
-          keepExternalTriples: true,
-        }),
-        addPropertyToNode({
-          resource: electee.uri,
-          property: {
-            predicate: FOAF('givenName').full,
-            object: sayDataFactory.literal(electee.firstName),
-          },
-        }),
-        addPropertyToNode({
-          resource: electee.uri,
-          property: {
-            predicate: FOAF('familyName').full,
-            object: sayDataFactory.literal(electee.lastName),
-          },
-        }),
-      ]).transaction;
-    });
+    this.controller.withTransaction(
+      () =>
+        getReplacePersonTransaction(
+          this.controller.activeEditorState,
+          personNode,
+          electee,
+        ).transaction,
+    );
     this.closeModal();
   }
 }