feat: create file from template

changelog/unreleased/enhancement-create-from-template

@@ -0,0 +1,7 @@
+Enhancement: Create documents from templates
+
+We've added a new file action to the `external` app which utilizes the document conversion capabilities of certain WOPI apps to create a document from the contents of a template file.
+This action is the default action for left clicks on template files and is also available in the file context menu.
+
+https://github.com/owncloud/web/issues/11750
+https://github.com/owncloud/web/pull/11775

packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue

@@ -22,8 +22,12 @@
           </oc-button>
         </div>
         <p v-if="text" class="info-text" v-text="$gettext(text)" />
-        <dl v-if="list.length" class="info-list">
-          <component :is="item.headline ? 'dt' : 'dd'" v-for="(item, index) in list" :key="index">
+        <dl v-if="listItems.length" class="info-list">
+          <component
+            :is="item.headline ? 'dt' : 'dd'"
+            v-for="(item, index) in listItems"
+            :key="index"
+          >
             {{ $gettext(item.text) }}
           </component>
         </dl>
@@ -45,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue'
+import { computed, defineComponent, PropType, ref } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcDrop from '../OcDrop/OcDrop.vue'
@@ -135,11 +139,16 @@ export default defineComponent({
       default: ''
     }
   },
-  setup() {
+  setup(props) {
     const dropOpen = ref(false)
 
+    const listItems = computed(() => {
+      return (props.list || []).filter((item) => !!item.text)
+    })
+
     return {
-      dropOpen
+      dropOpen,
+      listItems
     }
   }
 })

packages/web-app-external/package.json

@@ -12,6 +12,7 @@
     "@ownclouders/web-pkg": "workspace:*",
     "lodash-es": "4.17.21",
     "pinia": "2.2.4",
+    "qs": "^6.13.0",
     "uuid": "10.0.0",
     "vue-concurrency": "5.0.1",
     "vue3-gettext": "2.4.0",

packages/web-app-external/src/App.vue

@@ -79,6 +79,11 @@ export default defineComponent({
       return queryItemAsString(unref(viewModeQuery))
     })
 
