surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First Committ

Browse Source
This commit is contained in:
Paolo Arena
2021-08-31 18:09:59 +02:00
commit 1d6c55807c
299 changed files with 55382 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/layouts/MainLayout.vue Executable file
View File

@@ -0,0 +1,112 @@
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title>
Quasar App
</q-toolbar-title>
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer
v-model="leftDrawerOpen"
show-if-above
bordered
class="bg-grey-1"
>
<q-list>
<q-item-label
header
class="text-grey-8"
>
Essential Links
</q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script lang="ts">
import EssentialLink from 'components/EssentialLink.vue'
const linksList = [
{
title: 'Docs',
caption: 'quasar.dev',
icon: 'school',
link: 'https://quasar.dev',
},
{
title: 'Github',
caption: 'github.com/quasarframework',
icon: 'code',
link: 'https://github.com/quasarframework',
},
{
title: 'Discord Chat Channel',
caption: 'chat.quasar.dev',
icon: 'chat',
link: 'https://chat.quasar.dev',
},
{
title: 'Forum',
caption: 'forum.quasar.dev',
icon: 'record_voice_over',
link: 'https://forum.quasar.dev',
},
{
title: 'Twitter',
caption: '@quasarframework',
icon: 'rss_feed',
link: 'https://twitter.quasar.dev',
},
{
title: 'Facebook',
caption: '@QuasarFramework',
icon: 'public',
link: 'https://facebook.quasar.dev',
},
{
title: 'Quasar Awesome',
caption: 'Community Quasar projects',
icon: 'favorite',
link: 'https://awesome.quasar.dev',
},
]
import { Vue, Options } from 'vue-class-component'
@Options({
components: { EssentialLink },
})
export default class MainLayout extends Vue {
leftDrawerOpen = false;
essentialLinks = linksList;
toggleLeftDrawer() {
this.leftDrawerOpen = !this.leftDrawerOpen
}
}
</script>

49
src/layouts/drawer/drawer.scss Executable file
View File

@@ -0,0 +1,49 @@
.background-red {
background-color: red;
padding: 2px;
}
.fixed-bottom {
margin-bottom: 1%;
}
.fixed-bottom a img {
width: 25px;
height: 25px;
}
#avatar {
padding: 20px;
}
#profile {
background-color: #009688;
}
#user-name {
left: 90px;
bottom: 77px;
position: relative;
width: 159px;
}
#user-actions {
//left: 90px;
//bottom: 40px;
//position: relative;
//width: 171px;
}
#menu-collapse {
margin-top: 5%;
}
.fixed-left:hover {
cursor: ew-resize;
}
footer {
small {
color: red;
}
}

20
src/layouts/drawer/drawer.ts Executable file
View File

@@ -0,0 +1,20 @@
import { defineComponent } from 'vue'
import menuOne from '../menuone/menuOne.vue'
export default defineComponent({
name: 'Drawer',
components: {
menuOne,
},
props: {
clBase: {
type: String,
required: false,
default: 'my-menu',
},
},
setup(props) {
return {}
},
})

11
src/layouts/drawer/drawer.vue Executable file
View File

@@ -0,0 +1,11 @@
<template>
<div>
<menu-one :clBase="clBase"></menu-one>
</div>
</template>
<script lang="ts" src="./drawer.ts">
</script>
<style lang="scss" scoped>
@import './drawer.scss';
</style>

129
src/layouts/menuone/menuOne.scss Executable file
View File

