Frontend editing in extra Page

[nico65]

Hello,

the frontend edit mode in pw3 is allready great. But I'n looking for a solution where I can have the create/update form on a edite page. (url/urlsegmaent=edit).

With all the released code here I was able to put together some code that does that.

So far it works to fill the page for the first time, but unfortunaly it dosen't work so great on updating the page.

When I try to update, the page disappears from the frontend. Its still visible in the backend but seems to be corrupt.

Here is the code I used:
 

<?php namespace ProcessWire; ?>

<?php $content =''; ?>

<?php
$content = '';
$out = '';



if ($input->urlSegment(1 ) =='edit'):
if(!isPageOwner()) throw new Wire404Exception();

// Edit Form
// get a page
$editpage = $page->setOutputFormatting(false);
$ignorefields = array("isOld","user_activation","language_published","roles","admin_theme");
$form = $modules->get("InputfieldForm");
$form->method = 'post';
$form->action = './';
// get the collection of inputs that can populate this page's fields
$inputfields = $editpage->getInputfields();
// make all the fields required and add them to the form

foreach($inputfields as $inputfield) {
    if(in_array($inputfield->name, $ignorefields)) continue;
    $form->add($inputfield);
}
// the inputfields don't already have a submit button, so we'll add one.
$submit = $modules->get("InputfieldSubmit");
$submit->name = "submit";
$submit->value = 'Submit';
// add the submit button the the form
$form->add($submit);
// process the form


    var_dump($editpage->snippet_repeaterblock->first());
    echo '<hr>';
    var_dump($editpage->snippet_repeaterblock);
    echo '<hr>';
    $rpf_count = $editpage->snippet_repeaterblock->count();
    echo $rpf_count;

if($this->input->post->submit) {



    echo $firstRepeaterId;

    $n = 1;
    $codesnippet = "snippet_code_repeater$n";
    $codelanguage = "snippet_select_codelanguage_repeater$n";

    $snippet_repeaterblocks = $editpage->snippet_repeaterblock; // the repeaters
    foreach ($snippet_repeaterblocks as $item){

      #  $item = $pages->get("id=$snippet_repeaterblock->id"); // the repeater page we want to update
        $item->of(false);

        // update repeater fields
        $item->snippet_code_repeater = $input->post->$codesnippet;
        $item->snippet_select_codelanguage_repeater = $input->post->$codelanguage;

        // save the repeater page
        $item->save();

        // update counter etc
        $n++;
        $codesnippet = "snippet_code_repeater$n";
        $codelanguage = "snippet_select_codelanguage_repeater$n";
    }



    # New Code End
// now we assume the form has been submitted.
// tell the form to process input from the post vars.
    $form->processInput($this->input->post);
// see if any errors occurred
    if( count( $form->getErrors() )) {
// re-render the form, it will include the error messages
        $out .= $form->render();
    } else {
// successful form submission, so populate the page with the new values.
        foreach($form as $field) {
           $donotpopulate = array("snippet_repeaterblock");
          if(in_array($field->name, $donotpopulate)) continue;
            $editpage->set($field->name, $field->value);

            echo $field->name;
            echo ':';
            echo $field->value;
            echo '<hr />';
        }
// save it
        $editpage->of(false);
        $editpage->save();
        $out .= "Page saved.";
        $out .= $form->render();
        $content .= $out;
    }
}
else {
    $out .= $form->render();
    $content .= $out;
}


else:
?>

<?php /* -------------------- UserProfile */ ?>
<?php $cuser = $page->createdUser->id; ?>
<?php   $cusername =  $users->get($cuser)->name; ?>
<?php   $cusermail =  $users->get($cuser)->email;  ?>



<?php # print_r($page->createdUser); ?>

<?php /* -------------------- TAGS*/ ?>
<?php $snippet_tag_count = count($page->get("snippet_tag"));
$allsnippettags = $page->get("snippet_tag");
if ($snippet_tag_count > 0 ):
    $tagcontent ='<ul class="snippet_tags">';

    $tagcontent ='';
    $tagcontent .='<ul class="all-tags">';
    foreach ($allsnippettags as $allsnippettag) :
        $alltagtitle = $allsnippettag['title'];
        $alltagid = $allsnippettag['id'];
        $alltagpath = $allsnippettag['path'];
        $alltagurl = $baseurl.$alltagpath;
        $tagcontent .='<li class="all-snippet_tag">Tag: <a href="'.$alltagurl.'">'.$alltagtitle.'</a>';
        #  print_r($allsnippettag);
        ?>

        <?php $tag = $allsnippettag['name'];
        $matches = $pages->find("snippet_tag=$tag");
        $matchescount = count($matches);

        $tagcontent .='<ul class="tags">';
        foreach ($matches as $match) :

            $tagtitle = $match['title'];
            $tagid = $match['id'];
            $tagpath = $match['path'];
            $tagurl = $baseurl.$tagpath;
            $tagcontent .='<li class="snippet_tag "><a href="'.$tagurl.'">'.$tagtitle.'</a></li>';
        endforeach;
        $tagcontent .='</ul>';
        $tagcontent .='</li>';
    endforeach;
    $tagcontent .='</ul>';

