@things-factory/gallery 0.0.0-stage → 10.1.223

package/client/pages/gallery-page.ts

@@ -0,0 +1,567 @@
+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, store } from '@operato/shell'
+import { ScrollbarStyles } from '@operato/styles'
+import { isMobileDevice } from '@operato/utils'
+import { hasPrivilege } from '@things-factory/auth-base/dist-client'
+
+import {
+  galleryApi,
+  type EventCard,
+  type EventFacts,
+  type Filter,
+  type Post,
+  type Space
+} from '../utils/gallery-api.js'
+import { refreshGalleryBadge } from '../utils/gallery-badge.js'
+import { day, days, reasonOf, t } from '../utils/gallery-words.js'
+
+type Tab = 'company' | 'events' | 'all' | 'mine'
+const TABS: Tab[] = ['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.
+ */
+@customElement('gallery-page')
+export class GalleryPage extends localize(i18next)(PageView) {
+  static 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.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);
+        }
+      }
+    `
+  ]
+
+  @state() private tab: Tab = 'company'
+  @state() private eventId?: string
+  @state() private authorId?: string
+  @state() private tag?: string
+  @state() private posts: Post[] = []
+  @state() private total = 0
+  @state() private events: EventCard[] = []
+  @state() private tags: { tag: string; count: number }[] = []
+  @state() private event?: EventFacts
+  @state() private loading = false
+  @state() private moderator = false
+
+  @query('#pick') private picker!: any
+  @query('#shoot') private camera!: any
+
+  private onChanged = () => this.load()
+
+  private get me(): string | undefined {
+    return (store.getState() as any).auth?.user?.id
+  }
+
+  get context() {
+    const actions: any[] = []
+    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() })
+      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: CustomEvent) => this.picked(e)}
+      ></ox-input-file>
+      <ox-input-file
+        id="shoot"
+        quiet
+        outside-trigger
+        hide-filelist
+        accept="image/*"
+        capture="environment"
+        @change=${(e: CustomEvent) => 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()}
+    `
+  }
+
+  private get narrowed() {
+    return !!(this.eventId || this.tag || (this.authorId && this.authorId !== this.me))
+  }
+
+  private 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 && this.authorId !== this.me) {
+      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>`
+  }
+
+  private 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.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}`
+  }
+
+  private 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: any, lifecycle: any) {
+    if (!this.active || !(changes.active || changes.params)) return
+    const params = lifecycle?.params ?? {}
+    this.eventId = params.event || undefined
+    this.tag = params.tag || undefined
+    this.authorId = params.author === 'me' ? this.me : params.author || undefined
+    this.tab = this.eventId
+      ? 'events'
+      : this.authorId === this.me && this.authorId
+        ? '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(() => {})
+  }
+
+  private filter(): Filter {
+    if (this.eventId) return { eventId: this.eventId }
+    const filter: 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' && this.me) filter.authorId = this.me
+    return filter
+  }
+
+  private 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
+      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. */
+  private preset(): { space: Space; eventId?: string } {
+    if (this.eventId) return { space: 'COMPANY', eventId: this.eventId }
+    return { space: this.tab === 'mine' ? 'PERSONAL' : 'COMPANY' }
+  }
+
+  private picked(e: CustomEvent) {
+    const files = [...((e.detail as File[]) ?? [])]
+    /* The picker's own reset says `change` again, with nothing - that one is let go. */
+    if (!files.length) return
+    ;(e.target as any).reset?.()
+    this.upload(files)
+  }
+
+  private upload(files: File[] = [], post?: Post) {
+    const { space, eventId } = this.preset()
+    const popup: any = 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`). */
+  private async open(post: Post) {
+    const popup: any = openPopup(
+      html`<gallery-viewer
+        .post=${post}
+        @done=${(e: CustomEvent) => popup.close(e.detail)}
+        @gallery-liked=${(e: CustomEvent) => 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)
+  }
+
+  private async openById(id: string) {
+    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) })
+    }
+  }
+
+  private replace(post: Post) {
+    this.posts = this.posts.map(one => (one.id === post.id ? post : one))
+  }
+
+  private async makeEvent() {
+    const popup: any = openPopup(
+      html`<gallery-event-form @done=${(e: CustomEvent) => 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}`)
+  }
+
+  private async renameTag() {
+    const popup: any = openPopup(
+      html`<gallery-tag-form .tag=${this.tag} @done=${(e: CustomEvent) => 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)}`)
+  }
+}

package/client/route.ts

@@ -0,0 +1,8 @@
+/* The page this module brings to an application that puts it in its menu (ADR-0165 decision 6). */
+export default function route(page: string) {
+  switch (page) {
+    case 'gallery-page':
+      import('./pages/gallery-page.js')
+      return page
+  }
+}

package/client/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "declaration": true,
+    "module": "esnext",
+    "outDir": "../dist-client",
+    "baseUrl": "./"
+  },
+  "include": ["./**/*"]
+}