Jump to content

Recommended Posts

Posted (edited)

WIP module (90% done) following this request expression of interest 😉 by @szabesz.

A (Process) module that allows the posting of Notes in the ProcessWire admin. Inspired by WP Dashboard Notes (see video in link above).

The module is almost complete. As usual, I hit a snag with the CSS! PRs highly welcome, please! (see below). Setting note sizes and display was a bit tricky. 

Module is now available for alpha testing here.

https://github.com/kongondo/DashboardNotes

Contributing

I should have mentioned this earlier and done it properly but I am lazy, so this is the rough guide. I know we all have our preferences but please note:

  1. No heredoc syntax
  2. No alternative syntax for control structures (i.e. endif, etc)
  3. Indent using tabs (4)
  4. Doesn't matter in this case, but no PHP short tags
  5. For methods, opening curly bracket on same line as the method name (there's a technical wording for this, I can't remember now)

Features

  • Set Notes priority (low/normal/high)
  • Note text and background colours
  • Enable/disable replies to Notes
  • Lock Notes for editing
  • Viewing of Notes can be controlled using users IDs, roles or permissions. Default is all Notes can be viewed by all who have access to the module
  • Edit Note after posting
  • Global note settings (accessible only to those with dashboard-notes-settings permission)  - default colours, date format, if users can delete notes they did not create, if users can edit notes they did not create, note display dimensions, maximum depth of (nested) replies, maximum characters of note preview before truncate, etc.)
  • Sort notes by date, title or priority

 

Pending

  • Bulk actions (delete, lock, change priority, etc)
  • Reply/commenting on notes
  • More testing on visibility

 

Requests/Ideas

  • Mine is: PRs are welcome! Especially with the CSS and/or Design (Use the Dev Branch please)
  • Display Note author title (if present, or any other named author title field) rather than their (user)name?
  • Other?

 

Screenshots

dashboard-notes-alpha-001.thumb.png.97d2d4a762606f1bda5c4b2b1b49a900.png

 

dashboard-notes-alpha-002.thumb.png.63df619283c53377df1650733ec2e814.png

 

dashboard-notes-alpha-003.thumb.png.805ca0b55209854a1917c9b4c0d2a7c7.png

 

dashboard-notes-alpha-004.thumb.png.bf6a742df1f23b14ee1d5f04bbfd1bac.png

 

dashboard-notes-alpha-005.thumb.png.0163dad0110c2fffa1493fb63ac1977f.png

 

dashboard-notes-alpha-006.thumb.png.9f3fb42d00825ff10e0c7b11764a9b71.png

 

dashboard-notes-alpha-007.thumb.png.007348c8496f22f428a2ae7fff63c013.png

 

dashboard-notes-alpha-008.thumb.png.db9258ad8a5ec2614d2c5cada3635542.png

 

dashboard-notes-alpha-009.thumb.png.23d037ebd184d76677bb646038b7d75e.png

Thanks!

 

 

 

Edited by kongondo
use dev branch for PRs + code conduct
  • Like 17
  • Thanks 1

Share this post


Link to post
Share on other sites
8 minutes ago, kongondo said:

WIP module (90% done) following this request by @szabesz.

Thanks for developing it!

Let's say I was interested in it but turning it into a "request" is fine with me too 🙂 

10 minutes ago, kongondo said:

I'll make this public soon, after I clean up a bit.

Thanks in advance!

  • Like 3

Share this post


Link to post
Share on other sites

We are off to the races..

Alpha version for testing and comments now available at repo.

Please note (see what I did there? 😉😎) This thing is in lazy development. Don't expect any more non-critical changes soon.

Main issues for me

  1. CSS: When note sizes are small, the note titles are still large and look horrible. I'm not sure whether to truncate or reduce font size, or?
  2. Truncating long titles + long text in dashboard
  3. Note visibility can be limited by permissions, users and roles: Should we filter out system permissions? 
  4. Continuing from #3, should we NOT display superuser names (in the dropdown of lists of users who can view the note, if one wants to set that)
  5. Continuing from #4, what about frontend users only; should we remove their names from the list since they can't view the backend anyway? I'm not sure how code this
  6. Continuing from #3, currently we check if a user title exists and use that value rather than name. Maybe make the field to check configurable?
  7. Notes layout?
  8. Currently, one can reply to several responses in the same note simultaneously. Is this OK?

