feature to add image entity (db2d477f) · Commits · Дмитрий Малюгин / NoteDiary

components.d.ts

+4 −0

Original line number	Diff line number	Diff line
		@@ -12,6 +12,9 @@ declare module 'vue' {
		CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default']
		Divider: typeof import('primevue/divider')['default']
		Drawer: typeof import('primevue/drawer')['default']
		EditImageEntityMenu: typeof import('./src/components/EditImageEntityMenu.vue')['default']
		EditTextEntityMenu: typeof import('./src/components/EditTextEntityMenu.vue')['default']
		ImageItem: typeof import('./src/components/entities/ImageItem.vue')['default']
		LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
		RouterLink: typeof import('vue-router')['RouterLink']
		RouterView: typeof import('vue-router')['RouterView']
		@@ -19,6 +22,7 @@ declare module 'vue' {
		Splitter: typeof import('primevue/splitter')['default']
		SplitterPanel: typeof import('primevue/splitterpanel')['default']
		TextItem: typeof import('./src/components/entities/TextItem.vue')['default']
		Toast: typeof import('primevue/toast')['default']
		Tree: typeof import('primevue/tree')['default']
		UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
		}

package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -14,6 +14,7 @@
		},
		"dependencies": {
		"@primevue/themes": "^4.0.4",
		"@vueuse/components": "^10.11.1",
		"@vueuse/core": "^10.11.0",
		"@vueuse/integrations": "^10.11.0",
		"pinia": "^2.1.7",

src/components/CreateEntityMenu.vue

+36 −4

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import { v4 as uuidv4 } from 'uuid';
		import { useFileDialog } from '@vueuse/core';
		import { useInterfaceStore } from '@/stores/interface';

		const emit = defineEmits(['addEntity']);

		const {
		files,
		open: uploadFile,
		reset,
		onChange
		} = useFileDialog({
		accept: 'image/*'
		});

		const addImage = (files: FileList) => {
		console.log('files', files);

		const file = files[0];
		const reader = new FileReader();
		reader.readAsDataURL(file);
		reader.addEventListener('load', () => {
		const url = reader.result;
		emit('addEntity', {
		type: 'image',
		uuid: uuidv4(),
		url,
		position: 'left',
		height: 300
		});
		});
		};
		onChange((files) => {
		if (files && files?.length > 0) {
		addImage(files);
		}
		});

		const speedDialItems = ref([
		{
		label: 'Text',
		@@ -19,10 +53,8 @@ const speedDialItems = ref([
		label: 'Image',
		icon: 'pi pi-image',
		command: () => {
		emit('addEntity', {
		type: 'image',
		uuid: uuidv4()
		});
		uploadFile();
		console.log('uploadFile finished');
		}
		},
		{

src/components/EditImageEntityMenu.vue

0 → 100644

+189 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import { changeOrderHomeEntity, deleteEntity } from '@/helpers';
		import type { IImage } from '@/interfaces/entities';
		import { useDataStore } from '@/stores/data';
		import type { IEntity } from '@/interfaces/environment';

		interface Props {
		entityData: IImage;
		isResizable: boolean;
		}

		const props = defineProps<Props>();

		const emit = defineEmits([
		'deleteEntity',
		'addTitle',
		'removeTitle',
		'editPosition',
		'toggleIsResizable'
		]);

		const isResizable = computed(() => props.isResizable);
		const position = computed(() => props.entityData.position);

		const speedDialState = computed(() => {
		const state = [];
		if (!props.entityData?.title && props.entityData?.title !== '') {
		state.push({
		label: 'Add title',
		icon: 'pi pi-pencil',
		command: () => emit('addTitle')
		});
		}
		if (props.entityData?.title \|\| props.entityData?.title === '') {
		state.push({
		label: 'Remove title',
		icon: 'pi pi-trash',
		command: () => emit('removeTitle')
		});
		}
		if (position.value !== 'right') {
		state.push({
		label: !isResizable.value ? 'Resize' : 'Stop resize',
		icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
		command: () => emit('toggleIsResizable')
		});
		}
		state.push({
		label: 'Delete',
		icon: 'pi pi-trash',
		command: () => deleteEntity(props.entityData.uuid)
		});
		return state;
		});

		const speedDialMove = computed(() => {
		const state = [];
		switch (position.value) {
		case 'left':
		state.push({
		label: 'Move to center',
		icon: 'pi pi-align-center',
		command: () => emit('editPosition', 'center')
		});
		state.push({
		label: 'Move right',
		icon: 'pi pi-arrow-right',
		command: () => emit('editPosition', 'right')
		});
		break;
		case 'center':
		state.push({
		label: 'Move left',
		icon: 'pi pi-arrow-left',
		command: () => emit('editPosition', 'left')
		});
		state.push({
		label: 'Move right',
		icon: 'pi pi-arrow-right',
		command: () => emit('editPosition', 'right')
		});
		break;
		case 'right':
		state.push({
		label: 'Move left',
		icon: 'pi pi-arrow-left',
		command: () => emit('editPosition', 'left')
		});
		state.push({
		label: 'Move to center',
		icon: 'pi pi-align-center',
		command: () => emit('editPosition', 'center')
		});
		}
		const dataStore = useDataStore();
		const entities = dataStore.homeEntities;
		const entityIndex = entities.findIndex(
		(entity: IEntity) => entity.uuid === props.entityData.uuid
		);
		if (entityIndex !== 0) {
		state.push({
		label: 'Move up',
		icon: 'pi pi-arrow-up',
		command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
		});
		}
		if (entityIndex !== entities.length - 1) {
		state.push({
		label: 'Move down',
		icon: 'pi pi-arrow-down',
		command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
		});
		}
		return state;
		});
		</script>

		<template>
		<div class="relative">
		<SpeedDial
		:model="speedDialState"
		direction="right"
		pt:root:class="speedDialRoot w-4"
		class="absolute"
		>
		<template #button="{ toggleCallback }">
		<button
		class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
		@click="toggleCallback"
		>
		<i class="pi pi-pen-to-square"></i>
		</button>
		</template>
		<template #item="{ item, toggleCallback }">
		<div
		:class="[
		' flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
		{
		'text-red-400 font-semibold': item.icon.includes('trash')
		}
		]"
		@click="toggleCallback"
		>
		<span :class="item.icon" />
		<span class="text-center">
		{{ item.label }}
		</span>
		</div>
		</template>
		</SpeedDial>
		<SpeedDial
		v-if="!isResizable"
		:model="speedDialMove"
		direction="right"
		pt:root:class="speedDialRoot w-4"
		>
		<template #button="{ toggleCallback }">
		<button
		class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
		@click="toggleCallback"
		>
		<i class="pi pi-arrows-alt"></i>
		</button>
		</template>
		<template #item="{ item, toggleCallback }">
		<div
		:class="[
		'flex flex-col bg-black bg-opacity-70 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
		{
		'text-red-400 font-semibold': item.icon.includes('trash')
		}
		]"
		@click="toggleCallback"
		>
		<span :class="item.icon" />
		<span class="text-center">
		{{ item.label }}
		</span>
		</div>
		</template>
		</SpeedDial>
		</div>
		</template>

		<style>
		.speedDialRoot {
		justify-content: flex-start !important;
		}
		</style>

src/components/entities/ImageItem.vue

0 → 100644

+122 −0

Original line number	Diff line number	Diff line
		<script setup lang="ts">
		import type { IImage } from '@/interfaces/entities';
		import { deleteEntity, editEntity } from '@/helpers';
		import EditImageEntityMenu from '@/components/EditImageEntityMenu.vue';
		import { useDataStore } from '@/stores/data';
		import { useElementSize } from '@vueuse/core';

		interface Props {
		entityData: IImage;
		}
		const props = defineProps<Props>();
		const entityData = ref(props.entityData);

		const dataStore = useDataStore();
		const entities = computed(() => dataStore.homeEntities);

		const imageContainer = ref();
		const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer);

		const editTitle = () => {
		editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
		};

		const addTitle = () => {
		imageHeight.value = imageHeight.value + 48;
		console.log('imageHeight.value', imageHeight.value);
		editEntity(
		{ ...entityData.value, title: 'Title', height: imageHeight.value },
		entityData.value.uuid
		);
		entityData.value = { ...entityData.value, title: 'Title' };
		};
		const removeTitle = () => {
		const newState = { ...entityData.value };
		delete newState.title;
		imageHeight.value = imageHeight.value - 48;
		editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid);
		entityData.value = newState;
		};

		const isResizable = defineModel({ default: false });
		const toggleIsResizable = () => {
		isResizable.value = !isResizable.value;
		if (!isResizable.value) {
		editEntity(
		{ ...entityData.value, height: imageHeight.value, width: imageWidth.value },
		entityData.value.uuid
		);
		console.log(entityData.value);
		}
		};
		const editPosition = (position: 'left' \| 'center' \| 'right') => {
		entityData.value.position = position;
		editEntity({ ...entityData.value, position }, entityData.value.uuid);
		};
		</script>

		<template>
		<div
		:class="[
		'entityContainer relative flex',
		{
		'justify-start': entityData.position === 'left',
		'justify-center': entityData.position === 'center',
		'justify-end': entityData.position === 'right'
		}
		]"
		>
		<div class="flex flex-col">
		<input
		ref="input"
		v-if="entityData.title \|\| entityData.title === ''"
		type="text"
		v-model="entityData.title"
		@change="editTitle"
		placeholder="Enter title..."
		class="w-full mb-4 font-bold text-2xl pl-2"
		:style="`width: ${entityData.width}px`"
		/>
		<div
		ref="imageContainer"
		:class="[
		'inline-block overflow-hidden leading-none max-h-[700px] min-h-[100px] min-w-[100px]',
		{
		resize: isResizable,
		'min-h-[148px]': entityData.title \|\| entityData.title === ''
		}
		]"
		:style="`height: ${entityData.height}px; width: ${entityData.width}px`"
		>
		<img
		:src="entityData.url"
		:alt="`Image ${entityData?.title}` \|\| 'Image'"
		class="max-h-[700px] min-h-[100px] object-contain"
		/>
		</div>
		<div class="speedDial absolute top-16 left-2 transition-all select-none">
		<EditImageEntityMenu
		:entityData="entityData"
		:isResizable="isResizable"
		@deleteEntity="deleteEntity"
		@editPosition="editPosition"
		@addTitle="addTitle"
		@removeTitle="removeTitle"
		@toggleIsResizable="toggleIsResizable"
		/>
		</div>
		</div>
		</div>
		</template>

		<style scoped>
		.entityContainer .speedDial {
		opacity: 0;
		}
		.entityContainer:hover .speedDial {
		opacity: 100;
		}
		input::placeholder {
		font-weight: 400;
		}
		</style>