From e9d35062d14c6417af39212096410739852756d3 Mon Sep 17 00:00:00 2001
From: Tai Sakuma <tai.sakuma@gmail.com>
Date: Wed, 8 Jan 2025 12:52:28 -0500
Subject: [PATCH 1/4] Add the route `/preview`

---
 src/app/navi-items.ts                         |  6 ++++++
 .../schedule/preview/PreviewFrame.vue         | 19 +++++++++++++++++++
 .../schedule/preview/PreviewView.vue          |  7 +++++++
 src/plugins/router.ts                         |  5 +++++
 4 files changed, 37 insertions(+)
 create mode 100644 src/components/schedule/preview/PreviewFrame.vue
 create mode 100644 src/components/schedule/preview/PreviewView.vue

diff --git a/src/app/navi-items.ts b/src/app/navi-items.ts
index ef1280e4..56d78507 100644
--- a/src/app/navi-items.ts
+++ b/src/app/navi-items.ts
@@ -42,6 +42,12 @@ export function useNaviItems() {
       to: { name: "queue" },
       exact: true,
     },
+    {
+      icon: "mdi-script-text",
+      title: "Preview",
+      to: { name: "preview" },
+      exact: true,
+    },
   ]);
 
   return { naviItems };
diff --git a/src/components/schedule/preview/PreviewFrame.vue b/src/components/schedule/preview/PreviewFrame.vue
new file mode 100644
index 00000000..6ba963cd
--- /dev/null
+++ b/src/components/schedule/preview/PreviewFrame.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="g-container">Preview</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.g-container {
+  position: relative;
+  display: grid;
+  overflow-y: auto;
+  block-size: 100%;
+  padding-bottom: calc(64px + 24px); /* 64px is the height of the fab button */
+  justify-content: center;
+  grid-template-columns: 1fr;
+  grid-template-rows: min-content min-content 1fr;
+  grid-template-areas: "breadcrumb" "top" "table";
+}
+</style>
diff --git a/src/components/schedule/preview/PreviewView.vue b/src/components/schedule/preview/PreviewView.vue
new file mode 100644
index 00000000..e8a8c045
--- /dev/null
+++ b/src/components/schedule/preview/PreviewView.vue
@@ -0,0 +1,7 @@
+<template>
+  <PreviewFrame></PreviewFrame>
+</template>
+
+<script setup lang="ts">
+import PreviewFrame from "./PreviewFrame.vue";
+</script>
diff --git a/src/plugins/router.ts b/src/plugins/router.ts
index 5ef1735c..e2885d15 100644
--- a/src/plugins/router.ts
+++ b/src/plugins/router.ts
@@ -21,6 +21,11 @@ const routes: RouteRecordRaw[] = [
     name: "queue",
     component: () => import("@/components/schedule/queue/QueueView.vue"),
   },
