stash
This commit is contained in:
parent
9381d229c5
commit
297ad7bd99
12 changed files with 121 additions and 40 deletions
|
@ -6,14 +6,7 @@
|
|||
<a class="sidebar-toggle d-flex">
|
||||
<i class="hamburger align-self-center"></i>
|
||||
</a>
|
||||
<form class="d-none d-sm-inline-block">
|
||||
<div class="input-group input-group-navbar">
|
||||
<input type="text" class="form-control" placeholder="Search…" aria-label="Search">
|
||||
<button class="btn" type="button">
|
||||
<b-icon-search class="bi-valign-middle"></b-icon-search>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<SearchBox/>
|
||||
<div class="navbar-collapse collapse">
|
||||
<ul class="navbar-nav navbar-align">
|
||||
<Notifications :notifications="notifications"/>
|
||||
|
@ -30,32 +23,26 @@
|
|||
|
||||
<script>
|
||||
import {mapGetters, mapMutations, mapState} from 'vuex';
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
import Notifications from "@/components/Notifications.vue";
|
||||
import Messages from "@/components/Messages.vue";
|
||||
import Footer from "@/components/Footer.vue";
|
||||
import Sidebar from "@/components/Sidebar.vue";
|
||||
import UserDropdown from "@/components/UserDropdown.vue";
|
||||
import SearchBox from "@/components/SearchBox.vue";
|
||||
|
||||
export default {
|
||||
name: 'BaseLayout',
|
||||
components: {
|
||||
SearchBox,
|
||||
UserDropdown,
|
||||
Sidebar,
|
||||
Footer,
|
||||
Messages,
|
||||
Notifications,
|
||||
...BIcons
|
||||
Notifications
|
||||
},
|
||||
computed: {
|
||||
...mapState(['messages']),
|
||||
...mapGetters(['notifications']),
|
||||
username() {
|
||||
return this.$route.params.username
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout'])
|
||||
...mapGetters(['notifications'])
|
||||
},
|
||||
async mounted() {
|
||||
}
|
||||
|
|
|
@ -82,7 +82,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapMutations} from 'vuex';
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
|
||||
export default {
|
||||
|
|
44
frontend/src/components/SearchBox.vue
Normal file
44
frontend/src/components/SearchBox.vue
Normal file
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<form class="d-none d-sm-inline-block">
|
||||
<div class="input-group input-group-navbar">
|
||||
<input type="text" class="form-control" placeholder="Search…" aria-label="Search" v-model="query" id="searchText">
|
||||
<button class="btn" type="button" @click.prevent="search">
|
||||
<b-icon-search class="bi-valign-middle"></b-icon-search>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
|
||||
export default {
|
||||
name: "SearchBox",
|
||||
components: {
|
||||
...BIcons
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
search() {
|
||||
if(this.query.length > 0)
|
||||
this.$router.push("/search/" + encodeURIComponent(this.query));
|
||||
else
|
||||
document.getElementById("searchText").focus();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.$route)
|
||||
console.log(this.$route.params.query)
|
||||
this.query = decodeURIComponent(this.$route.params.query || encodeURIComponent(""));
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
|
@ -26,9 +26,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
|
||||
export default {
|
||||
name: "Sidebar"
|
||||
name: "Sidebar",
|
||||
components: {
|
||||
...BIcons
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
<a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#"
|
||||
data-toggle="dropdown">
|
||||
<!--<img src="/static/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
|
||||
alt="Charles Hall"/>-->
|
||||
<img src="/assets/img/avatars/avatar.png" class="avatar img-fluid rounded mr-1"
|
||||
alt="Charles Hall"/>
|
||||
<span class="text-dark">
|
||||
<!--{{ request.user.username }}-->
|
||||
{{ username }}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
|
@ -32,12 +32,22 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import Messages from "@/components/Messages.vue";
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
import {mapMutations} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "UserDropdown",
|
||||
components: {Messages}
|
||||
components: {
|
||||
...BIcons
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['logout'])
|
||||
},
|
||||
computed: {
|
||||
username() {
|
||||
return this.$route.params.username
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
@ -7,6 +7,7 @@ import Profile from '@/views/Profile.vue';
|
|||
import Settings from '@/views/Settings.vue';
|
||||
import Inventory from '@/views/Inventory.vue';
|
||||
import Friends from "@/views/Friends.vue";
|
||||
import Search from "@/views/Search.vue";
|
||||
import InventoryNew from "@/views/InventoryNew.vue";
|
||||
import InventoryEdit from "@/views/InventoryEdit.vue";
|
||||
import InventoryDetail from "@/views/InventoryDetail.vue";
|
||||
|
@ -21,6 +22,7 @@ const routes = [
|
|||
{path: '/inventory/:id/edit', component: InventoryEdit, meta: {requiresAuth: true}},
|
||||
{path: '/inventory/new', component: InventoryNew, meta: {requiresAuth: true}},
|
||||
{path: '/friends', component: Friends, meta: {requiresAuth: true}},
|
||||
{path: '/search/:query', component: Search, meta: {requiresAuth: true}},
|
||||
{path: '/login', component: Login, meta: {requiresAuth: false}},
|
||||
{path: '/register', component: Register, meta: {requiresAuth: false}},
|
||||
]
|
||||
|
|
|
@ -84,7 +84,6 @@ export default createStore({
|
|||
const j = await dispatch('apiLocalGet', {target: '/auth/keys/'})
|
||||
const k = j.key
|
||||
commit('setKey', k)
|
||||
await router.push({path: '/'});
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<main class="content">
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<main class="content">
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BaseLayout>
|
||||
<main class="content">
|
||||
|
|
|
@ -66,6 +66,7 @@
|
|||
|
||||
<script>
|
||||
import {mapActions, mapMutations} from 'vuex';
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
|
@ -82,7 +83,13 @@ export default {
|
|||
...mapMutations(['setRemember']),
|
||||
async do_login(e) {
|
||||
e.preventDefault();
|
||||
if (!await this.login({username: this.username, password: this.password, remember: this.remember})) {
|
||||
if (await this.login({username: this.username, password: this.password, remember: this.remember})) {
|
||||
if (this.$route.query.redirect) {
|
||||
await router.push({path: this.$route.query.redirect});
|
||||
} else {
|
||||
await router.push({path: '/'});
|
||||
}
|
||||
} else {
|
||||
this.msg = 'Invalid username or password';
|
||||
}
|
||||
|
||||
|
|
41
frontend/src/views/Search.vue
Normal file
41
frontend/src/views/Search.vue
Normal file
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<BaseLayout>
|
||||
<main class="content">
|
||||
<div class="container-fluid p-0">
|
||||
<h1 class="h3 mb-3">Blank Page</h1>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">Empty card</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="logo">
|
||||
<img src="/src/assets/icons/toolshed-48x48.png" alt="Toolshed logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapMutations} from 'vuex';
|
||||
import * as BIcons from "bootstrap-icons-vue";
|
||||
import BaseLayout from "@/components/BaseLayout.vue";
|
||||
|
||||
export default {
|
||||
name: 'Search',
|
||||
components: {
|
||||
...BIcons,
|
||||
BaseLayout
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
Loading…
Reference in a new issue