I think that's it. If I think of anything else I'll add it here.

Thanks!

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites
9 minutes ago, kongondo said:

now available at repo.

Thanks again for all the effort! I will find some time this week (probably on the weekend) to check it out and comment, and I'll see what else I can contribute.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the module @kongondoI'm playing with this and when URL is /processwire/dashboard-notes/view/ (without note id) I get an error: Call to a member function count() on null in ProcessWire\ProcessDashboardNotes->renderReplyMarkup(), line 1228, $note->dashboard_note is null. Check for urlsegment2 is probably needed. Also when you pass nonexisting id an error is thrown: Argument 1 passed to ProcessWire\WireData::setArray() must be of the type array, null given. I guess there is no support for comments that need to be approved? But as you said, this is in lazy development (nice wording) and good starting point for those who need it.

  • Like 3

Share this post


Link to post
Share on other sites
Posted (edited)
8 minutes ago, matjazp said:

I guess there is no support for comments that need to be approved?

If this tool is used by site editors and superusers only (as a collaboration tool) of trusted users, then there is no need for this feature. It is used in the admin after all, so it should be ok to publish messages right away. Am I missing something?

Edited by szabesz
typo
  • Like 1

Share this post


Link to post
Share on other sites
48 minutes ago, matjazp said:

I guess there is no support for comments that need to be approved?

What @szabesz said above. My thinking was that this is used in the admin, meaning existing users with access to the module (permission dashboard-notes) are already trusted users.

49 minutes ago, matjazp said:

I'm playing with this and when URL is /processwire/dashboard-notes/view/ (without note id) I get an error: Call to a member function count() on null in ProcessWire\ProcessDashboardNotes->renderReplyMarkup(), line 1228, $note->dashboard_note is null. Check for urlsegment2 is probably needed. Also when you pass nonexisting id an error is thrown: Argument 1 passed to ProcessWire\WireData::setArray() must be of the type array, null given.

Yeah, I had "fun" with these ones. i went from using input strings to urlSegments and I must have forgotten to catch such errors. PR please 🙂.

Thanks for testing!

  • Like 1

Share this post


Link to post
Share on other sites

Fixed a minor typo introduced whilst debugging. No version change.

  • Like 1

Share this post


Link to post
Share on other sites

So just had time to play with the HTML/CSS output...it would much more easies if we could use uikit markup.

Just make some dirty changes in renderNotes() and get a fine working responsive grid with uikit cards...if i fin the time i could send you a PR with a own view for uikit theme users...(color and some special CSS classes are missing)...

dashboard.thumb.JPG.0d44a8a37167180d3f1a91464083d572.JPG

A Fonticon chooser for the single notes would be a other option to differ the single notes, than fiddling around with colors...?

Best regards mr-fan

 

  • Like 3

Share this post


Link to post
Share on other sites
4 minutes ago, mr-fan said:

it would much more easies if we could use uikit markup.

Agreed...

4 minutes ago, mr-fan said:

Just make some dirty changes in renderNotes() and get a fine working responsive grid with uikit cards.

I tried playing around with uikit cards and flex but had no joy. I failed miserably; CSS is not my thing 😉. Yes, a PR would be welcome, thanks.

 

6 minutes ago, mr-fan said:

A Fonticon chooser for the single notes would be a other option to differ the single notes, than fiddling around with colors.

I think being able to have different note colours is important. An organisation/team can use different colours as a visual grouping (.e.g editorial notes = yellow; customer service = blue, etc). Anyway, since colours are not forced on the user (the default is no colours), I think this shouldn't change.

  • Like 1

Share this post


Link to post
Share on other sites
30 minutes ago, kongondo said:
39 minutes ago, mr-fan said:

it would much more easies if we could use uikit markup.

Agreed...

+1 Let's not support other than the default theme.

Share this post


Link to post
Share on other sites
1 minute ago, szabesz said:

+1 Let's not support other than the default theme.

? ui is not default...?

Share this post


Link to post
Share on other sites

What I meant was that it is enough to support the default admin theme, which is the UIkit one. And I forgot that the old default is still called "Default". Sorry for the confusion.

Side-note: the original name for the original theme was not the best choice....

Share this post


Link to post
Share on other sites

default theme was ok...but uikit should have be changed to the default, but i think there were reasons to separate this things...

I don't know if i get the time the next two weeks - for every one who wanna try here is my messy start on get the right uikit markup.

It builds a responsive grid with standard ui cards with header,body and footer.

The view and edit buttons are on the footer - hover on cards with selection not implemented - like i wrote just playing a little bit and have fun.

Spoiler

	/**
	 * Render notes for display on landing page.
	 *
	 * @access private
	 * @return string $out Markup of rendered notes for display.
	 *
	 */
	private function renderNotes($notes) {

		$out = '';
		$user = $this->wire('user');
		$urlParamPageNumStr = $this->wire('input')->pageNumStr() ? "?page=" . $this->wire('input')->pageNumStr() : "";
		$viewIcon = "<i class='fa fa-lg fa-eye'></i>";

		// asterisks @todo: use this?
		//$priorities = array(1=>"fa-arrow-circle-down",2=>"fa-minus-circle",3=>"fa-arrow-circle-up");
		//fa-exclamation-triangle  fa-exclamation-circle
		$priorities = array(1=>"fa fa-arrow-circle-down fa-lg pw-nav-icon fa-fw",2=>"fa fa-minus-circle fa-lg pw-nav-icon fa-fw",3=>"fa fa-arrow-circle-up fa-lg pw-nav-icon fa-fw");
		//$priorityClasses = array(1=>'dn_low_priority',2=>'dn_normal_priority',3=>'dn_high_priority');

		$out .= "<div class='uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-2@s uk-grid'>";

		// loop through notes, building markup
		foreach ($notes as $note) {

			// add margin left if required
			#$classMarginLeft = $i ? " uk-margin-left" : "";
			// @todo: better presentation of truncated text?
			// @todo: what about long titles?! truncate?
			$viewURL = $this->baseURL . "/view/{$note->id}/{$urlParamPageNumStr}";
			$viewMarkup = "<a href='{$viewURL}'>" . $viewIcon. "</a>";

			## editing rights and markup
			// users not allowed to edit each other's notes and this user is not the note author
			$showEditMarkup = $this->checkEdit($note);

			if($showEditMarkup) {
				$viewEditDividerMarkup = "<span class='dn_note_view_edit_divider'>&#47;</span>";
				if($note->is(Page::statusLocked)){
					$editURL = '#';
					$editIcon = "<i class='fa fa-lock'></i>";
					$editMarkup = "<a href='{$editURL}'>" . $editIcon . "</a>";
				}
				// edit markup: note unlocked and can be edited (@note: including not global restriction on editing each other's notes)
				else {
					$editURL = $this->baseURL . "/edit/{$note->id}/{$urlParamPageNumStr}";
					$editIcon = "<i class='fa fa-lg fa-pencil-square-o'></i>";
					$editMarkup = "<a href='{$editURL}'>" . $editIcon . "</a>";
				}
			}
			else {
				$viewEditDividerMarkup = "";
				$editMarkup = "";
			}

			##################


			// @note: textColour NOT applied to div.dn_note
			$textColour = $note->textColour ? " style='color:rgba({$note->textColour});'" : '';
			$backgroundColour = $note->backgroundColour ? "background-color:rgba({$note->backgroundColour});" : '';

			// note width + height + background colour inline CSS styles. applied to div.dn_note
			$width = "width:{$this->settings->width}px;";
			$height = "height:{$this->settings->height}px;";
			$noteWrapperStyles = " style='{$width}{$height}{$backgroundColour}'";

			// we'll use this to do visibility checks and skip if required
			$limitIDs = $note->limitVisibility > 1 && is_array($note->limitVisibilityIDs) ? implode("|",$note->limitVisibilityIDs) : '';

			// @todo: truncate first?

			// grab the comment text and clean it
			$text = htmlentities($note->text, ENT_QUOTES, "UTF-8");
			$text = str_replace("\n\n", "</p><p>", $text);
			$text = str_replace("\n", "<br />", $text);

			// @todo: revisit this! complete words do not show ...more!
			$text = $this->wire('sanitizer')->truncate($text, [
				'type' => 'punctuation',
				'maxLength' => $this->settings->truncateMax,
				'visible' => true,
				'keepFormatTags' => true,
				'more' => "...<small>(". $this->_('more').")</small>"// @todo?!
			  ]);

			// meta
			$date = date($this->dateFormat, $note->created);
			// @todo; configurable field to get author name?
			$author = $note->createdUser->name;
			// if note priority not set, it means note is "normal" so priority "2" set at runtime
			if(!$note->priority) $note->priority = 2;
			//$notePriority = str_repeat("&#42;",$note->priority);
			$notePriority = $priorities[$note->priority];
			//fa-comments, fa-comments-o, fa-comment, fa-comment-o
			$commentsCount = "<span class='fa fa-comments-o'><span class='dn_note_comments_count'>{$note->dashboard_note->count()}</span></span>";
			$priorityClass = " " . $priorityClasses[$note->priority];

			$metaDivider = "&#47;";
			$meta = "{$date} {$metaDivider} {$author} {$metaDivider} {$commentsCount}";

			##################

			$out .=
				"<div class='uk-margin-bottom'>" .
					"<div class='uk-card uk-card-default uk-card-hover' id='note-{$note->id}' data-note-value='{$note->id}'>" .
						"<div class='uk-card-header'>".
							"<div class='uk-grid-small uk-flex-middle' uk-grid>".
								"<div class='uk-width-auto'>".
									"<i class='$notePriority'></i>".
								"</div>".
								"<div class='uk-width-expand'>".
									"<h3 class='uk-card-title uk-margin-remove-bottom'>{$note->title}</h3>".
									"<p class='uk-text-meta uk-margin-remove-top'>{$meta}</p>".
								"</div>".
							"</div>".
						"</div>".
						"<div class='uk-card-body'>".
							"$text".
						"</div>".
						"<div class='uk-card-footer'>".
								$viewMarkup .
								$viewEditDividerMarkup .
								$editMarkup .
						"</div>".
					"</div>".
				"</div>";
		}
		$out .= "</div>";
		return $out;
	}

 

 

  • Like 2

