Browse Source

Added Save progress and a text counter on textbox

kb/add-usage-guide
Matthew Aaron Raymer 2 years ago
parent
commit
a2d1569d93
  1. 17
      src/views/NewEditProjectView.vue

17
src/views/NewEditProjectView.vue

@ -33,17 +33,26 @@
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
rows="5" rows="5"
v-model="description" v-model="description"
maxlength="500"
></textarea> ></textarea>
<div class="text-xs text-slate-500 italic -mt-3 mb-4"> <div class="text-xs text-slate-500 italic -mt-3 mb-4">
88/500 max. characters {{ description.length }}/500 max. characters
</div> </div>
<div class="mt-8"> <div class="mt-8">
<button <button
:disabled="isHiddenSave"
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="onSaveProjectClick()" @click="onSaveProjectClick()"
> >
Save Project <!-- SHOW if in idle state -->
<span :class="{ hidden: isHiddenSave }">Save Project</span>
<!-- SHOW if in saving state; DISABLE button while in saving state -->
<span :class="{ hidden: isHiddenSpinner }"
><i class="fa-solid fa-spinner fa-spin-pulse"></i>
Saving&hellip;</span
>
</button> </button>
<button <button
type="button" type="button"
@ -96,6 +105,8 @@ export default class NewEditProjectView extends Vue {
alertMessage = ""; alertMessage = "";
projectId = localStorage.getItem("projectId") || ""; projectId = localStorage.getItem("projectId") || "";
isHiddenSave = false;
isHiddenSpinner = true;
async created() { async created() {
if (this.projectId === "") { if (this.projectId === "") {
@ -222,6 +233,8 @@ export default class NewEditProjectView extends Vue {
} }
public async onSaveProjectClick() { public async onSaveProjectClick() {
this.isHiddenSave = true;
this.isHiddenSpinner = false;
await db.open(); await db.open();
const num_accounts = await db.accounts.count(); const num_accounts = await db.accounts.count();
if (num_accounts === 0) { if (num_accounts === 0) {

Loading…
Cancel
Save