- MyProfile

- Immagine profilo e small

src/views/login/signup/signup.ts

@@ -17,7 +17,7 @@ export default defineComponent({
     const invited = computed(() => $route.params.invited)
 
     // @ts-ignore
-    watch(invited, (newval, oldval) => {
+    watch(() => invited, (newval, oldval) => {
       console.log('$route.params.invited')
       adult.value = !!$route.params.invited
     })

src/views/projects/proj-list/proj-list.vue.off

@@ -3,7 +3,7 @@
     <div class="panel">
 
       <q-dialog v-model="shownewsubproj">
-        <q-card :style="`min-width: `+ tools.myheight_dialog() + `px;`">
+        <q-card class="dialog_card">
           <q-toolbar class="bg-primary text-white">
             <q-toolbar-title>
               Nuovo

src/views/user/editprofile/editprofile.ts

@@ -14,7 +14,7 @@ import { costanti } from '@costanti'
 
 
 export default defineComponent({
-  name: 'ProfileMy',
+  name: 'EditProfile',
   components: { CProfile, CTitleBanner, CMyFieldDb, CSkill },
   props: {},
   setup() {

src/views/user/editprofile/editprofile.vue

@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <div class="q-gutter-sm q-pa-xs q-pb-md">
 
     <CTitleBanner
@@ -20,21 +20,20 @@
             :type="costanti.FieldType.string">
           </CMyFieldDb>
         </div>
-        <div class="myrow">
-          <CMyFieldDb
-            :title="$t('reg.photo')"
-            table="users"
-            mykey="profile"
-            mysubkey="img"
-            :type="costanti.FieldType.image">
-          </CMyFieldDb>
-        </div>
         <div class="myrow">
           <CMyFieldDb
             :title="$t('reg.username')"
             table="users"
             mykey="username"
             :disable="true"
+            :readonly="true"
+            :type="costanti.FieldType.string">
+          </CMyFieldDb>
+          <CMyFieldDb
+            :title="$t('reg.username_telegram')"
+            table="users"
+            mykey="profile"
+            mysubkey="username_telegram"
             :type="costanti.FieldType.string">
           </CMyFieldDb>
           <CMyFieldDb
@@ -46,53 +45,13 @@
           </CMyFieldDb>
         </div>
 
-        <div class="myrow">
-          <CMyFieldDb
-            :title="$t('reg.nationality')"
-            table="users"
-            tablesel="countries"
-            mykey="profile"
-            :useinput="false"
-            mysubkey="nationality"
-            :pickup="true"
-            :type="costanti.FieldType.nationality">
-          </CMyFieldDb>
-
-          <CMyFieldDb
-            :title="$t('reg.dateofbirth')"
-            table="users"
-            mykey="profile"
-            mysubkey="dateofbirth"
-            :type="costanti.FieldType.date">
-          </CMyFieldDb>
-        </div>
-
-        <div class="myrow">
-
-          <CMyFieldDb
-            :title="$t('reg.intcode_cell')"
-            table="users"
-            mykey="profile"
-            mysubkey="intcode_cell"
-            :type="costanti.FieldType.intcode"
-            tablesel="phones"
-            :pickup="true">
-          </CMyFieldDb>
-          <CMyFieldDb
-            :title="$t('reg.cell')"
-            table="users"
-            mykey="profile"
-            mysubkey="cell"
-            :type="costanti.FieldType.string">
-          </CMyFieldDb>
-        </div>
-
         <br/>
         <div class="myrow justify-center">
           <q-btn
             push
             rounded
-            color="primary"
+            color="white"
+            text-color="blue"
             size="md"
             to="/requestresetpwd"
             :label="$t('reg.modificapassword')">
@@ -102,6 +61,85 @@
 
     </CTitleBanner>
 
+    <CTitleBanner
+      class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <div class="myrow">
+        <CMyFieldDb
+          :title="$t('reg.photo')"
+          table="users"
+          mykey="profile"
+          mysubkey="img"
+          :type="costanti.FieldType.image">
+        </CMyFieldDb>
+      </div>
+
+      <CMyFieldDb
+        title="Biografia"
+        table="users"
+        mykey="profile"
+        mysubkey="biografia"
+        maxlength="200"
+        :showall="true"
+        :type="costanti.FieldType.string">
+      </CMyFieldDb>
+
+      <div class="myrow">
+        <CMyFieldDb
+          :title="$t('reg.nationality')"
+          table="users"
+          tablesel="countries"
+          mykey="profile"
+          :useinput="false"
+          mysubkey="nationality"
+          :pickup="true"
+          :type="costanti.FieldType.nationality">
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          :title="$t('reg.residency_city')"
+          table="users"
+          tablesel="cities"
+          mykey="profile"
+          :useinput="false"
+          mysubkey="born_city"
+          :pickup="true"
+          :type="costanti.FieldType.string">
+        </CMyFieldDb>
+
+        <CMyFieldDb
+          :title="$t('reg.dateofbirth')"
+          table="users"
+          mykey="profile"
+          mysubkey="dateofbirth"
+          :type="costanti.FieldType.date">
+        </CMyFieldDb>
+      </div>
+
+      <div class="myrow">
+
+        <CMyFieldDb
+          :title="$t('reg.intcode_cell')"
+          table="users"
+          mykey="profile"
+          mysubkey="intcode_cell"
+          :type="costanti.FieldType.intcode"
+          tablesel="phones"
+          :pickup="true">
+        </CMyFieldDb>
+        <CMyFieldDb
+          :title="$t('reg.cell')"
+          table="users"
+          mykey="profile"
+          mysubkey="cell"
+          :type="costanti.FieldType.string">
+        </CMyFieldDb>
+      </div>
+
+
+    </CTitleBanner>
+
     <CTitleBanner
       class="q-pa-xs" title="Competenze e Talenti" bgcolor="bg-primary" clcolor="text-white"
       myclass="myshad" :canopen="true">
@@ -113,21 +151,6 @@
 
 
     </CTitleBanner>
-    <CTitleBanner
-      class="q-pa-xs" title="Informazioni su di te" bgcolor="bg-primary" clcolor="text-white"
-      myclass="myshad" :canopen="true">
-
-      <div class="column">
-        <div class="myrow">
-          <CMyFieldDb
-            title="Biografia"
-            table="users"
-            mykey="profile"
-            mysubkey="biografia"
-            :type="costanti.FieldType.string">
-          </CMyFieldDb>
-        </div>
-      </div>
 
       <!--
       <div class="column">
@@ -188,8 +211,6 @@
       </div>
       -->
 
-    </CTitleBanner>
-
     <!--
     <CTitleBanner class="q-pa-xs" :title="$t('pages.payment')" bgcolor="bg-primary" clcolor="text-white"
                    myclass="myshad" :canopen="true">
@@ -272,11 +293,11 @@
   </div>
 </template>
 
-<script lang="ts" src="./profile.ts">
+<script lang="ts" src="./editprofile.ts">
 </script>
 
 <style lang="scss" scoped>
-@import './profile.scss';
+@import './editprofile.scss';
 </style>
 
 

src/views/user/myprofile/myprofile.scss

@@ -0,0 +1,18 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}
+
+.imgprofile{
+  border: 4px solid rgb(29, 118, 13);
+  border-radius: 16px;
+  box-shadow: 0 0 45px rgba(246, 246, 246, 0.2);
+}

src/views/user/myprofile/myprofile.ts

@@ -0,0 +1,88 @@
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CSkill } from '@/components/CSkill'
+import { CDateTime } from '@/components/CDateTime'
+import { tools } from '@store/Modules/tools'
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { useRoute, useRouter } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { IUserFields } from 'model'
+
+
+export default defineComponent({
+  name: 'myuser',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const $route = useRoute()
+    const { t } = useI18n()
+
+    const username = computed(() => $route.params.username.toString())
+
+    const filtroutente = ref(<any[]>[])
+    const showPic = ref(false)
+
+    const myuser = ref(<IUserFields>{})
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function loadProfile() {
+      // Carica il profilo di quest'utente
+      if (username.value) {
+        userStore.loadUserProfile(username.value).then((ris) => {
+          myuser.value = ris
+          filtroutente.value = [{ userId: myuser.value._id }]
+        })
+
+      }
+    }
+
+    watch(() => username, (to: any, from: any) => {
+      loadProfile()
+    })
+
+    function mounted() {
+      loadProfile()
+    }
+
+    function getImgUser() {
+      return userStore.getImgByProfile(myuser.value)
+    }
+
+    function checkifShow(col: string) {
+      //++Todo: checkifShow Permessi !
+      return true
+    }
+
+    function getLinkUserTelegram() {
+
+      if (!!myuser.value.profile.username_telegram) {
+        return 'https://t.me/' + myuser.value.profile.username_telegram
+      }
+    }
+
+    onMounted(mounted)
+
+    return {
+      username,
+      profile,
+      tools,
+      costanti,
+      myuser,
+      getImgUser,
+      checkifShow,
+      getLinkUserTelegram,
+      filtroutente,
+      showPic,
+    }
+  }
+})

src/views/user/myprofile/myprofile.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="q-gutter-sm q-pa-sm q-pb-md">
+
+    <div v-if="myuser.profile" class="fit column no-wrap justify-evenly items-center content-start">
+
+      <div class="">
+        <q-avatar size="140px">
+          <img :src="getImgUser()" :alt="username" class="imgprofile" @click="showPic = true">
+        </q-avatar>
+      </div>
+
+      <div class="text-h6">
+        <span v-if="checkifShow('name')"> {{ myuser.name }}</span> <span v-if="checkifShow('surname')">{{
+          myuser.surname
+        }}</span>
+      </div>
+      <div class="col-12 text-h8 text-grey">
+        {{ myuser.username }}
+      </div>
+      <div class="col-12 text-h7">
+        {{ myuser.profile.born_city }} ({{ myuser.profile.nationality }})
+      </div>
+
+      <div class="col-12 text-h8 q-mt-sm">
+        {{ myuser.profile.biografia }}
+      </div>
+
+      <div class="col-12 row justify-evenly q-mt-md">
+        <q-btn
+          v-if="getLinkUserTelegram()" icon="fab fa-telegram"
+          color="blue" type="a"
+          size="md"
+          rounded
+          :label="$t('msgs.message')"
+          :href="getLinkUserTelegram()" target="__blank">
+        </q-btn>
+        <q-btn
+          v-if="false"
+          icon="fab fa-telegram"
+          color="white"
+          text-color="black"
+          size="md"
+          rounded>
+        </q-btn>
+
+      </div>
+    </div>
+
+    <CTitleBanner
+      class="" :title="$t('dashboard.info')" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <div v-if="myuser.profile" class="fit column no-wrap justify-evenly content-start">
+
+        <div class="col-6 text-h6">
+          <CDateTime
+            v-if="checkifShow('profile.dateofbirth')"
+            v-model:value="myuser.profile.dateofbirth"
+            :label="$t('reg.dateofbirth')"
+            :canEdit="false">
+          </CDateTime>
+
+          <div v-if="myuser.profile.born_city"
+               class="col-6 text-h7">
+            {{ myuser.profile.born_city }}
+          </div>
+        </div>
+
+      </div>
+
+    </CTitleBanner>
+
+    <CTitleBanner
+      class="" title="Competenze e Talenti" bgcolor="bg-primary" clcolor="text-white"
+      myclass="myshad" :canopen="true">
+
+      <CSkill
+        :filtercustom="filtroutente"
+        :butt_modif_new="false"
+      >
+
+      </CSkill>
+
+
+    </CTitleBanner>
+
+  </div>
+  <q-dialog
+    v-model="showPic"
+    full-height full-width
+    >
+
+    <img :src="getImgUser()" :alt="username" class="full-width">
+
+  </q-dialog>
+
+</template>
+
+<script lang="ts" src="./myprofile.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './myprofile.scss';
+</style>
+

src/views/user/test/test.vue

@@ -1,4 +1,4 @@
-<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+<template>
   <div class="q-gutter-sm q-pa-xs q-pb-md">