loader added

chaskiq · Nov 15, 2023 · 62f99af · 62f99af
1 parent f79ea06
commit 62f99af
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 196 deletions.
diff --git a/app/frontend/components/button_renderer/index.scss b/app/frontend/components/button_renderer/index.scss
@@ -1,214 +1,109 @@
 /* Use component-local class names and add them to HTML via #class_for(name) helper */
 
 .button-wrapper {
-  &.left {
-    @apply flex justify-start;
-  }
+	&.left {
+		@apply flex justify-start;
+	}
 
-  &.center {
-    @apply flex justify-center;
-  }
+	&.center {
+		@apply flex justify-center;
+	}
 
-  &.right {
-    @apply flex justify-end;
-  }
+	&.right {
+		@apply flex justify-end;
+	}
 
- & button {
-    @apply transition duration-150 ease-in-out;
+	& button {
+		@apply transition duration-150 ease-in-out;
 
-    &.xs {
-      @apply px-2 py-1 text-xs font-medium;
-    }
+		&.xs {
+			@apply px-2 py-1 text-xs font-medium;
+		}
 
 		&.default,
-    &.sm,
-    &.small {
-      @apply px-2.5 py-1.5 text-xs leading-4;
-    }
-
-    &.md,
-    &.medium {
-      @apply px-4 py-2 text-sm leading-7 font-medium uppercase;
-    }
-		
-    &.lg,
-    &.large {
-      @apply px-8 py-4 text-xl font-light uppercase;
-    }
-
-    /* const isIcon = props.variant === "icon" ? 'p-1' : 'px-2 py-1'
+		&.sm,
+		&.small {
+			@apply px-2.5 py-1.5 text-xs leading-4;
+		}
+
+		&.md,
+		&.medium {
+			@apply px-4 py-2 text-sm leading-7 font-medium uppercase;
+		}
+
+		&.lg,
+		&.large {
+			@apply px-8 py-4 text-xl font-light uppercase;
+		}
+
+		/* const isIcon = props.variant === "icon" ? 'p-1' : 'px-2 py-1'
 			if (props.variant === 'icon') {
 				@applyp-1`
 			} else {
 				@applypx-2 py-1 text-sm font-medium leading-7`
 			}
 		*/
 
-
-    &.success {
-      @apply outline-none 
-						rounded-md 
-						bg-green-400 
-						text-white
-						hover:bg-green-500 
-						focus:outline-none 
-						focus:border-green-700 
-						focus:shadow-outline;
-    }
-
-    &.flat {
-      @apply inline-flex 
-						items-center 
-						border 
-						border-transparent 
-						text-xs 
-						font-medium 
-						rounded 
-						text-indigo-700 
-						bg-indigo-100 
-						hover:bg-indigo-200 
-						focus:outline-none;
-    }
-
-    &.flat-dark {
-      @apply flex
-							items-center
-							border 
-							border-transparent 
-							rounded 
-							text-gray-100 
-							bg-gray-900 
-							hover:bg-gray-800 
-							focus:outline-none 
-							focus:border-gray-700;
-      /*active:bg-gray-800 ;*/
-    }
-
-    &.main {
-      @apply outline-none 
-							inline-flex 
-							items-center 
-							border 
-							border-transparent 
-							rounded-md 
-							text-white bg-indigo-600 
-							hover:bg-indigo-500 
-							focus:outline-none 
-							focus:shadow-outline 
-							focus:border-indigo-700;
-      /*active:bg-indigo-700;*/
-    }
-    &.link {
-      @apply flex text-indigo-700 hover:text-indigo-900 inline-flex items-center;
-    }
-
-    &.clean {
-    }
-
-    &.outlined {
-      @apply flex 
-		items-center
-		inline-flex 
-		justify-center 
-		px-4 
-		py-2 
-		border 
-		border-gray-300 
-		shadow-sm 
-		text-sm 
-		font-medium 
-		rounded-md 
-		text-gray-700 
-		dark:bg-black
-
-		bg-white 
-		hover:bg-gray-50 
-
-		dark:text-gray-100 
-		dark:hover:bg-gray-900
-
-		focus:outline-none 
-		focus:ring-2 
-		focus:ring-offset-2 
-		focus:ring-pink-500;
-    }
-
-    &.outlined-transparent {
-      @apply flex 
-		items-center
-		inline-flex 
-		justify-center 
-		px-4 
-		py-2 
-		border 
-		border-gray-900 
-		shadow-sm 
-		text-sm 
-		font-medium 
-		rounded-md 
-		text-gray-100
-		bg-transparent
-		hover:text-gray-800 
-		focus:outline-none 
-		focus:ring-2 
-		focus:ring-offset-2 
-		focus:ring-pink-500;
-    }
-    &.icon {
-      @apply outline-none 
-						rounded-full 
-						p-1 
-						bg-transparent
-						hover:text-gray-400;
-    }
-
-    &.danger {
-      @apply outline-none 
-						rounded 
-						bg-red-400 
-						text-white
-						hover:bg-red-500 
-						focus:outline-none 
-						focus:border-red-700 
-						focus:shadow-outline;
-    }
-
-    &.default {
-      @apply flex flex-wrap items-center rounded border  
-			border-transparent 
-			text-indigo-700 dark:bg-white dark:text-gray-900
-			dark:hover:text-gray-600
-			dark:hover:bg-gray-200
-			bg-indigo-100 
-			hover:bg-indigo-200
-			focus:outline-none 
-			focus:border-indigo-300;
-      /*active:bg-indigo-200;*/
-    }
-  }
+
+		&.success {
+			@apply outline-none rounded-md bg-green-400 text-white hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline;
+		}
+
+		&.flat {
+			@apply inline-flex items-center border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none;
+		}
+
+		&.flat-dark {
+			@apply flex items-center border border-transparent rounded text-gray-100 bg-gray-900 hover:bg-gray-800 focus:outline-none focus:border-gray-700;
+			/*active:bg-gray-800 ;*/
+		}
+
+		&.main {
+			@apply outline-none inline-flex items-center border border-transparent rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline focus:border-indigo-700;
+			/*active:bg-indigo-700;*/
+		}
+
+		&.link {
+			@apply flex text-indigo-700 hover:text-indigo-900 inline-flex items-center;
+		}
+
+		&.clean {}
+
+		&.outlined {
+			@apply flex items-center inline-flex justify-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:bg-black bg-white hover:bg-gray-50 dark:text-gray-100 dark:hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500;
+		}
+
+		&.outlined-transparent {
+			@apply flex items-center inline-flex justify-center px-4 py-2 border border-gray-900 shadow-sm text-sm font-medium rounded-md text-gray-100 bg-transparent hover:text-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500;
+		}
+
+		&.icon {
+			@apply outline-none rounded-full p-1 bg-transparent hover:text-gray-400;
+		}
+
+		&.danger {
+			@apply outline-none rounded bg-red-400 text-white hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline;
+		}
+
+		&.default {
+			@apply flex flex-wrap items-center rounded border border-transparent text-indigo-700 dark:bg-white dark:text-gray-900 dark:hover:text-gray-600 dark:hover:bg-gray-200 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:border-indigo-300;
+			/*active:bg-indigo-200;*/
+		}
+	}
 
 
 	.text-input-button {
 
-		@apply -ml-px relative inline-flex items-center
-			text-sm leading-5 
-			font-medium
-			rounded-r-md 
-			transition ease-in-out duration-150
-			text-gray-800
-			bg-gray-100
-			dark:bg-gray-900 
-			dark:text-gray-200 
-			dark:bg-gray-700
-			hover:text-gray-600 
-      hover:bg-gray-100 
-      active:bg-gray-100 
-      active:text-gray-700
-			border-t
-			border-b
-      border-r
-			hover:border-gray-200 
-      border-gray-200;
+		@apply -ml-px relative 
+		inline-flex items-center text-sm leading-5 
+		font-medium rounded-r-md transition ease-in-out 
+		duration-150
+		 text-gray-800 bg-gray-100 border-gray-100
+		 dark:text-gray-200 dark:bg-gray-700
+	  	hover:text-gray-600 hover:bg-gray-200 hover:border-gray-200
+		 active:bg-gray-100 active:text-gray-700 
+		 border-t-2 border-b-2 border-r
+		 px-2.5 py-2;
 
 
 		&.sm {
@@ -217,4 +112,4 @@
 
 
 	}
-}
+}
diff --git a/app/frontend/components/loader/component.html.erb b/app/frontend/components/loader/component.html.erb
@@ -0,0 +1,7 @@
+<div class="w-full flex justify-center items-center" 
+  data-messenger-target="loader">
+  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+  </svg>
+</div>
diff --git a/app/frontend/components/loader/component.rb b/app/frontend/components/loader/component.rb
@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Loader::Component < ApplicationViewComponent
+  option :size, default: -> {}
+end
diff --git a/app/views/apps/inbound_settings/_form_fields.html.erb b/app/views/apps/inbound_settings/_form_fields.html.erb
@@ -4,12 +4,8 @@
     <%= I18n.t('settings.inbound.title')%>
   </p>
 
