@esershnr/artalk-sidebar 1.0.3

package/src/components/FileUploader.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useUserStore } from '../stores/user'
+
+const { t } = useI18n()
+const user = useUserStore()
+
+const props = defineProps<{
+  apiUrl: string
+}>()
+
+const emit = defineEmits<{
+  /** Upload done event */
+  (evt: 'done', filename: string): void
+}>()
+
+const { apiUrl } = toRefs(props)
+
+let xhr: XMLHttpRequest | null = null
+const fileInputEl = ref<HTMLInputElement | null>(null)
+const remoteFilename = ref('')
+const isUploading = ref(false)
+const progress = ref(0)
+const isDone = ref(false)
+
+function reset() {
+  remoteFilename.value = ''
+  isUploading.value = false
+  progress.value = 0
+  isDone.value = false
+  if (fileInputEl.value) fileInputEl.value.value = ''
+}
+
+async function startUploadFile(file: File) {
+  remoteFilename.value = ''
+
+  xhr = new XMLHttpRequest()
+
+  // Progress bar
+  xhr.upload.addEventListener('progress', (evt) => {
+    if (evt.loaded === evt.total) {
+      // Upload done
+      progress.value = 100
+      return
+    }
+
+    const fileSize = file.size
+    if (evt.loaded <= fileSize) {
+      // Uploading
+      progress.value = Math.round((evt.loaded / fileSize) * 100)
+    }
+  })
+
+  // Create form data for upload
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('token', user.token)
+
+  // Start upload
+  xhr.open('post', apiUrl.value)
+  xhr.send(formData)
+
+  // Update finished event
+  xhr.onload = () => {
+    const setErr = (msg: string): void => {
+      reset()
+      isUploading.value = false
+      alert(`File upload failed: ${msg}`)
+    }
+
+    if (!xhr) {
+      setErr('xhr instance is null')
+      return
+    }
+
+    const ok = xhr.status >= 200 && xhr.status <= 299
+    if (!ok) {
+      setErr(`Response HTTP Code: ${xhr.status}, Body: ${xhr.response}`)
+      return
+    }
+
+    let json: any
+    try {
+      json = JSON.parse(xhr.response)
+    } catch (err) {
+      console.error(err)
+      setErr(`JSON parse error: ${err}`)
+      return
+    }
+
+    if (!json.filename) {
+      setErr(`Response filename is empty: ${xhr.response}`)
+      return
+    }
+
+    isDone.value = true
+    remoteFilename.value = json.filename
+    isUploading.value = false
+    emit('done', remoteFilename.value)
+  }
+}
+
+function onFileInputChange() {
+  const files = fileInputEl.value?.files
+  if (!files || files.length === 0) return
+
+  isUploading.value = true
+  setTimeout(async () => {
+    await startUploadFile(files[0])
+    isUploading.value = false
+  }, 80)
+}
+
+function abortUpload() {
+  xhr?.abort()
+  reset()
+  isUploading.value = false
+}
+</script>
+
+<template>
+  <div class="atk-file-upload-group">
+    <div v-show="!isUploading" class="atk-file-input-wrap atk-fade-in">
+      <input
+        ref="fileInputEl"
+        type="file"
+        name="AtkDataFile"
+        accept=".artrans"
+        @change="onFileInputChange()"
+      />
+      <div class="atk-desc">
+        <slot v-if="!isDone" name="tip"></slot>
+        <slot v-if="isDone" name="done-msg"></slot>
+      </div>
+    </div>
+    <div v-show="isUploading" class="atk-uploading-wrap atk-fade-in">
+      <div class="atk-progress">
+        <div class="atk-bar" :style="{ width: `${progress}%` }"></div>
+      </div>
+      <div class="atk-status">
+        {{ t('uploading') }}
+        <span class="atk-curt">{{ progress }}%</span>
+        ...
+        <span class="atk-abort" @click="abortUpload()">{{ t('cancel') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/ItemTextEditor.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initValue?: string
+  placeholder?: string
+  validator?: (value: string) => boolean
+}>()
+
+const emit = defineEmits<{
+  (evt: 'yes', value: string): boolean | void | Promise<boolean | void>
+  (evt: 'no', value: string): boolean | void | Promise<boolean | void>
+  (evt: 'close'): void
+}>()
+
+const inputEl = ref<HTMLInputElement | null>(null)
+const inputVal = ref('')
+const inputInvalid = ref(false)
+
+const { t } = useI18n()
+
+onMounted(() => {
+  inputVal.value = props.initValue || ''
+  window.setTimeout(() => inputEl.value?.focus(), 80)
+})
+
+function onInput() {
+  // Input value validator
+  if (props.validator) {
+    inputInvalid.value = props.validator(inputVal.value)
+  }
+}
+
+function onKeyUp(evt: KeyboardEvent) {
+  if (evt.key === 'Enter' || evt.keyCode === 13) {
+    // Press Enter to submit
+    evt.preventDefault()
+    submit('yes')
+  }
+}
+
+async function submit(type: 'yes' | 'no') {
+  if (type == 'yes' && inputInvalid.value) return
+
+  let isContinue: any = undefined
+
+  const callback = emit(type as any, inputVal.value)
+  if (callback instanceof (async () => {}).constructor) {
+    isContinue = await callback
+  } else {
+    isContinue = callback
+  }
+
+  if (isContinue === undefined || isContinue === true) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <div class="atk-item-text-editor-layer">
+    <div class="atk-edit-form">
+      <input
+        ref="inputEl"
+        v-model="inputVal"
+        class="atk-main-input"
+        type="text"
+        :placeholder="props.placeholder || t('inputHint')"
+        autocomplete="off"
+        :class="{ 'atk-invalid': inputInvalid }"
+        @input="onInput()"
+        @keyup="onKeyUp"
+      />
+    </div>
+    <div class="atk-actions">
+      <div
+        class="atk-item atk-yes-btn"
+        :class="{ 'atk-disabled': inputInvalid }"
+        @click="submit('yes')"
+      >
+        <i class="atk-icon atk-icon-yes"></i>
+      </div>
+      <div class="atk-item atk-no-btn" @click="submit('no')">
+        <i class="atk-icon atk-icon-no"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-item-text-editor-layer {
+  z-index: 999;
+  background: var(--at-color-bg);
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .atk-edit-form {
+    flex: auto;
+    padding-left: 20px;
+
+    input {
+      font-size: 17px;
+      width: 100%;
+      padding: 3px 5px;
+      border: 0;
+      border-bottom: 1px solid var(--at-color-border);
+      outline: none;
+      background: transparent;
+
+      &.atk-invalid {
+      }
+
+      &:focus {
+        border-bottom-color: var(--at-color-main);
+      }
+    }
+  }
+
+  .atk-actions {
+    @extend .atk-list-btn-actions;
+
+    .atk-yes-btn.atk-disabled {
+    }
+  }
+}
+</style>

package/src/components/LoadingLayer.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+const props = defineProps<{
+  transparentBg?: boolean
+  timeout?: number
+}>()
+
+const showSpinner = ref(false)
+let timer: number | undefined
+
+onMounted(() => {
+  // spinner delay to prevent flash
+  // (no need to show spinner if loading is fast)
+  timer = window.setTimeout(() => {
+    showSpinner.value = true
+    timer = undefined
+  }, props.timeout || 700)
+})
+
+onUnmounted(() => {
+  window.clearTimeout(timer)
+})
+</script>
+
+<template>
+  <div
+    class="atk-loading atk-fade-in"
+    :style="{ background: props.transparentBg ? 'transparent' : undefined }"
+  >
+    <div v-if="showSpinner" class="atk-loading-spinner">
+      <svg viewBox="25 25 50 50">
+        <circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/src/components/LogTerminal.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useNavStore } from '@/stores/nav'
+
+const props = defineProps<{
+  apiUrl: string
+  reqParams: { [k: string]: string }
+}>()
+
+const emit = defineEmits<{
+  (evt: 'back'): void
+}>()
+
+const { t } = useI18n()
+
+const logWrapEl = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  // Create iframe element
+  const frameName = `f_${+new Date()}`
+  const $frame = document.createElement('iframe')
+  $frame.className = 'atk-iframe'
+  $frame.name = frameName
+  logWrapEl.value!.append($frame)
+
+  // on iframe done
+  $frame.onload = () => {
+    useNavStore().refreshSites()
+  }
+
+  // Crate temporary form for submitting and load iframe page
+  const $formTmp = document.createElement('form')
+  $formTmp.style.display = 'none'
+  $formTmp.setAttribute('method', 'post')
+  $formTmp.setAttribute('action', props.apiUrl)
+  $formTmp.setAttribute('target', frameName)
+
+  Object.entries(props.reqParams).forEach(([key, val]) => {
+    const $inputTmp = document.createElement('input')
+    $inputTmp.setAttribute('type', 'hidden')
+    $inputTmp.setAttribute('name', key)
+    $inputTmp.value = val
+    $formTmp.appendChild($inputTmp)
+  })
+
+  logWrapEl.value!.append($formTmp)
+  $formTmp.submit()
+  $formTmp.remove()
+})
+
+function back() {
+  emit('back')
+}
+</script>
+
+<template>
+  <div class="atk-log-wrap">
+    <div class="atk-log-back-btn" @click="back()">{{ t('back') }}</div>
+    <div ref="logWrapEl" class="atk-log"></div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-log-wrap {
+  margin-bottom: -40px;
+
+  .atk-log-back-btn {
+    display: inline-block;
+    padding: 5px 33px;
+    cursor: pointer;
+    user-select: none;
+    border-right: 1px solid var(--at-color-border);
+    border-left: 1px solid transparent;
+    &:hover {
+      background: var(--at-color-bg-grey);
+    }
+  }
+
+  .atk-log {
+  }
+
+  .atk-iframe {
+    width: 100%;
+    height: calc(100vh - 150px);
+    border: 0;
+    background: var(--at-color-bg-grey);
+    border: 3px solid #eee;
+  }
+}
+</style>

