Jump to content

Dashboard Notes


Recommended Posts

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 18
  • Thanks 2
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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....

Link to comment
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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

  • 1 month later...
  • 3 months later...

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. 

 

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...