Skip to content

Commit 1beade2

Browse files
committed
feat: added buttons to edit/save view, made ActivityView delegate to ActivityEditor if view_id is 'editor'
1 parent 50e2c0d commit 1beade2

File tree

6 files changed

+72
-22
lines changed

6 files changed

+72
-22
lines changed

src/components/SelectableVisualization.vue

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<template lang="pug">
22
div
33
h5 {{ visualizations[type].title }}
4-
div
5-
b-dropdown.vis-style-dropdown-btn(size="sm" variant="outline-secondary")
4+
div(v-if="editable").vis-style-dropdown-btn
5+
b-dropdown.mr-1(size="sm" variant="outline-secondary")
66
template(v-slot:button-content)
77
icon(name="cog")
88
b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
99
| {{ visualizations[t].title }}
10+
b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
11+
icon(name="times")
1012

1113
div(v-if="type == 'top_apps'")
1214
aw-summary(:fields="$store.state.activity.window.top_apps",
@@ -65,13 +67,16 @@ div
6567
top: 0.8em;
6668
right: 0.8em;
6769
68-
> .btn {
70+
.btn {
6971
border: 0px;
7072
}
7173
}
7274
</style>
7375

7476
<script>
77+
import 'vue-awesome/icons/cog';
78+
import 'vue-awesome/icons/times';
79+
7580
import { split_by_hour_into_data } from '~/util/transforms';
7681
7782
// TODO: Move this somewhere else
@@ -88,6 +93,7 @@ export default {
8893
props: {
8994
id: Number,
9095
type: String,
96+
editable: { type: Boolean, default: true },
9197
},
9298
data: function () {
9399
return {

src/route.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ const Home = () => import('./views/Home.vue');
66
// Activity views for desktop
77
const Activity = () => import('./views/activity/Activity.vue');
88
const ActivityView = () => import('./views/activity/ActivityView.vue');
9-
const ActivityEditor = () => import('./views/activity/ActivityEditor.vue');
109

1110
const Buckets = () => import('./views/Buckets.vue');
1211
const Bucket = () => import('./views/Bucket.vue');
@@ -33,12 +32,6 @@ const router = new VueRouter({
3332
component: ActivityView,
3433
props: true,
3534
},
36-
{
37-
path: 'editor',
38-
meta: { subview: 'editor' },
39-
name: 'activity-editor',
40-
component: ActivityEditor,
41-
},
4235
// Unspecified should redirect to summary view is the summary view
4336
// (needs to be last since otherwise it'll always match first)
4437
{

src/store/modules/settings.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@ const defaultViews = [
3535
{ type: 'top_urls', size: 3 },
3636
],
3737
},
38+
{
39+
id: 'editor',
40+
name: 'Editor',
41+
elements: [
42+
// TODO: Migrate ActivityEditor to ActivityView
43+
],
44+
},
3845
];
3946

4047
// initial state
@@ -101,6 +108,9 @@ const mutations = {
101108
addVisualization(state, { view_id, type }) {
102109
state.views.find(v => v.id == view_id).elements.push({ type: type });
103110
},
111+
removeVisualization(state, { view_id, el_id }) {
112+
state.views.find(v => v.id == view_id).elements.splice(el_id, 1);
113+
},
104114
loadClasses(state, classes) {
105115
let i = 0;
106116
state.classes = classes.map(c => Object.assign(c, { id: i++ }));

src/views/activity/Activity.vue

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,26 @@ div
3838

3939
ul.row.nav.nav-tabs.mt-3.px-3
4040
li.nav-item(v-for="view in views")
41-
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}")
41+
router-link.nav-link(:to="{ name: 'activity-view', params: {...$route.params, view_id: view.id}}" :class="{'router-link-exact-active': currentView.id == view.id}")
4242
h6 {{view.name}}
43-
li.nav-item
44-
router-link.nav-link(:to="{ name: 'activity-editor', params: $route.params }")
45-
h6 Editor
43+
4644
li.nav-item(style="margin-left: auto")
4745
a.nav-link(@click="addView")
4846
h6
4947
icon(name="plus")
50-
span New view
48+
span.d-none.d-md-inline
49+
| New view
5150

5251
div
5352
router-view
5453

5554
div
55+
hr
5656
h5 Options
5757

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

6363
aw-devonly
@@ -110,6 +110,9 @@ import 'vue-awesome/icons/arrow-left';
110110
import 'vue-awesome/icons/arrow-right';
111111
import 'vue-awesome/icons/sync';
112112
import 'vue-awesome/icons/plus';
113+
import 'vue-awesome/icons/edit';
114+
import 'vue-awesome/icons/times';
115+
import 'vue-awesome/icons/save';
113116
114117
export default {
115118
name: 'Activity',
@@ -138,6 +141,9 @@ export default {
138141
views: function () {
139142
return this.$store.state.settings.views;
140143
},
144+
currentView: function () {
145+
return this.views.find(v => v.id == this.$route.params.view_id) || this.views[0];
146+
},
141147
_date: function () {
142148
return this.date || get_today();
143149
},
@@ -210,6 +216,7 @@ export default {
210216
methods: {
211217
addView: function () {
212218
// TODO: Open modal to ask for options like id, and name
219+
// FIXME: view_id is not guaranteed to be unique
213220
this.$store.commit('settings/addView', {
214221
view_id: this.$store.state.settings.views.length + 1,
215222
});

src/views/activity/ActivityEditor.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ div.mt-3
3636
import moment from 'moment';
3737
3838
export default {
39-
name: 'Activity',
39+
name: 'ActivityEditor',
4040
props: {
4141
periodLength: {
4242
type: String,

src/views/activity/ActivityView.vue

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,46 @@
11
<template lang="pug">
22
div(v-if="view")
3-
div.row.mb-4
3+
div(v-if="view.id == 'editor'")
4+
ActivityEditor
5+
6+
div.row
47
div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
5-
aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange")
8+
aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
9+
10+
div.col-md-6.col-lg-4.p-3(v-if="editing")
11+
b-button(@click="addVisualization" variant="outline-dark" block size="lg")
12+
icon(name="plus")
13+
span Add visualization
614

7-
b-button(@click="addVisualization")
8-
icon(name="plus")
9-
span Add visualization to view
15+
div.d-flex.flex-row-reverse.mt-2
16+
div(v-if="editing")
17+
b-button(variant="success" @click="save(); editing = !editing;")
18+
icon(name="save")
19+
span Save
20+
b-button.ml-2(variant="outline-dark" @click="cancel(); editing = !editing;")
21+
icon(name="times")
22+
span Cancel
23+
b-button(v-else variant="outline-dark" size="sm" @click="editing = !editing")
24+
icon(name="edit")
25+
span Edit view
1026
</template>
1127

1228
<script>
29+
import ActivityEditor from '~/views/activity/ActivityEditor';
30+
1331
export default {
1432
name: 'ActivityView',
33+
components: { ActivityEditor: ActivityEditor },
1534
props: {
1635
view_id: { type: String, default: 'default' },
1736
periodLength: {
1837
type: String,
1938
default: 'day',
2039
},
2140
},
41+
data() {
42+
return { editing: false };
43+
},
2244
computed: {
2345
view: function () {
2446
if (this.view_id == 'default') {
@@ -29,6 +51,12 @@ export default {
2951
},
3052
},
3153
methods: {
54+
save() {
55+
alert('Not implemented');
56+
},
57+
cancel() {
58+
alert('Not implemented');
59+
},
3260
addVisualization: function () {
3361
const view_id =
3462
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
@@ -39,6 +67,12 @@ export default {
3967
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
4068
await this.$store.commit('settings/editView', { view_id: view_id, el_id: id, type });
4169
},
70+
async onRemove(id) {
71+
console.log('rem');
72+
const view_id =
73+
this.view_id == 'default' ? this.$store.state.settings.views[0].id : this.view_id;
74+
await this.$store.commit('settings/removeVisualization', { view_id: view_id, el_id: id });
75+
},
4276
},
4377
};
4478
</script>

0 commit comments

Comments
 (0)