@@ -0,0 +1,129 @@
.q-list-header {
min-height: 12px;
padding: 5px 8px;
}
.menu-hr {
border-color: #dedede;
height: 0.5px;
}
.router-link-active {
color: #027be3;
background-color: #dadada !important;
border-right: 2px solid #027be3;
}
.list-label:first-child {
line-height: 20px;
padding: 5px;
margin: 1px;
}
/*
.menu-enter-active, .scale-enter {
-webkit-animation: moveFromTopFade .5s ease both;
animation: moveFromTopFade .5s ease both;
}
.menu-leave-to, .scale-leave-active {
-webkit-animation: moveToBottom .5s ease both;
animation: moveToBottom .5s ease both;
}
*/
.router-link-active {
color: #027be3;
background-color: #dadada !important;
border-right: 2px solid #027be3;
}
.router-link-active .item-primary {
color: #027be3;
}
.menu_freccina {
position: absolute;
right: 10px;
display: inline-block;
padding: 0 0px 0px 0px;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.my-menu, .my-menu > i{
min-height: 40px;
min-width: 26px;
font-size: 1rem;
}
.my-menu-small, .my-menu-small > i{
min-height: 40px;
min-width: 26px;
font-size: 0.75rem;
}
.isAdmin {
color: red;
}
.isSocioResidente {
color: darkgreen;
}
.isCalendar {
color: #fff241;
}
.isManager {
color: green;
}
.isTutor {
color: #201a80;
}
.my-menu-icon{
min-width: 2px;
font-size: 1rem;
}
.my-menu-icon > i{
min-width: 26px;
font-size: 1.25rem;
}
.clexpansion{
min-width: 0px !important;
}
.my-menu-active {
background-color: rgba(174, 189, 241, 0.71);
}
.my-menu-separat > i{
min-width: 26px;
font-size: 1rem;
}
.my-menu-icon-none > i{
display: none;
}
.clicon img, .clicon {
font-size: 16px;
}
.q-item__section--avatar{
min-width: 30px;
}
.q-item__section--side{
padding-right: 8px;
}
.imgicon img {
font-size: 2.5rem !important;
border-radius: 8px;
}

88
src/layouts/menuone/menuOne.ts Executable file
View File

@@ -0,0 +1,88 @@
import { IListRoutes } from '@src/model'
import { useGlobalStore } from '@store/globalStore'
import { tools } from '@store/Modules/tools'
import { computed, defineComponent, watch } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
name: 'MenuOne',
props: {
clBase: {
type: String,
required: false,
default: 'my-menu',
},
},
setup(props) {
const route = useRoute()
const path = computed(() => route.path)
function getmenu(): any {
const globalStore = useGlobalStore()
return globalStore.getmenu
}
function setParentVisibilityBasedOnRoute(parent: any) {
parent.routes.forEach((item: any) => {
if (path.value === item.path) {
parent.show = true
}
})
}
watch(path, (to: string, from: string) => {
Object.keys(getmenu()).forEach((parentName: any) => {
// @ts-ignore
setParentVisibilityBasedOnRoute(getmenu[parentName])
})
})
function isfinishLoading() {
const globalStore = useGlobalStore()
return globalStore.finishLoading
}
/* function replaceUnderlineToSpace(text: string) {
while (text.indexOf('_') !== -1) {
text = text.replace('_', ' ')
}
return text
} */
function getroute(elem: IListRoutes) {
if (elem.idelem) {
return tools.getUrlByTipoProj(elem.urlroute ? elem.urlroute : '') + elem.idelem
}
return elem.path
}
function getmymenuclass(elem: IListRoutes) {
let menu: string = props.clBase
if (elem.color) {
menu += ` ${elem.color}`
} else {
if (elem.onlyAdmin) menu += ' isAdmin'
if (elem.onlyManager) menu += ' isManager'
if (elem.onlySocioResidente) menu += ' isSocioResidente'
if (elem.onlyConsiglio) menu += ' isConsiglio'
if (elem.onlyDepartment) menu += ' isDepartment'
if (elem.onlyTutor) menu += ' isTutor'
if (elem.onlyEditor) menu += ' isEditor'
}
if (elem.extraclass) menu += ` ${elem.extraclass}`
return menu
}
return {
getmenu,
isfinishLoading,
getmymenuclass,
getroute,
}
},
})

156
src/layouts/menuone/menuOne.vue Executable file
View File

