feat: GEO-1112 Link and attachment icons in announcements (#729)

bcgov · Sep 6, 2024 · d454219 · d454219
1 parent db60c7f
commit d454219
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 21 deletions.
diff --git a/admin-frontend/src/components/announcements/AnnouncementForm.vue b/admin-frontend/src/components/announcements/AnnouncementForm.vue
@@ -495,7 +495,6 @@ const { handleSubmit, setErrors, errors, meta, values } = useForm({
       return true;
     },
     expires_on(value) {
-      debugger
       if (!value) {
         return true;
       }

diff --git a/admin-frontend/src/components/announcements/AnnouncementItem.vue b/admin-frontend/src/components/announcements/AnnouncementItem.vue
@@ -8,18 +8,34 @@
         :key="i"
         class="px-0"
       >
-        <a
-          v-if="announcementResource.resource_type === 'LINK'"
-          :href="sanitizeUrl(announcementResource.resource_url)"
-          target="_blank"
-          rel="noopener"
-          >{{ announcementResource.display_name }}</a
-        >
-        <a
+        <p v-if="announcementResource.resource_type === 'LINK'" class="mb-2">
+          <a
+            :href="sanitizeUrl(announcementResource.resource_url)"
+            target="_blank"
+            rel="noopener"
+            >{{ announcementResource.display_name }}
+            <v-icon
+              icon="fa:fas fa-arrow-up-right-from-square"
+              size=".85em"
+              color="primary icon-align"
+              class="icon-align"
+            />
+          </a>
+        </p>
+        <p
           v-if="announcementResource.resource_type === 'ATTACHMENT'"
-          @click="downloadAnnouncementResource(announcementResource)"
-          >{{ announcementResource.display_name }}</a
+          class="mb-2"
         >
+          <v-icon
+            icon="fa:fas fa-paperclip"
+            size="x-small"
+            color="primary"
+            class="mr-1 icon-align"
+          />
+          <a @click="downloadAnnouncementResource(announcementResource)">{{
+            announcementResource.display_name
+          }}</a>
+        </p>
       </div>
     </div>
   </div>
@@ -59,3 +75,8 @@ async function downloadAnnouncementResource(
   }
 }
 </script>
+<style>
+.icon-align {
+  vertical-align: baseline;
+}
+</style>
diff --git a/frontend/src/components/announcements/AnnouncementItem.vue b/frontend/src/components/announcements/AnnouncementItem.vue
@@ -8,18 +8,34 @@
         :key="i"
         class="px-0"
       >
-        <a
-          v-if="announcementResource.resource_type === 'LINK'"
-          :href="sanitizeUrl(announcementResource.resource_url)"
-          target="_blank"
-          rel="noopener"
-          >{{ announcementResource.display_name }}</a
-        >
-        <a
+        <p v-if="announcementResource.resource_type === 'LINK'" class="mb-2">
+          <a
+            :href="sanitizeUrl(announcementResource.resource_url)"
+            target="_blank"
+            rel="noopener"
+            >{{ announcementResource.display_name }}
+            <v-icon
+              icon="fa:fas fa-arrow-up-right-from-square"
+              size=".85em"
+              color="primary icon-align"
+              class="icon-align"
+            />
+          </a>
+        </p>
+        <p
           v-if="announcementResource.resource_type === 'ATTACHMENT'"
-          @click="downloadAnnouncementResource(announcementResource)"
-          >{{ announcementResource.display_name }}</a
+          class="mb-2"
         >
+          <v-icon
+            icon="fa:fas fa-paperclip"
+            size="x-small"
+            color="primary"
+            class="mr-1 icon-align"
+          />
+          <a @click="downloadAnnouncementResource(announcementResource)">{{
+            announcementResource.display_name
+          }}</a>
+        </p>
       </div>
     </div>
   </div>