-  <% #= form.object.as_json %>
-
   <%= form.fields_for :"#{namespace}_attributes", form.object.send(@namespace) do |fff| %>
 
-    <%= fff.object.as_json %>
-
     <div>
       <%= fff.check_box :enabled_inbound, label: I18n.t('settings.inbound.checkbox'), hint: nil %>
     </div>

diff --git a/app/views/apps/segments/edit_segment.turbo_stream.erb b/app/views/apps/segments/edit_segment.turbo_stream.erb
@@ -0,0 +1,20 @@
+
+<%= turbo_stream.replace("segment_form") do %>
+  <%= render "apps/segment_manager/form", {
+      segment_manager: @segment_manager,
+      changed: @segment.predicates.to_json != @segment_manager.predicates.to_json,
+      incomplete: @segment_manager.predicates.any? { |o| o.value.nil? },
+      url_form: edit_segment_app_segment_path(@app.key, @segment)
+    }
+  %>
+<% end %>
+
+<% unless @segment_manager.predicates.find { |o| o.value.nil? } %>
+
+  <%= turbo_stream.replace("segment-table") do %>
+    <%= turbo_frame_tag "segment-table", src: table_app_segments_path(@app.key, segments: @segment_manager.predicates.to_json) do %>
+      <%= render Loader::Component.new %>
+    <% end %>
+  <% end %>
+
+<% end %>
diff --git a/app/views/apps/segments/table.html.erb b/app/views/apps/segments/table.html.erb
@@ -0,0 +1,2 @@
+
+<%= render 'apps/segment_manager/table', segment_manager: @segment_manager, results: @app_users %>