@@ -0,0 +1,156 @@
<template>
<div class="no-border" v-if="isfinishLoading">
<q-list class="rounded-borders text-primary">
<template v-for="ind1 in getmenu" :key="ind1">
<!--<div class="q-list-header">{{replaceUnderlineToSpace(index)}}</div>-->
<div v-for="(myitemmenu, ind2) in static_data.routes" :key="ind2">
<div v-if="myitemmenu.active">
<div v-if="!!myitemmenu.routes2 && myitemmenu.inmenu && tools.visumenu(myitemmenu)">
<span v-if="myitemmenu.isseparator">
<q-separator></q-separator>
</span>
<span v-else>
<q-expansion-item
:header-inset-level="myitemmenu.level_parent"
:content-inset-level="myitemmenu.level_parent"
:label="tools.getLabelByItem(myitemmenu, mythis)"
:icon="myitemmenu.materialIcon"
expand-icon-class="my-menu-separat"
:header-class="getmymenuclass(myitemmenu)"
active-class="my-menu-active">
<div v-for="(child2, index) in myitemmenu.routes2" :key="index">
<div v-if="child2.active && tools.visumenu(child2)">
<span v-if="child2.isseparator">
<q-separator></q-separator>
</span>
<span v-else>
<q-expansion-item
v-if="!child2.routes2"
:to="getroute(child2)"
:header-inset-level="child2.level_child"
:duration="300"
:icon="child2.materialIcon"
active-class="my-menu-active"
expand-icon-class="my-menu-icon-none"
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
:label="tools.getLabelByItem(child2, mythis)">
<template v-slot:header>
<q-item-section avatar>
<q-avatar v-if="child2.img">
<div :icon="`img:`+child2.img" class="imgicon" font-size="2rem"></div>
</q-avatar>
<div v-else>
<q-avatar
:icon="child2.materialIcon" color="primary" class="clicon"
text-color="white">
</q-avatar>
</div>
</q-item-section>
<q-item-section>
{{ tools.getLabelByItem(child2, mythis) }}
</q-item-section>
</template>
<div v-for="(child3, index) in child2.routes2" :key="index">
<q-expansion-item
v-if="!!child2.routes2 && child3.active"
:to="getroute(child3)"
:header-inset-level="child3.level_child"
:duration="300"
:icon="child3.materialIcon"
:expand-icon="child3.icon"
expand-icon-class="my-menu-separat"
active-class="my-menu-active"
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
:label="tools.getLabelByItem(child3, mythis)">
</q-expansion-item>
</div>
</q-expansion-item>
<q-expansion-item
v-else
:header-inset-level="child2.level_parent"
:content-inset-level="child2.level_parent"
:label="tools.getLabelByItem(child2, mythis)"
:icon="child2.materialIcon"
expand-icon-class="my-menu-separat"
:header-class="getmymenuclass(child2)"
active-class="my-menu-active">
<div v-for="(child3, index) in child2.routes2" :key="index">
<div v-if="child3.active">
<q-expansion-item
:to="getroute(child3)"
:header-inset-level="child3.level_child"
:duration="300"
:icon="child3.materialIcon"
active-class="my-menu-active"
expand-icon-class="my-menu-icon-none"
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
:label="tools.getLabelByItem(child3, mythis)">
<div v-for="(child4, index) in child3.routes2" :key="index">
<q-expansion-item
v-if="!!child3.routes2 && child3.active"
:key="index"
:to="getroute(child4)"
:header-inset-level="child4.level_child"
:duration="300"
:icon="child4.materialIcon"
:expand-icon="child4.icon"
expand-icon-class="my-menu-separat"
active-class="my-menu-active"
:class="`item item-link drawer-closer cursor-pointer ` + clBaseint"
:label="tools.getLabelByItem(child4, mythis)">
</q-expansion-item>
</div>
</q-expansion-item>
</div>
</div>
</q-expansion-item>
</span>
</div>
</div>
</q-expansion-item>
</span>
</div>
</div>
<div v-else>
<div v-if="myitemmenu.inmenu && !myitemmenu.submenu && tools.visumenu(myitemmenu)">
<q-slide-transition :duration=200>
<div v-show="true">
<span v-if="myitemmenu.isseparator">
<q-separator inset></q-separator>
</span>
<span v-else>
<q-expansion-item
:to="getroute(myitemmenu)"
:header-inset-level="myitemmenu.level_parent"
:content-inset-level="myitemmenu.level_parent"
:label="tools.getLabelByItem(myitemmenu, mythis)"
:icon="myitemmenu.materialIcon"
expand-icon="none"
:header-class="clBaseint"
active-class="my-menu-active">
</q-expansion-item>
</span>
</div>
</q-slide-transition>
</div>
</div>
</div>
</template>
</q-list>
</div>
</template>
<script lang="ts" src="./menuOne.ts">
</script>
<style lang="scss" scoped>
@import './menuOne.scss';
</style>

