infold 0.1.1 → 0.2.0

data/lib/generators/infold/templates/install/app/helpers/admin_helper.rb

@@ -0,0 +1,23 @@
+module AdminHelper
+  def admin_field_invalid?(form, field)
+    form.object&.errors&.include?(field)
+  end
+
+  def admin_search_result_count(records)
+    return nil if records.blank?
+    "#{records.offset_value + 1} - #{records.offset_value + records.length} of #{records.total_count} in total"
+  end
+
+  def admin_turbo_stream_flash
+    turbo_stream.append "flashes", partial: "admin/common/flash"
+  end
+
+  def admin_turbo_frame_request_id
+    request.headers["Turbo-Frame"]
+  end
+
+  def admin_remote_modal_id
+    admin_turbo_frame_request_id
+  end
+
+end

data/lib/generators/infold/templates/install/app/javascript/admin/admin.css

@@ -0,0 +1,188 @@
+i.pointer:hover,
+.cursor_pointer:hover,
+.form-check-label:hover,
+.sortable:hover {
+    cursor: pointer;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+    background-color: #eee;
+}
+
+#flashes {
+    position: fixed;
+    bottom: 80px;
+    width: 100%;
+    z-index: 2000;
+}
+#flashes .alert {
+    animation: hideop 0.5s linear 0s;
+    animation-delay: 3s;
+    animation-fill-mode: forwards;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+#flashes .alert-dismissible .btn-close {
+    padding-top: 4px;
+}
+
+@keyframes hideop {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}
+.table thead th {
+    font-size: 0.8rem;
+    font-weight: bold;
+}
+.table thead .sortable {
+    text-decoration: underline;
+}
+.table .icon_cell {
+    width: 40px;
+    text-align: center;
+}
+.table th, .table td {
+    word-break: break-all;
+}
+.table .image_cell img {
+    max-width: 100px;
+}
+
+.table_wrapper {
+    overflow-y: auto;
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+.table_wrapper .table {
+    margin-bottom: 0;
+}
+.table_wrapper .table th {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0 !important;
+    border-top: 0 !important;
+}
+
+.card-table tr th:last-child,
+.card-table tr td:last-child {
+    padding-right: 1.5rem;
+}
+
+.table-responsive th, .table-responsive td {
+    white-space: nowrap;
+}
+
+.table-responsive select.form-control {
+    width: auto;
+}
+
+.form-check-label {
+    display: inline !important;
+}
+
+.is-invalid, .field_with_errors .form-control {
+    color: #fa5c7c;
+    border-color: #fa5c7c;
+}
+
+.invalid_message {
+    width: 100%;
+    margin-top: 0.2rem;
+    font-size: 85%;
+    color: #fa5c7c;
+}
+
+label.required:after,
+th.required:after {
+    content: " *";
+    color: #fa5c7c;
+}
+
+.modal-header,
+.modal-body,
+.modal-footer {
+    padding: 1rem;
+}
+
+.modal-backdrop.show {
+    opacity: 0.15;
+}
+
+.modal-content {
+    border-color: #ccc;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.modal_h100 {
+    height: 100%;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.modal_h100 .modal-content {
+    height: 100%;
+}
+
+.remote_modal .modal-body {
+    background-color: #F1F5F9;
+}
+.remote_modal .modal-body .list-group-item,
+.remote_modal .modal-body table tbody {
+    background-color: #fff;
+}
+.remote_modal .modal-body .list-group-item:hover {
+    background-color: #F2F3F4;
+}
+
+.modal_main {
+    max-width: 75%;
+}
+@media (max-width: 991px) {
+    .modal_main {
+        max-width: 744px;
+    }
+}
+
+.modal_sub {
+    max-width: 50%;
+}
+@media (max-width: 991px) {
+    .modal_sub {
+        max-width: 496px;
+    }
+}
+
+.right_justified .modal-dialog {
+    margin-left: auto !important;
+    margin-right: 0 !important;
+}
+
+#index_page #conditions {
+    width: 240px;
+}
+@media (max-width: 767px) {
+    #index_page #conditions {
+        width: 100%;
+    }
+}
+#index_page #result {
+    width: calc(100% - 250px);
+}
+@media (max-width: 767px) {
+    #index_page #result {
+        width: 100%;
+    }
+}
+
+.nested_form_table .nested_form {
+    min-width: 120px;
+}
+.nested_form_table .nested_datetime_form {
+    min-width: 270px;
+}

