updates
This commit is contained in:
parent
5a63f00f51
commit
8984ddd9dc
GPG Key ID:
1688DA83D222D0B5
File diff suppressed because it is too large
Load Diff
39
package.json
39
package.json
|
|
@ -9,36 +9,37 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.7",
|
||||
"@heroicons/vue": "^2.0.13",
|
||||
"@vuepic/vue-datepicker": "^3.6.5",
|
||||
"@vueuse/core": "^9.10.0",
|
||||
"@headlessui/vue": "^1.7.13",
|
||||
"@heroicons/vue": "^2.0.18",
|
||||
"@vuepic/vue-datepicker": "^5.1.2",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"date-fns": "^2.30.0",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.omit": "^4.5.0",
|
||||
"lodash.pick": "^4.4.0",
|
||||
"lodash.set": "^4.3.2",
|
||||
"pinia": "^2.0.28",
|
||||
"sass": "^1.57.1",
|
||||
"vue": "^3.2.45",
|
||||
"vue-material-design-icons": "^5.1.2",
|
||||
"vue-router": "^4.1.6"
|
||||
"pinia": "^2.1.3",
|
||||
"sass": "^1.62.1",
|
||||
"vue": "^3.3.4",
|
||||
"vue-material-design-icons": "^5.2.0",
|
||||
"vue-router": "^4.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/forms": "^0.5.3",
|
||||
"@tailwindcss/line-clamp": "^0.4.2",
|
||||
"@tailwindcss/line-clamp": "^0.4.4",
|
||||
"@types/lodash.get": "^4.4.7",
|
||||
"@types/lodash.omit": "^4.5.7",
|
||||
"@types/lodash.pick": "^4.4.7",
|
||||
"@types/lodash.set": "^4.3.7",
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.3",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0",
|
||||
"vue-tsc": "^1.0.11"
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"postcss": "^8.4.23",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
"tailwindcss": "^3.3.2",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.3.8",
|
||||
"vue-tsc": "^1.6.5"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@
|
|||
>
|
||||
<template #input="{ invalid, fieldFQN, value, setValue }">
|
||||
<Datepicker
|
||||
text-input
|
||||
arrow-navigation
|
||||
v-bind="props"
|
||||
:class="[invalid ? 'dp__invalid' : '']"
|
||||
:uid="fieldFQN"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
:clearable="clearable"
|
||||
v-bind="$attrs"
|
||||
:state="undefined"
|
||||
:format="format"
|
||||
:model-value="(value as string)"
|
||||
@update:model-value="setValue"
|
||||
/>
|
||||
|
|
@ -26,10 +24,12 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import FormField from '../FormField.vue';
|
||||
import Datepicker from '@vuepic/vue-datepicker';
|
||||
import { ExtractComponentProps } from '../../../utils/extract-component-props';
|
||||
import Datepicker, { VueDatePickerProps } from '@vuepic/vue-datepicker';
|
||||
import '@vuepic/vue-datepicker/dist/main.css';
|
||||
import { Omit } from 'lodash';
|
||||
import { computed } from 'vue';
|
||||
|
||||
interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
|
||||
interface DatePickerProps extends VueDatePickerProps {
|
||||
label: string;
|
||||
name: string;
|
||||
disabled?: boolean;
|
||||
|
|
@ -41,5 +41,14 @@ interface DatePickerProps extends ExtractComponentProps<typeof Datepicker> {
|
|||
// https://vue3datepicker.com/
|
||||
const props = withDefaults(defineProps<DatePickerProps>(), {
|
||||
disabled: false,
|
||||
textInput: true,
|
||||
arrowNavigation: true,
|
||||
enableTimePicker: true,
|
||||
autoPosition: true,
|
||||
is24: true,
|
||||
});
|
||||
|
||||
const format = computed(() =>
|
||||
props.format ?? props.enableTimePicker ? `dd/MM/yyyy, HH:mm` : 'dd/MM/yyyy'
|
||||
);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="relative h-full w-full" :class="{ 'bg-white': !transparent }">
|
||||
<div class="relative w-full" :class="{ 'bg-white': !transparent }">
|
||||
<div
|
||||
class="relative h-full w-full overflow-hidden"
|
||||
:class="{ 'bg-gray-100': !transparent }"
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
}"
|
||||
/>
|
||||
<div
|
||||
class="pointer-events-none absolute top-0 left-0 h-full w-full"
|
||||
class="pointer-events-none absolute left-0 top-0 h-full w-full"
|
||||
v-if="!editable"
|
||||
:style="{
|
||||
transformOrigin: 'top left',
|
||||
|
|
|
|||
|
|
@ -24,9 +24,15 @@
|
|||
name="type"
|
||||
label="Type"
|
||||
/>
|
||||
<FormField name="barcode" label="Barcode" />
|
||||
|
||||
<div class="grid space-y-2 sm:grid-cols-2 sm:space-x-2 sm:space-y-0">
|
||||
<FormField name="barcode" label="Barcode" />
|
||||
<FormField name="sku" label="SKU / Product code" />
|
||||
</div>
|
||||
|
||||
<FormField name="url" label="URL" />
|
||||
<div class="grid space-y-2 sm:grid-cols-3 sm:space-y-0 sm:space-x-2">
|
||||
|
||||
<div class="grid space-y-2 sm:grid-cols-3 sm:space-x-2 sm:space-y-0">
|
||||
<FormField
|
||||
name="weight"
|
||||
type="number"
|
||||
|
|
@ -76,7 +82,7 @@
|
|||
</FormGroup>
|
||||
|
||||
<FormGroup name="additionalInfo">
|
||||
<div class="grid space-y-2 sm:grid-cols-3 sm:space-y-0 sm:space-x-2">
|
||||
<div class="grid space-y-2 sm:grid-cols-3 sm:space-x-2 sm:space-y-0">
|
||||
<FormDateField
|
||||
name="expiresAt"
|
||||
label="Expires at"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import '@vuepic/vue-datepicker/src/VueDatePicker/style/main.scss';
|
||||
|
||||
.dp__input {
|
||||
@apply block w-full rounded-md border-gray-300 shadow-sm transition-colors duration-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<HousePlanner
|
||||
v-if="selectedFloorId"
|
||||
editable
|
||||
class="h-full"
|
||||
ref="plannerRef"
|
||||
:key="`planner-${selectedFloorId}`"
|
||||
:floor-document="floorPlan"
|
||||
|
|
|
|||
|
|
@ -1,161 +1,166 @@
|
|||
<template>
|
||||
<PageHead bordered>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-2xl font-bold">{{ floor?.displayName }}</h1>
|
||||
<span class="text-sm font-light text-gray-800 line-clamp-1"
|
||||
>Floor {{ floor?.number }} in {{ building?.displayName }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<Menu
|
||||
title="Actions"
|
||||
class="self-end"
|
||||
:options="[
|
||||
{
|
||||
title: 'Edit floor plan',
|
||||
link: {
|
||||
name: 'planner',
|
||||
query: { buildingId: building?.id, floorId: floor?.id },
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</PageHead>
|
||||
|
||||
<button
|
||||
@click="showMap = !showMap"
|
||||
:class="[
|
||||
showMap ? 'bg-gray-100' : 'rounded-md ring-1 ring-black ring-opacity-5',
|
||||
'ml-auto flex w-full items-center space-x-2 rounded-tl-lg rounded-tr-lg px-2 py-2 shadow-md md:w-auto',
|
||||
'focus:outline-none focus:ring-2 focus:ring-blue-500',
|
||||
]"
|
||||
>
|
||||
<span>{{ showMap ? 'Hide' : 'Show' }} interactive floor plan</span>
|
||||
<ChevronUpIcon v-if="showMap" class="h-4 w-4" />
|
||||
<ChevronDownIcon v-else class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<Transition
|
||||
name="menu-transition"
|
||||
enter-active-class="transition-height ease-out duration-200"
|
||||
enter-from-class="h-0"
|
||||
enter-to-class="h-[70vh]"
|
||||
leave-active-class="transition-height ease-in duration-150"
|
||||
leave-from-class="h-[70vh]"
|
||||
leave-to-class="h-0"
|
||||
>
|
||||
<div v-if="showMap" class="z-10 overflow-hidden bg-gray-100 shadow-md">
|
||||
<HousePlanner
|
||||
v-if="floorDocument"
|
||||
:key="`fdoc${floorDocument.id}`"
|
||||
ref="canvas"
|
||||
class="h-[70vh]"
|
||||
:editable="false"
|
||||
:grid="false"
|
||||
transparent
|
||||
headless
|
||||
:floor-document="floorDocument"
|
||||
@click="clickOnRoom()"
|
||||
@zoom="(newZoom) => (canvasZoom = newZoom)"
|
||||
>
|
||||
<RoomPolygon
|
||||
v-for="room of rooms"
|
||||
:room="room"
|
||||
:zoom="canvasZoom"
|
||||
:highlighted="selectedRoom?.id"
|
||||
@clicked-in="(x, y) => clickOnRoom(room, x, y)"
|
||||
@mouse-moved-in="(x, y) => mouseMovedInRoom(room, x, y)"
|
||||
<div class="min-h-[160vh]">
|
||||
<PageHead bordered>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-2xl font-bold">{{ floor?.displayName }}</h1>
|
||||
<span class="text-sm font-light text-gray-800 line-clamp-1"
|
||||
>Floor {{ floor?.number }} in {{ building?.displayName }}</span
|
||||
>
|
||||
<template v-if="selectedRoom?.id === room.id">
|
||||
<template v-for="storage of storages">
|
||||
<StorageBubble
|
||||
v-if="
|
||||
!movingBubble ||
|
||||
(storage.id === movingBubble?.id &&
|
||||
isSet(storage) === isSet(movingBubble))
|
||||
"
|
||||
:storage="storage"
|
||||
:class="{
|
||||
'z-20':
|
||||
storage.id === hoveredBubble?.id ||
|
||||
storage.id === selectedStorage?.id ||
|
||||
(isSet(storage) && storage.id === selectedSet?.id),
|
||||
'pointer-events-none': !!movingBubble,
|
||||
'pointer-events-auto': !movingBubble,
|
||||
}"
|
||||
@mouseenter="() => (hoveredBubble = storage)"
|
||||
@start-moving="moveBubble(storage)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-md font-bold">{{
|
||||
storage.displayName
|
||||
}}</span>
|
||||
<span
|
||||
v-if="isSet(storage)"
|
||||
class="text-[0.75rem] font-bold uppercase text-gray-400"
|
||||
>(Storage Set)</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center space-x-1">
|
||||
<button
|
||||
v-if="!isSet(storage)"
|
||||
@click.stop="selectAndAdd(storage)"
|
||||
class="rounded-full px-1 py-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
title="Insert into Storage"
|
||||
>
|
||||
<ArrowDownOnSquareIcon
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.stop="selectStorage(storage)"
|
||||
class="rounded-full px-1 py-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
title="Open Storage"
|
||||
>
|
||||
<ArrowUpOnSquareIcon aria-hidden="true" class="h-4 w-4" />
|
||||
</button>
|
||||
<Menu
|
||||
title="Actions"
|
||||
class="self-end"
|
||||
:options="[
|
||||
{
|
||||
title: 'Edit floor plan',
|
||||
link: {
|
||||
name: 'planner',
|
||||
query: { buildingId: building?.id, floorId: floor?.id },
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</PageHead>
|
||||
|
||||
<button
|
||||
@click="showMap = !showMap"
|
||||
:class="[
|
||||
showMap ? 'bg-gray-100' : 'rounded-md ring-1 ring-black ring-opacity-5',
|
||||
'ml-auto flex w-full items-center space-x-2 rounded-tl-lg rounded-tr-lg px-2 py-2 shadow-md md:w-auto',
|
||||
'focus:outline-none focus:ring-2 focus:ring-blue-500',
|
||||
]"
|
||||
>
|
||||
<span>{{ showMap ? 'Hide' : 'Show' }} interactive floor plan</span>
|
||||
<ChevronUpIcon v-if="showMap" class="h-4 w-4" />
|
||||
<ChevronDownIcon v-else class="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<Transition
|
||||
name="menu-transition"
|
||||
enter-active-class="transition-height ease-out duration-200"
|
||||
enter-from-class="h-0"
|
||||
enter-to-class="h-[70vh]"
|
||||
leave-active-class="transition-height ease-in duration-150"
|
||||
leave-from-class="h-[70vh]"
|
||||
leave-to-class="h-0"
|
||||
>
|
||||
<div v-if="showMap" class="z-10 overflow-hidden bg-gray-100 shadow-md">
|
||||
<HousePlanner
|
||||
v-if="floorDocument"
|
||||
:key="`fdoc${floorDocument.id}`"
|
||||
ref="canvas"
|
||||
class="h-[70vh]"
|
||||
:editable="false"
|
||||
:grid="false"
|
||||
transparent
|
||||
headless
|
||||
:floor-document="floorDocument"
|
||||
@click="clickOnRoom()"
|
||||
@zoom="(newZoom) => (canvasZoom = newZoom)"
|
||||
>
|
||||
<RoomPolygon
|
||||
v-for="room of rooms"
|
||||
:room="room"
|
||||
:zoom="canvasZoom"
|
||||
:highlighted="selectedRoom?.id"
|
||||
@clicked-in="(x, y) => clickOnRoom(room, x, y)"
|
||||
@mouse-moved-in="(x, y) => mouseMovedInRoom(room, x, y)"
|
||||
>
|
||||
<template v-if="selectedRoom?.id === room.id">
|
||||
<template v-for="storage of storages">
|
||||
<StorageBubble
|
||||
v-if="
|
||||
!movingBubble ||
|
||||
(storage.id === movingBubble?.id &&
|
||||
isSet(storage) === isSet(movingBubble))
|
||||
"
|
||||
:storage="storage"
|
||||
:class="{
|
||||
'z-20':
|
||||
storage.id === hoveredBubble?.id ||
|
||||
storage.id === selectedStorage?.id ||
|
||||
(isSet(storage) && storage.id === selectedSet?.id),
|
||||
'pointer-events-none': !!movingBubble,
|
||||
'pointer-events-auto': !movingBubble,
|
||||
}"
|
||||
@mouseenter="() => (hoveredBubble = storage)"
|
||||
@start-moving="moveBubble(storage)"
|
||||
>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-md font-bold">{{
|
||||
storage.displayName
|
||||
}}</span>
|
||||
<span
|
||||
v-if="isSet(storage)"
|
||||
class="text-[0.75rem] font-bold uppercase text-gray-400"
|
||||
>(Storage Set)</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row items-center space-x-1">
|
||||
<button
|
||||
v-if="!isSet(storage)"
|
||||
@click.stop="selectAndAdd(storage)"
|
||||
class="rounded-full px-1 py-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
title="Insert into Storage"
|
||||
>
|
||||
<ArrowDownOnSquareIcon
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
@click.stop="selectStorage(storage)"
|
||||
class="rounded-full px-1 py-1 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
title="Open Storage"
|
||||
>
|
||||
<ArrowUpOnSquareIcon
|
||||
aria-hidden="true"
|
||||
class="h-4 w-4"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm" v-if="!isSet(storage)"
|
||||
>Stored items:
|
||||
{{ (storage as StorageListItem).itemCount }}</span
|
||||
>
|
||||
<span class="text-sm" v-else
|
||||
>Storages:
|
||||
{{ (storage as StorageSetListItem).storages.length }}</span
|
||||
>
|
||||
</StorageBubble>
|
||||
<span class="text-sm" v-if="!isSet(storage)"
|
||||
>Stored items:
|
||||
{{ (storage as StorageListItem).itemCount }}</span
|
||||
>
|
||||
<span class="text-sm" v-else
|
||||
>Storages:
|
||||
{{ (storage as StorageSetListItem).storages.length }}</span
|
||||
>
|
||||
</StorageBubble>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</RoomPolygon>
|
||||
</HousePlanner>
|
||||
</div>
|
||||
</Transition>
|
||||
</RoomPolygon>
|
||||
</HousePlanner>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<ItemSelector
|
||||
:class="{ 'mt-2': !showMap }"
|
||||
:rooms="rooms"
|
||||
:storages="storages"
|
||||
:selected-room="selectedRoom"
|
||||
:selected-storage="selectedStorage"
|
||||
:selected-set="selectedSet"
|
||||
@select-room="selectRoomFromList"
|
||||
@select-storage="selectStorage"
|
||||
@new-storage="addNewStorage"
|
||||
/>
|
||||
<ItemSelector
|
||||
:class="{ 'mt-2': !showMap }"
|
||||
:rooms="rooms"
|
||||
:storages="storages"
|
||||
:selected-room="selectedRoom"
|
||||
:selected-storage="selectedStorage"
|
||||
:selected-set="selectedSet"
|
||||
@select-room="selectRoomFromList"
|
||||
@select-storage="selectStorage"
|
||||
@new-storage="addNewStorage"
|
||||
/>
|
||||
|
||||
<StorageView
|
||||
v-if="selectedStorage && building"
|
||||
ref="storageViewRef"
|
||||
@storage-added="newStoredItemAdded"
|
||||
:storage="selectedStorage"
|
||||
:building="building"
|
||||
/>
|
||||
<StorageView
|
||||
v-if="selectedStorage && building"
|
||||
ref="storageViewRef"
|
||||
@storage-added="newStoredItemAdded"
|
||||
:storage="selectedStorage"
|
||||
:building="building"
|
||||
/>
|
||||
|
||||
<NewStorageModal ref="newStorage" @added="storageAdded" />
|
||||
<NewStorageModal ref="newStorage" @added="storageAdded" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
Loading…
Reference in New Issue