Hello,
I hope every one is doing great.
I have problem that I stack with it for a week. I hope if can any one help me and thank very much in advance
first
I want to display cards based on columns. something like Kanban dashboard
I create dynamically button for each card that coming from list unknown number.
** the problem I could not know which button has been clicked
I used ALL, it got me all buttons id therefore I could not know which button has been clicked I think MATCH dose not apply to my problem
there is the code and i hope someone has solution
from datetime import datetime
from os import terminal_size
from typing import Match
import dash # (version 1.0.0)
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
import plotly.offline as py # (version 4.4.1)
from app import app
from dash.dependencies import Input, Output, State, MATCH, ALL, ALLSMALLER
from dash_core_components.Store import Store
from Model import modelV2 as model
from Model.main import Base, engine, session
from sqlalchemy.sql.expression import and_, or_
Base.metadata.create_all(bind=engine, checkfirst=True)
project = session.query(model.Project).all()
dropDownPr = dcc.Dropdown(
options=[{'label': b.name, 'value': b.id} for b in project],
value=[b.id for b in project],
id='dropDownPr',
placeholder="Select a Items")
layout = html.Div([
dropDownPr,
# modal,
html.Hr(),
html.Div(id='groupedDash',
style={
'display': 'flex',
'flex-direction': 'row',
'flex-wrap': 'nowrap',
'justify-content': 'space-evenly'}),
html.Hr(),
html.Div( id='disp_button', children=[]),
html.Button('Add', id='btne'),
html.Br(),
dcc.Store(id='localk', storage_type='local'),
html.Div(id='localkOut'),
])
@app.callback(
[Output('groupedDash', 'children'),
Output('localk', 'data'),
Output('localkOut', 'children'),
# Output({"index": MATCH, "type": "value"}, "value"),
],
[
Input('dropDownPr', 'value'),
# Input({"index": MATCH, "type": "done"}, "id"),
# Input('groupedDash', 'n_clicks'),
])
def display_dropdowns(project):
print('nc')
# print(nc)
statusPrr = session.query(model.Status).filter_by(project_id=project)
headersList = []
listList = []
n_clicks = 0
query = ''' SELECT Task.*,Status.name AS status_name FROM Task INNER JOIN Status ON Task.status_id = Status.id'''
tasks = pd.read_sql_query(query, engine)
for oo in statusPrr:
header = html.Div(
children=[
html.Div(oo.name, style={
'text-align': 'center'}),
], style={
'justify-content': 'space-evenly'})
headersList.append(header)
cominingData = oo.name
rslt_df = tasks[(tasks['project_id'] == project) &
(tasks['status_name'] == cominingData)]
if len(rslt_df.index) == 0:
card_content = dbc.Col(
children=[
html.Div(html.H4('no data'), style={
'text-align': 'center'})
], style={
'justify-content': 'space-evenly'})
else:
subCard = []
# rfrf=row['id']
for i, row in rslt_df.iterrows():
n_clicks=0
card_content_sub = dbc.Row([
dbc.Row(
dbc.Card(
[
dbc.CardBody(
[
html.H4(row['name'],
className="card-title"),
html.P(row['desc'],
className="card-text",
),
html.Button(
"Edite", id=row['id']),
# "Edite", id={"index": row['id'], "type": "done"}),
html.Div(row['id'],id=row['id'])
]
),
],
),
style={
'display': 'flex',
'flex-direction': 'row',
'box-shadow': '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)',
'margin': '7px',
'flex-wrap': 'nowrap',
'justify-content': 'space-evenly'}
)])
subCard.append(card_content_sub)
card_content = dbc.Col([
dbc.Row(subCard,
style={
'display': 'flex',
'flex-direction': 'column',
'margin': '0px',
'justify-content': 'space-evenly'}
)])
listList.append(card_content)
cards = html.Div(
[
dbc.Row(headersList,
style={
'display': 'flex',
'flex-direction': 'row',
'flex-wrap': 'nowrap',
'justify-content': 'space-evenly'}
),
html.Hr(),
html.Hr(),
dbc.Row(listList,
style={
'display': 'flex',
'flex-direction': 'row',
'flex-wrap': 'nowrap',
'justify-content': 'space-evenly'}
),
html.Div('hereeeeeeeeeeeeeeeeeeeeeeeee', id='dynamicOutputOt')
])
js = rslt_df.to_json(orient = 'columns')
return [cards], js, js
thank you very much​:tulip: