user interface - relacionadas - Patrones de GUI para editar datos con una relación de muchos a muchos

relacion muchos a muchos laravel (4)

A menudo me encuentro con una situación en la que necesito encontrar una GUI para editar datos que tienen una relación: m. Estoy buscando ideas GUI fáciles de usar.

[table1] | /|/ [table2] /|/ | [table3]

Por lo general, la GUI se asemeja a algo así:

Grid that shows all items from table1

Agregue el elemento de la tabla 3 ... _{(muestra la ventana modal con los elementos de la tabla 3)}

Grid that shows all items from table3

Después de que el usuario eligió un elemento de tabla3, agregué una nueva fila a la tabla2 y actualicé las cuadrículas.

Desventajas:

Solo puede agregar elementos de tabla3 a tabla1, y no al revés;
Solo puede navegar por los elementos de la tabla1 y ver los elementos relacionados de la tabla3;
Necesito tener una grilla filtrada de elementos de tabla3, y una similar para elegir nuevos elementos;

Mi pregunta:

¿Alguien sabe una mejor manera de examinar visualmente y editar datos que tienen una relación: m? ¿O algún patrón agradable que pueda "robar" de los paquetes de software existentes?

Aquí hay una posible solución, dada en la forma de una relación m: m de empleados a proyectos. Cada empleado puede trabajar en muchos proyectos, cada proyecto puede involucrar a muchos empleados.

De izquierda a derecha, muestra lo siguiente:

Un panel que muestra los detalles del empleado seleccionado actualmente.

Una lista de todos los empleados, donde cada elemento de la lista muestra el nombre del empleado como un enlace o botón seleccionable (para mostrar los detalles en el panel de detalles). A la cabeza de la lista hay un botón para alternar que filtra la lista de proyectos solo a aquellos asociados con el empleado seleccionado actualmente. Al pie de la lista hay un botón para agregar un nuevo empleado, que muestra un panel de detalles vacío listo para aceptar la entrada.

Un espacio vertical en el centro con un solo botón "Enlace" que permite al usuario vincular al empleado seleccionado actualmente con el proyecto seleccionado actualmente. Al hacer clic en este botón, se abrirá un cuadro de diálogo que permite al usuario ingresar detalles del enlace (es decir, durante cuánto tiempo se le asigna al empleado, qué papel jugará el usuario eployee, etc.).

Una lista de todos los proyectos, donde cada elemento de la lista muestra el nombre del proyecto como un enlace o botón en el que se puede hacer clic (para mostrar los detalles en el panel de detalles). En la cabecera de la lista hay un botón para alternar que filtra la lista de empleados a solo aquellos asociados con el proyecto seleccionado actualmente. Al pie de la lista hay un botón para agregar un nuevo proyecto, que muestra un panel de detalles vacío listo para aceptar la entrada.

Un panel que muestra los detalles del proyecto seleccionado actualmente.

Obviamente, tendrías que limitar el tamaño de los paneles de detalles, tal vez solo mostrando los detalles relevantes para la relación m: m. Incluso puede agregar un botón en el panel de detalles para abrir una ventana emergente más detallada, o puede eliminar el panel de detalles si está interesado principalmente en administrar los enlaces. Esta UI funcionaría muy bien en pantallas de aspecto ancho.

HTH! Klay

Esta es una vieja pregunta, pero como me enfrenté al mismo problema nuevamente ahora, se me ocurrió esto:

2 cuadrículas, una al lado de la otra, que muestran los elementos de la tabla 1 y la tabla 3, con paginación, si es necesario.
Ambas grillas tienen una barra de herramientas superior que permite filtrar por un valor de la tabla opuesta. Dependiendo de sus datos y su marco de trabajo de interfaz gráfica de usuario, puede ser una cuadrícula desplegable desplegable o una entrada de texto de autocompletar.
Ambas grillas tienen casillas de verificación (última o primera columna)
Ambas rejillas contienen un botón / acción en línea en cada fila, para filtrar automáticamente la otra grilla en ese ítem.
Solo se muestra / marca una cuadrícula como "activa" o "maestra" en un momento dado (para dejar en claro al usuario, a qué lado de la relación están viendo / controlando).

