From a3bf40c9f372647239c1124cf857d3ece7c1893c Mon Sep 17 00:00:00 2001
From: VortexExpansion <gaurav@diverta.co.jp>
Date: Mon, 3 Jun 2024 17:29:20 +0900
Subject: [PATCH 1/6] add topics_detail preview

---
 composables/useAuth.js          |  4 +-
 pages/preview/topics_detail.vue | 95 +++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+), 1 deletion(-)
 create mode 100644 pages/preview/topics_detail.vue

diff --git a/composables/useAuth.js b/composables/useAuth.js
index 4b1d1b8..c342320 100644
--- a/composables/useAuth.js
+++ b/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;
             }
diff --git a/pages/preview/topics_detail.vue b/pages/preview/topics_detail.vue
new file mode 100644
index 0000000..45871d7
--- /dev/null
+++ b/pages/preview/topics_detail.vue
@@ -0,0 +1,95 @@
+<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>
+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>

From ffb8075209ab58bcdb22744f9505907fb2c5c800 Mon Sep 17 00:00:00 2001
From: VortexExpansion <gaurav@diverta.co.jp>
Date: Wed, 5 Jun 2024 20:09:16 +0900
Subject: [PATCH 2/6] upd default layout for preview page

---
 layouts/default.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 6cd44e6..ac626a5 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
     <ClientOnly>
-        <v-app class="l-content_wrap" :class="{ 'p-dashboard': isLoggedIn, 'p-login': !isLoggedIn }">
-            <v-navigation-drawer v-if="authUser.member_id" id="c-navi_side" v-model="drawer" left fixed dark permanent>
+        <v-app class="l-content_wrap" :class="{ 'p-dashboard': isLoggedIn, 'p-login': !isLoggedIn && !preview_token }">
+            <v-navigation-drawer v-if="authUser.member_id || preview_token" 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" :to="localePath(item.to)" router exact class="l-mainmenu_item">
+                    <v-list-item v-for="(item, i) in items" :key="i" :to="preview_token ? null : localePath(item.to)" router exact class="l-mainmenu_item">
                         <v-list-item-action>
                             <v-icon>{{ item.icon }}</v-icon>
                         </v-list-item-action>
@@ -50,7 +50,7 @@
                             {{ $t('common.sign_in') }}
                         </button>
                     </div>
-                    <div v-else class="white--text">
+                    <div v-else-if="!preview_token" class="white--text">
                         <span class="d-none d-sm-inline">New to Muzica?</span>
                         <button
                             class="c-btn c-btn_sm c-btn_dark ml-2"
@@ -89,10 +89,14 @@ const { authUser, isLoggedIn, logout } = useAuth();
 const { locale, setLocale } = useI18n();
 const localePath = useLocalePath();
 const router = useRouter();
-
+const preview_token = router.currentRoute.value.query?.preview_token;
 const drawer = ref(false);
 const clipped = ref(false);
 
+if (preview_token) {
+    drawer.value = true;
+}
+
 const language = computed({
     get: () => locale.value,
     set: (val) => {

From 063aba9136a6441b9ae518c54fc13783b10a0d18 Mon Sep 17 00:00:00 2001
From: YuseiAbe <yabe@diverta.co.jp>
Date: Thu, 6 Jun 2024 13:24:41 +0900
Subject: [PATCH 3/6] feat: adjust disabled styling

---
 assets/layout/_content.scss | 6 ++++++
 layouts/default.vue         | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/assets/layout/_content.scss b/assets/layout/_content.scss
index ac2354b..c513c99 100644
--- a/assets/layout/_content.scss
+++ b/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;
+        }
     }
 }
 
diff --git a/layouts/default.vue b/layouts/default.vue
index ac626a5..fcff63b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,7 +8,7 @@
                     </a>
                 </div>
                 <v-list>
-                    <v-list-item v-for="(item, i) in items" :key="i" :to="preview_token ? null : localePath(item.to)" router exact class="l-mainmenu_item">
+                    <v-list-item v-for="(item, i) in items" :key="i" :to="preview_token ? null : localePath(item.to)" router exact class="l-mainmenu_item" :class="{ disabled: !!preview_token }">
                         <v-list-item-action>
                             <v-icon>{{ item.icon }}</v-icon>
                         </v-list-item-action>

From dfb97df57cde3d7d19c7b7a9fc52c48995e7d881 Mon Sep 17 00:00:00 2001
From: VortexExpansion <gaurav@diverta.co.jp>
Date: Thu, 6 Jun 2024 18:50:42 +0900
Subject: [PATCH 4/6] add preview layout

---
 composables/useAuth.js          | 37 ++++++++++++++++++++++++++
 layouts/default.vue             | 47 ++++-----------------------------
 layouts/preview.vue             | 40 ++++++++++++++++++++++++++++
 pages/preview/topics_detail.vue |  4 +++
 4 files changed, 86 insertions(+), 42 deletions(-)
 create mode 100644 layouts/preview.vue

