Allow triggers to be scoped to development or user #89

Author: dannycoulombe

docs/structure.md

@@ -447,6 +447,9 @@ triggers:
 
     # URL called when the trigger is executed
     url: https://json.ms/?action=build
+    
+    # Location of the trigger button (structure, toolbar, data)
+    location: editor
 
     # HTTP method used for the request
     method: POST

src/assets/example-structure.yaml

@@ -22,6 +22,7 @@ triggers:
     label: Build
     icon: mdi-play
     url: [BUILD_URL]/build
+    location: structure
     method: POST
     headers:
       Content-Type: application/json

src/components/ActionBar.vue

@@ -6,6 +6,14 @@ import {useGlobalStore} from '@/stores/global';
 import {computed} from "vue";
 import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
+import TriggerMenu from "@/components/TriggerMenu.vue";
+import type {IStructure, IStructureData} from "@/interfaces";
+
+const structure = defineModel<IStructure>({ required: true });
+const { structureData, userData } = defineProps<{
+  structureData: IStructureData,
+  userData: any,
+}>();
 
 const globalStore = useGlobalStore();
 const modelStore = useModelStore();
@@ -56,6 +64,12 @@ const reset = () => {
 </script>
 
 <template>
+  <TriggerMenu
+    :model-value="structureData"
+    :structure="structure"
+    :user-data="userData"
+    location="data"
+  />
   <div
     v-if="globalStore.session.loggedIn"
     class="w-100 pr-3"

src/components/JSONms.vue

@@ -323,6 +323,7 @@ if (globalStore.session.loggedIn) {
     :structures="structures"
     :structure-data="structureParsedData"
     :default-locale="getAvailableLocale()"
+    :user-data="modelStore.userData"
     @refresh="onRefreshPreview"
     @create="onCreateStructure"
     @save="onSaveStructure"
@@ -442,7 +443,11 @@ if (globalStore.session.loggedIn) {
     <template #append>
       <v-divider />
       <div class="d-flex align-center justify-space-between pl-3" style="height: 4rem">
-        <ActionBar />
+        <ActionBar
+          :model-value="structure"
+          :structure-data="structureParsedData"
+          :user-data="modelStore.userData"
+        />
       </div>
     </template>
 
@@ -466,7 +471,11 @@ if (globalStore.session.loggedIn) {
       class="pl-3"
     >
       <div class="w-100 d-flex align-center justify-space-between">
-        <ActionBar />
+        <ActionBar
+          :model-value="structure"
+          :structure-data="structureParsedData"
+          :user-data="modelStore.userData"
+        />
       </div>
     </v-app-bar>
   </v-expand-transition>

src/components/SitePreview.vue

@@ -24,7 +24,7 @@ const loaded = ref(false);
 const loading = ref(false);
 const killIframe = ref(false);
 const siteNotCompatibleSnack = ref(false);
-const hoveringEditor = ref(false);
+const expanded = ref(false);
 const { layoutSize, windowHeight, layoutPx } = useLayout();
 const { reloading, siteCompatible, sendMessageToIframe, getPathsFromSectionKey, listenIframeMessage, sendUserDataToIframe } = useIframe();
 const { userDataLoading } = useUserData();
@@ -33,7 +33,7 @@ const iframeErrorMsg = ref('This site is not JSONms compatible');
 const editorHeight = computed((): number => {
   const padding = (globalStore.userSettings.data.layoutSitePreviewPadding ? 96 : 63);
   const result = windowHeight.value - padding;
-  if (hoveringEditor.value) {
+  if (expanded.value) {
     return result + 32;
   }
   return result - layoutSize.value.preview.height;
@@ -153,6 +153,7 @@ defineExpose({
     :width="layoutSize.preview.width"
     :location="globalStore.userSettings.data.layoutSitePreviewLocation"
     scrim
+    class="site-preview-drawer"
     color="transparent"
     border="0"
     permanent
@@ -228,8 +229,6 @@ defineExpose({
             flat
             class="editor-card"
             theme="dark"
-            @mouseover="hoveringEditor = true"
-            @mouseleave="hoveringEditor = false"
           >
             <StructureEditor
               ref="structureEditor"
@@ -241,7 +240,19 @@ defineExpose({
               @save="onSaveStructureContent"
               @create="onCreateStructure"
               @change="onStructureContentChange"
-            />
+            >
+              <template #header.end>
+                <v-btn
+                  size="small"
+                  @click="expanded = !expanded"
+                >
+                  <span v-if="expanded">Collapse</span>
+                  <span v-else>Expand</span>
+                  <v-icon v-if="expanded" icon="mdi-unfold-less-horizontal" end />
+                  <v-icon v-else icon="mdi-unfold-more-horizontal" end />
+                </v-btn>
+              </template>
+            </StructureEditor>
           </v-card>
         </div>
       </v-expand-transition>
@@ -259,4 +270,7 @@ defineExpose({
 .editor-card {
   transition: height 300ms ease;
 }
+.site-preview-drawer ::v-deep .v-navigation-drawer__content {
+  overflow: hidden !important;
+}
 </style>

src/components/StructureEditor.vue

@@ -13,7 +13,7 @@ import {useTypings} from "@/composables/typings";
 import {useModelStore} from "@/stores/model";
 // import yaml from 'js-yaml';
 
-const emit = defineEmits(['save', 'create', 'change'])
+const emit = defineEmits(['save', 'create', 'change', 'focus', 'blur']);
 const structure = defineModel<IStructure>({ required: true });
 const { columns = false, userData } = defineProps<{
   columns?: boolean,
@@ -155,6 +155,16 @@ const findNeedleInString = (haystack: string, needle: string) => {
   return -1
 }
 
+
+const onFocus = () => {
+  setTimeout(() => {
+    emit('focus');
+  }, 100);
+}
+const onBlur = () => {
+  emit('blur');
+}
+
 const scrollToSection = (section: string) => {
   const instance = structureEditor.value?.getAceInstance();
   if (instance) {
@@ -443,8 +453,8 @@ watch(() => globalStore.userSettings.data, () => {
     text="Access to this template has not been granted by the owner."
   />
   <div v-else class="d-flex flex-column">
-    <div class="d-flex align-center pa-1">
-      <v-menu v-model="sectionMenu" :close-on-content-click="false">
+    <div class="d-flex align-center pa-1" style="gap: 1rem">
+      <v-menu v-model="sectionMenu" contained :close-on-content-click="false">
         <template #activator="{ props }">
           <v-btn v-bind="props">
             <v-icon :icon="selectedSection?.icon" start />
@@ -466,6 +476,7 @@ watch(() => globalStore.userSettings.data, () => {
         </v-list>
       </v-menu>
       <v-spacer />
+      <slot name="header.end"></slot>
       <div class="d-flex align-center pr-1" style="gap: 0.5rem">
         <div
           v-if="!globalStore.userSettings.data.editorLiveUpdate"
@@ -514,6 +525,8 @@ watch(() => globalStore.userSettings.data, () => {
               theme="github_dark"
               class="fill-height"
               @change="onChange"
+              @focus="onFocus"
+              @blur="onBlur"
             />
           </div>
           <div class="pa-2 d-flex w-100" style="flex: 0; gap: 0.5rem">
@@ -553,6 +566,8 @@ watch(() => globalStore.userSettings.data, () => {
                 :model-value="structureData"
                 :structure="structure"
                 :user-data="userData"
+                location="structure"
+                size="small"
               />
               <v-tooltip
                 v-if="isFolderSynced(modelStore.structure, 'typescript')"

src/components/Toolbar.vue

@@ -16,10 +16,12 @@ import {useLayout} from '@/composables/layout';
 import {useIframe} from '@/composables/iframe';
 import {useModelStore} from "@/stores/model";
 import {useMigration} from "@/composables/migration";
+import TriggerMenu from "@/components/TriggerMenu.vue";
 
 const structure = defineModel<IStructure>({ required: true });
-const { structureData, structures = [], defaultLocale = 'en-US' } = defineProps<{
+const { structureData, structures = [], defaultLocale = 'en-US', userData } = defineProps<{
   structureData: IStructureData,
+  userData: any,
   structures: IStructure[],
   defaultLocale?: string,
 }>();
@@ -224,6 +226,13 @@ watch(() => currentRoute.params.locale, () => {
         </v-tooltip>
       </v-btn-toggle>
 
+      <TriggerMenu
+        :model-value="structureData"
+        :structure="structure"
+        :user-data="userData"
+        location="toolbar"
+      />
+
       <v-alert
         v-if="!globalStore.session.loggedIn && windowWidth > 1700"
         density="comfortable"

src/components/TriggerMenu.vue

@@ -5,9 +5,11 @@ import {Services} from "@/services";
 import {useGlobalStore} from "@/stores/global";
 
 const structureData = defineModel<IStructureData>({ required: true });
-const { structure, userData } = defineProps<{
+const { structure, userData, location = 'structure', size } = defineProps<{
   structure: IStructure,
   userData: IStructure,
+  location?: 'structure' | 'toolbar' | 'data'
+  size?: string
 }>();
 
 const globalStore = useGlobalStore();
@@ -24,7 +26,7 @@ const triggers = computed((): ITrigger[] => {
       ...structureData.value.triggers[key],
     })
   }
-  return triggers;
+  return triggers.filter(item => item.location === location || (!item.location && location === 'editor'));
 })
 const hasManyItems = computed((): boolean => {
   return triggers.value.length > 1;
@@ -33,10 +35,12 @@ const otherTriggers = computed((): ITrigger[] => {
   return triggers.value.filter((item: ITrigger) => item !== firstTrigger.value && item.key !== lastTrigger.value?.key);
 })
 const firstTrigger = computed((): ITrigger => {
-  return lastTrigger.value || triggers.value[0] || {
+  return Object.assign({
+    icon: 'mdi-wrench'
+  }, lastTrigger.value || triggers.value[0] || {
     label: '',
     url: '',
-  }
+  });
 })
 
 const run = (trigger: ITrigger): Promise<any> => {
@@ -60,7 +64,7 @@ const run = (trigger: ITrigger): Promise<any> => {
       <div class="position-relative" style="flex: 1">
         <v-btn
           variant="outlined"
-          size="small"
+          :size="size"
           :disabled="running"
           :text="firstTrigger.label"
           :class="hasManyItems ? ['w-100 pr-12'] : []"

src/interfaces.ts

@@ -190,6 +190,7 @@ export interface ITrigger {
   headers?: {[key: string]: string}
   method?: string
   url: string
+  location: 'editor' | 'toolbar'
 }
 
 export interface IStructureData {

src/stores/global.ts

@@ -88,7 +88,7 @@ export const useGlobalStore = defineStore('global', {
         layoutAutoSplit: true,
         blueprintsIncludeTypings: true,
         blueprintsReadFromData: true,
-        blueprintsReadFromStructure: false,
+        blueprintsReadFromStructure: true,
         blueprintsWriteToData: true,
         blueprintsWriteToDefault: true,
         blueprintsWriteToIndex: true,