@things-factory/gallery 10.1.248 → 10.1.249

package/dist-client/pages/gallery-page.d.ts

@@ -0,0 +1,54 @@
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '../components/gallery-forms.js';
+import '../components/gallery-uploader.js';
+import '../components/gallery-viewer.js';
+import { PageView } from '@operato/shell';
+declare const GalleryPage_base: (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
+/**
+ * 갤러리 — the company's photos, its events, everyone's, and one's own (ADR-0165 decisions 2, 6). One page: the tabs are
+ * its ways in, and an event, a person or a tag narrows it (`?event=` · `?author=` · `?tag=`; `?post=` opens one post).
+ * Posting takes only photos - 「사진 올리기」, and on a phone 「찍기」 opens the camera at once.
+ */
+export declare class GalleryPage extends GalleryPage_base {
+    static styles: import("lit").CSSResult[];
+    private tab;
+    private eventId?;
+    private authorId?;
+    private tag?;
+    private posts;
+    private total;
+    private events;
+    private tags;
+    private event?;
+    private loading;
+    private moderator;
+    private picker;
+    private camera;
+    private onChanged;
+    get context(): {
+        title: string;
+        actions: any[];
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    private get narrowed();
+    private renderNarrowing;
+    private renderPosts;
+    private renderEvents;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    pageInitialized(): Promise<void>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    private filter;
+    private load;
+    /** Where a new post goes - the screen it is posted from. */
+    private preset;
+    private picked;
+    private upload;
+    private open;
+    private openById;
+    private replace;
+    private makeEvent;
+    private renameTag;
+}
+export {};

package/dist-client/pages/gallery-page.js

@@ -0,0 +1,590 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-input-file.js';
+import '../components/gallery-forms.js';
+import '../components/gallery-uploader.js';
+import '../components/gallery-viewer.js';
+import { css, html, nothing } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { i18next, localize } from '@operato/i18n';
+import { notify, openPopup } from '@operato/layout';
+import { navigate, PageView } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { isMobileDevice } from '@operato/utils';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
+import { GalleryShow } from '../components/gallery-show.js';
+import { galleryApi } from '../utils/gallery-api.js';
+import { refreshGalleryBadge } from '../utils/gallery-badge.js';
+import { day, days, reasonOf, t } from '../utils/gallery-words.js';
+const TABS = ['company', 'events', 'all', 'mine'];
+const PAGE = 30;
+/**
+ * 갤러리 — the company's photos, its events, everyone's, and one's own (ADR-0165 decisions 2, 6). One page: the tabs are
+ * its ways in, and an event, a person or a tag narrows it (`?event=` · `?author=` · `?tag=`; `?post=` opens one post).
+ * Posting takes only photos - 「사진 올리기」, and on a phone 「찍기」 opens the camera at once.
+ */
+let GalleryPage = class GalleryPage extends localize(i18next)(PageView) {
+    constructor() {
+        super(...arguments);
+        this.tab = 'company';
+        this.posts = [];
+        this.total = 0;
+        this.events = [];
+        this.tags = [];
+        this.loading = false;
+        this.moderator = false;
+        this.onChanged = () => this.load();
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: block;
+        overflow: auto;
+        padding: var(--spacing-large, 12px) var(--spacing-large, 16px);
+        box-sizing: border-box;
+        background: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
+      }
+      .tabs {
+        display: flex;
+        gap: var(--spacing-small, 4px);
+        overflow-x: auto;
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .tabs button {
+        flex: none;
+        padding: 4px var(--spacing-large, 12px);
+        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-body, 14px);
+        cursor: pointer;
+      }
+      .tabs button[aria-selected='true'] {
+        border-color: var(--md-sys-color-primary);
+        background: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
+      }
+      .narrow {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .narrow h2 {
+        margin: 0;
+        font-size: var(--ui-t-title, 18px);
+      }
+      .narrow .muted {
+        font-size: var(--ui-t-small, 12px);
+      }
+      .chips {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-small, 4px);
+        margin-bottom: var(--spacing-medium, 8px);
+      }
+      .chip,
+      .link {
+        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);
+        color: var(--md-sys-color-primary);
+      }
+      .chip md-icon,
+      .link md-icon {
+        --md-icon-size: 14px;
+      }
+      .link {
+        border: 0;
+        padding: 0;
+        color: var(--md-sys-color-primary);
+      }
+      .muted {
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: var(--spacing-medium, 8px);
+      }
+      .card {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+        min-width: 0;
+      }
+      .picture {
+        position: relative;
+        width: 100%;
+        aspect-ratio: 1;
+        border-radius: var(--border-radius, 6px);
+        overflow: hidden;
+        background: var(--md-sys-color-surface-container-high);
+      }
+      .picture img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+        transition: transform 160ms ease-out;
+      }
+      .card:hover .picture img {
+        transform: scale(1.03);
+      }
+      .badge {
+        position: absolute;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        padding: 0 6px;
+        border-radius: 999px;
+        background: rgb(0 0 0 / 50%);
+        color: #fff;
+        font-size: var(--ui-t-small, 12px);
+        line-height: 1.6;
+      }
+      .badge md-icon {
+        --md-icon-size: 14px;
+      }
+      .badge.likes {
+        bottom: 4px;
+        inset-inline-start: 4px;
+      }
+      .badge.likes md-icon {
+        font-variation-settings: 'FILL' 0;
+      }
+      .badge.likes[liked] md-icon {
+        color: #ff6b6b;
+        font-variation-settings: 'FILL' 1;
+      }
+      .badge.count {
+        top: 4px;
+        inset-inline-end: 4px;
+      }
+      .badge.private {
+        bottom: 4px;
+        inset-inline-end: 4px;
+      }
+      .badge.hidden {
+        top: 4px;
+        inset-inline-start: 4px;
+        background: var(--md-sys-color-error);
+      }
+      .under {
+        display: flex;
+        gap: var(--spacing-small, 4px);
+        font-size: var(--ui-t-small, 12px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .under .name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .title {
+        font-size: var(--ui-t-body, 14px);
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--spacing-medium, 8px);
+        padding: 48px var(--spacing-large, 16px);
+        color: var(--ui-muted, var(--md-sys-color-on-surface-variant));
+        text-align: center;
+      }
+      .empty md-icon {
+        --md-icon-size: 40px;
+      }
+      .empty button,
+      .more {
+        padding: 6px var(--spacing-large, 16px);
+        border: 1px solid var(--md-sys-color-primary);
+        border-radius: 999px;
+        background: none;
+        color: var(--md-sys-color-primary);
+        font: inherit;
+        cursor: pointer;
+      }
+      .more {
+        display: block;
+        margin: var(--spacing-large, 16px) auto 0;
+      }
+      ox-input-file {
+        display: none;
+      }
+      @media (max-width: 460px) {
+        :host {
+          padding: var(--spacing-medium, 8px);
+        }
+        .grid {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: var(--spacing-small, 4px);
+        }
+      }
+    `
+    ]; }
+    get context() {
+        const actions = [];
+        if (this.tag && this.moderator)
+            actions.push({ title: t('gallery.button.rename-tag'), icon: 'sell', action: () => this.renameTag() });
+        if (this.tab === 'events' && !this.eventId && this.moderator)
+            actions.push({ title: t('gallery.button.create-event'), icon: 'event', action: () => this.makeEvent() });
+        if (this.tab !== 'events' || this.eventId) {
+            if (isMobileDevice())
+                actions.push({ title: t('gallery.button.shoot'), icon: 'photo_camera', action: () => this.camera?.pick() });
+            if (this.total)
+                actions.push({ title: t('gallery.button.slideshow'), icon: 'slideshow', action: () => GalleryShow.open({ filter: this.filter(), playing: true }) });
+            actions.push({
+                title: t('gallery.button.post'),
+                icon: 'add_photo_alternate',
+                emphasis: { raised: true },
+                action: () => this.picker?.pick()
+            });
+        }
+        return { title: t('gallery.title.page'), actions };
+    }
+    render() {
+        return html `
+      <ox-input-file
+        id="pick"
+        quiet
+        outside-trigger
+        hide-filelist
+        multiple
+        accept="image/*"
+        @change=${(e) => this.picked(e)}
+      ></ox-input-file>
+      <ox-input-file
+        id="shoot"
+        quiet
+        outside-trigger
+        hide-filelist
+        accept="image/*"
+        capture="environment"
+        @change=${(e) => this.picked(e)}
+      ></ox-input-file>
+      <div class="tabs" role="tablist">
+        ${TABS.map(tab => html `<button role="tab" aria-selected=${String(this.tab === tab && !this.narrowed)} @click=${() => navigate(`gallery-page?tab=${tab}`)}>${t(`gallery.tab.${tab}`)}</button>`)}
+      </div>
+      ${this.renderNarrowing()} ${this.tab === 'events' && !this.eventId ? this.renderEvents() : this.renderPosts()}
+    `;
+    }
+    get narrowed() {
+        return !!(this.eventId || this.tag || this.authorId);
+    }
+    renderNarrowing() {
+        if (this.eventId) {
+            const event = this.event;
+            return html `<div class="narrow">
+        <h2>${event?.name ?? ''}</h2>
+        ${event ? html `<span class="muted">${days(event.startAt, event.endAt)}${event.location ? ` · ${event.location}` : ''}</span>` : nothing}
+        <button class="link" @click=${() => navigate('gallery-page?tab=events')}>
+          <md-icon>arrow_back</md-icon>${t('gallery.tab.events')}
+        </button>
+      </div>`;
+        }
+        if (this.authorId) {
+            const name = this.posts[0]?.creator?.name ?? '';
+            return html `<div class="narrow"><h2>${t('gallery.text.persons-gallery', { name })}</h2></div>`;
+        }
+        if (this.tag) {
+            return html `<div class="narrow">
+        <h2>#${this.tag}</h2>
+        <button class="link" @click=${() => navigate(`gallery-page?tab=${this.tab}`)}>
+          <md-icon>close</md-icon>${t('gallery.button.clear')}
+        </button>
+      </div>`;
+        }
+        if (this.tab === 'events' || !this.tags.length)
+            return nothing;
+        return html `<div class="chips">
+      ${this.tags.map(one => html `<button class="chip" @click=${() => navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(one.tag)}`)}>#${one.tag}</button>`)}
+    </div>`;
+    }
+    renderPosts() {
+        if (!this.posts.length) {
+            return this.loading
+                ? nothing
+                : html `<div class="empty">
+            <md-icon>photo_library</md-icon>
+            <div>
+              ${this.eventId ? t('gallery.text.empty-event') : this.tab === 'mine' ? t('gallery.text.empty-mine') : t('gallery.text.empty')}
+            </div>
+            <button @click=${() => this.picker?.pick()}>${t('gallery.button.post')}</button>
+          </div>`;
+        }
+        return html `<div class="grid">
+        ${this.posts.map(post => html `<button class="card" @click=${() => this.open(post)}>
+              <div class="picture">
+                ${post.photos[0] ? html `<img loading="lazy" src=${post.photos[0].thumbnail || post.photos[0].fullpath} alt=${post.caption ?? ''} />` : nothing}
+                ${post.hiddenAt ? html `<span class="badge hidden"><md-icon>visibility_off</md-icon>${t('gallery.text.hidden')}</span>` : nothing}
+                ${post.photos.length > 1 ? html `<span class="badge count"><md-icon>photo_library</md-icon>${post.photos.length}</span>` : nothing}
+                ${post.space === 'PERSONAL' && !post.shared ? html `<span class="badge private" title=${t('gallery.text.only-me')}><md-icon>lock</md-icon></span>` : nothing}
+                ${post.likeCount || post.liked ? html `<span class="badge likes" ?liked=${post.liked}><md-icon>favorite</md-icon>${post.likeCount}</span>` : nothing}
+              </div>
+              <div class="under">
+                <span class="name">${post.creator?.name ?? ''}</span><span>·</span><span>${day(post.takenAt)}</span>
+              </div>
+            </button>`)}
+      </div>
+      ${this.posts.length < this.total ? html `<button class="more" ?disabled=${this.loading} @click=${() => this.load(true)}>${t('gallery.button.more')}</button>` : nothing}`;
+    }
+    renderEvents() {
+        if (!this.events.length) {
+            return this.loading
+                ? nothing
+                : html `<div class="empty">
+            <md-icon>event</md-icon>
+            <div>${t('gallery.text.empty-events')}</div>
+            ${this.moderator ? html `<button @click=${() => this.makeEvent()}>${t('gallery.button.create-event')}</button>` : nothing}
+          </div>`;
+        }
+        return html `<div class="grid">
+      ${this.events.map(event => html `<button class="card" @click=${() => navigate(`gallery-page?event=${event.id}`)}>
+            <div class="picture">
+              ${event.cover ? html `<img loading="lazy" src=${event.cover.thumbnail || event.cover.fullpath} alt="" />` : nothing}
+              <span class="badge count"><md-icon>photo_library</md-icon>${event.postCount}</span>
+            </div>
+            <div class="title">${event.name}</div>
+            <div class="under">
+              <span>${days(event.startAt, event.endAt)}</span
+              >${event.location ? html `<span>·</span><span class="name">${event.location}</span>` : nothing}
+            </div>
+          </button>`)}
+    </div>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('gallery-changed', this.onChanged);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('gallery-changed', this.onChanged);
+        super.disconnectedCallback();
+    }
+    async pageInitialized() {
+        hasPrivilege({ category: 'gallery', privilege: 'mutation', domainOwnerGranted: true }).then(moderator => {
+            this.moderator = !!moderator;
+            this.updateContext();
+        });
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (!this.active || !(changes.active || changes.params))
+            return;
+        const params = lifecycle?.params ?? {};
+        this.eventId = params.event || undefined;
+        this.tag = params.tag || undefined;
+        /* 「me」 is the own gallery - the server knows who asks; the client holds no user id. */
+        this.authorId = params.author === 'me' ? undefined : params.author || undefined;
+        this.tab = this.eventId ? 'events' : params.author === 'me' ? 'mine' : TABS.includes(params.tab) ? params.tab : 'company';
+        this.event = undefined;
+        this.posts = [];
+        this.updateContext();
+        await this.load();
+        if (params.post)
+            this.openById(params.post);
+        galleryApi
+            .visit()
+            .then(() => refreshGalleryBadge())
+            .catch(() => { });
+    }
+    filter() {
+        if (this.eventId)
+            return { eventId: this.eventId };
+        const filter = {};
+        if (this.tag)
+            filter.tag = this.tag;
+        if (this.authorId)
+            filter.authorId = this.authorId;
+        else if (this.tab === 'company')
+            filter.space = 'COMPANY';
+        else if (this.tab === 'mine')
+            filter.mine = true;
+        return filter;
+    }
+    async load(more = false) {
+        this.loading = true;
+        try {
+            if (this.tab === 'events' && !this.eventId) {
+                this.events = await galleryApi.events();
+                return;
+            }
+            const page = await galleryApi.posts(this.filter(), more ? this.posts.length : 0, PAGE);
+            this.posts = more ? [...this.posts, ...page.items] : page.items;
+            this.total = page.total;
+            /* The slideshow is offered once there is something to show. */
+            this.updateContext();
+            if (this.eventId && !this.event)
+                this.event =
+                    page.items.find(one => one.event)?.event ?? (await galleryApi.events()).find(one => one.id === this.eventId);
+            if (!more && !this.narrowed)
+                this.tags = (await galleryApi.tags()).slice(0, 12);
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    /** Where a new post goes - the screen it is posted from. */
+    preset() {
+        if (this.eventId)
+            return { space: 'COMPANY', eventId: this.eventId };
+        return { space: this.tab === 'mine' ? 'PERSONAL' : 'COMPANY' };
+    }
+    picked(e) {
+        const files = [...(e.detail ?? [])];
+        /* The picker's own reset says `change` again, with nothing - that one is let go. */
+        if (!files.length)
+            return;
+        e.target.reset?.();
+        this.upload(files);
+    }
+    upload(files = [], post) {
+        const { space, eventId } = this.preset();
+        const popup = openPopup(html `<gallery-uploader
+        .files=${files}
+        .post=${post}
+        space=${space}
+        .eventId=${eventId ?? null}
+        @done=${() => popup.close()}
+      ></gallery-uploader>`, { backdrop: true, size: 'large', title: post ? t('gallery.title.edit') : t('gallery.title.post') });
+    }
+    /* A popup closes by going back in the history: where to go next is taken once it is gone (`result`). */
+    async open(post) {
+        const popup = openPopup(html `<gallery-viewer
+        .post=${post}
+        @done=${(e) => popup.close(e.detail)}
+        @gallery-liked=${(e) => this.replace(e.detail)}
+      ></gallery-viewer>`, { backdrop: true, size: 'large', title: post.event?.name || post.creator?.name || t('gallery.title.page') });
+        const next = await popup.result;
+        if (next?.edit)
+            this.upload([], next.edit);
+        else if (next?.go)
+            navigate(next.go);
+        else if (next?.show)
+            GalleryShow.open({ filter: this.filter(), start: next.show });
+    }
+    async openById(id) {
+        try {
+            const post = this.posts.find(one => one.id === id) ?? (await galleryApi.post(id));
+            if (post)
+                this.open(post);
+            else
+                notify({ level: 'warn', message: t('gallery.text.unknown-post') });
+        }
+        catch (error) {
+            notify({ level: 'error', message: reasonOf(error) });
+        }
+    }
+    replace(post) {
+        this.posts = this.posts.map(one => (one.id === post.id ? post : one));
+    }
+    async makeEvent() {
+        const popup = openPopup(html `<gallery-event-form @done=${(e) => popup.close(e.detail)}></gallery-event-form>`, {
+            backdrop: true,
+            size: 'medium',
+            title: t('gallery.button.create-event')
+        });
+        const made = await popup.result;
+        if (made?.id)
+            navigate(`gallery-page?event=${made.id}`);
+    }
+    async renameTag() {
+        const popup = openPopup(html `<gallery-tag-form .tag=${this.tag} @done=${(e) => popup.close(e.detail)}></gallery-tag-form>`, {
+            backdrop: true,
+            size: 'small',
+            title: t('gallery.button.rename-tag')
+        });
+        const to = await popup.result;
+        if (to)
+            navigate(`gallery-page?tab=${this.tab}&tag=${encodeURIComponent(to)}`);
+    }
+};
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "tab", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "eventId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "authorId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], GalleryPage.prototype, "tag", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "posts", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "total", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "events", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], GalleryPage.prototype, "tags", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "event", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "loading", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "moderator", void 0);
+__decorate([
+    query('#pick'),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "picker", void 0);
+__decorate([
+    query('#shoot'),
+    __metadata("design:type", Object)
+], GalleryPage.prototype, "camera", void 0);
+GalleryPage = __decorate([
+    customElement('gallery-page')
+], GalleryPage);
+export { GalleryPage };
+//# sourceMappingURL=gallery-page.js.map