PC-107: create items with single parameters is_open, is_fixed, is_selectable_options

Author: IvanRuskevych

app/assets/stylesheets/application/form_group.scss

@@ -36,7 +36,6 @@
       right: 12px;
     }
   }
-
 }
 
 .pc-item-input.price {
@@ -75,7 +74,7 @@
   .form-control {
     padding-left: 24px;
     border: 1.3px solid $secondary;
-    color: $dark
+    color: $dark;
   }
 
   .pc-suffix-right {
@@ -84,17 +83,16 @@
   }
 
   ::placeholder {
-    color: $dark
+    color: $dark;
   }
 }
 
 .pc-item-input.tier {
   .form-select {
-    border: 1px solid red;
-    //padding: 7px 12px;
-    max-width: 200px !important;
+    padding: 7px 12px;
+    width: 200px;
+    border: 1px solid $primary;
     border-radius: 4px;
-    //color: $dark;
   }
 }
 
@@ -103,7 +101,7 @@
   .form-control {
     padding-right: 24px;
     border: 1.3px solid $primary;
-    color: $dark
+    color: $dark;
   }
 
   .pc-suffix-right {
@@ -112,7 +110,7 @@
   }
 
   ::placeholder {
-    color: $dark
+    color: $dark;
   }
 }
 
@@ -188,7 +186,6 @@
   }
 }
 
-
 // Hide spin for input with type = 'number'
 .nospin::-webkit-outer-spin-button,
 .nospin::-webkit-inner-spin-button {

app/javascript/components/pages/ItemsPricing.jsx

@@ -13,7 +13,7 @@ const initItemsData = [
       name: 'Fixed price',
       description: '',
       category_id: 16,
-      fixed_parameters: {Price: '2500'},
+      fixed_parameters: { Price: '2500' },
       pricing_options: {},
       is_disabled: false,
       is_fixed: true,
@@ -31,7 +31,7 @@ const initItemsData = [
       name: 'Open parameter',
       description: '',
       category_id: 16,
-      fixed_parameters: {Price: '2500'},
+      fixed_parameters: { Price: '2500' },
       pricing_options: {},
       is_disabled: false,
       is_fixed: false,
@@ -113,7 +113,7 @@ const initItemsData = [
 ]
 
 export const ItemsPricing = () => {
-  const {navigate, queryParams, location} = useAppHooks()
+  const { navigate, queryParams, location } = useAppHooks()
 
   const [selectedCategories, setSelectedCategories] = useState([])
   const [expandedAccordions, setExpandedAccordions] = useState([]) // array of IDs
@@ -132,7 +132,7 @@ export const ItemsPricing = () => {
     setIsShowDeleteModal(true)
   }
   const handleToggle = (id) => {
-    setExpandedAccordions((prev) => (prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]))
+    setExpandedAccordions((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]))
   }
   const handleConfirmDeleteCategory = () => {
     setSelectedCategories(prev => prev.filter(category => category.id !== categoryIdToDelete))
@@ -146,7 +146,7 @@ export const ItemsPricing = () => {
     setIsShowDeleteModal(false)
   }
 
-  const expandAll = () => setExpandedAccordions(selectedCategories.map(category => category.id))
+  const expandAll = () => setExpandedAccordions(selectedCategories.map((category) => category.id))
   const collapseAll = () => setExpandedAccordions([])
   const handleDownload = () => {
     // await fetchQuotes.update(quoteId, {
@@ -160,7 +160,7 @@ export const ItemsPricing = () => {
   return (
     <Container className={'wrapper pt-10 pb-8'}>
       <section className={'mb-12 px-8'}>
-        <QuoteCreation currentStepId={currentStepId}/>
+        <QuoteCreation currentStepId={currentStepId} />
 
         {/* Items & Pricing dashboard*/}
         <ItemsPricingTopBar
@@ -202,7 +202,7 @@ export const ItemsPricing = () => {
                       setIsNotesShow={setIsNotesShow}
                       notesIcon={notesIcon}
                     >
-                      <ItemTotalPrice itemData={item.attributes} className={'mb-4'}/>
+                      <ItemTotalPrice itemData={item.attributes} className={''} />
 
                       {isNotesShow && (
                         <PcItemFormGroup label={'Notes'} itemType={'notes'}>
@@ -245,7 +245,7 @@ export const ItemsPricing = () => {
       </section>
 
       {/*Modal for confirm delete/cancel category*/}
-      <DeleteItemModal/>
+      <DeleteItemModal />
       <DeleteItemModal
         show={isShowDeleteModal}
         onHide={handleCancelDeleteCategory}

app/javascript/components/shared/ItemTotalPrice.jsx

@@ -38,28 +38,28 @@ export const ItemTotalPrice = ({
   useEffect(() => {
     const discountValue = Number(discount)
     const baseValue = isItemOpen
-                      ? Number(openParamValue)
-                      : isItemSelectableOptions
-                        ? Number(selectableValue)
-                        : fixedValue
+      ? Number(openParamValue)
+      : isItemSelectableOptions
+        ? Number(selectableValue)
+        : fixedValue
     const calculatedValue = baseValue - (baseValue * discountValue) / 100
 
     setDiscounted(discountValue > 0 ? calculatedValue : baseValue)
   }, [discount, fixedValue, openParamValue, selectableValue, isItemOpen, isItemSelectableOptions])
 
   return (
-    <div className={`px-0 ${className}`}>
+    <div className={`d-flex flex-column gap-3 px-0 ${className}`}>
       <Row className={'g-3 justify-content-end'}>
         {isItemFixed && (
           <Col sm={'auto'}>
             <PcItemFormGroup itemType={itemTypeOne} label={labelOne}>
-              <PcItemInputControl itemType={itemTypeOne} value={fixedValue}/>
+              <PcItemInputControl itemType={itemTypeOne} value={fixedValue} />
             </PcItemFormGroup>
           </Col>
         )}
         <Col sm={'auto'}>
           <PcItemFormGroup itemType={itemTypeTwo} label={labelTwo}>
-            <PcItemInputControl itemType={itemTypeTwo} value={formatPrice(discounted)}/>
+            <PcItemInputControl itemType={itemTypeTwo} value={formatPrice(discounted)} />
           </PcItemFormGroup>
         </Col>
       </Row>

config/database.yml

@@ -1,8 +1,8 @@
 default: &default
   adapter: postgresql
   encoding: unicode
-  username: fsdev
-  password: fsdev
+  username: postgres
+  password:
   pool: <%= ENV.fetch('RAILS_MAX_THREADS') { 5 } %>
 
 development: