felicious / boba-bill-2 Goto Github PK

Referencing #31, it would be nice that, once friend icons are added, their icons are displayed in the minimized view of a Transaction to preview who participates in this transaction.

Will need to determine:

1. A function to generate a list of unique friends from both payers and ppl the bill is split betw (to display these)
   

2. Possibly consider using an additional, empty placeholder at the end so that the icons aren't smushed next to the cost like in the "Fugetsu" example above

This will be a thread to keep track of the development of my UI! From "crusty," to MVP, to "something I can actually show my friends."

Here's the first entry, one can ask whether the page is even complete yet x:

Expected Behavior: pressing a "Calculate" button in the file CalculateList will calculate how much a person owes from all transactions. Adding a new transaction and pressing the "Calculate" button again will tally up how much each person from that new transaction only.

Actual behavior: Pressing "Calculate" the second time will recount previously tallied transactions, doubling people's debts.

Possible solutions:

1. resetting all previously calculated debts before running the function (seems like a waste of computation power)
2. What I plan to do: When calculating transactions in calculateOwed, include a flag indicating whether a transaction has been tallied or not.

When I tried to clear the error array by setting it to an empty array, the empty array is returned in the function, even though the local error array stores errors that get added later. the error array is acting like a const, like it's not modify-able

Expected behavior: a focus-able button that switches to the next ascending tab

In TransactionList.vue, I envision the user-created transactions to be a row of CSS-styled boxes, each containing the transaction details of each one. look for <div class="display"> for where the location of this section.

Maybe add a sketch below as well?

Expected behavior: already added transactions are displayed above the form. POTENTIALLY could minimize these transactions, perhaps only showing the business name, price, and icons (first letter of their name?) of the users

Originally decided to display a maximum of 3 transactions in each row, like pictured below:

Things that need to be improved:

1. Alignment of the text in the minimized ver ( name of business, cost, and expand button [+])
   expected appearance: there should be more space between the name and cost, and the button should be aligned right and kind of by itself. The name and cost should be on the same line (aligned vertically), despite different font size and font style.

Currently, the tabs have an invisible <span> element attached called tab-front. This is supposed to be the gray line that appears under the tab name when hovering (see pic below)

.tab-front {
  position: relative;
  margin: 0 0 1rem 0;
  display: flex;
  justify-content: center;
  height: 1.75rem;
  width: 120%;
  /*picked a random light gray */
  border-bottom: 5px none;
}

Expected Behavior: I want the line to be pink when a component is active

However, Im not sure how to implement this. I attempted to use the :style bindings as suggested in this StackOverflow post but I don't think I did it correctly.

For reference, my code is:

<button
      v-for="(tab, index) in tabs"
      :key="index"
      class="tab"
      :class="['tab-button', { active: tab === activeTab }, 'toggleLine']"
      @click="(activeTab = tab), changeColor"
    >
      <span class="tab-front" :style="{ lineColor: computedLine }">{{
        tab
      }}</span>

this.lineColor is set to empty string initially.

