Storage improve (#6976)

* wip * wip * wip * wip * wip * Update storage.ts * wip * wip * wip * wip * Update storage.ts * Update storage.ts * wip * wip * wip * wip * wip * wip * wip * Update storage.ts * wip * wip * wip * wip * 🍕 * wip * wip * wip * wip * wip * wip * Update deck-storage.ts * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * Update store.ts * wip * wip * wip * wip * Update init.ts * wip * wip * Update pizzax.ts * wip * wip * Update timeline.vue * Update init.ts * wip * wip * Update init.ts
2020-12-19 10:55:52 +09:00
parent 57d0c19a98
commit 43930e6a84
146 changed files with 1458 additions and 1519 deletions
--- a/src/client/ui/deck/antenna-column.vue
+++ b/src/client/ui/deck/antenna-column.vue
@@ -14,6 +14,7 @@ import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
+import { updateColumn } from './deck-store';

 export default defineComponent({
 	components: {
@@ -73,8 +74,9 @@ export default defineComponent({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			this.column.antennaId = antenna.id;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+			updateColumn(this.column.id, {
+				antennaId: antenna.id
+			});
 		},

 		focus() {
--- a/src/client/ui/deck/column.vue
+++ b/src/client/ui/deck/column.vue
@@ -35,6 +35,7 @@ import { defineComponent } from 'vue';
 import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 import * as os from '@/os';
+import { renameColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from './deck-store';

 export default defineComponent({
 	props: {
@@ -145,50 +146,50 @@ export default defineComponent({
 						}
 					}).then(({ canceled, result: name }) => {
 						if (canceled) return;
-						this.$store.commit('deviceUser/renameDeckColumn', { id: this.column.id, name });
+						renameColumn(this.column.id, name);
 					});
 				}
 			}, null, {
 				icon: faArrowLeft,
 				text: this.$t('_deck.swapLeft'),
 				action: () => {
-					this.$store.commit('deviceUser/swapLeftDeckColumn', this.column.id);
+					swapLeftColumn(this.column.id);
 				}
 			}, {
 				icon: faArrowRight,
 				text: this.$t('_deck.swapRight'),
 				action: () => {
-					this.$store.commit('deviceUser/swapRightDeckColumn', this.column.id);
+					swapRightColumn(this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faArrowUp,
 				text: this.$t('_deck.swapUp'),
 				action: () => {
-					this.$store.commit('deviceUser/swapUpDeckColumn', this.column.id);
+					swapUpColumn(this.column.id);
 				}
 			} : undefined, this.isStacked ? {
 				icon: faArrowDown,
 				text: this.$t('_deck.swapDown'),
 				action: () => {
-					this.$store.commit('deviceUser/swapDownDeckColumn', this.column.id);
+					swapDownColumn(this.column.id);
 				}
 			} : undefined, null, {
 				icon: faWindowRestore,
 				text: this.$t('_deck.stackLeft'),
 				action: () => {
-					this.$store.commit('deviceUser/stackLeftDeckColumn', this.column.id);
+					stackLeftColumn(this.column.id);
 				}
 			}, this.isStacked ? {
 				icon: faWindowMaximize,
 				text: this.$t('_deck.popRight'),
 				action: () => {
-					this.$store.commit('deviceUser/popRightDeckColumn', this.column.id);
+					popRightColumn(this.column.id);
 				}
 			} : undefined, null, {
 				icon: faTrashAlt,
 				text: this.$t('remove'),
 				action: () => {
-					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+					removeColumn(this.column.id);
 				}
 			}];

@@ -264,10 +265,7 @@ export default defineComponent({

 			const id = e.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
 			if (id != null && id != '') {
-				this.$store.commit('deviceUser/swapDeckColumn', {
-					a: this.column.id,
-					b: id
-				});
+				swapColumn(this.column.id, id);
 			}
 		}
 	}
--- a/src/client/ui/deck/deck-store.ts
+++ b/src/client/ui/deck/deck-store.ts
@@ -0,0 +1,223 @@
+import { markRaw } from 'vue';
+import { Storage } from '../../pizzax';
+
+type ColumnWidget = {
+	name: string;
+	id: string;
+	data: Record<string, any>;
+};
+
+type Column = {
+	id: string;
+	type: string;
+	name: string | null;
+	width: number;
+	widgets?: ColumnWidget[];
+};
+
+function copy<T>(x: T): T {
+	return JSON.parse(JSON.stringify(x));
+}
+
+export const deckStore = markRaw(new Storage('deck', {
+	columns: {
+		where: 'deviceAccount',
+		default: [] as Column[]
+	},
+	layout: {
+		where: 'deviceAccount',
+		default: [] as Column['id'][][]
+	},
+	columnAlign: {
+		where: 'deviceAccount',
+		default: 'left' as 'left' | 'right' | 'center'
+	},
+	alwaysShowMainColumn: {
+		where: 'deviceAccount',
+		default: true
+	},
+	mainColumnPlace: {
+		where: 'deviceAccount',
+		default: 'left' as 'left' | 'right'
+	},
+	navWindow: {
+		where: 'deviceAccount',
+		default: true
+	},
+}));
+
+export function addColumn(column: Column) {
+	if (column.name == undefined) column.name = null;
+	deckStore.push('columns', column);
+	deckStore.push('layout', [column.id]);
+}
+
+export function removeColumn(id: Column['id']) {
+	deckStore.set('columns', deckStore.state.columns.filter(c => c.id !== id));
+	deckStore.set('layout', deckStore.state.layout
+		.map(ids => ids.filter(_id => _id !== id))
+		.filter(ids => ids.length > 0));
+}
+
+export function swapColumn(a: Column['id'], b: Column['id']) {
+	const aX = deckStore.state.layout.findIndex(ids => ids.indexOf(a) != -1);
+	const aY = deckStore.state.layout[aX].findIndex(id => id == a);
+	const bX = deckStore.state.layout.findIndex(ids => ids.indexOf(b) != -1);
+	const bY = deckStore.state.layout[bX].findIndex(id => id == b);
+	const layout = copy(deckStore.state.layout);
+	layout[aX][aY] = b;
+	layout[bX][bY] = a;
+	deckStore.set('layout', layout);
+}
+
+export function swapLeftColumn(id: Column['id']) {
+	const layout = copy(deckStore.state.layout);
+	deckStore.state.layout.some((ids, i) => {
+		if (ids.includes(id)) {
+			const left = deckStore.state.layout[i - 1];
+			if (left) {
+				layout[i - 1] = deckStore.state.layout[i];
+				layout[i] = left;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+}
+
+export function swapRightColumn(id: Column['id']) {
+	const layout = copy(deckStore.state.layout);
+	deckStore.state.layout.some((ids, i) => {
+		if (ids.includes(id)) {
+			const right = deckStore.state.layout[i + 1];
+			if (right) {
+				layout[i + 1] = deckStore.state.layout[i];
+				layout[i] = right;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+}
+
+export function swapUpColumn(id: Column['id']) {
+	const layout = copy(deckStore.state.layout);
+	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	const ids = copy(deckStore.state.layout[idsIndex]);
+	ids.some((x, i) => {
+		if (x === id) {
+			const up = ids[i - 1];
+			if (up) {
+				ids[i - 1] = id;
+				ids[i] = up;
+
+				layout[idsIndex] = ids;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+}
+
+export function swapDownColumn(id: Column['id']) {
+	const layout = copy(deckStore.state.layout);
+	const idsIndex = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	const ids = copy(deckStore.state.layout[idsIndex]);
+	ids.some((x, i) => {
+		if (x === id) {
+			const down = ids[i + 1];
+			if (down) {
+				ids[i + 1] = id;
+				ids[i] = down;
+
+				layout[idsIndex] = ids;
+				deckStore.set('layout', layout);
+			}
+			return true;
+		}
+	});
+}
+
+export function stackLeftColumn(id: Column['id']) {
+	let layout = copy(deckStore.state.layout);
+	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	layout[i - 1].push(id);
+	layout = layout.filter(ids => ids.length > 0);
+	deckStore.set('layout', layout);
+}
+
+export function popRightColumn(id: Column['id']) {
+	let layout = copy(deckStore.state.layout);
+	const i = deckStore.state.layout.findIndex(ids => ids.includes(id));
+	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	layout.splice(i + 1, 0, [id]);
+	layout = layout.filter(ids => ids.length > 0);
+	deckStore.set('layout', layout);
+}
+
+export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = copy(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	if (column.widgets == null) column.widgets = [];
+	column.widgets.unshift(widget);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+}
+
+export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = copy(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = column.widgets.filter(w => w.id != widget.id);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+}
+
+export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = copy(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = widgets;
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+}
+
+export function updateColumnWidget(id: Column['id'], widgetId: string, data: any) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = copy(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.widgets = column.widgets.map(w => w.id === widgetId ? {
+		...w,
+		data: data
+	} : w);
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+}
+
+export function renameColumn(id: Column['id'], name: Column['name']) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const column = copy(deckStore.state.columns[columnIndex]);
+	if (column == null) return;
+	column.name = name;
+	columns[columnIndex] = column;
+	deckStore.set('columns', columns);
+}
+
+export function updateColumn(id: Column['id'], column: Partial<Column>) {
+	const columns = copy(deckStore.state.columns);
+	const columnIndex = deckStore.state.columns.findIndex(c => c.id === id);
+	const currentColumn = copy(deckStore.state.columns[columnIndex]);
+	if (currentColumn == null) return;
+	for (const [k, v] of Object.entries(column)) {
+		currentColumn[k] = v;
+	}
+	columns[columnIndex] = currentColumn;
+	deckStore.set('columns', columns);
+}
--- a/src/client/ui/deck/list-column.vue
+++ b/src/client/ui/deck/list-column.vue
@@ -14,6 +14,7 @@ import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
+import { updateColumn } from './deck-store';

 export default defineComponent({
 	components: {
@@ -73,8 +74,9 @@ export default defineComponent({
 				showCancelButton: true
 			});
 			if (canceled) return;
-			this.column.listId = list.id;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+			updateColumn(this.column.id, {
+				listId: list.id
+			});
 		},

 		focus() {
--- a/src/client/ui/deck/notifications-column.vue
+++ b/src/client/ui/deck/notifications-column.vue
@@ -13,6 +13,7 @@ import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '@/components/notifications.vue';
 import * as os from '@/os';
+import { updateColumn } from './deck-store';

 export default defineComponent({
 	components: {
@@ -48,8 +49,7 @@ export default defineComponent({
 				}, {
 					done: async (res) => {
 						const { includingTypes } = res;
-						this.$store.commit('deviceUser/updateDeckColumn', {
-							...this.column,
+						updateColumn(this.column.id, {
 							includingTypes: includingTypes
 						});
 					},
--- a/src/client/ui/deck/tl-column.vue
+++ b/src/client/ui/deck/tl-column.vue
@@ -25,6 +25,7 @@ import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@
 import XColumn from './column.vue';
 import XTimeline from '@/components/timeline.vue';
 import * as os from '@/os';
+import { removeColumn, updateColumn } from './deck-store';

 export default defineComponent({
 	components: {
@@ -71,9 +72,9 @@ export default defineComponent({
 		if (this.column.tl == null) {
 			this.setType();
 		} else {
-			this.disabled = !this.$store.state.i.isModerator && !this.$store.state.i.isAdmin && (
-				this.$store.state.instance.meta.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
-				this.$store.state.instance.meta.disableGlobalTimeline && ['global'].includes(this.column.tl));
+			this.disabled = !this.$i.isModerator && !this.$i.isAdmin && (
+				this.$instance.disableLocalTimeline && ['local', 'social'].includes(this.column.tl) ||
+				this.$instance.disableGlobalTimeline && ['global'].includes(this.column.tl));
 		}
 	},

@@ -96,12 +97,13 @@ export default defineComponent({
 			});
 			if (canceled) {
 				if (this.column.tl == null) {
-					this.$store.commit('deviceUser/removeDeckColumn', this.column.id);
+					removeColumn(this.column.id);
 				}
 				return;
 			}
-			this.column.tl = src;
-			this.$store.commit('deviceUser/updateDeckColumn', this.column);
+			updateColumn(this.column.id, {
+				tl: src
+			});
 		},

 		queueUpdated(q) {
--- a/src/client/ui/deck/widgets-column.vue
+++ b/src/client/ui/deck/widgets-column.vue
@@ -20,12 +20,12 @@
 				<template #item="{element}">
 					<div class="customize-container" @click="widgetFunc(element.id)">
 						<button class="remove _button" @click.prevent.stop="removeWidget(element)"><Fa :icon="faTimes"/></button>
-						<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column"/>
+						<component :is="`mkw-${element.name}`" :widget="element" :setting-callback="setting => settings[element.id] = setting" :column="column" @updateProps="saveWidget(element.id, $event)"/>
 					</div>
 				</template>
 			</XDraggable>
 		</template>
-		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column"/>
+		<component v-else class="widget" v-for="widget in column.widgets" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" :column="column" @updateProps="saveWidget(element.id, $event)"/>
 	</div>
 </XColumn>
 </template>
@@ -38,6 +38,7 @@ import MkSelect from '@/components/ui/select.vue';
 import MkButton from '@/components/ui/button.vue';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
+import { addColumnWidget, removeColumnWidget, setColumnWidgets, updateColumnWidget } from './deck-store';

 export default defineComponent({
 	components: {
@@ -75,10 +76,7 @@ export default defineComponent({
 				return this.column.widgets;
 			},
 			set(value) {
-				this.$store.commit('deviceUser/setDeckWidgets', {
-					id: this.column.id,
-					widgets: value
-				});
+				setColumnWidgets(this.column.id, value);
 			}
 		}
 	},
@@ -101,24 +99,22 @@ export default defineComponent({
 		addWidget() {
 			if (this.widgetAdderSelected == null) return;

-			this.$store.commit('deviceUser/addDeckWidget', {
-				id: this.column.id,
-				widget: {
-					name: this.widgetAdderSelected,
-					id: uuid(),
-					data: {}
-				}
+			addColumnWidget(this.column.id, {
+				name: this.widgetAdderSelected,
+				id: uuid(),
+				data: {}
 			});

 			this.widgetAdderSelected = null;
 		},

 		removeWidget(widget) {
-			this.$store.commit('deviceUser/removeDeckWidget', {
-				id: this.column.id,
-				widget
-			});
+			removeColumnWidget(this.column.id, widget);
 		},
+
+		saveWidget(id, data) {
+			updateColumnWidget(this.column.id, id, data);
+		}
 	}
 });
 </script>