Topic ID als variabele?

[tknospdr (David Muszynski)]

@NateDhaliwal

Maybe if you have a common word across support tickets, or just a common word in general, you can try that? Just suggesting a workaround

A common word is the opposite of what I want. I don’t want my search results to have EVERY ticket, I want a way to search for a specific ticket. That’s why topic ID would be ideal. They are automatically generated and unique.

@pfaffman

Did you try the code in Topic ID as a variable? - #7 by awesomerobot

No, I think the code I’m using was also awesomerobot’s originally, but I can’t seem to find it’s source anymore.
I prefer the placement of what I’m currently using better than that block under the text.

Also, if what you want to do is “search” for a topic id, then you could probably make a component that accepted a topic ID and then just jumped to that topic.

Well, I can’t do that. Maybe you can.
<Liam Neeson voice>I have a certain set of skills. Coding isn't among them.</Liam Neeson voice>

[pfaffman (Jay Pfaffman)]

@tknospdr

Well, I can’t do that. Maybe you can.
<Liam Neeson voice>I have a certain set of skills. Coding isn't among them.</Liam Neeson voice>

Then perhaps you should move this topic to Marketplace or Feature.

[NateDhaliwal]

@tknospdr

A common word is the opposite of what I want. I don’t want my search results to have EVERY ticket, I want a way to search for a specific ticket. That’s why topic ID would be ideal. They are automatically generated and unique.

You misunderstand me. I meant having a common word including the topic:id parameter, so that only results from that topic show up. The common word removes the need to change words like ‘hi’ and ‘hello’.

[NateDhaliwal]

@tknospdr @pfaffman I cobbled together a quick component that allows you to input the topic id and jump to it.

Create a new component, and add this to the JS tab under the Edit CSS/HTML button^[1]:

import { apiInitializer } from "discourse/lib/api";
import Component from '@glimmer/component';
import { action } from "@ember/object";
import Form from "discourse/components/form";
import DiscourseURL from "discourse/lib/url";

export default apiInitializer((api) => {
    api.renderBeforeWrapperOutlet("full-page-search-filters", 
        class GoToTopic extends Component {
            @action
            handleSubmit(data) {
                DiscourseURL.routeTo(`/t/${data.id}`);
            }
            
            <template>
                <div class="topic-id-go-to" style="margin-top: 1em;">
                    <Form @onSubmit={{this.handleSubmit}} as |form|>
                    
                      <form.Field @name="id" @title="Topic id" as |field|>
                        <field.Input @type="number" @validation="required" />
                      </form.Field>
                    
                      <form.Submit />
                    </Form>
                </div>
            </template>
        }
    );
});

This adds an input to the Search page:

The Submit button is to go to the topic^[2]; it does not affect search results.

Hope this helps!

---

1. My first time using FormKit, it’s really cool! ↩︎

2. I couldn’t change the button text, as that would require locales… which would need a whole TC repo, which might be overkill . ↩︎

[tknospdr (David Muszynski)]

Thanks @NateDhaliwal, I appreciate the effort.
I created the component, pasted the code under the JS tab. Made sure it was active on my theme, but no love.
This is what my search page looks like:

[tknospdr (David Muszynski)]

@awesomerobot

If you edit the code of your theme under admin > themes & components… and add this to the JS tab, it should get you what you’re after with some adjustment:

I set this up on my site to play around with and it does seem to work, however, I get this warning which gives me some pause:

[NateDhaliwal]

Zijn er fouten in de browserconsole?

[tknospdr (David Muszynski)]

This is the only error:

And I think that is for the JS to show the topic ID, not the search. It doesn’t show up except on the pages I earmarked for that element.

[tknospdr (David Muszynski)]

I disabled, then re-enabled the Advanced Search Banner component, and now it’s working.

[tknospdr (David Muszynski)]

Alright, so a summary of the situation as it currently stands:

1. We have a working solution. Although it’s slightly inelegant, it will suit my needs until such time as we can search for topic ID right in the standard search box.
2. The current code suggested by @awesomerobot appears to work, but triggers the warning I posted above.
   2a. When I removed the original code I was using to display the topic ID, this warning went away…
3. When you choose a solution, the code to display the topic ID shows up both in the original post, and in the solution, is there a way to account for that and repress it from showing there?
   
   
4. I fancied up the CSS a little more, now I have a pill on every reply in every thread in the specified categories I’m using this in. I suppose the answer will be to un fancy it, but if anyone knows another way I’d rather keep it, I think it looks nice as is.
   
   

[tknospdr (David Muszynski)]

@awesomerobot
Je code werkt prima, maar het lijkt erop dat alle CSS-decoraties behalve tekst op elke post na de eerste verschijnen als een lege ruimte, opgemaakt zoals de CSS aangeeft.

Schakel inline block uit en je krijgt een kleurenbalk over de volledige breedte.
Verander de achtergrondkleur en de pil verandert van kleur
enzovoort…

Op basis van wat je hebt geschreven, lijkt het erop dat je hebt aangegeven dat het alleen in de eerste post moet worden weergegeven, maar dat heeft alleen invloed op de tekst. Is er nog iets anders dat we kunnen doen om het element op alle extra posts te verwijderen?

