[Modals] Refactoring

app/src/plugins/tm@_components/z-autocomplete.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="wrapper">
+		<v-text-field
+			label="Vyhľadať zamestnanca"
+			variant="solo"
+			v-model="search"
+			@keydown.enter="optionSelected()"
+			:class="{ error: validations?.$errors?.length }"
+			:hint="
+				validations?.$errors
+					? errorUtils.parseErrors(validations?.$errors)
+					: null
+			"
+		/>
+
+		<div class="suggestion" v-if="suggestion">
+			<span class="hidden-part">{{ suggestion._suggestionHiddenPart }}</span>
+			<span>{{ suggestion._suggestionShownPart }}</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import errorUtils 		from '@/plugins/lib@auth/_utils/error.utils'
+
+export default {
+	emits: ['option-selected'],
+
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+
+		validations: {
+			type: Object || null,
+			required: false
+		}
+	},
+
+	data() {
+		return {
+			errorUtils,
+			search: ''
+		}
+	},
+
+	computed: {
+		suggestion() {
+			const normalizedSearch = this._normalize(this.search)
+
+			if (!normalizedSearch.length || !this.options.length)
+				return null
+
+			const filteredOptions = this.options.filter(option => {
+				const normalizedValue = this._normalize(option.value)
+
+				return normalizedSearch == normalizedValue.slice(0, normalizedSearch.length)
+			})
+
+			if (!filteredOptions[0])
+				return null
+
+			const suggestion = {
+				...filteredOptions[0],
+				_suggestionHiddenPart: filteredOptions[0].value.slice(0, normalizedSearch.length),
+				_suggestionShownPart: filteredOptions[0].value.slice(normalizedSearch.length, filteredOptions[0].value.length)
+
+			}
+
+			return suggestion
+		}
+	},
+
+	methods: {
+		optionSelected() {
+			if (!this.suggestion)
+				return
+
+			this.$emit('option-selected', this.suggestion)
+			this.search = ''
+		},
+
+		_normalize(value) {
+			return value
+				.trim()
+				.toLowerCase()
+				.normalize("NFD")
+				.replace(/[\u0300-\u036f]/g, "")
+		}
+	}
+}
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+	position: relative
+
+	.suggestion
+		position: absolute
+		top: 27px
+		left: 15.5px
+		opacity: 0.5
+		letter-spacing: 0.009375em
+
+		.hidden-part
+			opacity: 0
+</style>

app/src/plugins/tm@_components/z-files-upload.vue

@@ -0,0 +1,60 @@
+<template>
+    <div>
+		<input type="file" multiple name="file" id="fileInput" class="hidden-input" accept="*"
+			@change="onChange" ref="fileUpload"
+		/>
+
+		<v-btn class="upload-btn" @click="$refs.fileUpload.click()">
+			<v-icon class="mx-1" icon="mdi-cloud-upload-outline"></v-icon>NAHRAŤ
+		</v-btn>
+
+		<div v-if="files.length">
+			<div
+				v-for="file in files"
+				:key="file.name"
+			>
+				<v-chip>
+					{{ file.name }}
+					<v-icon class="mx-1" icon="mdi-paperclip"></v-icon>
+					<v-icon size="small" icon="mdi-close" @click.stop="remove(files.indexOf(file))"></v-icon>
+				</v-chip>
+			</div>
+		</div>
+    </div>
+</template>
+
+<script>
+export default {
+	emit: ['files-uploaded'],
+
+    data() {
+        return {
+            files: [],
+        }
+    },
+
+    methods: {
+        onChange() {
+            this.files = [...this.files, ...this.$refs.fileUpload.files]
+			this.$emit('files-uploaded', this.files)
+        },
+
+		remove(index) {
+			this.files.splice(index, 1)
+		},
+    },
+}
+</script>
+
+<style lang="sass" scoped>
+.upload-btn
+	color: #6200EE
+	border-radius: 4px
+	border: 1px solid #E5E5E5
+.hidden-input
+	opacity: 0
+	overflow: hidden
+	position: absolute
+	width: 1px
+	height: 1px
+</style>