@things-factory/gallery 10.1.248 → 10.1.250

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

@@ -0,0 +1,624 @@
+import { __decorate, __metadata } from "tslib";
+/*
+ * Posting photos (ADR-0165 decision 3) - and changing one's own post. Photos are all it needs; the caption, the tags
+ * and the event are there to add. When the photos were taken is read from the first one, and the events near that day
+ * are offered first - one press puts the post on one.
+ */
+import '@material/web/button/filled-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '@operato/input/ox-input-select-buttons.js';
+import '@operato/popup/ox-popup-actions.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify } from '@operato/layout';
+import { CommonPopupStyles, PopupBodyStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { galleryApi, galleryChanged } from '../utils/gallery-api.js';
+import { day, reasonOf, t } from '../utils/gallery-words.js';
+import { shrunk, takenAtOf } from '../utils/photo-prep.js';
+const MAX_PHOTOS = 20;
+const MAX_CAPTION = 500;
+const MAX_TAGS = 10;
+const MAX_TAG = 30;
+/* The events shown before 「more」 - the near ones are among them. */
+const FIRST_CHOICES = 4;
+/** yyyy-mm-dd of a date in the reader's own time. */
+const dateText = (value) => `${value.getFullYear()}-${String(value.getMonth() + 1).padStart(2, '0')}-${String(value.getDate()).padStart(2, '0')}`;
+let GalleryUploader = class GalleryUploader extends localize(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** The photos the page picked before the window opened. */
+        this.files = [];
+        /** Where a new post goes - the screen it was opened from. */
+        this.space = 'COMPANY';
+        this.added = [];
+        this.kept = [];
+        this.caption = '';
+        this.tags = [];
+        this.tagText = '';
+        /** Why the tag being typed was not taken - said under the tags, the text kept so it can be shortened. */
+        this.tagRefusal = '';
+        this.suggestions = [];
+        this.chosenSpace = 'COMPANY';
+        /** A post of the own gallery is the person's alone until shared (decision 2) - off when posting. */
+        this.shared = false;
+        this.chosenEvent = null;
+        this.takenOn = dateText(new Date());
+        this.choices = [];
+        this.allChoices = false;
+        this.busy = false;
+    }
+    static { this.styles = [
+        CommonPopupStyles,
+        PopupBodyStyles,
+        css `
+      :host {
+        height: 100%;
+      }
+      .body {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-large, 12px);
+      }
+      h4 {
+        margin: 0 0 var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 12px);
+        font-weight: 600;
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .photos {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
+        gap: var(--spacing-small, 4px);
+      }
+      .photo {
+        position: relative;
+        aspect-ratio: 1;
+        border-radius: var(--border-radius, 4px);
+        overflow: hidden;
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .photo img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+      .photo button {
+        position: absolute;
+        top: 2px;
+        inset-inline-end: 2px;
+        display: inline-flex;
+        padding: 2px;
+        border: 0;
+        border-radius: 50%;
+        background: rgb(0 0 0 / 55%);
+        color: #fff;
+        cursor: pointer;
+      }
+      .photo button md-icon {
+        --md-icon-size: 16px;
+      }
+      .add {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 2px;
+        aspect-ratio: 1;
+        border: 1px dashed var(--ui-line, var(--md-sys-color-outline));
+        border-radius: var(--border-radius, 4px);
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        font-size: var(--ui-t-small, 12px);
+        cursor: pointer;
+      }
+      .add[disabled] {
+        opacity: 0.4;
+        cursor: default;
+      }
+      ox-input-file {
+        display: contents;
+      }
+      textarea,
+      input {
+        box-sizing: border-box;
+        width: 100%;
+        font: inherit;
+        font-size: var(--ui-t-body, 14px);
+        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);
+      }
+      textarea {
+        min-height: 64px;
+        resize: vertical;
+      }
+      input[type='date'] {
+        width: auto;
+      }
+      .count {
+        text-align: end;
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .refusal {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--md-sys-color-error);
+      }
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        align-items: center;
+      }
+      .chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 2px var(--spacing-medium, 8px);
+        border: 1px solid var(--ui-line-soft, var(--md-sys-color-outline-variant));
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-on-surface);
+        font: inherit;
+        font-size: var(--ui-t-small, 12px);
+        line-height: 1.6;
+        cursor: pointer;
+      }
+      .chip[aria-pressed='true'] {
+        border-color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .chip md-icon {
+        --md-icon-size: 14px;
+      }
+      .chip .near {
+        color: var(--md-sys-color-primary);
+      }
+      .tag-input {
+        flex: 1;
+        min-width: 120px;
+        width: auto;
+        border: 0;
+        padding: 2px 0;
+        background: none;
+      }
+      .tag-input:focus {
+        outline: none;
+      }
+      .tags {
+        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);
+      }
+      .suggest {
+        margin-top: var(--spacing-small, 4px);
+      }
+      .suggest .chip {
+        border-style: dashed;
+      }
+      .muted {
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-large, 12px);
+        align-items: flex-end;
+      }
+    `
+    ]; }
+    render() {
+        const total = this.kept.length + this.added.length;
+        const full = total >= MAX_PHOTOS;
+        const company = this.chosenSpace === 'COMPANY';
+        const shown = this.allChoices ? this.choices : this.choices.slice(0, FIRST_CHOICES);
+        const chosen = this.choices.find(one => one.id === this.chosenEvent);
+        return html `<div class="body">
+        <section>
+          <div class="photos">
+            ${this.kept.map(one => html `<div class="photo">
+                  <img src=${one.thumbnail || one.fullpath} alt="" />
+                  <button
+                    aria-label=${t('gallery.button.remove-photo')}
+                    @click=${() => (this.kept = this.kept.filter(other => other !== one))}
+                  >
+                    <md-icon>close</md-icon>
+                  </button>
+                </div>`)}
+            ${this.added.map(one => html `<div class="photo">
+                  <img src=${one.url} alt="" />
+                  <button aria-label=${t('gallery.button.remove-photo')} @click=${() => this.drop(one)}>
+                    <md-icon>close</md-icon>
+                  </button>
+                </div>`)}
+            <button class="add" ?disabled=${full || this.busy} @click=${() => this.picker?.pick()}>
+              <md-icon>add_photo_alternate</md-icon>${t('gallery.button.add-photos')}
+            </button>
+            ${isMobileDevice()
+            ? html `<button class="add" ?disabled=${full || this.busy} @click=${() => this.camera?.pick()}>
+                    <md-icon>photo_camera</md-icon>${t('gallery.button.shoot-more')}
+                  </button>`
+            : nothing}
+          </div>
+          <ox-input-file
+            id="pick"
+            quiet
+            outside-trigger
+            hide-filelist
+            multiple
+            accept="image/*"
+            .progress=${this.progress}
+            @change=${(e) => this.take(e)}
+          ></ox-input-file>
+          <ox-input-file
+            id="shoot"
+            quiet
+            outside-trigger
+            hide-filelist
+            accept="image/*"
+            capture="environment"
+            @change=${(e) => this.take(e)}
+          ></ox-input-file>
+          ${full ? html `<div class="muted">${t('gallery.text.photos-full', { count: MAX_PHOTOS })}</div>` : nothing}
+        </section>
+
+        <section>
+          <textarea
+            maxlength=${MAX_CAPTION}
+            placeholder=${t('gallery.text.caption-placeholder')}
+            .value=${this.caption}
+            @input=${(e) => (this.caption = e.target.value)}
+          ></textarea>
+          ${this.caption.length > MAX_CAPTION * 0.8 ? html `<div class="count">${this.caption.length} / ${MAX_CAPTION}</div>` : nothing}
+        </section>
+
+        <section>
+          <h4>${t('gallery.field.tags')}</h4>
+          <div class="chips tags">
+            ${this.tags.map(tag => html `<span class="chip">#${tag}<md-icon role="button" aria-label=${t('gallery.button.remove-tag')} @click=${() => (this.tags = this.tags.filter(one => one !== tag))}>close</md-icon></span>`)}
+            ${this.tags.length < MAX_TAGS
+            ? html `<input
+                    class="tag-input"
+                    .value=${this.tagText}
+                    placeholder=${this.tags.length ? '' : t('gallery.text.tag-placeholder')}
+                    @input=${(e) => this.typeTag(e.target.value)}
+                    @keydown=${(e) => this.tagKey(e)}
+                    @blur=${() => this.addTag(this.tagText)}
+                  />`
+            : nothing}
+          </div>
+          ${this.tagRefusal ? html `<div class="refusal" role="alert">${this.tagRefusal}</div>` : nothing}
+          ${this.suggestions.length
+            ? html `<div class="chips suggest">
+                  ${this.suggestions.filter(one => !this.tags.some(tag => tag.toLowerCase() === one.tag.toLowerCase())).map(one => html `<button class="chip" @mousedown=${(e) => e.preventDefault()} @click=${() => this.addTag(one.tag)}>#${one.tag}</button>`)}
+                </div>`
+            : nothing}
+        </section>
+
+        <section class="row">
+          <div>
+            <h4>${t('gallery.field.space')}</h4>
+            <ox-input-select-buttons
+              .options=${['COMPANY', 'PERSONAL'].map(space => ({ value: space, display: t(`gallery.space.${space}`) }))}
+              .value=${this.chosenSpace}
+              @change=${(e) => (e.detail ? this.chooseSpace(e.detail) : (e.target.value = this.chosenSpace))}
+            ></ox-input-select-buttons>
+          </div>
+          <div>
+            <h4>${t('gallery.field.taken-on')}</h4>
+            <input type="date" .value=${this.takenOn} @change=${(e) => this.changeDay(e.target.value)} />
+          </div>
+        </section>
+
+        ${company
+            ? html `<section>
+                <h4>${t('gallery.field.event')}</h4>
+                <div class="chips">
+                  <button
+                    class="chip"
+                    aria-pressed=${String(!this.chosenEvent)}
+                    @click=${() => (this.chosenEvent = null)}
+                  >
+                    ${t('gallery.text.no-event')}
+                  </button>
+                  ${chosen && !shown.includes(chosen) ? this.choiceChip(chosen) : nothing}
+                  ${shown.map(one => this.choiceChip(one))}
+                  ${this.choices.length > FIRST_CHOICES && !this.allChoices
+                ? html `<button class="chip" @click=${() => (this.allChoices = true)}>
+                          ${t('gallery.button.more-events', { count: this.choices.length - FIRST_CHOICES })}
+                        </button>`
+                : nothing}
+                </div>
+              </section>`
+            : html `<section>
+                <h4>${t('gallery.field.shared')}</h4>
+                <ox-input-select-buttons
+                  .options=${[
+                { value: 'me', display: t('gallery.text.only-me') },
+                { value: 'everyone', display: t('gallery.text.everyone') }
+            ]}
+                  .value=${this.shared ? 'everyone' : 'me'}
+                  @change=${(e) => (e.detail ? (this.shared = e.detail === 'everyone') : (e.target.value = this.shared ? 'everyone' : 'me'))}
+                ></ox-input-select-buttons>
+                <div class="muted">${t(this.shared ? 'gallery.text.shared-note' : 'gallery.text.only-me-note')}</div>
+              </section>`}
+      </div>
+      <ox-popup-actions>
+        <md-text-button slot="cancel" ?disabled=${this.busy} @click=${() => this.close()}
+          >${t('gallery.button.cancel')}</md-text-button
+        >
+        <md-filled-button slot="confirm" ?disabled=${this.busy || total < 1} @click=${() => this.save()}
+          >${this.post ? t('gallery.button.save') : t('gallery.button.post-count', { count: total })}</md-filled-button
+        >
+      </ox-popup-actions>`;
+    }
+    choiceChip(one) {
+        return html `<button
+      class="chip"
+      aria-pressed=${String(this.chosenEvent === one.id)}
+      @click=${() => (this.chosenEvent = one.id)}
+    >
+      ${one.near ? html `<md-icon class="near">event_available</md-icon>` : nothing}${one.name}<span class="muted"
+        >· ${day(one.startAt)}</span
+      >
+    </button>`;
+    }
+    async firstUpdated() {
+        const post = this.post;
+        if (post) {
+            this.kept = [...post.photos];
+            this.caption = post.caption ?? '';
+            this.tags = [...(post.tags ?? [])];
+            this.chosenSpace = post.space;
+            this.shared = post.shared;
+            this.chosenEvent = post.event?.id ?? null;
+            this.takenOn = dateText(new Date(post.takenAt));
+        }
+        else {
+            this.chosenSpace = this.eventId ? 'COMPANY' : this.space;
+            this.chosenEvent = this.eventId ?? null;
+        }
+        await this.add(this.files ?? []);
+        await this.loadChoices();
+    }
+    disconnectedCallback() {
+        for (const one of this.added)
+            URL.revokeObjectURL(one.url);
+        clearTimeout(this.suggestTimer);
+        super.disconnectedCallback();
+    }
+    async take(e) {
+        const picked = [...(e.detail ?? [])];
+        /* The picker's own reset says `change` again, with nothing - that one is let go. */
+        if (!picked.length)
+            return;
+        e.target.reset?.();
+        const before = this.kept.length + this.added.length;
+        await this.add(picked);
+        /* The first photo says the day - the events near it come first. */
+        if (!before && !this.post)
+            await this.loadChoices();
+    }
+    async add(files) {
+        const room = MAX_PHOTOS - this.kept.length - this.added.length;
+        const photos = files
+            .filter(file => /^image\//i.test(file.type) || /\.(jpe?g|png|gif|webp|heic|heif)$/i.test(file.name))
+            .slice(0, Math.max(0, room));
+        if (photos.length < files.length)
+            notify({ level: 'warn', message: t('gallery.text.photos-skipped', { count: files.length - photos.length }) });
+        if (!photos.length)
+            return;
+        const first = !this.kept.length && !this.added.length && !this.post;
+        this.added = [...this.added, ...photos.map(file => ({ file, url: URL.createObjectURL(file) }))];
+        if (first) {
+            const takenAt = await takenAtOf(photos[0]);
+            if (takenAt)
+                this.takenOn = dateText(takenAt);
+        }
+    }
+    drop(one) {
+        URL.revokeObjectURL(one.url);
+        this.added = this.added.filter(other => other !== one);
+    }
+    takenAt() {
+        const [y, m, d] = this.takenOn.split('-').map(Number);
+        const now = new Date();
+        /* A day chosen without its hour keeps the hour it was posted - today's photo is not dated midnight. */
+        const at = y ? new Date(y, m - 1, d, now.getHours(), now.getMinutes()) : now;
+        return at.toISOString();
+    }
+    async loadChoices() {
+        try {
+            /* Offered, not chosen: the events near that day come first, and one press puts the post on one. */
+            this.choices = await galleryApi.eventChoices(this.takenAt());
+        }
+        catch {
+            this.choices = [];
+        }
+    }
+    async changeDay(value) {
+        if (!value)
+            return;
+        this.takenOn = value;
+        await this.loadChoices();
+    }
+    chooseSpace(space) {
+        this.chosenSpace = space;
+        if (space === 'PERSONAL')
+            this.chosenEvent = null;
+    }
+    typeTag(value) {
+        if (/[,\s]$/.test(value) && value.trim()) {
+            this.addTag(value);
+            return;
+        }
+        this.tagText = value;
+        clearTimeout(this.suggestTimer);
+        this.suggestTimer = setTimeout(async () => {
+            try {
+                this.suggestions = await galleryApi.tags(this.tagText);
+            }
+            catch {
+                this.suggestions = [];
+            }
+        }, 200);
+    }
+    tagKey(e) {
+        if (e.isComposing)
+            return;
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.addTag(this.tagText);
+        }
+        else if (e.key === 'Backspace' && !this.tagText && this.tags.length) {
+            this.tags = this.tags.slice(0, -1);
+        }
+    }
+    /** Takes the typed tag, or says why not and keeps it - a longer tag was cut at 30 without a word (2026-10-30). */
+    addTag(raw) {
+        const tag = raw.replace(/[,]/g, ' ').trim().replace(/^#+/, '').replace(/\s+/g, ' ').trim();
+        if (tag.length > MAX_TAG) {
+            this.tagRefusal = t('gallery.text.tag-too-long-typed', { max: MAX_TAG, length: tag.length });
+            return false;
+        }
+        this.tagRefusal = '';
+        this.tagText = '';
+        if (!tag || this.tags.length >= MAX_TAGS || this.tags.some(one => one.toLowerCase() === tag.toLowerCase()))
+            return true;
+        this.tags = [...this.tags, tag];
+        return true;
+    }
+    async save() {
+        if (!this.addTag(this.tagText))
+            return;
+        this.busy = true;
+        try {
+            const files = await Promise.all(this.added.map(one => shrunk(one.file)));
+            const input = {
+                space: this.chosenSpace,
+                shared: this.chosenSpace === 'PERSONAL' && this.shared,
+                caption: this.caption.trim(),
+                takenAt: this.takenAt(),
+                tags: this.tags,
+                eventId: this.chosenSpace === 'COMPANY' ? this.chosenEvent : null
+            };
+            const uploading = (fraction) => (this.progress = fraction);
+            const post = this.post
+                ? await galleryApi.update(this.post.id, input, files, this.post.photos.filter(one => !this.kept.includes(one)).map(one => one.id), uploading)
+                : await galleryApi.create(input, files, uploading);
+            notify({ message: this.post ? t('gallery.text.saved') : t('gallery.text.posted') });
+            galleryChanged();
+            this.dispatchEvent(new CustomEvent('gallery-posted', { detail: post, bubbles: true, composed: true }));
+            this.close();
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.progress = undefined;
+            this.busy = false;
+        }
+    }
+    close() {
+        this.dispatchEvent(new CustomEvent('done', { bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "post", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "files", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], GalleryUploader.prototype, "space", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "eventId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "added", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "kept", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "caption", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "tags", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "tagText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "tagRefusal", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "suggestions", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryUploader.prototype, "chosenSpace", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "shared", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "chosenEvent", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "takenOn", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryUploader.prototype, "choices", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "allChoices", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], GalleryUploader.prototype, "progress", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "busy", void 0);
+__decorate([
+    query('#pick'),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "picker", void 0);
+__decorate([
+    query('#shoot'),
+    __metadata("design:type", Object)
+], GalleryUploader.prototype, "camera", void 0);
+GalleryUploader = __decorate([
+    customElement('gallery-uploader')
+], GalleryUploader);
+export { GalleryUploader };
+//# sourceMappingURL=gallery-uploader.js.map