@tailor-cms/tce-preview-runtime 0.4.0-beta.2 → 0.4.0-beta.4

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.4.0-beta.2",
+  "version": "0.4.0-beta.4",
   "dependencies": {
     "@mdi/font": "7.2.96",
     "@vitejs/plugin-vue": "4.3.4",
     "@vueuse/core": "10.4.1",
+    "date-fns": "^3.2.0",
     "ky": "1.0.1",
     "lodash": "^4.17.21",
     "sass": "1.68.0",
@@ -15,7 +16,7 @@
     "vue": "3.3.4",
     "vue-tsc": "1.8.13",
     "vue3-ts-jsoneditor": "2.9.0",
-    "vuetify": "3.3.17"
+    "vuetify": "3.4.0"
   },
   "devDependencies": {
     "@tailor-cms/eslint-config": "0.0.2"
@@ -27,7 +28,7 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
-    "lint": "eslint --ext .js,.ts,.vue .",
+    "lint": "eslint --ext .ts,.vue .",
     "lint:fix": "pnpm lint --fix"
   }
 }

package/src/App.vue

@@ -5,17 +5,33 @@ import ky from 'ky';
 import AppBar from './components/AppBar.vue';
 import MainLayout from './components/MainLayout.vue';
 
+interface ContentElement {
+  id: number;
+}
+
 const appUrl = new URL(window.location.href);
 const apiPrefix = '/tce-server';
 const api = ky.create({ prefixUrl: apiPrefix });
 const wsProtocol = appUrl.protocol === 'http:' ? 'ws:' : 'wss:';
 const ws = new WebSocket(`${wsProtocol}//${appUrl.host}${apiPrefix}`);
 
