add preview

assets/layout/_content.scss

@@ -34,6 +34,12 @@
         & .v-list-item-action {
             padding-right: 20px;
         }
+
+        &.disabled {
+            color: #fff !important;
+            pointer-events: none;
+            opacity: 0.7;
+        }
     }
 }
 

components/AppFooter.vue

@@ -0,0 +1,9 @@
+<template>
+    <v-footer color="#1414A0" padless>
+        <v-row justify="center" no-gutters class="pt-3">
+            <a href="https://github.com/diverta/front_nuxt_auth"><small class="my-4 pt-3 l-footer_copyright">Github repository</small></a>
+            <a href="https://kuroco.app/"><img src="~/assets/images/logo-kuroco.svg" width="120" class="pl-4 l-footer_logo" /></a>
+            <v-col class="#1414A0 text-center white--text" cols="12" />
+        </v-row>
+    </v-footer>
+</template>

composables/useAuth.js

@@ -92,7 +92,9 @@ export const useAuth = () => {
                 router.currentRoute.value.path === '/signup' ||
                 router.currentRoute.value.path === '/ja/signup' ||
                 router.currentRoute.value.path === '/reminder' ||
-                router.currentRoute.value.path === '/ja/reminder'
+                router.currentRoute.value.path === '/ja/reminder' ||
+                router.currentRoute.value.path === '/preview/topics_detail' ||
+                router.currentRoute.value.path === 'ja/preview/topics_detail'
             ) {
                 return;
             }
@@ -121,3 +123,40 @@ export const useAuth = () => {
         profile
     };
 };
+
+export const useNavDrawerItems = () => {
+    const items = [
+        {
+            icon: 'mdi-home',
+            title: 'Home',
+            titleLoggedIn: 'Home',
+            to: '/'
+        },
+        {
+            icon: 'mdi-newspaper-variant',
+            title: 'Articles',
+            to: '/topics_list'
+        },
+        {
+            icon: 'mdi-star',
+            title: 'Starred',
+            to: '/favourite'
+        },
+        {
+            icon: 'mdi-account-tie',
+            title: 'Member',
+            to: '/member'
+        },
+        {
+            icon: 'mdi-account-box',
+            title: 'My Profile',
+            to: '/profile'
+        },
+        {
+            icon: 'mdi-send',
+            title: 'Feedback',
+            to: '/inquiry'
+        }
+    ];
+    return items;
+};

layouts/default.vue

@@ -72,14 +72,7 @@
                     <slot />
                 </v-container>
             </v-main>
-
-            <v-footer color="#1414A0" padless>
-                <v-row justify="center" no-gutters class="pt-3">
-                    <a href="https://github.com/diverta/front_nuxt_auth"><small class="my-4 pt-3 l-footer_copyright">Github repository</small></a>
-                    <a href="https://kuroco.app/"><img src="~/assets/images/logo-kuroco.svg" width="120" class="pl-4 l-footer_logo" /></a>
-                    <v-col class="#1414A0 text-center white--text" cols="12" />
-                </v-row>
-            </v-footer>
+            <AppFooter />
         </v-app>
     </ClientOnly>
 </template>
@@ -89,7 +82,6 @@ const { authUser, isLoggedIn, logout } = useAuth();
 const { locale, setLocale } = useI18n();
 const localePath = useLocalePath();
 const router = useRouter();
-
 const drawer = ref(false);
 const clipped = ref(false);
 
@@ -109,37 +101,5 @@ const langOptions = [
     { text: 'English', value: 'en' },
     { text: '日本語', value: 'ja' }
 ];
-const items = [
-    {
-        icon: 'mdi-home',
-        title: 'Home',
-        titleLoggedIn: 'Home',
-        to: '/'
-    },
-    {
-        icon: 'mdi-newspaper-variant',
-        title: 'Articles',
-        to: '/topics_list'
-    },
-    {
-        icon: 'mdi-star',
-        title: 'Starred',
-        to: '/favourite'
-    },
-    {
-        icon: 'mdi-account-tie',
-        title: 'Member',
-        to: '/member'
-    },
-    {
-        icon: 'mdi-account-box',
-        title: 'My Profile',
-        to: '/profile'
-    },
-    {
-        icon: 'mdi-send',
-        title: 'Feedback',
-        to: '/inquiry'
-    }
-];
+const items = useNavDrawerItems();
 </script>

layouts/preview.vue