[tknospdr (David Muszynski)]

Oké, zoals ik al zei, ik ben geen programmeur, maar ik ben er heel goed in om Grok vragen te stellen. Hier is code die beide problemen aanpakt.

1. Geen lege CSS-ballonnen meer in antwoorden 2 t/m X.
2. Geen duplicatie van topic-ID meer in geciteerde oplossingen.

Misschien geeft niemand anders op de planeet erom, maar dit lijkt een goede manier om topics te volgen voor degenen onder ons die Discourse als ticketsysteem gebruiken.

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // eerste bericht in topic
    const desiredCategories = [9, 23]; // een door komma's gescheiden lijst van categorie-ID's waarvoor je dit wilt laten verschijnen
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- je kunt de inhoud hieronder bewerken, {{this.topicId}} is waar de topic-ID wordt ingevuld -->
      Issue Tracking # is
      {{this.topicId}}
      <!-- je kunt de inhoud hierboven bewerken -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
```gjs
import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // eerste bericht in topic
    const desiredCategories = [9, 23]; // een door komma's gescheiden lijst van categorie-ID's waarvoor je dit wilt laten verschijnen
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- je kunt de inhoud hieronder bewerken, {{this.topicId}} is waar de topic-ID wordt ingevuld -->
      Issue Tracking # is
      {{this.topicId}}
      <!-- je kunt de inhoud hierboven bewerken -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // Alleen doorgaan als dit het eerste bericht is en niet binnen een oplossing-quote
    // Alleen doorgaan als dit het eerste bericht is, niet in een quote, en in de gewenste categorie
    const post = helper?.model;
    const desiredCategories = [9, 23]; // Match de categorieën van TopicIdentifier
    if (
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // Controleer categorie
      element.classList.contains("post__contents-cooked-quote") || // Controleer of het element zelf de quote-inhoud is
      element.closest("aside.accepted-answer") || // Controleer op oplossing/quote-wrapper
      element.closest(".quote") // Extra controle voor algemene quotes
    ) {
      return;
    }

    const wrapper = document.createElement("div");
    wrapper.className = "tracking-id";

    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});

[awesomerobot (Kris)]

Het lukte me niet om hier eerder bij te komen, maar ik ben blij dat je het hebt opgelost! Dit lijkt een redelijke oplossing.

[tknospdr (David Muszynski)]

Ik weet dat ik het gemakkelijk kan testen, maar weet u uit uw hoofd of dit zou werken als ik deze JS en CSS in een eigen component zou plaatsen, of moet het in het thema zelf zitten?

[tknospdr (David Muszynski)]

I found another small anomaly. I was seeing the empty class bubbles in the first post of topics outside of the 2 I wanted them in so I had to update the code a little. Here’s the final product.

import { apiInitializer } from "discourse/lib/api";
import Component from "@glimmer/component";

class TopicIdentifier extends Component {
  get topicId() {
    return this.args.post?.topic?.id;
  }

  get shouldShow() {
    const firstPost = this.args.post?.post_number === 1; // first post in topic
    const desiredCategories = [9, 23]; // a comma separated list of category IDs you want this to appear in 
    const isInCategory = desiredCategories.includes(
      this.args.post?.topic.category.id
    );

    return firstPost && isInCategory;
  }

  <template>
    {{#if this.shouldShow}}
      <!-- you can edit the content below, {{this.topicId}} is where the topic ID will be filled -->
      Issue Tracking # is
      {{this.topicId}} 
      <!-- you can edit the content above -->
    {{/if}}
  </template>
}

export default apiInitializer("0.8.40", (api) => {
  api.decorateCookedElement((element, helper) => {
    // Only proceed if this is the first post and not inside a solution quote
    // Only proceed if this is the first post, not in a quote, and in the desired category
    const post = helper?.model;
    const desiredCategories = [9, 23]; // Match the categories from TopicIdentifier
    if (
    if (
      helper?.model?.post_number !== 1 ||
      !post ||
      post.post_number !== 1 ||
      !desiredCategories.includes(post.topic?.category?.id) || // Check category
      element.classList.contains("post__contents-cooked-quote") || // Check if the element itself is the quote content
      element.closest("aside.accepted-answer") || // Check for solution/quote wrapper
      element.closest(".quote") // Additional check for generic quotes
    ) {
      return;
    }

    const wrapper = document.createElement("div");
    wrapper.className = "tracking-id";

    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});
      element.classList.contains("post__contents-cooked-quote") || // Check if the element itself is the quote content
      element.closest("aside.accepted-answer") || // Check for solution/quote wrapper
      element.closest(".quote") // Additional check for generic quotes
    ) {
      return;
    }

    const wrapper = document.createElement("div");
    wrapper.className = "tracking-id";

    helper?.renderGlimmer(
      wrapper,
      <template><TopicIdentifier @post={{helper.model}} /></template>
    );

    element.appendChild(wrapper);
  });
});

@tknospdr

I know I can easily test it, but do you know offhand if this would work if I was to put this JS and CSS in it’s own component, or does it have to be in the theme itself?

And to answer my own question, I moved all the code to a new theme component and it all still works fine.