Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: added buttons to edit/save view, made ActivityView delegate to …
…ActivityEditor if view_id is 'editor'
  • Loading branch information
ErikBjare committed Nov 1, 2020
1 parent 50e2c0d commit 1beade2
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 22 deletions.
12 changes: 9 additions & 3 deletions src/components/SelectableVisualization.vue
@@ -1,12 +1,14 @@
<template lang="pug">
div
h5 {{ visualizations[type].title }}
div
b-dropdown.vis-style-dropdown-btn(size="sm" variant="outline-secondary")
div(v-if="editable").vis-style-dropdown-btn
b-dropdown.mr-1(size="sm" variant="outline-secondary")
template(v-slot:button-content)
icon(name="cog")
b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
| {{ visualizations[t].title }}
b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
icon(name="times")

div(v-if="type == 'top_apps'")
aw-summary(:fields="$store.state.activity.window.top_apps",
Expand Down Expand Up @@ -65,13 +67,16 @@ div
top: 0.8em;
right: 0.8em;
> .btn {
.btn {
border: 0px;
}
}
</style>

<script>
import 'vue-awesome/icons/cog';
import 'vue-awesome/icons/times';
import { split_by_hour_into_data } from '~/util/transforms';
// TODO: Move this somewhere else
Expand All @@ -88,6 +93,7 @@ export default {
props: {
id: Number,
type: String,
editable: { type: Boolean, default: true },
},
data: function () {
return {
Expand Down
7 changes: 0 additions & 7 deletions src/route.js
Expand Up @@ -6,7 +6,6 @@ const Home = () => import('./views/Home.vue');
// Activity views for desktop
const Activity = () => import('./views/activity/Activity.vue');
const ActivityView = () => import('./views/activity/ActivityView.vue');
const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');

const Buckets = () => import('./views/Buckets.vue');
const Bucket = () => import('./views/Bucket.vue');
Expand All @@ -33,12 +32,6 @@ const router = new VueRouter({
component: ActivityView,
props: true,
},
{
path: 'editor',
meta: { subview: 'editor' },
name: 'activity-editor',
component: ActivityEditor,
},
// Unspecified should redirect to summary view is the summary view
// (needs to be last since otherwise it'll always match first)
{
Expand Down
10 changes: 10 additions & 0 deletions src/store/modules/settings.js
Expand Up @@ -35,6 +35,13 @@ const defaultViews = [
{ type: 'top_urls', size: 3 },
],
},
{
id: 'editor',
name: 'Editor',
elements: [
// TODO: Migrate ActivityEditor to ActivityView
],
},
];

// initial state
Expand Down Expand Up @@ -101,6 +108,9 @@ const mutations = {
addVisualization(state, { view_id, type }) {
state.views.find(v => v.id == view_id).elements.push({ type: type });
},
removeVisualization(state, { view_id, el_id }) {
state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
},
loadClasses(state, classes) {
let i = 0;
state.classes = classes.map(c => Object.assign(c, { id: i++ }));
Expand Down
19 changes: 13 additions & 6 deletions src/views/activity/Activity.vue
Expand Up @@ -38,26 +38,26 @@ div

ul.row.nav.nav-tabs.mt-3.px-3
li.nav-item(v-for="view in views")
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}")
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
h6 {{view.name}}
li.nav-item
router-link.nav-link(:to="{ name: 'activity-editor', params: $route.params }")
h6 Editor

li.nav-item(style="margin-left: auto")
a.nav-link(@click="addView")
h6
icon(name="plus")
span New view
span.d-none.d-md-inline
| New view

div
router-view

div
hr
h5 Options

div.row
div.col-md-6
b-form-group(label="Show category" label-cols="5" label-cols-lg="4")
b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
b-form-select(v-model="filterCategory", :options="categories")

aw-devonly
Expand Down Expand Up @@ -110,6 +110,9 @@ import 'vue-awesome/icons/arrow-left';
import 'vue-awesome/icons/arrow-right';
import 'vue-awesome/icons/sync';
import 'vue-awesome/icons/plus';
import 'vue-awesome/icons/edit';
import 'vue-awesome/icons/times';
import 'vue-awesome/icons/save';
export default {
name: 'Activity',
Expand Down Expand Up @@ -138,6 +141,9 @@ export default {
views: function () {
return this.$store.state.settings.views;
},
currentView: function () {
return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
},
_date: function () {
return this.date || get_today();
},
Expand Down Expand Up @@ -210,6 +216,7 @@ export default {
methods: {
addView: function () {
// TODO: Open modal to ask for options like id, and name
// FIXME: view_id is not guaranteed to be unique
this.$store.commit('settings/addView', {
view_id: this.$store.state.settings.views.length + 1,
});
Expand Down
2 changes: 1 addition & 1 deletion src/views/activity/ActivityEditor.vue
Expand Up @@ -36,7 +36,7 @@ div.mt-3
import moment from 'moment';
export default {
name: 'Activity',
name: 'ActivityEditor',
props: {
periodLength: {
type: String,
Expand Down
44 changes: 39 additions & 5 deletions src/views/activity/ActivityView.vue
@@ -1,24 +1,46 @@
<template lang="pug">
div(v-if="view")
div.row.mb-4
div(v-if="view.id == 'editor'")
ActivityEditor

div.row
div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")

div.col-md-6.col-lg-4.p-3(v-if="editing")
b-button(@click="addVisualization" variant="outline-dark" block size="lg")
icon(name="plus")
span Add visualization

b-button(@click="addVisualization")
icon(name="plus")
span Add visualization to view
div.d-flex.flex-row-reverse.mt-2
div(v-if="editing")
b-button(variant="success" @click="save(); editing = !editing;")
icon(name="save")
span Save
b-button.ml-2(variant="outline-dark" @click="cancel(); editing = !editing;")
icon(name="times")
span Cancel
b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
icon(name="edit")
span Edit view
</template>

<script>
import ActivityEditor from '~/views/activity/ActivityEditor';
export default {
name: 'ActivityView',
components: { ActivityEditor: ActivityEditor },
props: {
view_id: { type: String, default: 'default' },
periodLength: {
type: String,
default: 'day',
},
},
data() {
return { editing: false };
},
computed: {
view: function () {
if (this.view_id == 'default') {
Expand All @@ -29,6 +51,12 @@ export default {
},
},
methods: {
save() {
alert('Not implemented');
},
cancel() {
alert('Not implemented');
},
addVisualization: function () {
const view_id =
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
Expand All @@ -39,6 +67,12 @@ export default {
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
},
async onRemove(id) {
console.log('rem');
const view_id =
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
await this.$store.commit('settings/removeVisualization', { view_id: view_id, el_id: id });
},
},
};
</script>

0 comments on commit 1beade2

Please sign in to comment.