endif;
?>

<?php $content .= "<div id='snippet' edit='snippet_repeaterblock,snippet_tag'>";
$content .= "<p>Create Snippet</p>";
foreach ($page->snippet_repeaterblock as $repeater_item) {
    if ($repeater_item->get("cb_desc_code")):
        $content .= "<div class='snippet_description'>" . $repeater_item->get("snippet_description") . "</div>";
    else :
        $content .= "<pre><code>" . $repeater_item->get("snippet_code") . "</code></pre>";
    endif;
}

$content .= '</div>';
$content .= $tagcontent;
$content .= '<div class="CreatedUser"><a href="'.$baseurl.'snippets/'.$page->createdUser.'" >'.$cusername.'</a></div>';

If someone has some ideas that would be great.

Best
Nico

[Robin S]

Hi Nico,

Welcome to the forums.

Just wondering why you don't want to use the backend to edit your pages. My take is this: the whole point of the frontend edit features is that you stay on the page being edited. If you are navigating to a separate page for editing then that might as well be "Edit Page" in the backend - no need to reinvent the wheel.

You can display a link to Edit Page in the frontend only to users who may edit the page:

if($page->editable()) {
    echo "<a target='_blank' href='{$page->editURL}'>Edit this page</a>";
}

Or if you wanted to keep the /url/to/page/edit/ scheme you could redirect to Edit Page:

if($input->urlSegment(1) == 'edit') {
    if($page->editable()) {
        $session->redirect($page->editURL);
    } else {
        throw new Wire404Exception();
    }
}

 

[pwFoo]

19 hours ago, Robin S said:

Hi Nico,

Welcome to the forums.

Just wondering why you don't want to use the backend to edit your pages. My take is this: the whole point of the frontend edit features is that you stay on the page being edited. If you are navigating to a separate page for editing then that might as well be "Edit Page" in the backend - no need to reinvent the wheel.

You can display a link to Edit Page in the frontend only to users who may edit the page:

if($page->editable()) {
    echo "<a target='_blank' href='{$page->editURL}'>Edit this page</a>";
}

Or if you wanted to keep the /url/to/page/edit/ scheme you could redirect to Edit Page:

if($input->urlSegment(1) == 'edit') {
    if($page->editable()) {
        $session->redirect($page->editURL);
    } else {
        throw new Wire404Exception();
    }
}

 

Will you redirected back the (frontend) page after backend edit and save?

[nico65]

Hi Robin,

thank you, I'll try that.

what I try to do, is having a system where frontend user can create and maintain code snippets.
So in the frontend they create a new snippet page and then they are redirected to the page where they can edit all the fields.
Repeater, Tags, Images etc.

What, I did first and what works was to open the edit modal after getting to the newly created page.

But somehow I think it would be a little bit more elegant if the editing would happen in an extra page.
 

since I'm new to pw this project is just to get familiar with the system and the different possibilities.

 

 

[bernhard]

hi nico65,

welcome to the forum! seems you want to achieve something like this?

removed because i reached my attachment size limit

Have a read about FREDI and FEEL 

the screencast above is a simple module made by me and not officially released yet, called ALFRED: 

you can try it out if you want. the source is here: https://gitlab.com/baumrock/Alfred/tree/dev

[nico65]

Thank you Bernhard,

for your suggestions, but I think, since I use PW3, I think I don't need Fredi or Feel.

My intention is also to not have a modal popup.

Another idea is to redirect directly to the modal url e.g. "page/edit/?id=1115&s=1&modal=1&fields=snippet_repeaterblock,snippet_tag&changes=snippet_repeaterblock" 

But here I need to alter the template. Add Header/Footer maybe a css File and a "Back to Page" Button.

Has someone an Idea how to archieve that?

[bernhard]

13 minutes ago, nico65 said:

My intention is also to not have a modal popup.

may i ask why?

you can easily inject scripts and styles to your admin via  admin custom files and/or hooks

 

[LostKobrakai]

@bernhard Maybe because modals can be quite shitty on mobile devices? 

I'm not sure if you can manage to keep the url but what about a simple session redirect to this url (no modal=1)?

page/edit/?id=1115&s=1&fields=snippet_repeaterblock,snippet_tag&changes=snippet_repeaterblock

[bernhard]

@LostKobrakai CAN, but the built in modal is really nice on mobile. it gets 100% width/height and has a really native feeling. at least for standard page edits.

[nico65]

The main reason was actually, when creating the "Snippet" in frontend I redirected to the new page and opend the modal automatcly via jquery.
This just looked and felt a little weired. I thought it might look better beeing redirected directly to the edit page.

Another thing is that I try to have more the look and feel of the frontend instead of the backend, but this is something I can figure out later.

 

And LostKobrakai thanks for the tip without the modal template, but that would be too much backend for my taste