@oslokommune/punkt-elements 16.13.2 → 16.15.0

package/src/components/fileupload/fileupload-operations.ts

@@ -0,0 +1,213 @@
+import { html } from 'lit'
+
+import type { TFileComment, TQueueItemOperation, TQueueOperationContext } from './fileupload-types'
+
+const COMMENTS_ATTRIBUTE = 'comments'
+
+const formatTimestamp = (iso: string): string => {
+  const date = new Date(iso)
+  if (Number.isNaN(date.getTime())) return iso
+  const day = String(date.getDate()).padStart(2, '0')
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const year = date.getFullYear()
+  const hours = String(date.getHours()).padStart(2, '0')
+  const minutes = String(date.getMinutes()).padStart(2, '0')
+  return `${day}.${month}.${year} kl. ${hours}:${minutes}`
+}
+
+const handleRenameKeydown = (event: KeyboardEvent, save: () => void, cancel: () => void) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    event.stopPropagation()
+    save()
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopPropagation()
+    cancel()
+  }
+}
+
+const handleCommentTextareaKeydown = (event: KeyboardEvent, save: () => void, cancel: () => void) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    event.stopPropagation()
+    cancel()
+  }
+  if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+    event.preventDefault()
+    event.stopPropagation()
+    save()
+  }
+}
+
+export const createRemoveOperation = (removeFile: (fileId: string) => void): TQueueItemOperation => ({
+  id: 'remove',
+  title: 'Slett',
+  ariaLabel: 'Slett fil',
+  onClick: ({ file }) => removeFile(file.fileId),
+})
+
+export const createRenameOperation = (): TQueueItemOperation => ({
+  id: 'rename',
+  title: 'Rediger',
+  ariaLabel: 'Rediger filnavn',
+  renderInlineUI: (context: TQueueOperationContext) => {
+    const currentName =
+      context.getAttribute<string>('targetFilename') ||
+      context.file.attributes?.targetFilename ||
+      context.file.file?.name ||
+      ''
+
+    const inputId = `pkt-fileupload-rename-${context.file.fileId}`
+    const save = () => {
+      const input = document.getElementById(inputId) as HTMLInputElement | null
+      const nextName = input?.value?.trim()
+      if (nextName) {
+        context.setAttribute('targetFilename', nextName)
+      }
+      context.close()
+    }
+
+    return html`
+      <label for=${inputId} class="pkt-sr-only">Endre filnavn</label>
+      <input
+        id=${inputId}
+        type="text"
+        class="pkt-fileupload__queue-display__item__rename-input"
+        ?disabled=${context.disabled}
+        .value=${currentName}
+        @keydown=${(event: KeyboardEvent) => handleRenameKeydown(event, save, context.close)}
+      />
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--secondary pkt-btn--small"
+        ?disabled=${context.disabled}
+        @click=${save}
+      >
+        Lagre
+      </button>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small"
+        ?disabled=${context.disabled}
+        @click=${context.close}
+      >
+        Avbryt
+      </button>
+    `
+  },
+  renderHidden: (context: TQueueOperationContext) => {
+    const targetFilename =
+      context.getAttribute<string>('targetFilename') ||
+      context.file.attributes?.targetFilename ||
+      context.file.file?.name ||
+      ''
+    return html`<input
+      type="hidden"
+      name=${`${context.inputName}-targetFilename`}
+      value=${targetFilename}
+    />`
+  },
+})
+
+export const createCommentOperation = (): TQueueItemOperation => ({
+  id: 'comment',
+  title: (file) => {
+    const comments = (file.attributes?.[COMMENTS_ATTRIBUTE] as TFileComment[] | undefined) ?? []
+    return comments.length > 0 ? '' : 'Legg til kommentar'
+  },
+  ariaLabel: 'Legg til kommentar',
+  renderExtendedUI: (context: TQueueOperationContext) => {
+    const comments = context.getAttribute<TFileComment[]>(COMMENTS_ATTRIBUTE) ?? []
+    const existingComment = comments[0]
+    const textareaId = `pkt-fileupload-comment-${context.file.fileId}`
+    const save = () => {
+      const textarea = document.getElementById(textareaId) as HTMLTextAreaElement | null
+      const text = textarea?.value?.trim()
+      if (text) {
+        context.setAttribute(COMMENTS_ATTRIBUTE, [{ text, timestamp: new Date().toISOString() } satisfies TFileComment])
+      }
+      context.close()
+    }
+
+    return html`
+      <label for=${textareaId} class="pkt-fileupload__queue-display__item__comment-label">
+        ${existingComment ? 'Rediger kommentar' : 'Legg til kommentar'}
+      </label>
+      <textarea
+        id=${textareaId}
+        class="pkt-fileupload__queue-display__item__comment-input"
+        ?disabled=${context.disabled}
+        .value=${existingComment?.text ?? ''}
+        rows="2"
+        placeholder="Skriv inn kommentar"
+        @keydown=${(event: KeyboardEvent) => handleCommentTextareaKeydown(event, save, context.close)}
+      ></textarea>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--secondary pkt-btn--small"
+        ?disabled=${context.disabled}
+        @click=${save}
+      >
+        ${existingComment ? 'Lagre kommentar' : 'Legg til kommentar'}
+      </button>
+      <button
+        type="button"
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small"
+        ?disabled=${context.disabled}
+        @click=${context.close}
+      >
+        Avbryt
+      </button>
+    `
+  },
+  renderContent: (context: TQueueOperationContext) => {
+    if (context.isActive) return null
+    const comments = context.getAttribute<TFileComment[]>(COMMENTS_ATTRIBUTE) ?? []
+    if (comments.length === 0) return null
+    const comment = comments[0]
+    return html`
+      <div class="pkt-fileupload__queue-display__item__comments">
+        <div class="pkt-fileupload__queue-display__item__comment">
+          <div class="pkt-fileupload__queue-display__item__comment__content">
+            <span class="pkt-fileupload__queue-display__item__comment__text" aria-label="Kommentar tekst">
+              ${comment.text}
+            </span>
+            <time class="pkt-fileupload__queue-display__item__comment__time">
+              ${formatTimestamp(comment.timestamp)}
+            </time>
+          </div>
+          <div class="pkt-fileupload__queue-display__item__comment__actions">
+            <button
+              type="button"
+              class="pkt-fileupload__queue-display__item__comment__action"
+              aria-label="Rediger kommentar"
+              ?disabled=${context.disabled}
+              @click=${context.activate}
+            >
+              <pkt-icon name="edit"></pkt-icon>
+            </button>
+            <button
+              type="button"
+              class="pkt-fileupload__queue-display__item__comment__action"
+              aria-label="Slett kommentar"
+              ?disabled=${context.disabled}
+              @click=${() => context.setAttribute(COMMENTS_ATTRIBUTE, undefined)}
+            >
+              <pkt-icon name="trash-can"></pkt-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+    `
+  },
+  renderHidden: (context: TQueueOperationContext) => {
+    const comments = context.getAttribute<TFileComment[]>(COMMENTS_ATTRIBUTE)
+    return html`<input
+      type="hidden"
+      name=${`${context.inputName}-comments`}
+      value=${comments ? JSON.stringify(comments) : ''}
+    />`
+  },
+})