This commit is contained in:
@@ -21,6 +21,12 @@ todo: DASHBOARD
|
|||||||
User dash registry - user's selected dash widgets to display and the order to display them in plus any unique settings to each one
|
User dash registry - user's selected dash widgets to display and the order to display them in plus any unique settings to each one
|
||||||
Index in array is their display order
|
Index in array is their display order
|
||||||
[{id:(unique dashitem id),settings:{refreshfrequencymaybe:22,other:'setting'}},{id:(second item id)}]
|
[{id:(unique dashitem id),settings:{refreshfrequencymaybe:22,other:'setting'}},{id:(second item id)}]
|
||||||
|
dashboard host page
|
||||||
|
iterates user registry, instantiates the dash items in order desired if user is in allowed role (user may have changed roles)
|
||||||
|
handles removal, re-ordering events
|
||||||
|
dashboard selection UI
|
||||||
|
UI accessed from dashboard menu allowing user to add widgets
|
||||||
|
|
||||||
todo: wireframe / mockup dashboard item objects
|
todo: wireframe / mockup dashboard item objects
|
||||||
mockup dash items with all commonality built in, better to start mocking up now than try to design perfectly in advance and then implement
|
mockup dash items with all commonality built in, better to start mocking up now than try to design perfectly in advance and then implement
|
||||||
COMMON PROPERTIES
|
COMMON PROPERTIES
|
||||||
|
|||||||
@@ -18,19 +18,28 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<v-list>
|
<v-list>
|
||||||
|
<v-list-item @click="refresh">
|
||||||
|
<v-list-item-icon>
|
||||||
|
<v-icon>$ayiSync</v-icon>
|
||||||
|
</v-list-item-icon>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>{{ $ay.t("Refresh") }}</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item @click="$emit('dash-move-start', id)">
|
<v-list-item @click="$emit('dash-move-start', id)">
|
||||||
<v-list-item-icon>
|
<v-list-item-icon>
|
||||||
<v-icon>$ayiStepBackward</v-icon>
|
<v-icon>$ayiStepBackward</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item @click="$emit('dash-move-left', id)">
|
<v-list-item @click="$emit('dash-move-back', id)">
|
||||||
<v-list-item-icon>
|
<v-list-item-icon>
|
||||||
<v-icon>$ayiBackward</v-icon>
|
<v-icon>$ayiBackward</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item @click="$emit('dash-move-right', id)">
|
<v-list-item @click="$emit('dash-move-forward', id)">
|
||||||
<v-list-item-icon>
|
<v-list-item-icon>
|
||||||
<v-icon>$ayiForward</v-icon>
|
<v-icon>$ayiForward</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
@@ -42,7 +51,7 @@
|
|||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item @click="$emit('dash-remove', this.id)">
|
<v-list-item @click="$emit('dash-remove', id)">
|
||||||
<v-list-item-icon>
|
<v-list-item-icon>
|
||||||
<v-icon>$ayiTrashAlt</v-icon>
|
<v-icon>$ayiTrashAlt</v-icon>
|
||||||
</v-list-item-icon>
|
</v-list-item-icon>
|
||||||
@@ -50,12 +59,6 @@
|
|||||||
<v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
|
<v-list-item-title>{{ $ay.t("Delete") }}</v-list-item-title>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
</v-list-item>
|
</v-list-item>
|
||||||
|
|
||||||
<v-list-item v-for="(item, i) in items" :key="i">
|
|
||||||
<v-list-item-title @click="menuItemClick(item)">{{
|
|
||||||
item.name
|
|
||||||
}}</v-list-item-title>
|
|
||||||
</v-list-item>
|
|
||||||
</v-list>
|
</v-list>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
</v-toolbar>
|
</v-toolbar>
|
||||||
@@ -71,14 +74,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data: () => ({
|
data: () => ({}),
|
||||||
items: [
|
|
||||||
{ name: "Click Me", value: 0 },
|
|
||||||
{ name: "Click Me", value: 1 },
|
|
||||||
{ name: "Click Me", value: 2 },
|
|
||||||
{ name: "Click Me 2", value: 3 }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
props: {
|
props: {
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
@@ -88,8 +84,8 @@ export default {
|
|||||||
moreUrl: String
|
moreUrl: String
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
menuItemClick(item) {
|
refresh() {
|
||||||
console.log(item);
|
console.log("REFRESH CLICKED");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -14,6 +14,9 @@
|
|||||||
:id="'dashitem-' + i"
|
:id="'dashitem-' + i"
|
||||||
v-on:dash-remove="dashRemove"
|
v-on:dash-remove="dashRemove"
|
||||||
v-on:dash-move-start="dashMoveStart"
|
v-on:dash-move-start="dashMoveStart"
|
||||||
|
v-on:dash-move-back="dashMoveBack"
|
||||||
|
v-on:dash-move-forward="dashMoveForward"
|
||||||
|
v-on:dash-move-end="dashMoveEnd"
|
||||||
/>
|
/>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@@ -55,6 +58,15 @@ export default {
|
|||||||
dashMoveStart: function(item) {
|
dashMoveStart: function(item) {
|
||||||
console.log("home-dashboard:dashMoveStart", item);
|
console.log("home-dashboard:dashMoveStart", item);
|
||||||
},
|
},
|
||||||
|
dashMoveBack: function(item) {
|
||||||
|
console.log("home-dashboard:dashMoveBack", item);
|
||||||
|
},
|
||||||
|
dashMoveForward: function(item) {
|
||||||
|
console.log("home-dashboard:dashMoveForward", item);
|
||||||
|
},
|
||||||
|
dashMoveEnd: function(item) {
|
||||||
|
console.log("home-dashboard:dashMoveEnd", item);
|
||||||
|
},
|
||||||
dashRemove: function(item) {
|
dashRemove: function(item) {
|
||||||
console.log("home-dashboard:dashRemove", item);
|
console.log("home-dashboard:dashRemove", item);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user