diff --git a/composables/useAuth.js b/composables/useAuth.js
index c342320..94fa5d8 100644
--- a/composables/useAuth.js
+++ b/composables/useAuth.js
@@ -123,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;
+};
diff --git a/layouts/default.vue b/layouts/default.vue
index fcff63b..f4cd144 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,14 +1,14 @@
 <template>
     <ClientOnly>
-        <v-app class="l-content_wrap" :class="{ 'p-dashboard': isLoggedIn, 'p-login': !isLoggedIn && !preview_token }">
-            <v-navigation-drawer v-if="authUser.member_id || preview_token" id="c-navi_side" v-model="drawer" left fixed dark permanent>
+        <v-app class="l-content_wrap" :class="{ 'p-dashboard': isLoggedIn, 'p-login': !isLoggedIn }">
+            <v-navigation-drawer v-if="authUser.member_id" 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" :to="preview_token ? null : localePath(item.to)" router exact class="l-mainmenu_item" :class="{ disabled: !!preview_token }">
+                    <v-list-item v-for="(item, i) in items" :key="i" :to="localePath(item.to)" router exact class="l-mainmenu_item">
                         <v-list-item-action>
                             <v-icon>{{ item.icon }}</v-icon>
                         </v-list-item-action>
@@ -50,7 +50,7 @@
                             {{ $t('common.sign_in') }}
                         </button>
                     </div>
-                    <div v-else-if="!preview_token" class="white--text">
+                    <div v-else class="white--text">
                         <span class="d-none d-sm-inline">New to Muzica?</span>
                         <button
                             class="c-btn c-btn_sm c-btn_dark ml-2"
@@ -89,14 +89,9 @@ const { authUser, isLoggedIn, logout } = useAuth();
 const { locale, setLocale } = useI18n();
 const localePath = useLocalePath();
 const router = useRouter();
-const preview_token = router.currentRoute.value.query?.preview_token;
 const drawer = ref(false);
 const clipped = ref(false);
 
-if (preview_token) {
-    drawer.value = true;
-}
-
 const language = computed({
     get: () => locale.value,
     set: (val) => {
@@ -113,37 +108,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>
diff --git a/layouts/preview.vue b/layouts/preview.vue
new file mode 100644
index 0000000..dc76395
--- /dev/null
+++ b/layouts/preview.vue
@@ -0,0 +1,40 @@
+<template>
+    <ClientOnly>
+        <v-app class="l-content_wrap">
+            <v-navigation-drawer id="c-navi_side" 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>
+
+            <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>
+        </v-app>
+    </ClientOnly>
+</template>
+
+<script setup>
+const items = useNavDrawerItems();
+</script>
diff --git a/pages/preview/topics_detail.vue b/pages/preview/topics_detail.vue
index 45871d7..82bee25 100644
--- a/pages/preview/topics_detail.vue
+++ b/pages/preview/topics_detail.vue
@@ -41,6 +41,10 @@
     </div>
 </template>
 <script setup>
+definePageMeta({
+    layout: 'preview'
+});
+
 const { t } = useI18n();
 const route = useRoute();
 const preview_token = route.query.preview_token;

From 2dbd70119ad8a6fcd818230ee504228a18f1de64 Mon Sep 17 00:00:00 2001
From: VortexExpansion <gaurav@diverta.co.jp>
Date: Thu, 6 Jun 2024 20:35:20 +0900
Subject: [PATCH 5/6] separate AppFooter to component

---
 components/AppFooter.vue | 9 +++++++++
 layouts/default.vue      | 9 +--------
 layouts/preview.vue      | 9 +--------
 3 files changed, 11 insertions(+), 16 deletions(-)
 create mode 100644 components/AppFooter.vue

diff --git a/components/AppFooter.vue b/components/AppFooter.vue
new file mode 100644
index 0000000..d0f7c0e
--- /dev/null
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index f4cd144..6388265 100644
--- a/layouts/default.vue
+++ b/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>
diff --git a/layouts/preview.vue b/layouts/preview.vue
index dc76395..6850310 100644
--- a/layouts/preview.vue
+++ b/layouts/preview.vue
@@ -23,14 +23,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>

From 149f175a3b430789d30ab6cd59eb781e34295365 Mon Sep 17 00:00:00 2001
From: VortexExpansion <gaurav@diverta.co.jp>
Date: Fri, 21 Jun 2024 09:46:18 +0900
Subject: [PATCH 6/6] nav drawer open close fix

---
 layouts/preview.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/layouts/preview.vue b/layouts/preview.vue
index 6850310..5d03c35 100644
--- a/layouts/preview.vue
+++ b/layouts/preview.vue
@@ -1,7 +1,7 @@
 <template>
     <ClientOnly>
-        <v-app class="l-content_wrap">
-            <v-navigation-drawer id="c-navi_side" left fixed dark permanent>
+        <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" />
@@ -29,5 +29,6 @@
 </template>
 
 <script setup>
+const drawer = ref(false);
 const items = useNavDrawerItems();
 </script>