Gleipnir/nidus-sync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Develop patterns for creating links outside router

Browse source
This commit is contained in:
Eli Ribble 2026-04-22 14:31:05 +00:00
parent bcd51cf5cf
commit b4527fba8b
No known key found for this signature in database
24 changed files with 91 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ts/AppSync.vue
View file

@ -6,7 +6,7 @@
import * as Sentry from "@sentry/vue";
import { onMounted } from "vue";
import { apiClient } from "@/client";
import router from "@/router";
import router from "@/route/config";
import { SSEManager, type SSEMessage } from "@/SSEManager";

2
ts/rmo/App.vue
View file

@ -7,7 +7,7 @@
<script setup lang="ts">
import { onMounted, ref } from "vue";
//import { useHead } from "@vueuse/head";
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import { useStoreDistrict } from "@/rmo/store/district";
import type { District } from "@/type/api";

2
ts/rmo/content/compliance/Address.vue
View file

@ -29,7 +29,7 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import type { District, PublicReportCompliance } from "@/type/api";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";

2
ts/rmo/content/compliance/Contact.vue
View file

@ -132,7 +132,7 @@
<script setup lang="ts">
import { ref } from "vue";
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import type { Contact, District, PublicReport } from "@/type/api";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";

2
ts/rmo/content/compliance/Evidence.vue
View file

@ -160,7 +160,7 @@
<script setup lang="ts">
import { ref } from "vue";
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import type { District, PublicReportCompliance } from "@/type/api";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ImageUpload, { Image } from "@/components/ImageUpload.vue";

8
ts/rmo/content/compliance/Intro.vue
View file

@ -20,7 +20,10 @@
</div>
<div class="d-grid mt-4">
<RouterLink class="btn btn-primary btn-lg" to="./compliance/address">
<RouterLink
class="btn btn-primary btn-lg"
:to="routes.ComplianceAddress(props.publicID)"
>
Get Started</RouterLink
>
</div>
@ -31,8 +34,11 @@
import type { District } from "@/type/api";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
import { useRoutes } from "@/rmo/route/use";
interface Props {
district: District;
publicID: string;
}
const props = defineProps<Props>();
const routes = useRoutes();
</script>

2
ts/rmo/content/compliance/Permission.vue
View file

