mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
fix: show copy to clipboard failure (#2886)
* fix for AppButtonCopy * add some logging * fix if statement * refactor, use .then * check for copied * Fix recipe share link * refactor AppButtonCopy * update tooltip text * update use-copy * logging * fix is supported check * more fixes for use-copy.ts --------- Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
parent
f6f9a1c532
commit
6a71af98bd
@ -143,7 +143,7 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
const { share, isSupported: shareIsSupported } = useShare();
|
||||
const { copy } = useClipboard();
|
||||
const { copy, copied, isSupported } = useClipboard();
|
||||
|
||||
function getRecipeText() {
|
||||
return i18n.t("recipe.share-recipe-message", [props.name]);
|
||||
@ -154,8 +154,18 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
async function copyTokenLink(token: string) {
|
||||
await copy(getTokenLink(token));
|
||||
alert.success(i18n.t("recipe-share.recipe-link-copied-message") as string);
|
||||
if (isSupported.value) {
|
||||
await copy(getTokenLink(token));
|
||||
if (copied.value) {
|
||||
alert.success(i18n.t("recipe-share.recipe-link-copied-message") as string);
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("general.clipboard-copy-failure") as string);
|
||||
}
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("general.clipboard-not-supported") as string);
|
||||
}
|
||||
}
|
||||
|
||||
async function shareRecipe(token: string) {
|
||||
|
@ -2,7 +2,7 @@
|
||||
<v-tooltip
|
||||
ref="copyToolTip"
|
||||
v-model="show"
|
||||
color="success lighten-1"
|
||||
:color="copied? 'success lighten-1' : 'red lighten-1'"
|
||||
top
|
||||
:open-on-hover="false"
|
||||
:open-on-click="true"
|
||||
@ -29,12 +29,14 @@
|
||||
<v-icon left dark>
|
||||
{{ $globals.icons.clipboardCheck }}
|
||||
</v-icon>
|
||||
<slot> {{ $t("general.copied_message") }} </slot>
|
||||
<slot v-if="!isSupported"> {{ $t("general.your-browser-does-not-support-clipboard") }} </slot>
|
||||
<slot v-else> {{ copied ? $t("general.copied_message") : $t("general.clipboard-copy-failure") }} </slot>
|
||||
</span>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useClipboard } from "@vueuse/core"
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { VTooltip } from "~/types/vuetify";
|
||||
|
||||
@ -58,6 +60,7 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { copy, copied, isSupported } = useClipboard()
|
||||
const show = ref(false);
|
||||
const copyToolTip = ref<VTooltip | null>(null);
|
||||
|
||||
@ -65,13 +68,21 @@ export default defineComponent({
|
||||
copyToolTip.value?.deactivate();
|
||||
}
|
||||
|
||||
function textToClipboard() {
|
||||
async function textToClipboard() {
|
||||
if (isSupported.value) {
|
||||
await copy(props.copyText);
|
||||
if (copied.value) {
|
||||
console.log(`Copied\n${props.copyText}`)
|
||||
}
|
||||
else {
|
||||
console.warn("Copy failed: ", copied.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.warn("Clipboard is currently not supported by your browser. Ensure you're on a secure (https) site.");
|
||||
}
|
||||
|
||||
show.value = true;
|
||||
const copyText = props.copyText;
|
||||
navigator.clipboard.writeText(copyText).then(
|
||||
() => console.log(`Copied\n${copyText}`),
|
||||
() => console.log(`Copied Failed\n${copyText}`)
|
||||
);
|
||||
setTimeout(() => {
|
||||
toggleBlur();
|
||||
}, 500);
|
||||
@ -81,6 +92,8 @@ export default defineComponent({
|
||||
show,
|
||||
copyToolTip,
|
||||
textToClipboard,
|
||||
copied,
|
||||
isSupported,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -7,23 +7,30 @@ export function useCopy() {
|
||||
const { i18n } = useContext();
|
||||
|
||||
function copyText(text: string) {
|
||||
if (!isSupported) {
|
||||
if (!isSupported.value) {
|
||||
alert.error(i18n.tc("general.clipboard-not-supported"));
|
||||
return;
|
||||
}
|
||||
copy(text);
|
||||
alert.success(i18n.tc("general.copied-to-clipboard"));
|
||||
copy(text).then(() => {
|
||||
// Verify copy success as no error is thrown on failure.
|
||||
if (copied.value) {
|
||||
alert.success(i18n.tc("general.copied-to-clipboard"));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.tc("general.clipboard-copy-failure"));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return { copyText, copied };
|
||||
}
|
||||
|
||||
export function useCopyList() {
|
||||
const { copy, isSupported } = useClipboard();
|
||||
const { copy, isSupported, copied } = useClipboard();
|
||||
const { i18n } = useContext();
|
||||
|
||||
function checkClipboard() {
|
||||
if (!isSupported) {
|
||||
if (!isSupported.value) {
|
||||
alert.error(i18n.tc("general.your-browser-does-not-support-clipboard"));
|
||||
return false;
|
||||
}
|
||||
@ -54,7 +61,13 @@ export function useCopyList() {
|
||||
|
||||
function copyText(text: string, len: number) {
|
||||
copy(text).then(() => {
|
||||
alert.success(i18n.tc("general.copied-items-to-clipboard", len));
|
||||
// Verify copy success as no error is thrown on failure.
|
||||
if (copied.value) {
|
||||
alert.success(i18n.tc("general.copied-items-to-clipboard", len));
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.tc("general.clipboard-copy-failure"));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -198,7 +198,8 @@
|
||||
"refresh": "Refresh",
|
||||
"upload-file": "Upload File",
|
||||
"created-on-date": "Created on: {0}",
|
||||
"unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes."
|
||||
"unsaved-changes": "You have unsaved changes. Do you want to save before leaving? Okay to save, Cancel to discard changes.",
|
||||
"clipboard-copy-failure": "Failed to copy to the clipboard."
|
||||
},
|
||||
"group": {
|
||||
"are-you-sure-you-want-to-delete-the-group": "Are you sure you want to delete <b>{groupName}<b/>?",
|
||||
|
Loading…
x
Reference in New Issue
Block a user