data/lib/generators/infold/templates/install/app/javascript/admin/admin.scss

@@ -0,0 +1,195 @@
+i.pointer:hover,
+.cursor_pointer:hover,
+.form-check-label:hover,
+.sortable:hover {
+  cursor: pointer;
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+  background-color: #eee;
+}
+
+#flashes {
+  position: fixed;
+  bottom: 80px;
+  width: 100%;
+  z-index: 2000;
+  .alert {
+    animation: hideop 0.5s linear 0s;
+    animation-delay: 3s;
+    animation-fill-mode: forwards;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .alert-dismissible .btn-close {
+    padding-top: 4px;
+  }
+}
+
+@keyframes hideop {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.table {
+  thead {
+    th {
+      font-size: 0.8rem;
+      font-weight: bold;
+    }
+    .sortable {
+      text-decoration: underline;
+    }
+  }
+  .icon_cell {
+    width: 40px;
+    text-align: center;
+  }
+  th, td {
+    word-break: break-all;
+  }
+  .image_cell img {
+    max-width: 100px;
+  }
+}
+
+.table_wrapper {
+  overflow-y: auto;
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  .table {
+    margin-bottom: 0;
+    th {
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0 !important;
+      border-top: 0 !important;
+    }
+  }
+}
+
+.card-table {
+  tr th:last-child,
+  tr td:last-child{
+    padding-right: 1.5rem;
+  }
+}
+
+.table-responsive th, .table-responsive td {
+  white-space: nowrap;
+}
+.table-responsive select.form-control {
+  width: auto;
+}
+
+.form-check-label {
+  display: inline !important;
+}
+
+.is-invalid {
+  color: #fa5c7c;
+  border-color: #fa5c7c;
+}
+.invalid_message {
+  width: 100%;
+  margin-top: 0.2rem;
+  font-size: 85%;
+  color: #fa5c7c;
+}
+.field_with_errors {
+  .form-control {
+    @extend .is-invalid;
+  }
+}
+label.required:after,
+th.required:after {
+  content:" *";
+  color: #fa5c7c;
+}
+
+.modal-header,
+.modal-body,
+.modal-footer {
+  padding: 1rem;
+}
+.modal-backdrop.show {
+  opacity: 0.15;
+}
+.modal-content {
+  border-color: #ccc;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.modal_h100 {
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  .modal-content {
+    height: 100%;
+  }
+}
+.remote_modal {
+  .modal-body {
+    background-color: #F1F5F9;
+    .list-group-item,
+    table tbody {
+      background-color: #fff;
+    }
+    .list-group-item:hover {
+      background-color: #F2F3F4;
+    }
+  }
+}
+.modal_main {
+  max-width: 75%;
+  @media (max-width: 991px) {
+    max-width: 744px;
+  }
+}
+.modal_sub {
+  max-width: 50%;
+  @media (max-width: 991px) {
+    max-width: 496px;
+  }
+}
+
+.right_justified .modal-dialog {
+  margin-left: auto !important;
+  margin-right: 0 !important;
+}
+
+#index_page {
+  #conditions {
+    width: 240px;
+  }
+  @media (max-width: 767px) {
+    #conditions {
+      width: 100%;
+    }
+  }
+  #result {
+    width: calc(100% - 250px);
+  }
+  @media (max-width: 767px) {
+    #result {
+      width: 100%;
+    }
+  }
+}
+
+.nested_form_table {
+  .nested_form {
+    min-width: 120px;
+  }
+  .nested_datetime_form {
+    min-width: 270px;
+  }
+}
+

data/lib/generators/infold/{install/templates → templates/install/app}/javascript/admin/controllers/datepicker_controller.js

@@ -3,6 +3,6 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="datepicker"
 export default class extends Controller {
   connect() {
-    flatpickr(this.element, { allowInput: true, locale: "ja", dateFormat: "Y/m/d" })
+    flatpickr(this.element, { allowInput: true })
   }
 }

data/lib/generators/infold/{install/templates → templates/install/app}/javascript/admin/controllers/remote_modal_controller.js

