Packages

phoenix_kit

1.7.49
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit lib modules tickets web new.html.heex
Raw

lib/modules/tickets/web/new.html.heex 

<div class="container mx-auto px-4 py-6 max-w-4xl">

  <.admin_page_header

    back={Routes.path("/admin/tickets")}

    title={gettext("Create New Ticket")}

    subtitle={gettext("Create a support ticket on behalf of a user")}

  />



  <%!-- Form --%>

  <div class="bg-base-100 rounded-lg shadow-sm border border-base-300 p-6">

    <.form

      for={@form}

      id="ticket-form"

      phx-change="validate"

      phx-submit="save"

      class="space-y-6"

    >

      <%!-- Title --%>

      <div class="form-control">

        <label class="label" for="ticket_title">

          <span class="label-text font-medium">

            {gettext("Title")} <span class="text-error">*</span>

          </span>

        </label>

        <input

          type="text"

          id="ticket_title"

          name="ticket[title]"

          value={@form[:title].value}

          placeholder={gettext("Enter ticket title")}

          class="input input-bordered w-full"

          required

        />

        <%= if @form[:title].errors != [] do %>

          <div class="text-error text-sm mt-1">

            <%= for error <- @form[:title].errors do %>

              <p>{translate_error(error)}</p>

            <% end %>

          </div>

        <% end %>

      </div>



      <%!-- Priority --%>

      <div class="form-control">

        <label class="label" for="ticket_priority">

          <span class="label-text font-medium">{gettext("Priority")}</span>

        </label>

        <select

          id="ticket_priority"

          name="ticket[priority]"

          class="select select-bordered w-full max-w-xs"

        >

          <option

            value="low"

            selected={@form[:priority].value == "low" || @form[:priority].value == nil}

          >

            {gettext("Low")}

          </option>

          <option value="medium" selected={@form[:priority].value == "medium"}>

            {gettext("Medium")}

          </option>

          <option value="high" selected={@form[:priority].value == "high"}>

            {gettext("High")}

          </option>

          <option value="urgent" selected={@form[:priority].value == "urgent"}>

            {gettext("Urgent")}

          </option>

        </select>

      </div>



      <%!-- Description --%>

      <div class="form-control">

        <label class="label" for="ticket_description">

          <span class="label-text font-medium">

            {gettext("Description")} <span class="text-error">*</span>

          </span>

        </label>

        <textarea

          id="ticket_description"

          name="ticket[description]"

          value={@form[:description].value}

          placeholder={gettext("Describe the issue in detail...")}

          class="textarea textarea-bordered w-full h-40"

          required

        ><%= @form[:description].value %></textarea>

        <%= if @form[:description].errors != [] do %>

          <div class="text-error text-sm mt-1">

            <%= for error <- @form[:description].errors do %>

              <p>{translate_error(error)}</p>

            <% end %>

          </div>

        <% end %>

      </div>



      <%!-- Attachments --%>

      <%= if @attachments_enabled do %>

        <div class="form-control">

          <label class="label">

            <span class="label-text font-medium">{gettext("Attachments")}</span>

          </label>



          <div

            class="border-2 border-dashed border-base-300 rounded-lg p-6 text-center hover:bg-base-200/50 transition-colors"

            phx-drop-target={@uploads.attachments.ref}

          >

            <.icon name="hero-cloud-arrow-up" class="w-12 h-12 mx-auto text-base-content/40 mb-3" />

            <p class="text-base-content/70 mb-2">

              {gettext("Drag and drop files here, or click to browse")}

            </p>

            <p class="text-sm text-base-content/50">

              {gettext("Max 5 files, 10MB each. Supported: images, PDF, DOC, TXT")}

            </p>

            <.live_file_input upload={@uploads.attachments} class="hidden" />

          </div>



          <%!-- Upload errors --%>

          <%= for error <- @upload_errors do %>

            <p class="text-error text-sm mt-2">{error}</p>

          <% end %>



          <%!-- Pending uploads preview --%>

          <%= if @uploads.attachments.entries != [] do %>

            <div class="mt-4 space-y-2">

              <h4 class="font-medium text-sm">{gettext("Uploading:")}</h4>

              <%= for entry <- @uploads.attachments.entries do %>

                <div class="flex items-center gap-3 bg-base-200 p-2 rounded">

                  <.icon name="hero-document" class="w-5 h-5 text-base-content/60" />

                  <span class="flex-1 text-sm truncate">{entry.client_name}</span>

                  <button

                    type="button"

                    phx-click="cancel_upload"

                    phx-value-ref={entry.ref}

                    class="btn btn-ghost btn-xs btn-circle text-error"

                  >

                    <.icon name="hero-x-mark" class="w-4 h-4" />

                  </button>

                </div>

              <% end %>

            </div>

          <% end %>



          <%!-- Already uploaded pending files --%>

          <%= if @pending_files != [] do %>

            <div class="mt-4 space-y-2">

              <h4 class="font-medium text-sm">{gettext("Attached files:")}</h4>

              <%= for file <- @pending_files do %>

                <div class="flex items-center gap-3 bg-base-200 p-2 rounded">

                  <.icon name="hero-document-check" class="w-5 h-5 text-success" />

                  <span class="flex-1 text-sm truncate">{file.original_name}</span>

                  <button

                    type="button"

                    phx-click="remove_pending_file"

                    phx-value-id={file.uuid}

                    class="btn btn-ghost btn-xs btn-circle text-error"

                  >

                    <.icon name="hero-x-mark" class="w-4 h-4" />

                  </button>

                </div>

              <% end %>

            </div>

          <% end %>

        </div>

      <% end %>



      <%!-- Actions --%>

      <div class="flex gap-3 pt-4 border-t border-base-200">

        <button type="submit" class="btn btn-primary">

          <.icon name="hero-plus" class="w-4 h-4 mr-2" />

          {gettext("Create Ticket")}

        </button>

        <.link navigate={Routes.path("/admin/tickets")} class="btn btn-outline">

          {gettext("Cancel")}

        </.link>

      </div>

    </.form>

  </div>

</div>