+  {
+    path: "/preview",
+    name: "preview",
+    component: () => import("@/components/schedule/preview/PreviewView.vue"),
+  },
   {
     path: "/db/runs",
     name: "runs",

From 2a3e601ade6f33506fbfd0fbc405a712818bd941 Mon Sep 17 00:00:00 2001
From: Tai Sakuma <tai.sakuma@gmail.com>
Date: Thu, 9 Jan 2025 12:15:10 -0500
Subject: [PATCH 2/4] Update a layout

---
 .../schedule/preview/PreviewFrame.vue         | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/schedule/preview/PreviewFrame.vue b/src/components/schedule/preview/PreviewFrame.vue
index 6ba963cd..774e6500 100644
--- a/src/components/schedule/preview/PreviewFrame.vue
+++ b/src/components/schedule/preview/PreviewFrame.vue
@@ -1,19 +1,36 @@
 <template>
-  <div class="g-container">Preview</div>
+  <div class="g-container">
+    <div class="g-breadcrumb">
+      <VBreadcrumbs :items="breadcrumb"> </VBreadcrumbs>
+    </div>
+    <div class="g-top">
+      <VBtn variant="flat" color="primary-fixed"> preview </VBtn>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const breadcrumb = [{ title: "Scheduler Preview", disabled: false }];
+</script>
 
 <style scoped>
 .g-container {
-  position: relative;
   display: grid;
-  overflow-y: auto;
-  block-size: 100%;
-  padding-bottom: calc(64px + 24px); /* 64px is the height of the fab button */
+  padding: 12px;
   justify-content: center;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(min-content, 960px);
   grid-template-rows: min-content min-content 1fr;
   grid-template-areas: "breadcrumb" "top" "table";
 }
+
+.g-breadcrumb {
+  grid-area: breadcrumb;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.g-top {
+  grid-area: top;
+}
 </style>

From f6d99a1fcc68e0f33af5fb577e57f4a96712e2f0 Mon Sep 17 00:00:00 2001
From: Tai Sakuma <tai.sakuma@gmail.com>
Date: Fri, 10 Jan 2025 13:53:26 -0500
Subject: [PATCH 3/4] Add query `ScheduleSchedulerPreview`

---
 src/graphql/codegen/generated.ts              | 26 +++++++++++++++++++
 .../queries/schedule/scheduler/Preview.gql    |  9 +++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/graphql/gql/queries/schedule/scheduler/Preview.gql

diff --git a/src/graphql/codegen/generated.ts b/src/graphql/codegen/generated.ts
index 5598102f..8378056a 100644
--- a/src/graphql/codegen/generated.ts
+++ b/src/graphql/codegen/generated.ts
@@ -314,6 +314,7 @@ export type QueryScheduleScheduler = {
   apiUrl: Scalars['String']['output'];
   lengthMinutes: Scalars['Int']['output'];
   policy: Scalars['String']['output'];
+  preview: ScheduleSchedulerPreviewItem;
 };
 
 export type RunNode = {
@@ -389,6 +390,11 @@ export type ScheduleQueuePushInput = {
   script: Scalars['String']['input'];
 };
 
+export type ScheduleSchedulerPreviewItem = {
+  __typename?: 'ScheduleSchedulerPreviewItem';
+  script: Scalars['String']['output'];
+};
+
 export type StdoutNode = {
   __typename?: 'StdoutNode';
   id: Scalars['Int']['output'];
@@ -689,6 +695,11 @@ export type ScheduleQueueItemsQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type ScheduleQueueItemsQuery = { __typename?: 'Query', schedule: { __typename?: 'QuerySchedule', queue: { __typename?: 'QueryScheduleQueue', items: Array<{ __typename?: 'ScheduleQueueItem', id: number, name: string, createdAt: any, script: string }> } } };
 
+export type ScheduleSchedulerPreviewQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ScheduleSchedulerPreviewQuery = { __typename?: 'Query', schedule: { __typename?: 'QuerySchedule', scheduler: { __typename?: 'QueryScheduleScheduler', preview: { __typename?: 'ScheduleSchedulerPreviewItem', script: string } } } };
+
 export type CtrlContinuousEnabledSSubscriptionVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -1141,6 +1152,21 @@ export const ScheduleQueueItemsDocument = gql`
 export function useScheduleQueueItemsQuery(options: Omit<Urql.UseQueryArgs<never, ScheduleQueueItemsQueryVariables>, 'query'>) {
   return Urql.useQuery<ScheduleQueueItemsQuery, ScheduleQueueItemsQueryVariables>({ query: ScheduleQueueItemsDocument, ...options });
 };
+export const ScheduleSchedulerPreviewDocument = gql`
+    query ScheduleSchedulerPreview {
+  schedule {
+    scheduler {
+      preview {
+        script
+      }
+    }
+  }
+}
+    `;
+
+export function useScheduleSchedulerPreviewQuery(options: Omit<Urql.UseQueryArgs<never, ScheduleSchedulerPreviewQueryVariables>, 'query'>) {
+  return Urql.useQuery<ScheduleSchedulerPreviewQuery, ScheduleSchedulerPreviewQueryVariables>({ query: ScheduleSchedulerPreviewDocument, ...options });
+};
 export const CtrlContinuousEnabledSDocument = gql`
     subscription CtrlContinuousEnabledS {
   ctrlContinuousEnabled
diff --git a/src/graphql/gql/queries/schedule/scheduler/Preview.gql b/src/graphql/gql/queries/schedule/scheduler/Preview.gql
new file mode 100644
index 00000000..f28c91b7
--- /dev/null
+++ b/src/graphql/gql/queries/schedule/scheduler/Preview.gql
@@ -0,0 +1,9 @@
+query ScheduleSchedulerPreview {
+  schedule {
+    scheduler {
+      preview {
+        script
+      }
+    }
+  }
+}

From 473932c33b0c8045e097084123916ea435395217 Mon Sep 17 00:00:00 2001
From: Tai Sakuma <tai.sakuma@gmail.com>
Date: Fri, 10 Jan 2025 15:47:15 -0500
Subject: [PATCH 4/4] Add scheduler preview

---
 src/components/schedule/preview/Editor.vue    | 16 +++++++
 .../schedule/preview/PreviewFrame.vue         | 34 ++++++++++++++-
 src/components/schedule/preview/preview.ts    | 43 +++++++++++++++++++
 3 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/components/schedule/preview/Editor.vue
 create mode 100644 src/components/schedule/preview/preview.ts

diff --git a/src/components/schedule/preview/Editor.vue b/src/components/schedule/preview/Editor.vue
new file mode 100644
index 00000000..f31d18f9
--- /dev/null
+++ b/src/components/schedule/preview/Editor.vue
@@ -0,0 +1,16 @@
+<template>
+  <div ref="element" style="height: 100%"></div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs } from "vue";
+import { useMonacoEditor } from "@/utils/monaco-editor";
+
+interface Props {
+  source: string;
+}
+const props = defineProps<Props>();
+const { source } = toRefs(props);
+const element = ref<HTMLElement>();
+useMonacoEditor({ element, source });
+</script>
diff --git a/src/components/schedule/preview/PreviewFrame.vue b/src/components/schedule/preview/PreviewFrame.vue
index 774e6500..6c2047b1 100644
--- a/src/components/schedule/preview/PreviewFrame.vue
+++ b/src/components/schedule/preview/PreviewFrame.vue
@@ -4,23 +4,45 @@
       <VBreadcrumbs :items="breadcrumb"> </VBreadcrumbs>
     </div>
     <div class="g-top">
-      <VBtn variant="flat" color="primary-fixed"> preview </VBtn>
+      <VBtn variant="flat" color="primary-fixed" :disabled="loading" @click="load">
+        preview
+      </VBtn>
+      <VProgressCircular
+        indeterminate
+        size="25"
+        color="primary"
+        v-if="loading"
+      ></VProgressCircular>
+    </div>
+    <div class="g-body" v-if="!loading">
+      <VAlert type="error" variant="tonal" v-if="error">
+        <pre
+          v-text="error"
+          style="white-space: pre-wrap; overflow-wrap: anywhere"
+        ></pre>
+      </VAlert>
+      <editor :source="script" v-else-if="script"> </editor>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { usePreview } from "./preview";
+import Editor from "./Editor.vue";
 const breadcrumb = [{ title: "Scheduler Preview", disabled: false }];
+const { script, loading, error, load } = usePreview();
 </script>
 
 <style scoped>
 .g-container {
+  block-size: 100%;
   display: grid;
   padding: 12px;
+  row-gap: 24px;
   justify-content: center;
   grid-template-columns: minmax(min-content, 960px);
   grid-template-rows: min-content min-content 1fr;
-  grid-template-areas: "breadcrumb" "top" "table";
+  grid-template-areas: "breadcrumb" "top" "body";
 }
 
 .g-breadcrumb {
@@ -32,5 +54,13 @@ const breadcrumb = [{ title: "Scheduler Preview", disabled: false }];
 
 .g-top {
   grid-area: top;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.g-body {
+  grid-area: body;
+  block-size: 100%;
 }
 </style>
diff --git a/src/components/schedule/preview/preview.ts b/src/components/schedule/preview/preview.ts
new file mode 100644
index 00000000..5e383411
--- /dev/null
+++ b/src/components/schedule/preview/preview.ts
@@ -0,0 +1,43 @@
+import { computed } from "vue";
+import type { Ref, ComputedRef } from "vue";
+import { refThrottled } from "@vueuse/core";
+import { useScheduleSchedulerPreviewQuery } from "@/graphql/codegen/generated";
+import { useRefresh } from "@/graphql/urql";
+
+interface _UsePreviewResponse {
+  script: ComputedRef<string | undefined>;
+  loading: Ref<boolean>;
+  error: ComputedRef<Error | undefined>;
+  load: () => Promise<void>;
+}
+
+type UsePreviewResponse = _UsePreviewResponse & PromiseLike<_UsePreviewResponse>;
+
+export function usePreview(): UsePreviewResponse {
+  const query = useScheduleSchedulerPreviewQuery({
+    requestPolicy: "network-only",
+    variables: {},
+    pause: true,
+  });
+
+  const { refresh: load, refreshing } = useRefresh(query);
+
+  const loading = refThrottled(
+    computed(() => query.fetching.value || refreshing.value),
+    300
+  );
+
+  const error = computed(() => query.error?.value);
+
+  const script = computed(() => query.data.value?.schedule.scheduler.preview.script);
+
+  const ret = { script, loading, error, load };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await query;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}