@@ -4,19 +4,19 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   connect() {
     this.modalWindow = new bootstrap.Modal(this.element)
-    if (this.element.dataset.optionalWindow === 'true') {
-      // 既存のoptionalモーダルを閉じる
-      document.currentModals.forEach((other_modal, i) => {
-        if (other_modal.optional === 'true') other_modal.window.hide()
+    if (this.element.dataset.modalKind === 'modal_sub') {
+      // 既存のsubモーダルを閉じる
+      document.currentModals.forEach((otherModal, i) => {
+        if (otherModal.kind === 'modal_sub') otherModal.window.hide()
       })
     } else {
       // 既存の全モーダルを閉じる
-      document.currentModals.forEach(other_modal => {
-        other_modal.window.hide()
+      document.currentModals.forEach(otherModal => {
+        otherModal.window.hide()
       })
     }
     this.modalWindow.show()
-    document.currentModals.push({ window: this.modalWindow, element: this.element, optional: this.element.dataset.optionalWindow })
+    document.currentModals.push({ window: this.modalWindow, element: this.element, kind: this.element.dataset.modalKind })
 
     this.element.addEventListener('hide.bs.modal', function (event) {
       document.currentModals.pop()

data/lib/generators/infold/templates/install/app/javascript/admin.js

@@ -0,0 +1,9 @@
+// Entry point for the build script in your package.json
+import "@hotwired/turbo-rails"
+import('@rails/activestorage')
+    .then(ActiveStorage => { ActiveStorage.start() })
+    .catch()
+import "./admin/controllers"
+import "./admin/admin.css"
+
+document.currentModals = []

data/lib/generators/infold/{install/templates → templates/install}/app/models/concerns/admin/datetime_field_concern.rb

@@ -39,19 +39,19 @@ module Admin
 
     private
 
-      def convert_date(str)
-        str.presence && (Date.parse(str) rescue nil)
-      end
+    def convert_date(str)
+      str.presence && (Date.parse(str) rescue nil)
+    end
 
-      def convert_time(str)
-        str.presence && (Time.zone.parse("#{Time.zone.today.strftime('%F')} #{str}").strftime('%H:%M') rescue nil)
-      end
+    def convert_time(str)
+      str.presence && (Time.zone.parse("#{Time.zone.today.strftime('%F')} #{str}").strftime('%H:%M') rescue nil)
+    end
 
-      def convert_datetime(date, time)
-        return nil if date.blank? || time.blank?
-        datetime = Time.zone.local(Time.zone.today.year, Time.zone.today.month, Time.zone.today.day, 0)
-        datetime = datetime.change(year: date.year, month: date.month, day: date.day)
-        datetime.change(hour: time.split(':')[0].to_i, min: time.split(':')[1].to_i, sec: time.split(':')[2].to_i)
-      end
+    def convert_datetime(date, time)
+      return nil if date.blank? || time.blank?
+      datetime = Time.zone.local(Time.zone.today.year, Time.zone.today.month, Time.zone.today.day, 0)
+      datetime = datetime.change(year: date.year, month: date.month, day: date.day)
+      datetime.change(hour: time.split(':')[0].to_i, min: time.split(':')[1].to_i, sec: time.split(':')[2].to_i)
+    end
   end
 end

data/lib/generators/infold/{install/templates → templates/install}/app/views/admin/admin_users/registrations/edit.html.haml

@@ -7,9 +7,10 @@
         .card-body{ data: {controller: "modal-form" } }
           .row.gy-3
             .col-12
-              = render Admin::Form::InputFieldsetComponent.new(form, :email, required: true, form_kind: :email_field)
+              = form.label :email, 'Email', class: 'form-label'
+              = form.email_field :email, class: 'form-control'
             .col-12
-              = render Admin::Form::InputFieldsetComponent.new(form, :password, placeholder: 'Enter only when changing password',
-                form_kind: :password_field, autocomplete: 'new-password')
+              = form.label :password, 'Password', class: 'form-label'
+              = form.password_field :password, class: 'form-control', placeholder: 'Enter only when changing password', autocomplete: 'new-password'
         .card-footer.text-end
           = form.submit t('infold.operation.update'), class: 'btn btn-primary'

data/lib/generators/infold/{install/templates → templates/install}/app/views/admin/admin_users/sessions/new.html.haml

@@ -6,10 +6,10 @@
           %h1 Infold Admin
         .mb-3
           = form.label :email, 'Email', class: 'form-label'
-          = admin_input_field_tag(form, :email, form_kind: :email_field)
+          = form.email_field :email, class: 'form-control'
         .mb-2
           = form.label :password, 'Password', class: 'form-label'
-          = admin_input_field_tag(form, :password, form_kind: :password_field)
+          = form.password_field :password, class: 'form-control'
         .mb-2
           %label.form-check
             = form.check_box :remember_me, class: 'form-check-input'

data/lib/generators/infold/templates/install/app/views/admin/common/_header_menu.html.haml

@@ -0,0 +1 @@
+%ul.navbar-nav.me-auto.mb-2.mb-lg-0

data/lib/generators/infold/{install/templates/app/views/layouts/admin.haml.tt → templates/install/app/views/layouts/admin.html.haml}

@@ -9,19 +9,15 @@
     = csrf_meta_tags
     = csp_meta_tag
     %link{:href => "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css", :rel => "stylesheet"}/
+    %link{:href => "https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css", :rel => "stylesheet"}/
     %link{:href => "https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css", :rel => "stylesheet"}/
     %link{:href => "https://npmcdn.com/flatpickr/dist/themes/dark.css", :rel => "stylesheet", :type => "text/css"}/
+    %script{:src => "https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/js/tabler.min.js"}
     %script{:src => "https://cdn.jsdelivr.net/npm/flatpickr"}
-    %script{:src => "https://npmcdn.com/flatpickr/dist/l10n/ja.js"}
-  <%- if @js_build_kind == :webpacker -%>
-    = stylesheet_pack_tag "admin", "data-turbo-track": "reload"
-    = javascript_pack_tag "admin", "data-turbo-track": "reload", defer: true
-  <%- else -%>
     = stylesheet_link_tag "admin", "data-turbo-track": "reload"
     = javascript_include_tag "admin", "data-turbo-track": "reload", defer: true
-  <%- end -%>
   %body{:class => "#{'border-top-wide border-primary' unless admin_user_signed_in?}"}
-    .page
+    #admin_wrapper
       - if admin_user_signed_in?
         %header.navbar.navbar-expand-md.navbar-dark
           .container-fluid
@@ -32,7 +28,7 @@
               = render 'admin/common/header_menu'
               %ul.navbar-nav.ms-auto.mb-2.mb-lg-0
                 %li.nav-item
-                  = link_to 'Users', admin_admin_users_path, class: 'nav-link'
+                  = link_to 'ADMIN USERS', admin_admin_users_path, class: 'nav-link'
                 %li.nav-item.dropdown
                   %a.nav-link.dropdown-toggle#header_current_user{ role: :button, data: { bs_toggle: :dropdown } }
                     = current_admin_user.email
@@ -43,7 +39,7 @@
                     %li
                       = button_to 'Logout', destroy_admin_user_session_path, class: 'dropdown-item', method: :delete
       = yield
-    = turbo_frame_tag "modal_main", target: "_top"
-    = turbo_frame_tag "modal_optional", target: "_top"
-    #flashes
-      = render 'admin/common/flash'
+      = turbo_frame_tag "modal_main", target: "_top"
+      = turbo_frame_tag "modal_sub", target: "_top"
+      #flashes
+        = render 'admin/common/flash'

data/lib/generators/infold/templates/install/config/infold/admin_user.yml

@@ -0,0 +1,31 @@
+model:
+  validate:
+    email: presence
+    password: presence
+  decorator:
+  association:
+  enum:
+  active_storage:
+app:
+  title: AdminUser
+  index:
+    conditions:
+      - email:
+          sign: eq
+    list:
+      fields:
+        - email
+      default_order:
+    csv:
+      fields:
+  show:
+    fields:
+      - email
+      - created_at
+      - updated_at
+  form:
+    fields:
+      - email:
+          kind: email
+      - password:
+          kind: password

data/lib/generators/infold/{install/templates → templates/install}/config/locales/infold.en.yml

@@ -4,17 +4,18 @@ en:
     operation:
       create: Create
       edit: Edit
+      show: Details
       update: Update
       delete: Delete
       submit: Submit
       cancel: Cancel
       clear: Clear
       new: Create New
-      add: Add
+      add: ADD
       search: Search
       setting: Setting
       output_csv: Output CSV
-      confirm: "Are you sure you want to %{submit} it?"
+      confirm: Are you sure?
     flash:
       created: Successfully created
       updated: Successfully updated

data/lib/generators/infold/{install/templates → templates/install}/config/locales/infold.ja.yml

@@ -4,6 +4,7 @@ ja:
     operation:
       create: 登録
       edit: 編集
+      show: 参照
       update: 更新
       delete: 削除
       submit: 登録