Dashboard Notes

kongondo · March 4, 2019

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:

No heredoc syntax
No alternative syntax for control structures (i.e. endif, etc)
Indent using tabs (4)
Doesn't matter in this case, but no PHP short tags
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

Thanks!

Edited March 9, 2019 by kongondo
use dev branch for PRs + code conduct

szabesz · March 4, 2019

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!

kongondo · March 6, 2019

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

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?
Truncating long titles + long text in dashboard
Note visibility can be limited by permissions, users and roles: Should we filter out system permissions?
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)
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
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?
Notes layout?
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!

szabesz · March 6, 2019

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.

matjazp · March 6, 2019

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.

szabesz · March 6, 2019

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 March 6, 2019 by szabesz
typo

kongondo · March 6, 2019

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!

kongondo · March 8, 2019

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

mr-fan · March 8, 2019

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)...

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

kongondo · March 8, 2019

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.

szabesz · March 8, 2019

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.

mr-fan · March 8, 2019

1 minute ago, szabesz said:

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

? ui is not default...?

szabesz · March 8, 2019

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....

mr-fan · March 8, 2019

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;
	}

szabesz · March 9, 2019

Morning Francis,

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

kongondo · March 9, 2019

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.

dragan · March 9, 2019

23 hours ago, mr-fan said:

$out .=

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

kongondo · March 9, 2019

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 March 9, 2019 by kongondo

szabesz · March 10, 2019

Hello @kongondo

I have implemented some changes to the navbar/menu:

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

kongondo · March 10, 2019

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!

szabesz · March 10, 2019

My pleasure ?

1 hour ago, kongondo said:

Please send the PR.

Done. All three commits are in the first PR.

loukote · April 11, 2019

Hi,

I'm missing text formatting. To start with at least the most simplistic: new lines should be respected.

The replies can't be edited. Or if so, then the link is very hidden ?

Other than that: very useful!

monchu · July 13, 2019

Thanks a lot to Kongondo and Szabesz for this module.

I have a small project on a university website, where they required quite simple task management for their internal research team. They want all actions triggered through emails and SMS because it is not easy to expect the team always log in to their website.

I did a quick development based on this module and will share and post it in a new thread.

Sign In

Dashboard Notes

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members