Browse Source

prevent double-submitting forms.

main
Gisle Aune 4 years ago
parent
commit
bd60ab4c98
  1. 5
      svelte-ui/src/components/Modal.svelte
  2. 11
      svelte-ui/src/forms/GoalForm.svelte
  3. 11
      svelte-ui/src/forms/GroupForm.svelte
  4. 7
      svelte-ui/src/forms/ItemAddForm.svelte
  5. 7
      svelte-ui/src/forms/ItemDeleteForm.svelte
  6. 7
      svelte-ui/src/forms/ItemEditForm.svelte
  7. 7
      svelte-ui/src/forms/LogAddForm.svelte
  8. 7
      svelte-ui/src/forms/LogDeleteForm.svelte
  9. 7
      svelte-ui/src/forms/LogEditForm.svelte
  10. 7
      svelte-ui/src/forms/ProjectAddForm.svelte
  11. 7
      svelte-ui/src/forms/ProjectDeleteForm.svelte
  12. 7
      svelte-ui/src/forms/ProjectEditForm.svelte
  13. 7
      svelte-ui/src/forms/TaskAddForm.svelte
  14. 7
      svelte-ui/src/forms/TaskDeleteForm.svelte
  15. 7
      svelte-ui/src/forms/TaskEditForm.svelte

5
svelte-ui/src/components/Modal.svelte

