refactor: rename field value to be meaningful in field components

* order peer review invitations by date sent (most recent first)
* fix an issue with invalid dates in the e2e tests

django/library/models.py

@@ -2349,6 +2349,7 @@ def get_absolute_url(self):
 
     class Meta:
         unique_together = (("review", "reviewer"),)
+        ordering = ["-date_sent"]
 
 
 @register_snippet

e2e/cypress/fixtures/data.json

@@ -42,7 +42,7 @@
       "description": "Job Description",
       "summary": "Job Summary",
       "external-url": "https://www.comses.net/",
-      "application-deadline": "29"
+      "application-deadline": "21"
     }
   ]
 }

e2e/cypress/support/util.ts

@@ -5,3 +5,16 @@
 export function getDataCy(value: string): Cypress.Chainable {
   return cy.get(`[data-cy="${value}"]`);
 }
+
+/**
+ * Select the given day in the next month using the date picker
+ * @param {Cypress.Chainable} element - container element of the datepicker input
+ * @param {number} day - day to select
+ */
+export function selectNextMonthDate(element: Cypress.Chainable, day: number): Cypress.Chainable {
+  element.first().click();
+  return element.within(() => {
+    cy.get('[aria-label="Next month"]').click();
+    cy.contains(day).click();
+  });
+}

e2e/cypress/tests/event.spec.ts

@@ -1,5 +1,5 @@
 import { loginBeforeEach } from "../support/setup";
