@things-factory/gallery 0.0.0-stage → 10.1.226

package/client/utils/gallery-api.ts

@@ -0,0 +1,157 @@
+/*
+ * The gallery doors as the screens call them (ADR-0165). Every call throws the server's words when it is refused.
+ */
+import gql from 'graphql-tag'
+
+import { client, uploadContext } from '@operato/graphql'
+
+export type Space = 'COMPANY' | 'PERSONAL'
+export type Photo = { id: string; name?: string; thumbnail?: string | null; fullpath: string; mimetype?: string }
+export type EventFacts = { id: string; name: string; startAt: string; endAt: string; location?: string | null }
+export type EventCard = EventFacts & { postCount: number; cover?: Photo | null }
+export type EventChoice = EventFacts & { near: boolean }
+
+export interface Post {
+  id: string
+  space: Space
+  caption?: string | null
+  takenAt: string
+  tags?: string[] | null
+  likeCount: number
+  liked: boolean
+  editable: boolean
+  moderatable: boolean
+  hiddenAt?: string | null
+  hiddenReason?: string | null
+  createdAt: string
+  creator?: { id: string; name?: string } | null
+  event?: EventFacts | null
+  photos: Photo[]
+}
+
+export interface PostInput {
+  space?: Space
+  caption?: string
+  takenAt?: string
+  tags?: string[]
+  eventId?: string | null
+}
+
+export type Filter = { space?: Space; eventId?: string; tag?: string; authorId?: string }
+
+const POST_FIELDS = `id space caption takenAt tags likeCount liked editable moderatable hiddenAt hiddenReason createdAt
+  creator { id name } event { id name startAt endAt location } photos { id name thumbnail fullpath mimetype }`
+const EVENT_FIELDS = 'id name startAt endAt location'
+
+function answer<T>(response: any, field: string): T {
+  if (response.errors?.length) throw new Error(response.errors.map((one: any) => one.message).join(' · '))
+  return response.data?.[field] as T
+}
+
+async function ask<T>(query: string, variables: Record<string, unknown>, field: string): Promise<T> {
+  return answer<T>(await client.query({ query: gql(query), variables, fetchPolicy: 'network-only' }), field)
+}
+
+async function change<T>(
+  mutation: string,
+  variables: Record<string, unknown>,
+  field: string,
+  uploading?: (fraction: number) => void
+): Promise<T> {
+  return answer<T>(
+    await client.mutate({
+      mutation: gql(mutation),
+      variables,
+      ...(uploading ? { context: uploadContext(uploading) } : {})
+    }),
+    field
+  )
+}
+
+/** Tells the open gallery and the menu's count that a post came, changed or went. */
+export const galleryChanged = () => window.dispatchEvent(new CustomEvent('gallery-changed'))
+
+export const galleryApi = {
+  posts: (filter: Filter, skip = 0, take = 30) =>
+    ask<{ items: Post[]; total: number }>(
+      `query ($filter: GalleryFilter, $skip: Int, $take: Int) { galleryPosts(filter: $filter, skip: $skip, take: $take) { items { ${POST_FIELDS} } total } }`,
+      { filter, skip, take },
+      'galleryPosts'
+    ),
+  post: (id: string) =>
+    ask<Post | null>(`query ($id: String!) { galleryPost(id: $id) { ${POST_FIELDS} } }`, { id }, 'galleryPost'),
+  likers: (id: string) =>
+    ask<{ id: string; name?: string }[]>(
+      `query ($id: String!) { galleryLikers(id: $id) { id name } }`,
+      { id },
+      'galleryLikers'
+    ),
+  tags: (text = '') =>
+    ask<{ tag: string; count: number }[]>(
+      `query ($text: String) { galleryTags(text: $text) { tag count } }`,
+      { text },
+      'galleryTags'
+    ),
+  events: () =>
+    ask<EventCard[]>(
+      `query { galleryEvents { ${EVENT_FIELDS} postCount cover { id thumbnail fullpath } } }`,
+      {},
+      'galleryEvents'
+    ),
+  eventChoices: (takenAt?: string) =>
+    ask<EventChoice[]>(
+      `query ($takenAt: DateTimeISO) { galleryEventChoices(takenAt: $takenAt) { ${EVENT_FIELDS} near } }`,
+      { takenAt },
+      'galleryEventChoices'
+    ),
+  summary: () => ask<{ fresh: number }>(`query { gallerySummary { fresh } }`, {}, 'gallerySummary'),
+  create: (input: PostInput, photos: File[], uploading?: (fraction: number) => void) =>
+    change<Post>(
+      `mutation ($input: GalleryPostInput!, $photos: [Upload!]!) { createGalleryPost(input: $input, photos: $photos) { ${POST_FIELDS} } }`,
+      { input, photos },
+      'createGalleryPost',
+      uploading ?? (() => {})
+    ),
+  update: (id: string, input: PostInput, attach: File[], remove: string[], uploading?: (fraction: number) => void) =>
+    change<Post>(
+      `mutation ($id: String!, $input: GalleryPostInput!, $attach: [Upload!], $remove: [String!]) {
+        updateGalleryPost(id: $id, input: $input, attach: $attach, remove: $remove) { ${POST_FIELDS} }
+      }`,
+      { id, input, attach, remove },
+      'updateGalleryPost',
+      attach.length ? (uploading ?? (() => {})) : undefined
+    ),
+  remove: (id: string) =>
+    change<boolean>(`mutation ($id: String!) { deleteGalleryPost(id: $id) }`, { id }, 'deleteGalleryPost'),
+  like: (id: string, like: boolean) =>
+    change<{ id: string; likeCount: number; liked: boolean }>(
+      `mutation ($id: String!, $like: Boolean!) { likeGalleryPost(id: $id, like: $like) { id likeCount liked } }`,
+      { id, like },
+      'likeGalleryPost'
+    ),
+  visit: () => change<boolean>(`mutation { visitGallery }`, {}, 'visitGallery'),
+  hide: (id: string, reason: string) =>
+    change<Post>(
+      `mutation ($id: String!, $reason: String!) { hideGalleryPost(id: $id, reason: $reason) { ${POST_FIELDS} } }`,
+      { id, reason },
+      'hideGalleryPost'
+    ),
+  unhide: (id: string) =>
+    change<Post>(
+      `mutation ($id: String!) { unhideGalleryPost(id: $id) { ${POST_FIELDS} } }`,
+      { id },
+      'unhideGalleryPost'
+    ),
+  renameTag: (from: string, to: string) =>
+    change<number>(
+      `mutation ($from: String!, $to: String!) { renameGalleryTag(from: $from, to: $to) }`,
+      { from, to },
+      'renameGalleryTag'
+    ),
+  createEvent: (input: { name: string; startAt: string; endAt: string; location?: string }) =>
+    change<EventCard>(
+      `mutation ($input: GalleryEventInput!) { createGalleryEvent(input: $input) { ${EVENT_FIELDS} postCount } }`,
+      { input },
+      'createGalleryEvent'
+    )
+}

