- Gruppi
This commit is contained in:
paoloar77
18
src/views/user/mygroup/mygroup.scss
Executable file
18
src/views/user/mygroup/mygroup.scss
Executable file
@@ -0,0 +1,18 @@
|
||||
.profile {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.myrow{
|
||||
display: flex;
|
||||
@media (max-width: 600px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
}
|
||||
|
||||
.qualifica{
|
||||
border: solid 2px #4198ef;
|
||||
border-radius: 1rem;
|
||||
padding: 5px;
|
||||
}
|
||||
113
src/views/user/mygroup/mygroup.ts
Executable file
113
src/views/user/mygroup/mygroup.ts
Executable file
@@ -0,0 +1,113 @@
|
||||
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 { IMyGroup, IUserFields } from 'model'
|
||||
import { shared_consts } from '@/common/shared_vuejs'
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
name: 'mygroup',
|
||||
components: { CProfile, CTitleBanner, CMyFieldDb, CSkill, CDateTime },
|
||||
props: {},
|
||||
setup() {
|
||||
const userStore = useUserStore()
|
||||
const $route = useRoute()
|
||||
const $q = useQuasar()
|
||||
const { t } = useI18n()
|
||||
|
||||
const animation = ref('fade')
|
||||
|
||||
const groupname = computed(() => $route.params.groupname ? $route.params.groupname.toString() : '')
|
||||
|
||||
const filtroutente = ref(<any[]>[])
|
||||
const showPic = ref(false)
|
||||
|
||||
const mygrp = ref(<IMyGroup>{})
|
||||
|
||||
function profile() {
|
||||
return userStore.my.profile
|
||||
}
|
||||
|
||||
function mygrpname() {
|
||||
return userStore.my.username
|
||||
}
|
||||
|
||||
function loadGroup() {
|
||||
// Carica il profilo di quest'utente
|
||||
if (groupname.value) {
|
||||
userStore.loadGroup(groupname.value).then((ris) => {
|
||||
mygrp.value = ris
|
||||
// filtroutente.value = [{ userId: userStore.my._id }]
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => groupname.value, (to: any, from: any) => {
|
||||
loadGroup()
|
||||
})
|
||||
|
||||
function mounted() {
|
||||
loadGroup()
|
||||
}
|
||||
|
||||
function getImgGrp() {
|
||||
return userStore.getImgByGroup(mygrp.value)
|
||||
}
|
||||
|
||||
function checkifShow(col: string) {
|
||||
//++Todo: checkifShow Permessi !
|
||||
return true
|
||||
}
|
||||
|
||||
function getLinkGrpTelegram() {
|
||||
|
||||
if (!!mygrp.value.link_telegram) {
|
||||
return 'https://t.me/' + mygrp.value.link_telegram
|
||||
}
|
||||
}
|
||||
|
||||
function getLinkWebSite() {
|
||||
|
||||
let site = mygrp.value.website!
|
||||
if (site) {
|
||||
if (!site.startsWith('http')) {
|
||||
site = 'https://' + site
|
||||
}
|
||||
}
|
||||
return site
|
||||
}
|
||||
|
||||
onMounted(mounted)
|
||||
|
||||
return {
|
||||
groupname,
|
||||
profile,
|
||||
tools,
|
||||
costanti,
|
||||
mygrp,
|
||||
shared_consts,
|
||||
getImgGrp,
|
||||
checkifShow,
|
||||
getLinkGrpTelegram,
|
||||
getLinkWebSite,
|
||||
filtroutente,
|
||||
showPic,
|
||||
mygrpname,
|
||||
userStore,
|
||||
t,
|
||||
animation,
|
||||
}
|
||||
}
|
||||
})
|
||||
114
src/views/user/mygroup/mygroup.vue
Executable file
114
src/views/user/mygroup/mygroup.vue
Executable file
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="q-gutter-sm q-pa-sm q-pb-md">
|
||||
<div v-if="mygrp.descr" class="fit column no-wrap justify-evenly items-center content-start">
|
||||
|
||||
<div class="">
|
||||
<q-avatar size="140px">
|
||||
<q-img :src="getImgGrp()" :alt="username" img-class="imgprofile" height="140px" @click="showPic = true"/>
|
||||
</q-avatar>
|
||||
</div>
|
||||
|
||||
<div class="text-h6">
|
||||
<span v-if="checkifShow('name')"> {{ mygrp.title }}</span>
|
||||
</div>
|
||||
<div class="col-12 text-h7 text-blue text-shadow-2">
|
||||
{{ mygrp.groupname }}
|
||||
</div>
|
||||
<div class="col-12 text-h7">
|
||||
<span v-if="checkifShow('descr')">{{ mygrp.descr }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="mygrp.admins && !mygrp.admins.includes(userStore.my.username)">
|
||||
<q-btn
|
||||
v-if="!userStore.IsMyGroupByGroupname(mygrp.groupname) && !userStore.IsAskedGroupByGroupname(mygrp.groupname)"
|
||||
icon="fas fa-user-plus"
|
||||
color="primary" :label="$t('groups.ask_group')"
|
||||
@click="tools.setRequestGroup($q, userStore.my.username, mygrp.groupname, true)"
|
||||
/>
|
||||
|
||||
<q-btn
|
||||
v-if="userStore.IsAskedGroupByGroupname(mygrp.groupname) && !userStore.IsMyGroupByGroupname(mygrp.groupname)"
|
||||
icon="fas fa-user-minus"
|
||||
flat :label="$t('groups.cancel_ask_group_short')"
|
||||
@click="tools.cancelReqGroups($q, userStore.my.username, mygrp.groupname)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="mygrp.title">
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
v-if="mygrp.admins.includes(userStore.my.username)" icon="fas fa-pencil-alt"
|
||||
color="blue"
|
||||
size="md"
|
||||
:label="$t('otherpages.modifgrp')"
|
||||
to="/editgrp">
|
||||
</q-btn>
|
||||
|
||||
<div v-if="mygrp.title" class="myrow justify-evenly items-center q-pa-sm q-ma-sm">
|
||||
|
||||
<div class="col-6 q-ma-xs">
|
||||
<q-btn
|
||||
v-if="getLinkGrpTelegram()" icon="fab fa-telegram"
|
||||
color="blue" type="a"
|
||||
size="md"
|
||||
rounded
|
||||
:label="$t('msgs.telegrammsg')"
|
||||
:href="getLinkGrpTelegram()" target="__blank">
|
||||
</q-btn>
|
||||
|
||||
</div>
|
||||
<div class="col-6 q-ma-xs">
|
||||
<q-btn
|
||||
v-if="getLinkWebSite()" icon="fas fa-globe"
|
||||
color="blue" type="a"
|
||||
size="md"
|
||||
rounded
|
||||
:label="$t('reg.website')"
|
||||
:href="getLinkWebSite()" target="__blank">
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="fit column no-wrap justify-evenly items-center content-start">
|
||||
<q-skeleton type="QAvatar" size="140px" height="140px" animation="fade"/>
|
||||
<q-card flat bordered style="width: 250px">
|
||||
<div class="text-h6">
|
||||
<q-skeleton :animation="animation"/>
|
||||
</div>
|
||||
<div class="col-12 text-h7 text-grey text-center">
|
||||
{{ groupname }}
|
||||
</div>
|
||||
<div class="col-12 text-h7">
|
||||
<q-skeleton :animation="animation"/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-h8 q-mt-sm">
|
||||
<q-skeleton :animation="animation"/>
|
||||
</div>
|
||||
<div class="col-12 text-h8 q-mt-sm">
|
||||
<q-skeleton :animation="animation"/>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<q-dialog
|
||||
v-model="showPic"
|
||||
full-height full-width
|
||||
>
|
||||
|
||||
<img :src="getImgGrp()" :alt="groupname" class="full-width">
|
||||
|
||||
</q-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./mygroup.ts">
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './mygroup.scss';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user