forked from jsnbuchanan/crowd-funder-for-time-pwa
style: reorder v-model and v-bind directives
Changes: - Move v-model directives before other attributes - Move v-bind directives before event handlers - Reorder attributes for better readability - Fix template attribute ordering across components - Improve eslint rules - add default vite config for testing (handles nostr error too) This follows Vue.js style guide recommendations for attribute ordering and improves template consistency.
This commit is contained in:
@@ -23,7 +23,7 @@
|
||||
|
||||
<!-- New Contact -->
|
||||
<div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
|
||||
<span class="flex" v-if="isRegistered">
|
||||
<span v-if="isRegistered" class="flex">
|
||||
<router-link
|
||||
:to="{ name: 'invite-one' }"
|
||||
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
||||
@@ -32,8 +32,8 @@
|
||||
</router-link>
|
||||
|
||||
<button
|
||||
@click="showOnboardMeetingDialog()"
|
||||
class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
|
||||
@click="showOnboardMeetingDialog()"
|
||||
>
|
||||
<font-awesome icon="chair" class="fa-fw text-2xl" />
|
||||
</button>
|
||||
@@ -77,10 +77,10 @@
|
||||
</router-link>
|
||||
|
||||
<textarea
|
||||
v-model="contactInput"
|
||||
type="text"
|
||||
placeholder="New URL or DID, Name, Public Key, Next Public Key Hash"
|
||||
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
|
||||
v-model="contactInput"
|
||||
/>
|
||||
<button
|
||||
class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
|
||||
@@ -90,21 +90,22 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between" v-if="contacts.length > 0">
|
||||
<div v-if="contacts.length > 0" class="flex justify-between">
|
||||
<div class="w-full text-left">
|
||||
<div v-if="!showGiveNumbers">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="contactsSelected.length === contacts.length"
|
||||
class="align-middle ml-2 h-6 w-6"
|
||||
data-testId="contactCheckAllTop"
|
||||
@click="
|
||||
contactsSelected.length === contacts.length
|
||||
? (contactsSelected = [])
|
||||
: (contactsSelected = contacts.map((contact) => contact.did))
|
||||
"
|
||||
class="align-middle ml-2 h-6 w-6"
|
||||
data-testId="contactCheckAllTop"
|
||||
/>
|
||||
<button
|
||||
v-if="!showGiveNumbers"
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
|
||||
:style="
|
||||
@@ -112,9 +113,8 @@
|
||||
? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
|
||||
: 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
|
||||
"
|
||||
@click="copySelectedContacts()"
|
||||
v-if="!showGiveNumbers"
|
||||
data-testId="copySelectedContactsButtonTop"
|
||||
@click="copySelectedContacts()"
|
||||
>
|
||||
Copy Selections
|
||||
</button>
|
||||
@@ -139,7 +139,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-1" v-if="showGiveNumbers">
|
||||
<div v-if="showGiveNumbers" class="flex justify-between mt-1">
|
||||
<div class="w-full text-right">
|
||||
In the following, only the most recent hours are included. To see more,
|
||||
click
|
||||
@@ -152,7 +152,7 @@
|
||||
<button
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
|
||||
v-bind:class="showGiveAmountsClassNames()"
|
||||
:class="showGiveAmountsClassNames()"
|
||||
@click="toggleShowGiveTotals()"
|
||||
>
|
||||
{{
|
||||
@@ -169,29 +169,31 @@
|
||||
|
||||
<!-- Results List -->
|
||||
<ul
|
||||
id="listContacts"
|
||||
v-if="contacts.length > 0"
|
||||
id="listContacts"
|
||||
class="border-t border-slate-300 mt-1"
|
||||
>
|
||||
<li
|
||||
class="border-b border-slate-300 pt-1 pb-1"
|
||||
v-for="contact in filteredContacts()"
|
||||
:key="contact.did"
|
||||
class="border-b border-slate-300 pt-1 pb-1"
|
||||
data-testId="contactListItem"
|
||||
>
|
||||
<div class="grow overflow-hidden">
|
||||
<div class="flex items-center">
|
||||
<EntityIcon
|
||||
:contact="contact"
|
||||
:iconSize="24"
|
||||
:icon-size="24"
|
||||
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer"
|
||||
@click="showLargeIdenticon = contact"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="checkbox"
|
||||
v-if="!showGiveNumbers"
|
||||
type="checkbox"
|
||||
:checked="contactsSelected.includes(contact.did)"
|
||||
class="ml-2 h-6 w-6 flex-shrink-0"
|
||||
data-testId="contactCheckOne"
|
||||
@click="
|
||||
contactsSelected.includes(contact.did)
|
||||
? contactsSelected.splice(
|
||||
@@ -200,8 +202,6 @@
|
||||
)
|
||||
: contactsSelected.push(contact.did)
|
||||
"
|
||||
class="ml-2 h-6 w-6 flex-shrink-0"
|
||||
data-testId="contactCheckOne"
|
||||
/>
|
||||
|
||||
<h2
|
||||
@@ -240,17 +240,17 @@
|
||||
>
|
||||
<button
|
||||
class="text-sm 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-2 py-1.5 rounded-l-md"
|
||||
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
||||
:title="givenToMeDescriptions[contact.did] || ''"
|
||||
@click="confirmShowGiftedDialog(contact.did, activeDid)"
|
||||
>
|
||||
From:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
showGiveTotals
|
||||
? ((givenToMeConfirmed[contact.did] || 0)
|
||||
+ (givenToMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
: showGiveConfirmed
|
||||
? (givenToMeConfirmed[contact.did] || 0)
|
||||
: (givenToMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
@@ -259,17 +259,17 @@
|
||||
|
||||
<button
|
||||
class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
|
||||
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
||||
:title="givenByMeDescriptions[contact.did] || ''"
|
||||
@click="confirmShowGiftedDialog(activeDid, contact.did)"
|
||||
>
|
||||
To:
|
||||
<br />
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
showGiveTotals
|
||||
? ((givenByMeConfirmed[contact.did] || 0)
|
||||
+ (givenByMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
: showGiveConfirmed
|
||||
? (givenByMeConfirmed[contact.did] || 0)
|
||||
: (givenByMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
@@ -278,8 +278,8 @@
|
||||
|
||||
<button
|
||||
class="text-sm 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-2 py-1.5 rounded-md border border-blue-400"
|
||||
@click="openOfferDialog(contact.did, contact.name)"
|
||||
data-testId="offerButton"
|
||||
@click="openOfferDialog(contact.did, contact.name)"
|
||||
>
|
||||
Offer
|
||||
</button>
|
||||
@@ -301,20 +301,21 @@
|
||||
</ul>
|
||||
<p v-else>There are no contacts.</p>
|
||||
|
||||
<div class="mt-2 w-full text-left" v-if="contacts.length > 0">
|
||||
<div v-if="contacts.length > 0" class="mt-2 w-full text-left">
|
||||
<input
|
||||
type="checkbox"
|
||||
v-if="!showGiveNumbers"
|
||||
type="checkbox"
|
||||
:checked="contactsSelected.length === contacts.length"
|
||||
class="align-middle ml-2 h-6 w-6"
|
||||
data-testId="contactCheckAllBottom"
|
||||
@click="
|
||||
contactsSelected.length === contacts.length
|
||||
? (contactsSelected = [])
|
||||
: (contactsSelected = contacts.map((contact) => contact.did))
|
||||
"
|
||||
class="align-middle ml-2 h-6 w-6"
|
||||
data-testId="contactCheckAllBottom"
|
||||
/>
|
||||
<button
|
||||
v-if="!showGiveNumbers"
|
||||
href=""
|
||||
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
|
||||
:style="
|
||||
@@ -323,7 +324,6 @@
|
||||
: 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
|
||||
"
|
||||
@click="copySelectedContacts()"
|
||||
v-if="!showGiveNumbers"
|
||||
>
|
||||
Copy Selections
|
||||
</button>
|
||||
@@ -339,7 +339,7 @@
|
||||
>
|
||||
<EntityIcon
|
||||
:contact="showLargeIdenticon"
|
||||
:iconSize="512"
|
||||
:icon-size="512"
|
||||
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
||||
@click="showLargeIdenticon = undefined"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user