Skip to content

Commit 6d2f7ec

Browse files
1307-Dev1307-Dev
committed
Added fix for delte modal, tooltip issue and translation for quick actions.
1 parent d4e6db0 commit 6d2f7ec

File tree

6 files changed

+267
-71
lines changed

6 files changed

+267
-71
lines changed

‎apps/vue-starter/src/components/Devices/DeleteDevicesModal.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* * SPDX-FileCopyrightText: 2024 Siemens AG * * SPDX-License-Identifier: MIT * * This source code
2+
is licensed under the MIT license found in the * LICENSE file in the root directory of this source
3+
tree. */
4+
5+
<script setup lang="ts">
6+
import { ref } from "vue";
7+
import { dismissModal } from "@siemens/ix";
8+
import {
9+
type HTMLRefElement,
10+
IxButton,
11+
IxModalHeader,
12+
IxModalContent,
13+
IxModalFooter,
14+
showToast,
15+
} from "@siemens/ix-vue";
16+
import { useDeviceStore } from "@/store/deviceStore";
17+
import type { Device } from "@/types";
18+
import { iconSingleCheck, iconError, iconTrashcan } from "@siemens/ix-icons/icons";
19+
20+
// Make the device prop optional with a default value
21+
const props = withDefaults(
22+
defineProps<{
23+
device?: Device;
24+
}>(),
25+
{
26+
device: undefined,
27+
},
28+
);
29+
30+
const modalRef = ref<HTMLRefElement<HTMLIxModalElement>>();
31+
const deviceStore = useDeviceStore();
32+
33+
const deleteDevice = () => {
34+
if (!props.device) {
35+
console.error("No device provided to delete");
36+
showToast({
37+
message: "Error: No device selected for deletion",
38+
type: "error",
39+
icon: iconError,
40+
iconColor: "color-alarm",
41+
});
42+
dismiss();
43+
return;
44+
}
45+
46+
try {
47+
deviceStore.deleteDevice(props.device);
48+
49+
dismissModal(modalRef.value as unknown as Element, "delete-success");
50+
showToast({
51+
message: "Device successfully deleted",
52+
type: "success",
53+
icon: iconSingleCheck,
54+
iconColor: "color-success",
55+
});
56+
} catch (error) {
57+
console.error("Error deleting device:", error);
58+
showToast({
59+
message: "Failed to delete device",
60+
type: "error",
61+
icon: iconError,
62+
iconColor: "color-alarm",
63+
});
64+
dismiss();
65+
}
66+
};
67+
68+
const dismiss = () => {
69+
dismissModal(modalRef.value as unknown as Element, "dismiss payload");
70+
};
71+
</script>
72+
73+
<template>
74+
<div ref="modalRef" class="modal">
75+
<IxModalHeader class="header" :icon="iconTrashcan" iconColor="color-alarm" @close="dismiss">
76+
Delete device?</IxModalHeader
77+
>
78+
<IxModalContent>
79+
<div class="delete-content">Do you really want to delete the device?</div>
80+
</IxModalContent>
81+
<IxModalFooter class="footer">
82+
<IxButton variant="secondary" outline @click="dismiss">Cancel</IxButton>
83+
<IxButton variant="danger" :disabled="!props.device" @click="deleteDevice"
84+
>Delete device</IxButton
85+
>
86+
</IxModalFooter>
87+
</div>
88+
</template>
89+
90+
<style scoped>
91+
.header {
92+
gap: 1rem;
93+
}
94+
95+
.delete-content {
96+
margin-left: 48px;
97+
}
98+
99+
.footer {
100+
margin-left: 40px;
101+
padding: 0.5rem 0.5rem 0.5rem;
102+
}
103+
104+
.modal {
105+
width: 500px;
106+
max-width: 100%;
107+
}
108+
</style>

‎apps/vue-starter/src/components/Devices/DevicesList.vue‎

