Skip to content

Commit b743863

Browse files
antongitantongit
committed
Merge branch 'community-connections' into stage
2 parents 99d2e65 + 1deac70 commit b743863

45 files changed

Lines changed: 2721 additions & 158 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎community-app/frontend/src/components/ConnectionListView.vue‎

Lines changed: 122 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
11
<script setup>
2+
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue';
23
import { logos } from './logos/logos.js'
3-
import { NIcon, NButton, NDropdown } from 'naive-ui';
4+
import { NIcon, NButton, NDropdown, NPagination, NSpin } from 'naive-ui';
45
import { ChevronDown } from '@vicons/ionicons5';
56
import { showBusinessProfile, showEduProfile } from "../utils.js"
67
7-
const props = defineProps(['list', 'options', 'connection', 'type'])
8-
const emit = defineEmits(['change'])
8+
const props = defineProps(['list', 'loading', 'options', 'connection', 'connectionKey', 'pageSizes'])
9+
const emit = defineEmits(['change', 'page'])
10+
11+
const windowWidth = ref(window.innerWidth);
12+
13+
onMounted(() => {
14+
window.addEventListener('resize', updateWindowWidth)
15+
})
16+
17+
onBeforeUnmount(() => {
18+
window.removeEventListener('resize', updateWindowWidth)
19+
})
20+
21+
const updateWindowWidth = () => {
22+
windowWidth.value = window.innerWidth
23+
}
24+
25+
const constants = {
26+
business: {
27+
title: 'Businesses on other platforms:',
28+
type: 'Business',
29+
profileLink: 'business'
30+
},
31+
edu: {
32+
title: 'Institutions on other platforms:',
33+
type: 'Institution',
34+
profileLink: 'edu'
35+
},
36+
people: {
37+
title: 'People on other platforms:',
38+
type: 'Username',
39+
profileLink: 'personal'
40+
}
41+
}
942
1043
function handleClick(item)
1144
{
@@ -19,33 +52,94 @@ function handleClick(item)
1952
}
2053
}
2154
55+
const profileLink = computed(()=>`/edit-profile/?p=${constants[props.connectionKey].profileLink}`)
56+
57+
const page = ref(1);
58+
const pageSize = ref(props.pageSizes[0].value);
59+
60+
function setPage(p)
61+
{
62+
page.value = p
63+
emit('page', { page: p, size: pageSize.value});
64+
}
65+
66+
function setSize(s)
67+
{
68+
pageSize.value = s;
69+
emit('page', { page: 1, size: s});
70+
}
71+
72+
const isSimple = computed(() => (windowWidth.value < 480 ? true : false));
73+
const showSizePicker = computed(() => windowWidth.value > 600);
74+
2275
</script>
2376

