Merge pull request #94 from JSON-ms/dev

Bug fixes and UX improvements

Author: dannycoulombe

docs/structure.md

@@ -37,6 +37,7 @@ The following YAML example defines a simplified section for an admin panel, spec
 sections:
   home: # Customizable key
     label: Home page
+    title: My data # Optional (to be displayed in the data sidebar)
     fields:
       title: # Customizable key
         type: i18n

package.json

@@ -2,7 +2,7 @@
   "name": "@json.ms/www",
   "private": true,
   "type": "module",
-  "version": "1.2.20",
+  "version": "1.2.21",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check \"build-only {@}\" --",

src/components/ActionBar.vue

@@ -79,7 +79,7 @@ const reset = () => {
       <div v-if="!structureIsPristine">
         <v-tooltip v-if="layoutSize.data < 850" location="top" text="Please save your structure before continuing.">
           <template #activator="{ props }">
-            <v-btn icon color="error" variant="tonal" style="cursor: default">
+            <v-btn icon color="error" variant="tonal" size="x-small" style="cursor: default">
               <v-icon v-bind="props" icon="mdi-alert" />
             </v-btn>
           </template>
@@ -155,8 +155,9 @@ const reset = () => {
             :readonly="userDataSaved"
             :color="canSave ? 'primary' : undefined"
             :class="['w-100', {
-              'pr-16': globalStore.admin.structure
+              'pr-10': globalStore.admin.structure
             }]"
+            size="small"
             @click.stop.prevent="save"
           >
             <template v-if="!userDataSaved">
@@ -177,8 +178,9 @@ const reset = () => {
             v-if="globalStore.admin.structure"
             v-bind="props"
             :disabled="!userDataHasChanged"
-            variant="flat"
             :color="userDataHasChanged ? 'primary' : undefined"
+            variant="flat"
+            size="small"
             class="position-absolute"
             style="right: 0; border-top-left-radius: 0; border-bottom-left-radius: 0"
             min-width="0"
@@ -210,6 +212,7 @@ const reset = () => {
     <v-btn
       :disabled="!userDataHasChanged"
       variant="text"
+      size="small"
       style="flex: 1"
       @click="reset"
     >

src/components/DataEditor.vue

@@ -82,7 +82,7 @@ const canEditData = computed((): boolean => {
   <div v-else class="d-flex flex-column pa-4" style="gap: 1rem">
     <div>
       <h1 class="mb-2">
-        {{ selectedSection.label }}
+        {{ selectedSection.title || selectedSection.label }}
       </h1>
       <v-divider />
     </div>

src/components/GlobalComponents.vue

@@ -2,12 +2,10 @@
 import Prompt from '@/components/Prompt.vue';
 import Error from '@/components/Error.vue';
 import Snack from '@/components/Snack.vue';
-import IntroductionDialog from '@/components/IntroductionDialog.vue';
 </script>
 
 <template>
   <Prompt />
   <Error />
   <Snack />
-  <IntroductionDialog />
 </template>

src/components/JSONms.vue

@@ -398,7 +398,7 @@ if (globalStore.session.loggedIn) {
       <template v-if="!splitTabs">
         <v-expand-transition group>
           <div v-if="globalStore.admin.structure && windowWidth > 900">
-            <v-tabs v-model="tab" grow>
+            <v-tabs v-model="tab" height="44" grow>
               <v-tab value="data">
                 <v-icon icon="mdi-pencil" start />
                 Data
@@ -467,8 +467,9 @@ if (globalStore.session.loggedIn) {
       v-if="showActionBar"
       flat
       location="bottom"
-      style="border-top: rgba(0, 0, 0, 0.1) solid 1px"
-      class="pl-3"
+      color="background"
+      class="pl-3 py-0"
+      height="44"
     >
       <div class="w-100 d-flex align-center justify-space-between">
         <ActionBar

src/components/SitePreview.vue

@@ -24,7 +24,6 @@ const loaded = ref(false);
 const loading = ref(false);
 const killIframe = ref(false);
 const siteNotCompatibleSnack = ref(false);
-const expanded = ref(false);
 const { layoutSize, windowHeight, layoutPx } = useLayout();
 const { reloading, siteCompatible, sendMessageToIframe, getPathsFromSectionKey, listenIframeMessage, sendUserDataToIframe } = useIframe();
 const { userDataLoading } = useUserData();
@@ -33,7 +32,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 (expanded.value) {
+  if (globalStore.admin.editorExpanded) {
     return result + 32;
   }
   return result - layoutSize.value.preview.height;
@@ -244,11 +243,11 @@ defineExpose({
               <template #header.end>
                 <v-btn
                   size="small"
-                  @click="expanded = !expanded"
+                  @click="globalStore.admin.editorExpanded = !globalStore.admin.editorExpanded"
                 >
-                  <span v-if="expanded">Collapse</span>
+                  <span v-if="globalStore.admin.editorExpanded">Collapse</span>
                   <span v-else>Expand</span>
-                  <v-icon v-if="expanded" icon="mdi-unfold-less-horizontal" end />
+                  <v-icon v-if="globalStore.admin.editorExpanded" icon="mdi-unfold-less-horizontal" end />
                   <v-icon v-else icon="mdi-unfold-more-horizontal" end />
                 </v-btn>
               </template>

src/composables/typings.ts

@@ -51,7 +51,6 @@ export function useTypings() {
       keys['i18n:' + key] = keys[key];
     })
     keys.i18n = 'string';
-
     let type = keys[field.type || 'string'];
     if (field?.items && typeof field.items === 'string' && field.items.startsWith('enums.')) {
       const name = field.items.split('enums.');
@@ -65,7 +64,7 @@ export function useTypings() {
       if (!field.required && !field.multiple) {
         i18nType += ' | null';
       }
-      type = `JmsLocaleSet<${i18nType}>`;
+      type = `JmsLocaleSet<${i18nType}> | null`;
     } else if (!field.required && !field.multiple && type !== '[]') {
       type += ' | null';
     } else if (field.multiple) {
@@ -85,14 +84,15 @@ export function useTypings() {
         if (lastKey) {
           if (isFieldType(field, 'array')) {
             const name = getStructureName(nameKey + '.' + lastKey + '.items');
-            const jmsArrStructure = { name, fields: [] };
+            const nameSingular = getStructureName(nameKey + '.' + lastKey + '.item');
+            const jmsArrStructure = { name: nameSingular, fields: [] };
             const fields = structuredClone(field.fields);
             fields.hash = { type: 'string', required: true, label: '', fields: {} }
             innerLoop(fields, lastKey, jmsArrStructure, nameKey);
             if (isFieldI18n(field)) {
-              jmsStructure.fields.push({ key: lastKey, type: `JmsLocaleSet<Jms${name}[]>` })
+              jmsStructure.fields.push({ key: lastKey, type: `JmsLocaleSet<Jms${nameSingular}[]>` })
             } else {
-              jmsStructure.fields.push({ key: lastKey, type: `Jms${name}[]` })
+              jmsStructure.fields.push({ key: lastKey, type: `Jms${nameSingular}[]` })
             }
           } else if (isFieldType(field, 'node')) {
             const nodeKey = nameKey + '.' + path;

src/interfaces.ts

@@ -33,6 +33,7 @@ export interface IAdmin {
   previewMode: 'mobile' | 'desktop' | null,
   dataTab: 'data' | 'settings' | 'docs',
   editorTab: 'structure' | 'blueprints' | 'settings' | 'integration',
+  editorExpanded: boolean,
 }
 
 export interface ISnack {

src/stores/global.ts

@@ -46,6 +46,7 @@ export const useGlobalStore = defineStore('global', {
       previewMode: window.innerWidth >= 1400 ? 'desktop' : 'mobile',
       dataTab: 'data',
       editorTab: 'structure',
+      editorExpanded: false,
     },
     session: {
       loggedIn: false,