@fy-/fws-vue 2.3.50 → 2.3.52

package/components/fws/UserProfile.vue

@@ -48,6 +48,9 @@ const state = reactive({
     PublicBio: userData.value?.UserProfile?.PublicBio || false,
     PublicBirthdate: userData.value?.UserProfile?.PublicBirthdate || false,
   },
+  usernameUpdate: {
+    Username: userData.value?.UserProfile?.Username || '',
+  },
 })
 watchEffect(() => {
   state.userData = {
@@ -78,6 +81,11 @@ const rules = {
     PublicBio: {},
     PublicBirthdate: {},
   },
+  usernameUpdate: {
+    Username: {
+      required,
+    },
+  },
 }
 const v$ = useVuelidate(rules, state)
 
@@ -111,6 +119,36 @@ const cropResult = reactive({
   blobURL: '',
 })
 const uploader = ref(new Uploader())
+const canUpdateUsername = computed(() => {
+  // If user and UserProfile and UserProfile.UsernameChangedAt > 30 days
+  if (userData.value?.UserProfile?.UsernameChangedAt?.unixms) {
+    const date = new Date(userData.value?.UserProfile?.UsernameChangedAt.unixms)
+    const now = new Date()
+    const diff = Math.abs(now.getTime() - date.getTime())
+    const diffDays = Math.ceil(diff / (1000 * 3600 * 24))
+    return diffDays > 30
+  }
+  return true
+})
+const lastUsernameError = ref('')
+async function updateUsername() {
+  eventBus.emit('main-loading', true)
+  if (await v$.value.usernameUpdate.$validate()) {
+    const data = { ...state.usernameUpdate }
+    const response = await rest('User/_Username', 'PATCH', data).catch((err) => {
+      eventBus.emit('main-loading', false)
+      lastUsernameError.value = err.message
+    })
+    if (response && response.result === 'success') {
+      if (props.onCompleted) {
+        props.onCompleted(response)
+      }
+      eventBus.emit('user:refresh', true)
+      eventBus.emit('updateUsernameModal', false)
+    }
+  }
+  eventBus.emit('main-loading', false)
+}
 
 async function getCropResult() {
   if (!cropper) return
@@ -161,6 +199,30 @@ function selectFile(e: Event) {
 
 <template>
   <form class="space-y-4" @submit.prevent="patchUser">
+    <DefaultModal id="updateUsername" :title="$t('fws_username_update_title')">
+      <div class="flex flex-col gap-4">
+        <DefaultInput
+          id="usernameFWS"
+          v-model="state.usernameUpdate.Username"
+          type="text"
+          :label="$t('fws_username_label')"
+          :help="$t('fws_username_help')"
+          :error-vuelidate="v$.usernameUpdate.Username.$errors"
+          :disabled="!canUpdateUsername"
+        />
+        <div v-if="lastUsernameError" class="text-xs text-red-500">
+          {{ lastUsernameError }}
+        </div>
+        <div class="flex justify-end pt-2">
+          <button type="submit" class="btn defaults primary flex items-center gap-2" @click="updateUsername">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+            </svg>
+            {{ $t("fws_save_user_cta") }}
+          </button>
+        </div>
+      </div>
+    </DefaultModal>
     <div class="bg-white dark:bg-fv-neutral-900 p-4 sm:p-6 rounded-lg shadow-sm border border-fv-neutral-200 dark:border-fv-neutral-700">
       <h3 class="text-lg font-semibold text-fv-neutral-900 dark:text-white mb-4 pb-2 border-b border-fv-neutral-200 dark:border-fv-neutral-700">
         {{ $t('fws_profile_heading') || $t('fws_your_profile') }}
@@ -221,6 +283,18 @@ function selectFile(e: Event) {
             :error-vuelidate="v$.userData.Username.$errors"
             :disabled="userData?.UserProfile?.HasUsernameAndSlug ? true : false"
           />
+          <div v-if="!canUpdateUsername" class="text-xs text-fv-neutral-500 dark:text-fv-neutral-400 mt-1">
+            {{ $t('fws_username_update_help') }}
+          </div>
+          <div v-else>
+            <button
+              type="button"
+              class="btn small primary mt-1"
+              @click="$eventBus.emit('updateUsernameModal', true)"
+            >
+              {{ $t('fws_username_update_cta') }}
+            </button>
+          </div>
         </div>
       </div>
 

package/components/ui/DefaultPaging.vue

@@ -6,7 +6,7 @@ import { getURL, hasFW } from '@fy-/fws-js'
 import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { useServerHead } from '@unhead/vue'
 import { useDebounceFn } from '@vueuse/core'
-import { computed, onMounted, shallowRef, watch } from 'vue'
+import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { useEventBus } from '../../composables/event-bus'
 import { useServerRouter } from '../../stores/serverRouter'
@@ -32,6 +32,10 @@ const history = useServerRouter()
 const isMounted = shallowRef(false)
 const pageWatcher = shallowRef<WatchStopHandle>()
 
+// Jump to page functionality
+const jumpPageValue = ref('')
+const showJumpInput = ref(false)
+
 // Memoize the hash string to avoid repeated computation
 const hashString = computed(() => props.hash !== '' ? `#${props.hash}` : undefined)
 
@@ -73,6 +77,45 @@ const prev = useDebounceFn(() => {
   })
 }, 300)
 
+// Jump to page functionality
+const jumpToPage = useDebounceFn(() => {
+  const targetPage = Number.parseInt(jumpPageValue.value)
+
+  if (Number.isNaN(targetPage) || !isNewPage(targetPage)) {
+    jumpPageValue.value = ''
+    return
+  }
+
+  const newQuery = { ...route.query }
+  newQuery.page = targetPage.toString()
+
+  history.push({
+    path: history.currentRoute.path,
+    query: newQuery,
+    hash: hashString.value,
+  })
+
+  jumpPageValue.value = ''
+  showJumpInput.value = false
+}, 300)
+
+function toggleJumpInput() {
+  showJumpInput.value = !showJumpInput.value
+  if (!showJumpInput.value) {
+    jumpPageValue.value = ''
+  }
+}
+
+function handleJumpInputKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    jumpToPage()
+  }
+  else if (event.key === 'Escape') {
+    showJumpInput.value = false
+    jumpPageValue.value = ''
+  }
+}
+
 // Extract route generation to a reusable function to reduce duplicated code
 function page(page: number): RouteLocationRaw {
   if (!isNewPage(page)) {
@@ -250,12 +293,26 @@ onMounted(() => {
               {{ items.page_no + 1 }}
             </router-link>
           </li>
-          <li v-if="items.page_no + 1 < items.page_max - 1" aria-hidden="true">
+          <li v-if="items.page_no + 1 < items.page_max - 1">
             <div
-              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 dark:text-fv-neutral-400"
+              v-if="!showJumpInput"
+              class="flex items-center justify-center w-5 md:w-6 h-7 md:h-8 text-fv-neutral-500 hover:text-primary-600 dark:text-fv-neutral-400 dark:hover:text-white cursor-pointer transition-all"
+              title="Jump to page"
+              @click="toggleJumpInput"
             >
               <span class="text-[10px] md:text-xs font-medium">•••</span>
             </div>
+            <input
+              v-else
+              v-model="jumpPageValue"
+              type="number"
+              :min="1"
+              :max="items.page_max"
+              class="w-8 md:w-10 h-7 md:h-8 text-xs text-center text-fv-neutral-700 bg-white/80 border border-fv-neutral-300 rounded-md shadow-sm focus:ring-2 focus:ring-primary-400/40 focus:border-primary-400 focus:outline-none dark:bg-fv-neutral-800 dark:text-fv-neutral-300 dark:border-fv-neutral-600 dark:focus:ring-primary-500/40 dark:focus:border-primary-500 transition-all"
+              :placeholder="items.page_max.toString().length > 2 ? '···' : '••'"
+              @keydown="handleJumpInputKeydown"
+              @blur="showJumpInput = false; jumpPageValue = ''"
+            >
           </li>
           <li v-if="items.page_no + 1 < items.page_max">
             <router-link

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.3.50",
+  "version": "2.3.52",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",