17
src/layouts/toolbar/messagePopover/messagePopover.scss Executable file
View File

@@ -0,0 +1,17 @@
.list {
max-width: 400px;
}
.item > img.item-primary:not(.thumbnail) {
border-radius: 10px !important;
}
.item > img.item-primary {
width: 48px;
height: 46px;
}
.item > .item-secondary {
width: 57px;
font-size: 13px;
}

81
src/layouts/toolbar/messagePopover/messagePopover.ts Executable file
View File

@@ -0,0 +1,81 @@
import { defineComponent } from 'vue'
import {
IMessage,
} from '@model'
import './messagePopover.scss'
import { tools } from '@src/store/Modules/tools'
import { useRouter } from 'vue-router'
import MixinUsers from '../../../mixins/mixin-users'
const namespace = 'MessageModule'
export default defineComponent({
name: 'MessagePopover',
mixins: [MixinUsers],
setup(props) {
const $router = useRouter()
// function lasts_messages (state: IUserState) => IMessage[] {
//
// }
function lasts_messages() {
// ++Todo: lasts_messages
return []
}
// if (GlobalStore.state.posts.length < 1) {
// this.requestPosts()
// }
function created() {}
function clickChat(msg: IMessage) {
// $router.replace(`/messages/${ msg.dest.username}`)
}
function getNumNotifUnread() {
return 0
}
function randomDate(): Date {
const myval = Math.floor(Math.random() * 10000000000)
return tools.getstrDateTime(new Date(tools.getTimestampsNow() - myval))
}
function randomAvatarUrl() {
// return `https://api.adorable.io/avatars/face/${this.randomEye()}/${this.randomNose()}/${this.randomMouth()}/${this.randomHexColor()}`
}
function randomHexColor() {
return Math.random().toString(16).slice(2, 8)
}
function randomArrayElement(array: any) {
return array[Math.floor((Math.random() * array.length))]
}
/*
function randomEye() {
return this.randomArrayElement(['eyes1', 'eyes10', 'eyes2', 'eyes3', 'eyes4', 'eyes5', 'eyes6', 'eyes7', 'eyes9'])
}
function randomNose() {
return this.randomArrayElement(['nose2', 'nose3', 'nose4', 'nose5', 'nose6', 'nose7', 'nose8', 'nose9'])
}
function randomMouth() {
return this.randomArrayElement(['mouth1', 'mouth10', 'mouth11', 'mouth3', 'mouth5', 'mouth6', 'mouth7', 'mouth9'])
}
*/
return {
lasts_messages,
clickChat,
}
},
})

49
src/layouts/toolbar/messagePopover/messagePopover.vue Executable file
View File

@@ -0,0 +1,49 @@
<template>
<div>
<q-btn flat round dense icon="fas fa-comment" class="q-mx-xs" >
<q-badge v-if="getNumMsgUnread > 0" floating color="red">{{getNumMsgUnread}}</q-badge>
<q-menu self="top right">
<q-list bordered class="rounded-borders" style="max-width: 350px; min-width: 250px;">
<q-item-label header>{{t('msgs.messages')}}</q-item-label>
<q-separator/>
<div v-if="getNumMsg === 0">
<q-item>
{{t('msgs.nomessage')}}
</q-item>
</div>
<q-item clickable v-ripple v-for="(msg, index) in lasts_messages()" :key="index" @click="clickChat(msg)">
<q-item-section avatar>
<q-avatar>
<img :src="getImgByMsg(msg)" :alt="getUsernameChatByMsg(msg)">
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label lines="1">{{getUsernameChatByMsg(msg)}}</q-item-label>
<q-item-label caption lines="2">
{{getMsgText(msg, false)}}
</q-item-label>
</q-item-section>
<q-item-section side top>
{{tools.getstrDateTimeShort(msg.datemsg)}}
</q-item-section>
</q-item>
<q-separator/>
</q-list>
</q-menu>
</q-btn>
<q-btn v-if="false" flat round dense icon="fas fa-bell">
<q-badge v-if="getNumNotifUnread > 0" floating color="red">{{getNumNotifUnread}}</q-badge>
</q-btn>
</div>
</template>
<script lang="ts" src="./messagePopover.ts">
</script>