@ -8,22 +8,24 @@
placeholder = "Description, prerequisites, terms, etc."
placeholder = "Description, prerequisites, terms, etc."
v - model = "description"
v - model = "description"
/ >
/ >
< div class = "flex flex-row mb-6 " >
< div class = "flex flex-row mt-2 " >
< span
< span
class = "rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
class = "rounded-l border border-r-0 border-slate-400 bg-slate-200 w-1/3 text-center text-blue-500 px-2 py-2"
@ click = "changeUnitCode()"
>
>
Hours
{ { libsUtil . UNIT_SHORT [ amountUnitCode ] } }
< / span >
< / span >
< div
< div
class = "border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
class = "border border-r-0 border-slate-400 bg-slate-200 px-4 py-2"
@ click = "decrement()"
@ click = "decrement()"
v - if = "amountInput !== '0'"
>
>
< fa icon = "chevron-left" / >
< fa icon = "chevron-left" / >
< / div >
< / div >
< input
< input
type = "text"
type = "text"
class = "w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
class = "w-full border border-r-0 border-slate-400 px-2 py-2 text-center"
v - model = "hours "
v - model = "amountInput "
/ >
/ >
< div
< div
class = "rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
class = "rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
@ -32,7 +34,7 @@
< fa icon = "chevron-right" / >
< fa icon = "chevron-right" / >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-row mb-6 " >
< div class = "flex flex-row mt-2 " >
< span
< span
class = "rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
class = "rounded-l border border-r-0 border-slate-400 bg-slate-200 text-center px-2 py-2"
>
>
@ -45,7 +47,9 @@
v - model = "expirationDateInput"
v - model = "expirationDateInput"
/ >
/ >
< / div >
< / div >
< p class = "text-center mb-2 italic" > Sign & Send to publish to the world < / p >
< p class = "text-center mt-6 mb-2 italic" >
Sign & Send to publish to the world
< / p >
< button
< button
class = "block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
class = "block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
@ click = "confirm"
@ click = "confirm"
@ -65,6 +69,7 @@
< script lang = "ts" >
< script lang = "ts" >
import { Vue , Component , Prop } from "vue-facing-decorator" ;
import { Vue , Component , Prop } from "vue-facing-decorator" ;
import { createAndSubmitOffer } from "@/libs/endorserServer" ;
import { createAndSubmitOffer } from "@/libs/endorserServer" ;
import * as libsUtil from "@/libs/util" ;
import { accountsDB , db } from "@/db/index" ;
import { accountsDB , db } from "@/db/index" ;
import { MASTER_SETTINGS_KEY , Settings } from "@/db/tables/settings" ;
import { MASTER_SETTINGS_KEY , Settings } from "@/db/tables/settings" ;
import { Account } from "@/db/tables/accounts" ;
import { Account } from "@/db/tables/accounts" ;
@ -86,11 +91,14 @@ export default class OfferDialog extends Vue {
activeDid = "" ;
activeDid = "" ;
apiServer = "" ;
apiServer = "" ;
amountInput = "0" ;
amountUnitCode = "HUR" ;
description = "" ;
description = "" ;
expirationDateInput = "" ;
expirationDateInput = "" ;
hours = "0" ;
visible = false ;
visible = false ;
libsUtil = libsUtil ;
async created ( ) {
async created ( ) {
try {
try {
await db . open ( ) ;
await db . open ( ) ;
@ -117,21 +125,36 @@ export default class OfferDialog extends Vue {
}
}
close ( ) {
close ( ) {
/ / c l o s e t h e d i a l o g b u t d o n ' t c h a n g e v a l u e s ( s i n c e i t m i g h t b e s u b m i t t i n g i n f o )
this . visible = false ;
this . visible = false ;
}
}
changeUnitCode ( ) {
const units = Object . keys ( this . libsUtil . UNIT_SHORT ) ;
const index = units . indexOf ( this . amountUnitCode ) ;
this . amountUnitCode = units [ ( index + 1 ) % units . length ] ;
}
increment ( ) {
increment ( ) {
this . hours = ` ${ ( parseFloat ( this . hours ) || 0 ) + 1 } ` ;
this . amountInput = ` ${ ( parseFloat ( this . amountInput ) || 0 ) + 1 } ` ;
}
}
decrement ( ) {
decrement ( ) {
this . hours = ` ${ Math . max ( 0 , ( parseFloat ( this . hours ) || 1 ) - 1 ) } ` ;
this . amountInput = ` ${ Math . max (
0 ,
( parseFloat ( this . amountInput ) || 1 ) - 1 ,
) } ` ;
}
}
cancel ( ) {
cancel ( ) {
this . close ( ) ;
this . close ( ) ;
this . eraseValues ( ) ;
}
eraseValues ( ) {
this . description = "" ;
this . description = "" ;
this . hours = "0" ;
this . amountInput = "0" ;
this . amountUnitCode = "HUR" ;
}
}
async confirm ( ) {
async confirm ( ) {
@ -148,11 +171,12 @@ export default class OfferDialog extends Vue {
/ / t h i s i s a s y n c h r o n o u s , b u t w e d o n ' t n e e d t o w a i t f o r i t t o c o m p l e t e
/ / t h i s i s a s y n c h r o n o u s , b u t w e d o n ' t n e e d t o w a i t f o r i t t o c o m p l e t e
this . recordOffer (
this . recordOffer (
this . description ,
this . description ,
parseFloat ( this . hours ) ,
parseFloat ( this . amountInput ) ,
this . amountUnitCode ,
this . expirationDateInput ,
this . expirationDateInput ,
) . then ( ( ) => {
) . then ( ( ) => {
this . description = "" ;
this . description = "" ;
this . hours = "0" ;
this . amountInput = "0" ;
} ) ;
} ) ;
}
}
@ -176,10 +200,12 @@ export default class OfferDialog extends Vue {
*
*
* @ param description may be an empty string
* @ param description may be an empty string
* @ param hours may be 0
* @ param hours may be 0
* @ param unitCode may be omitted , defaults to "HUR"
* /
* /
public async recordOffer (
public async recordOffer (
description ? : string ,
description : string ,
hours ? : number ,
amount : number ,
unitCode : string = "HUR" ,
expirationDateInput ? : string ,
expirationDateInput ? : string ,
) {
) {
if ( ! this . activeDid ) {
if ( ! this . activeDid ) {
@ -195,13 +221,13 @@ export default class OfferDialog extends Vue {
return ;
return ;
}
}
if ( ! description && ! hours ) {
if ( ! description && ! amount ) {
this . $notify (
this . $notify (
{
{
group : "alert" ,
group : "alert" ,
type : "danger" ,
type : "danger" ,
title : "Error" ,
title : "Error" ,
text : "You must enter a description or some number of hours." ,
text : ` You must enter a description or some number of ${ this . libsUtil . UNIT_LONG [ unitCode ] } . ` ,
} ,
} ,
- 1 ,
- 1 ,
) ;
) ;
@ -215,7 +241,8 @@ export default class OfferDialog extends Vue {
this . apiServer ,
this . apiServer ,
identity ,
identity ,
description ,
description ,
hours ,
amount ,
unitCode ,
expirationDateInput ,
expirationDateInput ,
this . projectId ,
this . projectId ,
) ;
) ;