Skip to content

Commit 70833fd

Browse files
devansh-webkuldevansh-webkul
authored
Merge pull request #1621 from suraj-webkul/issue#1609
Issue #1609 fixed.
2 parents 7e1ab0a + 9ff230f commit 70833fd

File tree

6 files changed

+180
-42
lines changed

6 files changed

+180
-42
lines changed

‎packages/Webkul/Admin/src/DataGrids/Contact/PersonDataGrid.php

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -64,24 +64,6 @@ public function prepareColumns(): void
6464
'sortable' => true,
6565
'filterable' => true,
6666
'searchable' => true,
67-
'closure' => function ($row) {
68-
[$bgColorClass, $textColorClass] = $this->generateRandomColorClasses();
69-
70-
$nameParts = explode(' ', $row->person_name);
71-
72-
$sortName = '';
73-
74-
if (count($nameParts) >= 2) {
75-
$sortName = ($nameParts[0][0].$nameParts[1][0]);
76-
} elseif (count($nameParts) === 1) {
77-
$sortName = substr($nameParts[0], 0, 2);
78-
}
79-
80-
return "<div class='flex items-center gap-3'>
81-
<div class='$bgColorClass $textColorClass flex h-9 w-9 cursor-pointer items-center justify-center rounded-full text-sm'>$sortName</div>
82-
<p class='text-sm text-black dark:bg-gray-900 dark:text-gray-300'>$row->person_name</p>
83-
</div>";
84-
},
8567
]);
8668

8769
$this->addColumn([
@@ -91,9 +73,7 @@ public function prepareColumns(): void
9173
'sortable' => false,
9274
'filterable' => true,
9375
'searchable' => true,
94-
'closure' => function ($row) {
95-
return collect(json_decode($row->emails, true) ?? [])->pluck('value')->join(', ');
96-
},
76+
'closure' => fn ($row) => collect(json_decode($row->emails, true) ?? [])->pluck('value')->join(', '),
9777
]);
9878

9979
$this->addColumn([
@@ -177,18 +157,4 @@ public function prepareMassActions(): void
177157
]);
178158
}
179159
}
180-
181-
/**
182-
* Generate random color classes.
183-
*/
184-
public function generateRandomColorClasses(): array
185-
{
186-
return collect([
187-
['bg-orange-100', 'text-orange-800'],
188-
['bg-red-100', 'text-red-800'],
189-
['bg-green-100', 'text-green-800'],
190-
['bg-blue-100', 'text-blue-800'],
191-
['bg-purple-100', 'text-purple-800'],
192-
])->random();
193-
}
194160
}

‎packages/Webkul/Admin/src/Resources/views/contacts/persons/create.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class="primary-button"
4747
</div>
4848

4949
<!-- Form fields -->
50-
<div class="box-shadow rounded-lg border border-gray-200 bg-white p-4 dark:bg-gray-900">
50+
<div class="box-shadow rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
5151
{!! view_render_event('admin.persons.create.form_controls.before') !!}
5252

5353
<x-admin::attributes

‎packages/Webkul/Admin/src/Resources/views/contacts/persons/index.blade.php

Lines changed: 176 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,183 @@ class="primary-button"
3636

3737
{!! view_render_event('admin.persons.index.datagrid.before') !!}
3838

39-
<x-admin::datagrid :src="route('admin.contacts.persons.index')">
40-
<!-- DataGrid Shimmer -->
39+
<v-persons>
40+
<!-- Datagrid shimmer -->
4141
<x-admin::shimmer.datagrid />
42-
</x-admin::datagrid>
42+
</v-persons>
4343

