Commit 668bf4e9 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

Merge branch 'feature/entityImage' into 'main' 

Entity of image

See merge request d.malygin/motion!5
parents 40075ac1 b5d7a641

components.d.ts

+5 −4
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ 
// @ts-nocheck

// Generated by unplugin-vue-components

// Read more: https://github.com/vuejs/core/pull/3399

export {};

export {}



/* prettier-ignore */

declare module 'vue' {
@@ -12,16 +12,17 @@ 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']

    Popover: typeof import('primevue/popover')['default']

    RouterLink: typeof import('vue-router')['RouterLink']

    RouterView: typeof import('vue-router')['RouterView']

    ScrollPanel: typeof import('primevue/scrollpanel')['default']

    SpeedDial: typeof import('primevue/speeddial')['default']

    Splitter: typeof import('primevue/splitter')['default']

    SplitterPanel: typeof import('primevue/splitterpanel')['default']

    Textarea: typeof import('primevue/textarea')['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/EditTextEntityMenu.vue

0 → 100644
+182 −0
Original line number Diff line number Diff line 
<script setup lang="ts">

import { changeOrderHomeEntity, deleteEntity } from '@/helpers';

import type { IText } from '@/interfaces/entities';

import { useDataStore } from '@/stores/data';

import type { IEntity } from '@/interfaces/environment';



interface Props {

  entityData: IText;

}



const props = defineProps<Props>();



const emit = defineEmits([

  'deleteEntity',

  'addTitle',

  'removeTitle'

  // 'toLeftPosition',

  // 'toCenterPosition',

  // 'toRightPosition',

  // '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')

    });

  }

  // state.push({

  //   label: !isResizable.value ? 'Resize' : 'Stop resize',

  //   icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',

  //   command: () => emit('toggleIsResizable')

  // });

  // switch (position.value) {

  //   case 'left':

  //     state.push({

  //       label: 'Move to center',

  //       icon: 'pi pi-align-center',

  //       command: () => emit('toCenterPosition')

  //     });

  //     state.push({

  //       label: 'Move to right',

  //       icon: 'pi pi-arrow-right',

  //       command: () => emit('toRightPosition')

  //     });

  //     break;

  //   case 'center':

  //     state.push({

  //       label: 'Move to left',

  //       icon: 'pi pi-arrow-left',

  //       command: () => emit('toLeftPosition')

  //     });

  //     state.push({

  //       label: 'Move to right',

  //       icon: 'pi pi-arrow-right',

  //       command: () => emit('toRightPosition')

  //     });

  //     break;

  //   case 'right':

  //     state.push({

  //       label: 'Move to left',

  //       icon: 'pi pi-arrow-left',

  //       command: () => emit('toLeftPosition')

  //     });

  //     state.push({

  //       label: 'Move to center',

  //       icon: 'pi pi-align-center',

  //       command: () => emit('toCenterPosition')

  //     });

  // }

  state.push({

    label: 'Delete',

    icon: 'pi pi-trash',

    command: () => deleteEntity(props.entityData.uuid)

  });

  return state;

});



const speedDialMove = computed(() => {

  const state = [];

  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-16 -translate-y-12"

    >

      <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 :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-16">

      <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>