From 9805b99e87842337513dee46d6192db892fcfdf2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?= =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= Date: Sun, 11 Aug 2024 10:59:31 +0500 Subject: [PATCH 1/2] .idea --- .idea/.gitignore | 5 +++++ .idea/inspectionProfiles/Project_Default.xml | 6 ++++++ .idea/vcs.xml | 7 +++++++ 3 files changed, 18 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/vcs.xml diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..5cdad31 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file -- GitLab From b62a2be2540d80ee9b78e134bab7f75da6ee0136 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?= =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= Date: Tue, 13 Aug 2024 15:47:10 +0500 Subject: [PATCH 2/2] Implement backend to project --- .eslintrc.cjs | 3 - auto-imports.d.ts | 1 - components.d.ts | 4 +- src/App.vue | 1 + src/auto-imports.d.ts | 78 +++++++++++ src/components/CreateEntityMenu.vue | 27 ++-- .../editEntityMenus/text/MoveMenu.vue | 76 +++++++++++ .../editEntityMenus/text/StateMenu.vue | 123 ++++++++++++++++++ src/components/entities/ImageItem.vue | 44 ++++--- src/components/entities/TextItem.vue | 35 +++-- src/helpers/index.ts | 49 ++++--- src/interfaces/authorization.ts | 15 ++- src/interfaces/entities.ts | 32 +++-- src/interfaces/environment.ts | 2 +- src/modules/EntityItem.vue | 7 +- src/output.css | 107 ++++++++------- src/pages/HomePage.vue | 37 ++++-- src/stores/data.ts | 13 +- src/stores/interface.ts | 8 +- src/stores/websocket.ts | 81 ++++++++++++ tsconfig.json | 15 ++- vite.config.ts | 2 +- 22 files changed, 597 insertions(+), 163 deletions(-) create mode 100644 src/auto-imports.d.ts create mode 100644 src/components/editEntityMenus/text/MoveMenu.vue create mode 100644 src/components/editEntityMenus/text/StateMenu.vue create mode 100644 src/stores/websocket.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 09dd91d..3aa42f8 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -12,7 +12,4 @@ module.exports = { parserOptions: { ecmaVersion: 'latest' }, - rules: { - "no-undef": "off", - } } diff --git a/auto-imports.d.ts b/auto-imports.d.ts index 7143989..8b9bb34 100644 --- a/auto-imports.d.ts +++ b/auto-imports.d.ts @@ -7,7 +7,6 @@ export {} declare global { const EffectScope: typeof import('vue')['EffectScope'] const [alias]: typeof import('[package-name]')['[from]'] - const [import-names]: typeof import('[package-name]')['[import-names]'] const axios: typeof import('axios')['default'] const computed: typeof import('vue')['computed'] const createApp: typeof import('vue')['createApp'] diff --git a/components.d.ts b/components.d.ts index 88454d3..213ab65 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,16 +13,16 @@ declare module 'vue' { 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'] + MoveMenu: typeof import('./src/components/editEntityMenus/text/MoveMenu.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] SpeedDial: typeof import('primevue/speeddial')['default'] Splitter: typeof import('primevue/splitter')['default'] SplitterPanel: typeof import('primevue/splitterpanel')['default'] + StateMenu: typeof import('./src/components/editEntityMenus/text/StateMenu.vue')['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'] } diff --git a/src/App.vue b/src/App.vue index f084b51..df298a2 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts new file mode 100644 index 0000000..b14a109 --- /dev/null +++ b/src/auto-imports.d.ts @@ -0,0 +1,78 @@ +/* eslint-disable */ +/* prettier-ignore */ +// @ts-nocheck +// noinspection JSUnusedGlobalSymbols +// Generated by unplugin-auto-import +export {} +declare global { + const EffectScope: typeof import('vue')['EffectScope'] + const [alias]: typeof import('[package-name]')['[from]'] + const [import-names]: typeof import('[package-name]')['[import-names]'] + const axios: typeof import('axios')['default'] + const computed: typeof import('vue')['computed'] + const createApp: typeof import('vue')['createApp'] + const customRef: typeof import('vue')['customRef'] + const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] + const defineComponent: typeof import('vue')['defineComponent'] + const effectScope: typeof import('vue')['effectScope'] + const getCurrentInstance: typeof import('vue')['getCurrentInstance'] + const getCurrentScope: typeof import('vue')['getCurrentScope'] + const h: typeof import('vue')['h'] + const inject: typeof import('vue')['inject'] + const isProxy: typeof import('vue')['isProxy'] + const isReactive: typeof import('vue')['isReactive'] + const isReadonly: typeof import('vue')['isReadonly'] + const isRef: typeof import('vue')['isRef'] + const markRaw: typeof import('vue')['markRaw'] + const nextTick: typeof import('vue')['nextTick'] + const onActivated: typeof import('vue')['onActivated'] + const onBeforeMount: typeof import('vue')['onBeforeMount'] + const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'] + const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'] + const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'] + const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'] + const onDeactivated: typeof import('vue')['onDeactivated'] + const onErrorCaptured: typeof import('vue')['onErrorCaptured'] + const onMounted: typeof import('vue')['onMounted'] + const onRenderTracked: typeof import('vue')['onRenderTracked'] + const onRenderTriggered: typeof import('vue')['onRenderTriggered'] + const onScopeDispose: typeof import('vue')['onScopeDispose'] + const onServerPrefetch: typeof import('vue')['onServerPrefetch'] + const onUnmounted: typeof import('vue')['onUnmounted'] + const onUpdated: typeof import('vue')['onUpdated'] + const provide: typeof import('vue')['provide'] + const reactive: typeof import('vue')['reactive'] + const readonly: typeof import('vue')['readonly'] + const ref: typeof import('vue')['ref'] + const resolveComponent: typeof import('vue')['resolveComponent'] + const shallowReactive: typeof import('vue')['shallowReactive'] + const shallowReadonly: typeof import('vue')['shallowReadonly'] + const shallowRef: typeof import('vue')['shallowRef'] + const toRaw: typeof import('vue')['toRaw'] + const toRef: typeof import('vue')['toRef'] + const toRefs: typeof import('vue')['toRefs'] + const toValue: typeof import('vue')['toValue'] + const triggerRef: typeof import('vue')['triggerRef'] + const unref: typeof import('vue')['unref'] + const useAttrs: typeof import('vue')['useAttrs'] + const useCssModule: typeof import('vue')['useCssModule'] + const useCssVars: typeof import('vue')['useCssVars'] + const useLink: typeof import('vue-router')['useLink'] + const useMyFetch: typeof import('@vueuse/core')['useFetch'] + const useRoute: typeof import('vue-router')['useRoute'] + const useRouter: typeof import('vue-router')['useRouter'] + const useSlots: typeof import('vue')['useSlots'] + const watch: typeof import('vue')['watch'] + const watchEffect: typeof import('vue')['watchEffect'] + const watchPostEffect: typeof import('vue')['watchPostEffect'] + const watchSyncEffect: typeof import('vue')['watchSyncEffect'] +} +// for type re-export +declare global { + // @ts-ignore + export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' + import('vue') + // @ts-ignore + export type { RouteLocationRaw } from 'vue-router' + import('vue-router') +} diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue index 2c70aad..8d679e0 100644 --- a/src/components/CreateEntityMenu.vue +++ b/src/components/CreateEntityMenu.vue @@ -19,15 +19,17 @@ const addImage = (files: FileList) => { const file = files[0]; const reader = new FileReader(); + console.log('file', file, 'type: ', typeof file); reader.readAsDataURL(file); reader.addEventListener('load', () => { const url = reader.result; + console.log('url length: ', url.length); emit('addEntity', { - type: 'image', - uuid: uuidv4(), - url, - position: 'left', - height: 300 + entity_type: 'image', + entity_uuid: uuidv4(), + image_data: url, + image_position: 'left', + image_height: 300 }); }); }; @@ -43,8 +45,8 @@ const speedDialItems = ref([ icon: 'pi pi-pencil', command: () => { emit('addEntity', { - type: 'text', - uuid: uuidv4(), + entity_type: 'text', + entity_uuid: uuidv4(), text: '' }); } @@ -52,19 +54,16 @@ const speedDialItems = ref([ { label: 'Image', icon: 'pi pi-image', - command: () => { - uploadFile(); - console.log('uploadFile finished'); - } + command: () => uploadFile() }, { label: 'Table', icon: 'pi pi-table', command: () => { emit('addEntity', { - type: 'table', - uuid: uuidv4(), - columns: [ + entity_type: 'table', + entity_uuid: uuidv4(), + table_columns: [ { name: 'Name', type: 'text' diff --git a/src/components/editEntityMenus/text/MoveMenu.vue b/src/components/editEntityMenus/text/MoveMenu.vue new file mode 100644 index 0000000..c77d796 --- /dev/null +++ b/src/components/editEntityMenus/text/MoveMenu.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/components/editEntityMenus/text/StateMenu.vue b/src/components/editEntityMenus/text/StateMenu.vue new file mode 100644 index 0000000..e4eaf9a --- /dev/null +++ b/src/components/editEntityMenus/text/StateMenu.vue @@ -0,0 +1,123 @@ + + + + + diff --git a/src/components/entities/ImageItem.vue b/src/components/entities/ImageItem.vue index d9c5870..744fc26 100644 --- a/src/components/entities/ImageItem.vue +++ b/src/components/entities/ImageItem.vue @@ -10,23 +10,33 @@ interface Props { } const props = defineProps(); const entityData = ref(props.entityData); +// const imageUrl = ref(); +onMounted(() => { + console.log('entityData.value', entityData.value); -const dataStore = useDataStore(); -const entities = computed(() => dataStore.homeEntities); - + // const reader = new FileReader(); + // const imageData = new Blob(entityData.value.image_data.data, { + // type: 'image/x-icon;' + // }); + // reader.readAsDataURL(imageData); + // reader.addEventListener('load', () => { + // imageUrl.value = reader.result; + // console.log(' imageUrl.value', imageUrl.value); + // }); +}) const imageContainer = ref(); const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer); const editTitle = () => { - editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid); + editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_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, title: 'Title', image_height: imageHeight.value }, + entityData.value.entity_uuid ); entityData.value = { ...entityData.value, title: 'Title' }; }; @@ -34,7 +44,7 @@ const removeTitle = () => { const newState = { ...entityData.value }; delete newState.title; imageHeight.value = imageHeight.value - 48; - editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid); + editEntity({ ...newState, image_height: imageHeight.value }, entityData.value.entity_uuid); entityData.value = newState; }; @@ -43,15 +53,15 @@ const toggleIsResizable = () => { isResizable.value = !isResizable.value; if (!isResizable.value) { editEntity( - { ...entityData.value, height: imageHeight.value, width: imageWidth.value }, - entityData.value.uuid + { ...entityData.value, image_height: imageHeight.value, image_width: imageWidth.value }, + entityData.value.entity_uuid ); console.log(entityData.value); } }; const editPosition = (position: 'left' | 'center' | 'right') => { - entityData.value.position = position; - editEntity({ ...entityData.value, position }, entityData.value.uuid); + entityData.value.image_position = position; + editEntity({ ...entityData.value, image_position: position }, entityData.value.entity_uuid); }; @@ -60,9 +70,9 @@ const editPosition = (position: 'left' | 'center' | 'right') => { :class="[ 'entityContainer relative flex', { - 'justify-start': entityData.position === 'left', - 'justify-center': entityData.position === 'center', - 'justify-end': entityData.position === 'right' + 'justify-start': entityData.image_position === 'left', + 'justify-center': entityData.image_position === 'center', + 'justify-end': entityData.image_position === 'right' } ]" > @@ -75,7 +85,7 @@ const editPosition = (position: 'left' | 'center' | 'right') => { @change="editTitle" placeholder="Enter title..." class="w-full mb-4 font-bold text-2xl pl-2" - :style="`width: ${entityData.width}px`" + :style="`width: ${entityData.image_width}px`" />
{ 'min-h-[148px]': entityData.title || entityData.title === '' } ]" - :style="`height: ${entityData.height}px; width: ${entityData.width}px`" + :style="`height: ${entityData.image_height}px; width: ${entityData.image_width}px`" > diff --git a/src/components/entities/TextItem.vue b/src/components/entities/TextItem.vue index 45d8bd8..8c4d4dc 100644 --- a/src/components/entities/TextItem.vue +++ b/src/components/entities/TextItem.vue @@ -3,7 +3,8 @@ import type { IText } from '@/interfaces/entities'; import { useDataStore } from '@/stores/data'; import { useTextareaAutosize } from '@vueuse/core'; import { deleteEntity, editEntity } from '@/helpers'; -import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue'; +import StateMenu from '@/components/editEntityMenus/text/StateMenu.vue'; +import MoveMenu from '@/components/editEntityMenus/text/MoveMenu.vue'; interface Props { entityData: IText; @@ -12,30 +13,33 @@ const props = defineProps(); const entityData = ref(props.entityData); const addTitle = () => { - editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid); + editEntity({ ...entityData.value, title: 'Title' }, entityData.value.entity_uuid); entityData.value = { ...entityData.value, title: 'Title' }; }; const editTitle = () => { - editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid); + editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid); }; const editText = () => { - editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid); + editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid); }; const removeTitle = () => { const newState = { ...entityData.value }; - delete newState.title; - editEntity({ ...newState }, entityData.value.uuid); + newState.title = null; + editEntity({ ...newState }, entityData.value.entity_uuid); entityData.value = newState; }; -const { textarea, triggerResize } = useTextareaAutosize(); +const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' }); + +const dataStore = useDataStore(); +const homeEntities = computed(() => dataStore.homeEntities);