@fy-/fws-vue 0.3.66 → 0.3.68

package/components/fws/UserData.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import useVuelidate from "@vuelidate/core";
+import DefaultInput from "../ui/DefaultInput.vue";
+import { useUserStore } from "../../stores/user";
+import { useRest } from "../../composables/rest";
+import { computed, reactive, watchEffect } from "vue";
+import { required } from "@vuelidate/validators";
+const rest = useRest();
+const userStore = useUserStore();
+const userData = computed(() => userStore.user);
+const state = reactive({
+  userData: {
+    Firstname: userData.value?.Firstname || "",
+    Lastname: userData.value?.Lastname || "",
+    Phone: userData.value?.Phone || "",
+    Bio: userData.value?.Bio || "",
+    Username: userData.value?.Username || "",
+  },
+});
+watchEffect(() => {
+  state.userData = {
+    Firstname: userData.value?.Firstname || "",
+    Lastname: userData.value?.Lastname || "",
+    Phone: userData.value?.Phone || "",
+    Bio: userData.value?.Bio || "",
+    Username: userData.value?.Username || "",
+  };
+});
+const rules = {
+  userData: {
+    Username: {
+      required: required,
+    },
+    Firstname: {},
+    Lastname: {},
+    Phone: {},
+    Bio: {},
+  },
+};
+const v$ = useVuelidate(rules, state);
+
+const patchUser = async () => {
+  if (await v$.value.userData.$validate()) {
+    const response = await rest("User", "PATCH", state.userData);
+    if (response && response.result == "success") {
+      window.location.reload();
+    }
+  }
+};
+</script>
+
+<template>
+  <form @submit.prevent="patchUser">
+    <DefaultInput
+      id="usernameFWS"
+      v-model="state.userData.Username"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_username_label')"
+      :help="$t('fws_username_help')"
+      :error-vuelidate="v$.userData.Username.$errors"
+      :req="true"
+    />
+    <DefaultInput
+      id="firstnameFWS"
+      v-model="state.userData.Firstname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_firstname_label')"
+      :help="$t('fws_firstname_help')"
+      :error-vuelidate="v$.userData.Firstname.$errors"
+    />
+    <DefaultInput
+      id="lastnameFWS"
+      v-model="state.userData.Lastname"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_lastname_label')"
+      :help="$t('fws_lastname_help')"
+      :error-vuelidate="v$.userData.Lastname.$errors"
+    />
+    <DefaultInput
+      id="phoneFWS"
+      v-model="state.userData.Phone"
+      class="mb-4"
+      type="text"
+      :label="$t('fws_phone_label')"
+      :help="$t('fws_phone_help')"
+      :error-vuelidate="v$.userData.Phone.$errors"
+    />
+    <div class="flex">
+      <button type="submit" class="btn defaults primary">
+        {{ $t("fws_save_user_cta") }}
+      </button>
+    </div>
+  </form>
+</template>

package/components/ui/DefaultPaging.vue

@@ -20,8 +20,10 @@ const props = withDefaults(
     items: APIPaging;
     id: string;
     hash?: string;
+    showLegend?: boolean;
   }>(),
   {
+    showLegend: true,
     hash: "",
   },
 );
@@ -152,7 +154,7 @@ useFyHead({
           <li v-if="items.page_no - 2 > 2">
             <div
               v-if="items.page_no - 2 > 2"
-              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
             >
               ...
             </div>
@@ -190,7 +192,7 @@ useFyHead({
           </template>
           <li v-if="items.page_no + 2 < items.page_max - 1">
             <div
-              class="flex items-center justify-center px-3 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
+              class="flex items-center justify-center px-1.5 h-8 leading-tight text-fv-neutral-500 bg-white border border-fv-neutral-300 hover:bg-fv-neutral-100 hover:text-fv-neutral-700 dark:bg-fv-neutral-800 dark:border-fv-neutral-700 dark:text-fv-neutral-400 dark:hover:bg-fv-neutral-700 dark:hover:text-white"
             >
               ...
             </div>
@@ -216,7 +218,10 @@ useFyHead({
           </li>
         </ul>
       </nav>
-      <p class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5">
+      <p
+        class="text-xs text-fv-neutral-700 dark:text-fv-neutral-400 pt-0.5"
+        v-if="showLegend"
+      >
         {{
           $t("global_paging", {
             start: items.results_per_page * (items.page_no - 1),

package/env.d.ts

@@ -4,5 +4,3 @@ declare module "*.vue" {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
-
-declare module "./presets/Wind";

package/index.ts

@@ -50,6 +50,7 @@ import FilterData from "./components/fws/FilterData.vue";
 import CmsArticleBoxed from "./components/fws/CmsArticleBoxed.vue";
 import CmsArticleSingle from "./components/fws/CmsArticleSingle.vue";
 import UserOAuth2 from "./components/fws/UserOAuth2.vue";
+import UserData from "./components/fws/UserData.vue";
 // Css
 import "./style.css";
 
@@ -139,4 +140,5 @@ export {
   FilterData,
   CmsArticleBoxed,
   CmsArticleSingle,
+  UserData,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "0.3.66",
+  "version": "0.3.68",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "repository": {

package/stores/user.ts

@@ -23,7 +23,6 @@ export const useUserStore = defineStore({
   actions: {
     async refreshUser() {
       const user: APIResult = await rest("User:get", "GET").catch((err) => {
-        console.log(err);
         this.setUser(null);
       });
       if (user.result === "success") {