@ -142,6 +142,11 @@ div.modal :global(button:hover), div.modal :global(button:focus) {
background: #222; background: #222;
color: #FFF; color: #FFF;
} }
div.modal :global(button:disabled) {
background: #444;
color: #AAA;
}
div.modal :global(label) { div.modal :global(label) {
padding: 0 0 0.125em 0.25ch; padding: 0 0 0.125em 0.25ch;

11
svelte-ui/src/forms/GoalForm.svelte

@ -46,8 +46,11 @@ import GroupSelect from "../components/GroupSelect.svelte";
let endTime = formatFormTime(goal.endTime); let endTime = formatFormTime(goal.endTime);
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
if (creation) { if (creation) {
stuffLogClient.createGoal({ stuffLogClient.createGoal({
startTime: new Date(startTime), startTime: new Date(startTime),
@ -59,6 +62,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} else if (deletion) { } else if (deletion) {
stuffLogClient.deleteGoal(goal.id).then(() => { stuffLogClient.deleteGoal(goal.id).then(() => {
@ -67,6 +72,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} else { } else {
stuffLogClient.updateGoal(goal.id, { stuffLogClient.updateGoal(goal.id, {
@ -79,6 +86,8 @@ import GroupSelect from "../components/GroupSelect.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} }
@ -107,6 +116,6 @@ import GroupSelect from "../components/GroupSelect.svelte";
<hr /> <hr />
<button type="submit">{verb} Goal</button>
<button disabled={loading} type="submit">{verb} Goal</button>
</form> </form>
</Modal> </Modal>

11
svelte-ui/src/forms/GroupForm.svelte

@ -33,8 +33,11 @@ import projectStore, { fpProjectStore } from "../stores/project";
let description = group.description; let description = group.description;
let icon = group.icon as IconName; let icon = group.icon as IconName;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
if (creation) { if (creation) {
stuffLogClient.createGroup({ stuffLogClient.createGroup({
name, description, icon, name, description, icon,
@ -43,6 +46,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} else if (deletion) { } else if (deletion) {
stuffLogClient.deleteGroup(group.id).then(() => { stuffLogClient.deleteGroup(group.id).then(() => {
@ -50,6 +55,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} else { } else {
stuffLogClient.updateGroup(group.id, { stuffLogClient.updateGroup(group.id, {
@ -63,6 +70,8 @@ import projectStore, { fpProjectStore } from "../stores/project";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
} }
@ -85,6 +94,6 @@ import projectStore, { fpProjectStore } from "../stores/project";
<hr /> <hr />
<button type="submit">{verb} Group</button>
<button disabled={loading} type="submit">{verb} Group</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ItemAddForm.svelte

@ -15,8 +15,11 @@
let description = ""; let description = "";
let groupWeight = 1; let groupWeight = 1;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.createItem({ stuffLogClient.createItem({
groupId: group.id, groupId: group.id,
@ -26,6 +29,8 @@
goalStore.markStale(); goalStore.markStale();
fpGoalStore.markStale(); fpGoalStore.markStale();
modalStore.close(); modalStore.close();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -49,6 +54,6 @@
<hr /> <hr />
<button type="submit">Add Item</button>
<button disabled={loading} type="submit">Add Item</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ItemDeleteForm.svelte

@ -15,13 +15,18 @@
let description = item.description; let description = item.description;
let groupWeight = item.groupWeight; let groupWeight = item.groupWeight;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.deleteItem(item.id).then(() => { stuffLogClient.deleteItem(item.id).then(() => {
groupStore.markStale(); groupStore.markStale();
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -45,6 +50,6 @@
<hr /> <hr />
<button type="submit">Delete Item</button>
<button disabled={loading} type="submit">Delete Item</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ItemEditForm.svelte

@ -17,8 +17,11 @@
let description = item.description; let description = item.description;
let groupWeight = item.groupWeight; let groupWeight = item.groupWeight;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.updateItem(item.id, { stuffLogClient.updateItem(item.id, {
name, description, groupWeight, name, description, groupWeight,
}).then(() => { }).then(() => {
@ -28,6 +31,8 @@
projectStore.markStale(); projectStore.markStale();
fpProjectStore.markStale(); fpProjectStore.markStale();
modalStore.close(); modalStore.close();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -51,6 +56,6 @@
<hr /> <hr />
<button type="submit">Edit Item</button>
<button disabled={loading} type="submit">Edit Item</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/LogAddForm.svelte

@ -18,8 +18,11 @@ import logStore from "../stores/logs";
let description = ""; let description = "";
let markInactive = task.completedAmount >= (task.itemAmount - 1); let markInactive = task.completedAmount >= (task.itemAmount - 1);
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.createLog({ stuffLogClient.createLog({
taskId: task.id, taskId: task.id,
loggedTime: new Date(loggedTime).toISOString(), loggedTime: new Date(loggedTime).toISOString(),
@ -36,6 +39,8 @@ import logStore from "../stores/logs";
goalStore.markStale(); goalStore.markStale();
fpGoalStore.markStale(); fpGoalStore.markStale();
logStore.markStale(); logStore.markStale();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -59,6 +64,6 @@ import logStore from "../stores/logs";
<hr /> <hr />
<button type="submit">Add Log</button>
<button disabled={loading} type="submit">Add Log</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/LogDeleteForm.svelte

@ -15,6 +15,7 @@
let loggedTime = formatFormTime(new Date(md.log.loggedTime)); let loggedTime = formatFormTime(new Date(md.log.loggedTime));
let description = md.log.description; let description = md.log.description;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
const md = $modalStore; const md = $modalStore;
@ -22,6 +23,8 @@
throw new Error("Wrong form"); throw new Error("Wrong form");
} }
loading = true;
stuffLogClient.deleteLog(md.log.id).then(() => { stuffLogClient.deleteLog(md.log.id).then(() => {
projectStore.markStale(); projectStore.markStale();
fpProjectStore.markStale(); fpProjectStore.markStale();
@ -30,6 +33,8 @@
logStore.markStale(); logStore.markStale();
modalStore.close(); modalStore.close();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -51,6 +56,6 @@
<hr /> <hr />
<button type="submit">Delete Log</button>
<button disabled={loading} type="submit">Delete Log</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/LogEditForm.svelte

@ -15,6 +15,7 @@
let loggedTime = formatFormTime(new Date(md.log.loggedTime)); let loggedTime = formatFormTime(new Date(md.log.loggedTime));
let description = md.log.description; let description = md.log.description;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
const md = $modalStore; const md = $modalStore;
@ -22,6 +23,8 @@
throw new Error("Wrong form"); throw new Error("Wrong form");
} }
loading = true;
stuffLogClient.updateLog(md.log.id, { stuffLogClient.updateLog(md.log.id, {
loggedTime: new Date(loggedTime).toISOString(), loggedTime: new Date(loggedTime).toISOString(),
description, description,
@ -33,6 +36,8 @@
logStore.markStale(); logStore.markStale();
modalStore.close(); modalStore.close();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -54,6 +59,6 @@
<hr /> <hr />
<button type="submit">Edit Log</button>
<button disabled={loading} type="submit">Edit Log</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ProjectAddForm.svelte

@ -11,8 +11,11 @@
let description = ""; let description = "";
let icon = iconNames[0]; let icon = iconNames[0];
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.createProject({ stuffLogClient.createProject({
active: true, active: true,
endTime: ( endTime == "" ) ? null : new Date(endTime), endTime: ( endTime == "" ) ? null : new Date(endTime),
@ -26,6 +29,8 @@
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -49,6 +54,6 @@
<hr /> <hr />
<button type="submit">Add Project</button>
<button disabled={loading} type="submit">Add Project</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ProjectDeleteForm.svelte

@ -18,8 +18,11 @@
let description = project.description; let description = project.description;
let icon = project.icon as IconName; let icon = project.icon as IconName;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.deleteProject(project.id).then(() => { stuffLogClient.deleteProject(project.id).then(() => {
projectStore.markStale(); projectStore.markStale();
if (endTime !== "") { if (endTime !== "") {
@ -28,6 +31,8 @@
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -51,6 +56,6 @@
<hr /> <hr />
<button type="submit">Delete Project</button>
<button disabled={loading} type="submit">Delete Project</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/ProjectEditForm.svelte

@ -20,8 +20,11 @@ import Checkbox from "../components/Checkbox.svelte";
let description = project.description; let description = project.description;
let icon = project.icon as IconName; let icon = project.icon as IconName;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.updateProject(project.id, { stuffLogClient.updateProject(project.id, {
endTime: ( endTime == "" ) ? null : new Date(endTime), endTime: ( endTime == "" ) ? null : new Date(endTime),
clearEndTime: ( endTime == "" ), clearEndTime: ( endTime == "" ),
@ -33,6 +36,8 @@ import Checkbox from "../components/Checkbox.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -57,6 +62,6 @@ import Checkbox from "../components/Checkbox.svelte";
<hr /> <hr />
<button type="submit">Edit Project</button>
<button disabled={loading} type="submit">Edit Project</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/TaskAddForm.svelte

@ -13,8 +13,11 @@
let description = ""; let description = "";
let itemAmount = 1; let itemAmount = 1;
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.createTask({ stuffLogClient.createTask({
projectId: project.id, projectId: project.id,
itemId: itemId, itemId: itemId,
@ -28,6 +31,8 @@
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -69,6 +74,6 @@
<hr /> <hr />
<button type="submit">Add Task</button>
<button disabled={loading} type="submit">Add Task</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/TaskDeleteForm.svelte

@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
let completed = !task.active; let completed = !task.active;
let endTime = task.endTime ? formatFormTime(task.endTime) : ""; let endTime = task.endTime ? formatFormTime(task.endTime) : "";
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.deleteTask(task.id).then(() => { stuffLogClient.deleteTask(task.id).then(() => {
projectStore.markStale(); projectStore.markStale();
fpProjectStore.markStale(); fpProjectStore.markStale();
@ -29,6 +32,8 @@ import Checkbox from "../components/Checkbox.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -55,6 +60,6 @@ import Checkbox from "../components/Checkbox.svelte";
<hr /> <hr />
<button type="submit">Delete Task</button>
<button disabled={loading} type="submit">Delete Task</button>
</form> </form>
</Modal> </Modal>

7
svelte-ui/src/forms/TaskEditForm.svelte

@ -19,8 +19,11 @@ import Checkbox from "../components/Checkbox.svelte";
let completed = !task.active; let completed = !task.active;
let endTime = task.endTime ? formatFormTime(task.endTime) : ""; let endTime = task.endTime ? formatFormTime(task.endTime) : "";
let error = null; let error = null;
let loading = false;
function onSubmit() { function onSubmit() {
loading = true;
stuffLogClient.updateTask(task.id, { stuffLogClient.updateTask(task.id, {
endTime: (endTime == "") ? null : new Date(endTime), endTime: (endTime == "") ? null : new Date(endTime),
clearEndTime: endTime == "", clearEndTime: endTime == "",
@ -35,6 +38,8 @@ import Checkbox from "../components/Checkbox.svelte";
modalStore.close(); modalStore.close();
}).catch(err => { }).catch(err => {
error = err.message ? err.message : err.toString(); error = err.message ? err.message : err.toString();
}).finally(() => {
loading = false;
}) })
error = null; error = null;
@ -61,6 +66,6 @@ import Checkbox from "../components/Checkbox.svelte";
<hr /> <hr />
<button type="submit">Add Task</button>
<button disabled={loading} type="submit">Add Task</button>
</form> </form>
</Modal> </Modal>
Loading…
Cancel
Save