initial commit
This commit is contained in:
@@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<span><i :class="['fa-solid', iconClass]" :style="{ color: iconColor }"></i></span>
|
||||
<h3>{{ title }}</h3>
|
||||
</div>
|
||||
<div
|
||||
class="container-file"
|
||||
:class="{ 'is-dragging': isDragging }"
|
||||
@dragover.prevent="!disabled && (isDragging = true)"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="handleDrop($event)"
|
||||
>
|
||||
<span><i class="fa-solid fa-upload"></i></span>
|
||||
<p>
|
||||
Drag and drop excel file here or choose a file
|
||||
</p>
|
||||
<p id="note">{{ note }}</p>
|
||||
<input
|
||||
type="file"
|
||||
:id="uniqueID"
|
||||
:accept="note"
|
||||
:disabled="disabled"
|
||||
style="display: none;"
|
||||
@change="onFileSelected"
|
||||
/>
|
||||
<label
|
||||
:for="disabled ? '' : uniqueID"
|
||||
id="btn"
|
||||
:class="{ 'btn-disabled': disabled }"
|
||||
>Browse file</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Swal from 'sweetalert2';
|
||||
import 'sweetalert2/dist/sweetalert2.min.css';
|
||||
export default {
|
||||
props: {
|
||||
title: { type: String, default: 'Upload File' },
|
||||
iconClass: { type: String, default: 'fa-file' },
|
||||
iconColor: { type: String, default: '#000' },
|
||||
note: { type: String, default: '' },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// Generates a unique ID so labels don't collide when multiple cards exist
|
||||
uniqueID: 'file-upload-' + Math.random().toString(36).substring(2, 9),
|
||||
isDragging: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isValidTypeFile(file) {
|
||||
const fileType = '.' + file.name.split('.').pop().toLowerCase();
|
||||
const allowedTypes = this.note
|
||||
.split(',')
|
||||
.map(type => type.trim().toLowerCase());
|
||||
|
||||
return allowedTypes.includes(fileType);
|
||||
},
|
||||
onFileSelected(event) {
|
||||
const file = event.target.files[0]
|
||||
if (this.isValidTypeFile(file)) {
|
||||
this.$emit('file-selected', file)
|
||||
} else {
|
||||
this.showAlert();
|
||||
}
|
||||
event.target.value = '';
|
||||
},
|
||||
handleDrop(event) {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
this.isDragging = false; // Turn off visual drag highlight
|
||||
|
||||
// Get the dropped file from event.dataTransfer
|
||||
const file = event.dataTransfer.files[0];
|
||||
if (file && !this.disabled) {
|
||||
if (this.isValidTypeFile(file)) {
|
||||
this.$emit('file-selected', file);
|
||||
}
|
||||
else {
|
||||
this.showAlert();
|
||||
}
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
showAlert() {
|
||||
Swal.fire({
|
||||
title: 'Wrong document type!',
|
||||
html: `Invalid file type! Only <b>'${ this.note }'</b> files are allowed here.`,
|
||||
icon: 'info',
|
||||
confirmButtonText: 'OK',
|
||||
confirmButtonColor: '#369E7B',
|
||||
background: '#f8f9fa',
|
||||
customClass: {
|
||||
popup: 'custom-swal-popup'
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
|
||||
|
||||
* {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.container-file {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
border: dashed black 2px;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
width: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Style highlight when dragging a file over the box */
|
||||
.container-file.is-dragging {
|
||||
border-color: rgb(54, 158, 123);
|
||||
background-color: rgba(54, 158, 123, 0.1);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
#note {
|
||||
margin-top: 5px;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#btn {
|
||||
color: white;
|
||||
background-color: rgb(54, 158, 123);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
transition: all 0.1s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#btn:active {
|
||||
transform: translateY(2px);
|
||||
background-color: rgb(41, 122, 95);
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
transform: none !important;
|
||||
background-color: rgb(54, 158, 123) !important;
|
||||
}
|
||||
|
||||
.custom-swal-popup {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="modal-container">
|
||||
<div class="title-container">
|
||||
<p id="title">Remove File</p>
|
||||
</div>
|
||||
<hr>
|
||||
<p id="modal-text" >Are you sure you want to remove "{{ nameFile }}"?</p>
|
||||
<div class="reply">
|
||||
<button @click="$emit('confirm')">Yes</button>
|
||||
<button @click="$emit('cancel')">No</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
nameFile: {
|
||||
type: String,
|
||||
default: 'file_name'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
box-sizing: border-box; /* Ensures padding doesn't expand height beyond 200px */
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
background-color: rgb(32, 59, 50);
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
#modal-text {
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.reply {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: rgb(37, 110, 85);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgb(58, 171, 133);
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: rgb(54, 158, 123);
|
||||
transform: translateY(3px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<span>
|
||||
<i class="fa-solid
|
||||
fa-circle-xmark"
|
||||
id="circle-mark"
|
||||
@click="$emit('close-modal')"
|
||||
>
|
||||
</i>
|
||||
</span>
|
||||
<label for="names">Document type:</label><br>
|
||||
<select name="names"
|
||||
id="names"
|
||||
class="styled-select"
|
||||
required
|
||||
v-model="selectedDoc"
|
||||
:disabled="!!customDoc.trim()"
|
||||
@change="selectedValue"
|
||||
>
|
||||
<option value="" disabled selected hidden>Select the pdf doc type...</option>
|
||||
<option>Carta d'identità</option>
|
||||
<option>Certificato Lingua</option>
|
||||
<option>Certificato Medico</option>
|
||||
<option>CV</option>
|
||||
<option>Diploma</option>
|
||||
<option>Documento Medico</option>
|
||||
<option>Passaporto</option>
|
||||
<option>Patente</option>
|
||||
<option>Patto di Corresponsabilità</option>
|
||||
<option>Permesso di soggiorno</option>
|
||||
<option>Tampone attestante la negatività a COVID-19</option>
|
||||
<option>Tesi</option>
|
||||
<option>Motivational Letter</option>
|
||||
<option>Stage doc</option>
|
||||
<option>Dossier di Tirocinio</option>
|
||||
<option>Docuseal</option>
|
||||
</select><br><br>
|
||||
|
||||
<div class="chooseTitle">If not present, write the doc type here:
|
||||
<br><br>
|
||||
<input type="text"
|
||||
placeholder="Write here..."
|
||||
id="pdfTitle"
|
||||
:disabled="!!selectedDoc"
|
||||
v-model="customDoc"
|
||||
:class="{ 'customDoc-disabled': !!selectedDoc}"
|
||||
@input="onInputChange"
|
||||
>
|
||||
</div>
|
||||
<button id="next-btn"
|
||||
@click="$emit('proceed')"
|
||||
:disabled="disabled"
|
||||
:class="{ 'btn-disabled': disabled }"
|
||||
>Proceed
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedDoc: '',
|
||||
customDoc: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectedValue() {
|
||||
this.$emit('selected-value', this.selectedDoc);
|
||||
},
|
||||
onInputChange() {
|
||||
this.$emit('selected-value', this.customDoc);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
|
||||
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 14px;
|
||||
color: white;
|
||||
background-color: rgb(32, 59, 50);
|
||||
padding: 20px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
#circle-mark {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
select.styled-select:invalid {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#names, #pdfTitle {
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
box-shadow: 4px 4px 4px black;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chooseTitle > input {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#next-btn {
|
||||
margin-top: 40px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 14px;
|
||||
width: 80px;
|
||||
background-color: rgb(17, 166, 94);
|
||||
color: white;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
#next-btn:active {
|
||||
transform: translateY(3px);
|
||||
background-color: rgb(14, 138, 78);
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.customDoc-disabled {
|
||||
background-color: white;
|
||||
color: gray;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user