Skip to content
This repository was archived by the owner on Oct 17, 2023. It is now read-only.

Commit 18aa28f

Browse files
fltbfltb
committed
split view
1 parent 8129a36 commit 18aa28f

File tree

2 files changed

+33
-305
lines changed

2 files changed

+33
-305
lines changed

‎fltb/src/App.vue

+5-305
Original file line numberDiff line numberDiff line change
@@ -1,329 +1,29 @@
11
<script setup>
2-
import { NSpace, NSpin, NButton, NAlert, NDivider, NH1, NDataTable, NModal, NRadio, NRadioGroup, NForm, NFormItem, NInput, NInputNumber } from 'naive-ui';
3-
import { h, ref, onMounted } from 'vue';
2+
import { NDivider, NH1 } from 'naive-ui';
43
import { loadFull } from "tsparticles"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
54
import particlesOpitions from './particles.json';
5+
import { RouterView } from 'vue-router';
66
const particlesInit = async engine => {
77
await loadFull(engine);
88
};
99
1010
const particlesLoaded = async container => {
1111
console.log("Particles container loaded", container);
1212
};
13-
// global variables begin::
14-
15-
/**
16-
* @typedef StudentInfo
17-
* @type {Object}
18-
* @property {Number} key
19-
* @property {String} username
20-
* @property {String} password
21-
* @property {String} email
22-
* @property {String} firstName
23-
* @property {String} lastName
24-
* @property {Number} age
25-
* @property {String} gender
26-
* @property {Number} height
27-
* @property {Number} weight
28-
*/
29-
30-
/**
31-
*
32-
* @param {Object} onDeleteRowClick
33-
* @param {Object} onModifyRowClick
34-
*/
35-
const createColumns = (onDeleteRowClick, onModifyRowClick) => [
36-
{
37-
type: "selection",
38-
}, {
39-
title: "Index",
40-
key: "key"
41-
}, {
42-
title: "Username",
43-
key: "username"
44-
}, {
45-
title: "Password",
46-
key: "password"
47-
}, {
48-
title: "Email",
49-
key: "email"
50-
}, {
51-
title: "First Name",
52-
key: "firstName"
53-
}, {
54-
title: "Last Name",
55-
key: "lastName"
56-
}, {
57-
title: "Age",
58-
key: "age"
59-
}, {
60-
title: "Gender",
61-
key: "gender"
62-
}, {
63-
title: "Height",
64-
key: "height"
65-
}, {
66-
title: "Weight",
67-
key: "weight"
68-
}, {
69-
title: "Action",
70-
key: "action",
71-
render(row) {
72-
return h(NSpace, null, [h(
73-
NButton,
74-
{
75-
strong: true,
76-
tertiary: true,
77-
type: "primary",
78-
onClick: () => onModifyRowClick(row)
79-
},
80-
{ default: () => "Modify" }
81-
), h(
82-
NButton,
83-
{
84-
strong: true,
85-
tertiary: true,
86-
type: "error",
87-
onClick: () => onDeleteRowClick(row)
88-
},
89-
{ default: () => "Delete" }
90-
)
91-
])
92-
}
93-
}
94-
];
95-
const rules = {
96-
inputValue: {
97-
required: true,
98-
}
99-
}
100-
101-
const data = ref([]);
102-
const checkedRowKeysRef = ref([]);
103-
const spinShow = ref(true);
104-
105-
const editModelData = ref({});
106-
const showModal = ref(false);
107-
const modalMode = ref("");
108-
const errorMessage = ref("");
109-
110-
// global variables end::
111-
112-
// functions begin::
113-
114-
/**
115-
*
116-
* @param {Boolean} mode
117-
*/
118-
function initModel(mode) {
119-
errorMessage.value = "";
120-
if (mode == "edit") {
121-
modalMode.value = "edit";
122-
} else if (mode == "add") {
123-
modalMode.value = "add";
124-
}
125-
}
126-
127-
function handleValidateClick() {
128-
for (const [key, value] of Object.entries(editModelData.value)) {
129-
if (!value && key != "key" && key != "id") {
130-
errorMessage.value = `Please fill in the ${key}`;
131-
return false;
132-
}
133-
}
134-
return true;
135-
}
136-
137-
function submitCallback() {
138-
if (!handleValidateClick()) {
139-
return;
140-
}
141-
if (modalMode.value == "edit") {
142-
data.value[editModelData.value.key] = { ...editModelData.value };
143-
fetch(`https://dummyjson.com/users/${editModelData.value.id}`, {
144-
method: 'PUT',
145-
headers: { 'Content-Type': 'application/json' },
146-
body: JSON.stringify(editModelData.value)
147-
})
148-
.then(res => res.json())
149-
.then(console.log)
150-
} else if (modalMode.value == "add") {
151-
editModelData.value.key = data.value.length;
152-
data.value.push({ ...editModelData.value });
153-
fetch('https://dummyjson.com/users/add', {
154-
method: 'POST',
155-
headers: { 'Content-Type': 'application/json' },
156-
body: JSON.stringify(editModelData.value)
157-
})
158-
.then(res => res.json())
159-
.then(console.log)
160-
}
161-
showModal.value = false;
162-
}
163-
164-
function cancelCallback() {
165-
showModal.value = false;
166-
}
167-
168-
function onDeleteClick() {
169-
checkedRowKeysRef.value.forEach(key => {
170-
fetch(`https://dummyjson.com/users/${data.value[key].id}`, {
171-
method: 'DELETE',
172-
})
173-
.then(res => res.json())
174-
.then(console.log);
175-
})
176-
data.value = data.value.filter(ele => !checkedRowKeysRef.value.includes(ele.key));
177-
checkedRowKeysRef.value = []
178-
data.value.forEach((ele, index) => ele.key = index);
179-
}
180-
181-
function onAddRowClick() {
182-
initModel("add");
183-
showModal.value = true;
184-
editModelData.value = {
185-
key: 0,
186-
username: "",
187-
password: "",
188-
email: "",
189-
firstName: "",
190-
lastName: "",
191-
age: 0,
192-
gender: "",
193-
height: 0,
194-
weight: 0,
195-
id: data.value.length,
196-
};
197-
}
198-
199-
function onDeleteRowClick(row) {
200-
fetch(`https://dummyjson.com/users/${row.key}`, {
201-
method: 'DELETE',
202-
})
203-
.then(res => res.json())
204-
.then(console.log);
205-
data.value = data.value.filter(ele => ele.key != row.key);
206-
checkedRowKeysRef.value = checkedRowKeysRef.value.filter(ele => ele != row.key);
207-
data.value.forEach((ele, index) => ele.key = index);
208-
}
209-
function onModifyRowClick(row) {
210-
initModel("edit");
211-
showModal.value = true;
212-
editModelData.value = { ...row };
213-
}
214-
function rowKey(row) {
215-
return row.key;
216-
}
217-
function handleCheck(rowKeys) {
218-
checkedRowKeysRef.value = rowKeys;
219-
}
220-
const columns = createColumns(onDeleteRowClick, onModifyRowClick);
221-
function rowClassName(row) {
222-
if (row.key % 2) {
223-
return 'odd-line';
224-
}
225-
return 'even-line'
226-
}
227-
228-
// functions end::
229-
230-
// hooks begin::
231-
onMounted(() => {
232-
fetch('https://dummyjson.com/users')
233-
.then(res => res.json())
234-
.then(res => {
235-
console.log(res);
236-
res.users.forEach((element, index) => {
237-
data.value.push({
238-
id: element.id,
239-
key: index,
240-
username: element.username,
241-
password: element.password,
242-
email: element.email,
243-
firstName: element.firstName,
244-
lastName: element.lastName,
245-
age: element.age,
246-
gender: element.gender,
247-
height: element.height,
248-
weight: element.weight
249-
});
250-
});
251-
spinShow.value = false;
252-
});
253-
254-
})
255-
// hooks end::
256-
25713
25814
</script>
25915

