#ffffff

webdev

g/webdev

ago

public

earned

reactions

Eor)errray ban ...= =
= []ectedFse=e ample.x= "e=Er)errarraan=rue;
= al= =svent.= e==x");"0i1;+ =);
: 0=:7 8.544L}}8-132;/h6&}}&l}"x""0i1+=:=:4}}5120143}Vue js CSS animation re-render

Hello everyone, I am not an expert in Vue JS, I am learning for 1-2 weeks. I have a component where you upload the xls/xlsx file and if there are error in it? it display in another component. when everything is correct in the file then it displays a success check with animation. so the problem is about preventing the animation. i have 5 steps in the component and when change the step and then come back to step where i have success? it animates again but I want to prevent it. I can actually prevent it but now I face with another issue. when I reupload a file on succeed step it does not display the success check with animation. can anyone help me?

this is the component where I display the errors and the success animation

<template>
<div class="accordion" v-if="items.length > 0">

<div
v-for="(item, index) in items"
:key="index"
class="accordion-item"
:class="{ 'accordion-item-active': activeIndexes.includes(index) "
>
<div class="accordion-header"

@click

="toggleAccordion(index)">
<div class="head-and-total">
<h6>{{ item.sheet }}</h6>
<span class="total">
( <span>{{ sheetErrorCounts[index] }}</span> )
</span>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="#ffffff"
d="M233.4 105.4c12.5-12.5 2.8-12.5 5.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 2.5-45.3 L256 173.3 86.6 342.6c-12.-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
/>
</svg>
</div>
<div class="accordion-content" :ref="'content' + index">
<div class="table">
<div class="headers">
<div class="no"><h4>№</h4></div>
<div class="line"></div>
<div class="location"><h4>Xəta xanası:</h4></div>
<div class="line"></div>
<div class="error"><h4>Xəta:</h4></div>
</div>

