atom/ics link copy to clipboard: using in "GroupView" + "EditIdentity" + "NotificationsView" + "AboutInstanceView" - refactoring to use same mecanizem (Issue #1496)

2025-07-30 17:29:19 +02:00
parent b339de8815
commit 35b73eb20c
5 changed files with 141 additions and 59 deletions
--- a/src/utils/share.ts
+++ b/src/utils/share.ts
@@ -1,3 +1,5 @@
+import { reactive } from "vue";
+
 export const twitterShareUrl = (
  url: string | undefined,
  text: string | undefined
@@ -75,6 +77,32 @@ export const mastodonShareUrl = (
  )}`;
 };

+export const showCopiedTooltip = reactive({ ics: false, atom: false });
+
+export const initCopiedTooltipShow = (): void => {
+  showCopiedTooltip.ics = false;
+  showCopiedTooltip.atom = false;
+};
+
+export const tokenToURL = (subURL: string): string => {
+  return `${window.location.origin}/${subURL}`;
+};
+
+export const copyURL = (
+  e: Event,
+  url: string,
+  format: "ics" | "atom"
+): void => {
+  if (navigator.clipboard) {
+    e.preventDefault();
+    navigator.clipboard.writeText(url);
+    showCopiedTooltip[format] = true;
+    setTimeout(() => {
+      showCopiedTooltip[format] = false;
+    }, 2000);
+  }
+};
+
 const basicTextToEncode = (url: string, text: string): string => {
  return `${text}\r\n${url}`;
 };
--- a/src/views/About/AboutInstanceView.vue
+++ b/src/views/About/AboutInstanceView.vue
@@ -86,20 +86,36 @@
        <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
          <td>{{ t("Instance feeds") }}</td>
          <td v-if="config.instanceFeeds.enabled" class="flex gap-2">
+            <o-tooltip
+              :label="t('URL copied to clipboard')"
+              :active="showCopiedTooltip.atom"
+              variant="success"
+              position="left"
+            />
            <o-button
              tag="a"
-              size="small"
              icon-left="rss"
-              href="/feed/instance/atom"
+              @click="
+                (e: Event) =>
+                  copyURL(e, tokenToURL('feed/instance/atom'), 'atom')
+              "
+              :href="tokenToURL('feed/instance/atom')"
              target="_blank"
              >{{ t("RSS/Atom Feed") }}</o-button
            >
-
+            <o-tooltip
+              :label="t('URL copied to clipboard')"
+              :active="showCopiedTooltip.ics"
+              variant="success"
+              position="left"
+            />
            <o-button
              tag="a"
-              size="small"
+              @click="
+                (e: Event) => copyURL(e, tokenToURL('feed/instance/ics'), 'ics')
+              "
              icon-left="calendar-sync"
-              href="/feed/instance/ics"
+              :href="tokenToURL('feed/instance/ics')"
              target="_blank"
              >{{ t("ICS/WebCal Feed") }}</o-button
            >
@@ -124,6 +140,14 @@ import { useQuery } from "@vue/apollo-composable";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@/utils/head";
+import {
+  showCopiedTooltip,
+  initCopiedTooltipShow,
+  copyURL,
+  tokenToURL,
+} from "@/utils/share";
+
+initCopiedTooltipShow();

 const { result: configResult } = useQuery<{ config: IConfig }>(ABOUT);

--- a/src/views/Account/children/EditIdentity.vue
+++ b/src/views/Account/children/EditIdentity.vue
@@ -133,9 +133,13 @@
              icon-left="rss"
              @click="
                (e: Event) =>
-                  copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                  copyURL(
+                    e,
+                    tokenToURL('events/going/' + feedToken.token + '/atom'),
+                    'atom'
+                  )
              "
-              :href="tokenToURL(feedToken.token, 'atom')"
+              :href="tokenToURL('events/going/' + feedToken.token + '/atom')"
              target="_blank"
              >{{ t("RSS/Atom Feed") }}</o-button
            >
@@ -149,10 +153,14 @@
              tag="a"
              @click="
                (e: Event) =>
-                  copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                  copyURL(
+                    e,
+                    tokenToURL('events/going/' + feedToken.token + '/ics'),
+                    'ics'
+                  )
              "
              icon-left="calendar-sync"
-              :href="tokenToURL(feedToken.token, 'ics')"
+              :href="tokenToURL('events/going/' + feedToken.token + '/ics')"
              target="_blank"
              >{{ t("ICS/WebCal Feed") }}</o-button
            >
@@ -225,7 +233,7 @@ import {
 } from "@/composition/apollo/actor";
 import { useMutation, useQuery, useApolloClient } from "@vue/apollo-composable";
 import { useAvatarMaxSize } from "@/composition/config";
-import { computed, inject, reactive, ref, watch } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { convertToUsername } from "@/utils/username";
 import { Dialog } from "@/plugins/dialog";
@@ -233,6 +241,14 @@ import { Notifier } from "@/plugins/notifier";
 import { AbsintheGraphQLErrors } from "@/types/errors.model";
 import { ICurrentUser } from "@/types/current-user.model";
 import { useHead } from "@/utils/head";
+import {
+  showCopiedTooltip,
+  initCopiedTooltipShow,
+  copyURL,
+  tokenToURL,
+} from "@/utils/share";
+
+initCopiedTooltipShow();

 const { t } = useI18n({ useScope: "global" });
 const router = useRouter();
@@ -301,7 +317,6 @@ const avatarMaxSize = useAvatarMaxSize();

 const errors = ref<string[]>([]);
 const avatarFile = ref<File | null>(null);
-const showCopiedTooltip = reactive({ ics: false, atom: false });

 const isUpdate = computed(() => props.isUpdate);
 const identityName = computed(() => props.identityName);
@@ -518,21 +533,6 @@ const getInstanceHost = computed((): string => {
  return MOBILIZON_INSTANCE_HOST;
 });

-const tokenToURL = (token: string, format: string): string => {
-  return `${window.location.origin}/events/going/${token}/${format}`;
-};
-
-const copyURL = (e: Event, url: string, format: "ics" | "atom"): void => {
-  if (navigator.clipboard) {
-    e.preventDefault();
-    navigator.clipboard.writeText(url);
-    showCopiedTooltip[format] = true;
-    setTimeout(() => {
-      showCopiedTooltip[format] = false;
-    }, 2000);
-  }
-};
-
 const generateFeedTokens = async (): Promise<void> => {
  await createNewFeedToken({ actor_id: identity.value?.id });
 };
--- a/src/views/Group/GroupView.vue
+++ b/src/views/Group/GroupView.vue
@@ -244,6 +244,12 @@
              >
                {{ t("Share") }}
              </o-button>
+              <o-tooltip
+                :label="t('URL copied to clipboard')"
+                :active="showCopiedTooltip.atom || showCopiedTooltip.ics"
+                variant="success"
+                position="right"
+              />
              <o-dropdown aria-role="list">
                <template #trigger>
                  <o-button
@@ -278,8 +284,16 @@
                />
                <o-dropdown-item has-link aria-role="menuitem">
                  <a
-                    :href="`@${preferredUsername}/feed/atom`"
+                    :href="tokenToURL('@' + preferredUsername + '/feed/atom')"
                    :title="t('Atom feed for events and posts')"
+                    @click="
+                      (e: Event) =>
+                        copyURL(
+                          e,
+                          tokenToURL('@' + preferredUsername + '/feed/atom'),
+                          'atom'
+                        )
+                    "
                    class="inline-flex gap-1"
                  >
                    <RSS />
@@ -288,8 +302,16 @@
                </o-dropdown-item>
                <o-dropdown-item has-link aria-role="menuitem">
                  <a
-                    :href="`@${preferredUsername}/feed/ics`"
+                    :href="tokenToURL('@' + preferredUsername + '/feed/ics')"
                    :title="t('ICS feed for events')"
+                    @click="
+                      (e: Event) =>
+                        copyURL(
+                          e,
+                          tokenToURL('@' + preferredUsername + '/feed/ics'),
+                          'ics'
+                        )
+                    "
                    class="inline-flex gap-1"
                  >
                    <CalendarSync />
@@ -674,6 +696,14 @@ import { useGroupResourcesList } from "@/composition/apollo/resources";
 import { useGroupMembers } from "@/composition/apollo/members";
 import GroupSection from "@/components/Group/GroupSection.vue";
 import { useIsLongEvents } from "@/composition/apollo/config";
+import {
+  showCopiedTooltip,
+  initCopiedTooltipShow,
+  copyURL,
+  tokenToURL,
+} from "@/utils/share";
+
+initCopiedTooltipShow();

 const props = defineProps<{
  preferredUsername: string;
--- a/src/views/Settings/NotificationsView.vue
+++ b/src/views/Settings/NotificationsView.vue
@@ -248,13 +248,21 @@
            icon-left="rss"
            @click="
              (e: Event) =>
-                copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                copyURL(
+                  e,
+                  tokenToURL('events/going/' + feedToken.token + 'atom'),
+                  'atom'
+                )
            "
            @keyup.enter="
              (e: Event) =>
-                copyURL(e, tokenToURL(feedToken.token, 'atom'), 'atom')
+                copyURL(
+                  e,
+                  tokenToURL('events/going/' + feedToken.token + 'atom'),
+                  'atom'
+                )
            "
-            :href="tokenToURL(feedToken.token, 'atom')"
+            :href="tokenToURL('events/going/' + feedToken.token + 'atom')"
            target="_blank"
            >{{ $t("RSS/Atom Feed") }}</o-button
          >
@@ -269,14 +277,22 @@
            tag="a"
            @click="
              (e: Event) =>
-                copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                copyURL(
+                  e,
+                  tokenToURL('events/going/' + feedToken.token + 'ics'),
+                  'ics'
+                )
            "
            @keyup.enter="
              (e: Event) =>
-                copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
+                copyURL(
+                  e,
+                  tokenToURL('events/going/' + feedToken.token + 'ics'),
+                  'ics'
+                )
            "
            icon-left="calendar-sync"
-            :href="tokenToURL(feedToken.token, 'ics')"
+            :href="tokenToURL('events/going/' + feedToken.token + 'ics')"
            target="_blank"
            >{{ $t("ICS/WebCal Feed") }}</o-button
          >
@@ -328,19 +344,19 @@ import {
 import merge from "lodash/merge";
 import { CONFIG } from "@/graphql/config";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import {
-  computed,
-  inject,
-  onBeforeMount,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-} from "vue";
+import { computed, inject, onBeforeMount, onMounted, ref, watch } from "vue";
 import { IConfig } from "@/types/config.model";
 import { useI18n } from "vue-i18n";
 import { useHead } from "@/utils/head";
 import { Dialog } from "@/plugins/dialog";
+import {
+  showCopiedTooltip,
+  initCopiedTooltipShow,
+  copyURL,
+  tokenToURL,
+} from "@/utils/share";
+
+initCopiedTooltipShow();

 type NotificationSubType = { label: string; id: string };
 type NotificationType = { label: string; subtypes: NotificationSubType[] };
@@ -380,7 +396,6 @@ const groupNotifications = ref<INotificationPendingEnum | undefined>(
 );
 const notificationPendingParticipationValues = ref<Record<string, unknown>>({});
 const groupNotificationsValues = ref<Record<string, unknown>>({});
-const showCopiedTooltip = reactive({ ics: false, atom: false });
 const subscribed = ref(false);
 const canShowWebPush = ref(false);

@@ -635,21 +650,6 @@ const { mutate: updateSetting } = useMutation<{ setUserSettings: string }>(
  () => ({ refetchQueries: [{ query: USER_NOTIFICATIONS }] })
 );

-const tokenToURL = (token: string, format: string): string => {
-  return `${window.location.origin}/events/going/${token}/${format}`;
-};
-
-const copyURL = (e: Event, url: string, format: "ics" | "atom"): void => {
-  if (navigator.clipboard) {
-    e.preventDefault();
-    navigator.clipboard.writeText(url);
-    showCopiedTooltip[format] = true;
-    setTimeout(() => {
-      showCopiedTooltip[format] = false;
-    }, 2000);
-  }
-};
-
 const dialog = inject<Dialog>("dialog");

 const openRegenerateFeedTokensConfirmation = () => {