@7365admin1/layer-common 3.1.4-staging.52 → 3.1.4-staging.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/OrgViewDialog.vue +118 -0
- package/composables/useOrg.ts +17 -0
- package/package.json +1 -1
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<v-dialog v-model="model" max-width="760" scrollable>
|
|
3
|
+
<v-card rounded="lg">
|
|
4
|
+
<v-toolbar density="compact" color="grey-lighten-4">
|
|
5
|
+
<v-toolbar-title class="text-subtitle-1 font-weight-bold">
|
|
6
|
+
View Organization Information
|
|
7
|
+
</v-toolbar-title>
|
|
8
|
+
</v-toolbar>
|
|
9
|
+
|
|
10
|
+
<v-card-text class="py-4">
|
|
11
|
+
<template v-for="section in sections" :key="section.title">
|
|
12
|
+
<div class="text-subtitle-2 font-weight-bold mb-2">
|
|
13
|
+
{{ section.title }}
|
|
14
|
+
</div>
|
|
15
|
+
<div
|
|
16
|
+
v-for="row in section.rows"
|
|
17
|
+
:key="row.label"
|
|
18
|
+
class="d-flex justify-space-between py-1"
|
|
19
|
+
>
|
|
20
|
+
<span class="text-body-2 text-medium-emphasis">{{ row.label }}</span>
|
|
21
|
+
<span class="text-body-2 font-weight-medium text-right">
|
|
22
|
+
{{ row.value || "--" }}
|
|
23
|
+
</span>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="mb-4" />
|
|
26
|
+
</template>
|
|
27
|
+
</v-card-text>
|
|
28
|
+
|
|
29
|
+
<v-divider />
|
|
30
|
+
|
|
31
|
+
<v-card-actions class="justify-center py-3">
|
|
32
|
+
<v-btn variant="text" class="text-none" @click="model = false">
|
|
33
|
+
Close
|
|
34
|
+
</v-btn>
|
|
35
|
+
</v-card-actions>
|
|
36
|
+
</v-card>
|
|
37
|
+
</v-dialog>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script setup lang="ts">
|
|
41
|
+
import { computed, type PropType } from "vue";
|
|
42
|
+
import type { TOrgDetail } from "../composables/useOrg";
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
const props = defineProps({
|
|
46
|
+
modelValue: {
|
|
47
|
+
type: Boolean,
|
|
48
|
+
default: false,
|
|
49
|
+
},
|
|
50
|
+
org: {
|
|
51
|
+
type: Object as PropType<TOrgDetail | null>,
|
|
52
|
+
default: null,
|
|
53
|
+
},
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
const emit = defineEmits<{
|
|
57
|
+
(e: "update:modelValue", value: boolean): void;
|
|
58
|
+
}>();
|
|
59
|
+
|
|
60
|
+
const model = computed({
|
|
61
|
+
get: () => props.modelValue,
|
|
62
|
+
set: (value: boolean) => emit("update:modelValue", value),
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
// Org type → label map, kept local to this component (no separate file).
|
|
66
|
+
const orgTypeConfig: Record<string, { label: string; url?: string }> = {
|
|
67
|
+
property_management_agency: { label: "Property Management" },
|
|
68
|
+
security_agency: { label: "Security" },
|
|
69
|
+
cleaning_services: { label: "Cleaning" },
|
|
70
|
+
mechanical_electrical_services: { label: "M&E" },
|
|
71
|
+
pest_control_services: { label: "Pest Control" },
|
|
72
|
+
landscaping_services: { label: "Landscape" },
|
|
73
|
+
pool_maintenance_services: { label: "Pool Maintenance" },
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
function getOrgTypeMeta(type = "") {
|
|
77
|
+
return orgTypeConfig[type] ?? { label: type || "—" };
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
const sections = computed(() => {
|
|
81
|
+
const org = props.org;
|
|
82
|
+
return [
|
|
83
|
+
{
|
|
84
|
+
title: "Basic Information",
|
|
85
|
+
rows: [
|
|
86
|
+
{ label: "Organization Name", value: org?.name },
|
|
87
|
+
{ label: "Organization Type", value: getOrgTypeMeta(org?.type).label },
|
|
88
|
+
{ label: "Industry (optional)", value: org?.industry },
|
|
89
|
+
{
|
|
90
|
+
label: "Registration Number / ID (optional)",
|
|
91
|
+
value: org?.registrationNo,
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
title: "Contact Information",
|
|
97
|
+
rows: [
|
|
98
|
+
{ label: "Email Address", value: org?.email },
|
|
99
|
+
{ label: "Country", value: org?.country },
|
|
100
|
+
{ label: "Phone No.", value: org?.phone ?? org?.contact },
|
|
101
|
+
{ label: "Website", value: org?.website },
|
|
102
|
+
{ label: "Alternate Contact Number (optional)", value: org?.altContact },
|
|
103
|
+
],
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
title: "Address Details",
|
|
107
|
+
rows: [
|
|
108
|
+
{ label: "Country", value: org?.addrCountry },
|
|
109
|
+
{ label: "State / Province", value: org?.state },
|
|
110
|
+
{ label: "City", value: org?.city },
|
|
111
|
+
{ label: "Postal Code", value: org?.postalCode },
|
|
112
|
+
{ label: "Address line 1", value: org?.addressLine1 },
|
|
113
|
+
{ label: "Address line 1", value: org?.addressLine2 },
|
|
114
|
+
],
|
|
115
|
+
},
|
|
116
|
+
];
|
|
117
|
+
});
|
|
118
|
+
</script>
|
package/composables/useOrg.ts
CHANGED
|
@@ -2,6 +2,23 @@ import { computed, watch } from "vue";
|
|
|
2
2
|
import { useNuxtApp, useRoute, useState } from "#app";
|
|
3
3
|
import useLocalAuth from "./useLocalAuth";
|
|
4
4
|
|
|
5
|
+
export interface TOrgDetail extends TOrg {
|
|
6
|
+
industry?: string;
|
|
7
|
+
registrationNo?: string;
|
|
8
|
+
country?: string;
|
|
9
|
+
phone?: string;
|
|
10
|
+
phoneCountryCode?: string;
|
|
11
|
+
website?: string;
|
|
12
|
+
altContact?: string;
|
|
13
|
+
altContactCountryCode?: string;
|
|
14
|
+
addrCountry?: string;
|
|
15
|
+
state?: string;
|
|
16
|
+
city?: string;
|
|
17
|
+
postalCode?: string;
|
|
18
|
+
addressLine1?: string;
|
|
19
|
+
addressLine2?: string;
|
|
20
|
+
}
|
|
21
|
+
|
|
5
22
|
export default function useOrg() {
|
|
6
23
|
function getOrgs({
|
|
7
24
|
page = 1,
|