-const element = ref({});
+const element = ref<ContentElement>();
+const userState = ref({});
+
 onMounted(async () => {
-  element.value = await getElement();
-  ws.addEventListener('message', (event) => {
-    element.value = JSON.parse(event.data);
+  const { element: elementVal, userState: userStateVal } = await getElement();
+  element.value = elementVal;
+  userState.value = userStateVal;
+  ws.addEventListener('message', (message) => {
+    const event = JSON.parse(message.data);
+    const elementId = element.value?.id;
+    if (elementId && elementId !== event.entityId) return;
+    if (event.type === 'userState:update') {
+      userState.value = event.payload;
+    }
+    if (event.type === 'element:update') {
+      element.value = event.payload;
+    }
   });
 });
 
@@ -23,10 +39,9 @@ function timeout(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-async function getElement() {
+async function getElement(): Promise<any> {
   try {
-    const response: any = await api('content-element').json();
-    return response?.element || {};
+    return api('content-element').json();
   } catch (error) {
     console.log('Error on element get', error);
     await timeout(2000);
@@ -34,12 +49,33 @@ async function getElement() {
     return getElement();
   }
 }
+
+async function resetElement() {
+  const id = element.value?.id;
+  if (!id) return;
+  await resetState();
+  const path = `content-element/${id}/reset-element`;
+  return api.post(path);
+}
+
+async function resetState() {
+  const id = element.value?.id;
+  if (!id) return;
+  const path = `content-element/${id}/reset-state`;
+  return api.post(path);
+}
 </script>
 
 <template>
   <v-app>
     <AppBar />
-    <MainLayout :element="element" class="mt-14" />
+    <MainLayout
+      :element="element"
+      :user-state="userState"
+      class="mt-14"
+      @reset-element="resetElement"
+      @reset-state="resetState"
+    />
   </v-app>
 </template>
 

package/src/components/AppBar.vue

@@ -20,7 +20,7 @@ const { showEdit, showDisplay, showBothComponents } = useGlobalState();
         density="compact"
         variant="tonal"
       >
-        0.3.0
+        0.4.0
       </v-chip>
     </v-app-bar-title>
     <v-spacer />

package/src/components/BottomPanel.vue

@@ -1,26 +1,75 @@
 <template>
   <div v-show="isLoaded">
-    <v-tabs density="compact" hide-slider>
-      <v-tab>Server state</v-tab>
+    <v-tabs v-model="state.selectedTab">
+      <v-tab :value="1">
+        <VChip append-icon="mdi-pen" class="mr-2" color="indigo" size="small">
+          {{ state.elementHistory.length }}
+        </VChip>
+        Authoring history
+      </v-tab>
+      <v-tab :value="2">
+        <VChip
+          append-icon="mdi-account"
+          class="mr-2"
+          color="green"
+          size="small"
+        >
+          {{ state.userInteractions.length }}
+        </VChip>
+        End-User state history
+      </v-tab>
     </v-tabs>
     <div class="pa-6">
-      <JsonEditor
-        v-if="isLoaded"
-        :main-menu-bar="false"
-        :status-bar="false"
-        :value="orderKeys(props.element)"
-        mode="text"
-      />
+      <v-window v-model="state.selectedTab">
+        <v-window-item :value="1">
+          <VBtn
+            class="mb-4"
+            color="indigo-darken-4"
+            variant="tonal"
+            @click="$emit('resetElement')"
+          >
+            <VIcon class="mr-2 left">mdi-refresh</VIcon>
+            Reset content element
+          </VBtn>
+          <MutationList :changes="state.elementHistory" />
+        </v-window-item>
+        <v-window-item :value="2">
+          <VBtn
+            class="mb-4"
+            color="indigo-darken-4"
+            variant="tonal"
+            @click="$emit('resetState')"
+          >
+            <VIcon class="mr-2 left">mdi-refresh</VIcon>
+            Reset state context
+          </VBtn>
+          <MutationList :changes="state.userInteractions" />
+        </v-window-item>
+      </v-window>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import JsonEditor from 'vue3-ts-jsoneditor';
+import { reactive, watch } from 'vue';
+import { format as formatDate } from 'date-fns';
 
-const props = defineProps<{ element: any; isLoaded: Boolean }>();
+import MutationList from './MutationList.vue';
 
-const orderKeys = (val: any) => {
+defineEmits(['resetElement', 'resetState']);
+const props = defineProps<{
+  isLoaded: Boolean;
+  element: any;
+  userState: any;
+}>();
+
+const state = reactive({
+  selectedTab: 1,
+  elementHistory: [] as any[],
+  userInteractions: [] as any[],
+});
+
+const orderContentElementKeys = (val: any) => {
   return [
     'id',
     'uid',
@@ -41,4 +90,31 @@ const orderKeys = (val: any) => {
     return acc;
   }, {});
 };
+
+watch(
+  () => props.element,
+  (val) => {
+    if (val.updatedAt === state.elementHistory[0]?.data?.updatedAt) return;
+    state.elementHistory.unshift({
+      id: state.elementHistory.length,
+      title: formatDate(val.updatedAt, 'HH:mm:ss'),
+      data: orderContentElementKeys(val),
+    });
+    state.selectedTab = 1;
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.userState,
+  (val) => {
+    state.userInteractions.unshift({
+      id: state.userInteractions.length,
+      title: formatDate(new Date(), 'HH:mm:ss'),
+      data: val,
+    });
+    state.selectedTab = 2;
+  },
+  { deep: true },
+);
 </script>

package/src/components/MainLayout.vue

@@ -7,7 +7,8 @@ import PreviewPanel from './PreviewPanel.vue';
 import SplashLoader from './SplashLoader.vue';
 import { useGlobalState } from '../state';
 
-const props = defineProps<{ element: any }>();
+defineEmits(['resetElement', 'resetState']);
+const props = defineProps<{ element: any; userState: any }>();
 
 const { isDark } = useGlobalState();
 const isLoaded = ref(false);
@@ -51,7 +52,10 @@ onMounted(() => {
       id="panelBottom"
       :element="props.element"
       :is-loaded="isLoaded"
+      :user-state="props.userState"
       class="preview-panel-bottom"
+      @reset-element="$emit('resetElement')"
+      @reset-state="$emit('resetState')"
     />
   </main>
 </template>

package/src/components/MutationList.vue

@@ -0,0 +1,39 @@
+<template>
+  <VDataIterator :items="changes" :items-per-page="50" expand-on-click>
+    <template #default="{ items, isExpanded, toggleExpand }">
+      <template v-for="(item, index) in items" :key="item.raw.id">
+        <v-card
+          :disabled="index === 0"
+          :ripple="false"
+          class="mb-1"
+          @click="toggleExpand(item)"
+        >
+          <v-card-title class="d-flex align-center">
+            <v-icon color="orange-darken-3" icon="mdi-update" size="18" start />
+            <div class="text-body-1">{{ item.raw.title }}</div>
+          </v-card-title>
+          <v-card-text v-if="isExpanded(item) || index === 0">
+            <JsonEditor
+              :main-menu-bar="false"
+              :status-bar="false"
+              :value="item.raw.data"
+              mode="text"
+            />
+          </v-card-text>
+        </v-card>
+      </template>
+    </template>
+  </VDataIterator>
+</template>
+
+<script setup lang="ts">
+import JsonEditor from 'vue3-ts-jsoneditor';
+
+defineProps<{ changes: any[] }>();
+</script>
+
+<style scoped lang="scss">
+.v-card--disabled > :not(.v-card__loader) {
+  opacity: 1 !important;
+}
+</style>

package/src/components/PreviewPanel.vue

@@ -6,7 +6,6 @@
         :src="VITE_EDIT_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
-        sandbox="allow-scripts"
         title="Edit component container"
       >
       </iframe>
@@ -17,7 +16,6 @@
         :src="VITE_DISPLAY_RUNTIME_URL"
         class="flex-1-1-100"
         frameBorder="0"
-        sandbox="allow-scripts"
         title="Display component container"
       >
       </iframe>

package/src/components/SplashLoader.vue

@@ -6,13 +6,13 @@
           <img :src="logo" alt="Logo" width="88" />
         </div>
         <div class="splash-loader__text text-body-1">
-          <div>Booting Teaching Element Kit....</div>
+          <div>Booting Content Element Kit....</div>
           <v-progress-linear
             v-if="isFirstBoot"
             :model-value="progress"
             class="my-3"
           />
-          <div class="font-weight-bold">Beta preview v0.3.0</div>
+          <div class="font-weight-bold">Beta preview v0.4.0</div>
         </div>
       </div>
     </div>