3b4f4dc125
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.
120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div v-if="visible" class="dialog-overlay">
|
|
<div class="dialog">
|
|
<h1 class="text-xl font-bold text-center mb-4">Invitation & Notes</h1>
|
|
|
|
These are optional notes for your use; they are comments to help you
|
|
recall who it is when they accept it. These notes are sent to the server.
|
|
If you want to store your own way, the invitation ID is:
|
|
{{ inviteIdentifier }}
|
|
<input
|
|
v-model="text"
|
|
type="text"
|
|
placeholder="Notes"
|
|
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
|
|
/>
|
|
|
|
<!-- Add date selection element -->
|
|
Expiration
|
|
<input
|
|
v-model="expiresAt"
|
|
type="date"
|
|
class="block rounded border border-slate-400 mb-4 px-3 py-2"
|
|
/>
|
|
|
|
<div class="mt-8">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-lg font-bold uppercase 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-3 rounded-md mb-2"
|
|
@click="onClickSaveChanges()"
|
|
>
|
|
Save
|
|
</button>
|
|
<!-- SHOW ME instead while processing saving changes -->
|
|
<button
|
|
type="button"
|
|
class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2"
|
|
@click="onClickCancel()"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component } from "vue-facing-decorator";
|
|
|
|
import { NotificationIface } from "../constants/app";
|
|
|
|
@Component
|
|
export default class InviteDialog extends Vue {
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
|
|
|
callback: (text: string, expiresAt: string) => void = () => {};
|
|
inviteIdentifier = "";
|
|
text = "";
|
|
visible = false;
|
|
expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 7)
|
|
.toISOString()
|
|
.substring(0, 10);
|
|
|
|
async open(
|
|
inviteIdentifier: string,
|
|
aCallback: (text: string, expiresAt: string) => void,
|
|
) {
|
|
this.callback = aCallback;
|
|
this.inviteIdentifier = inviteIdentifier;
|
|
this.visible = true;
|
|
}
|
|
|
|
async onClickSaveChanges() {
|
|
if (!this.expiresAt) {
|
|
this.$notify(
|
|
{
|
|
group: "alert",
|
|
type: "warning",
|
|
title: "Needs Expiration",
|
|
text: "You must select an expiration date.",
|
|
},
|
|
5000,
|
|
);
|
|
} else {
|
|
this.callback(this.text, this.expiresAt);
|
|
this.visible = false;
|
|
}
|
|
}
|
|
|
|
onClickCancel() {
|
|
this.visible = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.dialog-overlay {
|
|
z-index: 50;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.dialog {
|
|
background-color: white;
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
</style>
|