2477
<template>
25-
<div>
26-
<table class="table table-borderless">
27-
<thead class="border-bottom">
28-
<tr>
29-
<th scope="col" class="col-4">{{ type}}</th>
30-
<th scope="col" class="col">
31-
<NDropdown trigger="click" :options="options" @select="(key) => emit('change', key)">
32-
<NButton secondary>{{ connection.label }}<NIcon class="ml-4"><ChevronDown/></NIcon></NButton>
33-
</NDropdown></th>
34-
</tr>
35-
</thead>
36-
<tbody v-if="list">
37-
<tr v-for="item in list.items" class="border-bottom">
38-
<td>
39-
<a :href="item.profileLink" @click.prevent="handleClick(item)">{{ item.name }}</a>
40-
</td>
41-
<td>
42-
<a :href="item.connectionLink" target="_blank">
43-
<NIcon class="mr-3"><component :is="logos[connection.key]"/></NIcon>{{ item.label }}
44-
</a>
45-
</td>
46-
</tr>
47-
</tbody>
48-
</table>
49-
</div>
78+
<p>{{ constants[props.connectionKey].title }}</p>
79+
<NSpin :show="loading">
80+
<div class="connectionsView" v-if="list">
81+
<table class="table table-borderless">
82+
<thead class="border-bottom">
83+
<tr>
84+
<th scope="col" class="col-4">{{ constants[props.connectionKey].type }}</th>
85+
<th scope="col" class="col pr-0">
86+
<div class="row align-items-center">
87+
<div class="col mb-3 mb-md-0">
88+
<NDropdown trigger="click" :options="options" @select="(key) => emit('change', key)">
89+
<NButton secondary>{{ connection.label }}<NIcon class="ml-4"><ChevronDown/></NIcon></NButton>
90+
</NDropdown>
91+
</div>
92+
<div class="col-auto" v-if="list.total > pageSizes[0].value">
93+
<NPagination
94+
v-model:page="page"
95+
v-model:page-size="pageSize"
96+
:simple="isSimple"
97+
:item-count="list.total"
98+
:page-sizes="pageSizes"
99+
:page-slot="4"
100+
:show-size-picker="showSizePicker"
101+
@update:page="setPage"
102+
@update:page-size="setSize"
103+
class="pagination"
104+
/>
105+
</div>
106+
</div>
107+
</th>
108+
</tr>
109+
</thead>
110+
<tbody v-if="list">
111+
<tr v-for="item in list.items" class="border-bottom">
112+
<td>
113+
<a :href="item.profileLink" @click.prevent="handleClick(item)">{{ item.name }}</a>
114+
</td>
115+
<td>
116+
<a :href="item.connectionLink" target="_blank">
117+
<NIcon class="mr-3"><component :is="logos[connection.key]"/></NIcon>{{ item.label }}
118+
</a>
119+
</td>
120+
</tr>
121+
</tbody>
122+
</table>
123+
124+
<div class="row mt-4">
125+
<div class="col">
126+
<p class="profileLink">Add this platform to <a :href="profileLink">your profile.</a></p>
127+
</div>
128+
<div class="col-auto ml-auto" v-if="list.total > pageSizes[0].value">
129+
<NPagination
130+
v-model:page="page"
131+
v-model:page-size="pageSize"
132+
:simple="isSimple"
133+
:item-count="list.total"
134+
:page-sizes="pageSizes"
135+
:page-slot="4"
136+
:show-size-picker="showSizePicker"
137+
@update:page="setPage"
138+
@update:page-size="setSize"
139+
/>
140+
</div>
141+
</div>
142+
</div>
143+
</NSpin>
50144
</template>
51145

‎community-app/frontend/src/components/LogoListView.vue‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,32 @@
22
import defaultLogo from '../assets/defaultLogo.png'
33
import Location from "../components/Location.vue"
44
import Internships from '../components/Internships.vue';
5+
import { NSpin } from 'naive-ui';
56
6-
const props = defineProps(['list', 'title'])
7+
const props = defineProps(['list', 'title', 'loading'])
78
const emit = defineEmits(['click']);
89
910
</script>
1011

1112
<template>
12-
<div class="logoListView" v-if="list && list.total > 0">
13-
<p>{{ title }}</p>
14-
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
15-
<div v-for="item in list.items" track-by="item.name" class="col mb-4">
16-
<div class="companyCard p-3 h-100" @click.prevent="emit('click', item.slug)">
17-
<div class="company">
18-
<div class="logo">
19-
<img :src="item.logo || defaultLogo"/>
13+
<NSpin :show="loading">
14+
<div class="logoListView" v-if="list && list.total > 0">
15+
<p>{{ title }}</p>
16+
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4">
17+
<div v-for="item in list.items" track-by="item.name" class="col mb-4">
18+
<div class="companyCard p-3 h-100" @click.prevent="emit('click', item.slug)">
19+
<div class="company">
20+
<div class="logo">
21+
<img :src="item.logo || defaultLogo"/>
22+
</div>
23+
<p class="name">{{ item.name }}</p>
24+
25+
<Internships v-if="item.internships" :data="item" text="Accepting internship" class="mb-1"/>
26+
<Location :location="{city: item.location_city, country: item.location_country}"/>
2027
</div>
21-
<p class="name">{{ item.name }}</p>
22-
23-
<Internships v-if="item.internships" :data="item" text="Accepting internship" class="mb-1"/>
24-
<Location :location="{city: item.location_city, country: item.location_country}"/>
2528
</div>
2629
</div>
2730
</div>
2831
</div>
29-
</div>
32+
</NSpin>
3033
</template>

