Skip to content

Commit f9c650e

Browse files
crynobonecrynobone
committed
wip
Signed-off-by: Mior Muhammad Zaki <[email protected]>
1 parent f1356f1 commit f9c650e

13 files changed

+1125
-982
lines changed

‎package-lock.json

+18
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"watch-poll": "mix watch -- --watch-options-poll=1000",
88
"hot": "mix watch --hot",
99
"prod": "npm run production",
10-
"production": "mix --production"
10+
"production": "mix --production",
11+
"check-format": "prettier --list-different 'resources/**/*.{css,js,vue}'",
12+
"format": "prettier --write 'resources/js/**/*.{css,js,vue}'"
1113
},
1214
"devDependencies": {
1315
"@vueform/multiselect": "^2.3.3",
@@ -18,5 +20,8 @@
1820
"sass-loader": "10.*",
1921
"sortablejs": "^1.15.0",
2022
"vuex": "^4.1.0"
23+
},
24+
"dependencies": {
25+
"prettier": "^3.4.2"
2126
}
2227
}

‎resources/js/components/DeleteGroupModal.vue

+53-53
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,66 @@
11
<template>
2-
<Modal :show="true">
3-
<form
4-
@submit.prevent="$emit('confirm')"
5-
class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
6-
>
7-
<slot>
8-
<ModalHeader v-text="__('Delete Group')" />
9-
<ModalContent>
10-
<p class="leading-normal" v-if="message">
11-
{{ message }}
12-
</p>
13-
<p class="leading-normal" v-else>
14-
{{ __("Are you sure you want to delete this group?") }}
15-
</p>
16-
</ModalContent>
17-
</slot>
2+
<Modal :show="true">
3+
<form
4+
@submit.prevent="$emit('confirm')"
5+
class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
6+
>
7+
<slot>
8+
<ModalHeader v-text="__('Delete Group')" />
9+
<ModalContent>
10+
<p class="leading-normal" v-if="message">
11+
{{ message }}
12+
</p>
13+
<p class="leading-normal" v-else>
14+
{{ __("Are you sure you want to delete this group?") }}
15+
</p>
16+
</ModalContent>
17+
</slot>
1818

19-
<ModalFooter>
20-
<div class="ml-auto">
21-
<link-button
22-
type="button"
23-
data-testid="cancel-button"
24-
dusk="cancel-delete-button"
25-
@click.prevent="this.$emit('close')"
26-
class="mr-3"
27-
>
28-
{{ no }}
29-
</link-button>
19+
<ModalFooter>
20+
<div class="ml-auto">
21+
<link-button
22+
type="button"
23+
data-testid="cancel-button"
24+
dusk="cancel-delete-button"
25+
@click.prevent="this.$emit('close')"
26+
class="mr-3"
27+
>
28+
{{ no }}
29+
</link-button>
3030

31-
<Button
32-
ref="confirmButton"
33-
dusk="confirm-delete-button"
34-
:loading="working"
35-
:disabled="working"
36-
state="danger"
37-
type="submit"
38-
>
39-
{{ yes }}
40-
</Button>
41-
</div>
42-
</ModalFooter>
43-
</form>
44-
</Modal>
31+
<Button
32+
ref="confirmButton"
33+
dusk="confirm-delete-button"
34+
:loading="working"
35+
:disabled="working"
36+
state="danger"
37+
type="submit"
38+
>
39+
{{ yes }}
40+
</Button>
41+
</div>
42+
</ModalFooter>
43+
</form>
44+
</Modal>
4545
</template>
4646

4747
<script>
48-
import { Button } from 'laravel-nova-ui';
48+
import { Button } from "laravel-nova-ui";
4949
5050
export default {
51-
props: ["message", "yes", "no"],
51+
props: ["message", "yes", "no"],
5252
53-
emits: ["close", "confirm"],
53+
emits: ["close", "confirm"],
5454
55-
components: { Button },
55+
components: { Button },
5656
57-
/**
58-
* Mount the component.
59-
*/
60-
mounted() {
61-
this.$nextTick(() => {
62-
// this.$refs.confirmButton.button.focus()
63-
});
64-
},
57+
/**
58+
* Mount the component.
59+
*/
60+
mounted() {
61+
this.$nextTick(() => {
62+
// this.$refs.confirmButton.button.focus()
63+
});
64+
},
6565
};
6666
</script>

‎resources/js/components/DetailField.vue

+78-80
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,98 @@
11
<template>
2-
<PanelItem :index="index" :field="field">
3-
<template #value>
4-
<div v-for="(group, index) in orderedGroups">
5-
<detail-nova-flexible-content-group
6-
:index="index"
7-
:last="(index === groups.length - 1)"
8-
:group="group"
9-
:key="group.key"
10-
:resource="resource"
11-
:resourceName="resourceName"
12-
:resourceId="resourceId"
13-
:attribute="field.attribute"
14-
/>
15-
</div>
16-
</template>
17-
</PanelItem>
2+
<PanelItem :index="index" :field="field">
3+
<template #value>
4+
<div v-for="(group, index) in orderedGroups">
5+
<detail-nova-flexible-content-group
6+
:index="index"
7+
:last="index === groups.length - 1"
8+
:group="group"
9+
:key="group.key"
10+
:resource="resource"
11+
:resourceName="resourceName"
12+
:resourceId="resourceId"
13+
:attribute="field.attribute"
14+
/>
15+
</div>
16+
</template>
17+
</PanelItem>
1818
</template>
1919

2020
<script>
21-
import Group from '../group';
21+
import Group from "../group";
2222
2323
export default {
24+
props: ["resource", "resourceName", "resourceId", "field"],
25+
data: () => ({
26+
order: [],
27+
groups: {},
28+
}),
2429
25-
props: ['resource', 'resourceName', 'resourceId', 'field'],
26-
data: () => ({
27-
order: [],
28-
groups: {},
29-
}),
30-
31-
computed: {
32-
layouts() {
33-
return this.field.layouts || false;
34-
},
35-
orderedGroups() {
36-
this.value = this.field.value || [];
30+
computed: {
31+
layouts() {
32+
return this.field.layouts || false;
33+
},
34+
orderedGroups() {
35+
this.value = this.field.value || [];
3736
38-
this.populateGroups();
37+
this.populateGroups();
3938
40-
return this.order.reduce((groups, key) => {
41-
groups.push(this.groups[key]);
42-
return groups;
43-
}, []);
44-
},
39+
return this.order.reduce((groups, key) => {
40+
groups.push(this.groups[key]);
41+
return groups;
42+
}, []);
4543
},
44+
},
4645
47-
methods: {
48-
/*
49-
* Set the displayed layouts from the field's current value
50-
*/
51-
populateGroups() {
52-
this.order.splice(0, this.order.length);
53-
this.groups = {};
46+
methods: {
47+
/*
48+
* Set the displayed layouts from the field's current value
49+
*/
50+
populateGroups() {
51+
this.order.splice(0, this.order.length);
52+
this.groups = {};
5453
55-
for (var i = 0; i < this.value.length; i++) {
56-
this.addGroup(
57-
this.getLayout(this.value[i].layout),
58-
this.value[i].attributes,
59-
this.value[i].key,
60-
this.field.collapsed,
61-
this.value[i].title_data
62-
);
63-
}
64-
},
54+
for (var i = 0; i < this.value.length; i++) {
55+
this.addGroup(
56+
this.getLayout(this.value[i].layout),
57+
this.value[i].attributes,
58+
this.value[i].key,
59+
this.field.collapsed,
60+
this.value[i].title_data,
61+
);
62+
}
63+
},
6564
66-
/**
67-
* Retrieve layout definition from its name
68-
*/
69-
getLayout(name) {
70-
if (!this.layouts) return;
71-
return this.layouts.find((layout) => layout.name == name);
72-
},
65+
/**
66+
* Retrieve layout definition from its name
67+
*/
68+
getLayout(name) {
69+
if (!this.layouts) return;
70+
return this.layouts.find((layout) => layout.name == name);
71+
},
7372
74-
/**
75-
* Append the given layout to flexible content's list
76-
*/
77-
addGroup(layout, attributes, key, collapsed, resolved_title) {
78-
if (!layout) return;
73+
/**
74+
* Append the given layout to flexible content's list
75+
*/
76+
addGroup(layout, attributes, key, collapsed, resolved_title) {
77+
if (!layout) return;
7978
80-
collapsed = collapsed || false;
79+
collapsed = collapsed || false;
8180
82-
let fields =
83-
attributes || JSON.parse(JSON.stringify(layout.fields)),
84-
group = new Group(
85-
layout.name,
86-
layout.title,
87-
fields,
88-
this.field,
89-
key,
90-
collapsed,
91-
layout,
92-
resolved_title
93-
);
81+
let fields = attributes || JSON.parse(JSON.stringify(layout.fields)),
82+
group = new Group(
83+
layout.name,
84+
layout.title,
85+
fields,
86+
this.field,
87+
key,
88+
collapsed,
89+
layout,
90+
resolved_title,
91+
);
9492
95-
this.groups[group.key] = group;
96-
this.order.push(group.key);
97-
},
93+
this.groups[group.key] = group;
94+
this.order.push(group.key);
9895
},
96+
},
9997
};
10098
</script>

0 commit comments

Comments
 (0)