data(){
lineColor: ""
}
`changeColor` is a method, `computedLine` is a computed method.
The method definition is
```js
changeColor() {
      console("this method isn't being called");
      console.log("I'm expecting to change the css of tab-front from this method, but it's not doing anyhting");
      this.lineColor = "border-bottom: 5px solid #f09381";
    }

and the computed method is

computedLine() {
      console.log("this gets called at every initialization but not when the tabs get changed, to my surprise. This should be called everytime a new tab is clicked");
      console.log(this.lineColor); //this returns an empty string
      return this.lineColor;
    }

Expected behavior

unchecking checkbox should remove the name of the friend from the list

When hovering over an unselected tab, a thin gray line appears from the center and expands to 120% of the width of the word.

ex:
friend -> friend -> friend
.. ..... ...................

    
    https://github.com/Felicious/Boba-Bill-2/blob/e9a8345a3735c5e09b4733e6da6be82b9c10cb15/assets/Stylesheet.css#L53

Expected Behavior: edits inside the form component InputForm inside every instance of Transaction do not affect the InputForm instance in TransactionList

While editing transactions, pressing backspace while trying to erase the old restaurant name causes the form to automatically submit.

Forms should only submit when the button is pressed.

There is currently an error array in TransactionList, but the errors aren't checked. Add user input validations to make sure the forms are submitted correctly

Right now, after adding friends and transactions, you cannot edit or delete them.

Implement an edit feature, that upon clicking a pen icon or something, the component can be updated. May need to know how to listen for prop changes.

Expected behavior:

• friend and business names saved as all lowercase
• but maybe capitalize the first letter while displaying ); how do i do that

Workaround required:

Can use .sync modifier to emit an array of names whose checkboxes are clicked from SplitBetw.vue, but unable to save that as a field of an object like localForm.friends.

Doesn't work:

<h2>Split Between</h2>
      <SplitBetw
        v-for="friend in friends"
        :key="friend"
        :name="friend"
        type="split"
        :returnedCheckboxes.sync="localForm.friends"
      />

localForm.friends returns a boolean, EXPECTS an array, as the component SplitBetw returns an array, but for some reason it comes out as a boolean.

Add a display (possibly boxes? need to do a mockup for this!) of what each friend owes. Can possibly expand to see the breakdowns of where they spent money at which business

Currently, any edits when editing a transaction in InputForm are immediately passed to the grandparent component, TransactionList. This should only happen when the form is submitted, so idk how this is happening.

Expected behavior: apply pink underline ('tab-front') to the active component only; other components get gray underline

What's happening: all underlines are pink.

Observation: computed method computedLine() is applying the pink color to all lines.

Checking the box should add the name of the friend to selectedFriends array

When testing my form, I had two checkboxes, "Derrick" and "Bunbun," and after selecting the checkbox for "Derrick," clicking on the label for "Bunbun" un-selects Derrick!!!

Expected Behavior: clicking on the label for another checkbox should add it to the "selected" list, not de-select "Derrick"

Expected Behavior: user can select from pre-illustrated 16x16 images to serve as a profile pic/icon when adding their name. Very low priority

After pressing the "Calculate" button, a loading button will show up to indicate the app is calculating the bills. The user can not press the button anymore.

Question: does the component need to be asynchronous to achieve this behavior like in the docs?

When attempting to add a new transaction, input field for expense/cost resets to 0, regardless of what number is entered before.

Expected behavior: Entering a number in the field saves the number as the transaction's expense.

Expected Behavior: while filling out a new transaction, a user can indicate that they'd like to calculate using a custom split, which means that the bill won't be split evenly among participants like in the default setting.

Expected behavior: long-ass friend name wraps onto new row and not outside of the container

In my two uses of the component InputForm, the color of the textbox input for Business name needs to be different. In the top iteration of InputForm, the color is white and it's impossible to see, but if I set it to black, it would be impossible to see the business name at the bottom, for "Fugetsu".

Therefore, there must be a way to use an "if" statement to determine which font color to use depending on the situation?

In April 2020, I began working on the first version of this project using complete vanilla js and html, and it was kinda a mess. It would be great to compare the two (even tho the first was never completed) in the interests of highlighting how much easier as a web developer using a framework, as well as how much I've learned thus far. (:

This issue is more of a description of a bug I encountered.

I had a grandparent component TransactionList that was waiting to receive updates from its grandchild, InputForm. (this commit doesn't explicitly have this problem but it's the approximate time i encountered it 299b13d )

I was doing something unconventional that passed emit events from grandchild to parent to grandparent, like this:
Grandchild:

this.$emit(update:parent, the data)

which triggered this function in parent

< Grandchild @update:parent="emitToGran" />

... 
methods: {
   emitToGran(data){
      this.$emit("update:gran", data)
   }
}

Then the grandparent would receive
<Parent @update:gran="doSomething" />

I would get the handler.apply is not a functionerror alert in Parent, and i didn't know how it happened. I simply fixed this issue by emitting straight from grandchild to grandparent by replacing the emit command in grandchild to "update:gran"! (didn't know u could do that

Currently, the box to fill in the amount spent at a business simply has a "$" as the placeholder for when the input box is empty. Once user types in a number, the dollar sign disappears

Expected behavior: Dollar sign is displayed to the left of the user-inputed numerical value.

Ex: displays $ 10 when user types 10

In the picture below, note the empty space in "Fugetsu" box caused by expanding the transaction display for "Shihlin Street Snacks"

In the future, I also have to consider how to display transactions that occur after.

TODO:

1. Determine whether un-expanded boxes should stack together, to the height of the expanded box, or

2. move the expanded box to the top of the list and have it by itself, and display the non-expanded ones together. The complication for this one would be, what would happen if more than one box were expanded?

Want to systemize the css design process by having a procedure:

• Decide and implement how much shadow within and around an input box, and use this same setting across all input boxes
• Only idea for now, but will add more as I learn more css! (:

Currently, there is a lot of white space to the right of our screen:

Using the "Holy Grail" layout with a constrained space of content in the middle and flexible empty space at the sides, implement following this tutorial to center the app content to make it more readable.

Expected behavior: after pressing the submit button on the bottom of the form, if there are errors, scroll to the errors

Perhaps something like this: https://stackoverflow.com/questions/25020582/scrolling-to-an-anchor-using-transition-css3

In the display of multiple transactions, the [+] indicates that pressing this will expand the box, displaying the details of that transaction. However, it's not made clear because the mouse doesn't change into the select hand icon that makes it obvious that the [+] is clickable. Therefore,

Expected behavior: mouse cursor changes to the pointer hand icon upon hovering over "[+]" in Transaction

After finishing the component TransactionList, I realized that 47 lines of the template does not relate to the TransactionList, but are all form inputs. So, I should completely move all of this into a new component titled FormInput or something

In the beginning of my project, I had copied someone's example of how to make a Todo list, but didn't completely understand how his code worked. I had hoped that I would understand it later when I understand Vue more, but I'm still clueless.

Below, I do not understand why in the InputText file, we need to use computed and listeners() to override input. I've been writing regular named methods to listen and handle an event, but I do not understand when it'd be better to use this computed method of overriding input to emit event.target.value (btw what is event.target.value???)

  <input type="text" class="input" :value="value" v-on="listeners" />

export default {
  props: {
    value: {
      type: String
    }
  },

  computed: {
    // don't really understand the copied code, but look at
    // DOCS: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

    listeners() {
      return {
        // Pass all component listeners directly to input
        ...this.$listeners,
        // Override input listener to work with v-model
        input: event => this.$emit("input", event.target.value)
      };
    }
  }
};

Is it because this InputText child component is actually listening for a @keydown keystroke in the parent component, FriendList?

<InputText
      v-model="newFriendName"
      placeholder="add a friend here!"
      @keydown.enter="addFriend"
    />

And that somehow, the computed listeners is how to write an event handler in the child when listening for an event that occurs in parent? that's how I'm interpreting how the code works now, but I'm really not sure.

When pressing "submit" repeatedly, error messages are added to "errors" array, even if the error has already been added.

expected behavior: once an error has been added, it does not need to be added once more

Expected behavior: unchecked checkboxes should have a gray outline

Referenced code:

so im in this parent component TransactionList and i want to implement a function that modifies an existing transaction im not sure how to do this

TransactionList has two child components: Transaction, a component that individually displays each transaction on the list, and InputForm, the component that contains the form that creates the transaction in the first place

when the user wants to edit a transaction, they would click the "Edit" button inside one of the instances of the Transaction component

and i was thinking the app would auto-fill the info of that instance in the sibling component, InputForm, and the user would make the edits there and press submit

but i feel like... this is quite complicated? because the instance of Transaction triggers a method in a sibling component, something i've never done before

and now InputForm, this child component would have 2 different things it'd emit; a new transaction and an edited one

this is all because i thought it would be too much work to build a new form to edit the transaction in the Transaction component, where the "edit" button would be triggered

Currently, friends is an array of objects {id: 0, text: meowmeow}, and only the text is required. Change the friends array into an array of strings

Style tabs according to the design in this mockup:
https://github.com/Felicious/Boba-Bill-2/blob/main/images/mockup/friends-mockup-mobile.png

In addition, transitions between the tabs should slide right -> when changing tabs from a tab on the left to right, and content of the tab should slide/(enter from the) left when the destination tab is left of original tab.

tab 1 tab 2
changing from tab 1 to tab 2 -> slide right
changing from tab 2 to tab 1 -> slide left

Expected behavior: before adding a friend name in FriendList, need to check if the user attempted to submit an empty name.

If the name is empty, alert them, and give them a suggested name. Perhaps can auto-fill that name for them, for their convenience?

The child component InputForm now successfully emits the user's responses as an object.

Expected behavior: The parent component TransactionList should take the emitted object and add it to the list of transactions named transactions!

Possible solution: include a v:on modifier that triggers a function that pushes the new transaction to the existing transaction array.

The method "addTransaction" needs to be initialized. The following is the error message:

[Vue warn]: Property or method "addTransaction" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <InputForm> at components/InputForm.vue
       <TransactionList> at components/TransactionList.vue
         <App> at App.vue
           <Root>

Currently, the design for editing a friend name is ugly and doesn't have UI design that makes the user want to interact with it:

Style the input box somehow so that it's prettier

Currently, InputForm works just fine, but it would be great practice implementing dynamic components in this project. There are two instances of InputForm:

1. an empty form used to add a new transaction
2. used to edit transactions after pressing the "edit" button

They are differentiated from each other from the fact that the "edit transactions" instances have existing values to start with.

By using class bindings through guard expressions described in this blog post, I can toggle styles for each instance in a cleaner way.