~netlandish/links

316855836c5516c7a15d47823dc7074a49f05735 — Yader Velasquez 9 months ago 6a3be70
Basic UI for advanced search

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

M core/routes.go
M helpers.go
M static/css/style.css
M templates/link_list.html
M core/routes.go => core/routes.go +16 -7
@@ 1276,9 1276,9 @@ func (s *Service) OrgLinksList(c echo.Context) error {
	}

	var (
		hasUnreadFilter  bool
		hasStarredFilter bool
		hasAllFilter     bool
		hasUnreadFilter,
		hasStarredFilter,
		hasAllFilter bool
	)
	if c.QueryParam("filter") != "" {
		op.Var("filter", c.QueryParam("filter"))


@@ 1295,19 1295,21 @@ func (s *Service) OrgLinksList(c echo.Context) error {
		hasAllFilter = true
	}

	var tag string
	var (
		tag,
		excludeTag,
		search string
	)

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

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

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


@@ 1351,6 1353,10 @@ func (s *Service) OrgLinksList(c echo.Context) error {
	pd.Data["mark_as_non_starred"] = lt.Translate("Unstar")
	pd.Data["no_links"] = lt.Translate("No Links")
	pd.Data["archive"] = lt.Translate("Archive")
	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")
	orgLinks := result.OrgLinks.Result
	gmap := gobwebs.Map{
		"pd":               pd,


@@ 1358,7 1364,10 @@ func (s *Service) OrgLinksList(c echo.Context) error {
		"org":              org,
		"isOrgLink":        isOrgLink,
		"canRead":          canRead,
		"tagFilter":        strings.Replace(tag, ",", ", ", -1),
		"excludeTagFilter": strings.Replace(excludeTag, ",", ", ", -1),
		"navFlag":          navFlag,
		"advancedSearch":   true,
		"hasUnreadFilter":  hasUnreadFilter,
		"hasStarredFilter": hasStarredFilter,
		"hasAllFilter":     hasAllFilter,

M helpers.go => helpers.go +1 -1
@@ 429,7 429,7 @@ func ParsePendingBaseURLs(ctx context.Context, userAgent string) error {
	return nil
}

// GetPaginationParams returns the params needed for cursos pagination
// GetPaginationParams returns the params needed for cursor pagination
func GetPaginationParams(pagination, tag, search, cursor string) template.URL {
	queryParams := make(url.Values)
	queryParams.Set(pagination, cursor)

M static/css/style.css => static/css/style.css +9 -0
@@ 71,6 71,11 @@ body {
  align-items: center;
  margin-bottom: 1rem;
}

.app-header-advanced-search {
  align-items: flex-start !important;
}

.app-header--centered {
  justify-content: center;
}


@@ 98,6 103,10 @@ body {
  border-bottom-left-radius: 0px;
  border: 0px;
}
.app-header__search--stack {
  flex-direction: column;
}

.card > header {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;

M templates/link_list.html => templates/link_list.html +31 -12
@@ 1,16 1,35 @@
{{template "base" .}}
<section class="app-header">
<section class="app-header app-header-advanced-search">
  <h1 class="app-header__title">{{ if .isOrgLink }}{{ .org.Name }} {{.pd.Title}}{{else if not .isPopular}}{{.pd.Data.recent}}{{else}}{{.pd.Data.popular}}{{end}}</h1>
  <form class="app-header__search app-header__search--inline"
      method="GET"
      action="{{if .isPopular}}{{reverse "core:popular_link_list"}}{{else if .isOrgLink}}{{reverse "core:home_link_list"}}{{else}}{{reverse "core:recent_link_list"}}{{end}}">
    <input type="search" name="q" value="{{.search}}"/>
    <button type="submit" class="button dark icon-only">
      <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </form>
  <div>
      <form class="app-header__search app-header__search--stack" method="GET"
        action="{{if .isPopular}}{{reverse "core:popular_link_list"}}{{else if .isOrgLink}}{{reverse "core:home_link_list"}}{{else}}{{reverse "core:recent_link_list"}}{{end}}">
          <div class="app-header__search app-header__search--inline">
              <input type="search" name="q" value="{{.search}}"/>
              <button type="submit" class="button dark icon-only">
                  <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width:20px">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
                  </svg>
              </button>
          </div>
          {{if .advancedSearch}}
              <div>
                  <p><a href="#">{{.pd.Data.advanced_search}}</a></p>
                  <div>
                      <label>{{.pd.Data.include_tags}}</label>
                      <input type="text" name="tag" value="{{.tagFilter}}"/>
                  </div>
                  <div>
                      <label>{{.pd.Data.exclude_tags}}</label>
                      <input type="text" name="exclude" value="{{.excludeTagFilter}}"/>
                  </div>
                  <p class="mt-1 pull-right">
                    <button type="submit" class="button primary small is-small">{{.pd.Data.apply}}</button>
                  </p>
              </div>
          {{end}}
      </form>
  </div>
</section>

<section class="card shadow-card">


@@ 121,7 140,7 @@
        {{if .Tags}}
        <div class="link-tag mt-1">
          {{range .Tags}}
          <a class="link-tag__item link-tag__item--simple" href="?tag={{.Slug}}">#{{.Name}}</a>
          <a class="link-tag__item link-tag__item--simple" href="{{if $.tagFilter}}?tag={{$.tagFilter}},{{.Slug}}{{else}}?tag={{.Slug}}{{end}}">#{{.Name}}</a>
          {{end}}
        </div>
        {{end}}