Cuando selecciona un elemento en la grilla1, la grilla1 se activa y todos los elementos en la otra grilla tienen casillas marcadas si están asociadas con el ítem seleccionado.

A la inversa, cuando selecciona un elemento en grid2 (table3), grid2 se activa, todas las casillas en grid2 están en blanco (o atenuadas) y las casillas en grid1 indican una asociación con el elemento seleccionado.

La parte de filtrado se hace más fácil según el botón en línea descrito en el paso 4.

Creo que esta solución satisfaría todos sus requisitos.

Permítanme usar el ejemplo de relación de One Customer Has 0 or Many Orders. Si el usuario desea ver los Pedidos de un formulario particular, sugeriría el siguiente Caso de uso:

El usuario hace clic en el enlace Buscar cliente:
El sistema presenta el Formulario de búsqueda de cliente que tiene los criterios de búsqueda para filtrar
El usuario llena los criterios de búsqueda y pulsa el botón Buscar
El sistema presenta una lista del cliente ... por los criterios coincidentes
El usuario pulsa el botón Abrir delante de un cliente
El sistema presenta al cliente (en una página totalmente nueva con "Volver al botón de búsqueda")

La nueva página tiene 3 paneles: 1 panel para Detalles del cliente, segundo panel para la lista de pedidos y 3 paneles que se completa cuando se hace clic en un pedido. Si el número de Órdenes es mayor que 20, pondría un enlace de Órdenes de Búsqueda que guíe a un Formulario de Búsqueda completamente nuevo para Órdenes con un ID de Cliente predefinido arreglado con el ID de Cliente actual seleccionado.

Solución 1

Si los conjuntos de datos no son demasiado grandes, use una tabla y permita que los usuarios coloquen verificaciones en las celdas (la tabla 1 es el eje X y la tabla 3 el eje Y).

Probablemente pueda hacer esto para conjuntos de datos table1 / 3 más grandes, siempre y cuando permita a los usuarios filtrar o limitar qué valores se muestran en los ejes xey.

Solución 2

Para citar de esta página , "Una relación de muchos a muchos es realmente dos relaciones de uno a muchos con una tabla de unión / enlace".

Como tal, puede, como una solución, simplemente tomar su propia solución y resolver sus primeras 2 desventajas teniendo pantallas / cuadros de diálogo para ir a la tabla 1 => 3 y 3 => 1.

No es una solución perfecta, pero al menos proporciona toda la funcionalidad necesaria

Solución 3

Algo similar a tu propia solución:

Muestre una tabla basada en la tabla 1, con:
B. col1 que contiene elementos de tabla1
C. col2 que contiene una lista de todos los elementos de la tabla 3 ya asociada con este elemento de la tabla1.
La lista puede ser horizontal si normalmente hay pocos elementos asociados, o vertical (desplazable) si horizontal a demasiado ancha.
La parte importante es que cada elemento mostrado de la tabla 3 tiene un ícono de "eliminar" (x) al lado para permitir su eliminación rápidamente.
Permita elegir a qué elemento de la tabla1 desea agregar asignaciones.
Hay 2 formas de hacerlo: agregue una casilla de verificación a cada fila de la tabla, y tenga un botón etiquetado como "agregar relaciones con las filas seleccionadas" (la redacción necesita mejoras) o simplemente tenga una tercera columna en la tabla que contenga botón / enlace para agregar relaciones a esa fila individual.
El primero es una buena idea si es probable que el usuario a menudo agregue exactamente el mismo conjunto de elementos de la tabla3 a varias filas de la tabla1.
Cuando se hace clic en el botón / enlace "Agregar", se muestra una lista filtrable de elementos múltiples de la tabla 3, con el botón "agregar selección".
Como en su solución (vea mi # 2), esto es simétrico, por lo que debe implementar una interfaz de usuario espejo para mapear de table3 a table1 si es necesario.