package/client/utils/gallery-badge.ts

@@ -0,0 +1,44 @@
+/*
+ * The count the menu shows on 갤러리 - posts others made since one last opened it (ADR-0165 decision 6). An application
+ * puts `generateGalleryBadge` on its menu entry; the count is asked again when a post comes or the gallery is opened.
+ */
+import { galleryApi } from './gallery-api.js'
+
+let count: number | undefined
+let version = 0
+const waiting = new Set<() => void>()
+
+/** Asks the server again and tells every badge. A count that could not be asked is not zero: it draws nothing. */
+export async function refreshGalleryBadge(): Promise<void> {
+  try {
+    count = (await galleryApi.summary()).fresh || undefined
+  } catch {
+    count = undefined
+  }
+  version++
+  for (const wake of [...waiting]) wake()
+}
+
+let generation = 0
+
+/** One badge's counts. The menu asks for a new one when it draws again; the one before it then ends. */
+export async function* generateGalleryBadge() {
+  const mine = ++generation
+  for (const wake of [...waiting]) wake()
+  let seen = version
+  yield count
+  while (true) {
+    if (seen === version) {
+      await new Promise<void>(resolve => {
+        const wake = () => {
+          waiting.delete(wake)
+          resolve()
+        }
+        waiting.add(wake)
+      })
+    }
+    if (mine !== generation) return
+    seen = version
+    yield count
+  }
+}

package/client/utils/gallery-words.ts

