refactor: move Import Contacts section to DataExportSection component
- Move Import Contacts UI section from AccountViewView to DataExportSection - Consolidate import/export functionality in a single component - Move related methods: uploadImportFile, showContactImport, checkContactImports - Convert module-level ref to component property (inputImportFileName) - Remove unused imports (ref, ImportContent) from AccountViewView - Rename "Download Contacts" button to "Export Contacts" - Improve import UI styling with full-width file input and button
This commit is contained in:
Jose Olarte III
@@ -30,7 +30,7 @@ messages * - Conditional UI based on platform capabilities * * @component *
|
||||
:class="exportButtonClasses"
|
||||
@click="exportDatabase()"
|
||||
>
|
||||
{{ isExporting ? "Exporting..." : "Download Contacts" }}
|
||||
{{ isExporting ? "Exporting..." : "Export Contacts" }}
|
||||
</button>
|
||||
|
||||
<div
|
||||
@@ -55,11 +55,54 @@ messages * - Conditional UI based on platform capabilities * * @component *
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Import Contacts -->
|
||||
<div id="sectionImportContactsSettings" class="mt-4">
|
||||
<h2 class="text-slate-500 text-sm font-bold">Import Contacts</h2>
|
||||
|
||||
<div class="mt-2">
|
||||
<input
|
||||
type="file"
|
||||
class="w-full bg-white rounded-md pe-2 file:border-0 file:bg-gradient-to-b file:from-blue-400 file:to-blue-700 file:shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] file:text-white file:px-3 file:py-2 file:me-2 file:rounded-s-md"
|
||||
@change="uploadImportFile"
|
||||
/>
|
||||
<transition
|
||||
enter-active-class="transform ease-out duration-300 transition"
|
||||
enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
|
||||
enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
|
||||
leave-active-class="transition ease-in duration-500"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<div v-if="showContactImport()" class="mt-2">
|
||||
<!-- Bulk import has an error
|
||||
<div class="flex justify-center">
|
||||
<button
|
||||
class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
|
||||
@click="confirmSubmitImportFile()"
|
||||
>
|
||||
Overwrite Settings & Contacts
|
||||
<br />
|
||||
(which doesn't include Identifier Data)
|
||||
</button>
|
||||
</div>
|
||||
-->
|
||||
<button
|
||||
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
|
||||
@click="checkContactImports()"
|
||||
>
|
||||
Import Contacts
|
||||
</button>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-facing-decorator";
|
||||
import { Router } from "vue-router";
|
||||
import * as R from "ramda";
|
||||
|
||||
import { AppString, NotificationIface } from "../constants/app";
|
||||
@@ -67,8 +110,10 @@ import { Contact } from "../db/tables/contacts";
|
||||
|
||||
import { logger } from "../utils/logger";
|
||||
import { contactsToExportJson } from "../libs/util";
|
||||
import { createNotifyHelpers } from "@/utils/notify";
|
||||
import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
|
||||
import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
|
||||
import { ACCOUNT_VIEW_CONSTANTS } from "@/constants/accountView";
|
||||
import { ImportContent } from "@/interfaces/accountView";
|
||||
|
||||
/**
|
||||
* @vue-component
|
||||
@@ -91,6 +136,12 @@ export default class DataExportSection extends Vue {
|
||||
*/
|
||||
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||||
|
||||
/**
|
||||
* Router instance injected by Vue
|
||||
* Used for navigation
|
||||
*/
|
||||
$router!: Router;
|
||||
|
||||
/**
|
||||
* Active DID (Decentralized Identifier) of the user
|
||||
* Controls visibility of seed backup option
|
||||
@@ -110,6 +161,12 @@ export default class DataExportSection extends Vue {
|
||||
*/
|
||||
showRedNotificationDot = false;
|
||||
|
||||
/**
|
||||
* Reference to the selected import file
|
||||
* Used to store the file selected by the user for import
|
||||
*/
|
||||
private inputImportFileName: Blob | undefined;
|
||||
|
||||
/**
|
||||
* Notification helper for consistent notification patterns
|
||||
* Created as a getter to ensure $notify is available when called
|
||||
@@ -248,5 +305,58 @@ export default class DataExportSection extends Vue {
|
||||
this.showRedNotificationDot = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles file selection for contact import
|
||||
* Stores the selected file for later processing
|
||||
*/
|
||||
async uploadImportFile(event: Event): Promise<void> {
|
||||
this.inputImportFileName = (event.target as HTMLInputElement).files?.[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if a contact import file has been selected
|
||||
* Used to conditionally show the import button
|
||||
*/
|
||||
showContactImport(): boolean {
|
||||
return !!this.inputImportFileName;
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes the selected import file and navigates to the contact import view
|
||||
* Parses the JSON file and extracts contact data for import
|
||||
*/
|
||||
async checkContactImports(): Promise<void> {
|
||||
if (!this.inputImportFileName) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event) => {
|
||||
const fileContent: string = (event.target?.result as string) || "{}";
|
||||
try {
|
||||
const contents: ImportContent = JSON.parse(fileContent);
|
||||
const contactTableRows: Array<Contact> = (
|
||||
contents.data?.data as [{ tableName: string; rows: Array<Contact> }]
|
||||
)?.find((table) => table.tableName === "contacts")
|
||||
?.rows as Array<Contact>;
|
||||
const contactRows = contactTableRows.map(
|
||||
// @ts-expect-error for omitting this field that is found in the Dexie format
|
||||
(contact) => R.omit(["$types"], contact) as Contact,
|
||||
);
|
||||
this.$router.push({
|
||||
name: "contact-import",
|
||||
query: { contacts: JSON.stringify(contactRows) },
|
||||
});
|
||||
} catch (error) {
|
||||
logger.error("Error checking contact imports:", error);
|
||||
this.notify.error(
|
||||
ACCOUNT_VIEW_CONSTANTS.ERRORS.IMPORT_ERROR,
|
||||
TIMEOUTS.STANDARD,
|
||||
);
|
||||
}
|
||||
};
|
||||
reader.readAsText(this.inputImportFileName);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user