TODOs in project

[jamestagal]

This is a checklist for myself to keep track of the main "to do" tasks.

• [x] Add header section to content file courses.svelte via course nodes
• [x] Check and update assets for course nodes
• [x] Change the course component course.svelte to bring content in dynamically from end nodes {#if i < 3}
• [x] Create Event pages > plenti new type events & plenti new type event_page --singlethen add to index dynamically only showing 3 {#if i < 3}& sortByDate.svelte on index page
• [x] Create Notice pages > plenti new type notice& plenti new type notice_page --single
• [x] Create Research pages > plenti new type research& plenti new type research_page --single
• [x] Create Teachers pages > plenti new type teachers
• [x] Create Scholarship page scholarship.json in Pages content type and scholarship.svelte file in Components
• [x] Create About Us page about.json in Pages content type and about.svelte file in Components
• [x] Create Contact Us page contact.json in Pages content type and contact.svelte file in Components
• [x] Create Categories component & pages, then import into the blog.svelte
• [x] Create Tags component & pages then import into the blog.svelte
• [x] Create single body fields and assign a wysiwyg schema to it so you can organise into paragraphs via the editor.
• [x] Fix all footer links
• [x] Add entity reference (autocomplete) field widget in the CMS - when creating new courses, allow to link to existing teachers

[jimafisk]

That's awesome news on the house @jamestagal, I'm so happy for you!! Thanks for sharing the pictures, your new place looks really nice!

[jamestagal]

Hi @jimafisk Just a question on what code I could add to the template to pass the arrays of teachers. Here is what we have:

          {#if teacher}
            <div class="media mb-2 mb-sm-0 align-items-center">
              <a href={teacher.path}>
                <img
                  class="mr-4 img-fluid teacher-thumb-sm"
                  src={teacher.fields.image.source}
                  alt={teacher.fields.image.altText}
                /></a
              >
              <div class="media-body">
                <h4 class="mt-0">
                  <a href={teacher.path}>
                    {teacher.fields.name}
                  </a>
                </h4>
                {teacher.fields.category}
              </div>
            </div>
          {/if}

Would I need to use a {#each} block on the outside of this {#if} statement above to loop over the teachers? Ben

[jimafisk]

Exactly, you'd want to loop over this. Probably start by renaming the teacher field to be teachers so it's clear (update this in all your content sources, defaults, etc). Then in your schema use references instead of reference. Finally loop over teachers to get the individual values out of the array like..

{#each teachers as teacher}
  {teacher.whatever}
{/each}

How are you getting the teacher value initially? The fact that you're using teacher.fields leads me to believe you're getting this from the allContent object? Where is the reference being defined?

[jamestagal]

Hi @jimafisk

Yes that's right. This teacher variable is generated from the following code which compares the teachers names from both the teachers and courses content types.

  let teacher;
  $: if (content) {
    teacher = allContent.filter(
      (content) =>
        content.type === "teachers" && content.fields.name === trainer.name
    )[0];
  }

So then the {#if teacher} block is true it displays those values.

The reference is being defined in the _schema.json file in the courses content type.

So I it is likely that in order to generate the values that are used in the courses template here, see below, I would have to create this trainer object as a component. Also possibly enclose this in an array [] as well?

    "trainer": {
        "type": "teacher",
        "name": "Clark Malik",
        "image": {
            "source": "media/teacher-1.jpeg",
            "altText": "Profile picture of Clark Malik"
        }
    },

To do so:

1. Create a component called trainer in _component folder.
2. In _schema.json for courses I would add the following:

  "trainer": {
    "type": "component",
    "options": [
      "trainer"
    ]
  },

Would having the nested values such as trainer.type and trainer.name and so on under the field trainer work?

And of course as you stated earlier I also need to "update your existing content sources so they are arrays instead of strings)." Would all that be correct?

Ben

[jimafisk]

Hey @jamestagal, it sounds like you're close, we could probaby use the references field instead of components for this. I just pushed a change to show exactly the updates that would be needed: https://github.com/jamestagal/plenti-educenter/commit/5a9745bb3ea29d05f710f7ad696858d7fa8b6208

See screenshot


Important: There is a bug in Plenti that makes it so the references widget does not load (it will just show up as a component for now). I've already fixed this, but I need to push a new release and you'll need to update your version for this to work.

[jamestagal]

Hi @jimafisk After pulling your changes from the above fix, I noticed in the teachers.svelte file, you didn't add an 's' plural for the new array of trainers.. Was that just an oversight?

  let course = allContent.filter(
    (content) =>
      content.type === "courses" && content.fields.trainer === name)[0];

But why I ask about this code is that now I don't see any cards appearing below the "My Courses" section on these teachers pages.

I have looked at the code but can't see why it isn't pulling the card into the page. Below is the code for the conditional logic. All replacement patterns match the data source as far as I can see.

{#if course}
        <div class="col-lg-4 col-sm-6 mb-5">
          <div class="card p-0 border-primary rounded-0 hover-shadow">
            <a href={course.path}
              ><img
                class="card-img-top rounded-0"
                src={course.fields.image.source}
                alt={course.fields.image.altText}
              /></a
            >
            <div class="card-body">
              <ul class="list-inline mb-2">
                <li class="list-inline-item">
                  <i class="ti-calendar" />
                  {course.fields.course.length}
                </li>
                <li class="list-inline-item">
                  <i class="ti-bookmark-alt" />
                  {course.fields.course.category}
                </li>
              </ul>
              <h4 class="card-title">
                <a href={course.path}>{course.fields.course.title}</a>
              </h4>
              <p class="card-text mb-4">
                {course.fields.bodyText1.description
                  .substring(0, 120)
                  .replace(/(<([^>]+)>)/gi, "")}
              </p>
              <a href={course.path} class="btn btn-primary btn-sm"
                >{course.fields.link.title}</a
              >
            </div>
          </div>
        </div>
      {/if}

Also I have added the "s" to trainer to be trainers but that didn't make any different.

Pls have a look when you can. Ben

[jimafisk]

Can you try to rebuild with the newest version of Plenti I just pushed: https://github.com/plentico/plenti/releases/tag/v0.6.10. It should fix the bug I mentioned above. Thanks!

[jamestagal]

Thanks @jimafisk

Yes building with the newest version of Plenti certainly fixed that feature. That's really awesome. Thank you. And I see you added conditional logic to add the "s" to teacher when there are more than one. That is really cool. 😃

Though I'll have to investigate further why the course cards are not displaying on the teachers content pages. Thank you Jim.

[jamestagal]

Hi @jimafisk Hope you are well. I am stumped with the above issue I am having with this course cards not displaying. I have checked that the fields in the date source matches those in the template and the filter is checking for a match with the trainers from the courses their name fields in the teachers content.

When you get a chance could you please have a look. The code I am referring to this listed above. https://github.com/jamestagal/plenti-educenter/issues/8#issuecomment-1546606859

Regards, Ben

[jamestagal]

Hi @jimafisk Please help with this issue when you can...

Thanks

BTW. This theme is pretty much finished... except for the global css size issue... but I'm waiting for instructions for that one..

Best regards Ben