@@ -0,0 +1,22 @@
+/*
+ * The words of the gallery - one place for the page, the viewer and the uploader.
+ */
+import { i18next } from '@operato/i18n'
+
+export const t = (key: string, options: Record<string, unknown> = {}) => String(i18next.t(key, options))
+
+/** A day as the reader's locale writes it. */
+export function day(value?: string | Date | null): string {
+  if (!value) return ''
+  return new Date(value).toLocaleDateString(i18next.language, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+/** An event's days - one day, or its first and last. */
+export function days(startAt: string, endAt: string): string {
+  const start = new Date(startAt)
+  const end = new Date(endAt)
+  return start.toDateString() === end.toDateString() ? day(start) : `${day(start)} – ${day(end)}`
+}
+
+/** The words of a refusal the server gave, or the fallback. */
+export const reasonOf = (error: unknown) => (error as Error)?.message || t('gallery.text.failed')

package/client/utils/photo-prep.ts

@@ -0,0 +1,93 @@
+/*
+ * A photo made ready in the browser before it goes up (ADR-0165 decision 3): when it was taken, read from the camera's
+ * own record (EXIF), and the photo shrunk to 2560 px on its long side so a phone's original does not fill the storage.
+ */
+
+/** The longest side a photo keeps. */
+export const LONG_SIDE = 2560
+/* A photo already small enough goes up as it is - shrinking again would only lose quality. */
+const SMALL_ENOUGH = 2.5 * 1024 * 1024
+
+/** "YYYY:MM:DD HH:MM:SS" as the camera wrote it, in the camera's local time. */
+export function exifDateOf(text?: string): Date | undefined {
+  const match = /^(\d{4}):(\d{2}):(\d{2})[ T](\d{2}):(\d{2}):(\d{2})/.exec(text ?? '')
+  if (!match) return undefined
+  const [, y, mo, d, h, mi, s] = match.map(Number)
+  const date = new Date(y, mo - 1, d, h, mi, s)
+  return isNaN(date.getTime()) || y < 1990 ? undefined : date
+}
+
+/** The date the camera recorded the photo, from a JPEG's EXIF - when it was taken (0x9003), else when it was saved (0x0132). */
+export function exifTakenAt(buffer: ArrayBuffer): Date | undefined {
+  try {
+    const view = new DataView(buffer)
+    if (view.byteLength < 4 || view.getUint16(0) !== 0xffd8) return undefined
+    let offset = 2
+    while (offset + 10 <= view.byteLength) {
+      const marker = view.getUint16(offset)
+      if ((marker & 0xff00) !== 0xff00) return undefined
+      const size = view.getUint16(offset + 2)
+      /* APP1 starting with "Exif\0\0" */
+      if (marker === 0xffe1 && view.getUint32(offset + 4) === 0x45786966) return exifDateOf(tiffDate(view, offset + 10))
+      offset += 2 + size
+    }
+  } catch {
+    /* A broken or cut record says nothing. */
+  }
+  return undefined
+}
+
+function tiffDate(view: DataView, start: number): string | undefined {
+  const little = view.getUint16(start) === 0x4949
+  const u16 = (at: number) => view.getUint16(start + at, little)
+  const u32 = (at: number) => view.getUint32(start + at, little)
+  const entries = (ifd: number) => Array.from({ length: u16(ifd) }, (_, i) => ifd + 2 + i * 12)
+  const ascii = (entry: number) => {
+    const count = u32(entry + 4)
+    const at = count > 4 ? u32(entry + 8) : entry + 8
+    let text = ''
+    for (let i = 0; i < count - 1; i++) text += String.fromCharCode(view.getUint8(start + at + i))
+    return text
+  }
+  let saved: string | undefined
+  let exif: number | undefined
+  for (const entry of entries(u32(4))) {
+    const tag = u16(entry)
+    if (tag === 0x0132) saved = ascii(entry)
+    if (tag === 0x8769) exif = u32(entry + 8)
+  }
+  if (exif) for (const entry of entries(exif)) if (u16(entry) === 0x9003) return ascii(entry)
+  return saved
+}
+
+/** When the photo was taken - the camera's record, or nothing. */
+export async function takenAtOf(file: File): Promise<Date | undefined> {
+  if (!/jpe?g/i.test(file.type) && !/\.jpe?g$/i.test(file.name)) return undefined
+  return exifTakenAt(await file.slice(0, 256 * 1024).arrayBuffer())
+}
+
+/** The photo shrunk to `LONG_SIDE` on its long side as a JPEG - or the photo itself when it is small or cannot be drawn. */
+export async function shrunk(file: File): Promise<File> {
+  try {
+    const bitmap = await createImageBitmap(file, { imageOrientation: 'from-image' } as any)
+    const long = Math.max(bitmap.width, bitmap.height)
+    if (long <= LONG_SIDE && file.size <= SMALL_ENOUGH) {
+      bitmap.close()
+      return file
+    }
+    const scale = Math.min(1, LONG_SIDE / long)
+    const canvas = document.createElement('canvas')
+    canvas.width = Math.round(bitmap.width * scale)
+    canvas.height = Math.round(bitmap.height * scale)
+    canvas.getContext('2d')!.drawImage(bitmap, 0, 0, canvas.width, canvas.height)
+    bitmap.close()
+    const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, 'image/jpeg', 0.88))
+    if (!blob) return file
+    return new File([blob], file.name.replace(/\.[^.]+$/, '') + '.jpg', {
+      type: 'image/jpeg',
+      lastModified: file.lastModified
+    })
+  } catch {
+    return file
+  }
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -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')
+        }
+    });
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AAEnE,gHAAgH;AAChH,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,KAAK,CAAC,QAAQ,CAAC;QACb,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE;YACJ,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,0BAA0B;YACjC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC;SAChD;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import { navigate, store } from '@operato/shell'\nimport { ADD_USER_MENU } from '@things-factory/apptool-base/client'\n\n/* One's own gallery is in the menu the header's avatar opens, right after the profile (ADR-0165 decision 6). */\nexport default function bootstrap() {\n  store.dispatch({\n    type: ADD_USER_MENU,\n    item: {\n      name: 'my-gallery',\n      icon: 'photo_library',\n      label: 'gallery.title.my-gallery',\n      order: 12,\n      action: () => navigate('gallery-page?tab=mine')\n    }\n  })\n}\n"]}