@@ -0,0 +1,34 @@
+<template>
+    <ClientOnly>
+        <v-app class="l-content_wrap p-dashboard">
+            <v-navigation-drawer id="c-navi_side" v-model="drawer" left fixed dark permanent>
+                <div class="text-center py-4">
+                    <a href="/">
+                        <img src="~/assets/images/logo.png?width=150" class="c-navi_side-logo" />
+                    </a>
+                </div>
+                <v-list>
+                    <v-list-item v-for="(item, i) in items" :key="i" router exact class="l-mainmenu_item disabled">
+                        <v-list-item-action>
+                            <v-icon>{{ item.icon }}</v-icon>
+                        </v-list-item-action>
+
+                        <v-list-item-title v-text="item.title" />
+                    </v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+
+            <v-main>
+                <v-container class="l-content_inner" fluid>
+                    <slot />
+                </v-container>
+            </v-main>
+            <AppFooter />
+        </v-app>
+    </ClientOnly>
+</template>
+
+<script setup>
+const drawer = ref(false);
+const items = useNavDrawerItems();
+</script>

pages/preview/topics_detail.vue

@@ -0,0 +1,99 @@
+<template>
+    <div>
+        <v-progress-linear :active="loading" :indeterminate="loading" absolute top color="orange white-4" />
+        <template v-if="topicsDetail">
+            <!-- <v-row> -->
+            <v-col>
+                <div class="d-flex justify-space-between mb-6" flat tile>
+                    <div flat>
+                        <v-row>
+                            <v-col class="pt-0">
+                                <h1 class="mt-3 mb-3">
+                                    {{ topicsDetail.subject }}
+                                </h1>
+                                <span class="c-btn c-btn_main c-btn_sm c-btn_disable white--text">
+                                    {{ topicsDetail.contents_type_nm }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </div>
+                </div>
+
+                <!-- Wysiwyg contents -->
+                <v-row v-if="topicsDetail && topicsDetail.contents" class="p-article_content">
+                    <v-container fluid>
+                        <v-card v-for="(subtitle, index) in topicsDetail.subtitles" :key="index" class="mx-auto" max-width="7000">
+                            <v-card-title class="c-heading_h2">{{ subtitle }}</v-card-title>
+                            <v-card-text>
+                                <div class="text--primary" v-html="topicsDetail.contents"></div>
+                            </v-card-text>
+                        </v-card>
+                    </v-container>
+                </v-row>
+
+                <!-- extension contents -->
+                <v-row v-for="(item, idx) in items" :key="idx" class="p-article_content">
+                    <TopicsDetail v-if="item" v-bind="item" />
+                </v-row>
+            </v-col>
+            <v-col></v-col>
+        </template>
+    </div>
+</template>
+<script setup>
+definePageMeta({
+    layout: 'preview'
+});
+
+const { t } = useI18n();
+const route = useRoute();
+const preview_token = route.query.preview_token;
+const topicsDetail = ref(null);
+const loading = ref(true);
+const snackbar = useSnackbar();
+
+const items = computed(() => {
+    if (!topicsDetail.value) {
+        return [];
+    }
+
+    const { texts, positionPatterns, imageUrls, subtitles } = topicsDetail.value;
+    return positionPatterns.map(({ key }, i) => ({
+        text: texts?.[i],
+        positionPatternKey: key,
+        imageUrl: imageUrls?.[i]?.url ? `${imageUrls?.[i]?.url}?width=800` : null,
+        subtitle: subtitles?.[i]
+    }));
+});
+
+try {
+    const response = await $fetch(`${apiDomain.baseURL}/rcms-api/1/content/preview`, {
+        credentials: 'include',
+        params: {
+            preview_token
+        },
+        server: false
+    });
+    const d = response.details;
+    topicsDetail.value = {
+        ...d,
+        fileType: d?.ext_1?.key,
+        fileUrl: d?.ext_2?.url,
+        fileDownload: d?.ext_2?.dl_link,
+        linkUrl: d?.ext_3?.url,
+        linkTitle: d?.ext_3?.title,
+
+        // for TopicsDetail
+        positionPatterns: d?.ext_4,
+        texts: d?.ext_7,
+        imageUrls: d?.ext_5,
+        subtitles: d?.ext_9
+    };
+    loading.value = false;
+} catch (error) {
+    snackbar.add({
+        type: 'error',
+        text: error?.response?._data?.errors?.[0]?.message || t('common.error')
+    });
+}
+</script>