26016
<template>
26117
<vue-particles id="tsparticles" :particlesInit="particlesInit" :particlesLoaded="particlesLoaded"
26218
:options="particlesOpitions" />
263-
<div class="container pb-3 pt-1 ps-4 pe-4 mt-3 animate__animated animate__fadeInDown" style="background-color: #ffffffa1;">
19+
<div class="container pb-3 pt-1 ps-4 pe-4 mt-3 animate__animated animate__fadeInDown"
20+
style="background-color: #ffffffa1;">
26421
<n-divider>
26522
<n-h1 class="animate__animated animate__heartBeat animate__delay-1s">User Management System by FLTB</n-h1>
26623
</n-divider>
267-
<n-space class="mb-3 animate__animated animate__fadeIn animate__delay-1s">
268-
<n-button size="large" type="primary" @click="onAddRowClick">Add</n-button>
269-
<n-button size="large" type="error" @click="onDeleteClick">Delete</n-button>
270-
</n-space>
271-
<n-spin :show="spinShow">
272-
<n-data-table class="animate__animated animate__fadeIn animate__delay-1s" :row-key="rowKey" :columns="columns" :data="data" :pagination="{
273-
pageSize: 10
274-
}" :row-class-name="rowClassName" @update:checked-row-keys="handleCheck" :checked-row-keys="checkedRowKeysRef"
275-
:bordered="false" />
276-
</n-spin>
277-
278-
<n-modal v-model:show="showModal" preset="dialog" title="Edit">
279-
<n-form class="mt-3" ref="formRef" :model="editModelData" :rules="rules" label-placement="left" label-width="auto"
280-
require-mark-placement="right-hanging" size="medium">
281-
<n-alert v-if="errorMessage" title="Error" type="error" class="mt-3 mb-3">
282-
{{ errorMessage }}
283-
</n-alert>
284-
<n-form-item label="Username" path="inputValue">
285-
<n-input v-model:value="editModelData.username" placeholder="usern@me" :required="true" />
286-
</n-form-item>
287-
<n-form-item label="Password" path="inputValue">
288-
<n-input v-model:value="editModelData.password" placeholder="p@ssord" :required="true" />
289-
</n-form-item>
290-
<n-form-item label="Email" path="inputValue">
291-
<n-input v-model:value="editModelData.email" placeholder="em@il" :required="true" />
292-
</n-form-item>
293-
<n-form-item label="First Name" path="inputValue">
294-
<n-input v-model:value="editModelData.firstName" placeholder="first n@me" :required="true" />
295-
</n-form-item>
296-
<n-form-item label="Last Name" path="inputValue">
297-
<n-input v-model:value="editModelData.lastName" placeholder="last n@ame" :required="true" />
298-
</n-form-item>
299-
<n-form-item label="Age" path="inputValue">
300-
<n-input-number v-model:value="editModelData.age" :required="true" />
301-
</n-form-item>
302-
<n-form-item label="Gender" path="radioGroupValue">
303-
<n-radio-group v-model:value="editModelData.gender">
304-
<n-radio value="male">Male</n-radio>
305-
<n-radio value="female">Female</n-radio>
306-
</n-radio-group>
307-
</n-form-item>
308-
<n-form-item label="Height" path="inputValue">
309-
<n-input-number v-model:value="editModelData.height" :required="true" />
310-
</n-form-item>
311-
<n-form-item label="Weight" path="inputValue">
312-
<n-input-number v-model:value="editModelData.weight" :required="true" />
313-
</n-form-item>
314-
</n-form>
315-
<template #action>
316-
<n-space>
317-
<n-button @click="cancelCallback">Cancel</n-button>
318-
<n-button type="primary" @click="submitCallback">Submit</n-button>
319-
</n-space>
320-
</template>
321-
</n-modal>
24+
<RouterView />
32225
</div>
32326
</template>
32427

32528
<style scoped>
326-
:deep(.odd-line td) {
327-
background-color: rgba(244, 255, 254, 0.75);
328-
}
32929
</style>

‎fltb/src/views/DataTable.vue

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup>
2+
import { ref, provide } from 'vue';
3+
import dataTable from '../components/dataTable.vue'
4+
import editModal from '../components/editModal.vue';
5+
6+
const data = ref([]);
7+
const editModelData = ref({});
8+
const showModal = ref(false);
9+
const modalMode = ref("");
10+
const errorMessage = ref("");
11+
12+
/**
13+
* init the model
14+
* @param {String} mode - "edit" or "add"
15+
*/
16+
function initModel(mode) {
17+
errorMessage.value = "";
18+
if (mode === "edit" || mode === "add") {
19+
modalMode.value = mode;
20+
}
21+
}
22+
provide("datas", { data, editModelData, showModal, modalMode, errorMessage, initModel });
23+
</script>
24+
25+
<template>
26+
<data-table />
27+
<edit-modal />
28+
</template>

0 commit comments

Comments
 (0)