package/dist-client/components/gallery-forms.d.ts

@@ -0,0 +1,31 @@
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@operato/popup/ox-popup-actions.js';
+import { LitElement } from 'lit';
+declare const GalleryEventForm_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class GalleryEventForm extends GalleryEventForm_base {
+    static styles: import("lit").CSSResult[];
+    private name;
+    private startAt;
+    private endAt;
+    private location;
+    private busy;
+    render(): import("lit-html").TemplateResult<1>;
+    /** A later start carries the end with it, the same length. */
+    private start;
+    private save;
+    /** What was made goes as the popup's result. */
+    private close;
+}
+declare const GalleryTagForm_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+export declare class GalleryTagForm extends GalleryTagForm_base {
+    static styles: import("lit").CSSResult[];
+    tag: string;
+    private to;
+    private busy;
+    render(): import("lit-html").TemplateResult<1>;
+    private save;
+    /** What was made goes as the popup's result. */
+    private close;
+}
+export {};

package/dist-client/components/gallery-forms.js

@@ -0,0 +1,223 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * 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) => {
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}T${pad(value.getHours())}:${pad(value.getMinutes())}`;
+};
+let GalleryEventForm = class GalleryEventForm extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.name = '';
+        this.startAt = local(new Date(new Date().setHours(9, 0, 0, 0)));
+        this.endAt = local(new Date(new Date().setHours(18, 0, 0, 0)));
+        this.location = '';
+        this.busy = false;
+    }
+    static { this.styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]; }
+    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) => (this.name = e.target.value)}
+        /></label>
+        <div class="row">
+          <label
+            >${t('gallery.field.starts')}<input
+              type="datetime-local"
+              .value=${this.startAt}
+              @change=${(e) => this.start(e.target.value)}
+          /></label>
+          <label
+            >${t('gallery.field.ends')}<input
+              type="datetime-local"
+              .value=${this.endAt}
+              @change=${(e) => (this.endAt = e.target.value)}
+          /></label>
+        </div>
+        <label
+          >${t('gallery.field.location')}<input
+            .value=${this.location}
+            @input=${(e) => (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. */
+    start(value) {
+        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));
+    }
+    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. */
+    close(result) {
+        this.dispatchEvent(new CustomEvent('done', { detail: result, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryEventForm.prototype, "name", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryEventForm.prototype, "startAt", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryEventForm.prototype, "endAt", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryEventForm.prototype, "location", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryEventForm.prototype, "busy", void 0);
+GalleryEventForm = __decorate([
+    customElement('gallery-event-form')
+], GalleryEventForm);
+export { GalleryEventForm };
+let GalleryTagForm = class GalleryTagForm extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.tag = '';
+        this.to = '';
+        this.busy = false;
+    }
+    static { this.styles = [CommonPopupStyles, PopupBodyStyles, FormStyles]; }
+    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) => (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>`;
+    }
+    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. */
+    close(result) {
+        this.dispatchEvent(new CustomEvent('done', { detail: result, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], GalleryTagForm.prototype, "tag", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryTagForm.prototype, "to", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryTagForm.prototype, "busy", void 0);
+GalleryTagForm = __decorate([
+    customElement('gallery-tag-form')
+], GalleryTagForm);
+export { GalleryTagForm };
+//# sourceMappingURL=gallery-forms.js.map

package/dist-client/components/gallery-forms.js.map

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