package/src/components/PageEditor.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { ArtalkType } from '@esershnr/artalk'
+import { artalk } from '../global'
+
+const props = defineProps<{
+  page: ArtalkType.PageData
+}>()
+
+const emit = defineEmits<{
+  (evt: 'close'): void
+  (evt: 'update', page: ArtalkType.PageData): void
+  (evt: 'remove', id: number): void
+}>()
+
+const { page } = toRefs(props)
+const editFieldKey = ref<keyof ArtalkType.PageData | null>(null)
+const editFieldVal = computed(() =>
+  String(editFieldKey.value ? page.value[editFieldKey.value!] || '' : ''),
+)
+const isLoading = ref(false)
+const { t } = useI18n()
+
+function editTitle() {
+  editFieldKey.value = 'title'
+}
+
+function editKey() {
+  editFieldKey.value = 'key'
+}
+
+async function editAdminOnly() {
+  isLoading.value = true
+  let p: ArtalkType.PageData
+  try {
+    p = (
+      await artalk!.ctx.getApi().pages.updatePage(page.value.id, {
+        ...page.value,
+        admin_only: !page.value.admin_only,
+      })
+    ).data
+  } catch (err: any) {
+    alert(err.message)
+    console.error(err)
+    return
+  } finally {
+    isLoading.value = false
+  }
+  emit('update', p)
+}
+
+async function sync() {
+  isLoading.value = true
+  let p: ArtalkType.PageData
+  try {
+    p = (await artalk!.ctx.getApi().pages.fetchPage(page.value.id)).data
+  } catch (err: any) {
+    alert(err.message)
+    console.error(err)
+    return
+  } finally {
+    isLoading.value = false
+  }
+  emit('update', p)
+}
+
+function del() {
+  const del = async () => {
+    isLoading.value = true
+    try {
+      await artalk!.ctx.getApi().pages.deletePage(page.value.id)
+    } catch (err: any) {
+      alert(err.message)
+      console.error(err)
+      return
+    } finally {
+      isLoading.value = false
+    }
+    emit('remove', page.value.id)
+  }
+  if (window.confirm(t('pageDeleteConfirm', { title: page.value.title || page.value.key }))) del()
+}
+
+function close() {
+  emit('close')
+}
+
+async function onFieldEditorYes(val: string) {
+  if (editFieldVal.value !== val) {
+    isLoading.value = true
+    let p: ArtalkType.PageData
+    try {
+      p = (
+        await artalk!.ctx.getApi().pages.updatePage(page.value.id, {
+          ...page.value,
+          [editFieldKey.value as any]: val,
+        })
+      ).data
+    } catch (err: any) {
+      alert(err.message)
+      console.error(err)
+      return false
+    } finally {
+      isLoading.value = false
+    }
+    emit('update', p)
+  }
+
+  editFieldKey.value = null
+  close()
+  return true
+}
+
+function onFiledEditorNo() {
+  editFieldKey.value = null
+}
+</script>
+
+<template>
+  <div class="atk-page-edit-layer">
+    <div class="atk-page-main-actions">
+      <div class="atk-item atk-title-edit-btn" @click="editTitle()">
+        {{ t('editTitle') }}
+      </div>
+      <div class="atk-item atk-key-edit-btn" @click="editKey()">
+        {{ t('switchKey') }}
+      </div>
+      <div
+        class="atk-item atk-admin-only-btn"
+        :class="!page.admin_only ? 'atk-green' : 'atk-yellow'"
+        @click="editAdminOnly()"
+      >
+        {{ !page.admin_only ? t('commentAllowAll') : t('commentOnlyAdmin') }}
+      </div>
+    </div>
+    <div class="atk-page-actions">
+      <div class="atk-item atk-sync-btn" @click="sync()">
+        <i class="atk-icon atk-icon-sync"></i>
+      </div>
+      <div class="atk-item atk-del-btn" @click="del()">
+        <i class="atk-icon atk-icon-del"></i>
+      </div>
+      <div class="atk-item atk-close-btn" @click="close()">
+        <i class="atk-icon atk-icon-close"></i>
+      </div>
+    </div>
+    <LoadingLayer v-if="isLoading" style="z-index: 1000" />
+    <ItemTextEditor
+      v-if="!!editFieldKey"
+      :init-value="editFieldVal"
+      @yes="onFieldEditorYes"
+      @no="onFiledEditorNo"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.atk-page-edit-layer {
+  z-index: 9;
+  background: var(--at-color-bg);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.atk-page-main-actions {
+  @extend .atk-list-text-actions;
+}
+</style>