IndexTable row click triggers click event and performs click on the first Button.
shriDeveloper opened this issue · 15 comments
shriDeveloper commented
First , Ownego Polaris Vue Library is awesome . Much appreciate the hard work you put in !
I have few issues i need help with , Listed them below :-
- IndexTable disable row click.
- Modal closes if clicked anywhere outside.
- Modal within Modal is not opening.
- FullScreenBar - How to make this work ?
I am using below version:-
"dependencies": {
"@ownego/polaris-vue": "^2.0.1",
}
1. IndexTableRow disable row click
In this case , whenever i click on the row , it triggers a click event , and that click event is propogated to the Button in IndexTableCell.
What i want is , i want to disable click on the rows itself . i.e only the Button in the IndexTableCell should be allowed to handle the click event. Also , hovering on rows should not do any changes in background or anything.
Here's the code :-
<IndexTable
:item-count="products.length"
:loading="navigationForNextAndPreviousLoader"
:headings="[
{
title: 'Image',
},
{
title: 'Name',
},
{
title: 'Attached Variant(s)',
},
{
title: 'Action',
},
]"
:selectable="false"
>
<IndexTableRow
v-for="(product, index) in products"
:key="product.id"
:id="product.id"
:position="index"
>
<IndexTableCell>
<img
:src="product.product_image"
alt="..."
style="height: 50px; width: 50px; object-fit: cover"
/>
</IndexTableCell>
<IndexTableCell>
<TextStyle variation="strong">{{
truncateProductName(product.product_name)
}}</TextStyle>
</IndexTableCell>
<IndexTableCell>
<span style="font-weight: bold">
<Tag
v-if="
product.product_variants.length === 1 &&
product.product_variants[0].name === 'Default Title'
"
>
Default Variant
</Tag>
<Tooltip v-else>
<template #content>
<Badge
progress="complete"
status="success"
v-for="product_variant in product.product_variants"
v-bind:key="product_variant.id"
style="margin-top: 1px"
>
{{ product_variant.name }}
</Badge>
</template>
<Tag>{{ product.product_variants.length }} variant(s)</Tag>
</Tooltip>
</span>
</IndexTableCell>
<IndexTableCell>
<Button
size="slim"
@click="setProductEditModalOpen(product, index)"
outlined
:loading="isProductEditLoading[index]"
>
Edit </Button
>
<Button size="slim" @click="onDeleteProduct(product.id)"> Delete </Button
>
<Button size="slim" @click="onGenerateLinkForProduct(product)">
View
</Button>
</IndexTableCell>
</IndexTableRow>
</IndexTable>
2. Modal closes if clicked anywhere outside.
In this case , In earlier versions , I used :clickOutsideToClose="false" on Modal , so the Modal only gets close if its cliked on X(close icon).
But , In the new version , This property no longer works , and Modal keeps closing if any of the backdrop area is clicked. My question is How to force that :clickOutsideToClose="false" behavior.
<Modal
sectioned
size="large"
:open="isProductEditModalOpen"
:clickOutsideToClose="false"
@close="setProductEditModalClose"
></Modal>
3. Modal within Modal is not opening.
In this case , it could possibly because of the above issues , I guess if we solve the above 2. We should get this up too.
4. FullScreenBar - How to make this work ?
I am using App Bridge CDN .
<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script src="https://unpkg.com/@shopify/app-bridge-utils"></script>
Code for App Bridge Init :-
<script>
var AppBridge = window['app-bridge'];
var AppBridgeUtils = window['app-bridge-utils'];
var actions = AppBridge.actions;
var createApp = AppBridge.default;
var TitleBar = actions.TitleBar;
var app = createApp({
apiKey: '{{ api_key }}',
shopOrigin: '{{ shop_origin }}',
host : new URLSearchParams(location.search).get("host"),
forceRedirect: true,
});
var shopifyAuthenticatedFetch = AppBridgeUtils.authenticatedFetch(app);
var redirect = actions.Redirect.create(app);
function topLevelRedirectToLogin() {
redirect.dispatch(actions.Redirect.Action.REMOTE, `{{app_url}}/login/?shop={{ shop_origin }}`);
}
</script>
referring to link : https://ownego.github.io/polaris-vue/components/FullscreenBar#frontmatter-title
Tried this up , But it doesn't open in Full Screen.
Please help ! :)
Thanks
juzser commented
Can you update your message for more readable? I do not understand your issue.
shriDeveloper commented
Hey @juzser , Updated my comments ! Sorry for bad formatting last time , had some issues with Connection.
juzser commented
Hey @shriDeveloper , cool. I get your problems now.
-
Let me check again, but as I tested in this example (link), I see there is no problem with row click, I will try again.
By the way, the background color is changing on hover is default css from Shopify. I think you can override the css to make sure bg color does not change on hover, there is a class calledPolaris-IndexTable__TableRow--hovered, you can use it. -
We're adding this prop to modal in this PR: #364 , I will release it today, in 2.0.3, feel free to update.
-
Ok.
-
The Fullscreen bar component is just a bar component, not full screen layout, you have to use AppBridge Fullscreen mode from Shopify to trigger fullscreen, and then use this component to display the bar at top of fullscreen layout.
You can find it here
shriDeveloper commented
Hi @juzser . I've checked 1 & 2 . They have been resolved. Thanks for sure :)
Sadly , 3 is not working . Its a nested Modal. basically.
Modal 1 has a button which again calls Modal 2. It used to work in earlier versions , But when i click a button in Modal 1 , It hangs the app , no console errors nothing. Not sure why's the case.
Can you check please.
For 4: It's not urgent . I;m thinking of skipping it.
juzser commented
The 1st issue has been fixed on v2.0.4.
The 3rd: We're checking.
The 4th: You can follow my instruction, it's not a bug.
HQCuong commented
Hi @shriDeveloper, I just checked the 3rd issue and it seems everything is working normally, you can see the photo below.
Can I ask how you are doing with this situation and it would be great if you provided me with your code.
Thank you very much
shriDeveloper commented
Sure ! @juzser Here's my code :-
I am using Page at the top :-
<Page
:title="!props.isEditMode ? productModel.product_name : ''"
:primaryAction="{ content: 'Save', disabled: false, onAction: onProductSave }"
:secondaryActions="[
{
content: 'View Product On Store',
disabled: !props.isEditMode,
onAction: onViewProduct,
},
{
content: 'Notify All Buyers',
disabled: !props.isEditMode,
onAction: onFileChangeSendNotification,
loading: isNotifyAllBuyersLoading,
},
]"
>
const isNotificationCustomMailModalOn = ref(false);
const onFileChangeSendNotification = () => {
setIsNotificationCustomMailModalOn();
};
const setIsNotificationCustomMailModalOn = () => {
isNotificationCustomMailModalOn.value = true;
};
<Modal
sectioned
:open="isNotificationCustomMailModalOn"
@close="setIsNotificationCustomMailModalOff"
>
<template #title> Notify Email Message </template>
<TextField
v-model="customMailPlainHTML"
autoComplete="off"
label="Message (Plain/HTML)"
:multiline="4"
/>
<br />
<Button variant="primary" size="large" @click="onNotificationCustomEmailSend"
>Send</Button
>
</Modal>
Note: Modal is enclosed between <Page></Page> which my top element in <template>.
In case more clarity , Feel free to ask for more :)
HQCuong commented
@shriDeveloper Thanks for reaching us, we will check and come back to you as soon as possible.
HQCuong commented
Hi @shriDeveloper. I've just try to run your code and seem like modal is still working normally.
juzser commented
@shriDeveloper So where's your second modal?
I think your issue happens because of your logic, not from the lib.
We've tested and see it's possible to open 2 modals at the same time. Just make sure your open variables are separated between modals.
shriDeveloper commented
Hi @HQCuong , weird , I'll paste my complete File . not sure , Why's that causing . Please have a look. Apologies :)
Can you please have a look on what i am missing.
I am having issues with Notify All Buyers and Upload Files
note : I've imported the complete PolarisVue in main.js , I'll be removing individual imports.
<template>
<Page
:title="!props.isEditMode ? productModel.product_name : ''"
:primaryAction="{ content: 'Save', disabled: false, onAction: onProductSave }"
:secondaryActions="[
{
content: 'View Product On Store',
disabled: !props.isEditMode,
onAction: onViewProduct,
},
{
content: 'Notify All Buyers',
disabled: !props.isEditMode,
onAction: onFileChangeSendNotification,
loading: isNotifyAllBuyersLoading,
},
]"
>
<!-- back button -->
<Button
size="large"
@click="onNavigationToProducts"
v-if="!props.isEditMode"
variant="primary"
>
Back
</Button>
<br /><br />
<!-- ends here -->
<!-- select product container -->
<Grid
style="margin-bottom: 10px; margin-top: 15px"
v-if="!productModel.is_only_default_variant_available"
:rows="{ lg: 1, xl: 1 }"
>
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<Text as="h3" variant="headingSm">Select variant(s) </Text>
</GridCell>
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<VueMultiselect
:disabled="productModel.is_only_default_variant_available"
v-model="productModel.product_variants"
:multiple="true"
placeholder="Click to select variants"
open-direction="bottom"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:hideSelected="false"
:searchable="true"
label="label"
track-by="label"
ref="dropdown"
:options="productModel.product_variants_options"
>
<template #selection="{ values }"
><span class="multiselect__single"
>{{ !values.length ? "No" : values.length }} variant(s) selected</span
>
</template>
</VueMultiselect>
<!-- ends here -->
</GridCell>
</Grid>
<Grid :rows="{ lg: 1, xl: 1 }" style="margin-top: 10px">
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<Grid :rows="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }">
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 10, xl: 10 }">
<Text as="h3" variant="headingSm"
>Select existing files or Upload new files
</Text>
</GridCell>
<GridCell
:column-span="{ xs: 6, sm: 3, md: 3, lg: 2, xl: 2 }"
style="text-align: center"
>
<Button size="large" @click="UploadFileToggle" variant="primary"
>Upload Files</Button
>
</GridCell>
</Grid>
<Grid style="margin-top: 5px" :rows="{ lg: 1, xl: 1 }" class="mt-3">
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<div style="text-align: center">
<Spinner v-if="isFilesForProductLoading" size="small"></Spinner>
</div>
<VueMultiselect
v-if="!isFilesForProductLoading"
v-model="productModel.product_files"
:multiple="true"
open-direction="bottom"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:hideSelected="false"
:searchable="true"
label="label"
track-by="label"
ref="dropdown"
placeholder="Click to attach already uploaded files"
:options="fileOptions"
>
<template #selection="{ values }"
><span class="multiselect__single">
{{ !values.length ? "No" : values.length }} file(s) selected</span
>
</template>
<template #noOptions>
No Files Uploaded. Please upload your files.
</template>
<template #noResult>
No Files Uploaded. Please upload your files.
</template>
</VueMultiselect>
<!-- files selector -->
</GridCell>
</Grid>
</GridCell>
</Grid>
<Grid
:rows="{ lg: 1, xl: 1 }"
class="mb-2"
style="margin-top: 10px"
v-if="!props.isEditMode"
>
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<Card sectioned>
<template #title><b>Add License Keys</b></template>
<Grid :rows="{ lg: 1, xl: 1 }">
<GridCell
:column-span="{
xs: 6,
sm: 3,
md: 3,
lg: productKeySwitch === 'specific-keys' ? 12 : 6,
xl: productKeySwitch === 'specific-keys' ? 12 : 6,
}"
>
<Select
v-model="productKeySwitch"
placeholder="Select an option"
@change="onProductKeyTypeSelect"
:options="[
{ label: 'Random Keys', value: 'random-keys' },
{ label: 'Specific Keys', value: 'specific-keys' },
]"
>
</Select>
<small class="form-label text-muted mb-2"
>You can select : Random or Specific Keys</small
>
</GridCell>
<GridCell
v-if="productKeySwitch === 'random-keys'"
:column-span="{ xs: 6, sm: 3, md: 3, lg: 6, xl: 6 }"
>
<TextField
v-model="productModel.product_keys_count"
placeholder="Enter Key Count"
@change="onProductKeyLimitChange"
autoComplete="off"
/>
<small class="form-label text-muted mb-2"
>Add key count:- for example : 10 and press <b>enter</b> to
generate</small
>
</GridCell>
</Grid>
<Grid
v-if="
(productKeySwitch && productKeySwitch == 'random-keys') ||
productKeySwitch == 'specific-keys'
"
:rows="{ lg: 1, xl: 1 }"
>
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<TextField
v-model="productModel.product_keys"
style="margin-top: 5px"
autoComplete="off"
:multiline="4"
placeholder="Just copy paste your license keys (each on new line)"
></TextField>
</GridCell>
</Grid>
</Card>
</GridCell>
</Grid>
<Grid
:rows="{ lg: 1, xl: 1 }"
class="mb-2"
style="margin-top: 10px; margin-bottom: 10px"
v-if="props.isEditMode"
>
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<Card sectioned>
<!-- this is where we want the upload CSV button -->
<Grid :rows="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }">
<GridCell :column-span="{ xs: 9, sm: 9, md: 8, lg: 8, xl: 8 }">
<input
type="file"
id="csvFileInput"
name="csv_file"
accept=".csv"
@change="handleCSVFileChange"
style="display: none"
/>
</GridCell>
<GridCell
:column-span="{ xs: 6, sm: 3, md: 2, lg: 2, xl: 2 }"
style="text-align: center"
>
<Select
placeholder="Add/Remove Keys"
v-model="selectedLicenseKeyAction"
:options="[
{ label: 'Add Keys', value: 'add_license_keys' },
{ label: 'Remove Keys', value: 'remove_license_keys' },
]"
>
</Select>
</GridCell>
<GridCell
:column-span="{ xs: 6, sm: 3, md: 2, lg: 2, xl: 2 }"
style="text-align: center"
>
<Button
:loading="isLicenseKeyCSVImportLoading"
size="large"
variant="primary"
@click="openCSVBrowseDialog"
>Upload Keys</Button
>
</GridCell>
</Grid>
<!-- ends here -->
<br />
<label style="font-weight: bold" class="form-label"
>Total Keys Available - {{ productModel.product_keys_count }}
</label>
<TextField
disabled
id="licenseKeysActivationArea"
v-model="getProductLicenseKeys"
:multiline="4"
></TextField>
</Card>
</GridCell>
</Grid>
<!-- ends here -->
<!-- Modals -->
<Modal
sectioned
:open="fileUploadActive"
:clickOutsideToClose="false"
:primary-action="{ content: 'Close', onAction: UploadFileToggle }"
@close="UploadFileToggle"
>
<template #title
>Upload files for
{{ !props.isEditMode ? productModel.product_name : "" }}</template
>
<BlockStack inlineAlign="start" gap="500">
<Text v-if="fileUploadProgress > 0" as="h6"
>Uploading: {{ fileUploadProgress }}%</Text
>
<ProgressBar
v-if="fileUploadProgress > 0"
color="success"
:progress="fileUploadProgress"
v-bind="props"
/>
<input
type="file"
id="file-input"
class="form-control"
multiple
@change="handleFileChange"
/>
<InlineGrid>
<Button variant="primary" size="large" @click="attachFiles">Upload</Button>
</InlineGrid>
</BlockStack>
</Modal>
<!-- send custom message modal over here -->
<Modal
sectioned
:open="isNotificationCustomMailModalOn"
@close="setIsNotificationCustomMailModalOff"
>
<template #title> Notify Email Message </template>
<TextField
v-model="customMailPlainHTML"
autoComplete="off"
label="Message (Plain/HTML)"
:multiline="4"
/>
<br />
<Button variant="primary" size="large" @click="onNotificationCustomEmailSend"
>Send</Button
>
</Modal>
<!-- ends here -->
</Page>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { getStoreFilesAPI } from "../../service/fileService";
import { generateRandomKeysAPI, importLicenseKeyCSVAPI } from "../../service/KeyService";
import VueMultiselect from "vue-multiselect";
import { API_URL, getCurrentShop, APP_DOMAIN } from "../../config";
import axios from "axios";
import { defineProps, defineEmits } from "vue";
import { notifyOnProcuctFilesChangeAPI } from "../../service/notificationService";
/** loading */
const isNotifyAllBuyersLoading = ref(false);
const isFilesForProductLoading = ref(false);
import { GridCell } from "@ownego/polaris-vue";
import { Spinner } from "@ownego/polaris-vue";
import { ModalSection } from "@ownego/polaris-vue";
import { Card } from "@ownego/polaris-vue";
import { Button } from "@ownego/polaris-vue";
import { StackItem } from "@ownego/polaris-vue";
import { Modal } from "@ownego/polaris-vue";
import { Page } from "@ownego/polaris-vue";
import { Grid } from "@ownego/polaris-vue";
import { Stack } from "@ownego/polaris-vue";
import { Select } from "@ownego/polaris-vue";
import { TextField } from "@ownego/polaris-vue";
const isNotificationCustomMailModalOn = ref(false);
const customMailPlainHTML = ref("");
const setIsNotificationCustomMailModalOff = () => {
isNotificationCustomMailModalOn.value = false;
};
const setIsNotificationCustomMailModalOn = () => {
isNotificationCustomMailModalOn.value = true;
};
const emit = defineEmits(["onSave", "onImportLicenseKeyCSV"]);
const props = defineProps({
product: Object,
isEditMode: Boolean,
redirect: String,
});
/** toast import */
import { showToast } from "../../service/common.js";
const uploading = ref(false);
const fileUploadProgress = ref(0);
const savedFiles = ref([]);
const selectedFiles = ref([]);
const selectedLicenseKeyAction = ref("");
const productModel = ref(props.product || {});
const fileOptions = ref([]);
const fileUploadActive = ref(false);
const isLicenseKeyCSVImportLoading = ref(false);
const productKeySwitch = ref("");
/** computed property for the add key count field */
/** ends here */
onMounted(async () => {
/** load the files here */
isFilesForProductLoading.value = true;
await onFilesLoaded();
isFilesForProductLoading.value = false;
});
const handleFileChange = (event) => {
selectedFiles.value = Array.from(event.target.files);
};
const handleCSVFileChange = async (event) => {
const selectedCSVFile = event.target.files[0];
if (selectedCSVFile && !selectedCSVFile.name.endsWith(".csv")) {
showToast("Please upload valid csv file.");
event.target.value = null;
return false;
}
//trigger event for change
event.target.value = null;
/** upload the file over here */
const csvFormData = new FormData();
csvFormData.append("csv_file", selectedCSVFile);
isLicenseKeyCSVImportLoading.value = true;
await importLicenseKeyCSVAPI(csvFormData).then((response) => {
const { msg, status, license_keys } = response.data;
if (status === "success" && license_keys.length > 0) {
isLicenseKeyCSVImportLoading.value = false;
//do the editProductAPI
emit("onImportLicenseKeyCSV", {
product: productModel.value,
license_keys,
action: selectedLicenseKeyAction.value,
});
}
if (status === "failed") {
showToast(msg);
isLicenseKeyCSVImportLoading.value = false;
return false;
}
});
/** ends here */
};
const attachFiles = async () => {
uploadWithAttachFiles().then(() => {
console.log("I think its done");
selectedFiles.value = [];
const fileInput = document.getElementById("file-input");
fileInput.value = "";
onFilesLoaded().then(() => {
//console.log("result:", [...productModel.value.product_files, ...savedFiles.value])
productModel.value.product_files = [
...productModel.value.product_files,
...savedFiles.value,
];
});
});
};
const uploadWithAttachFiles = async () => {
if (!selectedFiles.value.length) {
showToast("Please select files to upload for your product");
return;
}
uploading.value = true;
try {
await Promise.all(selectedFiles.value.map((file) => uploadFile(file))); // Renamed from "files"
console.log("All files uploaded successfully");
} catch (error) {
console.error("One or more file uploads failed", error);
console.error("Some file uploads failed");
}
uploading.value = false;
fileUploadProgress.value = 0;
};
const uploadFile = async (file) => {
const currentShop = getCurrentShop();
console.log("CURRENT SHOP", currentShop);
const params = {
store: currentShop,
};
const presignURLResponse = await axios.post(
`${API_URL}/fetch/presignURL`,
{
file_name: String(file.name),
},
{ params }
);
if (presignURLResponse.data.status === "success") {
const config = {
headers: {
"Content-Type": file.type,
"Content-Disposition": `attachment; filename=${presignURLResponse.data.file_name}`,
},
onUploadProgress: (event) => {
const percentComplete = (event.loaded / event.total) * 100;
fileUploadProgress.value = Math.round(percentComplete);
},
};
try {
await axios.put(presignURLResponse.data.responseURL, file, config);
console.log(`File '${file.name}' uploaded successfully`); // Show success toast
await axios.post(
`${API_URL}/save/file`,
{
file_name: presignURLResponse.data.file_name,
file_display_name: file.name,
file_size: file.size,
},
{ params }
);
savedFiles.value.push({
label: file.name,
value: presignURLResponse.data.file_name,
});
console.log("File info saved successfully");
} catch (error) {
console.error("File upload or saving failed", error);
console.log(`File '${file.name}' upload failed`); // Show error toast
}
}
};
const onFilesLoaded = async () => {
const currentShop = getCurrentShop();
const params = {
store: currentShop,
skip_pagination: "yes",
};
return getStoreFilesAPI(params).then((data) => {
fileOptions.value = data.data.data.map((file) => ({
label: file.file_display_name,
value: file.file_name,
}));
});
};
const UploadFileToggle = () => {
fileUploadActive.value = !fileUploadActive.value;
};
const openCSVBrowseDialog = () => {
const csvFileInput = document.getElementById("csvFileInput");
if (csvFileInput) {
csvFileInput.click();
}
};
const onProductKeyTypeSelect = (key_type) => {
productModel.value.product_keys_type = key_type;
//only check for random keys
if (event.target.value == "random-keys") {
productModel.value.product_keys_count = 10;
onPopulateKeys(productModel.value.product_keys_count);
} else {
productModel.value.product_keys = [];
productModel.value.product_keys_count = 0;
}
};
const onProductKeyLimitChange = () => {
if (productKeySwitch.value !== "specific-keys")
onPopulateKeys(productModel.value.product_keys_count);
};
const onPopulateKeys = (limit) => {
let license_keys = [];
for (let key = 1; key <= limit; key++) {
let license_key = generateRandomKeysAPI(10);
license_keys.push(license_key);
}
productModel.value.product_keys = license_keys.join("\n");
};
const onProductSave = () => {
//validations here (notify accordingly)
//check if we have picked a product
if (!productModel.value.product_name && productModel.value.product_name.trim()) {
showToast("Please select product first.");
return false;
}
if (
productModel.value.product_variants &&
productModel.value.product_variants.length < 1
) {
showToast("Please select any variant(s) for your product");
return false;
}
if (productModel.value.product_files && productModel.value.product_files.length < 1) {
showToast("Please select files for your product");
return false;
}
if (
props.isEditMode === false &&
productModel.value.product_keys &&
productModel.value.product_keys.length > 0
) {
const productLicenseKeys = [
...new Set(
productModel.value.product_keys
.split(/\r?\n/)
.filter((line) => line.trim() !== "")
),
];
productModel.value.product_keys = productLicenseKeys;
}
/** also set the product key count && key type */
productModel.value.product_keys_count =
productKeySwitch.value === "random-keys"
? productModel.value.product_keys_count
: productModel.value.product_keys.length;
productModel.value.product_keys_type =
productKeySwitch.value === "specific-keys" && !productModel.value.product_keys.length
? "no-keys"
: productKeySwitch.value;
const productData = productModel.value;
emit("onSave", productData);
};
/** computed property */
const getProductLicenseKeys = computed(() => {
console.log("PRODUCT MODAL", productModel.value.product_keys);
return productModel.value.product_keys.join("\n");
});
const onViewProduct = () => {
const currentShop = getCurrentShop();
let url = `https://${APP_DOMAIN}/do-test-order/${productModel.value.product_handle}?store=${currentShop}`;
window.open(url, "_blank");
};
const onNavigationToProducts = () => {
window.redirect.dispatch(window.actions.Redirect.Action.APP, "/products/add");
};
const onNotificationCustomEmailSend = () => {
const productID = productModel.value.id;
const customEmailMessage = customMailPlainHTML.value;
if (!productID) {
showToast("Invalid product id");
return false;
}
if (confirm("Do you want to send notificication to all buyers ?")) {
isNotifyAllBuyersLoading.value = true;
setIsNotificationCustomMailModalOff();
notifyOnProcuctFilesChangeAPI(productID, customEmailMessage).then((res) => {
showToast(res.msg);
isNotifyAllBuyersLoading.value = false;
});
}
};
const onFileChangeSendNotification = () => {
setIsNotificationCustomMailModalOn();
};
</script>
<style scoped></style>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style scoped>
.form-control {
font-size: 1rem;
line-height: 1.5;
color: #495057;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
`
HQCuong commented
Hi @shriDeveloper.
I just took a quick look at your code and noticed a few things:
- The 2 modals have the same level, not nested.
- I tried activating the 2 functions you mentioned and found that both modals work normally, you can see the photo below.
So I think there might be some error related to logic or other library work.
note : I've imported the complete PolarisVue in main.js and removed individual imports.
shriDeveloper commented
Hi @HQCuong , Apologies , I might have been more unclear in my explainationations , But what i am mean by nested Modals is :-
The above code is Product.vue (a component)
I have a button called as Edit product when onClick opens the EditProduct Modal.
So , I have the structure as :-
<Modal>
<title>Edit Product</title>
<Product/> --- This is the component (which has Notify All buyers and Upload Files button)
</Modal>
And this code is from ProductDashboard.vue which is below :-
<template>
<Page title="Products">
<Grid v-if="isProductDashboardLoading" :rows="{ lg: 1, xl: 1 }">
<GridCell
style="text-align: center"
:column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }"
>
<Spinner />
</GridCell>
</Grid>
<Grid v-if="!isProductDashboardLoading">
<GridCell :column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }">
<Banner
v-if="
(usageStatistics.product && usageStatistics.product.is_exhausted) ||
(usageStatistics.storage && usageStatistics.storage.is_exhausted)
"
:title="`Your ${usageStatistics.store_upgrade_plan.toUpperCase()} plan is exhausted. Please upgrade your account.`"
tone="warning"
>
<BlockStack inlineAlign="start" gap="500">
<InlineGrid>
<Text
v-if="usageStatistics.product.is_exhausted"
as="h5"
variant="headingMd"
>{{
`You have added ${usageStatistics.product.used} out of ${usageStatistics.product.available} product(s) limit.`
}}</Text
>
<Text
as="h5"
variant="headingMd"
v-if="usageStatistics.storage.is_exhausted"
>
{{
`You have added ${formatBytes(
usageStatistics.storage.used
)} out of ${formatBytes(usageStatistics.available)} storage limit.`
}}
</Text>
</InlineGrid>
<InlineGrid columns="1fr">
<Button variant="primary" size="large" @click="onUpgradeAccount"
>Upgrade My Account</Button
>
</InlineGrid>
</BlockStack>
</Banner>
</GridCell>
</Grid>
<Grid v-if="products.length">
<GridCell
style="text-align: right; padding: 10px"
:column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }"
>
<Button @click="onAddProduct" variant="primary" size="large">Add Product</Button>
</GridCell>
</Grid>
<Grid v-if="products.length" style="padding: 10px">
<GridCell :column-span="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }">
<Pagination
style="text-align: center"
:has-previous="hasProductsPrevious !== null"
:has-next="hasProductsNext !== null"
@previous="handlePrevious"
@next="handleNext"
></Pagination>
</GridCell>
<GridCell :column-span="{ xs: 5, sm: 5, md: 5, lg: 9, xl: 9 }">
<TextField
type="text"
v-model="productSearchQuery"
autoComplete="text"
placeholder="Search for product digital by name"
@keyup.enter="onProductSearchOnDashboard"
/>
</GridCell>
<GridCell
style="text-align: right"
:column-span="{ xs: 6, sm: 6, md: 6, lg: 1, xl: 1 }"
>
<Button
:loading="isProductDashboardLoading"
variant="primary"
size="large"
@click="onProductSearchOnDashboard"
>
Search
</Button>
</GridCell>
</Grid>
<Card v-if="products.length" style="margin-top: 5px" sectioned>
<Grid>
<GridCell :column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }">
<IndexTable
:item-count="products.length"
:loading="navigationForNextAndPreviousLoader"
:headings="[
{
title: 'Image',
},
{
title: 'Name',
},
{
title: 'Attached Variant(s)',
},
{
title: 'Action',
},
]"
:selectable="false"
>
<IndexTableRow
v-for="(product, index) in products"
:key="product.id"
:id="product.id"
:position="index"
>
<IndexTableCell>
<Link
dataPrimaryLink
@click="() => console.log(`Clicked but not needed`)"
>
<img
:src="product.product_image"
alt="..."
style="height: 50px; width: 50px; object-fit: cover"
/>
</Link>
</IndexTableCell>
<IndexTableCell>
<TextStyle variation="strong">{{
truncateProductName(product.product_name)
}}</TextStyle>
</IndexTableCell>
<IndexTableCell>
<span style="font-weight: bold">
<Tag
v-if="
product.product_variants.length === 1 &&
product.product_variants[0].name === 'Default Title'
"
>
Default Variant
</Tag>
<Tooltip v-else>
<template #content>
<Badge
progress="complete"
status="success"
v-for="product_variant in product.product_variants"
v-bind:key="product_variant.id"
style="margin-top: 1px"
>
{{ product_variant.name }}
</Badge>
</template>
<Tag>{{ product.product_variants.length }} variant(s)</Tag>
</Tooltip>
</span>
</IndexTableCell>
<IndexTableCell>
<Button
size="slim"
@click="setProductEditModalOpen(product, index)"
outlined
:loading="isProductEditLoading[index]"
>
Edit </Button
>
<Button size="slim" @click="onDeleteProduct(product.id)"> Delete </Button
>
<Button size="slim" @click="onGenerateLinkForProduct(product)">
View
</Button>
</IndexTableCell>
</IndexTableRow>
</IndexTable>
</GridCell>
</Grid>
</Card>
<Grid v-if="!isProductDashboardLoading && !products.length" style="margin-top: 5px">
<GridCell :column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }">
<Card>
<EmptyState
image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
>
<p>Add digital products on your store.</p>
<template #footerContent>
<Button size="large" variant="primary" @click="onAddProduct"
>Add Digital Product</Button
>
</template>
</EmptyState>
</Card>
</GridCell>
</Grid>
<Modal
sectioned
size="large"
:open="isProductEditModalOpen"
:clickOutsideToClose="false"
@close="setProductEditModalClose"
>
<template #title> {{ productFilesModelTitle }} - Edit </template>
<!-- Spinner -->
<Grid
v-if="isProductEditSaveLoading"
:rows="{ lg: 1 }"
style="margin-top: 40px; margin-bottom: 40px"
>
<GridCell
style="text-align: center"
:column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }"
>
<Spinner />
</GridCell>
</Grid>
<!-- ends here -->
<!-- erros for duplicates -->
<Grid v-if="errors.length">
<GridCell :column-span="{ xs: 6, sm: 3, md: 3, lg: 12, xl: 12 }">
<Banner :title="errors[0].reason" status="critical">
<p>{{ errors[0].msg }}</p>
</Banner>
</GridCell>
</Grid>
<!-- ends here -->
<!-- product edit modal container -->
<Product
v-if="!isProductEditSaveLoading"
:product="productModel"
:isEditMode="true"
@onSave="onProductSave"
@onImportLicenseKeyCSV="onProductLicenseKeySave"
>
</Product>
<!-- ends here -->
</Modal>
<Modal
:clickOutsideToClose="false"
:open="isProductLinkModalOpen"
@close="setProductLinkModalClose"
>
<template #title> {{ productFilesModelTitle }}| Files </template>
<Grid style="padding: 30px">
<GridCell :column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }">
<!-- second row -->
<Grid :rows="{ lg: 1 }">
<GridCell :column-span="{ xs: 6, sm: 6, md: 6, lg: 12, xl: 12 }">
<!-- router-view -->
<div
style="display: flex; margin-bottom: 20px"
v-for="file in productFiles"
:key="file.id"
>
<input type="text" class="form-control" :value="file.file_url" disabled />
<Button variant="primary" size="large" @click="onClipBoard(file.file_url)"
>Copy</Button
>
</div>
</GridCell>
</Grid>
<!-- ends here -->
</GridCell>
</Grid>
<!-- product list here -->
</Modal>
<FooterHelp>
Learn more about
<Link url="https://help.shopify.com/manual/orders/fulfill-orders">
adding products
</Link>
</FooterHelp>
</Page>
</template>
<script setup>
import { getCurrentShop } from "../../config";
import { ref, onMounted, watch } from "vue";
import {
getAllProductsAPI,
getShopifyProductVariantsAPI,
getProductInfoAPI,
editProductAPI,
deleteProductAPI,
getIndividualProductAPI,
getPaginatedProductAPI,
} from "../../service/productService";
import { formatBytes } from "../../service/common";
/** polaris individual imports */
import { Badge } from "@ownego/polaris-vue";
import { Banner } from "@ownego/polaris-vue";
import { GridCell } from "@ownego/polaris-vue";
import { Text } from "@ownego/polaris-vue";
import { Button } from "@ownego/polaris-vue";
import { EmptyState } from "@ownego/polaris-vue";
import { Grid } from "@ownego/polaris-vue";
import { Modal } from "@ownego/polaris-vue";
import { Page } from "@ownego/polaris-vue";
import { Spinner } from "@ownego/polaris-vue";
import { Tooltip } from "@ownego/polaris-vue";
import { Tag } from "@ownego/polaris-vue";
import { TextField } from "@ownego/polaris-vue";
/** the index tazble options */
import { IndexTable } from "@ownego/polaris-vue";
import { IndexTableCell } from "@ownego/polaris-vue";
import { IndexTableRow } from "@ownego/polaris-vue";
/** ends here */
import { Pagination } from "@ownego/polaris-vue";
import { getStoreInformationAPI } from "../../service/shopService";
import Product from "../../components/products/Product.vue";
import { showToast } from "../../service/common.js";
import { Card } from "@ownego/polaris-vue";
const isProductDashboardLoading = ref(false);
import { saveLicenseKeyCSVAPI, deleteLicenseKeyCSVAPI } from "../../service/KeyService";
const usageStatistics = ref({});
const isProductEditModalOpen = ref(false);
const isProductLinkModalOpen = ref(false);
const isProductEditLoading = ref([]);
const isProductEditSaveLoading = ref(false);
const products = ref([]);
const productsCount = ref(0);
const hasProductsNext = ref("");
const hasProductsPrevious = ref("");
const navigationForNextAndPreviousLoader = ref(false);
const productFilesModelTitle = ref("");
const productModel = ref({});
const productFiles = ref([]);
const errors = ref([]);
const productSearchQuery = ref("");
const overridedRowClickEvent = (event) => {
event.preventDefault();
};
/** product_name truncation function */
const truncateProductName = (productName) => {
return productName.length > 30 ? productName.substring(0, 20) + "..." : productName;
};
/** ends here */
/** product search on dashboard */
const onProductSearchOnDashboard = async () => {
const productSearchQueryT = String(productSearchQuery.value).trim();
if (!productSearchQueryT) {
return;
}
const currentShop = getCurrentShop();
const params = {
store: currentShop,
q: productSearchQueryT,
};
isProductDashboardLoading.value = true;
await onPaginatedSearchForProduct(params).then((response) => {
isProductDashboardLoading.value = false;
console.log("Loading", response);
});
};
/** ends here */
const onPaginatedSearchForProduct = async (params) => {
return getAllProductsAPI(params).then((response) => {
const { results, count, next, previous } = response.data;
if (results.status == "success" && results.data.length) {
products.value = results.data;
productsCount.value = count;
hasProductsNext.value = next;
hasProductsPrevious.value = previous;
} else if (!results.data.length) {
showToast("No product found for the search query");
} else {
console.log("failld:", response);
}
});
};
const handleNext = () => {
if (hasProductsNext.value) {
navigationForNextAndPreviousLoader.value = true;
const nextProductURL = hasProductsNext.value;
getPaginatedProductAPI(nextProductURL).then((response) => {
const { results, count, next, previous } = response.data;
if (results.status == "success") {
products.value = results.data;
productsCount.value = count;
hasProductsNext.value = next;
hasProductsPrevious.value = previous;
navigationForNextAndPreviousLoader.value = false;
} else {
console.log("failld:", response);
}
});
//ends here
}
};
const handlePrevious = () => {
if (hasProductsPrevious.value) {
navigationForNextAndPreviousLoader.value = true;
const previousProductURL = hasProductsPrevious.value;
getPaginatedProductAPI(previousProductURL).then((response) => {
const { results, count, next, previous } = response.data;
if (results.status == "success") {
products.value = results.data;
productsCount.value = count;
hasProductsNext.value = next;
hasProductsPrevious.value = previous;
navigationForNextAndPreviousLoader.value = false;
} else {
console.log("failld:", response);
}
});
//ends here
}
};
const setProductEditModalOpen = async (product, index) => {
const currentShop = getCurrentShop();
/** reset the duplicate keys */
errors.value = [];
/** give a title to the Modal */
productFilesModelTitle.value = product.product_name;
/** show product details */
/** ends here */
isProductEditLoading.value[index] = true;
productModel.value = {
...product,
product_variants_options: [],
};
const params = {
store: currentShop,
product_id: productModel.value.product_id.replace(/\D/g, ""),
};
try {
const [productInfoResponse, productVariantsResponse] = await Promise.all([
getProductInfoAPI(productModel.value.id, params),
getProductVariants(params),
]);
productModel.value.product_files = productInfoResponse.data.data.product_files.map(
(entry) => ({
label: entry.file_display_name,
value: entry.file_name,
})
);
productModel.value.product_keys =
productInfoResponse.data.data.product_active_license_keys;
productModel.value.product_keys_count =
productInfoResponse.data.data.product_active_license_keys.length;
productModel.value.product_add_license_keys = [];
productModel.value.product_remove_license_keys = [];
productModel.value.product_variants = productInfoResponse.data.data.product_variants.map(
(obj) => ({ label: obj.name, value: obj.id })
);
productVariantsResponse.data.data.forEach((variant) => {
const title = variant.sku
? `${variant.title} - SKU - ${variant.sku}`
: variant.title;
productModel.value.product_variants_options.push({
label: title,
value: variant.id,
});
});
productModel.value.is_only_default_variant_available =
productModel.value.product_variants_options.length == 1;
isProductEditModalOpen.value = true;
isProductEditLoading.value[index] = false;
console.log("PRODUCT MODEL", productModel.value);
} catch (error) {
console.error("Error:", error);
}
};
const setProductEditModalClose = () => {
isProductEditModalOpen.value = false;
};
const setProductLinkModalClose = () => {
productFiles.value = [];
isProductLinkModalOpen.value = false;
};
const fetchProducts = async (params) => {
return getAllProductsAPI(params).then((response) => {
const { results, count, next, previous } = response.data;
if (results.status == "success") {
products.value = results.data;
productsCount.value = count;
hasProductsNext.value = next;
hasProductsPrevious.value = previous;
} else {
console.log("failld:", response);
}
});
};
const initDashboard = async () => {
const currentShop = getCurrentShop();
const params = {
store: currentShop,
};
await getStoreInformationAPI(currentShop).then((response) => {
if (response.status === "success") {
usageStatistics.value.product = response.product;
usageStatistics.value.storage = response.storage;
usageStatistics.value.store_plan = response.data.store_plan;
usageStatistics.value.store_upgrade_plan = response.data.store_upgrade_plan;
}
});
await fetchProducts(params).then((response) => {
console.log("Loading", response);
});
};
onMounted(async () => {
isProductDashboardLoading.value = true;
await initDashboard();
isProductDashboardLoading.value = false;
});
/** methods */
const getProductVariants = (params) => {
return getShopifyProductVariantsAPI(params).then((response) => response);
};
const onProductLicenseKeySave = async (payload) => {
isProductEditSaveLoading.value = true;
const product_id = payload.product.id;
const license_keys = payload.license_keys;
const license_keys_action = payload.action;
if (license_keys_action === "add_license_keys") {
saveLicenseKeyCSVAPI(product_id, license_keys).then(async (response) => {
if (response.status === "success") {
/** now just refresh the license keys count */
const productAPIResponse = await getIndividualProductAPI(product_id);
const { status, data } = productAPIResponse;
if (status === "success" && data) {
/** now just change the product license keys */
productModel.value.product_keys = data.product_active_license_keys;
productModel.value.product_keys_count = data.product_active_license_keys.length;
/** ends here */
showToast(`License keys successfully added for the product.`);
isProductEditSaveLoading.value = false;
}
/** ends here */
errors.value = [];
}
if (response.status === "failed") {
if (response.reason && response.reason === "DUPLICATE_LICENSE_KEYS_FOUND") {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
errors.value.push({
reason: response.reason,
data: response.data,
msg: response.msg,
});
return false;
}
if (response.reason && response.reason === "INVALID_FILE_AS_LICENSE_KEYS_FOUND") {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
errors.value.push({
reason: response.reason,
data: response.data,
msg: response.msg,
});
return false;
}
}
});
} else if (license_keys_action === "remove_license_keys") {
deleteLicenseKeyCSVAPI(product_id, license_keys).then(async (response) => {
if (response.status === "success") {
/** now just refresh the license keys count */
const productAPIResponse = await getIndividualProductAPI(product_id);
const { status, data } = productAPIResponse;
if (status === "success" && data) {
/** now just change the product license keys */
productModel.value.product_keys = data.product_active_license_keys;
productModel.value.product_keys_count = data.product_active_license_keys.length;
/** ends here */
showToast(`License keys successfully removed for the product.`);
isProductEditSaveLoading.value = false;
}
/** ends here */
errors.value = [];
}
if (response.status === "failed") {
if (response.reason && response.reason === "DUPLICATE_LICENSE_KEYS_FOUND") {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
errors.value.push({
reason: response.reason,
data: response.data,
msg: response.msg,
});
return false;
}
if (response.reason && response.reason === "INVALID_FILE_AS_LICENSE_KEYS_FOUND") {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
errors.value.push({
reason: response.reason,
data: response.data,
msg: response.msg,
});
return false;
}
}
});
}
};
const onAddProduct = () => {
if (
usageStatistics.value &&
usageStatistics.value.product &&
usageStatistics.value.storage &&
(usageStatistics.value.product.is_exhausted ||
usageStatistics.value.storage.is_exhausted)
) {
showToast(
"You have exhausted your free plan. Please upgrade your account to add more products"
);
return false;
}
window.redirect.dispatch(window.actions.Redirect.Action.APP, "/products/add");
};
const onProductSave = async (product) => {
const currentShop = getCurrentShop();
isProductEditSaveLoading.value = true;
//reset the duplicate keys over here
errors.value = [];
console.log("OPTIONS", product.product_variants_options);
console.log("PRODUCT VARIANTS", product.product_variants);
const product_variants = product.product_variants_options.filter((obj1) =>
product.product_variants.some((obj2) => obj2.value === obj1.value)
);
console.log("MAN THIS IS GOOD", product_variants);
product.product_variants = product_variants.map((item) => item.value);
/** transform the product files array too */
product.product_files = product.product_files.map((item) => item.value);
/** ends here */
/** now also make sure that the license keys are unique before actual send */
product.product_add_license_keys = [
...new Set(String(product.product_add_license_keys).split(/\r?\n/)),
];
product.product_remove_license_keys = [
...new Set(String(product.product_remove_license_keys).split(/\r?\n/)),
];
/** ends here */
await editProductAPI(product, {
store: currentShop,
}).then(async (response) => {
if (response.status === "success") {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
isProductEditModalOpen.value = false;
/*** load the dashboard again */
await initDashboard();
/** ends here */
}
if (response.status === "failed") {
if (
response.reason &&
(response.reason === "DUPLICATE_LICENSE_KEYS_FOUND" ||
response.reason === "VARIANT_ALREADY_ADDED_ON_DASHBOARD" ||
response.reason === "INVALID_FILE_AS_LICENSE_KEYS_FOUND")
) {
showToast(`${response.msg}`);
isProductEditSaveLoading.value = false;
errors.value.push({
reason: response.reason,
data: response.data,
msg: response.msg,
});
return false;
}
}
});
};
const onDeleteProduct = async (product_id) => {
if (confirm("Do you want to delete the product ?")) {
await deleteProductAPI(product_id).then(async (data) => {
if (data.status == "success") {
//refresh the product load here
showToast(`Product has been deleted Successfully !`);
isProductDashboardLoading.value = true;
/*** load the dashboard again */
await initDashboard();
/** ends here */
isProductDashboardLoading.value = false;
}
});
}
};
const onGenerateLinkForProduct = (row) => {
productFilesModelTitle.value = row.product_name;
getIndividualProductAPI(row.id).then((data) => {
if (data.status == "success") {
productFiles.value = data.data.product_files;
isProductLinkModalOpen.value = true;
}
});
};
const onClipBoard = (file_url) => {
navigator.clipboard.writeText(file_url);
showToast(`File URL is copied`);
};
const onUpgradeAccount = () => {
window.redirect.dispatch(window.actions.Redirect.Action.APP, "/pricing");
};
/** watcher */
watch(productSearchQuery, async (newProductSearchQuery) => {
if (newProductSearchQuery === "") {
const currentShop = getCurrentShop();
const params = {
store: currentShop,
};
isProductDashboardLoading.value = true;
/** reset the product table over here */
await fetchProducts(params).then((response) => {
isProductDashboardLoading.value = false;
console.log("Loading", response);
});
/** ends here */
}
});
/** ends here */
</script>
<style>
.disabledRouterLink {
opacity: 0.5;
pointer-events: none;
}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
</style>
shriDeveloper commented
juzser commented
Ok, I still think it's because of the logic, not from the component.