@things-factory/gallery 0.0.0-stage → 10.1.223

package/client/bootstrap.ts

@@ -0,0 +1,16 @@
+import { navigate, store } from '@operato/shell'
+import { ADD_USER_MENU } from '@things-factory/apptool-base/client'
+
+/* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */
+export default function bootstrap() {
+  store.dispatch({
+    type: ADD_USER_MENU,
+    item: {
+      name: 'my-gallery',
+      icon: 'photo_library',
+      label: 'gallery.title.my-gallery',
+      order: 12,
+      action: () => navigate('gallery-page?tab=mine')
+    }
+  })
+}

package/client/components/gallery-forms.ts

@@ -0,0 +1,188 @@
+/*
+ * The two small forms of the gallery's moderators (ADR-0165 decision 5): an event made from the gallery, for one nobody
+ * put on the calendar yet, and a tag renamed on every post - into one already there, the two become one.
+ */
+import '@material/web/button/filled-button.js'
+import '@material/web/button/text-button.js'
+import '@operato/popup/ox-popup-actions.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { notify } from '@operato/layout'
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles'
+
+import { galleryApi, galleryChanged } from '../utils/gallery-api.js'
+import { reasonOf, t } from '../utils/gallery-words.js'
+
+const FormStyles = css`
+  :host {
+    height: 100%;
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-medium, 8px);
+  }
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: var(--ui-t-small, 12px);
+    font-weight: 600;
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+  }
+  input {
+    box-sizing: border-box;
+    font: inherit;
+    font-size: var(--ui-t-body, 14px);
+    font-weight: normal;
+    padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+    border: 1px solid var(--ui-line, var(--md-sys-color-outline-variant));
+    border-radius: var(--border-radius, 4px);
+    background: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+  }
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-medium, 8px);
+  }
+  .note {
+    font-size: var(--ui-t-small, 12px);
+    color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+  }
+`
+
+const local = (value: Date) => {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}`
+}
+
+@customElement('gallery-event-form')
+export class GalleryEventForm extends localize(i18next)(LitElement) {
+  static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
+
+  @state() private name = ''
+  @state() private startAt = local(new Date(new Date().setHours(9, 0, 0, 0)))
+  @state() private endAt = local(new Date(new Date().setHours(18, 0, 0, 0)))
+  @state() private location = ''
+  @state() private busy = false
+
+  render() {
+    const ready = this.name.trim() && this.startAt && this.endAt && this.endAt > this.startAt
+    return html`<div class="body">
+        <label
+          >${t('gallery.field.event-name')}<input
+            .value=${this.name}
+            @input=${(e: any) => (this.name = e.target.value)}
+        /></label>
+        <div class="row">
+          <label
+            >${t('gallery.field.starts')}<input
+              type="datetime-local"
+              .value=${this.startAt}
+              @change=${(e: any) => this.start(e.target.value)}
+          /></label>
+          <label
+            >${t('gallery.field.ends')}<input
+              type="datetime-local"
+              .value=${this.endAt}
+              @change=${(e: any) => (this.endAt = e.target.value)}
+          /></label>
+        </div>
+        <label
+          >${t('gallery.field.location')}<input
+            .value=${this.location}
+            @input=${(e: any) => (this.location = e.target.value)}
+        /></label>
+        <div class="note">${t('gallery.text.event-form-note')}</div>
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.close()}>${t('gallery.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${this.busy || !ready} @click=${() => this.save()}
+          >${t('gallery.button.create-event')}</md-filled-button
+        >
+      </ox-popup-actions>`
+  }
+
+  /** A later start carries the end with it, the same length. */
+  private start(value: string) {
+    const length = new Date(this.endAt).getTime() - new Date(this.startAt).getTime()
+    this.startAt = value
+    if (value && length > 0) this.endAt = local(new Date(new Date(value).getTime() + length))
+  }
+
+  private async save() {
+    this.busy = true
+    try {
+      const event = await galleryApi.createEvent({
+        name: this.name.trim(),
+        startAt: new Date(this.startAt).toISOString(),
+        endAt: new Date(this.endAt).toISOString(),
+        location: this.location.trim() || undefined
+      })
+      galleryChanged()
+      this.close(event)
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  /** What was made goes as the popup's result. */
+  private close(result?: unknown) {
+    this.dispatchEvent(new CustomEvent('done', { detail: result, bubbles: true, composed: true }))
+  }
+}
+
+@customElement('gallery-tag-form')
+export class GalleryTagForm extends localize(i18next)(LitElement) {
+  static styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]
+
+  @property() tag = ''
+  @state() private to = ''
+  @state() private busy = false
+
+  render() {
+    const ready = this.to.trim().replace(/^#+/, '') && this.to.trim().replace(/^#+/, '') !== this.tag
+    return html`<div class="body">
+        <label
+          >${t('gallery.field.new-tag')}<input
+            .value=${this.to}
+            placeholder=${this.tag}
+            maxlength="31"
+            @input=${(e: any) => (this.to = e.target.value)}
+        /></label>
+        <div class="note">${t('gallery.text.tag-form-note', { tag: this.tag })}</div>
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" @click=${() => this.close()}>${t('gallery.button.cancel')}</md-text-button>
+        <md-filled-button slot="confirm" ?disabled=${this.busy || !ready} @click=${() => this.save()}
+          >${t('gallery.button.rename-tag')}</md-filled-button
+        >
+      </ox-popup-actions>`
+  }
+
+  private async save() {
+    this.busy = true
+    try {
+      const to = this.to.trim().replace(/^#+/, '')
+      const count = await galleryApi.renameTag(this.tag, to)
+      notify({ message: t('gallery.text.tag-renamed', { count }) })
+      galleryChanged()
+      this.close(to)
+    } catch (error) {
+      notify({ level: 'error', message: reasonOf(error) })
+    } finally {
+      this.busy = false
+    }
+  }
+
+  /** What was made goes as the popup's result. */
+  private close(result?: unknown) {
+    this.dispatchEvent(new CustomEvent('done', { detail: result, bubbles: true, composed: true }))
+  }
+}