+    const templateIdQuery = useRouteQuery('templateId')
+    const templateIdQueryValue = computed(() => {
+      return queryItemAsString(unref(templateIdQuery))
+    })
+
     const appName = computed(() => {
       const lowerCaseAppName = unref(route)
         .name.toString()
@@ -125,7 +130,8 @@ export default defineComponent({
           file_id: fileId,
           lang: language.current,
           ...(unref(appName) && { app_name: encodeURIComponent(unref(appName)) }),
-          ...(viewMode && { view_mode: viewMode })
+          ...(viewMode && { view_mode: viewMode }),
+          ...(unref(templateIdQueryValue) && { template_id: unref(templateIdQueryValue) })
         })
 
         const url = `${baseUrl}?${query}`

packages/web-app-external/src/composables/createFileHandler.ts

@@ -0,0 +1,40 @@
+import { Resource, SpaceResource, urlJoin } from '@ownclouders/web-client'
+import { stringify } from 'qs'
+import { useCapabilityStore, useClientService, useRequest } from '@ownclouders/web-pkg'
+
+export const useCreateFileHandler = () => {
+  const capabilityStore = useCapabilityStore()
+  const clientService = useClientService()
+  const { makeRequest } = useRequest({ clientService })
+
+  const createFileHandler = async ({
+    fileName,
+    space,
+    currentFolder
+  }: {
+    fileName: string
+    space: SpaceResource
+    currentFolder: Resource
+  }) => {
+    if (fileName === '') {
+      return
+    }
+
+    const query = stringify({
+      parent_container_id: currentFolder.fileId,
+      filename: fileName
+    })
+    const url = `${capabilityStore.filesAppProviders[0].new_url}?${query}`
+    const response = await makeRequest('POST', url)
+    if (response.status !== 200) {
+      throw new Error(`An error has occurred: ${response.status}`)
+    }
+
+    const path = urlJoin(currentFolder.path, fileName) || ''
+    return clientService.webdav.getFileInfo(space, { path })
+  }
+
+  return {
+    createFileHandler
+  }
+}

packages/web-app-external/src/composables/index.ts

@@ -0,0 +1 @@
+export * from './createFileHandler'

packages/web-app-external/src/extensions/createFromTemplate.ts

@@ -0,0 +1,127 @@
+import {
+  ActionExtension,
+  contextRouteNameKey,
+  contextRouteParamsKey,
+  contextRouteQueryKey,
+  EDITOR_MODE_EDIT,
+  FileAction,
+  locationSpacesGeneric,
+  resolveFileNameDuplicate,
+  useAppProviderService,
+  useClientService,
+  useFileActions,
+  useMessages,
+  useRouter,
+  useSpacesStore
+} from '@ownclouders/web-pkg'
+import { unref } from 'vue'
+import { extractNameWithoutExtension, Resource } from '@ownclouders/web-client'
+import { useCreateFileHandler } from '../composables'
+import { useGettext } from 'vue3-gettext'
+
+export const useActionExtensionCreateFromTemplate = (): ActionExtension => {
+  const appProviderService = useAppProviderService()
+  const spacesStore = useSpacesStore()
+  const clientService = useClientService()
+  const router = useRouter()
+  const { createFileHandler } = useCreateFileHandler()
+  const { getEditorRouteOpts } = useFileActions()
+  const { $gettext } = useGettext()
+  const { showErrorMessage } = useMessages()
+
+  const action: FileAction = {
+    name: 'create-from-template',
+    category: 'context',
+    label: () => $gettext('Create from template'),
+    icon: 'swap-box',
+    hasPriority: true,
+    isVisible: ({ resources }) => {
+      if (resources.length !== 1) {
+        return false
+      }
+
+      // for the time being, documents get created in the personal space.
+      // hence, only available to users with personal space.
+      if (!spacesStore.personalSpace) {
+        return false
+      }
+
+      const template = resources[0]
+      if (!template.canDownload()) {
+        return false
+      }
+
+      return appProviderService.templateMimeTypes.some(
+        (mimeType) => mimeType.mime_type === template.mimeType
+      )
+    },
+    handler: async ({ resources }) => {
+      const existingResourcesPromise = clientService.webdav.listFiles(spacesStore.personalSpace, {
+        fileId: spacesStore.personalSpace.fileId
+      })
+      const template = resources[0]
+      const templateMimeType = appProviderService.templateMimeTypes.find(
+        (mimeType) => mimeType.mime_type === template.mimeType
+      )
+      const firstApp = templateMimeType.app_providers.find(
+        (appProvider) => !!appProvider.target_ext
+      )
+
+      let fileName =
+        extractNameWithoutExtension({
+          name: template.name,
+          extension: template.extension
+        } as Resource) + `.${firstApp.target_ext}`
+
+      try {
+        const { resource: personalSpaceRoot, children: existingResources } =
+          await existingResourcesPromise
+        if (existingResources.some((f) => f.name === fileName)) {
+          fileName = resolveFileNameDuplicate(
+            fileName,
+            firstApp.target_ext,
+            unref(existingResources)
+          )
+        }
+
+        const createdFile = await createFileHandler({
+          fileName,
+          space: spacesStore.personalSpace,
+          currentFolder: personalSpaceRoot
+        })
+
+        const routeName = `external-${firstApp.name.toLowerCase()}-apps`
+        const routeOptions = getEditorRouteOpts(
+          routeName,
+          spacesStore.personalSpace,
+          createdFile,
+          EDITOR_MODE_EDIT,
+          undefined,
+          template.fileId
+        )
+        const contextRouteOptions = {
+          [contextRouteNameKey]: locationSpacesGeneric.name,
+          [contextRouteParamsKey]: { driveAliasAndItem: spacesStore.personalSpace.driveAlias },
+          [contextRouteQueryKey]: { fileId: spacesStore.personalSpace.fileId }
+        }
+        routeOptions.query = {
+          ...routeOptions.query,
+          ...contextRouteOptions
+        }
+        await router.push(routeOptions)
+      } catch (e) {
+        console.error(e)
+        showErrorMessage({
+          title: $gettext('Failed to create document from template'),
+          errors: [e]
+        })
+      }
+    }
+  }
+  return {
+    id: 'com.github.owncloud.web.external.action.create-from-template',
+    extensionPointIds: ['global.files.context-actions', 'global.files.default-actions'],
+    type: 'action',
+    action
+  }
+}

packages/web-app-external/src/extensions/index.ts

@@ -0,0 +1 @@
+export * from './createFromTemplate'

packages/web-app-external/src/index.ts

@@ -1,28 +1,24 @@
 import {
   AppWrapperRoute,
   defineWebApplication,
-  useCapabilityStore,
-  useClientService,
-  useRequest,
-  ApplicationInformation
+  ApplicationInformation,
+  Extension
 } from '@ownclouders/web-pkg'
 import translations from '../l10n/translations.json'
 import App from './App.vue'
-import { stringify } from 'qs'
-import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { join } from 'path'
 import { useGettext } from 'vue3-gettext'
 import { useAppProviderService } from '@ownclouders/web-pkg/src/composables/appProviderService'
 import Redirect from './Redirect.vue'
 import { useApplicationReadyStore } from './piniaStores'
+import { computed } from 'vue'
+import { useActionExtensionCreateFromTemplate } from './extensions'
+import { useCreateFileHandler } from './composables'
 
 export default defineWebApplication({
   setup(options: any) {
-    const capabilityStore = useCapabilityStore()
-    const { makeRequest } = useRequest()
-    const clientService = useClientService()
     const { $gettext } = useGettext()
     const appProviderService = useAppProviderService()
+    const { createFileHandler } = useCreateFileHandler()
 
     if (!Object.hasOwn(options, 'appName')) {
       const appInfo: ApplicationInformation = {
@@ -70,32 +66,7 @@ export default defineWebApplication({
           routeName: `${appId}-apps`,
           hasPriority: mimeType.default_application === provider.name,
           ...(mimeType.allow_creation && { newFileMenu: { menuTitle: () => mimeType.name } }),
-          createFileHandler: async ({
-            fileName,
-            space,
-            currentFolder
-          }: {
-            fileName: string
-            space: SpaceResource
-            currentFolder: Resource
-          }) => {
-            if (fileName === '') {
-              return
-            }
-
-            const query = stringify({
-              parent_container_id: currentFolder.fileId,
-              filename: fileName
-            })
-            const url = `${capabilityStore.filesAppProviders[0].new_url}?${query}`
-            const response = await makeRequest('POST', url)
-            if (response.status !== 200) {
-              throw new Error(`An error has occurred: ${response.status}`)
-            }
-
-            const path = join(currentFolder.path, fileName) || ''
-            return clientService.webdav.getFileInfo(space, { path })
-          }
+          createFileHandler
         }
       })
     }
@@ -115,10 +86,16 @@ export default defineWebApplication({
       }
     ]
 
+    const actionCreateFromTemplate = useActionExtensionCreateFromTemplate()
+    const extensions = computed<Extension[]>(() => {
+      return [actionCreateFromTemplate]
+    })
+
     return {
       appInfo,
       routes,
-      translations
+      translations,
+      extensions
     }
   }
 })