add end time to projects

src/views/NewEditProjectView.vue

@@ -93,6 +93,9 @@
     />
 
     <div class="flex mb-4 columns-3 w-full">
+      <div class="col-span-1 w-full flex justify-center items-center">
+        <span>Starts At</span>
+      </div>
       <input
         v-model="startDateInput"
         placeholder="Start Date"
@@ -106,7 +109,31 @@
         type="time"
         class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
       />
-      <span class="col-span-1 w-full flex justify-center">{{ zoneName }}</span>
+      <span class="col-span-1 w-full flex justify-center items-center">
+        {{ zoneName }}
+      </span>
+    </div>
+
+    <div class="flex mb-4 columns-3 w-full">
+      <div class="col-span-1 w-full flex justify-center items-center">
+        <span>Ends at</span>
+      </div>
+      <input
+        v-model="endDateInput"
+        placeholder="End Date"
+        type="date"
+        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
+      />
+      <input
+        :disabled="!endDateInput"
+        placeholder="End Time"
+        v-model="endTimeInput"
+        type="time"
+        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
+      />
+      <span class="col-span-1 w-full flex justify-center items-center">
+        {{ zoneName }}
+      </span>
     </div>
 
     <div
@@ -251,6 +278,8 @@ export default class NewEditProjectView extends Vue {
   activeDid = "";
   agentDid = "";
   apiServer = "";
+  endDateInput?: string;
+  endTimeInput?: string;
   errorMessage = "";
   fullClaim: PlanVerifiableCredential = {
     "@context": "https://schema.org",
@@ -325,6 +354,13 @@ export default class NewEditProjectView extends Vue {
           this.startDateInput = localDateTime.toFormat("yyyy-MM-dd");
           this.startTimeInput = localDateTime.toFormat("HH:mm");
         }
+        if (this.fullClaim.endTime) {
+          const localDateTime = DateTime.fromISO(
+            this.fullClaim.endTime as string,
+          ).toLocal();
+          this.endDateInput = localDateTime.toFormat("yyyy-MM-dd");
+          this.endTimeInput = localDateTime.toFormat("HH:mm");
+        }
       }
     } catch (error) {
       console.error("Got error retrieving that project", error);
@@ -460,7 +496,7 @@ export default class NewEditProjectView extends Vue {
             group: "alert",
             type: "danger",
             title: "Date Error",
-            text: "The date was invalid so it was not set.",
+            text: "The start date was invalid so it was not set.",
           },
           5000,
         );
@@ -468,6 +504,28 @@ export default class NewEditProjectView extends Vue {
     } else {
       delete vcClaim.startTime;
     }
+    if (this.endDateInput) {
+      try {
+        const endTimeFull = this.endTimeInput || "23:59:59";
+        const fullTimeString = this.endDateInput + " " + endTimeFull;
+        // throw an error on an invalid date or time string
+        vcClaim.endTime = new Date(fullTimeString).toISOString(); // ensure timezone is part of it
+      } catch {
+        // it's not a valid date so erase it and tell the user
+        delete vcClaim.endTime;
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Date Error",
+            text: "The end date was invalid so it was not set.",
+          },
+          5000,
+        );
+      }
+    } else {
+      delete vcClaim.endTime;
+    }
     const vcJwt = await createEndorserJwtVcFromClaim(this.activeDid, vcClaim);
 
     // Make the xhr request payload