fix(ux): handle directory does not exist

- type DatabaseSelector
- fix dialog button width, varios types, injection

fyo/model/types.ts

@@ -63,7 +63,7 @@ export type ListsMap = Record<string, ListFunction | undefined>;
 
 export interface Action {
   label: string;
-  action: (doc: Doc, router: Router) => Promise<void> | void;
+  action: (doc: Doc, router: Router) => Promise<void> | void | unknown;
   condition?: (doc: Doc) => boolean;
   group?: string;
   type?: 'primary' | 'secondary';

main/helpers.ts

@@ -5,10 +5,7 @@ import { Main } from 'main';
 import config from 'utils/config';
 import { BackendResponse } from 'utils/ipc/types';
 import { IPC_CHANNELS } from 'utils/messages';
-
-interface ConfigFilesWithModified extends ConfigFile {
-  modified: string;
-}
+import type { ConfigFilesWithModified } from 'utils/types';
 
 export async function setAndGetCleanedConfigFiles() {
   const files = config.get(ConfigKeys.Files, []) as ConfigFile[];

src/App.vue

@@ -17,6 +17,7 @@
       @change-db-file="showDbSelector"
     />
     <DatabaseSelector
+      ref="databaseSelector"
       v-if="activeScreen === 'DatabaseSelector'"
       @file-selected="fileSelected"
     />
@@ -49,6 +50,7 @@ import SetupWizard from './pages/SetupWizard/SetupWizard.vue';
 import setupInstance from './setup/setupInstance';
 import { SetupWizardOptions } from './setup/types';
 import './styles/index.css';
+import { connectToDatabase, dbErrorActionSymbols } from './utils/db';
 import { initializeInstance } from './utils/initialization';
 import * as injectionKeys from './utils/injectionKeys';
 import { checkForUpdates } from './utils/ipcCalls';
@@ -80,7 +82,17 @@ export default defineComponent({
     provide(injectionKeys.shortcutsKey, shortcuts);
     provide(injectionKeys.languageDirectionKey, languageDirection);
 
-    return { keys, searcher, shortcuts, languageDirection };
+    const databaseSelector = ref<InstanceType<typeof DatabaseSelector> | null>(
+      null
+    );
+
+    return {
+      keys,
+      searcher,
+      shortcuts,
+      languageDirection,
+      databaseSelector,
+    };
   },
   data() {
     return {
@@ -170,7 +182,15 @@ export default defineComponent({
       await this.setDesk(filePath);
     },
     async showSetupWizardOrDesk(filePath: string): Promise<void> {
-      const countryCode = await fyo.db.connectToDatabase(filePath);
+      const { countryCode, error, actionSymbol } = await connectToDatabase(
+        this.fyo,
+        filePath
+      );
+
+      if (!countryCode && error && actionSymbol) {
+        return await this.handleConnectionFailed(error, actionSymbol);
+      }
+
       const setupComplete = await fyo.getValue(
         ModelNameEnum.AccountingSettings,
         'setupComplete'
@@ -185,6 +205,19 @@ export default defineComponent({
       await updatePrintTemplates(fyo);
       await this.setDesk(filePath);
     },
+    async handleConnectionFailed(error: Error, actionSymbol: symbol) {
+      await this.showDbSelector();
+
+      if (actionSymbol === dbErrorActionSymbols.CancelSelection) {
+        return;
+      }
+
+      if (actionSymbol === dbErrorActionSymbols.SelectFile) {
+        return await this.databaseSelector?.existingDatabase();
+      }
+
+      throw error;
+    },
     async setDeskRoute(): Promise<void> {
       const { onboardingComplete } = await fyo.doc.getDoc('GetStarted');
       const { hideGetStarted } = await fyo.doc.getDoc('SystemSettings');

src/components/Dialog.vue

@@ -32,7 +32,7 @@
               v-for="(b, index) of buttons"
               :ref="b.isPrimary ? 'primary' : 'secondary'"
               :key="b.label"
-              class="w-20"
+              style="min-width: 5rem"
               :type="b.isPrimary ? 'primary' : 'secondary'"
               @click="() => handleClick(index)"
             >

src/components/DropdownWithActions.vue

@@ -32,7 +32,10 @@ export default defineComponent({
     icon: { type: Boolean, default: true },
   },
   inject: {
-    injectedDoc: { from: 'doc' },
+    injectedDoc: {
+      from: 'doc',
+      default: undefined,
+    },
   },
   components: {
     Dropdown,

src/pages/DatabaseSelector.vue

@@ -212,7 +212,7 @@
     </Modal>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { setupDummyInstance } from 'dummy';
 import { ipcRenderer } from 'electron';
 import { t } from 'fyo';
@@ -227,8 +227,10 @@ import { showDialog } from 'src/utils/interactive';
 import { deleteDb, getSavePath } from 'src/utils/ipcCalls';
 import { updateConfigFiles } from 'src/utils/misc';
 import { IPC_ACTIONS } from 'utils/messages';
+import type { ConfigFilesWithModified } from 'utils/types';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
   name: 'DatabaseSelector',
   emits: ['file-selected'],
   data() {
@@ -240,27 +242,36 @@ export default {
       creatingDemo: false,
       loadingDatabase: false,
       files: [],
+    } as {
+      openModal: boolean;
+      baseCount: number;
+      creationMessage: string;
+      creationPercent: number;
+      creatingDemo: boolean;
+      loadingDatabase: boolean;
+      files: ConfigFilesWithModified[];
     };
   },
   async mounted() {
     await this.setFiles();
 
     if (fyo.store.isDevelopment) {
+      // @ts-ignore
       window.ds = this;
     }
   },
   methods: {
-    truncate(value) {
+    truncate(value: string) {
       if (value.length < 72) {
         return value;
       }
 
       return '...' + value.slice(value.length - 72);
     },
-    formatDate(isoDate) {
+    formatDate(isoDate: string) {
       return DateTime.fromISO(isoDate).toRelative();
     },
-    async deleteDb(i) {
+    async deleteDb(i: number) {
       const file = this.files[i];
       const vm = this;
 
@@ -317,7 +328,11 @@ export default {
       this.creatingDemo = false;
     },
     async setFiles() {
-      this.files = (await ipcRenderer.invoke(IPC_ACTIONS.GET_DB_LIST))?.sort(
+      const dbList: ConfigFilesWithModified[] = await ipcRenderer.invoke(
+        IPC_ACTIONS.GET_DB_LIST
+      );
+
+      this.files = dbList?.sort(
         (a, b) => Date.parse(b.modified) - Date.parse(a.modified)
       );
     },
@@ -331,7 +346,7 @@ export default {
         return;
       }
 
-      this.connectToDatabase(filePath, true);
+      this.emitFileSelected(filePath, true);
     },
     async existingDatabase() {
       if (this.creatingDemo) {
@@ -345,16 +360,16 @@ export default {
           filters: [{ name: 'SQLite DB File', extensions: ['db'] }],
         })
       )?.filePaths?.[0];
-      this.connectToDatabase(filePath);
+      this.emitFileSelected(filePath);
     },
-    async selectFile(file) {
+    async selectFile(file: ConfigFilesWithModified) {
       if (this.creatingDemo) {
         return;
       }
 
-      await this.connectToDatabase(file.dbPath);
+      await this.emitFileSelected(file.dbPath);
     },
-    async connectToDatabase(filePath, isNew) {
+    async emitFileSelected(filePath: string, isNew?: boolean) {
       if (!filePath) {
         return;
       }
@@ -374,5 +389,5 @@ export default {
     Modal,
     Button,
   },
-};
+});
 </script>

src/pages/ImportWizard.vue

@@ -123,7 +123,7 @@
             :border="true"
             :key="index"
             :df="gridColumnTitleDf"
-            :value="importer.assignedTemplateFields[index]"
+            :value="importer.assignedTemplateFields[index]!"
             @change="(value: string | null) => importer.setTemplateField(index, value)"
           />
         </div>
@@ -160,6 +160,7 @@
                 v-if="!importer.assignedTemplateFields[cidx]"
                 :title="getFieldTitle(val)"
                 :df="{
+                  fieldtype: 'Data',
                   fieldname: 'tempField',
                   label: t`Temporary`,
                   placeholder: t`Select column`,
@@ -244,6 +245,7 @@
             >
               <Check
                 :df="{
+                  fieldtype: 'Check',
                   fieldname: tf.fieldname,
                   label: tf.label,
                 }"
@@ -367,7 +369,7 @@
 </template>
 <script lang="ts">
 import { DocValue } from 'fyo/core/types';
-import { Action as BaseAction } from 'fyo/model/types';
+import { Action } from 'fyo/model/types';
 import { ValidationError } from 'fyo/utils/errors';
 import { ModelNameEnum } from 'models/types';
 import { OptionField, RawValue, SelectOption } from 'schemas/types';
@@ -391,10 +393,6 @@ import { selectTextFile } from 'src/utils/ui';
 import { defineComponent } from 'vue';
 import Loading from '../components/Loading.vue';
 
-type Action = Pick<BaseAction, 'condition' | 'component'> & {
-  action: Function;
-};
-
 type ImportWizardData = {
   showColumnPicker: boolean;
   complete: boolean;
@@ -612,6 +610,7 @@ export default defineComponent({
 
       if (this.canImportData) {
         actions.push({
+          label: selectFileLabel,
           component: {
             template: `<span>{{ "${selectFileLabel}" }}</span>`,
           },
@@ -620,6 +619,7 @@ export default defineComponent({
       }
 
       const pickColumnsAction = {
+        label: this.t`Pick Import Columns`,
         component: {
           template: '<span>{{ t`Pick Import Columns` }}</span>',
         },
@@ -627,6 +627,7 @@ export default defineComponent({
       };
 
       const cancelAction = {
+        label: this.t`Cancel`,
         component: {
           template: '<span class="text-red-700" >{{ t`Cancel` }}</span>',
         },

src/utils/db.ts

@@ -0,0 +1,67 @@
+import { Fyo, t } from 'fyo';
+
+export const dbErrorActionSymbols = {
+  SelectFile: Symbol('select-file'),
+  CancelSelection: Symbol('cancel-selection'),
+} as const;
+
+const dbErrors = {
+  DirectoryDoesNotExist: 'directory does not exist',
+} as const;
+
+type Conn = {
+  countryCode: string;
+  error?: Error;
+  actionSymbol?: typeof dbErrorActionSymbols[keyof typeof dbErrorActionSymbols];
+};
+
+export async function connectToDatabase(
+  fyo: Fyo,
+  dbPath: string,
+  countryCode?: string
+): Promise<Conn> {
+  try {
+    return { countryCode: await fyo.db.connectToDatabase(dbPath, countryCode) };
+  } catch (error) {
+    if (!(error instanceof Error)) {
+      throw error;
+    }
+
+    const actionSymbol = await handleDatabaseConnectionError(error, dbPath);
+
+    return { countryCode: '', error, actionSymbol };
+  }
+}
+
+async function handleDatabaseConnectionError(error: Error, dbPath: string) {
+  if (error.message?.includes(dbErrors.DirectoryDoesNotExist)) {
+    return await handleDirectoryDoesNotExist(dbPath);
+  }
+
+  throw error;
+}
+
+async function handleDirectoryDoesNotExist(dbPath: string) {
+  const { showDialog } = await import('src/utils/interactive');
+  return await showDialog({
+    type: 'error',
+    title: t`Cannot Open File`,
+    detail: t`Directory for file ${dbPath} does not exist`,
+    buttons: [
+      {
+        label: t`Select File`,
+        action() {
+          return dbErrorActionSymbols.SelectFile;
+        },
+        isPrimary: true,
+      },
+      {
+        label: t`Cancel`,
+        action() {
+          return dbErrorActionSymbols.CancelSelection;
+        },
+        isEscape: true,
+      },
+    ],
+  });
+}

utils/types.ts

@@ -1,3 +1,5 @@
+import type { ConfigFile } from "fyo/core/types";
+
 export type UnknownMap = Record<string, unknown>;
 export type Translation = { translation: string; context?: string };
 export type LanguageMap = Record<string, Translation>;
@@ -66,3 +68,7 @@ interface ModMap {
   shift: boolean;
   repeat: boolean;
 }
+
+export interface ConfigFilesWithModified extends ConfigFile {
+  modified: string;
+}