Refactored/simplified UI code for entities management

This commit is contained in:
Fabio Manganiello 2022-05-01 15:34:15 +02:00
parent 8d91fec771
commit f760d44224
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
6 changed files with 195 additions and 101 deletions

View file

@ -1,62 +1,30 @@
<template> <template>
<div class="row item entity"> <div class="row item entity-container">
<div class="status-container">
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
<i class="fas fa-circle-exclamation error" v-else-if="error" />
<Icon v-bind="value.meta?.icon || {}" v-else />
</div>
<div class="component-container">
<component :is="component" <component :is="component"
:value="value" :value="value"
@input="$emit('input', $event)"
:loading="loading" :loading="loading"
:error="error || value?.reachable == false"
@input="$emit('input', $event)"
@loading="$emit('loading', $event)" @loading="$emit('loading', $event)"
/> />
</div> </div>
</div>
</template> </template>
<script> <script>
import { defineAsyncComponent } from 'vue' import { defineAsyncComponent } from 'vue'
import Utils from "@/Utils" import EntityMixin from "./EntityMixin"
import Icon from "@/components/elements/Icon";
export default { export default {
name: "Entity", name: "Entity",
components: {Icon}, mixins: [EntityMixin],
mixins: [Utils],
emits: ['input', 'loading'], emits: ['input', 'loading'],
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
value: {
type: Object,
required: true,
},
},
data() { data() {
return { return {
component: null, component: null,
modalVisible: false,
} }
}, },
computed: {
type() {
let entityType = (this.value.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
mounted() { mounted() {
if (this.type !== 'Entity') if (this.type !== 'Entity')
this.component = defineAsyncComponent( this.component = defineAsyncComponent(
@ -67,42 +35,11 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "vars"; @import "common";
.entity { .entity-container {
width: 100%; width: 100%;
display: table;
.status-container {
width: 2.5em;
height: 1.5em;
display: table-cell;
vertical-align: middle;
position: relative; position: relative;
padding: 0 !important;
.loading {
position: absolute;
bottom: 0;
transform: translate(50%, -50%);
width: 1em;
height: 1em;
}
.error {
color: $error-fg;
margin-left: .5em;
}
}
.icon-container,
.component-container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.component-container {
width: calc(100% - #{$icon-container-size});
}
} }
</style> </style>

View file

@ -0,0 +1,71 @@
<template>
<div class="entity-icon-container">
<img src="@/assets/img/spinner.gif" class="loading" v-if="loading">
<i class="fas fa-circle-exclamation error" v-else-if="error" />
<Icon v-bind="icon" v-else />
</div>
</template>
<script>
import Icon from "@/components/elements/Icon";
export default {
name: "EntityIcon",
components: {Icon},
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
icon: {
type: Object,
required: true,
},
},
data() {
return {
component: null,
modalVisible: false,
}
},
computed: {
type() {
let entityType = (this.entity.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
}
</script>
<style lang="scss" scoped>
@import "vars";
.entity-icon-container {
width: 2.5em;
height: 1.5em;
margin-top: 0.25em;
position: relative;
text-align: center;
.loading {
position: absolute;
bottom: 0;
transform: translate(50%, -50%);
width: 1em;
height: 1em;
}
.error {
color: $error-fg;
margin-left: .5em;
}
}
</style>

View file

@ -0,0 +1,38 @@
<script>
import Utils from "@/Utils"
export default {
name: "EntityMixin",
mixins: [Utils],
emits: ['input'],
props: {
loading: {
type: Boolean,
default: false,
},
error: {
type: Boolean,
default: false,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
modalVisible: false,
}
},
computed: {
type() {
let entityType = (this.value.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
}
</script>

View file

@ -78,7 +78,7 @@
<div v-for="value, attr in entity.data || {}" :key="attr"> <div v-for="value, attr in entity.data || {}" :key="attr">
<div class="table-row" v-if="value != null"> <div class="table-row" v-if="value != null">
<div class="title" v-text="attr" /> <div class="title" v-text="prettify(attr)" />
<div class="value" v-text="'' + value" /> <div class="value" v-text="'' + value" />
</div> </div>
</div> </div>

View file

@ -1,6 +1,12 @@
<template> <template>
<div class="switch-container"> <div class="entity switch-container">
<div class="col-10 label"> <div class="head">
<div class="col-1 icon">
<EntityIcon :icon="value.meta?.icon || {}"
:loading="loading" :error="error" />
</div>
<div class="col-9 label">
<div class="name" v-text="value.name" /> <div class="name" v-text="value.name" />
</div> </div>
@ -9,28 +15,18 @@
@click.stop :disabled="loading || value.is_read_only" /> @click.stop :disabled="loading || value.is_read_only" />
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import ToggleSwitch from "@/components/elements/ToggleSwitch" import ToggleSwitch from "@/components/elements/ToggleSwitch"
import Utils from "@/Utils" import EntityIcon from "./EntityIcon"
import EntityMixin from "./EntityMixin"
export default { export default {
name: 'Switch', name: 'Switch',
components: {ToggleSwitch}, components: {ToggleSwitch, EntityIcon},
emits: ['input'], mixins: [EntityMixin],
mixins: [Utils],
props: {
value: {
type: Object,
required: true,
},
loading: {
type: Boolean,
default: false,
},
},
methods: { methods: {
async toggle(event) { async toggle(event) {
@ -51,7 +47,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "vars"; @import "common";
.switch-container { .switch-container {
.switch { .switch {

View file

@ -0,0 +1,52 @@
@import "vars";
.entity {
width: 100%;
display: flex;
flex-direction: column;
.head {
padding: 0.75em 0.25em;
.label {
margin-top: 0.25em;
}
&.expanded {
background: $selected-bg;
font-weight: bold;
}
.pull-right {
display: inline-flex;
align-items: center;
direction: rtl;
padding-right: 0.5em;
:deep(.power-switch) {
margin-top: 0.25em;
}
}
}
.body {
@extend .fade-in;
display: flex;
flex-direction: column;
padding: 0.5em;
background: linear-gradient(0deg, $default-bg-5, $default-bg-2);
border-top: 1px solid $border-color-1;
box-shadow: $border-shadow-bottom;
}
button {
height: 2em;
background: none;
border: none;
padding: 0 0 0 1em;
&:hover {
color: $default-hover-fg;
}
}
}