Prvni naznak verejne casti, sprava profilu

2023-08-09 00:26:59 +02:00
parent c4603cf090
commit 25250ae00e
31 changed files with 6505 additions and 786 deletions
@@ -0,0 +1,40 @@
+<script setup>
+
+import {reactive, ref} from "vue";
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+
+const formData = reactive({
+  oldPassword: null,
+  newPassword: null,
+});
+const visiblePassword = ref(false);
+
+</script>
+
+<template>
+  <FormWrapper v-model="formData">
+    <q-input
+      v-model="formData.oldPassword"
+      type="password"
+      label="Staré heslo"
+      v-bind="commonProps"
+    />
+
+    <q-input
+      v-model="formData.newPassword"
+      :type="visiblePassword ? 'text' : 'password'"
+      label="Nové heslo"
+      v-bind="commonProps"
+    >
+      <template #append>
+        <q-btn
+          flat
+          round
+          :icon="visiblePassword ? 'visibility' : 'visibility_off'"
+          @click="visiblePassword = !visiblePassword"
+        />
+      </template>
+    </q-input>
+  </FormWrapper>
+</template>
@@ -0,0 +1,74 @@
+<script setup>
+import FormWrapper from "components/FormWrapper.vue";
+import {commonProps} from "src/composables/inputs";
+import {reactive, watch} from "vue";
+import {setDefaultData} from "src/composables/form/formHandling";
+import RichTextEditor from "components/inputs/RichTextEditor.vue";
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: false,
+    default: null
+  }
+});
+const formData = reactive({
+  name: null,
+  publicUsername: null,
+  description: null,
+  avatarImage: null,
+  titleImage: null,
+});
+
+watch(() => props.user, (newVal) => {
+  setDefaultData(formData, props.user)
+}, {immediate: true});
+</script>
+
+
+<template>
+  <FormWrapper v-model="formData">
+
+    <div class="text-center">
+      <q-avatar size="200px">
+        <img :src="user.avatarImageUrl" alt="Profilový obrázek"/>
+      </q-avatar>
+    </div>
+
+    <q-file
+      v-model="formData.avatarImage"
+      accept="image/jpeg"
+      v-bind="commonProps"
+      label="Nahrát avatar"
+    >
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
+
+    <div class="text-center">
+      <q-img :src="user.titleImageUrl" width="50%"/>
+    </div>
+
+    <q-file
+      v-model="formData.titleImage"
+      accept="image/jpeg"
+      v-bind="commonProps" label="Nahrát titulní fotku"
+    >
+      <template #prepend>
+        <q-icon name="upload"/>
+      </template>
+    </q-file>
+
+    <q-input v-model="formData.name" label="Jméno" v-bind="commonProps"/>
+    <q-input
+      v-model="formData.publicUsername"
+      label="Veřejné uživatelské jméno"
+      hint="Vyplň jméno pro zpřístupnění záznamů ve veřejné části aplikace"
+      v-bind="commonProps"
+    />
+
+    <RichTextEditor v-model="formData.description" label="Veřejný podpis" />
+  </FormWrapper>
+
+</template>
@@ -0,0 +1,32 @@
+<script setup>
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+import {useUserStore} from "stores/User";
+
+const props = defineProps({
+  user: {
+    type: Object,
+    required: false,
+    default: null
+  }
+})
+
+const username = useRoute().params.username;
+
+onMounted(() => {
+  useUserStore().fetchByUsername(username);
+});
+</script>
+
+<template>
+  <q-list>
+    <q-item v-if="user.publicUsername">
+      <router-link target="_blank" :to="{name: 'publicProfileDetail', params: {username: user.publicUsername}}">
+        @{{user.publicUsername}}
+      </router-link>
+    </q-item>
+    <q-item v-else>
+      <q-icon name="" color="red" /> Nastav si veřejné uživatelské jméno pro zpřístupnění profilu a sdílení záznamů s ostatními
+    </q-item>
+  </q-list>
+</template>