x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<div class="loopui-assign-component"> <div class="loopui-assign-component__left"> <turbo-frame id="tmp__assign__left"> <div class="loopui-assign-section"> <div class="loopui-assign-section__top-wrapper"> <div class="lui-title_description lui-title_description--small"> <span class="lui-title_description__title"> Assigned Users </span> </div> </div> <div class="loopui-assign-section__wrapper" data-controller="assign-search"> <div class="loopui-assign-section__elements-section" data-assign-search-target="result"> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/magnamnammaiores.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Marlys Rempel</div> <span id="lui-token_7821441232" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">0 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> marlys.rempel@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=4&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/rerumomnisest.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Rep. Titus Medhurst</div> <span id="lui-token_2902670536" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">2 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> medhurst.rep.titus@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=5&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/corrupticumvelit.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Pinkie McLaughlin</div> <span id="lui-token_1475808767" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">8 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> pinkie.mclaughlin@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=6&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/oditetquaerat.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Edison Rau</div> <span id="lui-token_1514812509" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">4 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> edison.rau@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=7&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/beataerationefacilis.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Lamar Bechtelar</div> <span id="lui-token_9508286743" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">0 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> lamar.bechtelar@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=9&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/repellendusvelinventore.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Arie O'Connell</div> <span id="lui-token_5362092628" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">7 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> arie_oconnell@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=10&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/accusantiumeaab.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Fr. Luanne Wolff</div> <span id="lui-token_65226010" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">7 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> wolff.fr.luanne@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="delete" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=12&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-minus text-gray-900"></i> </div> </a></div> </div> </div> </div> </turbo-frame> </div> <div class="loopui-assign-component__right"> <turbo-frame id="tmp__assign__right"> <div class="loopui-assign-section"> <div class="loopui-assign-section__top-wrapper"> <div class="lui-title_description lui-title_description--small"> <span class="lui-title_description__title"> Unassigned Users </span> </div> </div> <div class="loopui-assign-section__wrapper" data-controller="assign-search"> <div class="loopui-assign-section__elements-section" data-assign-search-target="result"> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/consequaturenimquo.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Laurence Mosciski</div> <span id="lui-token_3805063338" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">3 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> mosciski.laurence@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="put" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=1&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-plus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/consequaturquibusdamsaepe.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Robbie Abshire</div> <span id="lui-token_2807543204" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">2 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> abshire_robbie@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="put" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=2&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-plus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/nobisquidemexercitationem.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Demetrius Emmerich PhD</div> <span id="lui-token_9974911290" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">5 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> emmerich_phd_demetrius@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="put" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=3&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-plus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/quisaprovident.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Frankie Mante</div> <span id="lui-token_9608590673" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">1 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> frankie.mante@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="put" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=8&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-plus text-gray-900"></i> </div> </a></div> <div class="relative"> <div class="loopui-assign-card"> <div class="loopui-assign-card__image-wrapper"> <img class="loopui-assign-card__image" src="https://robohash.org/aspernaturomnisfacere.png?size=300x300&set=set1" /> </div> <div class="loopui-assign-card__info-wrapper"> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__title">Elmer Bauch</div> <span id="lui-token_1680139525" class="lui-token lui-entity-token lui-entity-token-general lui-tag-token" style="color: #b53c00; border-color: #e9c5b3;"> <i class="lui-token__icon fa-regular fa-regular fa-tag"></i> <span class="lui-token__text">5 user groups</span> <div class="lui-token__actions"> </div> </span> </div> <div class="loopui-assign-card__row"> <div class="loopui-assign-card__description"> <i class="fa-regular fa-envelope"></i> bauch.elmer@loopos.com </div> </div> </div> </div> <a data-turbo-frame="tmp__assign__left" class="loopui-center-buttn-temp" rel="nofollow" data-method="put" href="/loopos_ui/assign/unassign_user_to_user_group?data=%7B%22user_group%22%3A%7B%7D%2C%22users%22%3A%5B%7B%22id%22%3A1%2C%22name%22%3A%22Laurence+Mosciski%22%2C%22email%22%3A%22mosciski.laurence%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A3%7D%2C%7B%22id%22%3A2%2C%22name%22%3A%22Robbie+Abshire%22%2C%22email%22%3A%22abshire_robbie%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A3%2C%22name%22%3A%22Demetrius+Emmerich+PhD%22%2C%22email%22%3A%22emmerich_phd_demetrius%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A4%2C%22name%22%3A%22Marlys+Rempel%22%2C%22email%22%3A%22marlys.rempel%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A5%2C%22name%22%3A%22Rep.+Titus+Medhurst%22%2C%22email%22%3A%22medhurst.rep.titus%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A2%7D%2C%7B%22id%22%3A6%2C%22name%22%3A%22Pinkie+McLaughlin%22%2C%22email%22%3A%22pinkie.mclaughlin%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A8%7D%2C%7B%22id%22%3A7%2C%22name%22%3A%22Edison+Rau%22%2C%22email%22%3A%22edison.rau%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A4%7D%2C%7B%22id%22%3A8%2C%22name%22%3A%22Frankie+Mante%22%2C%22email%22%3A%22frankie.mante%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A1%7D%2C%7B%22id%22%3A9%2C%22name%22%3A%22Lamar+Bechtelar%22%2C%22email%22%3A%22lamar.bechtelar%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A0%7D%2C%7B%22id%22%3A10%2C%22name%22%3A%22Arie+O%27Connell%22%2C%22email%22%3A%22arie_oconnell%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%2C%7B%22id%22%3A11%2C%22name%22%3A%22Elmer+Bauch%22%2C%22email%22%3A%22bauch.elmer%40loopos.com%22%2C%22assigned%22%3Afalse%2C%22user_groups_count%22%3A5%7D%2C%7B%22id%22%3A12%2C%22name%22%3A%22Fr.+Luanne+Wolff%22%2C%22email%22%3A%22wolff.fr.luanne%40loopos.com%22%2C%22assigned%22%3Atrue%2C%22user_groups_count%22%3A7%7D%5D%7D&resource_id=11&turbo_frame=tmp__assign__left&turbo_frame_prefix=tmp"> <div class="w-8 h-8 p-3 bg-gray-50 rounded-md border border-zinc-200 justify-center items-center gap-2 inline-flex"> <i class="fa-regular fa-plus text-gray-900"></i> </div> </a></div> </div> </div> </div> </turbo-frame> </div></div>Assign Component
The Assign component allows users to connect two types of resources (e.g., users, scopes, or other entities) to a main resource in either a two-way or three-way relationship. This component is useful in cases where users need to manage relationships, dependencies, or roles associated with a primary entity, such as assigning permissions or linking users to partners.
Related components
| Used Components | Components where is Used |
|---|---|
| None | None |
Usage rules
✅ Do
- Use in interfaces where multi-resource relationships need to be managed
❌ Don't
- Don't use if a simple one-to-one relationship suffices
- Don't overload with too many resource types at once
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<% user_group = OpenStruct.new() users = (1..(10 + (5 * rand()).floor)).map do |index| name = Faker::Name.name OpenStruct.new( id: index, name: name, email: Faker::Internet.email(name: name, domain: "loopos.com"), assigned: [true, false].sample, user_groups_count: (rand() * 10).floor, ) end assigned_users = users.filter { |u| u.assigned } unassigned_users = users.filter { |u| !u.assigned } url_helpers = Rails.application.routes.url_helpers current_data = { user_group: user_group.marshal_dump, users: users.map(&:marshal_dump) } turbo_frame_prefix = "tmp"%><%= render LooposUi::Assign::AssignComponent.new do |component| %> <% component.with_left_section do %> <%# Turbo frames will be necessary to be able to replace sections %> <%= turbo_frame_tag "#{turbo_frame_prefix}__assign__left" do %> <%= render LooposUi::Assign::AssignSection.new( main_resource: user_group, card: "assign_preview/user_card", title: "Assigned Users", assigned: assigned_users, edit_mode: true, assign_mode: true, single_side: true, unassign_path: ->(args = {}) { url_helpers.loopos_ui_assign_unassign_user_to_user_group_path(**args.merge(data: current_data.to_json)) }, turbo_frame_prefix: turbo_frame_prefix, ) %> <% end %> <% end %> <% component.with_right_section do %> <%# Turbo frames will be necessary to be able to replace sections %> <%= turbo_frame_tag "#{turbo_frame_prefix}__assign__right" do %> <%= render LooposUi::Assign::AssignSection.new( main_resource: user_group, card: "assign_preview/user_card", title: "Unassigned Users", unassigned: unassigned_users, edit_mode: true, assign_mode: true, assign_path: ->(args = {}) { url_helpers.loopos_ui_assign_unassign_user_to_user_group_path(**args.merge(data: current_data.to_json)) }, single_side: true, turbo_frame_prefix: turbo_frame_prefix, ) %> <% end %> <% end %><% end %>No notes provided.
No params configured.
Assign Component
The Assign component allows users to connect two types of resources (e.g., users, scopes, or other entities) to a main resource in either a two-way or three-way relationship. This component is useful in cases where users need to manage relationships, dependencies, or roles associated with a primary entity, such as assigning permissions or linking users to partners.
Arguments
| Property | Default | Description |
|---|---|---|
| None |
Slots
left_section - Should be a LooposUi::Assign::AssignSection.
right_section - Should be a LooposUi::Assign::AssignSection.
AssignSection
| Property | Default | Description |
|---|---|---|
main_resource |
`` | The resource that this relation affects. |
card |
`` | The path of the partial to use on the section. |
title |
`` | Title of the section. |
assigned |
`` | Section elements that are assigned. |
unassigned |
`` | Section elements that are not assigned. |
edit_mode |
`` | Flag to allow editing the element (changes the other section). |
assign_mode |
`` | Flag to allow assigning/unassigning elements. |
single_side |
`` | Single side means that assigned elements are on the left side and unassigned on the right side. Multiple side means that different sides have different resources. |
edit_path |
`` | URL for editing the selected element. |
assign_path |
`` | URL for assigning the selected element. |
unassign_path |
`` | URL for unassigning the selected element. |
search_path |
`` | URL for searching unassigned elements. |
turbo_frame_prefix |
`` | Prefix for turbo frame. |
Usage process
Single side
Single side is used for when the relation is 2-way. This means that there is a Main resource and a Secondary resource, and we can assign/unassign the secondary resources to the Main resource.
Existing example for single side is the Management tab on Core's Protocol show page.
Multiple side (not single side)
Multiple side is used for when the relation is 3-way. This means that there is a Main resource and two secondary resources (A and B). We can assign/unassign As and Bs. to the Main resource. We can also edit As, which corresponds to assigning/unassigning Bs to the Main resource in relation to the selected A, and vice-versa (editing Bs, assigning/unassigning As to Main).
Existing example for multiple side is the User Scopes tab on Manager's User show page.
Implementation process
We have implemented the Assign Component for the Usage preview, so you can base your work on this, but we have limitations on Lookbook that do not allow us to do it fully:
- The search is not possible
- Turbo is not working properly, so all our endpoints are GET, but should also be PUT and DELETE
This means that you should try to use the examples for each type so that you have better examples of how to implement.