Browse Source

IndexedDB migration: reorder the sections to accounts then settings then contacts

migrate-dexie-to-sqlite
Trent Larson 7 days ago
parent
commit
8eff407a9c
  1. 161
      src/views/DatabaseMigration.vue

161
src/views/DatabaseMigration.vue

@ -246,22 +246,23 @@
<div v-if="comparison" class="space-y-6"> <div v-if="comparison" class="space-y-6">
<!-- Summary Cards --> <!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
<!-- Accounts Summary (moved first) -->
<div class="bg-white overflow-hidden shadow rounded-lg"> <div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5"> <div class="p-5">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<IconRenderer <IconRenderer
icon-name="chart" icon-name="lock"
svg-class="h-6 w-6 text-blue-600" svg-class="h-6 w-6 text-orange-600"
/> />
</div> </div>
<div class="ml-5 w-0 flex-1"> <div class="ml-5 w-0 flex-1">
<dl> <dl>
<dt class="text-sm font-medium text-gray-500 truncate"> <dt class="text-sm font-medium text-gray-500 truncate">
Dexie Contacts Dexie Accounts
</dt> </dt>
<dd class="text-lg font-medium text-gray-900"> <dd class="text-lg font-medium text-gray-900">
{{ comparison.dexieContacts.length }} {{ comparison.dexieAccounts.length }}
</dd> </dd>
</dl> </dl>
</div> </div>
@ -275,16 +276,16 @@
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<IconRenderer <IconRenderer
icon-name="check" icon-name="check"
svg-class="h-6 w-6 text-green-600" svg-class="h-6 w-6 text-teal-600"
/> />
</div> </div>
<div class="ml-5 w-0 flex-1"> <div class="ml-5 w-0 flex-1">
<dl> <dl>
<dt class="text-sm font-medium text-gray-500 truncate"> <dt class="text-sm font-medium text-gray-500 truncate">
SQLite Contacts SQLite Accounts
</dt> </dt>
<dd class="text-lg font-medium text-gray-900"> <dd class="text-lg font-medium text-gray-900">
{{ comparison.sqliteContacts.length }} {{ comparison.sqliteAccounts.length }}
</dd> </dd>
</dl> </dl>
</div> </div>
@ -292,6 +293,7 @@
</div> </div>
</div> </div>
<!-- Settings Summary (second) -->
<div class="bg-white overflow-hidden shadow rounded-lg"> <div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5"> <div class="p-5">
<div class="flex items-center"> <div class="flex items-center">
@ -338,22 +340,23 @@
</div> </div>
</div> </div>
<!-- Contacts Summary (last) -->
<div class="bg-white overflow-hidden shadow rounded-lg"> <div class="bg-white overflow-hidden shadow rounded-lg">
<div class="p-5"> <div class="p-5">
<div class="flex items-center"> <div class="flex items-center">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<IconRenderer <IconRenderer
icon-name="lock" icon-name="chart"
svg-class="h-6 w-6 text-orange-600" svg-class="h-6 w-6 text-blue-600"
/> />
</div> </div>
<div class="ml-5 w-0 flex-1"> <div class="ml-5 w-0 flex-1">
<dl> <dl>
<dt class="text-sm font-medium text-gray-500 truncate"> <dt class="text-sm font-medium text-gray-500 truncate">
Dexie Accounts Dexie Contacts
</dt> </dt>
<dd class="text-lg font-medium text-gray-900"> <dd class="text-lg font-medium text-gray-900">
{{ comparison.dexieAccounts.length }} {{ comparison.dexieContacts.length }}
</dd> </dd>
</dl> </dl>
</div> </div>
@ -367,16 +370,16 @@
<div class="flex-shrink-0"> <div class="flex-shrink-0">
<IconRenderer <IconRenderer
icon-name="check" icon-name="check"
svg-class="h-6 w-6 text-teal-600" svg-class="h-6 w-6 text-green-600"
/> />
</div> </div>
<div class="ml-5 w-0 flex-1"> <div class="ml-5 w-0 flex-1">
<dl> <dl>
<dt class="text-sm font-medium text-gray-500 truncate"> <dt class="text-sm font-medium text-gray-500 truncate">
SQLite Accounts SQLite Contacts
</dt> </dt>
<dd class="text-lg font-medium text-gray-900"> <dd class="text-lg font-medium text-gray-900">
{{ comparison.sqliteAccounts.length }} {{ comparison.sqliteContacts.length }}
</dd> </dd>
</dl> </dl>
</div> </div>
@ -387,11 +390,11 @@
<!-- Differences Section --> <!-- Differences Section -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Contacts Differences --> <!-- Account Differences (moved first) -->
<div class="bg-white shadow rounded-lg"> <div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
Contact Differences Account Differences
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
@ -406,7 +409,7 @@
<span class="text-sm font-medium text-blue-900">Added</span> <span class="text-sm font-medium text-blue-900">Added</span>
</div> </div>
<span class="text-sm font-bold text-blue-900">{{ <span class="text-sm font-bold text-blue-900">{{
comparison.differences.contacts.added.length comparison.differences.accounts.added.length
}}</span> }}</span>
</div> </div>
@ -423,7 +426,7 @@
> >
</div> </div>
<span class="text-sm font-bold text-yellow-900">{{ <span class="text-sm font-bold text-yellow-900">{{
comparison.differences.contacts.modified.length comparison.differences.accounts.modified.length
}}</span> }}</span>
</div> </div>
@ -440,77 +443,83 @@
> >
</div> </div>
<span class="text-sm font-bold text-red-900">{{ <span class="text-sm font-bold text-red-900">{{
comparison.differences.contacts.missing.length comparison.differences.accounts.missing.length
}}</span> }}</span>
</div> </div>
</div> </div>
<!-- Contact Details --> <!-- Account Details -->
<div <div
v-if="comparison.differences.contacts.added.length > 0" v-if="comparison.differences.accounts.added.length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Added Contacts ({{ comparison.differences.contacts.added.length }}): Added Accounts ({{ comparison.differences.accounts.added.length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="contact in comparison.differences.contacts.added" v-for="account in comparison.differences.accounts.added"
:key="contact.did" :key="account.id"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">{{ contact.name || '<empty>' }}</div> <div class="font-medium">ID: {{ account.id }}</div>
<div class="text-gray-500">{{ contact.did }}</div> <div class="text-gray-500">{{ account.did }}</div>
<div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> <div class="text-gray-400">Created: {{ account.dateCreated }}</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Modified Contacts --> <!-- Modified Accounts -->
<div <div
v-if="comparison.differences.contacts.modified.length > 0" v-if="comparison.differences.accounts.modified.length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Modified Contacts ({{ comparison.differences.contacts.modified.length }}): Modified Accounts ({{ comparison.differences.accounts.modified.length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="contact in comparison.differences.contacts.modified" v-for="account in comparison.differences.accounts.modified"
:key="contact.did" :key="account.id"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">{{ contact.name || '<empty>' }}</div> <div class="font-medium">ID: {{ account.id }}</div>
<div class="text-gray-500">{{ contact.did }}</div> <div class="text-gray-500">{{ account.did }}</div>
<div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> <div class="text-gray-400">Created: {{ account.dateCreated }}</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Missing Contacts --> <!-- Missing Accounts -->
<div <div
v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0" v-if="comparison.differences.accounts.missing.filter(a => a.did).length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}): Missing Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)" v-for="account in comparison.differences.accounts.missing.filter(a => a.did)"
:key="contact.did" :key="account.id"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">{{ contact.name || '<empty>' }}</div> <div class="font-medium">ID: {{ account.id }}</div>
<div class="text-gray-500">{{ contact.did }}</div> <div class="text-gray-500">{{ account.did }}</div>
<div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div> <div class="text-gray-400">Created: {{ account.dateCreated }}</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Settings Differences --> <!-- Settings Differences (second) -->
<div class="bg-white shadow rounded-lg"> <div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
@ -633,11 +642,11 @@
</div> </div>
</div> </div>
<!-- Account Differences --> <!-- Contacts Differences (last) -->
<div class="bg-white shadow rounded-lg"> <div class="bg-white shadow rounded-lg">
<div class="px-4 py-5 sm:p-6"> <div class="px-4 py-5 sm:p-6">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
Account Differences Contact Differences
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
@ -652,7 +661,7 @@
<span class="text-sm font-medium text-blue-900">Added</span> <span class="text-sm font-medium text-blue-900">Added</span>
</div> </div>
<span class="text-sm font-bold text-blue-900">{{ <span class="text-sm font-bold text-blue-900">{{
comparison.differences.accounts.added.length comparison.differences.contacts.added.length
}}</span> }}</span>
</div> </div>
@ -669,7 +678,7 @@
> >
</div> </div>
<span class="text-sm font-bold text-yellow-900">{{ <span class="text-sm font-bold text-yellow-900">{{
comparison.differences.accounts.modified.length comparison.differences.contacts.modified.length
}}</span> }}</span>
</div> </div>
@ -686,76 +695,70 @@
> >
</div> </div>
<span class="text-sm font-bold text-red-900">{{ <span class="text-sm font-bold text-red-900">{{
comparison.differences.accounts.missing.length comparison.differences.contacts.missing.length
}}</span> }}</span>
</div> </div>
</div> </div>
<!-- Account Details --> <!-- Contact Details -->
<div <div
v-if="comparison.differences.accounts.added.length > 0" v-if="comparison.differences.contacts.added.length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Added Accounts ({{ comparison.differences.accounts.added.length }}): Added Contacts ({{ comparison.differences.contacts.added.length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="account in comparison.differences.accounts.added" v-for="contact in comparison.differences.contacts.added"
:key="account.id" :key="contact.did"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">ID: {{ account.id }}</div> <div class="font-medium">{{ contact.name || '<empty>' }}</div>
<div class="text-gray-500">{{ account.did }}</div> <div class="text-gray-500">{{ contact.did }}</div>
<div class="text-gray-400">Created: {{ account.dateCreated }}</div> <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Modified Accounts --> <!-- Modified Contacts -->
<div <div
v-if="comparison.differences.accounts.modified.length > 0" v-if="comparison.differences.contacts.modified.length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Modified Accounts ({{ comparison.differences.accounts.modified.length }}): Modified Contacts ({{ comparison.differences.contacts.modified.length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="account in comparison.differences.accounts.modified" v-for="contact in comparison.differences.contacts.modified"
:key="account.id" :key="contact.did"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">ID: {{ account.id }}</div> <div class="font-medium">{{ contact.name || '<empty>' }}</div>
<div class="text-gray-500">{{ account.did }}</div> <div class="text-gray-500">{{ contact.did }}</div>
<div class="text-gray-400">Created: {{ account.dateCreated }}</div> <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Missing Accounts --> <!-- Missing Contacts -->
<div <div
v-if="comparison.differences.accounts.missing.filter(a => a.did).length > 0" v-if="comparison.differences.contacts.missing.filter(c => c.did).length > 0"
class="mt-4" class="mt-4"
> >
<h4 class="text-sm font-medium text-gray-900 mb-2"> <h4 class="text-sm font-medium text-gray-900 mb-2">
Missing Accounts ({{ comparison.differences.accounts.missing.filter(a => a.did).length }}): Missing Contacts ({{ comparison.differences.contacts.missing.filter(c => c.did).length }}):
</h4> </h4>
<div class="space-y-1"> <div class="space-y-1">
<div <div
v-for="account in comparison.differences.accounts.missing.filter(a => a.did)" v-for="contact in comparison.differences.contacts.missing.filter(c => c.did)"
:key="account.id" :key="contact.did"
class="text-xs text-gray-600 bg-gray-50 p-2 rounded" class="text-xs text-gray-600 bg-gray-50 p-2 rounded"
> >
<div class="font-medium">ID: {{ account.id }}</div> <div class="font-medium">{{ contact.name || '<empty>' }}</div>
<div class="text-gray-500">{{ account.did }}</div> <div class="text-gray-500">{{ contact.did }}</div>
<div class="text-gray-400">Created: {{ account.dateCreated }}</div> <div class="text-gray-400">{{ contact.contactMethods?.length || 0 }} contact methods</div>
<div class="text-gray-400">Has Identity: {{ getAccountHasIdentity(account) ? 'Yes' : 'No' }}</div>
<div class="text-gray-400">Has Mnemonic: {{ getAccountHasMnemonic(account) ? 'Yes' : 'No' }}</div>
</div> </div>
</div> </div>
</div> </div>

Loading…
Cancel
Save