@lblod/ember-rdfa-editor-lblod-plugins 1.0.0-beta.8 → 2.0.0

package/CHANGELOG.md

@@ -16,6 +16,31 @@
 
 
 
+
+## 2.0.0 (2023-02-06)
+version-only bump to match editor major cycle
+
+
+## 1.0.0 (2023-02-06)
+
+#### :boom: Breaking Change
+* [#94](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/94) feat(dates): add nice error messages to custom format box ([@abeforgit](https://github.com/abeforgit))
+
+#### :rocket: Enhancement
+* [#94](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/94) feat(dates): add nice error messages to custom format box ([@abeforgit](https://github.com/abeforgit))
+* [#93](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/93) Make headers and content nodes of structures isolating and defining ([@elpoelma](https://github.com/elpoelma))
+* [#74](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/74) Feature/recreate uuids on paste ([@lagartoverde](https://github.com/lagartoverde))
+* [#90](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/90) show error when the date format is empty ([@lagartoverde](https://github.com/lagartoverde))
+
+#### :house: Internal
+* [#92](https://github.com/lblod/ember-rdfa-editor-lblod-plugins/pull/92) Update editor to 2.0.1 ([@elpoelma](https://github.com/elpoelma))
+
+#### Committers: 3
+- Arne Bertrand ([@abeforgit](https://github.com/abeforgit))
+- Elena Poelman ([@elpoelma](https://github.com/elpoelma))
+- Oscar Rodriguez Villalobos ([@lagartoverde](https://github.com/lagartoverde))
+
+
 ## 1.0.0-beta.8 (2023-01-26)
 
 #### :house: Internal

package/addon/components/article-structure-plugin/structure-card.hbs

@@ -1,7 +1,7 @@
 {{#unless this.isOutsideStructure}}
   <AuCard @flex={{true}} @divided={{true}} @expandable={{false}} @shadow={{true}} @size="flush" as |c|>
     <c.header class="au-u-hidden-visually">
-      <AuHeading @level="3" @skin="6">{{t "article-structure-plugin.title.structureCard"}}</AuHeading>
+      <AuHeading @level="3" @skin="6">{{t "article-structure-plugin.title.structure-card"}}</AuHeading>
     </c.header>
     <c.content class="au-c-content--small">
       <AuList @divider={{true}} class="au-u-padding-top-tiny au-u-padding-bottom-tiny" as |Item|>

package/addon/components/besluit-type-plugin/toolbar-dropdown.hbs

@@ -1,6 +1,7 @@
-<div {{did-update this.updateBesluitTypes @controller.state}}>
+<div {{did-update this.updateBesluitTypes @controller.state}} 
+     {{did-update this.updateBesluitTypes this.types.value}}>
 {{#if this.showCard}}
-  {{#if this.loadDataTaskInstance.isError}}
+  {{#if this.types.isError}}
     <AuPill
       @skin="error"
       @icon="circle-x"
@@ -36,7 +37,7 @@
     class="au-c-modal--overflow"
     as |Modal|>
     <Modal.Body>
-      {{#if this.loadDataTaskInstance.isError}}
+      {{#if this.types.isError}}
         <AuAlert
           @title={{t "besluit-type-plugin.error-title"}}
           @skin="error"
@@ -56,7 +57,7 @@
         </AuAlert>
       {{else}}
         <BesluitTypePlugin::BesluitTypeSelect
-          @besluitTypes={{this.types}}
+          @besluitTypes={{this.types.value}}
           @onchange={{this.updateBesluitType}}
           @selected={{this.besluit}}
           @showWarningWhenEmpty={{false}}/>

package/addon/components/besluit-type-plugin/toolbar-dropdown.ts

@@ -1,7 +1,6 @@
 import { tracked } from '@glimmer/tracking';
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
-import { task } from 'ember-concurrency';
 import { getOwner } from '@ember/application';
 import { inject as service } from '@ember/service';
 import {
@@ -17,6 +16,7 @@ import fetchBesluitTypes, {
   BesluitType,
 } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/besluit-type-plugin/utils/fetchBesluitTypes';
 import { findAncestorOfType } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/article-structure-plugin/utils/structure';
+import { trackedFunction } from 'ember-resources/util/function';
 
 declare module 'ember__owner' {
   export default interface Owner {
@@ -39,7 +39,6 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
    */
   @tracked besluitType?: BesluitType;
   @tracked previousBesluitType?: string;
-  @tracked types: BesluitType[] = [];
 
   //used to update selections since the other vars dont seem to work in octane
   @tracked besluit?: BesluitType;
@@ -47,11 +46,9 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
   @tracked subSubBesluit?: BesluitType;
 
   @tracked cardExpanded = false;
-  @tracked loadDataTaskInstance;
 
   constructor(parent: unknown, args: Args) {
     super(parent, args);
-    this.loadDataTaskInstance = this.loadData.perform();
   }
 
   get controller() {
@@ -62,7 +59,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
     return this.controller.state.doc;
   }
 
-  loadData = task(async () => {
+  types = trackedFunction(this, async () => {
     // eslint-disable-next-line @typescript-eslint/await-thenable
     const bestuurseenheid = await this.currentSession.get('group');
     const classificatie = await bestuurseenheid.get('classificatie');
@@ -70,7 +67,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
       besluitTypePlugin: { endpoint: string };
     };
     const types = await fetchBesluitTypes(classificatie.uri, ENV);
-    this.types = types;
+    return types;
   });
 
   get currentBesluitRange(): ResolvedPNode | undefined {
@@ -103,7 +100,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
 
   @action
   updateBesluitTypes() {
-    if (!this.currentBesluitURI) {
+    if (!this.currentBesluitURI || !this.types.value) {
       return;
     }
     const besluit = findAncestorOfType(
@@ -169,7 +166,7 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
 
   findBesluitTypeParent(
     besluitType?: BesluitType,
-    array: BesluitType[] = this.types,
+    array: BesluitType[] | null = this.types.value,
     parent?: BesluitType
   ): BesluitType | undefined {
     if (!besluitType || !array) {
@@ -188,9 +185,9 @@ export default class EditorPluginsToolbarDropdownComponent extends Component<Arg
 
   findBesluitTypeByURI(
     uri: string,
-    types = this.types
+    types = this.types.value
   ): BesluitType | undefined {
-    if (uri) {
+    if (uri && types) {
       for (const besluitType of types) {
         if (besluitType.uri === uri) {
           return besluitType;

package/addon/components/rdfa-date-plugin/card.hbs

@@ -1,52 +1,89 @@
-<div {{did-update this.onSelectionChanged @controller.state}}>
-{{#if this.showCard}}
-  <AuCard @shadow={{true}} @size="flush" as |c|>
-    <c.header class="au-u-hidden-visually">
-      <AuHeading @level="3" @skin="6">{{t "date-plugin.card.title"}}</AuHeading>
-    </c.header>
-    <c.content class="au-o-box au-o-box--small">
-      <div class="au-o-flow au-o-flow--small">
-        <RdfaDatePlugin::DateTimePicker
-          @onChange={{this.changeDate}}
-          @value={{this.dateValue}}
-          @onlyDate={{this.onlyDate}}/>
-        {{#each @widgetArgs.options.formats as |format|}}
-        <AuFormRow>
-          <AuControlRadio
-            @label={{format.label}}
-            @identifier={{format.key}}
-            @name="dateFormat"
-            @value={{format.key}}
-            checked={{eq this.dateFormat format.key}}
-            @onChange={{this.setDateFormat}}
-          />
-        </AuFormRow>
-        {{/each}}
-        <AuFormRow>
-          <AuControlRadio
-            @label="Custom Date"
-            @identifier="custom"
-            @name="dateFormat"
-            @value="custom"
-            checked={{eq this.dateFormat "custom"}}
-            @onChange={{this.setDateFormat}}
-          />
-          {{#if (eq this.dateFormat "custom")}}
-            <AuInput
-              @value={{this.customDateFormat}}
-              {{on "input" this.setCustomDateFormat}}
+<div>
+  {{#if this.showCard}}
+    <AuCard @shadow={{true}} @size="flush" as |c|>
+      <c.header class="au-u-hidden-visually">
+        <AuHeading @level="3" @skin="6">{{t "date-plugin.card.title"}}</AuHeading>
+      </c.header>
+      <c.content class="au-o-box au-o-box--small">
+        <div class="au-o-flow au-o-flow--small">
+          <RdfaDatePlugin::DateTimePicker
+            @onChange={{this.changeDate}}
+            @value={{this.pickerDate}}
+            @onlyDate={{this.onlyDate}}
+            @showSeconds={{this.showSeconds}}
+          >
+
+            <AuFormRow @alignment="inline">
+              <AuControlCheckbox
+                @label={{t 'date-plugin.card.include-time'}}
+                @disabled={{eq this.dateFormatType "custom"}}
+                @checked={{not this.onlyDate}}
+                @onChange={{this.changeIncludeTime}}
+              />
+              {{#if this.isCustom}}
+                <Velcro @placement="top" @offsetOptions={{hash mainAxis=10}} as |velcro|>
+                  <AuBadge
+                    @size="small"
+                    @icon="info-circle"
+                    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>
+          </RdfaDatePlugin::DateTimePicker>
+          {{#each this.formats as |format|}}
+            <AuFormRow>
+              <AuControlRadio
+                @label={{format.label}}
+                @identifier={{format.key}}
+                @name="dateFormat"
+                @value={{format.key}}
+                checked={{eq this.dateFormatType format.key}}
+                @onChange={{this.setDateFormatFromKey}}
+              />
+            </AuFormRow>
+          {{/each}}
+          <AuFormRow>
+            <AuControlRadio
+              @label={{t "date-plugin.card.custom-date" }}
+              @identifier="custom"
+              @name="dateFormat"
+              @value="custom"
+              checked={{eq this.dateFormatType "custom"}}
+              @onChange={{this.setDateFormatFromKey}}
             />
-          {{/if}}
-        </AuFormRow>
-        {{#unless this.dateInDocument}}
-          <AuFormRow class="au-u-margin-top">
-            <AuButton {{on 'click' this.modifyDate}}>
-              {{if this.onlyDate (t "date-plugin.card.insert-date") (t "date-plugin.card.insert-datetime")}}
-            </AuButton>
           </AuFormRow>
-        {{/unless}}
-      </div>
-    </c.content>
-  </AuCard>
-{{/if}}
-</div>
+          {{#if (eq this.dateFormatType "custom")}}
+            <AuFormRow @alignment="post">
+              <AuButton @skin="secondary" @icon="info-circle"
+                {{on 'click' this.toggleHelpModal}}>
+              </AuButton>
+              <AuNativeInput
+                @error={{this.customDateFormatError}}
+                value={{this.documentDateFormat}}
+                {{on "input" this.setCustomDateFormat}}
+              />
+            </AuFormRow>
+            {{#if this.humanError}}
+              <AuPill @skin="error" @icon="cross">{{this.humanError}}</AuPill>
+            {{/if}}
+          {{/if}}
+        </div>
+      </c.content>
+    </AuCard>
+  {{/if}}
+</div>
+<RdfaDatePlugin::HelpModal @modalOpen={{this.helpModalOpen}} @closeModal={{this.toggleHelpModal}} />

package/addon/components/rdfa-date-plugin/card.ts

@@ -2,8 +2,22 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { ProseController } from '@lblod/ember-rdfa-editor/core/prosemirror';
-import { NodeSelection } from '@lblod/ember-rdfa-editor';
+import { NodeSelection, PNode } from '@lblod/ember-rdfa-editor';
 import { DateFormat } from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin';
+import {
+  validateDateFormat,
+  ValidationError,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/plugins/rdfa-date-plugin/utils';
+import { inject as service } from '@ember/service';
+import IntlService from 'ember-intl/services/intl';
+import {
+  isNone,
+  isSome,
+  Option,
+  optionMap,
+  optionMapOr,
+  unwrapOr,
+} from '@lblod/ember-rdfa-editor-lblod-plugins/utils/option';
 
 type Args = {
   controller: ProseController;
@@ -14,93 +28,228 @@ type Args = {
     };
   };
 };
+const TIME_CHAR_REGEX = new RegExp('[abBhHkKmsStTp]');
+const SECONDS_REGEX = new RegExp('[sStT]|p{2,}');
 export default class RdfaDatePluginCardComponent extends Component<Args> {
-  @tracked dateValue?: Date;
-  @tracked datePos?: number;
-  @tracked dateInDocument = false;
-  @tracked onlyDate = false;
-  @tracked dateFormat = '';
-  @tracked customDateFormat = 'dd/MM/yyyy';
+  @service
+  declare intl: IntlService;
 
-  constructor(owner: unknown, args: Args) {
-    super(owner, args);
-    const formats = this.args.widgetArgs.options.formats;
-    const firstKey = [...formats.keys()][0];
-    this.dateFormat = formats[firstKey].key;
+  @tracked helpModalOpen = false;
+  @tracked
+  tooltipOpen = false;
+
+  get formats(): DateFormat[] {
+    return this.args.widgetArgs.options.formats;
   }
 
   get controller() {
     return this.args.controller;
   }
 
+  get selection() {
+    return this.controller.getState(true).selection;
+  }
+
+  get selectedDateNode(): Option<PNode> {
+    if (
+      this.selection instanceof NodeSelection &&
+      this.selection.node.type === this.args.controller.schema.nodes['date']
+    ) {
+      return this.selection.node;
+    } else {
+      return null;
+    }
+  }
+
+  get documentDate(): Option<Date> {
+    const dateVal = this.selectedDateNode?.attrs.value as Option<string>;
+    if (dateVal) {
+      return new Date(dateVal);
+    }
+    return null;
+  }
+
+  get documentDatePos(): Option<number> {
+    if (this.selectedDateNode) {
+      return this.selection.from;
+    }
+    return null;
+  }
+
+  get showCard() {
+    return isSome(this.documentDatePos);
+  }
+
+  get onlyDate(): boolean {
+    return optionMapOr(
+      false,
+      (node) => {
+        const format = node.attrs.format as string;
+        return !TIME_CHAR_REGEX.test(format);
+      },
+      this.selectedDateNode
+    );
+  }
+
+  get showSeconds(): boolean {
+    return optionMapOr(
+      false,
+      (node) => {
+        const format = node.attrs.format as string;
+        return SECONDS_REGEX.test(format);
+      },
+      this.selectedDateNode
+    );
+  }
+
+  get documentDateFormat(): Option<string> {
+    return optionMap(
+      (node) => node.attrs.format as string,
+      this.selectedDateNode
+    );
+  }
+
+  get documentDateFormatType(): Option<DateFormat> {
+    if (this.documentDateFormat) {
+      if (this.onlyDate) {
+        return this.formats.find(
+          (format) => format.dateFormat === this.documentDateFormat
+        );
+      } else {
+        return this.formats.find(
+          (format) => format.dateTimeFormat === this.documentDateFormat
+        );
+      }
+    }
+    return null;
+  }
+
+  get isCustom(): boolean {
+    return unwrapOr(false, this.selectedDateNode?.attrs.custom as boolean);
+  }
+
+  get dateFormatType(): string {
+    if (this.isCustom) {
+      return 'custom';
+    }
+    return this.documentDateFormatType?.key || 'custom';
+  }
+
+  get customDateFormatError(): ValidationError | null {
+    const format = this.documentDateFormat ?? '';
+    const validation = validateDateFormat(format);
+    if (validation.type === 'ok') {
+      return null;
+    } else {
+      return validation;
+    }
+  }
+
+  get humanError(): string | null {
+    if (this.customDateFormatError) {
+      const { error, payload } = this.customDateFormatError;
+      if (error === 'character') {
+        const msg = this.intl.lookup(`date-plugin.validation.${error}`) ?? '';
+        const suggestion =
+          this.intl.lookup('date-plugin.validation.character-suggestion') ?? '';
+        const chars = payload?.invalidCharacters ?? '';
+        return `${msg}: ${chars}. ${suggestion}: '${chars}'`;
+      }
+      return this.intl.lookup(`date-plugin.validation.${error}`) ?? null;
+    }
+    return null;
+  }
+
+  get pickerDate(): Date {
+    return this.documentDate ?? new Date();
+  }
+
   @action
-  modifyDate() {
-    if (this.datePos && this.dateValue) {
-      const pos = this.datePos;
-      const value = this.dateValue;
+  showTooltip() {
+    this.tooltipOpen = true;
+  }
+
+  @action hideTooltip() {
+    this.tooltipOpen = false;
+  }
+
+  @action
+  changeDate(date: Date) {
+    const pos = this.documentDatePos;
+    if (pos) {
       this.controller.withTransaction((tr) => {
-        tr.setNodeAttribute(pos, 'format', this.customDateFormat);
-        return tr.setNodeAttribute(pos, 'value', value.toISOString());
+        return tr.setNodeAttribute(pos, 'value', date.toISOString());
       }, true);
     }
   }
 
   @action
-  changeDate(date: Date) {
-    this.dateValue = date;
-    if (this.dateInDocument) this.modifyDate();
+  changeIncludeTime(includeTime: boolean) {
+    console.log('Include time', includeTime);
+    if (this.isCustom) {
+      console.log("but it's custom");
+      return;
+    }
+    const dateFormatType = this.documentDateFormatType;
+    if (dateFormatType) {
+      if (includeTime) {
+        this.setDateFormat(dateFormatType.dateTimeFormat, false);
+      } else {
+        this.setDateFormat(dateFormatType.dateFormat, false);
+      }
+    }
+  }
+
+  setDateFormat(dateFormat: string, custom = false) {
+    const pos = this.documentDatePos;
+    if (isNone(pos)) {
+      return;
+    }
+    this.controller.withTransaction((tr) => {
+      return tr
+        .setNodeAttribute(pos, 'format', dateFormat)
+        .setNodeAttribute(pos, 'custom', custom)
+        .setNodeAttribute(pos, 'onlyDate', this.onlyDate);
+    }, true);
   }
 
   @action
-  setDateFormat(dateFormat: string) {
-    this.dateFormat = dateFormat;
-    if (dateFormat !== 'custom') {
-      const format = this.args.widgetArgs.options.formats.find(
-        (format) => format.key === dateFormat
-      );
+  setDateFormatFromKey(formatKey: string) {
+    const pos = this.documentDatePos;
+    if (isNone(pos)) {
+      return;
+    }
+    if (formatKey === 'custom') {
+      this.controller.withTransaction((tr) => {
+        return tr.setNodeAttribute(pos, 'custom', true);
+      }, true);
+    } else {
+      const format = this.formats.find((format) => format.key === formatKey);
       if (format) {
-        if (this.onlyDate) {
-          this.customDateFormat = format.dateFormat;
-        } else {
-          this.customDateFormat = format.dateTimeFormat;
-        }
+        this.setDateFormat(
+          this.onlyDate ? format.dateFormat : format.dateTimeFormat,
+          false
+        );
       }
     }
-    if (this.dateInDocument) this.modifyDate();
   }
+
   @action
   setCustomDateFormat(event: InputEvent) {
-    this.customDateFormat = (event.target as HTMLInputElement).value;
-    if (this.dateInDocument) this.modifyDate();
-  }
+    const format = (event.target as HTMLInputElement).value;
 
-  get showCard() {
-    return this.datePos !== undefined && this.datePos !== null;
+    const pos = this.documentDatePos;
+    if (isSome(pos) && isSome(format)) {
+      this.controller.withTransaction((tr) => {
+        return tr
+          .setNodeAttribute(pos, 'format', format)
+          .setNodeAttribute(pos, 'onlyDate', this.onlyDate);
+      }, true);
+    }
   }
 
   @action
-  onSelectionChanged() {
-    const selection = this.controller.getState(true).selection;
-    if (
-      selection instanceof NodeSelection &&
-      selection.node.type === this.args.controller.schema.nodes['date']
-    ) {
-      this.dateInDocument = !!selection.node.attrs.value;
-      this.onlyDate = selection.node.attrs.onlyDate as boolean;
-      this.dateValue = this.dateInDocument
-        ? new Date(selection.node.attrs.value)
-        : new Date();
-      if (this.dateInDocument) {
-        this.dateValue = new Date(selection.node.attrs.value);
-      } else {
-        this.dateValue = new Date();
-        if (this.onlyDate) {
-          this.dateValue.setHours(0, 0, 0, 0);
-        }
-      }
-      this.datePos = selection.from;
-    } else {
-      this.datePos = undefined;
-    }
+  toggleHelpModal() {
+    this.helpModalOpen = !this.helpModalOpen;
   }
 }

package/addon/components/rdfa-date-plugin/date-time-picker.hbs

@@ -5,17 +5,20 @@
     @label={{t "date-plugin.card.label"}}
     @localization={{this.datePickerLocalization}}/>
 </AuFormRow>
+{{yield}}
 {{#unless @onlyDate}}
   <AuFormRow>
     <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}}
-      @showSeconds={{false}}
+      @seconds={{this.seconds}}
+      @showSeconds={{@showSeconds}}
       @showNow={{true}}
       @onChange={{this.onChangeTime}}
-      />
+    />
   </AuFormRow>
 {{/unless}}

package/addon/components/rdfa-date-plugin/date-time-picker.ts

@@ -5,6 +5,7 @@ import { inject as service } from '@ember/service';
 // @ts-ignore
 import { localCopy } from 'tracked-toolbox';
 import Intl from 'ember-intl/services/intl';
+
 type Args = {
   value: Date;
   onChange: (date: Date) => void;
@@ -23,6 +24,10 @@ export default class RdfaDatePluginDateTimePicker extends Component<Args> {
     return this.date.getMinutes();
   }
 
+  get seconds() {
+    return this.date.getSeconds();
+  }
+
   get datePickerLocalization() {
     return {
       buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
@@ -56,10 +61,15 @@ export default class RdfaDatePluginDateTimePicker extends Component<Args> {
   }
 
   @action
-  onChangeTime(timeObject: { hours: number; minutes: number }) {
+  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);
   }
 }