kentbull
/
crowd-funder-for-time-pwa
forked from trent_larson/crowd-funder-for-time-pwa
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

Trent Larson 5 months ago
parent
e759e4785b
commit
8eff407a9c
1 changed files with 82 additions and 79 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 161
      src/views/DatabaseMigration.vue

161
src/views/DatabaseMigration.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save