Skip to content

Commit a8baaa9

Browse files
NicolasRichelNicolasRichel
committed
PATCH: feat: migrate BIMDataBuildingMaker to <script setup> style
1 parent 69e2e52 commit a8baaa9

18 files changed

Lines changed: 699 additions & 815 deletions

src/BIMDataBuildingMaker/BIMDataBuildingMaker.scss renamed to src/BIMDataBuildingMaker/BIMDataBuildingMaker.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
height: 100%;
44
background-color: var(--color-white);
55

6-
&__header {
6+
.bimdata-building-maker__header {
77
height: 44px;
88
padding: calc(var(--spacing-unit) / 2) 0;
99

@@ -14,18 +14,18 @@
1414

1515
box-shadow: var(--box-shadow);
1616

17-
&__btn-back {
17+
.bimdata-building-maker__header__btn-back {
1818
position: absolute;
1919
left: var(--spacing-unit);
2020
}
2121
}
2222

23-
&__body {
23+
.bimdata-building-maker__body {
2424
height: calc(100% - 44px);
2525
padding: calc(2 * var(--spacing-unit));
2626
}
2727

28-
&__loader {
28+
.bimdata-building-maker__loader {
2929
position: absolute;
3030
top: 0;
3131
left: 0;

‎src/BIMDataBuildingMaker/BIMDataBuildingMaker.vue‎

Lines changed: 94 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,94 @@
1+
<script setup>
2+
import { onMounted, provide, ref, watch } from "vue";
3+
import icon from "./icon.svg";
4+
import { createService } from "./service.js";
5+
// Components
6+
import BuildingForm from "./BuildingForm/BuildingForm.vue";
7+
import BuildingsList from "./BuildingsList/BuildingsList.vue";
8+
import BuildingStoreys from "./BuildingStoreys/BuildingStoreys.vue";
9+
10+
const props = defineProps({
11+
apiClient: {
12+
type: Object,
13+
required: true,
14+
},
15+
space: {
16+
type: Object,
17+
required: true,
18+
},
19+
project: {
20+
type: Object,
21+
required: true,
22+
},
23+
model: {
24+
type: Object,
25+
default: null,
26+
},
27+
});
28+
29+
const emit = defineEmits([
30+
"metaBuilding-created",
31+
"metaBuilding-updated",
32+
"metaBuilding-deleted",
33+
]);
34+
35+
const VIEWS = Object.freeze({
36+
FORM: "form",
37+
LIST: "list",
38+
VIEW: "view",
39+
});
40+
41+
const service = createService(props.apiClient, props.space, props.project);
42+
const loading = ref(false);
43+
44+
provide("service", service);
45+
provide("loading", loading);
46+
47+
const currentView = ref(VIEWS.LIST);
48+
const metaBuildings = ref([]);
49+
const currentMetaBuilding = ref(null);
50+
51+
const loadMetaBuildings = async () => {
52+
loading.value = true;
53+
metaBuildings.value = await service.fetchMetaBuildings();
54+
loading.value = false;
55+
};
56+
const deleteMetaBuilding = async (metaBuilding) => {
57+
await service.deleteMetaBuilding(metaBuilding);
58+
loadMetaBuildings();
59+
emit("metaBuilding-deleted");
60+
};
61+
const openForm = (metaBuilding) => {
62+
currentMetaBuilding.value = metaBuilding ?? null;
63+
currentView.value = VIEWS.FORM;
64+
};
65+
const openMetaBuilding = (metaBuilding) => {
66+
currentMetaBuilding.value = metaBuilding;
67+
currentView.value = VIEWS.VIEW;
68+
};
69+
const onMetaBuildingCreated = async (metaBuilding) => {
70+
await loadMetaBuildings();
71+
openMetaBuilding(metaBuilding);
72+
emit("metaBuilding-created");
73+
};
74+
const onMetaBuildingUpdated = () => {
75+
loadMetaBuildings();
76+
currentView.value = VIEWS.LIST;
77+
emit("metaBuilding-updated");
78+
};
79+
const back = () => {
80+
currentView.value = VIEWS.LIST;
81+
};
82+
83+
watch(
84+
() => props.model,
85+
model => { if (model) openMetaBuilding(model); },
86+
{ immediate: true }
87+
);
88+
89+
onMounted(() => loadMetaBuildings());
90+
</script>
91+
192
<template>
293
<div class="bimdata-building-maker">
394
<div
@@ -34,7 +125,7 @@
34125
/>
35126
</template>
36127
37-
<template v-else-if="currentView === VIEWS.STOREYS && currentMetaBuilding">
128+
<template v-else-if="currentView === VIEWS.VIEW && currentMetaBuilding">
38129
<BuildingStoreys
39130
:apiClient="apiClient"
40131
:space="space"
@@ -47,10 +138,10 @@
47138
<template v-else>
48139
<BuildingsList
49140
:metaBuildings="metaBuildings"
141+
@open-metaBuilding="openMetaBuilding"
50142
@create-metaBuilding="openForm"
51143
@update-metaBuilding="openForm"
52144
@delete-metaBuilding="deleteMetaBuilding"
53-
@manage-storeys="openStoreys"
54145
/>
55146
</template>
56147
</transition>
@@ -64,120 +155,4 @@
64155
</div>
65156
</template>
66157
67-
<script>
68-
import { onMounted, provide, ref, watch } from "vue";
69-
import icon from "./icon.svg";
70-
import { createService } from "./service.js";
71-
// Components
72-
import BuildingForm from "./BuildingForm/BuildingForm.vue";
73-
import BuildingsList from "./BuildingsList/BuildingsList.vue";
74-
import BuildingStoreys from "./BuildingStoreys/BuildingStoreys.vue";
75-
76-
const VIEWS = Object.freeze({
77-
FORM: "form",
78-
LIST: "list",
79-
STOREYS: "storeys",
80-
});
81-
82-
export default {
83-
components: {
84-
BuildingForm,
85-
BuildingsList,
86-
BuildingStoreys,
87-
},
88-
props: {
89-
apiClient: {
90-
type: Object,
91-
required: true,
92-
},
93-
space: {
94-
type: Object,
95-
required: true,
96-
},
97-
project: {
98-
type: Object,
99-
required: true,
100-
},
101-
model: {
102-
type: Object,
103-
default: null,
104-
},
105-
},
106-
emits: [
107-
"metaBuilding-created",
108-
"metaBuilding-updated",
109-
"metaBuilding-deleted",
110-
],
111-
setup(props, { emit }) {
112-
const service = createService(props.apiClient, props.space, props.project);
113-
const loading = ref(false);
114-
115-
provide("service", service);
116-
provide("loading", loading);
117-
118-
const currentView = ref(VIEWS.LIST);
119-
const metaBuildings = ref([]);
120-
const currentMetaBuilding = ref(null);
121-
122-
const loadMetaBuildings = async () => {
123-
loading.value = true;
124-
metaBuildings.value = await service.fetchMetaBuildings();
125-
loading.value = false;
126-
};
127-
const deleteMetaBuilding = async (metaBuilding) => {
128-
await service.deleteMetaBuilding(metaBuilding);
129-
loadMetaBuildings();
130-
emit("metaBuilding-deleted");
131-
};
132-
const openForm = (metaBuilding) => {
133-
currentMetaBuilding.value = metaBuilding || null;
134-
currentView.value = VIEWS.FORM;
135-
};
136-
const openStoreys = (metaBuilding) => {
137-
currentMetaBuilding.value = metaBuilding;
138-
currentView.value = VIEWS.STOREYS;
139-
};
140-
const onMetaBuildingCreated = async (metaBuilding) => {
141-
await loadMetaBuildings();
142-
openStoreys(metaBuilding);
143-
emit("metaBuilding-created");
144-
};
145-
const onMetaBuildingUpdated = () => {
146-
loadMetaBuildings();
147-
currentView.value = VIEWS.LIST;
148-
emit("metaBuilding-updated");
149-
};
150-
const back = () => {
151-
currentView.value = VIEWS.LIST;
152-
};
153-
154-
watch(
155-
() => props.model,
156-
model => { if (model) openStoreys(model); },
157-
{ immediate: true }
158-
);
159-
160-
onMounted(() => loadMetaBuildings());
161-
162-
return {
163-
// References
164-
currentMetaBuilding,
165-
currentView,
166-
icon,
167-
loading,
168-
metaBuildings,
169-
VIEWS,
170-
// Methods
171-
back,
172-
deleteMetaBuilding,
173-
loadMetaBuildings,
174-
onMetaBuildingCreated,
175-
onMetaBuildingUpdated,
176-
openForm,
177-
openStoreys,
178-
};
179-
},
180-
};
181-
</script>
182-
183-
<style scoped lang="scss" src="./BIMDataBuildingMaker.scss"></style>
158+
<style scoped src="./BIMDataBuildingMaker.css"></style>

‎src/BIMDataBuildingMaker/BuildingForm/BuildingForm.scss‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)