Ben Stähli 3 years ago
parent
commit
ef8da63b02
  1. 2
      src/App.vue
  2. 22
      src/router.js
  3. 48
      src/views/Connect.vue
  4. 31
      src/views/ConnectMap.vue
  5. 79
      src/views/ConnectSearch.vue
  6. 28
      src/views/ConnectionHandling.vue
  7. 2
      src/views/Home.vue
  8. 2
      vue.config.js

2
src/App.vue

@ -23,7 +23,7 @@
<v-list-tile-title>News</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile to="/connect">
<v-list-tile to="/connect/map">
<v-list-tile-action>
<v-icon>link</v-icon>
</v-list-tile-action>

22
src/router.js

@ -59,7 +59,27 @@ export default new Router({
{
path: '/connect',
name: 'connect',
component: () => import( './views/Connect.vue')
component: () => import( './views/Connect.vue'),
children: [
{
// UserProfile will be rendered inside User's <router-view>
// when /user/:id/profile is matched
path: 'map',
component: () => import( './views/ConnectMap.vue'),
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'search',
component: () => import( './views/ConnectSearch.vue'),
},
{
// UserPosts will be rendered inside User's <router-view>
// when /user/:id/posts is matched
path: 'mine',
component: () => import( './views/ConnectionHandling.vue'),
}
]
},
{
path: '/profile',

48
src/views/Connect.vue

@ -8,25 +8,26 @@
touchless
v-model="theTab"
>
<v-tab>
<v-tab to="/connect/map">
Map
</v-tab>
<v-tab>
<v-tab to="/connect/search">
Search
</v-tab>
<v-tab>
<v-tab to="/connect/mine">
My Connections
</v-tab>
<v-tabs-items touchless v-model="theTab">
<v-tab-item touchless>
<ConnectMap ></ConnectMap>
</v-tab-item>
<v-tab-item touchless>
<ConnectSearch></ConnectSearch>
</v-tab-item>
<v-tab-item touchless>
<ConnectionHandling></ConnectionHandling>
</v-tab-item>
<router-view></router-view>
<!--<v-tab-item touchless>-->
<!--<ConnectMap ></ConnectMap>-->
<!--</v-tab-item>-->
<!--<v-tab-item touchless>-->
<!--<ConnectSearch></ConnectSearch>-->
<!--</v-tab-item>-->
<!--<v-tab-item touchless>-->
<!--<ConnectionHandling></ConnectionHandling>-->
<!--</v-tab-item>-->
</v-tabs-items>
</v-tabs>
</template>
@ -37,20 +38,12 @@
// import NewsEntry from '@/components/NewsEntry';
import LoginRequiredBase from './Base'
import UserService from '@/services/UserService'
import ConnectMap from "@/components/ConnectMap";
import ConnectSearch from "@/components/ConnectSearch";
import ConnectionHandling from "@/components/ConnectionHandling";
import to from "../utils/to";
export default {
extends: LoginRequiredBase,
name: 'News',
components: {
ConnectMap,
ConnectSearch,
ConnectionHandling,
},
data: function () {
return {
loading: false,
@ -62,26 +55,13 @@
'title': 'Connect',
'text': 'Look for specific help, connect with experts.',
});
// fetch the data when the view is created and the data is
// already being observed
if (this.checkLoginStatus()) {
this.fetchData()
}
},
watch: {
// call again the method if the route changes
// '$route': 'fetchData'
},
methods: {
async fetchData() {
this.loading = true;
let err, response;
[err, response] = await to(UserService.getPublicUsers());
this.$store.dispatch('users', response.data.data);
const connections_response = await UserService.getConnections();
this.$store.dispatch('userConnections', connections_response.data.data);
this.loading = false;
}
}
}

31
src/components/ConnectMap.vue → src/views/ConnectMap.vue

@ -1,4 +1,5 @@
<template>
<v-container fluid fill-height pa-0>
<v-layout fluid fill-height pa-0>
<v-flex>
@ -25,17 +26,19 @@
<script>
import LoginRequiredBase from "../views/Base";
import UserService from '@/services/UserService'
import Vue2Leaflet from 'vue2-leaflet';
import L from 'leaflet';
import to from "../utils/to";
import ConnectUserDialog from "./ConnectUserDialog";
import ConnectUserDialog from "@/components/ConnectUserDialog";
var {LMap, LTileLayer, LMarker, LPopup} = Vue2Leaflet;
export default {
extends: LoginRequiredBase,
name: 'ConnectMap',
components: {
ConnectUserDialog,
@ -64,26 +67,28 @@
'title': 'Interactive Map',
'text': 'This map shows...',
});
// fetch the data when the view is created and the data is
// already being observed
// this.fetchData()
// this.prepareData();
},
watch: {
// call again the method if the route changes
'$route': 'fetchData'
if (this.checkLoginStatus()) {
this.fetchData()
}
},
mounted () {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject // work as expected
this.map.setMinZoom(3);
this.prepareData();
this.map.invalidateSize();
var self = this;
setTimeout(function() { self.map.invalidateSize(); self.prepareData()}, 300);
// this.map.invalidateSize();
// var self = this;
// setTimeout(function() { self.map.invalidateSize(); self.prepareData()}, 300);
})
},
methods: {
async fetchData() {
this.loading = true;
let err, response;
[err, response] = await to(UserService.getPublicUsers());
this.$store.dispatch('users', response.data.data);
this.prepareData();
this.loading = false;
},
showUser(userId) {
this.showUserId = userId;
this.$ga.event({

79
src/components/ConnectSearch.vue → src/views/ConnectSearch.vue

@ -1,38 +1,43 @@
<template>
<div>
<v-container>
<v-layout>
<v-flex>
<v-card flat>
<v-text-field
v-model="searchQuery"
label="Search (Name/E-Mail/Expertise/etc.)"
></v-text-field>
<v-container>
<v-layout>
<v-flex>
<v-card flat>
<v-text-field
v-model="searchQuery"
label="Search (Name/E-Mail/Expertise/etc.)"
></v-text-field>
<v-card-text>
{{ message }}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-md>
<v-layout v-if="!loading" row wrap>
<v-flex m4 xs12 sm6 md3 v-bind:key="i" v-for="(object, i) in this.$store.getters.userSearchResults">
<v-card>
<v-card-title primary-title
><h3>{{ object.name }}</h3></v-card-title>
<v-card-text>
{{ object.expertise }}
</v-card-text>
<v-card-actions>
<v-btn @click="showUser(object.id)" color="primary">Connect</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<ConnectUserDialog :userid="showUserId" :visible="showUserId" v-on:close-dialogs="closeDialogs"></ConnectUserDialog>
<v-card-text>
{{ message }}
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
<v-container grid-list-md>
<v-card flat v-if="loading" >
<v-progress-circular
indeterminate
></v-progress-circular>
</v-card>
<v-layout v-else row wrap>
<v-flex m4 xs12 sm6 md3 v-bind:key="i" v-for="(object, i) in this.$store.getters.userSearchResults">
<v-card>
<v-card-title primary-title
><h3>{{ object.name }}</h3></v-card-title>
<v-card-text>
{{ object.expertise }}
</v-card-text>
<v-card-actions>
<v-btn @click="showUser(object.id)" color="primary">Connect</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<ConnectUserDialog :userid="showUserId" :visible="showUserId" v-on:close-dialogs="closeDialogs"></ConnectUserDialog>
</div>
</template>
@ -41,9 +46,9 @@
import UserService from '@/services/UserService'
import LoginRequiredBase from '@/views/Base'
// import VTextField from "vuetify/lib/components/VTextField/VTextField";
import ConnectUserDialog from "@/components/ConnectUserDialog";
import _ from 'lodash';
// import VTextField from "vuetify/lib/components/VTextField/VTextField";
export default {
components: {
@ -54,8 +59,8 @@
name: 'ConnectSearch',
data() {
return {
showUserId: null,
loading: false,
showUserId: null,
message: 'No results yet.',
searchQuery: '',
}
@ -98,9 +103,11 @@
},
async getResults () {
this.loading = true;
this.message = 'Searching...'
this.loading = true;
this.message = 'Searching...';
const response = await UserService.getPublicUsers(this.searchQuery)
if (!this.$store.state.userId.length) {
this.$store.dispatch('users', response.data.data);
}
this.$store.dispatch('userSearchResults', response.data.data);
if (this.searchQuery.length) {
this.message = 'Showing ' + response.data.data.length + " results.";

28
src/components/ConnectionHandling.vue → src/views/ConnectionHandling.vue

@ -8,8 +8,8 @@
<br>
<h2>Pending Requests</h2>
<br>
<v-layout >
<v-flex v-bind:key="i" v-for="(object, i) in $store.getters['connections']('myPending')">
<v-layout row wrap>
<v-flex m4 xs12 sm6 md3 v-bind:key="i" v-for="(object, i) in $store.getters['connections']('myPending')">
<v-card v-for="user in getUser(object)">
<v-card-text v-if="user">
<strong>{{ user.name }}</strong><em v-if="object.accepted"> You Accepted</em><br>
@ -37,8 +37,8 @@
<br>
<h2>Your Sent Requests</h2>
<br>
<v-layout >
<v-flex v-bind:key="i" v-for="(object, i) in $store.getters['connections']('theirPending')">
<v-layout row wrap>
<v-flex m4 xs12 sm6 md3 v-bind:key="i" v-for="(object, i) in $store.getters['connections']('theirPending')">
<v-card v-for="user in getUser(object)">
<v-card-text v-if="user">
<strong>{{ user.name }}</strong><em> pending</em><br>
@ -53,8 +53,8 @@
<br>
<h2>Your Established Connections</h2>
<br>
<v-layout >
<v-flex v-bind:key="i" v-for="(object, i) in $store.getters['connections']('accepted')">
<v-layout row wrap>
<v-flex m4 xs12 sm6 md3 v-bind:key="i" v-for="(object, i) in $store.getters['connections']('accepted')">
<v-card v-for="user in getUser(object)">
<v-card-text v-if="user">
<strong>{{ user.name }}</strong><em v-if="!object.accepted" > You unconnected. Reload to make disappear.</em>
@ -79,10 +79,14 @@
<script>
import LoginRequiredBase from "../views/Base";
import UserService from "../services/UserService";
import to from "../utils/to";
export default {
// eslint-disable-next-line no-undef
extends: LoginRequiredBase,
name: 'ConnectionHandling',
data() {
return {
@ -94,8 +98,20 @@
'title': 'Your Connections',
'text': 'Pending connection request, established contacts, and your sent requests. All visible here.',
});
if (this.checkLoginStatus()) {
this.fetchData()
}
},
methods: {
async fetchData() {
this.loading = true;
let err, response;
[err, response] = await to(UserService.getPublicUsers());
this.$store.dispatch('users', response.data.data);
const connections_response = await UserService.getConnections();
this.$store.dispatch('userConnections', connections_response.data.data);
this.loading = false;
},
getUser(connectionObject) {
var userId = connectionObject.UserId;
if (connectionObject.UserId == this.$store.state.me.id) {

2
src/views/Home.vue

@ -10,7 +10,7 @@
</v-card>
</v-flex>
<v-flex xs6>
<v-card to="/connect">
<v-card to="/connect/map">
<v-card-text>
<img src="@/assets/guidelines only logo.svg" alt="" class="">
<br>

2
vue.config.js

@ -9,7 +9,7 @@ module.exports = {
themeColor: '#8cb801',
msTileColor: '#ffffff',
assetsVersion: '0.1',
manifestPath: 'what-manifest.json',
manifestPath: 'manifest.json',
appleMobileWebAppCapable: 'yes',
// appleMobileWebAppStatusBarStyle: 'black',

Loading…
Cancel
Save