‎community-app/frontend/src/router.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { isAuthenticated, kclogin } from './keycloak-helper.js'
33
import { isRouteLoading } from "./globalState.js"
44
import Overview from "./routes/Overview.vue"
55

6-
const UserList = () => import('./routes/UserList.vue');
6+
const People = () => import('./routes/People.vue');
77
const UserView = () => import('./routes/UserView.vue');
88

99
const BusinessList = () => import('./routes/BusinessList.vue');
@@ -35,7 +35,7 @@ const routes = [
3535
{
3636
path: '/people/',
3737
name: 'People',
38-
component: UserList,
38+
component: People,
3939
meta: { tabName: 'People', visible: true, isLeft: true, order: 1 }
4040
},
4141
{

‎community-app/frontend/src/routes/BusinessList.vue‎

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script setup>
22
import { ref, onMounted, watch, computed } from 'vue'
3+
import { NSpin } from 'naive-ui'
34
import { useRoute, useRouter } from "vue-router";
45
import { useBusinessListStore } from "./BusinessListStore.js";
56
import { showBusinessProfile } from "../utils.js"
@@ -10,6 +11,11 @@ import ConnectionListView from '../components/ConnectionListView.vue';
1011
const router = useRouter();
1112
const route = useRoute();
1213
const store = useBusinessListStore();
14+
const pageSizes = [
15+
{ label: '10 per page', value: 10 },
16+
{ label: '50 per page', value: 50 },
17+
{ label: '100 per page', value: 100 }
18+
]
1319
1420
onMounted( async ()=>
1521
{
@@ -34,7 +40,7 @@ async function checkRoute(query)
3440
}
3541
3642
try{
37-
await store.getData();
43+
await store.getData( {page: 0, size: pageSizes[0].value} );
3844
}
3945
catch (error)
4046
{
@@ -59,7 +65,7 @@ function changeConnection(key)
5965
router.push({name: 'Businesses', query:{ section: store.selectedSection.key, type: key }})
6066
}
6167
62-
const title = computed(()=>{
68+
const titleList = computed(()=>{
6369
6470
if (store.list?.list)
6571
{
@@ -70,29 +76,26 @@ const title = computed(()=>{
7076
</script>
7177
7278
<template>
73-
<n-spin :show="store.loading">
74-
75-
<div class="row">
76-
<div class="col-12 col-lg-4">
77-
<ListNavigation :sections="store.sections" :selected="store.selectedSection.key" @select="changeSection"/>
78-
</div>
79+
<div class="row mb-2">
80+
<div class="col-12 col-lg-4">
81+
<ListNavigation :sections="store.sections" :selected="store.selectedSection.key" @select="changeSection"/>
7982
</div>
83+
</div>
8084
81-
<template v-if="!store.loading && store.list">
82-
83-
<LogoListView v-if="store.selectedSection.key == 'list'"
84-
:list ="store.list.list"
85-
:title="title"
86-
@click="showBusinessProfile"/>
87-
88-
<ConnectionListView v-if="store.selectedSection.key == 'connections'"
89-
:list="store.list.connections"
90-
:options="store.socialOptions"
91-
:connection="store.selectedConnection"
92-
type="Business"
93-
class="mt-3" @change="changeConnection"/>
94-
95-
</template>
96-
97-
</n-spin>
85+
<LogoListView v-if="store.selectedSection.key == 'list'"
86+
:loading = "store.loading"
87+
:list ="store.list?.list"
88+
:title="titleList"
89+
@click="showBusinessProfile"/>
90+
91+
<ConnectionListView v-if="store.selectedSection.key == 'connections'"
92+
:list="store.list?.connections"
93+
:options="store.socialOptions"
94+
:connection="store.selectedConnection"
95+
:pageSizes="pageSizes"
96+
:loading="store.loading"
97+
connectionKey="business"
98+
@change="changeConnection"
99+
@page="store.getData"
100+
/>
98101
</template>

0 commit comments

Comments
 (0)