refactoring

Resolve #7779

packages/client/src/ui/universal.widgets.vue

@@ -0,0 +1,79 @@
+<template>
+<div class="efzpzdvf">
+	<XWidgets :edit="editMode" :widgets="$store.reactiveState.widgets.value" @add-widget="addWidget" @remove-widget="removeWidget" @update-widget="updateWidget" @update-widgets="updateWidgets" @exit="editMode = false"/>
+
+	<button v-if="editMode" @click="editMode = false" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-check"></i> {{ $ts.editWidgetsExit }}</button>
+	<button v-else @click="editMode = true" class="_textButton" style="font-size: 0.9em;"><i class="fas fa-pencil-alt"></i> {{ $ts.editWidgets }}</button>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, defineAsyncComponent } from 'vue';
+import XWidgets from '@/components/widgets.vue';
+import * as os from '@/os';
+
+export default defineComponent({
+	components: {
+		XWidgets
+	},
+
+	emits: ['mounted'],
+
+	data() {
+		return {
+			editMode: false,
+		};
+	},
+
+	mounted() {
+		this.$emit('mounted', this.$el);
+	},
+
+	methods: {
+		addWidget(widget) {
+			this.$store.set('widgets', [{
+				...widget,
+				place: null,
+			}, ...this.$store.state.widgets]);
+		},
+
+		removeWidget(widget) {
+			this.$store.set('widgets', this.$store.state.widgets.filter(w => w.id != widget.id));
+		},
+
+		updateWidget({ id, data }) {
+			this.$store.set('widgets', this.$store.state.widgets.map(w => w.id === id ? {
+				...w,
+				data: data
+			} : w));
+		},
+
+		updateWidgets(widgets) {
+			this.$store.set('widgets', widgets);
+		}
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.efzpzdvf {
+	position: sticky;
+	height: min-content;
+	min-height: 100vh;
+	padding: var(--margin) 0;
+	box-sizing: border-box;
+
+	> * {
+		margin: var(--margin) 0;
+		width: 300px;
+
+		&:first-child {
+			margin-top: 0;
+		}
+	}
+
+	> .add {
+		margin: 0 auto;
+	}
+}
+</style>