adding tag input field

gosqasorg · Jun 21, 2024 · 5441a50 · 5441a50
1 parent 6e23afb
commit 5441a50
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/packages/frontend/components/Forms/CreateContainer.vue b/packages/frontend/components/Forms/CreateContainer.vue
@@ -7,6 +7,12 @@
             <label class="text-iris form-label mt-3" for="file">Container Image (optional):</label>
             <input type="file" class="form-control" accept="image/*" @change="onFileChange" capture="environment" multiple />
 
+            <label class="mt-3 text-iris">Add Tags (optional):</label>
+            <ProvenanceTagInput class="form-control mt-1" placeholder="Device Tag" v-model="tags" @updateTags="handleUpdateTags"/>
+            <div>
+                <span v-for="(tag, index) in tags" :key="tag"> {{ tag }}{{ index !== tags.length - 1 ? ', ' : '' }}</span> 
+            </div>
+
             <br>
             <span class="text-iris mt-4">
             Create Reporting Key:
@@ -18,13 +24,6 @@
 
 
             <br>
-            <!-- <span class="text-iris mt-4">
-            Customize Contained Device Names?
-            <div class="text-black p-1" style="display:inline"> 
-                <input type="radio" id="customize-yes" name="customize"  @change="displayFields"/>Yes
-                <input class="ms-1" type="radio" id="customize-no" name="customize"   @change="displayFields" checked/>No
-            </div>
-            </span> -->
 
             <span class="text-iris mt-4">
             Customize Contained Device Names?
@@ -54,13 +53,18 @@ export default {
         return {
             name: '',
             description: '',
+            tags: [] as string[],
             childrenKeys: 0,
             createReportingKey: false,
             hasParent: false, // states whether this device is contained within a box/container
             pictures: [] as File[] | null,
         }
     },
     methods: {
+        handleUpdateTags(tags: string[]) {
+            // console.log('handle Update Tags', tags);
+            this.tags = tags;
+        },
         onFileChange(e: Event) {
             const target = e.target as HTMLInputElement;
             const files = target.files;
@@ -121,13 +125,14 @@ export default {
             let reportingKey;
             if (hasReportingKey) {
                 reportingKey =  await makeEncodedDeviceKey(); //reporting key = public key
+                let tag_set = (this.tags).concat(['reportingkey']);
 
                 await  postProvenance(reportingKey, {
                     blobType: 'deviceInitializer',
                     deviceName: this.name,
                     // Is this a proper description? Should it say "reporting key" or something?
                     description: this.description,
-                    tags: ['creation', 'reportingkey'],
+                    tags: tag_set,
                     children_key: '',
                     hasParent: true,
                     isReportingKey: true,
@@ -167,7 +172,7 @@ export default {
                         blobType: 'deviceInitializer',
                         deviceName: childName,
                         description: "",  // need to see if we want a special description when making a child
-                        tags:['creation'],
+                        tags:this.tags,
                         children_key: '',
                         hasParent: true,
                         isReportingKey: false
@@ -184,12 +189,11 @@ export default {
                     childrenDeviceName.push(childName);
                 }
             };
-            console.log("reportingKey",reportingKey);
             postProvenance(deviceKey, {
                 blobType: 'deviceInitializer',
                 deviceName: this.name,
                 description: this.description,
-                tags:['creation'],
+                tags:this.tags,
                 reportingKey: reportingKey,
                 children_key: childrenDeviceList,
                 children_name: childrenDeviceName,

diff --git a/packages/frontend/components/Forms/CreateDevice.vue b/packages/frontend/components/Forms/CreateDevice.vue
@@ -9,14 +9,22 @@
 <template>
     <form enctype="multipart/form-data" class="bg-frost p-3" @submit.prevent="submitForm">
         <p class="text-iris mt-1">Create New Device</p>
+
         <div>
             <input type="text" class="form-control" v-model="name" required placeholder="Device Name">
             <input type="text" class="form-control mt-2" v-model="description" required placeholder="Device Description">
             <div style="display: block;">
                 <label class="mt-3 text-iris">Device Image (optional):    </label>
                 <input type="file"  class="form-control " accept="image/*" @change="onFileChange" capture="environment" multiple />
             </div>
+
+            <label class="mt-3 text-iris">Add Tags (optional):</label>
+            <ProvenanceTagInput class="form-control mt-1" placeholder="Device Tag" v-model="tags" @updateTags="handleUpdateTags"/>
+            <div>
+                <span v-for="(tag, index) in tags" :key="tag"> {{ tag }}{{ index !== tags.length - 1 ? ', ' : '' }}</span> 
+            </div>
         </div>
+
         <div class="d-grid">        
             <button class="btn my-3 bg-iris text-white" type="submit">Create Device</button>
         </div>
@@ -32,12 +40,17 @@ export default {
         return {
             name: '',
             description: '',
+            tags: [] as string[],
             children_key: '',
             hasParent: false, // states whether a device is contained within a box/container
             pictures: [] as File[] | null,
         }
     },
     methods: {
+        handleUpdateTags(tags: string[]) {
+            // console.log('handle Update Tags', tags);
+            this.tags = tags;
+        },
         onFileChange(e: Event) {
             const target = e.target as HTMLInputElement;
             const files = target.files;
@@ -52,6 +65,7 @@ export default {
                 blobType: 'deviceInitializer',
                 deviceName: this.name,
                 description: this.description,
+                tags: this.tags,
                 children_key: '',
                 hasParent: false,
                 isReportingKey: false,

diff --git a/packages/frontend/components/Provenance/Feed.vue b/packages/frontend/components/Provenance/Feed.vue
@@ -7,15 +7,12 @@
         <div v-for="(report, index) in provenance" class="report-box">
             <template v-if="report.record.blobType === 'deviceInitializer'">
                 <h3 id = "createdDevicePoint">Created Device: {{ report.record.deviceName }}</h3>
-                <div>{{ report.record.deviceDescription }}</div>
             </template>
 
-            <template v-else>
             <div class="mb-1 tag-container">
     <span class="tag" v-for="tag in report.record.tags" v-bind:style="'color: '+textColorForTag(tag)+'; background-color: '+getColorForTag(tag)+';'">
     {{tag}}</span>
             </div>
-            </template>
 
             <div>{{ report.record.description }}</div>
             <div v-for="(url, i) in attachmentURLs[index.toString()]" :key="i">