Share this post


Link to post
Share on other sites

Morning Francis,

You have a dev branch currently identical to the master. What is the supposed workflow if I want to contribute by coding?

Share this post


Link to post
Share on other sites
4 hours ago, szabesz said:

You have a dev branch currently identical to the master. What is the supposed workflow if I want to contribute by coding?

Use the dev branch please, thanks.

  • Like 1

Share this post


Link to post
Share on other sites
23 hours ago, mr-fan said:

$out .=

You could save yourself a lot of string concatenation if you use the heredoc syntax 🙂

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)
23 minutes ago, dragan said:

You could save yourself a lot of string concatenation if you use the heredoc syntax 🙂

Unfortunately I am not a fan of the heredoc syntax (as well as the alternative syntax for control structures endif, etc and PHP short tags). I don't use them. So, I wouldn't accept any PR where these are used. I'll edit my first post. I should have written a contributing code thingy.... 🙂. Thanks for reminding me.

Edited by kongondo
  • Like 2

Share this post


Link to post
Share on other sites

Hello @kongondo

I have implemented some changes to the navbar/menu:

DashboardNotes-menu.gif.ca61f2db7b45e9a9c5367b79f513fb14.gif

If you like it I can make a PR. What do you think?

 

  • Like 4

Share this post


Link to post
Share on other sites
37 minutes ago, szabesz said:

What do you think?

It looks absolutely awesome! Please send the PR. i'll review it together with the others you've already made. Thanks!

  • Like 1

Share this post


Link to post
Share on other sites

My pleasure 🙂

1 hour ago, kongondo said:

Please send the PR.

Done. All three commits are in the first PR.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...