Repository: mathesar-foundation/mathesar

Issue:
Implement showing and changing a column's type
## Problem
<!-- Please provide a clear and concise description of the problem that this feature request is designed to solve.-->
Users might want to change the data type of an existing column on their table.

## Proposed solution
<!-- A clear and concise description of your proposed solution or feature. -->
The ["Working with Columns" design spec](https://wiki.mathesar.org/en/design/specs/working-with-columns) has a solution for showing and changing column types, which we need to implement on the frontend.

Please note that we're only implementing changing the Mathesar data type in this milestone. Options specific to individual data types will be implemented in the next milestone.

Number data types should save as `NUMERIC`.
Text data types should save as `VARCHAR`.
Date/time data types can be disabled for now since they're not fully implemented on the backend.

## Additional context
<!-- Add any other context or screenshots about the feature request here.-->
- Backend work:
  - #532 to get the list of types 
  - #199 to get valid target types and change types 
- Design issue: #324 
- Design discussion: #436
- #269 


Discussion:
Please assign this to me, @kgodey
I have some suggestions in regards to the implementation. Figma linked in the wiki wasn't very helpful, unfortunately. If I shouldn't be asking this here, let me know.  

1. Within the column dropdown, have another dropdown listing all available valid data types. Clicking a dropdown option will close the dropdown and change the data type. 
2. Allow the small indicator (i.e. **T** mathesar id) to be clickable, which will display a dropdown listing all available valid data types. 

@asharonbaltazar could you elaborate on Figma not being helpful? it's a clickable prototype that shows you different actions you can take, and there should indeed be list of types in the column dropdown. Here are some screenshots I took from the prototype:

![▶_Column_Mathesar_MVP](https://user-images.githubusercontent.com/287034/129772448-aa123843-a3d3-4885-a83d-1d1fdb82585a.png)

![▶_Column_Mathesar_MVP-2](https://user-images.githubusercontent.com/287034/129772456-531c0e45-7454-4ca1-ba80-849a0e207083.png)

Oh, sorry about that. I was referring to the Figma linked in the Working with Columns wiki page. 

Thank you for this. 
@asharonbaltazar This is the same Figma prototype linked from the page. :). Let me know if you can't see the interactivity, there's more detail there that's not captured in the screenshots.

Resolving patch:
diff --git a/mathesar/views.py b/mathesar/views.py
--- a/mathesar/views.py
+++ b/mathesar/views.py
@@ -1,7 +1,7 @@
 from django.shortcuts import render, redirect, get_object_or_404
 
 from mathesar.models import Database, Schema, Table
-from mathesar.api.serializers.databases import DatabaseSerializer
+from mathesar.api.serializers.databases import DatabaseSerializer, TypeSerializer
 from mathesar.api.serializers.schemas import SchemaSerializer
 from mathesar.api.serializers.tables import TableSerializer
 
@@ -35,13 +35,25 @@ def get_table_list(request, schema):
     return table_serializer.data
 
 
+def get_type_list(request, database):
+    if database is None:
+        return []
+    type_serializer = TypeSerializer(
+        database.supported_types,
+        many=True,
+        context={'request': request}
+    )
+    return type_serializer.data
+
+
 def get_common_data(request, database, schema=None):
     return {
         'current_db': database.name if database else None,
         'current_schema': schema.id if schema else None,
         'schemas': get_schema_list(request, database),
         'databases': get_database_list(request),
-        'tables': get_table_list(request, schema)
+        'tables': get_table_list(request, schema),
+        'abstract_types': get_type_list(request, database)
     }
 
 


Test patch: