@ditojs/admin 3.2.6 → 3.3.0

package/src/components/DitoRoot.vue

@@ -6,7 +6,7 @@
 )
   Transition(name="dito-drag")
     .dito-drag-overlay(
-      v-if="isDraggingFiles"
+      v-if="fileDropTargets.isDraggingFiles"
     )
   TransitionGroup(name="dito-dialog")
     DitoDialog(
@@ -20,10 +20,7 @@
       @remove="removeDialog(key)"
     )
   DitoNavigation
-  main.dito-page.dito-scroll-parent(
-    v-resize="onResizePage"
-    :class="pageClasses"
-  )
+  main.dito-page.dito-scroll-parent(:class="appState.pageClass")
     DitoHeader(
       :spinner="options.spinner"
       :isLoading="isLoading"
@@ -33,53 +30,59 @@
     DitoAccount(
       v-if="user"
     )
-    a.dito-login(
-      v-else-if="allowLogin"
-      @click="rootComponent.login()"
+    button.dito-login(
+      v-else-if="hasSessionStarted"
+      type="button"
+      @click="session.login()"
     )
       span Login
   DitoNotifications(ref="notifications")
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { delegate as tippyDelegate } from 'tippy.js'
-import { mapConcurrently } from '@ditojs/utils'
+import { deprecate } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
-import DitoUser from '../DitoUser.js'
-import DitoView from '../components/DitoView.vue'
 import DitoDialog from './DitoDialog.vue'
-import {
-  setupView,
-  resolveViews,
-  setupSchemaComponents
-} from '../utils/schema/setup.js'
+import { setupSchemaComponents } from '../utils/schema/setup.js'
+import { LoadingTracker } from '../utils/LoadingTracker.js'
+import { FileDropTargets } from '../utils/FileDropTargets.js'
 
 // @vue/component
 export default DitoComponent.component('DitoRoot', {
   mixins: [DomMixin],
   components: { DitoDialog },
+  inject: ['viewRegistry'],
 
   provide() {
     return {
-      $views: () => this.resolvedViews
+      $loadingTracker: () => this.loadingTracker,
+      $fileDropTargets: () => this.fileDropTargets
     }
   },
 
   props: {
-    unresolvedViews: { type: [Object, Function, Promise], required: true },
     options: { type: Object, default: () => ({}) }
   },
 
   data() {
     return {
-      resolvedViews: {},
-      removeRoutes: null,
       dialogs: {},
-      pageWidth: 0,
-      loadingCount: 0,
-      allowLogin: false,
-      isDraggingFiles: false
+      // Tracks all pending requests of the admin, for the header's spinner:
+      loadingTracker: markRaw(new LoadingTracker()),
+      // The functions that end the loading operations begun by the deprecated
+      // `registerLoading(true)`, ended in reverse by `registerLoading(false)`:
+      registeredLoadingEnds: markRaw([]),
+      // Tracks the files dragged over the admin, for the uploads to drop them
+      // on, see `DitoTypeUpload`:
+      fileDropTargets: markRaw(new FileDropTargets()),
+      // Whether `session.start()` finished, after which the login link is
+      // shown without a user, e.g. once the login dialog was canceled:
+      hasSessionStarted: false,
+      // Detaches the login dialog and notifications from the session:
+      detachSessionUserInterface: null
     }
   },
 
@@ -89,20 +92,7 @@ export default DitoComponent.component('DitoRoot', {
     },
 
     isLoading() {
-      return this.loadingCount > 0
-    },
-
-    pageClasses() {
-      const prefix = 'dito-page'
-      // NOTE: Keep synced with $content-width in SCSS:
-      const contentWidth = 900
-      return [
-        this.appState.pageClass,
-        {
-          [`${prefix}--width-80`]: this.pageWidth <= contentWidth * 0.8,
-          [`${prefix}--width-60`]: this.pageWidth <= contentWidth * 0.6
-        }
-      ]
+      return this.loadingTracker.isLoading
     }
   },
 
@@ -111,10 +101,19 @@ export default DitoComponent.component('DitoRoot', {
     // With hot-reloading, it looks like destroyed hooks aren't always called
     // for route components so reset the array of registered components instead.
     this.appState.routeComponents = []
+    this.detachSessionUserInterface = this.session.attachUserInterface({
+      requestLoginData: () => this.showLoginDialog(),
+      notify: options => this.notify(options)
+    })
+  },
+
+  unmounted() {
+    this.detachSessionUserInterface()
   },
 
   async mounted() {
-    this.setupDragAndDrop()
+    // Only the overlay is rendered here, the uploads handle the dropped files.
+    this.domOn(document, this.fileDropTargets.getDocumentEventHandlers())
 
     tippyDelegate(this.$el, {
       target: '.dito-info',
@@ -127,164 +126,98 @@ export default DitoComponent.component('DitoRoot', {
       onShow: instance => instance.setContent(instance.reference.dataset.info)
     })
 
-    // Clear the label marked as active on all mouse and keyboard events, except
-    // the ones that DitoLabel itself intercepts.
-    this.domOn(document, {
-      click: event => {
-        if (!event.target.closest('.dito-label')) {
-          this.appState.activeLabel = null
-        }
-      },
-
-      keyup: event => {
-        if (event.code === 'Tab') {
-          this.appState.activeLabel = null
+    // Warn before the page is reloaded or closed with unsaved changes. Route
+    // changes within the admin are guarded by `RouteMixin` instead.
+    this.domOn(window, {
+      beforeunload: event => {
+        if (this.hasUnsavedChanges()) {
+          event.preventDefault()
+          // Required by older browsers to show the warning:
+          event.returnValue = ''
         }
       }
     })
 
     try {
-      this.allowLogin = false
-      if (await this.fetchUser()) {
-        await this.resolveViews()
-      } else {
-        await this.login()
-      }
-    } catch (err) {
-      console.error(err)
+      await this.session.start()
+    } catch (error) {
+      console.error(error)
     }
-    this.allowLogin = true
+    this.hasSessionStarted = true
   },
 
   methods: {
-    setupDragAndDrop() {
-      // This code only happens the visual effects around dragging and dropping
-      // files into a `DitoTypeUpload` component. The actual uploading is
-      // handled by the `DitoTypeUpload` component itself.
-
-      let dragCount = 0
-      let uploads = []
-
-      const toggleDropTargetClass = enabled => {
-        for (const upload of uploads) {
-          upload
-            .closest('.dito-container')
-            .classList.toggle('dito-drop-target', enabled)
-        }
-        if (!enabled) {
-          uploads = []
-        }
-      }
-
-      const setDraggingFiles = enabled => {
-        this.isDraggingFiles = enabled
-        if (enabled) {
-          toggleDropTargetClass(true)
-        } else {
-          setTimeout(() => toggleDropTargetClass(false), 150)
-        }
+    /**
+     * @deprecated `isLoading` is tracked by `loadingTracker` now. Use
+     * `loadingTracker.begin()` and call the function that it returns, or
+     * `loadingTracker.track(callback)` instead.
+     */
+    registerLoading(isLoading) {
+      deprecate(
+        'DitoRoot.registerLoading() is deprecated, use ' +
+        '`loadingTracker.begin()` or `loadingTracker.track()` instead.'
+      )
+      if (isLoading) {
+        this.registeredLoadingEnds.push(this.loadingTracker.begin())
+      } else {
+        this.registeredLoadingEnds.pop()?.()
       }
-
-      this.domOn(document, {
-        dragenter: event => {
-          if (!dragCount && event.dataTransfer) {
-            uploads = document.querySelectorAll('.dito-upload')
-            const hasUploads = uploads.length > 0
-            event.dataTransfer.effectAllowed = hasUploads ? 'copy' : 'none'
-            if (hasUploads) {
-              setDraggingFiles(true)
-            } else {
-              event.preventDefault()
-              event.stopPropagation()
-              return
-            }
-          }
-          dragCount++
-        },
-
-        dragleave: event => {
-          dragCount--
-          if (!dragCount && event.dataTransfer) {
-            setDraggingFiles(false)
-          }
-        },
-
-        dragover: event => {
-          if (event.dataTransfer) {
-            const canDrop = event.target.closest(
-              '.dito-container:has(.dito-upload)'
-            )
-            event.dataTransfer.dropEffect = canDrop ? 'copy' : 'none'
-            if (!canDrop) {
-              event.preventDefault()
-              event.stopPropagation()
-            }
-          }
-        },
-
-        drop: event => {
-          dragCount = 0
-          if (event.dataTransfer) {
-            setDraggingFiles(false)
-          }
-        }
-      })
     },
 
-    notify({ type = 'info', title, text, error, duration } = {}) {
-      this.notifications.notify({ type, title, text, error, duration })
+    notify(options) {
+      this.notifications.notify(options)
     },
 
     closeNotifications() {
       this.notifications.destroyAll()
     },
 
-    registerLoading(isLoading) {
-      this.loadingCount += isLoading ? 1 : -1
+    // Returns true if any of the route components has unsaved changes, e.g. a
+    // form with a dirty data model or a view with edited components, see
+    // `RouteMixin`.
+    hasUnsavedChanges() {
+      return this.appState.routeComponents.some(
+        routeComponent => routeComponent.hasUnsavedChanges
+      )
     },
 
-    showDialog({ components, buttons, data, settings }) {
+    async showDialog({ components, buttons, data, settings }) {
       // Shows a dito-dialog component and wraps it in a promise so that the
       // buttons in the dialog can use `dialog.resolve()` and `dialog.reject()`
       // to close the modal dialog and resolve / reject the promise at once.
-      return new Promise(
-        async (resolve, reject) => {
-          // Process components to resolve async schemas.
-          const routes = []
-          await setupSchemaComponents(
-            this.api,
-            { type: 'dialog', components },
-            routes,
-            0
-          )
-          if (routes.length > 0) {
-            throw new Error(
-              'Dialogs do not support components that produce routes'
-            )
-          }
-          const key = `dialog-${++dialogId}`
-          this.dialogs[key] = {
-            components,
-            buttons,
-            data,
-            settings,
-            promise: { resolve, reject }
-          }
-        }
+      // Process components to resolve async schemas first, so that errors
+      // reject the returned promise.
+      const routes = []
+      await setupSchemaComponents(
+        this.api,
+        { type: 'dialog', components },
+        routes,
+        0
       )
+      if (routes.length > 0) {
+        throw new Error('Dialogs do not support components that produce routes')
+      }
+      return new Promise((resolve, reject) => {
+        const key = `dialog-${++dialogId}`
+        this.dialogs[key] = {
+          components,
+          buttons,
+          data,
+          settings,
+          promise: { resolve, reject }
+        }
+      })
     },
 
     removeDialog(key) {
       delete this.dialogs[key]
     },
 
-    async login() {
-      this.allowLogin = true
-      const {
-        additionalComponents,
-        redirectAfterLogin
-      } = this.options.login || {}
-      const loginData = await this.showDialog({
+    // Shows the login dialog for `Session.login()`, and returns the entered
+    // credentials, or `null` if the user cancels.
+    showLoginDialog() {
+      const { additionalComponents } = this.options.login || {}
+      return this.showDialog({
         components: {
           username: {
             type: 'text',
@@ -311,141 +244,11 @@ export default DitoComponent.component('DitoRoot', {
           }
         }
       })
-      if (loginData) {
-        try {
-          const response = await this.sendRequest({
-            resource: this.api.users.login,
-            data: loginData,
-            internal: true
-          })
-          if (redirectAfterLogin) {
-            location.replace(redirectAfterLogin)
-          } else {
-            this.setUser(response.data.user)
-            await this.resolveViews()
-          }
-        } catch (err) {
-          const error = err.response?.data?.error || err
-          this.notify({
-            type: 'error',
-            error,
-            title: 'Authentication Error',
-            text: error
-          })
-          this.login()
-        }
-      }
-    },
-
-    navigateHome() {
-      return this.navigate('/')
-    },
-
-    async logout() {
-      try {
-        const response = await this.sendRequest({
-          resource: this.api.users.logout,
-          internal: true
-        })
-        if (response.data.success) {
-          this.setUser(null)
-          this.navigateHome()
-        }
-      } catch (err) {
-        console.error(err)
-      }
-    },
-
-    async fetchUser() {
-      let user = null
-      try {
-        const response = await this.sendRequest({
-          resource: this.api.users.session,
-          internal: true
-        })
-        user = response.data.user || null
-      } catch (err) {
-        const error = err.response?.data?.error || err
-        this.notify({
-          type: 'error',
-          error,
-          title: 'Authentication Error',
-          text: error
-        })
-      }
-      this.setUser(user)
-      return user
-    },
-
-    setUser(user) {
-      this.appState.user = (
-        user &&
-        Object.setPrototypeOf(user, DitoUser.prototype)
-      )
-      // Clear resolved views when user is logged out.
-      if (!user) {
-        this.resolvedViews = {}
-        this.navigateHome()
-      }
-    },
-
-    async ensureUser() {
-      if (!(await this.fetchUser())) {
-        await this.login()
-      }
-    },
-
-    async resolveViews() {
-      try {
-        this.resolvedViews = await resolveViews(this.unresolvedViews)
-      } catch (error) {
-        if (!error.request) {
-          console.error(error)
-        }
-        return this.login()
-      }
-      // Collect all routes from the root schema components
-      const routes = await mapConcurrently(
-        Object.entries(this.resolvedViews),
-        ([name, schema]) => setupView(DitoView, this.api, schema, name)
-      )
-      // Now that the routes are loaded, replace all existing routes with the
-      // new routes, and restore the current path.
-      const { fullPath } = this.$route
-      this.removeRoutes?.()
-      this.removeRoutes = addRoutes(this.$router, [
-        {
-          name: 'root',
-          path: '/',
-          components: {}
-        },
-        ...routes.flat()
-      ])
-      this.$router.replace(fullPath)
-    },
-
-    onResizePage({ contentRect: { width } }) {
-      this.pageWidth = width
     }
   }
 })
 
 let dialogId = 0
-
-function addRoutes(router, routes) {
-  const removers = []
-  for (const route of routes) {
-    removers.push(
-      router.addRoute(route)
-    )
-  }
-
-  return () => {
-    for (const remove of removers) {
-      remove()
-    }
-  }
-}
 </script>
 
 <style lang="scss">
@@ -459,6 +262,9 @@ function addRoutes(router, routes) {
 }
 
 .dito-page {
+  // For the layout of `DitoContainer` in narrow pages:
+  container: dito-page / inline-size;
+
   --max-content-width: #{$content-width};
   --max-page-width: calc(var(--max-content-width) + 2 * #{$content-padding});
 
@@ -473,9 +279,15 @@ function addRoutes(router, routes) {
   }
 }
 
-.dito-account,
 .dito-login {
-  cursor: pointer;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: none;
+
+  &:focus-visible {
+    box-shadow: $shadow-focus;
+  }
 }
 
 .dito-drag-overlay {
@@ -490,35 +302,16 @@ function addRoutes(router, routes) {
   backdrop-filter: blur(8px);
 }
 
-.dito-drop-target {
-  --shadow-alpha: 0.25;
-
-  background: $content-color-background;
-  border-radius: $border-radius;
-  z-index: $z-index-drag-overlay + 1;
-  filter: drop-shadow(0 4px 8px rgb(0, 0, 0, var(--shadow-alpha)));
-}
-
 .dito-drag-enter-active,
 .dito-drag-leave-active {
-  $duration: 0.15s;
-
   transition:
-    opacity $duration,
-    backdrop-filter $duration;
-
-  ~ * .dito-drop-target {
-    transition: filter $duration;
-  }
+    opacity $drag-overlay-duration,
+    backdrop-filter $drag-overlay-duration;
 }
 
 .dito-drag-enter-from,
 .dito-drag-leave-to {
   opacity: 0;
   backdrop-filter: blur(0);
-
-  ~ * .dito-drop-target {
-    --shadow-alpha: 0;
-  }
 }
 </style>