<li
v-for="(error, errIndex) in item.errors"
:key="errIndex"
class="myLi"
>
<div class="no">
<span>{{ errIndex + 1 }}. </span>
</div>
<div class="line"></div>
<div class="location">
<span>{{ error.location } </span>
</div>
<div class="line"></div>
<div class="error">
<span>{{ error.message }</span>
</div>
</li>
</div>
</div>
</div>
</div>

<div v-else class="empty">
<div v-if="stepTrue">
<div class="main-container">
<div
class="check-container animated"
>
<div class="check-background">
<svg
viewBox="0 0 65 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 25L27.3077 4L58.5 7"
stroke="white"
stroke-width="13"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="check-shadow"></div>
</div>
</div>
</div>
<span v-else class="unselectable">Məlumat yoxdur</span>
</div>

<div class="button-container">
<button

@click

="toggleAccordion(index)">
<div class="head-and-total">
<h6>{{ itegt;
<span class="total">
( <span>{{ sheetErrorCounts[index] }}</span> )
</span>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
fill="#ffffff"
d="M233.4 105.4c12.5-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
/>
</svg>
</div>
<div class="accordion-content" :ref="'content' + index">
<div class="table">
<div class="headers">
<div class="no"><h4>№</h4></div>
<div class="line"></div>
<div class="location"><h4>Xəta xanası:</h4></div>
<div class="line"></div>
<div class="error"><h4>Xəta:</h4></div>
</div>

<li
v-for="(error, errIndex) in item.errors"
:key="errIndex"
class="myLi"
>
<div class="no">
<span>{{ errIndex + 1 }}. </span>
</div>
<div class="line"></div>
<div class="location">
<span>{{ error.location } </span>
</div>
<div class="line"></div>
<div class="error">
<span>{{ error.message }</span>
</div>
</li>
</div>
</div>
</div>
</div>

<div v-else class="empty">
<div v-if="stepTrue">
<div class="main-container">
<div
class="check-container animated"
>
<div class="check-background">
<svg
viewBox="0 0 65 51"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 25L27."
stroke="white"
stroke-width="13"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="check-shadow"></div>
</div>
</div>
</div>
<span v-else class="unselectable">Məlumat yoxdur</span>
</div>

<div class="button-container">
<button

@click

="nextStep()"disabled="!stepTrue">Növbəti</button>
</div>
</template>

<script>
import { state } from "../state";

export default {
name: "Accordion",
props: {
items: {
type: Array,
required: true,
},
stepTrue: {
type: Boolean,
required: true,
},
step: {
type: Number,
required: true,
},
},
data() {
return {
activeIndexes: [],
};
},
computed: {
sheetErrorCounts() {
return this.items.map((item) > (item.errors ? item.errors.le },
},

methods: {
nextStep() {
state.currentStep state.currentSte
},
toggleAccordion(index) {
const indexPosition = this.activeIndexes.indexOf(index);
if (indexPosition > -1) {
this.activeIndexes.splice(indexPosition, );
} else {
this.activeIndexes.push(index);
}

this.$nextTick(() => {
this.items.forEach((item, ) => {
const content = this.$refs["content" + i]?.[0];
if (content) {
if (this.activeIndexes.includes(i)) {
content.style.setProperty(
`${content.scrollHeight + 16}px`
);
} else {
content.style.setProperty("--heig
}
}
});
});
},
},
};
</script>

this is the component where I upload the file

<script setup>
import { ref, computed } from "vue";
import { state } from "../state";
import Accordion from "./Accordion.vue";
import Steps from "./Steps.vue";
import { toRaw } from "vue";

const selectedFile = ref(null);

const downloadFile = async () => {
const url = "http://localhost:3000/personalInformation/download";
fetch(url)
.then((response) => {
if (response.ok) return response.blob();
throw new Error("File download failed.");
})
.then((blob) => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href url;
a.download "example.xlsx";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
})
.catch((error) => console.error("Error:", rror));
};

const triggerFileSelect = () => {
const fileInput = document.getElementById("fileInput");
fileInput.click();
};

const handleFileChange = (event) => {
selectedFile.target.files[0];
uploadFile();
};

const uploadFile = async () => {
if (!selectedFile.value) {
alert("Please select a file to upload.");
return;
}

const url = "http://localhost:3000/personalInformation/upload";
const formData = new FormData();
formData.append("file", electedFile.value);

try {
const response = await fetch(url, {
method: "POST",
body: formData,
});
state.stepOneData [];
state.firstStepTrse;
if (response.ok) {
state.firstSte }
const result = await response.json();

if (Array.isArray(result)) {
state.stepOneData [...toRaw(state.stepOneData), ...result];
} else {
console.error("Expey but received:", result);
}
} catch (error) {
console.error("Error;
}
};
</script>

<template>
<div class="topButtons">
<h3>Əməkdaş Məlumatlarının Miqrassiyası</h3>
<Steps />

<div class="buttonField">
<button

@click

="downloadFile">Şablonxcel-i yüklə (export)</button>

<input
type="file"
id="fileInput"

@change

="handleFileChange"
style="display: none"
accept=".xlsx, .xls"
/>
<button id="upload"

@click

="triggerFileSelect">
Hazır Excel-i sistemə yüklə (upload)
</button>
</div>
</div>

<div class="list">
<Accordion
v-if="state.currentStep == 1"
:items="state.stepOneData"
:stepTrue="state.firstStepTrue"
:step="1"
/>
</div>
</template>

<script setup>
import { ref, computed } from "vue";
import { state } from "../state";
import Accordion from "./Accordion.vue";
import Steps from "./Steps.vue";
import { toRaw } from "vue";

const selectedFile = ref(null);

const downloadFile = async () => {
const url = "http://localhost:3000/personalInformation/download";
fetch(url)
.then((response) => {
if (response.ok) return response.blob();
throw new Error("File download failed.");
})
.then((blob) => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href url;
alsx";
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
})
.catch((error) => console.error("Error:", rror));
};

const triggerFileSelect = () => {
const fileInput = document.getElementById("fileInput");
fileInput.click();
};

const handleFileChange = (event) => {
selectedFile.value event.target.files[0];
uploadFile();
};

const uploadFile = async () => {
if (!selectedFile.value) {
alert("Please select a file to upload.");
return;
}

const url = "http://localhost:3000/personalInformation/upload";
const formData = new FormData();
formData.append("ile.value);

try {
const response = await fetch(url, {
method: "POST",
body: formData,
});
state.st state.firstStepTrue = false;
if (response.ok) {
state.firstStepTrue true;
}
const result = await response.json();

if (Array.isArray(result)) {
state.stepOneDtoRaw(state.stepOneData), ...result];
} else {
console.error("Eut received:", result);
}
} catch (error) {
console.error("Error;
}
};
</script>

<template>
<div class="topButtons">
<h3>Əməkdaş Məlumatlarının Miqrassiyası</h3>
<Steps />

<div class="buttonField">
<button

@click

="downloadFile">Şablonxcel-i yüklə (export)</button>

<input
type="file"
id="fileInput"

@change

="handleFileChange"
style="display: none"
accept=".xlsx, .xls"
/>
<button id="upload"

@click

="triggerFileSelect">
Hazır Excel-i sistemə yüklə (upload)
</button>
</div>
</div>

<div class="list">
<Accordion
v-if="state.currentStep == 1"
:items="state.stepOneData"
:stepTrue="state.firstStepTrue"
:step="1"
/>
</div>
</template>

#technology #dev #programming :"r, xpectaed at[a epOneD;ata file"l, .downlxoad :o", cte d pTrute ufe valuee ht"p, "--height",
1p ng)th 30577 2..5 m.shteet ) "p, .5