~netlandish/links

47f92b096764b262fa40ae70f97cbb20dfe59830 — Yader Velasquez 9 months ago 599a912
Add UI to shorts and links

References: https://todo.code.netlandish.com/~netlandish/links/47
4 files changed, 86 insertions(+), 9 deletions(-)

M list/routes.go
M short/routes.go
M templates/link_short_list.html
M templates/listing_list.html
M list/routes.go => list/routes.go +5 -0
@@ 986,6 986,11 @@ func (s *Service) ListingList(c echo.Context) error {
	pd.Data["tags"] = lt.Translate("Tags")
	pd.Data["delete"] = lt.Translate("Delete")
	pd.Data["analytics"] = lt.Translate("Analytics")
	pd.Data["advanced_search"] = lt.Translate("Advanced Search")
	pd.Data["include_tags"] = lt.Translate("Include Tags")
	pd.Data["exclude_tags"] = lt.Translate("Exclude Tags")
	pd.Data["apply"] = lt.Translate("Apply")
	pd.Data["clear"] = lt.Translate("Clear")

	type GraphQLResponse struct {
		Listings struct {

M short/routes.go => short/routes.go +21 -6
@@ 84,12 84,13 @@ func (s *Service) LinkShortList(c echo.Context) error {

	var result GraphQLResponse
	op := gqlclient.NewOperation(
		`query GetLinkShorts($slug: String!, $after: Cursor, $before: Cursor, $tag: String) {
		`query GetLinkShorts($slug: String!, $after: Cursor, $before: Cursor, $tag: String, $excludeTag: String) {
				getLinkShorts(input: {
						orgSlug: $slug,
						after: $after,
						before: $before,
						tag: $tag,
						excludeTag: $excludeTag,
					}) {
					result {
						id


@@ 116,12 117,17 @@ func (s *Service) LinkShortList(c echo.Context) error {

	op.Var("slug", slug)

	var tag string
	var tag, excludeTag string
	if c.QueryParam("tag") != "" {
		tag = c.QueryParam("tag")
		op.Var("tag", tag)
	}

	if c.QueryParam("exclude") != "" {
		excludeTag = c.QueryParam("exclude")
		op.Var("excludeTag", excludeTag)
	}

	if c.QueryParam("next") != "" {
		op.Var("after", c.QueryParam("next"))
	} else if c.QueryParam("prev") != "" {


@@ 150,12 156,21 @@ func (s *Service) LinkShortList(c echo.Context) error {
	pd.Data["no_short_links"] = lt.Translate("No Short Links")
	pd.Data["delete"] = lt.Translate("Delete")
	pd.Data["analytics"] = lt.Translate("Analytics")
	pd.Data["advanced_search"] = lt.Translate("Advanced Search")
	pd.Data["include_tags"] = lt.Translate("Include Tags")
	pd.Data["exclude_tags"] = lt.Translate("Exclude Tags")
	pd.Data["apply"] = lt.Translate("Apply")
	pd.Data["clear"] = lt.Translate("Clear")

	linkShorts := result.LinkShorts.Result
	gmap := gobwebs.Map{
		"pd":      pd,
		"links":   linkShorts,
		"org":     org,
		"navFlag": "short",
		"pd":               pd,
		"links":            linkShorts,
		"org":              org,
		"navFlag":          "short",
		"tagFilter":        tag,
		"excludeTagFilter": excludeTag,
		"advancedSearch":   true,
	}

	if result.LinkShorts.PageInfo.HasPrevPage {

M templates/link_short_list.html => templates/link_short_list.html +26 -0
@@ 5,6 5,32 @@
</section>

<section class="card shadow-card">
  {{if .advancedSearch}}
    <p><a href="#" id="advanced-search-btn">{{.pd.Data.advanced_search}}</a></p>
    <div id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <form method="GET" id="advanced-search-form" action="{{.currURL}}">
            <div class="row">
                <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
                <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
                <div class="col-2"></div>
            </div>
            <div class="row">
                <div class="col-5">
                    <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-5">
                    <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-2 is-right">
                    <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "short:link_short_list" .org.Slug}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                </div>
            </div>
        </form>
    </div>
  {{end}}
  <table class="striped">
    <thead>
      <tr>

M templates/listing_list.html => templates/listing_list.html +34 -3
@@ 5,6 5,32 @@
</section>

<section class="card shadow-card">
  {{if .advancedSearch}}
    <p><a href="#" id="advanced-search-btn">{{.pd.Data.advanced_search}}</a></p>
    <div id="advanced-search-div" {{if and (not .tagFilter) (not .excludeTagFilter)}}class="d-none"{{end}}>
        <form method="GET" id="advanced-search-form" action="{{.currURL}}">
            <div class="row">
                <div class="col-5"><label>{{.pd.Data.include_tags}}</label></div>
                <div class="col-5"><label>{{.pd.Data.exclude_tags}}</label></div>
                <div class="col-2"></div>
            </div>
            <div class="row">
                <div class="col-5">
                    <input type="text" name="tag" value="{{.tagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-5">
                    <input type="text" name="exclude" value="{{.excludeTagFilter}}" class="tag-selector" autocomplete="off"/>
                    <div class="d-none autocomplete-tags"></div>
                </div>
                <div class="col-2 is-right">
                    <button type="submit" class="button primary is-small">{{.pd.Data.apply}}</button>
                    <a href="{{reverse "list:listing_list" .org.Slug}}" class="button primary is-small">{{.pd.Data.clear}}</a>
                </div>
            </div>
        </form>
    </div>
  {{end}}
  <table class="striped">
    <thead>
      <tr>


@@ 27,9 53,14 @@
        <td>
          <div class="link-tag">
            {{if .Tags}}
            {{range .Tags}}
            <a class="link-tag__item" href="?tag={{.Slug}}">{{.Name}}</a>
            {{end}}
                {{range .Tags}}
                    {{if isTagUsedInFilter .Slug $.tagFilter}}
                        <small class="link-tag__item">#{{.Name}}</small>
                    {{else}}
                        <a class="link-tag__item"
                           href="{{if $.tagFilter}}?tag={{$.tagFilter}}, {{.Slug}}{{if $.excludeTagFilter}}&exclude={{$.excludeTagFilter}}{{end}}{{else}}?tag={{.Slug}}{{if $.excludeTagFilter}}&exclude={{$.excludeTagFilter}}{{end}}{{end}}">#{{.Name}}</a>
                    {{end}}
                {{end}}
            {{end}}
          </div>
        </td>