Adding a clear cache button with NetSuite API. When the button is clicked all the cache will be cleared:
Template:
<template> <div class="dropdown float-right" @click.stop="toggleDropdown"> <button class="three-dots"> ⋮ <!-- Unicode character for vertical ellipsis (three dots) --> </button> <div v-if="isDropdownVisible" class="dropdown-content bg-grey-300"> <button @click="clearCache" class="float-right py-2 text-black"> Clear Cache </button> </div> </div> </template>
Script:
<script>
export default {
data() {
return {
isDropdownVisible: false,
};
},
methods: {
toggleDropdown() {
this.isDropdownVisible = !this.isDropdownVisible;
},
async clearCache() {
try {
const clearCaches = await clearCache();
if (clearCaches.status === "SUCCESS") {
location.reload();
} else {
console.error("Failed to fetch vendor rules:", clearCaches.message || clearCaches);
}
} catch (error) {
console.error("Error fetching data:", error);
}
},
handleClickOutside(event) {
if (!this.$el.contains(event.target)) {
this.isDropdownVisible = false;
}
},
},
mounted() {
document.addEventListener('click', this.handleClickOutside);
},
beforeDestroy() {
document.removeEventListener('click', this.handleClickOutside);
},
};
</script>
Here clearCache is API and it is called in another file:
API file:
export const clearCache = async () => {
try {
const endpoint = END_POINTS.REMOVE_CACHE_API.name;
const url = new URL(generateEndPoint(endpoint));
const response = await fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json",
"Accept-Language": "en-us",
},
});
const responseJson = await response.json();
if (
responseJson &&
responseJson.status === "SUCCESS" &&
responseJson.data
) {
responseJson.data = unwrapInEscapedBody(responseJson.data);
}
return responseJson;
} catch (err) {
console.error("error@REMOVE_CACHE_API", err); // Updated error log to be more descriptive
}
};
Style(iF NEEDED):
<style> /* Add your styles here */ </style>
Screenshot:
