Add new component for copying the link

client/src/components/ContentBlock.vue

@@ -71,6 +71,7 @@
         v-if="!contentBlock.indent"
       >
         {{ contentBlock.title }}
+        <copy-link :id="contentBlock.id" />
       </h4>
 
       <content-component
@@ -92,12 +93,21 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import AddContentButton from '@/components/AddContentButton';
+import { defineAsyncComponent } from 'vue';
-import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import AddContentButton from '@/components/AddContentButton.vue';
-import UserWidget from '@/components/UserWidget';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
-import VisibilityAction from '@/components/visibility/VisibilityAction';
+import UserWidget from '@/components/UserWidget.vue';
+import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
+import PopoverLink from '@/components/ui/PopoverLink.vue';
+import CopyLink from '@/components/CopyLink.vue';
 
+const ContentComponent = defineAsyncComponent(() =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent.vue')
+);
+</script>
+
+<script>
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
 import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
 import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
@@ -106,16 +116,10 @@ import me from '@/mixins/me';
 
 import { hidden } from '@/helpers/visibility';
 import { CONTENT_TYPE } from '@/consts/types';
-import PopoverLink from '@/components/ui/PopoverLink';
 import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
 import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
-import { defineAsyncComponent } from 'vue';
 import { instrumentCategory } from '@/helpers/instrumentType';
 
-const ContentComponent = defineAsyncComponent(() =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent')
-);
-
 export default {
   name: 'ContentBlock',
   props: {
@@ -135,15 +139,6 @@ export default {
 
   mixins: [me],
 
-  components: {
-    PopoverLink,
-    ContentComponent,
-    AddContentButton,
-    VisibilityAction,
-    MoreOptionsWidget,
-    UserWidget,
-  },
-
   computed: {
     canEditModule() {
       return !this.contentBlock.indent && this.editMode;
@@ -191,19 +186,19 @@ export default {
     },
     contentBlocksWithContentLists() {
       /*
-                      collects all content_list_items in content_lists:
+         collects all content_list_items in content_lists:
-                      {
+         {
-                        text_block,
+         text_block,
-                        content_list_item: [contents...],
+          content_list_item: [contents...],
-                        content_list_item: [contents...],
+          content_list_item: [contents...],
-                        text_block
+          text_block
-                      } becomes
+          } becomes
-                      {
+          {
-                        text_block,
+          text_block,
-                        content_list: [content_list_item: [contents...], content_list_item: [contents...]],
+          content_list: [content_list_item: [contents...], content_list_item: [contents...]],
-                        text_block
+          text_block
-                      }
+          }
-                      */
+       */
       let contentList = [];
       let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
         // collect content_list_items
@@ -360,6 +355,9 @@ export default {
   &__title {
     line-height: 1.5;
     margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: calc($small-spacing / 2);
   }
 
   &__instrument-label {

client/src/components/CopyLink.vue

@@ -0,0 +1,53 @@
+<template>
+  <div
+    class="copy-link"
+    @click="copyLink"
+  >
+    Link kopiert <link-icon class="copy-link__icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent, computed } from 'vue';
+
+const LinkIcon = defineAsyncComponent(() => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon.vue'));
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const directLink = computed(() => {
+  const { host, protocol } = window.location;
+  return `${protocol}//${host}/content/${props.id}`;
+});
+
+const copyLink = () => {
+  navigator.clipboard.writeText(directLink.value).then(
+    () => {
+      console.log('yay!', directLink.value);
+    },
+    () => {
+      console.log('nay!');
+    }
+  );
+};
+</script>
+
+<style lang="scss">
+@import '~styles/helpers';
+.copy-link {
+  background-color: $color-brand-light;
+  display: inline-flex;
+  align-items: center;
+  gap: $small-spacing;
+  padding: 0 $small-spacing;
+  border-radius: 5px;
+  cursor: pointer;
+  @include regular-text;
+
+  &__icon {
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>