Internal: Migrate from vuex to pinia is system announcement. Fix issue with router, because announcement is not in vue we need to use the location api from browser instead of vue router

Author: @daniboygg

assets/vue/components/systemannouncement/SystemAnnouncementCard.vue

@@ -5,7 +5,7 @@
         <h6 v-text="announcement.title" />
 
         <BaseButton
-          v-if="isAdmin"
+          v-if="securityStore.isAdmin"
           icon="edit"
           label="Edit"
           type="black"
@@ -18,37 +18,23 @@
   </BaseCard>
 </template>
 
-<script>
+<script setup>
-
+import BaseButton from "../basecomponents/BaseButton.vue"
-import {mapGetters, useStore} from "vuex";
-import {useRouter} from "vue-router";
-import {reactive, toRefs} from "vue";
-import BaseButton from "../basecomponents/BaseButton.vue";
 import BaseCard from "../basecomponents/BaseCard.vue"
+import { useSecurityStore } from "../../store/securityStore"
 
-export default {
+const securityStore = useSecurityStore()
-  name: 'SystemAnnouncementCard',
-  components: { BaseCard, BaseButton },
-  props: {
-    announcement: Object,
-  },
-  setup() {
-    const router = useRouter();
-    const state = reactive({
-      handleAnnouncementClick: function(announcement) {
-        router
-            .push({path: `/main/admin/system_announcements.php?`, query: {id: announcement['id'], action: 'edit'}})
-            .catch(() => {
-            });
-      }
-    });
 
-    return toRefs(state);
+defineProps({
+  announcement: {
+    type: Object,
+    required: true,
   },
-  computed: {
+})
-    ...mapGetters({
+
-      'isAdmin': 'security/isAdmin',
+function handleAnnouncementClick(announcement) {
-    }),
+  // until announcement is migrated to vue we need to use a browser action
-  }
+  // when announcement is migrated we should use router.push here
-};
+  location.assign(`/main/admin/system_announcements.php?id=${announcement["id"]}&action=edit`)
+}
 </script>