liquid_feedback_frontend
view app/main/initiative/_suggestions.lua @ 1791:4edec387855f
Better handling of translation strings with links
| author | bsw | 
|---|---|
| date | Wed Oct 20 16:04:30 2021 +0200 (2021-10-20) | 
| parents | 048d6bae2855 | 
| children | fe28be5403e2 | 
 line source
     1 local initiative = param.get("initiative", "table")
     2 local direct_supporter
     3 if app.session.member_id then
     4   direct_supporter = initiative.issue.member_info.own_participation and initiative.member_info.supported
     5 end
     8 if direct_supporter then
     9   ui.tag{ tag = "div", attr = { id = "rating_dialog", class = "hidden" }, content = function ()
    11     local opinion = {}
    12     ui.form { 
    13       attr = { onsubmit = "updateOpinion(); return false;" },
    14       module = "opinion", action = "update",
    15       routing = { default = {
    16         mode = "redirect", 
    17         module = "initiative", view = "show", id = initiative.id
    18       } },
    19       content = function ()
    20         ui.field.hidden{ attr = { id = "rating_suggestion_id" }, name = "suggestion_id" }        
    21         ui.container{ attr = { class = "opinon-question" }, content = _"Should the initiator implement this suggestion?" }
    22         ui.container { content = function ()
    24           local options = {
    25             { degree =  2, label = _"must" },
    26             { degree =  1, label = _"should" },
    27             { degree =  0, label = _"neutral" },
    28             { degree = -1, label = _"should not" },
    29             { degree = -2, label = _"must not" },
    30           }
    32           for i, option in ipairs(options) do
    33             ui.tag{
    34               tag = "label", 
    35               attr = { 
    36                 id = "rating_degree" .. option.degree,
    37                 class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
    38               }, 
    39               ["for"] = "rating_degree" .. option.degree, 
    40               content = function()
    41                 ui.tag{
    42                   tag = "input",
    43                   attr = {
    44                     class = "mdl-radio__button",
    45                     type = "radio",
    46                     name = "degree",
    47                     value = option.degree
    48                   }
    49                 }
    50                 ui.tag{
    51                   attr = { class = "mdl-radio__label" },
    52                   content = option.label
    53                 }
    54               end
    55             }
    56             slot.put("     ")
    57           end
    58         end }
    60         slot.put("<br />")
    62         ui.container{ attr = { class = "opinon-question" }, content = _"Did the initiator implement this suggestion?" }
    63         ui.container { content = function ()
    65           local options = {
    66             { degree = "false", id = "notfulfilled", label = _"No (not yet)" },
    67             { degree = "true", id = "fulfilled", label = _"Yes, it's implemented" },
    68           }
    70           for i, option in ipairs(options) do
    71             ui.tag{
    72               tag = "label", 
    73               attr = {
    74                 id = "rating_" .. option.id,
    75                 class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
    76               }, 
    77               ["for"] = "rating_" .. option.id, 
    78               content = function()
    79                 ui.tag{
    80                   tag = "input",
    81                   attr = {
    82                     class = "mdl-radio__button",
    83                     type = "radio",
    84                     name = "fulfilled",
    85                     value = option.degree,
    86                   }
    87                 }
    88                 ui.tag{
    89                   attr = { class = "mdl-radio__label" },
    90                   content = option.label
    91                 }
    92               end
    93             }
    94             slot.put("     ")
    95           end
    96         end }
    98         slot.put("<br />")
   100         ui.tag{
   101           tag = "input",
   102           attr = {
   103             type = "submit",
   104             class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored",
   105             value = _"publish my rating"
   106           },
   107           content = ""
   108         }
   110         slot.put("   ")
   112         ui.tag{
   113           tag = "input",
   114           attr = {
   115             onclick = "document.getElementById('rating_dialog').classList.add('hidden'); return false;",
   116             type = "submit",
   117             class = "mdl-button mdl-js-button",
   118             value = _"cancel"
   119           },
   120           content = ""
   121         }
   123       end 
   124     }
   126   end }
   127 end
   130 ui.link { attr = { name = "suggestions" }, text = "" }
   132 ui.container {
   133   attr = { class = "section suggestions" },
   134   content = function ()
   136     ui.heading { 
   137       level = 1, 
   138       content = _("Suggestions for improvement (#{count})", { count = # ( initiative.suggestions ) } ) 
   139     }
   141     ui.container { content = _"written and rated by the supportes of this initiative to improve the proposal and its reasons" }
   143     if app.session.member_id and initiative.member_info.supported and not active_trustee_id then
   144       ui.link {
   145         attr = {
   146             style = "margin-top: 1ex;",
   147             class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored",
   148         },
   149         module = "suggestion", view = "new", params = {
   150           initiative_id = initiative.id
   151         },
   152         content = _"write a new suggestion" 
   153       }
   154     end
   156     slot.put("<br /><br />")
   158     for i, suggestion in ipairs(initiative.suggestions) do
   160       local opinion = Opinion:by_pk(app.session.member_id, suggestion.id)
   162       local class = "mdl-card mdl-card__fullwidth mdl-shadow--2dp not-folded"
   163       if suggestion.id == param.get("suggestion_id", atom.number) then
   164         class = class .. " highlighted"
   165       end
   166       if member and not initiative.issue.fully_frozen and not initiative.issue.closed and initiative.member_info.supported then
   167         class = class .. " rateable"
   168       end
   170       ui.link { attr = { name = "s" .. suggestion.id }, text = "" }
   171       ui.tag { tag = "div", attr = { class = class, id = "s" .. suggestion.id }, content = function ()
   172         ui.tag{ attr = { class = "mdl-card__title mdl-card--border" }, content = function()
   173           ui.heading { level = 2, 
   174             attr = { class = "mdl-card__title-text" },
   175             content = function()
   176               ui.tag{ content = format.string(suggestion.name, {
   177                 truncate_at = 160, truncate_suffix = true })
   178               }
   179             end
   180           }
   181         end }
   185         ui.container{ attr = { class = "suggestion-content" }, content = function()
   187           ui.container { 
   188             attr = { class = "mdl-card__content mdl-card--border suggestionInfo" },
   189             content = function ()
   191               if app.session:has_access("authors_pseudonymous") then
   192                 ui.tag{ content = _"by" }
   193                 slot.put(" ")
   194                 ui.link{
   195                   module = "member", view = "show", id = suggestion.author_id,
   196                   content = suggestion.author.name
   197                 }
   198               end
   200               execute.view{
   201                 module = "suggestion", view = "_collective_rating", params = {
   202                   suggestion = suggestion
   203                 }
   204               }
   206             end 
   207           }
   209           ui.container {
   210             attr = { class = "mdl-card__content suggestion-text draft" },
   211             content = function ()
   212               slot.put ( suggestion:get_content( "html" ) )
   214               ui.container { attr = { class = "floatx-right" }, content = function()
   216                 ui.link { 
   217                   attr = { 
   218                     class = "mdl-button mdl-js-button mdl-button--icon suggestion-more",
   219                     onclick = "document.querySelector('#s" .. suggestion.id .. "').classList.remove('folded');document.querySelector('#s" .. suggestion.id .. "').classList.add('unfolded'); return false;"
   220                   },
   221                   content = function()
   222                     ui.tag{ tag = "i", attr = { class = "material-icons" }, content = "expand_more" }
   223                   end
   224                 }
   226                 ui.link { 
   227                   attr = { 
   228                     class = "mdl-button mdl-js-button mdl-button--icon suggestion-less",
   229                     onclick = "document.querySelector('#s" .. suggestion.id .. "').classList.add('folded');document.querySelector('#s" .. suggestion.id .. "').classList.remove('unfolded'); return false;"
   230                   },
   231                   content = function()
   232                     ui.tag{ tag = "i", attr = { class = "material-icons" }, content = "expand_less" }
   233                   end
   234                 }
   235                 --[[
   236                 ui.link{
   237                   attr = { class = "mdl-button" },
   238                   content = _"Details",
   239                   module = "suggestion", view = "show", id = suggestion.id
   240                 }
   241                 --]]
   242               end }
   244             end
   245           }
   247         end }
   249         ui.container { attr = { class = "mdl-card__actions mdl-card--border" }, content = function()
   251           if direct_supporter then
   252             ui.container{ attr = { class = "suggestion_rating_info" }, content = function()
   253               ui.tag{ attr = { id = "s" .. suggestion.id .. "_rating_text" }, content = function()
   254                 local text = ""
   255                 if opinion then
   256                   if opinion.degree == 2 then
   257                     text = _"must"
   258                   elseif opinion.degree == 1 then
   259                     text = _"should"
   260                   elseif opinion.degree == 0 then
   261                     text = _"neutral"
   262                   elseif opinion.degree == -1 then
   263                     text = _"should not"
   264                   elseif opinion.degree == -2 then
   265                     text = _"must not"
   266                   end
   267                   ui.tag { content = text }
   268                   slot.put ( " " )
   269                   if 
   270                     (opinion.degree > 0 and not opinion.fulfilled)
   271                     or (opinion.degree < 0 and opinion.fulfilled)
   272                   then
   273                     ui.tag{ content = _"but" }
   274                   else
   275                     ui.tag{ content = _"and" }
   276                   end
   277                   slot.put ( " " )
   278                   local text = ""
   279                   if opinion.fulfilled then
   280                     text = _"is implemented"
   281                   else
   282                     text = _"is not implemented"
   283                   end
   284                   ui.tag { content = text }
   285                 end
   286               end }
   287               local id = "s" .. suggestion.id .. "_rating_icon"
   288               if opinion and (
   289                   (opinion.degree > 0 and not opinion.fulfilled)
   290                   or (opinion.degree < 0 and opinion.fulfilled)
   291                 )
   292               then
   293                 slot.put(" ")
   294                 if math.abs(opinion.degree) > 1 then
   295                   ui.icon("warning", "red", id)
   296                 else
   297                   ui.icon("warning", nil, id)
   298                 end
   299               elseif opinion then
   300                 slot.put(" ")
   301                 ui.icon("done", nil, id)
   302               else
   303                 slot.put(" ")
   304                 ui.icon("blank", nil, id)
   305               end
   306             end }
   308             ui.tag{
   309               tag = "a",
   310               attr = {
   311                 id = "s" .. suggestion.id .. "_rate_button",
   312                 class = "mdl-button",
   313                 onclick = "rateSuggestion(" .. suggestion.id .. ", " .. (opinion and opinion.degree or 0) .. ", " .. (opinion and (opinion.fulfilled and "true" or "false") or "null") .. ");return false;"
   314               },
   315               content = function()
   316                 if opinion then
   317                   ui.tag { content = _"update rating" }
   318                 else
   319                   ui.tag { content = _"rate suggestion" }
   320                 end
   321               end
   322             }
   323           end
   325           ui.link{
   326             attr = { class = "mdl-button" },
   327             content = _"Details",
   328             module = "suggestion", view = "show", id = suggestion.id
   329           }
   331         end }
   332         ui.script{ script = [[
   333           var rateSuggestionRateText = "]] .. _"rate suggestion" .. [[";
   334           var rateSuggestionUpdateRatingText = "]] .. _"update rating" .. [[";
   335           var rateSuggestionDegreeTexts = {
   336             "-2": "]] .. _"must not" .. [[",
   337             "-1": "]] .. _"should not" .. [[",
   338             "1": "]] .. _"should" .. [[",
   339             "2": "]] .. _"must" .. [["
   340           }
   341           var rateSuggestionAndText = "]] .. _"and" .. [[";
   342           var rateSuggestionButText = "]] .. _"but" .. [[";
   343           var rateSuggestionFulfilledText = "]] .. _"is implemented" .. [[";
   344           var rateSuggestionNotFulfilledText = "]] .. _"is not implemented" .. [[";
   345           window.addEventListener("load", function() {
   346             var textEl = document.querySelector('#s]] .. suggestion.id .. [[ .suggestion-content');
   347             var height = textEl.clientHeight;
   348             if (height > 250) {
   349               document.querySelector('#s]] .. suggestion.id .. [[').classList.add('folded');
   350             }
   351           });
   352         ]] }
   354       end } 
   356     end -- for i, suggestion
   358   end
   359 }