4444
{!! view_render_event('admin.persons.index.datagrid.after') !!}
4545
</div>
46-
</x-admin::layouts>
46+
47+
@pushOnce('scripts')
48+
<script
49+
type="text/x-template"
50+
id="v-persons-template"
51+
>
52+
<x-admin::datagrid
53+
src="{{ route('admin.contacts.persons.index') }}"
54+
:isMultiRow="true"
55+
ref="datagrid"
56+
>
57+
<template #header="{
58+
isLoading,
59+
available,
60+
applied,
61+
selectAll,
62+
sort,
63+
performAction
64+
}">
65+
<template v-if="isLoading">
66+
<x-admin::shimmer.datagrid.table.head :isMultiRow="true" />
67+
</template>
68+
69+
<template v-else>
70+
<div class="row grid grid-cols-[.1fr_.2fr_.2fr_.2fr_.2fr_.2fr] grid-rows-1 items-center border-b px-4 py-2.5 dark:border-gray-800">
71+
<div
72+
class="flex select-none items-center gap-2.5"
73+
v-for="(columnGroup, index) in [['id'], ['person_name'], ['emails'], ['contact_numbers'], ['organization']]"
74+
>
75+
<label
76+
class="flex w-max cursor-pointer select-none items-center gap-1"
77+
for="mass_action_select_all_records"
78+
v-if="! index"
79+
>
80+
<input
81+
type="checkbox"
82+
name="mass_action_select_all_records"
83+
id="mass_action_select_all_records"
84+
class="peer hidden"
85+
:checked="['all', 'partial'].includes(applied.massActions.meta.mode)"
86+
@change="selectAll"
87+
>
88+
89+
<span
90+
class="icon-checkbox-outline cursor-pointer rounded-md text-2xl text-gray-600 dark:text-gray-300"
91+
:class="[
92+
applied.massActions.meta.mode === 'all' ? 'peer-checked:icon-checkbox-select peer-checked:text-brandColor' : (
93+
applied.massActions.meta.mode === 'partial' ? 'peer-checked:icon-checkbox-multiple peer-checked:text-brandColor' : ''
94+
),
95+
]"
96+
>
97+
</span>
98+
</label>
99+
100+
<p class="text-gray-600 dark:text-gray-300">
101+
<span class="[&>*]:after:content-['_/_']">
102+
<template v-for="column in columnGroup">
103+
<span
104+
class="after:content-['/'] last:after:content-['']"
105+
:class="{
106+
'font-medium text-gray-800 dark:text-white': applied.sort.column == column,
107+
'cursor-pointer hover:text-gray-800 dark:hover:text-white': available.columns.find(columnTemp => columnTemp.index === column)?.sortable,
108+
}"
109+
@click="
110+
available.columns.find(columnTemp => columnTemp.index === column)?.sortable ? sort(available.columns.find(columnTemp => columnTemp.index === column)): {}
111+
"
112+
>
113+
@{{ available.columns.find(columnTemp => columnTemp.index === column)?.label }}
114+
</span>
115+
</template>
116+
</span>
117+
118+
<i
119+
class="align-text-bottom text-base text-gray-800 dark:text-white ltr:ml-1.5 rtl:mr-1.5"
120+
:class="[applied.sort.order === 'asc' ? 'icon-down-stat': 'icon-up-stat']"
121+
v-if="columnGroup.includes(applied.sort.column)"
122+
></i>
123+
</p>
124+
</div>
125+
</div>
126+
</template>
127+
</template>
128+
129+
<template #body="{
130+
isLoading,
131+
available,
132+
applied,
133+
selectAll,
134+
sort,
135+
performAction
136+
}">
137+
<template v-if="isLoading">
138+
<x-admin::shimmer.datagrid.table.body :isMultiRow="true" />
139+
</template>
140+
141+
<template v-else>
142+
<div
143+
class="row grid grid-cols-[.1fr_.2fr_.2fr_.2fr_.2fr_.2fr] grid-rows-1 border-b px-4 py-2.5 transition-all hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-950"
144+
v-for="record in available.records"
145+
>
146+
<!-- Mass Action and Person ID. -->
147+
<div class="flex items-center gap-2.5">
148+
<input
149+
type="checkbox"
150+
:name="`mass_action_select_record_${record.id}`"
151+
:id="`mass_action_select_record_${record.id}`"
152+
:value="record.id"
153+
class="peer hidden"
154+
v-model="applied.massActions.indices"
155+
>
156+
157+
<label
158+
class="icon-checkbox-outline peer-checked:icon-checkbox-select cursor-pointer rounded-md text-2xl text-gray-600 peer-checked:text-brandColor dark:text-gray-300"
159+
:for="`mass_action_select_record_${record.id}`"
160+
></label>
161+
162+
<div class="flex flex-col gap-1.5 dark:text-gray-300">
163+
@{{ record.id }}
164+
</div>
165+
</div>
166+
167+
<!-- Name -->
168+
<div class="flex items-center gap-1.5 dark:text-gray-300">
169+
<x-admin::avatar ::name="record.person_name" />
170+
171+
@{{ record.person_name }}
172+
</div>
173+
174+
<!-- Emails -->
175+
<p class="flex items-center dark:text-gray-300">
176+
@{{ record.emails }}
177+
</p>
178+
179+
<!-- Contact Numbers -->
180+
<p class="flex items-center dark:text-gray-300">
181+
@{{ record.contact_numbers }}
182+
</p>
183+
184+
<!-- Organization -->
185+
<p class="flex items-center dark:text-gray-300">
186+
@{{ record.organization }}
187+
</p>
188+
189+
<!-- Actions -->
190+
<div class="flex items-center justify-end gap-x-4">
191+
<div class="flex items-center gap-1.5">
192+
<p
193+
class="place-self-end"
194+
v-if="available.actions.length"
195+
>
196+
<span
197+
class="cursor-pointer rounded-md p-1.5 text-2xl transition-all hover:bg-gray-200 dark:hover:bg-gray-800 max-sm:place-self-center"
198+
:class="action.icon"
199+
v-text="! action.icon ? action.title : ''"
200+
v-for="action in record.actions"
201+
@click="performAction(action)"
202+
></span>
203+
</p>
204+
</div>
205+
</div>
206+
</div>
207+
</template>
208+
</template>
209+
</x-admin::datagrid>
210+
</script>
211+
212+
<script type="module">
213+
app.component('v-persons', {
214+
template: '#v-persons-template',
215+
});
216+
</script>
217+
@endPushOnce
218+
</x-admin::layouts>

‎public/admin/build/assets/app-09709140.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎public/admin/build/assets/app-2fb722dd.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/admin/build/manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@
220220
"src": "node_modules/vue-cal/dist/i18n/zh-hk.es.js"
221221
},
222222
"src/Resources/assets/css/app.css": {
223-
"file": "assets/app-09709140.css",
223+
"file": "assets/app-2fb722dd.css",
224224
"isEntry": true,
225225
"src": "src/Resources/assets/css/app.css"
226226
},

0 commit comments

Comments
 (0)