-import { getDataCy } from "../support/util";
+import { getDataCy, selectNextMonthDate } from "../support/util";
 import "cypress-file-upload";
 
 describe("Visit events page", () => {
@@ -31,18 +31,14 @@ describe("Visit events page", () => {
       cy.contains("Submit an event").click();
       getDataCy("event-title").type(event.title);
       getDataCy("event-location").type(event.location);
-      getDataCy("event-start-date").first().click();
-      getDataCy("event-start-date").contains(event["start-date"]).click();
-      getDataCy("event-end-date").first().click();
-      getDataCy("event-end-date").contains(event["end-date"]).click();
-      getDataCy("early-registration-deadline").first().click();
-      getDataCy("early-registration-deadline")
-        .contains(event["early-registration-deadline"])
-        .click();
-      getDataCy("registration-deadline").first().click();
-      getDataCy("registration-deadline").contains(event["registration-deadline"]).click();
-      getDataCy("submission-deadline").first().click();
-      getDataCy("submission-deadline").contains(event["submission-deadline"]).click();
+      selectNextMonthDate(getDataCy("event-start-date"), event["start-date"]);
+      selectNextMonthDate(getDataCy("event-end-date"), event["end-date"]);
+      selectNextMonthDate(
+        getDataCy("early-registration-deadline"),
+        event["early-registration-deadline"]
+      );
+      selectNextMonthDate(getDataCy("registration-deadline"), event["registration-deadline"]);
+      selectNextMonthDate(getDataCy("submission-deadline"), event["submission-deadline"]);
       getDataCy("description").type(event.description);
       getDataCy("summary").type(event.summary);
       getDataCy("external-url").type(event["external-url"]);

e2e/cypress/tests/job.spec.ts

@@ -1,5 +1,5 @@
 import { loginBeforeEach } from "../support/setup";
-import { getDataCy } from "../support/util";
+import { getDataCy, selectNextMonthDate } from "../support/util";
 import "cypress-file-upload";
 
 describe("Visit jobs page", () => {
@@ -21,8 +21,7 @@ describe("Visit jobs page", () => {
       getDataCy("job-description").type(job.description);
       getDataCy("job-summary").type(job.summary);
       getDataCy("external-url").type(job["external-url"]);
-      getDataCy("application-deadline").first().click();
-      getDataCy("application-deadline").contains(job["application-deadline"]).click();
+      selectNextMonthDate(getDataCy("application-deadline"), job["application-deadline"]);
       getDataCy("create-button").click();
       cy.wait(2000);
     });

frontend/src/components/form/CheckboxField.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="form-check">
       <input
-        v-model="value"
+        v-model="checked"
         type="checkbox"
         :id="id"
         v-bind="attrs"
@@ -38,5 +38,5 @@ const props = withDefaults(defineProps<CheckBoxFieldProps>(), {
   help: "",
 });
 
-const { id, value, attrs, error } = useField<boolean>(props, "name");
+const { id, value: checked, attrs, error } = useField<boolean>(props, "name");
 </script>

frontend/src/components/form/DatepickerField.vue

@@ -6,7 +6,7 @@
     <FormPlaceholder v-if="showPlaceholder" />
     <VueDatePicker
       v-else
-      v-model="value"
+      v-model="date"
       format="yyyy-MM-dd"
       :id="id"
       v-bind="attrs"
@@ -53,7 +53,7 @@ export interface DatepickerFieldProps {
 
 const props = defineProps<DatepickerFieldProps>();
 
-const { id, value, attrs, error } = useField<Date>(props, "name");
+const { id, value: date, attrs, error } = useField<Date>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 </script>

frontend/src/components/form/HoneypotField.vue

@@ -4,7 +4,7 @@
       <FieldLabel label="Content" :id-for="id" required aria-hidden="true" />
     </slot>
     <textarea
-      v-model="value"
+      v-model="text"
       :rows="10"
       :id="id"
       v-bind="attrs"
@@ -44,5 +44,5 @@ const props = withDefaults(defineProps<HoneypotFieldProps>(), {
   show: false,
 });
 
-const { id, value, attrs, error } = useField<string>(props, "name");
+const { id, value: text, attrs, error } = useField<string>(props, "name");
 </script>

frontend/src/components/form/MarkdownField.vue

@@ -6,7 +6,7 @@
     <FormPlaceholder v-if="showPlaceholder" :rows="rows" />
     <textarea
       v-else
-      v-model="value"
+      v-model="text"
       :rows="rows"
       :id="id"
       v-bind="attrs"
@@ -50,7 +50,7 @@ const props = withDefaults(defineProps<MarkdownFieldProps>(), {
   rows: 10,
 });
 
-const { id, value, attrs, error } = useField<string>(props, "name");
+const { id, value: text, attrs, error } = useField<string>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 </script>

frontend/src/components/form/MultiSelectField.vue

@@ -6,7 +6,7 @@
     <FormPlaceholder v-if="showPlaceholder" />
     <VueMultiSelect
       v-else
-      v-model="value"
+      v-model="selected"
       :id="id"
       v-bind="attrs"
       :multiple="multiple"
@@ -21,9 +21,9 @@
       :custom-label="customLabel"
       :class="{ 'is-invalid': error }"
     >
-      <template #clear v-if="multiple && value?.length">
+      <template #clear v-if="multiple && selected?.length">
         <div class="multiselect__clear">
-          <span @mousedown.prevent.stop="value = []">&times;</span>
+          <span @mousedown.prevent.stop="selected = []">&times;</span>
         </div>
       </template>
       <template #option="{ option }">
@@ -32,7 +32,7 @@
         </slot>
       </template>
       <template #caret>
-        <div :class="{ multiselect__select: true, 'd-none': value?.length }"></div>
+        <div :class="{ multiselect__select: true, 'd-none': selected?.length }"></div>
       </template>
     </VueMultiSelect>
     <slot name="help">
@@ -73,7 +73,7 @@ const props = withDefaults(defineProps<MultiSelectFieldProps>(), {
   labelWith: "label",
 });
 
-const { id, value, attrs, error } = useField<string | any[]>(props, "name");
+const { id, value: selected, attrs, error } = useField<string | any[]>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 </script>

frontend/src/components/form/ResearchOrgField.vue

@@ -6,7 +6,7 @@
     <FormPlaceholder v-if="showPlaceholder" />
     <VueMultiSelect
       v-else
-      v-model="value"
+      v-model="organization"
       :id="id"
       v-bind="attrs"
       :multiple="false"
@@ -25,13 +25,13 @@
       @select="handleSelect"
       :class="{ 'is-invalid': error }"
     >
-      <template #clear v-if="value">
+      <template #clear v-if="organization">
         <div class="multiselect__clear">
-          <span @mousedown.prevent.stop="value = null">&times;</span>
+          <span @mousedown.prevent.stop="organization = null">&times;</span>
         </div>
       </template>
       <template #caret="{ toggle }">
-        <div :class="{ 'multiselect__search-toggle': true, 'd-none': !!value }">
+        <div :class="{ 'multiselect__search-toggle': true, 'd-none': !!organization }">
           <i class="fas fa-search" @mousedown.prevent.stop="toggle" />
         </div>
       </template>
@@ -92,7 +92,7 @@ const props = withDefaults(defineProps<ResearchOrgFieldProps>(), {
 });
 const emit = defineEmits(["select"]);
 
-const { id, value, attrs, error } = useField<Organization | null>(props, "name");
+const { id, value: organization, attrs, error } = useField<Organization | null>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 
@@ -104,7 +104,7 @@ const { serverErrors, search } = useRORAPI();
 function handleSelect(event: Event) {
   emit("select", event);
   if (props.clearOnSelect) {
-    value.value = null;
+    organization.value = null;
   }
 }
 

frontend/src/components/form/ResearchOrgListField.vue

@@ -57,7 +57,7 @@
       @select="create"
       :disabled="disabled"
     />
-    <Sortable :list="value" :item-key="item => item" @end="sort($event)">
+    <Sortable :list="organizations" :item-key="item => item" @end="sort($event)">
       <template #item="{ element, index }">
         <div :key="element" class="my-1 input-group">
           <span class="primary-group-button">
@@ -125,15 +125,14 @@ export interface ResearchOrgListFieldProps {
 const props = defineProps<ResearchOrgListFieldProps>();
 const emit = defineEmits(["change"]);
 onMounted(() => {
-  // FIXME: see if we can change `value` to a more meaningful variable name, e.g., `organizations`
-  if (!value.value) {
+  if (!organizations.value) {
     // force initialize to empty array
-    value.value = [];
+    organizations.value = [];
   }
 
   // set givenName in the ContributorEditForm whenever value (selected organization) changes
   watch(
-    () => value,
+    () => organizations,
     () => {
       emit("change");
     },
@@ -184,35 +183,35 @@ function createCustom() {
 
 function create(organization: Organization) {
   // only one organization is allowed if Contributor is Organization
-  if (props.isContributorOrganization && value.value.length > 0) {
-    value.value = [];
-    value.value.push(organization);
+  if (props.isContributorOrganization && organizations.value.length > 0) {
+    organizations.value = [];
+    organizations.value.push(organization);
     return;
   }
 
-  if (!value.value.some(e => e.name === organization.name)) {
-    value.value.push(organization);
+  if (!organizations.value.some(e => e.name === organization.name)) {
+    organizations.value.push(organization);
   }
 }
 
 function remove(index: number) {
-  value.value.splice(index, 1);
+  organizations.value.splice(index, 1);
 }
 
 function sort(event: SortableEvent) {
   const { newIndex, oldIndex } = event;
   if (newIndex !== undefined && oldIndex !== undefined) {
-    const item = value.value.splice(oldIndex, 1)[0];
-    value.value.splice(newIndex, 0, item);
+    const item = organizations.value.splice(oldIndex, 1)[0];
+    organizations.value.splice(newIndex, 0, item);
   }
 }
 
 function sortToTop(index: number) {
-  const item = value.value.splice(index, 1)[0];
-  value.value.splice(0, 0, item);
+  const item = organizations.value.splice(index, 1)[0];
+  organizations.value.splice(0, 0, item);
 }
 
-const { id, value, error } = useField<Organization[]>(props, "name");
+const { id, value: organizations, error } = useField<Organization[]>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 </script>

frontend/src/components/form/SelectField.vue

@@ -12,12 +12,12 @@
       :class="{ 'form-select': true, 'is-invalid': error }"
       @change="updateValue"
     >
-      <option v-if="!value" disabled :value="null" selected>{{ placeholder ?? "" }}</option>
+      <option v-if="!selected" disabled :value="null" selected>{{ placeholder ?? "" }}</option>
       <option
         v-for="option in options"
         :key="option.value"
         :value="option.value"
-        :selected="option.value === value"
+        :selected="option.value === selected"
       >
         {{ option.label }}
       </option>
@@ -52,13 +52,13 @@ export interface SelectFieldProps {
 
 const props = defineProps<SelectFieldProps>();
 
-const { id, value, attrs, error } = useField<any>(props, "name");
+const { id, value: selected, attrs, error } = useField<any>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 
 function updateValue(event: Event) {
   const target = event.target as HTMLSelectElement;
-  value.value = target.value;
+  selected.value = target.value;
   attrs.value.onInput();
 }
 </script>

frontend/src/components/form/TaggerField.vue

@@ -6,7 +6,7 @@
     <FormPlaceholder v-if="showPlaceholder" />
     <VueMultiSelect
       v-else
-      v-model="value"
+      v-model="tags"
       :id="id"
       v-bind="attrs"
       :multiple="true"
@@ -27,13 +27,13 @@
       @select="attrs.onInput()"
       :class="{ 'is-invalid': error }"
     >
-      <template #clear v-if="value?.length">
+      <template #clear v-if="tags?.length">
         <div class="multiselect__clear">
-          <span @mousedown.prevent.stop="value = []">&times;</span>
+          <span @mousedown.prevent.stop="tags = []">&times;</span>
         </div>
       </template>
       <template #caret="{ toggle }">
-        <div :class="{ 'multiselect__search-toggle': true, 'd-none': value?.length }">
+        <div :class="{ 'multiselect__search-toggle': true, 'd-none': tags?.length }">
           <i class="fas fa-search" @mousedown.prevent.stop="toggle" />
         </div>
       </template>
@@ -74,7 +74,7 @@ const props = withDefaults(defineProps<TaggerFieldProps>(), {
   placeholder: "Type to add tags",
 });
 
-const { id, value, attrs, error } = useField<Tag[]>(props, "name");
+const { id, value: tags, attrs, error } = useField<Tag[]>(props, "name");
 
 const showPlaceholder = inject("showPlaceholder", false);
 
@@ -91,6 +91,6 @@ async function fetchMatchingTags(query: string) {
 }
 
 async function addTag(name: string) {
-  value.value.push({ name });
+  tags.value.push({ name });
 }
 </script>