eiam-favorite-pages
Version:
Stencil Component Starter
299 lines (294 loc) • 22.1 kB
JavaScript
import { p as proxyCustomElement, H, h, c as Host } from './p-0399058a.js';
const favoritePagesCss = ":host{display:block;width:100%}.kt-subheader__main{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;padding:0.25rem 0}.kt-subheader__breadcrumbs{display:flex;align-items:center;list-style-type:none;flex-wrap:wrap;margin:0;padding:0}.kt-subheader__breadcrumbs-link{padding:0 0.5rem 0 0;font-size:1rem;font-weight:500;color:#6f6f6f;transition:all 0.3s;text-decoration:none}.kt-subheader__breadcrumbs-link{color:#6f6f6f}.kt-svg-icon.fav-icon{width:17px;height:17px;transform:scaleX(-1)}.kt-svg-icon.inactive{opacity:0.35}.kt-svg-icon g [fill]{fill:#008fc7}.kt-subheader__breadcrumbs-separator:after{display:block;width:1px;height:16px;border-radius:0;content:\" \";background:#e7e8ef}.kt-subheader__breadcrumbs-separator:after{background:#dbdce7}.kt-subheader__breadcrumbs-separator{display:flex;justify-content:content;align-items:center;padding:0 0.5rem 0 0}.kt-subheader__toolbar{display:flex;justify-content:flex-end;align-items:center;padding:0}.btn{display:inline-flex;height:32px !important;padding-top:0;padding-bottom:0;margin-top:0.25rem;margin-bottom:0.25rem}.btn.btn-icon{width:32px !important;align-items:center}.btn:not(.dropdown-toggle-split){margin-left:0.5rem}.btn:not(.dropdown-toggle-split){margin-left:0.25rem}.kt-svg-icon.inactive{opacity:0.35}.kt-svg-icon{height:23px;width:23px}.fav-cont{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap}.kt-subheader__breadcrumbs-item:after{display:block;width:1px;height:16px;border-radius:0;content:\" \";background:#dbdce7;top:3px;right:0}.kt-subheader__breadcrumbs-link{position:relative;display:inline-flex;justify-content:space-between}.kt-subheader__breadcrumbs-item:after{top:3px;position:absolute;right:12px}.kt-subheader__breadcrumbs-link i{font-size:14px}span.kt-subheader__breadcrumbs-link.kt-subheader__breadcrumbs-item{padding-right:20px}input[type=\"text\"]{border:1px solid #e2e5ec;border-radius:4px}.kt-subheader__breadcrumbs-link:hover{-webkit-transition:all 0.3s;transition:all 0.3s;color:#008fc7}.kt-subheader__breadcrumbs-item:last-child:after{display:none}.no-items{font-weight:bold}.toast{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:5px;color:white;font-size:14px;z-index:9999;animation:fadeInOut 3s ease-in-out;box-shadow:0 2px 10px rgba(0, 0, 0, 0.2)}.toast.success{background-color:#2ecc71}.toast.error{background-color:#e74c3c}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-20%)}10%{opacity:1;transform:translateY(0%)}90%{opacity:1;transform:translateY(0%)}100%{opacity:0;transform:translateY(-20%)}}.toggle-favorites-btn{text-align:center;margin-top:10px}.toggle-favorites-btn button{background:none;border:none;color:#007bff;cursor:pointer;font-weight:bold}.toggle-favorites-btn{display:block;margin:auto}";
const EiamFavoritePagesStyle0 = favoritePagesCss;
const FavoritePages = /*@__PURE__*/ proxyCustomElement(class FavoritePages extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
}
get host() { return this; }
showModal = false;
slug;
path;
currentRouteSlug;
favorites = []; // Store favorite pages
isFavorite = false; // State to track favorite status
pageId;
pageTitle;
apiUrl;
cultureCode;
applicationId;
isCultureLoaded = false;
selectedTabName;
modalType = 'add'; // To distinguish between add and edit modal
editingPage = null; // Holds page data when editing;
isEditMode = false; // Initialize this variable
isShowEditIcons = false;
authToken;
isFetching = false;
showToastFlag;
toastType;
toastMessage;
showAllFavorites = false;
async componentDidLoad() {
await this.fetchInitiateValue();
}
async fetchInitiateValue() {
if (!this.cultureCode || !this.applicationId || !this.apiUrl) {
return;
}
else {
await this.getFavoritePages();
}
}
async getFavoritePages() {
try {
const response = await fetch(`${this.apiUrl}/api/Pages/FavoritePages`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
});
if (!response.ok) {
this.showToast('Something went wrong', 'error');
return;
}
if (response.ok) {
const data = await response.json();
this.favorites = data.content;
if (this.favorites.some(fav => fav.pageId === this.pageId)) {
this.isFavorite = true;
}
else {
this.isFavorite = false;
}
}
else {
this.showToast('Something went wrong', 'error');
}
}
catch (error) {
this.showToast('Something went wrong', 'error');
// console.error('Error fetching favorite pages:', error);
}
}
// Add a favorite
async addFavorite() {
const pageTitle = this.pageTitle;
const pageId = this.pageId;
if (!pageId || !this.pageTitle) {
// console.error('Page ID is missing.');
this.showToast('Something went wrong', 'error');
return;
}
if (this.favorites.some(fav => fav.pageId === pageId)) {
// console.log('Page is already in favorites.');
this.isFavorite = true;
return;
}
const requestBody = { name: pageTitle };
try {
const response = await fetch(`${this.apiUrl}/api/Pages/AddFavoritePages/${pageId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
body: JSON.stringify(requestBody),
});
const data = await response.json();
if (data?.code === '400') {
console.error('Backend returned an error:', data.message);
this.showToast(data.message || 'Something went wrong', 'error');
return;
}
this.getFavoritePages();
this.isFavorite = true;
// console.log('Page added to favorites successfully:', data);
this.showToast('Page added to favorites successfully', 'success');
}
catch (error) {
console.error('Network or unexpected error:', error);
this.showToast('Something went wrong', 'error');
}
}
showToast(message, type = 'success') {
this.toastMessage = message;
this.toastType = type;
this.showToastFlag = true;
setTimeout(() => {
this.showToastFlag = false;
}, 3000);
}
// Delete a favorite
async deleteFavorite(pageId) {
if (!pageId) {
this.showToast('Something went wrong', 'error');
return;
}
try {
const response = await fetch(`${this.apiUrl}/api/Pages/RemoveFavouritePage/${pageId}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationid': this.applicationId,
},
credentials: 'include',
});
const data = await response.json();
if (data?.code === '400') {
this.showToast(data.message || 'Something went wrong', 'error');
return;
}
// this.favorites = this.favorites.filter(fav => fav.pageId !== pageId);
this.getFavoritePages();
this.isFavorite = false;
this.isEditMode = false;
this.showToast('Favorite page removed successfully.', 'success');
// console.log('Favorite page removed successfully.');
}
catch (error) {
// console.error('Error removing favorite page:', error);
this.showToast('Something went wrong', 'error');
}
}
showEditIcons() {
this.isEditMode = true;
this.editingPage = null;
}
editFavorite(fav, index) {
const favorite = this.favorites[index];
this.editingPage = favorite; // Set page for editing
this.modalType = 'edit'; // Set modal type to 'edit'
this.pageId = fav.pageId;
this.isShowEditIcons = true;
}
doneEditing() {
this.saveEditedFavorite();
}
async saveEditedFavorite() {
if (!this.editingPage) {
return;
}
const { pageId, name } = this.editingPage;
const requestBody = { name };
try {
const response = await fetch(`${this.apiUrl}/api/Pages/EditFavouritePage/${pageId}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'CultureCode': this.cultureCode,
'Source': '2',
'applicationId': this.applicationId,
},
credentials: 'include',
body: JSON.stringify(requestBody),
});
const data = await response.json();
if (data?.code === '400') {
this.showToast(data.message || 'Something went wrong', 'error');
return;
}
this.getFavoritePages();
this.isEditMode = false;
// console.log('Favorite page name updated successfully.');
this.showToast('Favorite page name updated successfully.', 'success');
}
catch (error) {
// console.error('Error updating favorite page:', error);
this.showToast('Something went wrong', 'error');
}
}
get visibleFavorites() {
return this.showAllFavorites ? this.favorites : this.favorites.slice(0, 10);
}
toggleModal() {
this.showModal = !this.showModal;
this.modalType = 'add'; // Reset to 'add' when modal is closed
this.editingPage = null; // Clear any selected page for editing
}
async onDone() {
if (this.modalType === 'edit' && this.editingPage?.name) {
await this.saveEditedFavorite();
}
this.showModal = false;
}
async handleEdit(fav) {
if (this.isEditMode && this.editingPage?.pageId === fav.pageId) {
this.saveEditedFavorite();
}
else {
this.isEditMode = true;
this.editingPage = { ...fav };
}
}
render() {
return (h(Host, { key: '73d02d5f054c5b0cbe23b3ce09203b50d3ca1b99' }, h("div", { key: '2e74ddd4d4a16f1d87a5a00d98f2111ff4159ce2', class: "fav-cont" }, h("div", { key: '5a306d1ff1913eadbf93a2877095e4663de91f17', class: "kt-subheader__main" }, h("div", { key: 'ee039cfaf105aa1330ccd8717b65eec7e5eeeddd', class: "kt-subheader__breadcrumbs" }, this.favorites?.length == 0 ? (h("span", { class: "kt-subheader__breadcrumbs-link no-items" }, "For quick access, place your favorites here on the favorite bar")) : (this.visibleFavorites.map(fav => (h("span", { class: "kt-subheader__breadcrumbs-link kt-subheader__breadcrumbs-item" }, h("a", { class: "kt-subheader__breadcrumbs-link" }, this.isEditMode && this.editingPage?.pageId == fav.pageId ? (h("input", { type: "text", value: this.editingPage?.name, onInput: e => (this.editingPage.name = e.target.value) })) : (h("a", { href: fav.url, target: "_self", class: "kt-subheader__breadcrumbs-link" }, fav.name))), this.isEditMode && (h(h.Fragment, null, this.editingPage && this.editingPage.pageId === fav.pageId ? (h("a", { class: "kt-subheader__breadcrumbs-link", title: "Confirm", onClick: () => this.handleEdit(fav) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#000000", version: "1.1", id: "Layer_1", width: "15px", height: "15px", viewBox: "0 0 72 72", "enable-background": "new 0 0 72 72" }, h("g", null, h("path", { d: "M24.014,70.462c-2.617,0-5.073-1.016-6.917-2.859L2.175,53.877c-1.908-1.906-2.926-4.364-2.926-6.979 s1.018-5.072,2.866-6.92c1.849-1.849,4.307-2.866,6.921-2.866c2.591,0,5.029,1,6.872,2.818l8.102,7.109L55.861,4.618 c0.057-0.075,0.119-0.146,0.186-0.213c1.849-1.85,4.307-2.867,6.921-2.867s5.072,1.018,6.921,2.867 c3.784,3.784,3.815,9.923,0.093,13.747L31.697,67.416c-0.051,0.065-0.106,0.128-0.165,0.188c-1.914,1.912-4.498,2.926-7.214,2.854 C24.216,70.46,24.116,70.462,24.014,70.462z M9.037,41.112c-1.546,0-2.999,0.602-4.093,1.695C3.851,43.9,3.25,45.353,3.25,46.898 s0.602,3,1.694,4.093l14.922,13.726c1.148,1.146,2.6,1.914,4.148,1.914l0.227,0.164c0.05,0,0.1,0,0.151,0l0.221-0.164 c1.51,0,2.929-0.654,4.008-1.69l38.275-49.294c0.051-0.065,0.105-0.148,0.165-0.207c2.256-2.258,2.256-5.939,0-8.195 c-1.094-1.094-2.547-1.701-4.093-1.701c-1.502,0-2.917,0.566-3.999,1.602L25.914,51.169c-0.335,0.445-0.84,0.73-1.394,0.787 c-0.551,0.057-1.106-0.118-1.525-0.486l-9.771-8.573c-0.032-0.028-0.064-0.058-0.095-0.089 C12.036,41.714,10.583,41.112,9.037,41.112z" }))))) : (h("a", { class: "kt-subheader__breadcrumbs-link", title: "Edit", onClick: () => this.handleEdit(fav) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15px", height: "15px", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M18.3282 8.32837L15.8939 5.89405C14.7058 4.706 14.1118 4.11198 13.4268 3.88941C12.8243 3.69364 12.1752 3.69364 11.5727 3.88941C10.8877 4.11198 10.2937 4.706 9.10564 5.89405L7.49975 7.49994M3 20.9997L3.04745 20.6675C3.21536 19.4922 3.29932 18.9045 3.49029 18.3558C3.65975 17.8689 3.89124 17.4059 4.17906 16.9783C4.50341 16.4963 4.92319 16.0765 5.76274 15.237L17.4107 3.58896C18.1918 2.80791 19.4581 2.80791 20.2392 3.58896C21.0202 4.37001 21.0202 5.63634 20.2392 6.41739L8.37744 18.2791C7.61579 19.0408 7.23497 19.4216 6.8012 19.7244C6.41618 19.9932 6.00093 20.2159 5.56398 20.3879C5.07171 20.5817 4.54375 20.6882 3.48793 20.9012L3 20.9997Z", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("a", { class: "kt-subheader__breadcrumbs-link", title: "Remove", onClick: () => this.deleteFavorite(fav.pageId) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15px", height: "15px", viewBox: "0 0 24 24", fill: "none" }, h("path", { d: "M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6", stroke: "#000000", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))))))), h("div", { key: '9a1f5f7659b72032d2bb7082f2d342f7aa3d00bd', class: "kt-subheader__toolbar" }, this.favorites.length > 10 && (h("div", { key: '03bba9284b8733db35fda1615d23ba8afc4c54a9', class: "toggle-favorites-btn" }, h("button", { key: '21c18a46d467e1ad640b48eb8c4ae909cee825fc', onClick: () => (this.showAllFavorites = !this.showAllFavorites) }, this.showAllFavorites ? 'Show Less ▲' : 'Show More ▼'))), h("div", { key: '3965bbbe82aba07ad374b97277a024835160e5e1', class: "kt-subheader__wrapper" }, this.favorites.length === 0 || !this.isFavorite ? (h("a", { class: "btn btn-icon", title: "Add to Favorite", onClick: () => this.addFavorite() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon inactive" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("polygon", { points: "0 0 24 0 24 24 0 24" }), h("path", { d: "M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z", fill: "#000000" }))))) : (h("a", { class: "btn btn-icon", title: "Favorite", onClick: () => this.addFavorite() }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("polygon", { points: "0 0 24 0 24 24 0 24" }), h("path", { d: "M12,18 L7.91561963,20.1472858 C7.42677504,20.4042866 6.82214789,20.2163401 6.56514708,19.7274955 C6.46280801,19.5328351 6.42749334,19.309867 6.46467018,19.0931094 L7.24471742,14.545085 L3.94038429,11.3241562 C3.54490071,10.938655 3.5368084,10.3055417 3.92230962,9.91005817 C4.07581822,9.75257453 4.27696063,9.65008735 4.49459766,9.61846284 L9.06107374,8.95491503 L11.1032639,4.81698575 C11.3476862,4.32173209 11.9473121,4.11839309 12.4425657,4.36281539 C12.6397783,4.46014562 12.7994058,4.61977315 12.8967361,4.81698575 L14.9389263,8.95491503 L19.5054023,9.61846284 C20.0519472,9.69788046 20.4306287,10.2053233 20.351211,10.7518682 C20.3195865,10.9695052 20.2170993,11.1706476 20.0596157,11.3241562 L16.7552826,14.545085 L17.5353298,19.0931094 C17.6286908,19.6374458 17.263103,20.1544017 16.7187666,20.2477627 C16.5020089,20.2849396 16.2790408,20.2496249 16.0843804,20.1472858 L12,18 Z", fill: "#000000" }))))), this.favorites.length > 0 && (h("a", { key: '45ae38ab6e8a29232d9c7812c47d34a011abdf40', class: "btn btn-icon", title: "Edit", onClick: () => this.showEditIcons() }, h("svg", { key: 'dcb9b91defaa5576a0496d33c833666bb7cd928d', xmlns: "http://www.w3.org/2000/svg", width: "24px", height: "24px", viewBox: "0 0 24 24", version: "1.1", class: "kt-svg-icon" }, h("g", { key: '019dc9a72cdb5f474cfb364a1826c8d242385d09', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'fbfba3e99461f82c62c38c084b840eae07fe51f6', x: "0", y: "0", width: "24", height: "24" }), h("path", { key: 'b8deb85c51a73330ba31e780cd8eee95734189fe', d: "M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z", fill: "#000000", "fill-rule": "nonzero", transform: "translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) " }), h("rect", { key: '86205ae234147409cd460cd75a3e7a54b12effa5', fill: "#000000", opacity: "0.3", x: "5", y: "20", width: "15", height: "2", rx: "1" }))))), this.showToastFlag && h("div", { key: '1a391826223183ca7320d18e67ee7bb8ecf174bb', class: `toast ${this.toastType}` }, this.toastMessage))))));
}
static get watchers() { return {
"cultureCode": ["componentDidLoad"],
"applicationId": ["componentDidLoad"],
"pageId": ["componentDidLoad"],
"apiUrl": ["componentDidLoad"],
"pageTitle": ["componentDidLoad"]
}; }
static get style() { return EiamFavoritePagesStyle0; }
}, [1, "eiam-favorite-pages", {
"pageId": [8, "page-id"],
"pageTitle": [8, "page-title"],
"apiUrl": [1, "api-url"],
"cultureCode": [1, "culture-code"],
"applicationId": [1, "application-id"],
"showModal": [32],
"slug": [32],
"path": [32],
"currentRouteSlug": [32],
"favorites": [32],
"isFavorite": [32],
"isCultureLoaded": [32],
"selectedTabName": [32],
"modalType": [32],
"editingPage": [32],
"isEditMode": [32],
"isShowEditIcons": [32],
"authToken": [32],
"isFetching": [32],
"showToastFlag": [32],
"toastType": [32],
"toastMessage": [32],
"showAllFavorites": [32]
}, undefined, {
"cultureCode": ["componentDidLoad"],
"applicationId": ["componentDidLoad"],
"pageId": ["componentDidLoad"],
"apiUrl": ["componentDidLoad"],
"pageTitle": ["componentDidLoad"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["eiam-favorite-pages"];
components.forEach(tagName => { switch (tagName) {
case "eiam-favorite-pages":
if (!customElements.get(tagName)) {
customElements.define(tagName, FavoritePages);
}
break;
} });
}
defineCustomElement$1();
const EiamFavoritePages = FavoritePages;
const defineCustomElement = defineCustomElement$1;
export { EiamFavoritePages, defineCustomElement };
//# sourceMappingURL=eiam-favorite-pages.js.map