@ -280,7 +280,7 @@
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
import {

2
ts/rmo/content/compliance/Submit.vue
View file

@ -249,7 +249,7 @@
</div>
</template>
<script setup lang="ts">
import { router } from "@/rmo/router";
import { router } from "@/rmo/route/config";
import HeaderCompliance from "@/rmo/components/HeaderCompliance.vue";
import ProgressBarCompliance from "@/rmo/components/ProgressBarCompliance.vue";
import {

5
ts/rmo/router.ts → ts/rmo/route/config.ts
View file

@ -22,6 +22,9 @@ import StatusByID from "@/rmo/view/StatusByID.vue";
import StatusDistrict from "@/rmo/view/district/Status.vue";
import Water from "@/rmo/view/Water.vue";
import WaterDistrict from "@/rmo/view/district/Water.vue";
import { ROUTE_NAMES } from "@/rmo/route/name";
const routes: RouteRecordRaw[] = [
{
path: "/",
@ -48,7 +51,7 @@ const routes: RouteRecordRaw[] = [
},
{
component: ComplianceAddress,
name: "ComplianceAddress",
name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
path: "address",
},
{

6
ts/rmo/route/name.ts Normal file
View file

@ -0,0 +1,6 @@
export const ROUTE_NAMES = {
COMPLIANCE_ADDRESS: "compliance-address",
REVIEW_SITE: "review-site",
} as const;
export type RouteName = (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES];

24
ts/rmo/route/use.ts Normal file
View file

@ -0,0 +1,24 @@
import { RouteLocationRaw } from "vue-router";
import { ROUTE_NAMES } from "@/rmo/route/name";
export function useRoutes() {
/*
const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
return {
name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
...(publicID && { query: { publicID: publicID } })
}
}
*/
const ComplianceAddress = (publicID: string): RouteLocationRaw => {
return {
name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
params: {
public_id: publicID,
},
};
};
return {
ComplianceAddress,
};
}

1
ts/rmo/view/Compliance.vue
View file

@ -31,6 +31,7 @@ body > .container-fluid {
@doEvidence="doEvidence"
@doPermission="doPermission"
@doSubmit="doSubmit"
:publicID="report?.public_id ?? 'unset'"
v-model="report"
/>
</template>

4
ts/router.ts → ts/route/config.ts
View file

@ -35,6 +35,8 @@ import Signup from "@/view/Signup.vue";
import Sudo from "@/view/Sudo.vue";
import { apiClient } from "@/client";
import { ROUTE_NAMES } from "@/route/name";
const routes: RouteRecordRaw[] = [
{
path: "/",
@ -166,7 +168,7 @@ const routes: RouteRecordRaw[] = [
},
{
path: "/_/review/site",
name: "Site Review",
name: ROUTE_NAMES.REVIEW_SITE,
component: ReviewSite,
},
{

6
ts/route/name.ts Normal file
View file

@ -0,0 +1,6 @@
export const ROUTE_NAMES = {
COMPLIANCE_ADDRESS: "compliance-address",
REVIEW_SITE: "review-site",
} as const;
export type RouteName = (typeof ROUTE_NAMES)[keyof typeof ROUTE_NAMES];

22
ts/route/use.ts Normal file
View file

@ -0,0 +1,22 @@
import { RouteLocationRaw } from "vue-router";
import { ROUTE_NAMES } from "@/route/name";
export function useRoutes() {
/*
const RMOComplianceAddress = (publicID: string): RouteLocationRaw => {
return {
name: ROUTE_NAMES.COMPLIANCE_ADDRESS,
...(publicID && { query: { publicID: publicID } })
}
}
*/
const ReviewSite = (siteID: string): RouteLocationRaw => {
return {
name: ROUTE_NAMES.REVIEW_SITE,
query: { site: siteID },
};
};
return {
ReviewSite,
};
}

2
ts/view/Authenticated.vue
View file

@ -24,7 +24,7 @@ import { onMounted } from "vue";
import Sidebar from "@/components/layout/Sidebar.vue";
import MainContent from "@/components/layout/MainContent.vue";
import { Session } from "@/type/api";
import { router } from "@/router";
import { router } from "@/route/config";
import { useSessionStore } from "@/store/session";
const session = useSessionStore();

2
ts/view/Home.vue
View file

@ -5,7 +5,7 @@
import { onMounted } from "vue";
import { useSessionStore } from "@/store/session";
import { Session } from "@/type/api";
import { router } from "@/router";
import { router } from "@/route/config";
const session = useSessionStore();
onMounted(() => {

2
ts/view/Signin.vue
View file

@ -112,7 +112,7 @@
import { ref } from "vue";
import { apiClient } from "@/client";
import ButtonLoading from "@/components/common/ButtonLoading.vue";
import { router } from "@/router";
import { router } from "@/route/config";
const error = ref<string>("");
const loading = ref<boolean>(false);

2
ts/view/Signout.vue
View file

@ -4,7 +4,7 @@
<script setup lang="ts">
import { onMounted } from "vue";
import { apiClient } from "@/client";
import { router } from "@/router";
import { router } from "@/route/config";
import { useSessionStore } from "@/store/session";
const session = useSessionStore();

2
ts/view/configuration/UploadPoolCustom.vue
View file

@ -35,7 +35,7 @@ import CSVUpload from "@/components/CSVUpload.vue";
import TableUploadRequirements, {
UploadRequirement,
} from "@/components/TableUploadRequirements.vue";
import { router } from "@/router";
import { router } from "@/route/config";
const requirements = ref<UploadRequirement[]>([
{

2
ts/view/configuration/UploadPoolFlyover.vue
View file

@ -35,7 +35,7 @@ import CSVUpload from "@/components/CSVUpload.vue";
import TableUploadRequirements, {
UploadRequirement,
} from "@/components/TableUploadRequirements.vue";
import { router } from "@/router";
import { router } from "@/route/config";
const requirements = ref<UploadRequirement[]>([
{

9
ts/view/review/Mailer.vue
View file

@ -44,12 +44,7 @@
</span>
</td>
<td>
<RouterLink
:to="{
name: 'Site Review',
query: { site: mailer.site_id },
}"
>
<RouterLink :to="routes.ReviewSite(mailer.site_id)">
{{ formatAddressShort(mailer.address) }}
</RouterLink>
</td>
@ -87,6 +82,7 @@ import { computedAsync } from "@vueuse/core";
import { formatDate, formatAddressShort } from "@/format";
import { useStoreMailer } from "@/store/mailer";
import { Mailer, MailerStatus } from "@/type/api";
import { useRoutes } from "@/route/use";
const formatStatus = (status: MailerStatus): string => {
return status.charAt(0).toUpperCase() + status.slice(1);
@ -105,4 +101,5 @@ const storeMailer = useStoreMailer();
const mailers = computedAsync(async (): Promise<Mailer[]> => {
return await storeMailer.list();
});
const routes = useRoutes();
</script>

2
vite/rmo/main.ts
View file

@ -4,7 +4,7 @@ import { createPinia } from "pinia";
import "bootstrap-icons/font/bootstrap-icons.css";
import "@/gen/custom-icons.scss";
import "@/style/rmo.scss";
import router from "@/rmo/router";
import router from "@/rmo/route/config";
import App from "@/rmo/App.vue";
const app = createApp(App);

2
vite/sync/main.ts
View file

@ -1,7 +1,7 @@
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "@/AppSync.vue";
import router from "@/router";
import router from "@/route/config";
import * as config from "@/config";
import "maplibre-gl/dist/maplibre-gl.css";