Lines changed: 82 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
/*
2-
* SPDX-FileCopyrightText: 2024 Siemens AG
3-
*
4-
* SPDX-License-Identifier: MIT
5-
*
6-
* This source code is licensed under the MIT license found in the
7-
* LICENSE file in the root directory of this source tree.
8-
*/
1+
/* * SPDX-FileCopyrightText: 2024 Siemens AG * * SPDX-License-Identifier: MIT * * This source code
2+
is licensed under the MIT license found in the * LICENSE file in the root directory of this source
3+
tree. */
94

105
<script setup lang="ts">
116
import { ref, computed, onMounted } from "vue";
@@ -14,7 +9,14 @@ import DataTableInstance from "./DataTable.vue";
149
import AddDevicesModal from "./AddDevicesModal.vue";
1510
import { showModal } from "@/helpers/modal";
1611
import { IxButton, IxChip, IxCategoryFilter, IxContentHeader, IxEmptyState } from "@siemens/ix-vue";
17-
import { iconAddCircle, iconSuccess, iconMaintenanceWarning, iconError, iconInfo, iconProject } from "@siemens/ix-icons/icons";
12+
import {
13+
iconAddCircle,
14+
iconSuccess,
15+
iconMaintenanceWarning,
16+
iconError,
17+
iconInfo,
18+
iconProject,
19+
} from "@siemens/ix-icons/icons";
1820
import { FilterState, LogicalFilterOperator } from "@siemens/ix";
1921
import { useDeviceStore } from "@/store/deviceStore";
2022
import type { Device, DeviceState } from "@/types";
@@ -44,7 +46,9 @@ const categories = computed(() => {
4446
const categoryMap = {} as Record<string, { label: string; options: string[] }>;
4547
4648
keys.forEach((key) => {
47-
const uniqueValues = Array.from(new Set(devices.map((device) => device[key as keyof Device] ?? "")));
49+
const uniqueValues = Array.from(
50+
new Set(devices.map((device) => device[key as keyof Device] ?? "")),
51+
);
4852
const kebabKey = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
4953
let label = t(`device-details.${kebabKey}`);
5054
if (label === `device-details.${kebabKey}`) {
@@ -103,9 +107,9 @@ const toggleFilter = (status: string) => {
103107
categoryFilterState.value = wasActive
104108
? { tokens: [], categories: [] }
105109
: {
106-
tokens: [],
107-
categories: [{ id: "status", value: status, operator: LogicalFilterOperator.EQUAL }],
108-
};
110+
tokens: [],
111+
categories: [{ id: "status", value: status, operator: LogicalFilterOperator.EQUAL }],
112+
};
109113
};
110114
111115
const onCategoryFilterChanged = (event: CustomEvent<FilterState>) => {
@@ -130,55 +134,96 @@ defineExpose({
130134

131135
<template>
132136
<IxContentHeader slot="header" headerTitle="Devices">
133-
<IxButton ghost class="add-devices-button" :icon="iconAddCircle" aria-label="add device" @click="addDeviceClick">
137+
<IxButton
138+
ghost
139+
class="add-devices-button"
140+
:icon="iconAddCircle"
141+
aria-label="add device"
142+
@click="addDeviceClick"
143+
>
134144
Add device
135145
</IxButton>
136146
</IxContentHeader>
137147

138148
<section class="devices-page">
139149
<section class="device-filter">
140-
<IxCategoryFilter placeholder="Filter by" class="category-filter" :filterState="categoryFilterState"
141-
:categories="categories" @filterChanged="onCategoryFilterChanged" />
150+
<IxCategoryFilter
151+
placeholder="Filter by"
152+
class="category-filter"
153+
:filterState="categoryFilterState"
154+
:categories="categories"
155+
@filterChanged="onCategoryFilterChanged"
156+
/>
142157

143158
<section class="quick-filter">
144-
<IxChip :outline="selectedStatus !== 'Online'" :icon="iconSuccess" variant="success"
145-
@click="() => toggleFilter('Online')">
159+
<IxChip
160+
:outline="selectedStatus !== 'Online'"
161+
:icon="iconSuccess"
162+
variant="success"
163+
@click="() => toggleFilter('Online')"
164+
>
146165
{{ deviceState.Online }} online
147166
</IxChip>
148-
<IxChip :outline="selectedStatus !== 'Maintenance'" :icon="iconMaintenanceWarning" variant="warning"
149-
@click="() => toggleFilter('Maintenance')">
167+
<IxChip
168+
:outline="selectedStatus !== 'Maintenance'"
169+
:icon="iconMaintenanceWarning"
170+
variant="warning"
171+
@click="() => toggleFilter('Maintenance')"
172+
>
150173
{{ deviceState.Maintenance }} maintenance
151174
</IxChip>
152-
<IxChip :outline="selectedStatus !== 'Error'" :icon="iconError" variant="alarm"
153-
@click="() => toggleFilter('Error')">
175+
<IxChip
176+
:outline="selectedStatus !== 'Error'"
177+
:icon="iconError"
178+
variant="alarm"
179+
@click="() => toggleFilter('Error')"
180+
>
154181
{{ deviceState.Error }} error
155182
</IxChip>
156-
<IxChip :outline="selectedStatus !== 'Offline'" :icon="iconInfo" variant="neutral"
157-
@click="() => toggleFilter('Offline')">
183+
<IxChip
184+
:outline="selectedStatus !== 'Offline'"
185+
:icon="iconInfo"
186+
variant="neutral"
187+
@click="() => toggleFilter('Offline')"
188+
>
158189
{{ deviceState.Offline }} offline
159190
</IxChip>
160191
</section>
161192
</section>
162193

163194
<template v-if="deviceStore.devices.length > 0 && filteredDevices.length === 0">
164195
<div class="empty-state-wrapper">
165-
<IxEmptyState :header="t('device-quick-actions.no-devices-found') !== 'device-quick-actions.no-devices-found'
166-
? t('device-quick-actions.no-devices-found')
167-
: 'No devices found'
168-
" :sub-header="t('device-quick-actions.no-devices-found-desc') !==
196+
<IxEmptyState
197+
:header="
198+
t('device-quick-actions.no-devices-found') !== 'device-quick-actions.no-devices-found'
199+
? t('device-quick-actions.no-devices-found')
200+
: 'No devices found'
201+
"
202+
:sub-header="
203+
t('device-quick-actions.no-devices-found-desc') !==
169204
'device-quick-actions.no-devices-found-desc'
170-
? t('device-quick-actions.no-devices-found-desc')
171-
: 'Please remove search terms or add a new device'
172-
" :icon="iconProject" :action="t('reset-filter') !== 'reset-filter' ? t('reset-filter') : 'Reset Filter'"
173-
@actionClick="resetFilters" />
205+
? t('device-quick-actions.no-devices-found-desc')
206+
: 'Please remove search terms or add a new device'
207+
"
208+
:icon="iconProject"
209+
:action="t('reset-filter') !== 'reset-filter' ? t('reset-filter') : 'Reset Filter'"
210+
@actionClick="resetFilters"
211+
/>
174212
</div>
175213
</template>
176214
<template v-else>
177-
<DataTableInstance ref="dataTableRef" :filterText="''" :selectedStatus="selectedStatus" :selectedCategory="categoryFilterState.categories.reduce((acc: Record<string, string>, cat) => {
178-
acc[cat.id] = cat.value;
179-
return acc;
180-
}, {})
181-
" @cell-clicked="handleCellClicked" />
215+
<DataTableInstance
216+
ref="dataTableRef"
217+
:filterText="''"
218+
:selectedStatus="selectedStatus"
219+
:selectedCategory="
220+
categoryFilterState.categories.reduce((acc: Record<string, string>, cat) => {
221+
acc[cat.id] = cat.value;
222+
return acc;
223+
}, {})
224+
"
225+
@cell-clicked="handleCellClicked"
226+
/>
182227
</template>
183228
</section>
184229
</template>

0 commit comments

Comments
 (0)