On Sun, May 24, 2020 at 9:51 PM Craig Russell <apache....@gmail.com> wrote: > > I'm working on the front end that now enables POST to rescind an emeritus > request. Once this works I'll go to the back end and implement the > "rescind_emeritus" action. > > Three questions: > > 1. If I want to put a (cancel) button that does the same as double clicking > on the Member status line, how would I do that? I guess that it is not so > easy because the assumption on the _form:incline is that any button will > create a POST request. [Having the (cancel) button is not really needed since > I have now accepted this UX but I just wonder..]
The default behavior of a button is to submit a form, but you can add your own onClick handler, and in that handler you can call event.preventDefault() to prevent the default behavior from occurring. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault > 2. I added a button (rescind emeritus request) but now the line is too long > and the date entry is moved to the next line. How can I reduce the space > between buttons to accommodate all of the buttons? It would surprise me if you would ever need to show both an emeritus and rescind emeritus function, but you control spacing via CSS: https://github.com/apache/whimsy/blob/master/www/roster/public/stylesheets/app.css Search for "button". You can see where margins are specified. > 3. I'd like the (rescind emeritus request) to be active if the user of the > form is either on the secretary team or is the person themself. I think it is > currently set up to only allow secretary team but I don't know how to tell. That's controlled by the following line: _div.row data_edit: ('memstat' if @@person.props.auth.secretary) do You should be able to add 'or' conditions to that, and then add if statements within the form to more finely control which buttons are shown. > Thanks, > Craig - Sam Ruby > # > # Render and edit a person's member status > # > > class PersonMemberStatus < Vue > def render > committer = @@person.state.committer > > _div.row data_edit: ('memstat' if @@person.props.auth.secretary) do > _div.name 'Member status' > > if committer.member.status > _div.value do > _span committer.member.status > > if @@edit == :memstat > opt = { year: 'numeric', month: 'long' } # Suggested date > dod = Date.new.toLocaleDateString('en-US', opt) > _form.inline method: 'post' do > if committer.member.status.include? 'Active' > if committer.forms['emeritus_request'] > _button.btn.btn_primary 'rescind emeritus request', > name: 'action', value: 'rescind_emeritus' > end > _button.btn.btn_primary 'move to emeritus', > name: 'action', value: 'emeritus' > _button.btn.btn_primary 'move to deceased', > name: 'action', value: 'deceased' > _input 'dod', name: 'dod', value: dod > elsif committer.member.status.include? 'Emeritus' > _button.btn.btn_primary 'move to active', > name: 'action', value: 'active' > _button.btn.btn_primary 'move to deceased', > name: 'action', value: 'deceased' > _input 'dod', name: 'dod', value: dod > elsif committer.member.status.include? 'Deceased' > _button.btn.btn_primary 'move to active', > name: 'action', value: 'active' > _button.btn.btn_primary 'move to emeritus', > name: 'action', value: 'emeritus' > end > end > end > end > end > end > end > end > > Craig L Russell > c...@apache.org >
